-
-
Notifications
You must be signed in to change notification settings - Fork 88
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
14 changed files
with
346 additions
and
22 deletions.
There are no files selected for viewing
7 changes: 7 additions & 0 deletions
7
apps/api/prisma/migrations/20230917161539_dashboard_layout_order/migration.sql
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| -- CreateEnum | ||
| CREATE TYPE "DashboardLayoutCardType" AS ENUM ('ACTIVE_CALLS', 'ACTIVE_BOLOS', 'ACTIVE_WARRANTS', 'ACTIVE_OFFICERS', 'ACTIVE_DEPUTIES', 'ACTIVE_INCIDENTS'); | ||
|
|
||
| -- AlterTable | ||
| ALTER TABLE "User" ADD COLUMN "dispatchLayoutOrder" "DashboardLayoutCardType"[], | ||
| ADD COLUMN "emsFdLayoutOrder" "DashboardLayoutCardType"[], | ||
| ADD COLUMN "officerLayoutOrder" "DashboardLayoutCardType"[]; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
156 changes: 156 additions & 0 deletions
156
apps/client/src/components/shared/utility-panel/edit-dashboard-layout-modal.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,156 @@ | ||
| import * as React from "react"; | ||
| import { DashboardLayoutCardType } from "@snailycad/types"; | ||
| import { Modal } from "components/modal/Modal"; | ||
| import { useRouter } from "next/router"; | ||
| import { useModal } from "state/modalState"; | ||
| import { ModalIds } from "types/modal-ids"; | ||
| import { ReactSortable } from "react-sortablejs"; | ||
| import { ArrowsMove } from "react-bootstrap-icons"; | ||
| import { useAuth } from "context/AuthContext"; | ||
| import { Button, Loader } from "@snailycad/ui"; | ||
| import { useTranslations } from "use-intl"; | ||
| import useFetch from "lib/useFetch"; | ||
| import { toastMessage } from "lib/toastMessage"; | ||
|
|
||
| const cardTypes: Record<"ems-fd" | "officer" | "dispatch", DashboardLayoutCardType[]> = { | ||
| "ems-fd": [ | ||
| DashboardLayoutCardType.ACTIVE_CALLS, | ||
| DashboardLayoutCardType.ACTIVE_DEPUTIES, | ||
| DashboardLayoutCardType.ACTIVE_OFFICERS, | ||
| ], | ||
| officer: [ | ||
| DashboardLayoutCardType.ACTIVE_CALLS, | ||
| DashboardLayoutCardType.ACTIVE_BOLOS, | ||
| DashboardLayoutCardType.ACTIVE_WARRANTS, | ||
| DashboardLayoutCardType.ACTIVE_OFFICERS, | ||
| DashboardLayoutCardType.ACTIVE_DEPUTIES, | ||
| ], | ||
| dispatch: [ | ||
| DashboardLayoutCardType.ACTIVE_OFFICERS, | ||
| DashboardLayoutCardType.ACTIVE_DEPUTIES, | ||
| DashboardLayoutCardType.ACTIVE_CALLS, | ||
| DashboardLayoutCardType.ACTIVE_INCIDENTS, | ||
| DashboardLayoutCardType.ACTIVE_BOLOS, | ||
| ], | ||
| }; | ||
|
|
||
| export function EditDashboardLayoutModal() { | ||
| const common = useTranslations("Common"); | ||
|
|
||
| const { setUser, user } = useAuth(); | ||
| const [sortedList, setSortedList] = React.useState<DashboardLayoutCardType[]>([]); | ||
|
|
||
| const modalState = useModal(); | ||
| const router = useRouter(); | ||
| const type = getCardsType(router.pathname); | ||
| const columnName = getColumnName(type); | ||
| const { execute, state } = useFetch(); | ||
|
|
||
| const cardsForType = cardTypes[type]; | ||
|
|
||
| function handleListChange(list: { id: DashboardLayoutCardType }[]) { | ||
| setSortedList(list.map((l) => l.id)); | ||
| } | ||
|
|
||
| async function handleSave() { | ||
| if (sortedList.length <= 0) return; | ||
| if (!user || !columnName) return; | ||
|
|
||
| const { json } = await execute({ | ||
| method: "PUT", | ||
| path: "/user/dashboard-layout", | ||
| data: { | ||
| type: columnName, | ||
| layout: sortedList, | ||
| }, | ||
| }); | ||
|
|
||
| if (json) { | ||
| setUser({ ...user, [columnName]: sortedList }); | ||
| toastMessage({ | ||
| icon: "success", | ||
| title: "Layout Saved", | ||
| message: "The layout has been saved", | ||
| }); | ||
| } | ||
| } | ||
|
|
||
| React.useEffect(() => { | ||
| const userSortedList = columnName ? user?.[columnName] ?? [] : []; | ||
|
|
||
| const list = cardsForType.sort((a, b) => { | ||
| return userSortedList.indexOf(a) - userSortedList.indexOf(b); | ||
| }); | ||
|
|
||
| setSortedList(list); | ||
| }, [cardsForType, columnName, user]); | ||
|
|
||
| return ( | ||
| <Modal | ||
| title="Edit Dashboard Layout" | ||
| isOpen={modalState.isOpen(ModalIds.EditDashboardLayout)} | ||
| onClose={() => modalState.closeModal(ModalIds.EditDashboardLayout)} | ||
| className="w-[650px]" | ||
| > | ||
| <ReactSortable | ||
| animation={200} | ||
| tag="ul" | ||
| setList={handleListChange} | ||
| list={sortedList.map((type) => ({ id: type }))} | ||
| className="flex flex-col gap-y-2 mt-5" | ||
| > | ||
| {sortedList.map((type) => ( | ||
| <li | ||
| className="card border-2 rounded-md p-4 cursor-pointer flex items-center justify-between" | ||
| key={type} | ||
| > | ||
| {type} | ||
|
|
||
| <ArrowsMove /> | ||
| </li> | ||
| ))} | ||
| </ReactSortable> | ||
|
|
||
| <footer className="flex items-center justify-end mt-3"> | ||
| <Button | ||
| type="button" | ||
| className="flex items-center gap-2" | ||
| isDisabled={state === "loading"} | ||
| onPress={handleSave} | ||
| > | ||
| {state === "loading" ? <Loader /> : null} | ||
| {common("save")} | ||
| </Button> | ||
| </footer> | ||
| </Modal> | ||
| ); | ||
| } | ||
|
|
||
| function getCardsType(pathname: string) { | ||
| if (pathname.includes("/dispatch")) { | ||
| return "dispatch"; | ||
| } | ||
|
|
||
| if (pathname.includes("/officer")) { | ||
| return "officer"; | ||
| } | ||
|
|
||
| return "ems-fd"; | ||
| } | ||
|
|
||
| function getColumnName(type: "ems-fd" | "officer" | "dispatch") { | ||
| switch (type) { | ||
| case "ems-fd": { | ||
| return "emsFdLayoutOrder"; | ||
| } | ||
| case "officer": { | ||
| return "officerLayoutOrder"; | ||
| } | ||
| case "dispatch": { | ||
| return "dispatchLayoutOrder"; | ||
| } | ||
| default: { | ||
| return null; | ||
| } | ||
| } | ||
| } |
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.