Add filter and search in key documents

src/views/CountryNsOverviewContextAndStructure/NationalSocietyKeyDocuments/i18n.json

@@ -0,0 +1,6 @@
+{
+    "namespace": "nationalSocietyKeyDocuments",
+    "strings": {
+        "nSSocietyKeyDocumentsTitle": "Key Documents"
+    }
+}

src/views/CountryNsOverviewContextAndStructure/NationalSocietyKeyDocuments/index.tsx

@@ -0,0 +1,122 @@
+import { useOutletContext } from 'react-router-dom';
+import { DownloadFillIcon, SearchLineIcon } from '@ifrc-go/icons';
+import { listToGroupList, mapToList } from '@togglecorp/fujs';
+
+import Container from '#components/Container';
+import DateInput from '#components/DateInput';
+import TextInput from '#components/TextInput';
+import Link from '#components/Link';
+import useTranslation from '#hooks/useTranslation';
+import useFilterState from '#hooks/useFilterState';
+import { GoApiResponse, useRequest } from '#utils/restRequest';
+import { CountryOutletContext } from '#utils/outletContext';
+
+import i18n from './i18n.json';
+import styles from './styles.module.css';
+
+type GetKeyDocumentResponse = GoApiResponse<'/api/v2/country-document/'>;
+export type KeyDocumentItem = NonNullable<GetKeyDocumentResponse['results']>[number];
+
+function NationalSocietyKeyDocuments() {
+    const strings = useTranslation(i18n);
+
+    const { countryId } = useOutletContext<CountryOutletContext>();
+    const {
+        filter,
+        rawFilter,
+        setFilterField,
+    } = useFilterState<{
+        searchText?: string,
+        startDateAfter?: string,
+        startDateBefore?: string,
+    }>({
+        filter: {},
+    });
+    const {
+        response: documentResponse,
+    } = useRequest({
+        url: '/api/v2/country-document/',
+        query: {
+            country: Number(countryId),
+            search: filter.searchText,
+            year__lte: filter.startDateAfter,
+            year__gte: filter.startDateBefore,
+        },
+        preserveResponse: true,
+    });
+
+    const documents = documentResponse?.results ?? [];
+
+    const groupedDocumentsByType = (
+        listToGroupList(
+            documents,
+            (item) => item.document_type,
+            (item) => item,
+        ) ?? {}
+    );
+    const documentsMapList = mapToList(
+        groupedDocumentsByType,
+        (d, k) => ({ label: k, value: d }),
+    );
+
+    return (
+        <Container
+            className={styles.nationalSocietyDocuments}
+            childrenContainerClassName={styles.nsKey}
+            heading={strings.nSSocietyKeyDocumentsTitle}
+            withHeaderBorder
+            withGridViewInFilter
+            filters={(
+                <>
+                    <TextInput
+                        name="searchText"
+                        label="Search"
+                        placeholder="Search"
+                        value={rawFilter.searchText}
+                        onChange={setFilterField}
+                        icons={<SearchLineIcon />}
+                    />
+                    <DateInput
+                        name="startDateAfter"
+                        label="Start"
+                        onChange={setFilterField}
+                        value={rawFilter.startDateAfter}
+                    />
+                    <DateInput
+                        name="startDateBefore"
+                        label="End"
+                        onChange={setFilterField}
+                        value={rawFilter.startDateBefore}
+                    />
+                </>
+            )}
+        >
+            {documentsMapList.map((document) => (
+                <Container
+                    className={styles.nsKeyDocuments}
+                    childrenContainerClassName={styles.nsDocuments}
+                    key={document.label}
+                    heading={document.label}
+                    withHeaderBorder
+                >
+                    {document.value.map((doc) => (
+                        <div className={styles.document}>
+                            <div>{doc?.name}</div>
+                            <div>{doc?.year}</div>
+                            <Link
+                                className={styles.downloadLink}
+                                href={doc?.url}
+                                external
+                                variant="tertiary"
+                            >
+                                <DownloadFillIcon className={styles.icon} />
+                            </Link>
+                        </div>
+                    ))}
+                </Container>
+            ))}
+        </Container>
+    );
+}
+
+export default NationalSocietyKeyDocuments;

src/views/CountryNsOverviewContextAndStructure/NationalSocietyKeyDocuments/styles.module.css

@@ -0,0 +1,29 @@
+.national-society-documents {
+    width: 100%;
+    min-height: var(--go-ui-content-min-height);
+
+    .ns-key {
+        display: grid;
+        grid-gap: var(--go-ui-spacing-lg);
+        grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
+
+        .ns-key-documents {
+            border-radius: var(--go-ui-border-radius-lg);
+            box-shadow: var(--go-ui-box-shadow-md);
+            padding: var(--go-ui-spacing-lg);
+
+            .ns-documents{
+                display: flex;
+                flex-direction: column;
+                gap: var(--go-ui-spacing-sm);
+
+                .document {
+                    display: flex;
+                    flex-wrap: wrap;
+                    justify-content: space-between;
+                    gap: var(--go-ui-spacing-md);
+                }
+            }
+        }
+    }
+}

src/views/CountryNsOverviewContextAndStructure/index.tsx

@@ -7,9 +7,10 @@ import useTranslation from '#hooks/useTranslation';
 import { type CountryOutletContext } from '#utils/outletContext';
 import { resolveToString } from '#utils/translation';
 
-import NationalSocietyLocalUnitsMap from './NationalSocietyLocalUnitsMap';
-import NationalSocietyDirectory from './NationalSocietyDirectory';
 import NationalSocietyContacts from './NationalSocietyContacts';
+import NationalSocietyDirectory from './NationalSocietyDirectory';
+import NationalSocietyKeyDocuments from './NationalSocietyKeyDocuments';
+import NationalSocietyLocalUnitsMap from './NationalSocietyLocalUnitsMap';
 
 import i18n from './i18n.json';
 import styles from './styles.module.css';
@@ -26,6 +27,7 @@ export function Component() {
                 <NationalSocietyDirectory className={styles.directory} />
             </div>
             <NationalSocietyContacts />
+            <NationalSocietyKeyDocuments />
             {isDefined(countryResponse) && (
                 <Container
                     heading={strings.keyLinksHeading}

src/views/PerOverviewForm/index.tsx

@@ -18,7 +18,7 @@ import { isNotDefined, isDefined, listToMap } from '@togglecorp/fujs';
 
 import useRouting from '#hooks/useRouting';
 import { transformObjectError } from '#utils/restRequest/error';
-import Portalapi/v2/country-document from '#components/Portal';
+import Portal from '#components/Portal';
 import Button from '#components/Button';
 import Container from '#components/Container';
 import InputSection from '#components/InputSection';