From f9dc2f6c6cd1e1db2dd2c82583d640490f654a3a Mon Sep 17 00:00:00 2001 From: frozenhelium Date: Wed, 3 Apr 2024 17:30:25 +0545 Subject: [PATCH] WIP --- .../ActiveDrefTable/index.tsx | 1 + .../ActiveDrefTable/styles.module.css | 5 +- .../DownloadImportTemplateButton/index.tsx | 154 ++++++++++++++++++ .../styles.module.css | 0 app/src/views/AccountMyFormsDref/index.tsx | 4 + 5 files changed, 162 insertions(+), 2 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 4fa86ed995..bc61a0d306 100644 --- a/app/src/views/AccountMyFormsDref/ActiveDrefTable/index.tsx +++ b/app/src/views/AccountMyFormsDref/ActiveDrefTable/index.tsx @@ -188,6 +188,7 @@ function ActiveDrefTable(props: Props) { 'country', strings.activeDrefTableCountryHeading, (item) => item.country_details?.name, + { columnClassName: styles.country }, ), createStringColumn( 'type_of_dref', diff --git a/app/src/views/AccountMyFormsDref/ActiveDrefTable/styles.module.css b/app/src/views/AccountMyFormsDref/ActiveDrefTable/styles.module.css index aa39487991..7ae7a73d98 100644 --- a/app/src/views/AccountMyFormsDref/ActiveDrefTable/styles.module.css +++ b/app/src/views/AccountMyFormsDref/ActiveDrefTable/styles.module.css @@ -6,13 +6,14 @@ } .table { + .type, .status, .date { width: 0%; min-width: 7rem; } - .type, + .country, .appeal-code { width: 0%; min-width: 8rem; @@ -20,7 +21,7 @@ .title { width: 0%; - min-width: 8rem; + min-width: 11rem; } .actions, diff --git a/app/src/views/AccountMyFormsDref/DownloadImportTemplateButton/index.tsx b/app/src/views/AccountMyFormsDref/DownloadImportTemplateButton/index.tsx new file mode 100644 index 0000000000..8e8f2262b8 --- /dev/null +++ b/app/src/views/AccountMyFormsDref/DownloadImportTemplateButton/index.tsx @@ -0,0 +1,154 @@ +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'; +import { PartialDref } from '#views/DrefApplicationForm/schema'; + +type FormFieldKeys = keyof PartialDref; +interface FormField { + name: FormFieldKeys, + row: number, + label: string, +} + +const formFields: FormField[] = [ + { + name: 'national_society', + row: 2, + label: 'National Society', + }, + { + name: 'country', + row: 3, + label: 'Country', + }, +]; + +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('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: 'Form Name', key: 'name' }, + { header: 'Label', key: 'label' }, + { header: 'Value', key: 'value' }, + ]; + + const nameColumn = overviewWorksheet.getColumn('name'); + const labelColumn = overviewWorksheet.getColumn('label'); + nameColumn.protection = { + locked: true, + hidden: true, + }; + + labelColumn.protection = { locked: true }; + formFields.forEach((formField) => { + const row = overviewWorksheet.getRow(formField.row); + row.values = { + name: formField.name, + label: formField.label, + }; + const nameCell = row.getCell('name'); + nameCell.protection = { + locked: true, + hidden: true, + }; + + const valueCell = row.getCell('value'); + valueCell.dataValidation = { + type: 'list', + allowBlank: false, + formulae: ['"Nepal, India, China"'], + }; + }); + + 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' && (