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

Author: crsstha

app/root/config/routes.tsx

@@ -99,7 +99,25 @@ const editHighlight: RouteConfig = {
     load: () => import('#views/Highlight/HighlightForm'),
     visibility: 'is-authenticated',
 };
+const partner: RouteConfig = {
+    index: true,
+    path: 'partners',
+    load: () => import('#views/Partner/PartnerList'),
+    visibility: 'is-authenticated',
+};
+const editPartner: RouteConfig = {
+    index: true,
+    path: 'partners/:id/edit',
+    load: () => import('#views/Partner/PartnerForm'),
+    visibility: 'is-authenticated',
+};
 
+const addPartner: RouteConfig = {
+    index: true,
+    path: 'partners/add',
+    load: () => import('#views/Partner/PartnerForm'),
+    visibility: 'is-authenticated',
+};
 const routes = {
     login,
     home,
@@ -115,6 +133,9 @@ const routes = {
     highlight,
     addHighlight,
     editHighlight,
+    partner,
+    editPartner,
+    addPartner,
 };
 
 export type RouteKeys = keyof typeof routes;

app/views/Partner/PartnerForm/index.tsx

@@ -0,0 +1,208 @@
+import {
+    useCallback,
+    useEffect,
+} from 'react';
+import {
+    useNavigate,
+    useParams,
+} from 'react-router';
+import {
+    Button,
+    Container,
+    Heading,
+    NumberInput,
+    RawFileInput,
+    SelectInput,
+    TextArea,
+    TextInput,
+} from '@ifrc-go/ui';
+import {
+    createSubmitHandler,
+    getErrorObject,
+    integerCondition,
+    ObjectSchema,
+    PartialForm,
+    requiredStringCondition,
+    useForm,
+} from '@togglecorp/toggle-form';
+
+import FormSection from '#components/FormSection';
+import Page from '#components/Page';
+import {
+    PartnerCreateInput,
+    PartnerScopeEnum,
+    useCreatePartnerMutation,
+    usePartnerDetailQuery,
+    useUpdatePartnerMutation,
+} from '#generated/types/graphql';
+import urlToFile from '#utils/urlToFile';
+
+import styles from './styles.module.css';
+
+type PartialFormType = PartialForm<PartnerCreateInput> &
+{ createdBy: string, modifiedBy: string }
+
+type FormSchema = ObjectSchema<PartialFormType>;
+type FormSchemaFields = ReturnType<FormSchema['fields']>;
+
+const EditBlogSchema: FormSchema = {
+    fields: (): FormSchemaFields => ({
+        title: {
+            required: true,
+            requiredValidation: requiredStringCondition,
+        },
+        scope: {
+            required: true,
+            requiredValidation: requiredStringCondition,
+        },
+        image: {
+            required: true,
+        },
+        createdBy: {},
+        modifiedBy: {},
+
+    }),
+};
+
+const defaultEditFormValue: PartialFormType = {
+    createdBy: '',
+    modifiedBy: '',
+};
+function PartnerForm() {
+    const { id } = useParams();
+    const navigate = useNavigate();
+    const [{ data }] = usePartnerDetailQuery({
+        variables: { id: id || '' }, pause: !id,
+    });
+    const [{ fetching: createPending }, createPartnerMutate] = useCreatePartnerMutation();
+    const [{ fetching: updatePending }, updatePartnerMutate] = useUpdatePartnerMutation();
+    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 = {
+                    image: val.image ?? '',
+                    title: val.title ?? '',
+                    scope: val.scope as PartnerScopeEnum,
+                };
+                if (id) {
+                    const res = await updatePartnerMutate({
+                        pk: id,
+                        data: mutateData,
+                    });
+                    if (res.data?.updatePartner?.ok) {
+                        navigate('/partners');
+                    } else if (res.data?.updatePartner.errors) {
+                        setError(res.data.updatePartner.errors);
+                    }
+                } else {
+                    const res = await createPartnerMutate({
+                        data: mutateData,
+                    });
+
+                    if (res.data?.createPartner.ok) {
+                        navigate('/partners');
+                    } else if (res.data?.createPartner?.errors) {
+                        setError(res.data.createPartner.errors);
+                    }
+                }
+            },
+        );
+        handler();
+    }, [setError, validate, id, createPartnerMutate, updatePartnerMutate, navigate]);
+
+    useEffect(() => {
+        if (data?.partner) {
+            const { partner } = data;
+            if (partner.image) {
+                urlToFile(partner.image.url, partner.image.name)
+                    .then((file) => {
+                        setFieldValue(file, 'image');
+                    });
+            }
+            setFieldValue(partner.title, 'title');
+            setFieldValue(partner.scope, 'scope');
+            setFieldValue(partner.image, 'image');
+            setFieldValue(`${partner.modifiedBy.firstName} ${partner.modifiedBy.lastName}`, 'modifiedBy');
+            setFieldValue(`${partner.createdBy.firstName} ${partner.createdBy.lastName}`, 'createdBy');
+        }
+    }, [data, setFieldValue]);
+
+    const scopeOptions = Object.values(PartnerScopeEnum).map((scope) => ({
+        value: scope,
+        label: scope,
+    }));
+    return (
+        <Page>
+            <Container
+                className={styles.container}
+                childrenContainerClassName={styles.containerChild}
+            >
+                <FormSection headingLevel={3} label="Partner DETAIL" />
+                {(value.createdBy && value.modifiedBy) && (
+                    <FormSection inputClassName={styles.inputClassName}>
+                        <div>
+                            <Heading level={6}>Created by:</Heading>
+                            <Heading level={6}>{value.createdBy}</Heading>
+                        </div>
+                        <div>
+                            <Heading level={6}>Modified by:</Heading>
+                            <Heading level={6}>{value.createdBy}</Heading>
+                        </div>
+                    </FormSection>
+                )}
+                <FormSection label="Title*" description="Enter the question">
+                    <TextInput
+                        name="title"
+                        value={value.title}
+                        error={error?.title as string}
+                        onChange={setFieldValue}
+                    />
+                </FormSection>
+
+                <FormSection label="Status*" description="Add status to either draft, publish or archived">
+                    <SelectInput
+                        name="scope"
+                        options={scopeOptions}
+                        value={value.scope}
+                        keySelector={(o) => o.label}
+                        labelSelector={(o) => o.value}
+                        onChange={setFieldValue}
+                        placeholder="Select Status"
+                        error={error?.scope}
+                    />
+                </FormSection>
+
+                <FormSection label="Partner Logo*" description="Add a cover photo, which will be displayed on top">
+                    <RawFileInput
+                        name="image"
+                        onChange={(files) => setFieldValue(files, 'image')}
+                        variant="secondary"
+                    >
+                        Upload
+                    </RawFileInput>
+                    {value.image?.name && <p>{value.image.name}</p>}
+                </FormSection>
+
+                <div className={styles.submitBtn}>
+                    <Button name="save" onClick={handleFormSubmit} variant="primary">
+                        {createPending || updatePending ? 'Saving' : 'Save'}
+                    </Button>
+                </div>
+            </Container>
+        </Page>
+    );
+}
+
+export default PartnerForm;

app/views/Partner/PartnerForm/styles.module.css

@@ -0,0 +1,39 @@
+.container {
+    width: 100%;
+}
+.containerChild {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    gap: var(--go-ui-spacing-sm);
+    background: var(--go-ui-color-gray-10);
+    overflow: auto;
+}
+.containerChild > * {
+    background: var(--go-ui-color-white);
+}
+
+.inputClassName {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    gap: var(--go-ui-spacing-xl);
+}
+.fileUpload {
+    display: flex;
+    align-items: center;
+    gap: var(--go-ui-spacing-sm);
+}
+.submitBtn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--go-ui-spacing-lg) var(--go-ui-spacing-xl);
+}
+
+.inputClassName > * {
+    flex: 1;
+    display: flex;
+    gap: var(--go-ui-spacing-sm);
+}

app/views/Partner/PartnerList/index.tsx

@@ -0,0 +1,109 @@
+import React, {
+    useCallback,
+    useMemo,
+} from 'react';
+import { useNavigate } from 'react-router';
+import {
+    Button,
+    Container,
+    Pager,
+    Table,
+} from '@ifrc-go/ui';
+import {
+    createElementColumn,
+    createNumberColumn,
+    createStringColumn,
+} from '@ifrc-go/ui/utils';
+
+import TableActions, { TableActionsProps } from '#components/TableAction';
+import {
+    PartnerQuery,
+    useDeletePartnerMutation,
+    usePartnerQuery,
+} from '#generated/types/graphql';
+import usePagination from '#hooks/usePagination';
+
+import styles from './styles.module.css';
+
+type PartnerListItem = NonNullable<PartnerQuery['partners']>['results'][number];
+
+function PartnerList() {
+    const navigate = useNavigate();
+    const {
+        page,
+        setPage,
+        pageSize,
+        variables,
+        getFormattedData,
+    } = usePagination();
+
+    const [{ fetching, data }, reExecuteQuery] = usePartnerQuery({ variables });
+    const [{ fetching: deletePending }, deletePartner] = useDeletePartnerMutation();
+
+    const tableData = useMemo(
+        () => getFormattedData<PartnerListItem>(data?.partners.results),
+        [data, getFormattedData],
+    );
+
+    const handleDelete = useCallback(
+        (id: string, closeModal: () => void) => {
+            deletePartner({ id }).then((resp) => {
+                if (resp.data?.deletePartner) {
+                    reExecuteQuery();
+                    closeModal();
+                }
+            });
+        },
+        [deletePartner, reExecuteQuery],
+    );
+
+    const columns = useMemo(() => [
+        createNumberColumn<PartnerListItem & { sn: number }, string | number>('sn', 'S.N.', (item) => item.sn, { columnWidth: 60 }),
+        createStringColumn<PartnerListItem, string | number>('title', 'Tile', (dept) => dept.title),
+        createStringColumn<PartnerListItem, string | number>('scope', 'Scope', (dept) => dept?.scope),
+        createElementColumn<PartnerListItem, string | number, TableActionsProps>(
+            'actions',
+            'Actions',
+            TableActions,
+            (_, datum) => ({
+                id: datum.id,
+                handleConfirmButtonChange: handleDelete,
+                confirmPending: deletePending,
+                itemTitle: datum.title,
+            }),
+            { columnWidth: 150 },
+        ),
+    ], [handleDelete, deletePending]);
+    return (
+        <Container
+            className={styles.partner}
+            childrenContainerClassName={styles.content}
+            heading="Partner"
+            actions={(
+                <Button name={undefined} variant="primary" disabled={false} onClick={() => navigate('add')}>
+                    Add Partner
+                </Button>
+            )}
+            footerActions={(
+                <Pager
+                    activePage={page}
+                    itemsCount={data?.partners.totalCount ?? 0}
+                    maxItemsPerPage={pageSize}
+                    onActivePageChange={setPage}
+                />
+            )}
+        >
+            <Table
+                keySelector={(item) => item.id}
+                className={styles.table}
+                columns={columns}
+                data={tableData}
+                filtered={false}
+                pending={fetching}
+                headerRowClassName={styles.headerRow}
+            />
+        </Container>
+    );
+}
+
+export default PartnerList;