feat(project): Added project listing and edit add form

Author: crsstha

app/components/FileUpload/styles.module.css

@@ -6,4 +6,7 @@
     @media (max-width: 768px) {
         flex-direction: column;
     }
-}
+    p {
+        word-break: break-all;
+    }
+}

app/root/config/routes.tsx

@@ -202,6 +202,27 @@ const addVacancy: RouteConfig = {
     visibility: 'is-authenticated',
 };
 
+const project: RouteConfig = {
+    index: true,
+    path: 'projects',
+    load: () => import('#views/Project/ProjectList'),
+    visibility: 'is-authenticated',
+};
+
+const editProject: RouteConfig = {
+    index: true,
+    path: 'projects/:id/edit',
+    load: () => import('#views/Project/ProjectForm'),
+    visibility: 'is-authenticated',
+};
+
+const addProject: RouteConfig = {
+    index: true,
+    path: 'projects/add',
+    load: () => import('#views/Project/ProjectForm'),
+    visibility: 'is-authenticated',
+};
+
 const routes = {
     login,
     home,
@@ -232,6 +253,9 @@ const routes = {
     vacancy,
     addVacancy,
     editVacancy,
+    project,
+    addProject,
+    editProject,
 };
 
 export type RouteKeys = keyof typeof routes;

app/views/PrivateLayout/index.tsx

@@ -57,6 +57,12 @@ const navigation = [
                 title: 'Procurements',
                 variant: 'leaf' as const,
 
+            },
+            {
+                to: '/projects',
+                title: 'Projects',
+                variant: 'leaf' as const,
+
             },
             {
                 to: '/radio-programs',
@@ -73,7 +79,11 @@ const navigation = [
                         variant: 'leaf' as const,
                         title: 'Major Responsibilities',
                     },
-                    { to: '/about/strategic/goal', title: 'Goal', variant: 'leaf' as const },
+                    {
+                        to: '/strategic/strategic-directive',
+                        title: 'Strategic Directives',
+                        variant: 'leaf' as const,
+                    },
                 ],
             },
             {

app/views/Project/ProjectForm/index.tsx

@@ -0,0 +1,214 @@
+import {
+    useCallback,
+    useEffect,
+} from 'react';
+import {
+    useNavigate,
+    useParams,
+} from 'react-router';
+import {
+    Button,
+    Heading,
+    SelectInput,
+    TextArea,
+    TextInput,
+} from '@ifrc-go/ui';
+import {
+    createSubmitHandler,
+    getErrorObject,
+    ObjectSchema,
+    PartialForm,
+    requiredStringCondition,
+    useForm,
+} from '@togglecorp/toggle-form';
+
+import ContainerWrapper from '#components/ContainerWrapper';
+import FileUpload from '#components/FileUpload';
+import FormSection from '#components/FormSection';
+import Page from '#components/Page';
+import {
+    ProjectCreateInput,
+    useCreateProjectMutation,
+    useDepartmentsQuery,
+    useProjectDetailQuery,
+    useUpdateProjectMutation,
+} from '#generated/types/graphql';
+import urlToFile from '#utils/urlToFile';
+
+type PartialFormType = PartialForm<ProjectCreateInput> &
+{ createdBy: string, modifiedBy: string }
+
+type FormSchema = ObjectSchema<PartialFormType>;
+type FormSchemaFields = ReturnType<FormSchema['fields']>;
+
+const EditBlogSchema: FormSchema = {
+    fields: (): FormSchemaFields => ({
+        title: {
+            required: true,
+            requiredValidation: requiredStringCondition,
+        },
+        description: {
+            required: true,
+            requiredValidation: requiredStringCondition,
+        },
+        department: {
+            required: true,
+        },
+        coverImage: {
+            required: true,
+        },
+        createdBy: {},
+        modifiedBy: {},
+
+    }),
+};
+
+const defaultEditFormValue: PartialFormType = {
+    createdBy: '',
+    modifiedBy: '',
+};
+function ProjectForm() {
+    const { id } = useParams();
+    const navigate = useNavigate();
+    const [{ data }] = useProjectDetailQuery({
+        variables: { id: id || '' }, pause: !id,
+    });
+    const [{ data: departments }] = useDepartmentsQuery();
+
+    const [{ fetching: createPending }, createProjectMutate] = useCreateProjectMutation();
+    const [{ fetching: updatePending }, updateProjectMutate] = useUpdateProjectMutation();
+    const {
+        setFieldValue,
+        error: formError,
+        value,
+        validate,
+        setError,
+    } = useForm(EditBlogSchema, { value: defaultEditFormValue });
+
+    const error = getErrorObject(formError);
+
+    const handleFormSubmit = useCallback(() => {
+        const handler = createSubmitHandler(
+            validate,
+            setError,
+            async (val) => {
+                const mutateData = {
+                    coverImage: val.coverImage ?? null,
+                    title: val.title ?? '',
+                    department: val.department ?? null,
+                    description: val.description ?? '',
+                };
+                if (id) {
+                    const res = await updateProjectMutate({
+                        pk: id,
+                        data: mutateData,
+                    });
+                    if (res.data?.updateProject?.ok) {
+                        navigate('/projects');
+                    } else if (res.data?.updateProject.errors) {
+                        setError(res.data.updateProject.errors);
+                    }
+                } else {
+                    const res = await createProjectMutate({
+                        data: mutateData,
+                    });
+
+                    if (res.data?.createProject.ok) {
+                        navigate('/projects');
+                    } else if (res.data?.createProject?.errors) {
+                        setError(res.data.createProject.errors);
+                    }
+                }
+            },
+        );
+        handler();
+    }, [setError, validate, id, createProjectMutate, updateProjectMutate, navigate]);
+
+    useEffect(() => {
+        if (data?.project) {
+            const { project } = data;
+            if (project.coverImage) {
+                urlToFile(project?.coverImage?.url, project?.coverImage?.name)
+                    .then((file) => {
+                        setFieldValue(file, 'coverImage');
+                    });
+            }
+            setFieldValue(project?.title, 'title');
+            setFieldValue(project?.description, 'description');
+            setFieldValue(project?.department?.id, 'department');
+            setFieldValue(`${project.modifiedBy?.firstName} ${project.modifiedBy?.lastName}`, 'modifiedBy');
+            setFieldValue(`${project.createdBy?.firstName} ${project.createdBy?.lastName}`, 'createdBy');
+        }
+    }, [data, setFieldValue]);
+
+    const departmentOptions = departments?.departments.results.map(
+        (dept) => ({
+            id: dept.id,
+            name: dept.title,
+        }),
+    ) ?? [];
+
+    return (
+        <Page>
+            <ContainerWrapper>
+                <FormSection headingLevel={3} label="VACANCY DETAILS" />
+                {(value.createdBy && value.modifiedBy) && (
+                    <FormSection>
+                        <Heading level={6}>
+                            Created by:
+                            {' '}
+                            {value.createdBy}
+                        </Heading>
+                        <Heading level={6}>
+                            Modified by:
+                            {' '}
+                            {value.createdBy}
+                        </Heading>
+                    </FormSection>
+                )}
+                <FormSection label="Title" description="Enter the Title" withAsteriskOnTitle>
+                    <TextInput
+                        name="title"
+                        value={value.title}
+                        error={error?.title as string}
+                        onChange={setFieldValue}
+                    />
+                </FormSection>
+                <FormSection label="Cover Image" description="Add a Cover Image, which will be attached and shown on Project" withAsteriskOnTitle>
+                    <FileUpload
+                        name="coverImage"
+                        onChange={(files) => setFieldValue(files, 'coverImage')}
+                        value={value.coverImage}
+                    />
+                </FormSection>
+                <FormSection label="Description" description="Enter the Description" withAsteriskOnTitle>
+                    <TextArea
+                        name="description"
+                        value={value.description}
+                        error={error?.description as string}
+                        onChange={setFieldValue}
+                    />
+                </FormSection>
+                <FormSection label="Type" description="Add type to either Tuesday Program or Radio Red Cross" withAsteriskOnTitle>
+                    <SelectInput
+                        name="department"
+                        options={departmentOptions}
+                        value={value.department}
+                        keySelector={(o) => o.id}
+                        labelSelector={(o) => o.name}
+                        onChange={setFieldValue}
+                        placeholder="Select Status"
+                        error={error?.department}
+                    />
+                </FormSection>
+                <FormSection>
+                    <Button name="save" onClick={handleFormSubmit} variant="primary">
+                        {createPending || updatePending ? 'Saving' : 'Save'}
+                    </Button>
+                </FormSection>
+            </ContainerWrapper>
+        </Page>
+    );
+}
+
+export default ProjectForm;

app/views/Project/ProjectList/index.tsx

@@ -0,0 +1,107 @@
+import {
+    useCallback,
+    useMemo,
+} from 'react';
+import { useNavigate } from 'react-router';
+import {
+    Button,
+    Pager,
+    Table,
+} from '@ifrc-go/ui';
+import {
+    createElementColumn,
+    createNumberColumn,
+    createStringColumn,
+} from '@ifrc-go/ui/utils';
+
+import ContainerWrapper from '#components/ContainerWrapper';
+import Page from '#components/Page';
+import TableActions, { TableActionsProps } from '#components/TableAction';
+import {
+    ProjectQuery,
+    useDeleteProjectMutation,
+    useProjectQuery,
+} from '#generated/types/graphql';
+import usePagination from '#hooks/usePagination';
+
+type ProjectListItem = NonNullable<ProjectQuery['projects']>['results'][number];
+
+function ProjectList() {
+    const navigate = useNavigate();
+    const {
+        page,
+        setPage,
+        pageSize,
+        variables,
+        getFormattedData,
+    } = usePagination();
+
+    const [{ fetching, data }, reExecuteQuery] = useProjectQuery({ variables });
+    const [{ fetching: deletePending }, deleteProject] = useDeleteProjectMutation();
+
+    const tableData = useMemo(
+        () => getFormattedData<ProjectListItem>(data?.projects.results),
+        [data, getFormattedData],
+    );
+
+    const handleDelete = useCallback(
+        (id: string, closeModal: () => void) => {
+            deleteProject({ id }).then((resp) => {
+                if (resp.data?.deleteProject) {
+                    reExecuteQuery();
+                    closeModal();
+                }
+            });
+        },
+        [deleteProject, reExecuteQuery],
+    );
+
+    const columns = useMemo(() => [
+        createNumberColumn<ProjectListItem & { sn: number }, string | number>('sn', 'S.N.', (item) => item.sn, { columnWidth: 60 }),
+        createStringColumn<ProjectListItem, string | number>('title', 'Tile', (dept) => dept.title),
+        createStringColumn<ProjectListItem, string | number>('department', 'Department', (dept) => dept?.department?.title),
+        createElementColumn<ProjectListItem, string | number, TableActionsProps>(
+            'actions',
+            'Actions',
+            TableActions,
+            (_, datum) => ({
+                id: datum.id,
+                handleConfirmButtonChange: handleDelete,
+                confirmPending: deletePending,
+                itemTitle: datum.title,
+            }),
+            { columnWidth: 150 },
+        ),
+    ], [handleDelete, deletePending]);
+    return (
+        <Page>
+            <ContainerWrapper
+                withPadding
+                heading="Project"
+                actions={(
+                    <Button name={undefined} variant="primary" disabled={false} onClick={() => navigate('add')}>
+                        Add Project
+                    </Button>
+                )}
+                footerActions={(
+                    <Pager
+                        activePage={page}
+                        itemsCount={data?.projects.totalCount ?? 0}
+                        maxItemsPerPage={pageSize}
+                        onActivePageChange={setPage}
+                    />
+                )}
+            >
+                <Table
+                    keySelector={(item) => item.id}
+                    columns={columns}
+                    data={tableData}
+                    filtered={false}
+                    pending={fetching}
+                />
+            </ContainerWrapper>
+        </Page>
+    );
+}
+
+export default ProjectList;