Feat/pmer

.github/workflows/ci.yml

@@ -23,8 +23,8 @@ jobs:
       - uses: actions/checkout@v4
         with:
           submodules: recursive
-      - name: Install pnpm
-        run: npm install -g pnpm
+      - uses: pnpm/action-setup@v4
+        name: Install pnpm
 
       - uses: actions/setup-node@v4
         with:

app/Root/config/routes.ts

@@ -188,6 +188,22 @@ const editDocument: RouteConfig = {
     load: () => import('#views/Documents/DocumentsForm'),
     visibility: 'is-authenticated',
 };
+const pmer: RouteConfig = {
+    index: true,
+    path: '/pmer',
+    load: () => import('#views/Pmer'),
+    visibility: 'is-authenticated',
+};
+const createPmer: RouteConfig = {
+    path: '/pmer/new',
+    load: () => import('#views/Pmer/PmerForm'),
+    visibility: 'is-authenticated',
+};
+const editPmer: RouteConfig = {
+    path: '/pmer/:id/edit',
+    load: () => import('#views/Pmer/PmerForm'),
+    visibility: 'is-authenticated',
+};
 const onlineInteractive: RouteConfig = {
     index: true,
     path: '/online-interactive',
@@ -274,6 +290,9 @@ const routes = {
     documents,
     createDocument,
     editDocument,
+    pmer,
+    createPmer,
+    editPmer,
     onlineInteractive,
     createOnlineInteractive,
     editOnlineInteractive,

app/Root/index.tsx

@@ -88,6 +88,8 @@ function RootContent() {
         dashboardPage: globalEnumsData?.enums.DashboardPage,
         reportContentType: globalEnumsData?.enums.ReportContentType,
         reportVisibility: globalEnumsData?.enums.ReportVisibility,
+        pmerReportCategory: globalEnumsData?.enums.PmerReportCategory,
+        pmerReportDocumentType: globalEnumsData?.enums.PmerReportDocumentType,
     }), [globalEnumsData]);
 
     return (

app/Root/query.ts

@@ -32,6 +32,14 @@ export const GLOBAL_ENUMS = gql`
                 key
                 label
             }
+            PmerReportCategory {
+                key
+                label
+            }
+            PmerReportDocumentType {
+                key
+                label
+            }
         }
     }
 `;

app/components/CategoryModal/index.tsx

@@ -132,6 +132,7 @@ function CategoryModal(props: Props) {
 
     const [categoryName, setCategoryName] = useState<string | undefined>();
     const [editingId, setEditingId] = useState<string | undefined>();
+    const [deletingId, setDeletingId] = useState<string | undefined>();
 
     const [{ fetching, data, error }, reExecuteQuery] = useThematicAreasQuery({
         variables: {
@@ -201,13 +202,25 @@ function CategoryModal(props: Props) {
         setCategoryName(undefined);
     }, []);
 
-    const handleDelete = useCallback((id: string) => {
-        deleteThematicArea({ id }).then((resp) => {
+    const handleDeleteClick = useCallback((id: string) => {
+        setDeletingId(id);
+    }, []);
+
+    const handleDeleteCancel = useCallback(() => {
+        setDeletingId(undefined);
+    }, []);
+
+    const handleDeleteConfirm = useCallback(() => {
+        if (isNotDefined(deletingId)) {
+            return;
+        }
+        setDeletingId(undefined);
+        deleteThematicArea({ id: deletingId }).then((resp) => {
             handleResult(resp.data?.deleteThematicArea, 'Category deleted successfully');
         }).catch(() => {
             alert.show(errorMessage, { variant: 'danger' });
         });
-    }, [deleteThematicArea, handleResult, alert]);
+    }, [deletingId, deleteThematicArea, handleResult, alert]);
 
     const columns = useMemo(() => [
         createStringColumn<ThematicArea, string | number>(
@@ -222,12 +235,12 @@ function CategoryModal(props: Props) {
             (_, datum) => ({
                 id: datum.id,
                 onEdit: handleEdit,
-                onDelete: handleDelete,
+                onDelete: handleDeleteClick,
                 disabled: actionPending,
             }),
             { columnWidth: 100 },
         ),
-    ], [handleEdit, handleDelete, actionPending]);
+    ], [handleEdit, handleDeleteClick, actionPending]);
 
     const isEditing = isDefined(editingId);
 
@@ -292,6 +305,33 @@ function CategoryModal(props: Props) {
                     onActivePageChange={setPage}
                 />
             </ListView>
+            {isDefined(deletingId) && (
+                <Modal
+                    heading="Delete category?"
+                    size="sm"
+                    onClose={handleDeleteCancel}
+                    closeOnEscape
+                    footerActions={(
+                        <ListView spacing="sm">
+                            <Button
+                                name={undefined}
+                                onClick={handleDeleteCancel}
+                            >
+                                Cancel
+                            </Button>
+                            <Button
+                                name={undefined}
+                                styleVariant="filled"
+                                onClick={handleDeleteConfirm}
+                            >
+                                Delete
+                            </Button>
+                        </ListView>
+                    )}
+                >
+                    {`Are you sure you want to delete "${categories?.find((item) => item.id === deletingId)?.name || 'this category'}"? This action cannot be undone.`}
+                </Modal>
+            )}
         </Modal>
     );
 }

app/components/EditDeleteActions/index.tsx

@@ -23,8 +23,22 @@ export interface Props {
     onDelete: (id: string) => void;
     itemTitle: string;
     to: keyof RoutesMap;
+    deleteMode?: 'delete' | 'deactivate';
 }
 
+const deleteCopy = {
+    delete: {
+        actionLabel: 'Delete',
+        heading: 'Delete item?',
+        message: (title: string) => `Are you sure you want to delete "${title}"? This action cannot be undone.`,
+    },
+    deactivate: {
+        actionLabel: 'Deactivate',
+        heading: 'Deactivate user?',
+        message: (title: string) => `Are you sure you want to deactivate "${title}"? They will lose access, and you can reactivate them later.`,
+    },
+};
+
 function EditDeleteActions(props: Props) {
     const {
         id,
@@ -33,8 +47,11 @@ function EditDeleteActions(props: Props) {
         to,
         member,
         dashboard,
+        deleteMode = 'delete',
     } = props;
 
+    const copy = deleteCopy[deleteMode];
+
     const navigate = useRouting();
 
     const [showDeleteModal, setShowDeleteModal] = useState(false);
@@ -77,14 +94,14 @@ function EditDeleteActions(props: Props) {
             <Button
                 name={undefined}
                 onClick={handleDeleteClick}
-                title="Delete"
+                title={copy.actionLabel}
                 styleVariant="action"
             >
                 <DeleteBinLineIcon />
             </Button>
             {showDeleteModal && (
                 <Modal
-                    heading="Delete item?"
+                    heading={copy.heading}
                     size="sm"
                     onClose={handleDeleteCancel}
                     closeOnEscape
@@ -101,12 +118,12 @@ function EditDeleteActions(props: Props) {
                                 styleVariant="filled"
                                 onClick={handleDeleteConfirm}
                             >
-                                Delete
+                                {copy.actionLabel}
                             </Button>
                         </ListView>
                     )}
                 >
-                    {`Are you sure you want to delete "${itemTitle || 'this item'}"? This action cannot be undone.`}
+                    {copy.message(itemTitle || 'this item')}
                 </Modal>
             )}
         </TableActions>

app/contexts/GlobalEnumsContext.ts

@@ -3,6 +3,8 @@ import { createContext } from 'react';
 import type {
     AppEnumCollectionDashboardPage,
     AppEnumCollectionLinkType,
+    AppEnumCollectionPmerReportCategory,
+    AppEnumCollectionPmerReportDocumentType,
     AppEnumCollectionReportContentType,
     AppEnumCollectionReportType,
     AppEnumCollectionReportVisibility,
@@ -18,6 +20,8 @@ export interface GlobalEnumsContextInterface {
     dashboardPage: AppEnumCollectionDashboardPage[] | undefined;
     reportContentType: AppEnumCollectionReportContentType[] | undefined;
     reportVisibility: AppEnumCollectionReportVisibility[] | undefined;
+    pmerReportCategory: AppEnumCollectionPmerReportCategory[] | undefined;
+    pmerReportDocumentType: AppEnumCollectionPmerReportDocumentType[] | undefined;
 }
 
 const GlobalEnumsContext = createContext<GlobalEnumsContextInterface>({
@@ -28,6 +32,8 @@ const GlobalEnumsContext = createContext<GlobalEnumsContextInterface>({
     dashboardPage: undefined,
     reportContentType: undefined,
     reportVisibility: undefined,
+    pmerReportCategory: undefined,
+    pmerReportDocumentType: undefined,
 });
 
 export default GlobalEnumsContext;

app/utils/common.ts

@@ -64,6 +64,7 @@ export function getReadableFileSize(bytes: number | null | undefined): string {
 }
 
 export const ACCEPTED_REPORT_FILE_TYPES = '.pdf,.doc,.docx,.png,.jpg,.jpeg';
+export const ACCEPTED_PMER_FILE_TYPES = '.docx,.pdf,.xls,.xlsx,.csv,.png';
 export const ACCEPTED_IMAGE_TYPES = 'image/*';
 export const ACCEPTED_IMPORT_FILE_TYPES = '.xlsx,.xlsm';
 export const MAX_REPORT_FILE_SIZE = 5 * 1024 * 1024; // 5MB

app/views/Pmer/PmerFilters/index.tsx

@@ -0,0 +1,79 @@
+import {
+    Button,
+    SelectInput,
+    TextInput,
+} from '@ifrc-go/ui';
+import { type EntriesAsList } from '@togglecorp/toggle-form';
+
+import RegionSelectInput from '#components/RegionSelectInput';
+import { AdminAreaLevel } from '#generated/types/graphql';
+import useGlobalEnums from '#hooks/useGlobalEnums';
+import {
+    keySelector,
+    labelSelector,
+} from '#utils/common';
+
+import type { PmerFilterType } from '..';
+
+export interface Props {
+    value: PmerFilterType;
+    onChange: (...args: EntriesAsList<PmerFilterType>) => void;
+    onReset: () => void;
+    filtered: boolean;
+}
+
+function PmerFilters({
+    value, onChange, onReset, filtered,
+}: Props) {
+    const {
+        pmerReportCategory: categoryOptions,
+        pmerReportDocumentType: reportTypeOptions,
+    } = useGlobalEnums();
+
+    return (
+        <>
+            <TextInput
+                name="search"
+                placeholder="Search by title"
+                value={value.search}
+                onChange={onChange}
+            />
+            <RegionSelectInput
+                name="region"
+                placeholder="Region"
+                level={AdminAreaLevel.Region}
+                value={value.region}
+                onChange={onChange}
+            />
+            <SelectInput
+                name="category"
+                placeholder="Report Category"
+                value={value.category}
+                onChange={onChange}
+                options={categoryOptions}
+                keySelector={keySelector}
+                labelSelector={labelSelector}
+            />
+            <SelectInput
+                name="reportType"
+                placeholder="Report Type"
+                value={value.reportType}
+                onChange={onChange}
+                options={reportTypeOptions}
+                keySelector={keySelector}
+                labelSelector={labelSelector}
+            />
+
+            <Button
+                name={undefined}
+                onClick={onReset}
+                title="Reset"
+                disabled={!filtered}
+            >
+                Reset
+            </Button>
+        </>
+    );
+}
+
+export default PmerFilters;