From 71256633b3ff2507e0b80d48cc12353481f4bc00 Mon Sep 17 00:00:00 2001 From: frozenhelium Date: Wed, 3 Apr 2024 17:30:25 +0545 Subject: [PATCH] WIP --- .../ActiveDrefTable/index.tsx | 4 + .../ActiveDrefTable/styles.module.css | 14 +- .../DownloadImportTemplateButton/index.tsx | 121 ++++++++++++++++++ .../styles.module.css | 0 app/src/views/AccountMyFormsDref/index.tsx | 4 + .../DocumentCard/styles.module.css | 2 +- .../Table/TableBodyContent/styles.module.css | 2 +- 7 files changed, 140 insertions(+), 7 deletions(-) create mode 100644 app/src/views/AccountMyFormsDref/DownloadImportTemplateButton/index.tsx create mode 100644 app/src/views/AccountMyFormsDref/DownloadImportTemplateButton/styles.module.css diff --git a/app/src/views/AccountMyFormsDref/ActiveDrefTable/index.tsx b/app/src/views/AccountMyFormsDref/ActiveDrefTable/index.tsx index ec78f60843..980ed5c35e 100644 --- a/app/src/views/AccountMyFormsDref/ActiveDrefTable/index.tsx +++ b/app/src/views/AccountMyFormsDref/ActiveDrefTable/index.tsx @@ -189,16 +189,19 @@ function ActiveDrefTable(props: Props) { 'country', strings.activeDrefTableCountryHeading, (item) => item.country_details?.name, + { columnClassName: styles.country }, ), createStringColumn( 'type_of_dref', strings.activeDrefTableTypeOfDrefHeading, (item) => item.type_of_dref_display, + { columnClassName: styles.type }, ), createStringColumn( 'status', strings.activeDrefTableStatusHeading, (item) => item.status_display, + { columnClassName: styles.status }, ), createElementColumn( 'actions', @@ -259,6 +262,7 @@ function ActiveDrefTable(props: Props) { onPublishSuccess: refetchActiveDref, }; }, + { columnClassName: styles.actions }, ), ]), [ diff --git a/app/src/views/AccountMyFormsDref/ActiveDrefTable/styles.module.css b/app/src/views/AccountMyFormsDref/ActiveDrefTable/styles.module.css index b554b30ffe..845f4df5ef 100644 --- a/app/src/views/AccountMyFormsDref/ActiveDrefTable/styles.module.css +++ b/app/src/views/AccountMyFormsDref/ActiveDrefTable/styles.module.css @@ -6,10 +6,7 @@ } .table { - .date { - width: 7rem; - } - + .country, .appeal-code { width: 8rem; } @@ -19,8 +16,15 @@ min-width: 8rem; } + .actions, .stage { - width: 8rem; + width: 9rem; + } + + .date, + .type, + .status { + width: 7rem; } .sub-cell { diff --git a/app/src/views/AccountMyFormsDref/DownloadImportTemplateButton/index.tsx b/app/src/views/AccountMyFormsDref/DownloadImportTemplateButton/index.tsx new file mode 100644 index 0000000000..469f00a57a --- /dev/null +++ b/app/src/views/AccountMyFormsDref/DownloadImportTemplateButton/index.tsx @@ -0,0 +1,121 @@ +import { + useCallback, + useState, +} from 'react'; +import { Button } from '@ifrc-go/ui'; +import xlsx from 'exceljs'; +import FileSaver from 'file-saver'; + +import ifrcLogoFile from '#assets/icons/ifrc-square.png'; +import useNationalSociety from '#hooks/domain/useNationalSociety'; +import { COLOR_RED } from '#utils/constants'; + +const fieldNameToCellAddressMap = { + national_society: { + row: 6, + }, +}; + +function DownloadImportTemplateButton() { + const [generationPending, setGenerationPending] = useState(false); + const nationalSocieties = useNationalSociety(); + + const handleClick = useCallback( + () => { + async function generateTemplate() { + const workbook = new xlsx.Workbook(); + const now = new Date(); + workbook.created = now; + const response = await fetch(ifrcLogoFile); + const buffer = await response.arrayBuffer(); + + const ifrcLogo = workbook.addImage({ + buffer, + extension: 'png', + }); + + const coverWorksheet = workbook.addWorksheet('DREF Import'); + + const overviewWorksheet = workbook.addWorksheet('Operation Overview'); + const eventDetailsWorksheet = workbook.addWorksheet('Event Detail'); + const actionsNeedsWorksheet = workbook.addWorksheet('Actions-Needs'); + const operationWorksheet = workbook.addWorksheet('Operation'); + const timeframeAndContactsWorksheet = workbook.addWorksheet('Operational timeframes and contacts'); + + coverWorksheet.addImage(ifrcLogo, 'A1:B6'); + coverWorksheet.getCell('C1').value = 'DISASTER RESPONSE EMERGENCY FUND'; + coverWorksheet.mergeCells('C1:L3'); + coverWorksheet.getCell('C1:L3').style = { + font: { + name: 'Montserrat', + family: 2, + bold: true, + size: 20, + color: { argb: COLOR_RED }, + }, + alignment: { horizontal: 'center', vertical: 'middle' }, + }; + coverWorksheet.addRow(''); + coverWorksheet.addRow(''); + coverWorksheet.addRow(''); + coverWorksheet.addRow(''); + coverWorksheet.mergeCells('C4:L6'); + coverWorksheet.getCell('C4').value = 'Import template'; + coverWorksheet.getCell('C4').style = { + font: { + bold: true, size: 18, name: 'Montserrat', family: 2, + }, + alignment: { horizontal: 'center', vertical: 'middle' }, + }; + + overviewWorksheet.columns = [ + { header: 'ID', key: 'id' }, + { header: 'Field', key: 'field' }, + { header: 'Value', key: 'value' }, + ]; + + const idColumn = overviewWorksheet.getColumn('id'); + const fieldColumn = overviewWorksheet.getColumn('field'); + idColumn.protection = { + locked: true, + hidden: true, + }; + fieldColumn.protection = { locked: true }; + overviewWorksheet.addRow({ + values: { + id: 'country', + field: 'Country', + }, + }); + + await workbook.xlsx.writeBuffer().then((sheet) => FileSaver.saveAs( + new Blob([sheet], { type: 'application/vnd.ms-excel;charset=utf-8' }), + `DREF import template ${now.toLocaleString()}.xlsx`, + )); + + setGenerationPending(false); + } + + setGenerationPending((alreadyGenerating) => { + if (!alreadyGenerating) { + generateTemplate(); + } + + return true; + }); + }, + [nationalSocieties], + ); + + return ( + + ); +} + +export default DownloadImportTemplateButton; diff --git a/app/src/views/AccountMyFormsDref/DownloadImportTemplateButton/styles.module.css b/app/src/views/AccountMyFormsDref/DownloadImportTemplateButton/styles.module.css new file mode 100644 index 0000000000..e69de29bb2 diff --git a/app/src/views/AccountMyFormsDref/index.tsx b/app/src/views/AccountMyFormsDref/index.tsx index 22940b964c..f6405f4122 100644 --- a/app/src/views/AccountMyFormsDref/index.tsx +++ b/app/src/views/AccountMyFormsDref/index.tsx @@ -10,6 +10,7 @@ import Link from '#components/Link'; import ActiveDrefTable from './ActiveDrefTable'; import CompletedDrefTable from './CompletedDrefTable'; +import DownloadImportTemplateButton from './DownloadImportTemplateButton'; import i18n from './i18n.json'; import styles from './styles.module.css'; @@ -32,6 +33,9 @@ export function Component() { {strings.drefFeedbackForm} +
+ +
{currentView === 'active' && (