Able to download the template (#302)

* Able to download the template

* Order dataset by is_favorite at first list

Author: meomancer

django_project/frontend/src/app/form.scss

@@ -181,6 +181,23 @@
         }
       }
     }
+
+    &.ReferenceLayerInputSelectorWrapper {
+      .InputControl {
+        display: flex !important;
+        flex-direction: row !important;
+
+        .MuiTextField-root {
+          flex-grow: 1;
+        }
+      }
+
+      .MuiCircularProgress-root {
+        height: unset !important;
+        width: unset !important;
+        margin-right: 0.5rem;
+      }
+    }
   }
 
   .form-error {

django_project/frontend/src/pages/Admin/Components/Input/ReferenceLayerInput.jsx

@@ -21,11 +21,17 @@ import React, {
   useState
 } from 'react';
 import Grid from '@mui/material/Grid';
-import { FormControlLabel, Radio, RadioGroup } from "@mui/material";
+import { Button, FormControlLabel, Radio, RadioGroup } from "@mui/material";
 
 import { SelectWithList } from "../../../../components/Input/SelectWithList";
 import { GeorepoViewInputSelector } from "../../ModalSelector/InputSelector";
-import { axiosGet, GeorepoUrls } from "../../../../utils/georepo";
+import {
+  axiosGet,
+  fetchFeatureList,
+  GeorepoUrls
+} from "../../../../utils/georepo";
+import CircularProgress from "@mui/material/CircularProgress";
+import { multiJsonToMultipleSheetsXlsx } from "../../../../utils/main";
 
 const defaultIdType = 'ucode'
 const ANY_LEVEL = 'Any Level (Data Driven)'
@@ -53,6 +59,7 @@ export const ReferenceLayerInput = forwardRef(
     }));
 
     const [references, setReferences] = useState([])
+    const [templateDownloading, setTemplateDownloading] = useState(false)
 
     let referenceLayer = references?.find(row => {
       return row.identifier === data?.reference_layer
@@ -109,6 +116,39 @@ export const ReferenceLayerInput = forwardRef(
       }, [references]
     )
 
+    // Create download data
+    useEffect(
+      () => {
+        if (templateDownloading) {
+          (
+            async () => {
+              const templateData = {}
+              let levels = referenceLayer.dataset_levels;
+              if (data.admin_level_type === BY_VALUE) {
+                levels = levels.filter(level => parseInt(data.admin_level_value) === level.level)
+              }
+              for (const level of levels) {
+                let geometryData = await fetchFeatureList(level.url)
+                templateData[level.name] = geometryData.map(data => {
+                  return Object.assign({}, {
+                    GeographyCode: data.ucode,
+                    GeographyName: data.name,
+                    Value: "",
+                    ExtraName1: "",
+                    ExtraName2: ""
+                  }, data.ext_codes)
+                })
+              }
+              multiJsonToMultipleSheetsXlsx(
+                templateData, 'template.xlsx'
+              )
+              setTemplateDownloading(false);
+            }
+          )()
+        }
+      }, [templateDownloading]
+    )
+
     /**
      * Return default level
      * @param {Array} levels
@@ -180,7 +220,7 @@ export const ReferenceLayerInput = forwardRef(
     return (
       <Grid container spacing={2}>
         <Grid item xs={6}>
-          <div className="BasicFormSection">
+          <div className="BasicFormSection ReferenceLayerInputSelectorWrapper">
             <label className="form-label required" htmlFor="group">
               Reference Layer
             </label>
@@ -199,6 +239,20 @@ export const ReferenceLayerInput = forwardRef(
               }}
               isMultiple={false}
               showSelected={false}
+              otherContent={
+                <Button
+                  variant="primary"
+                  disabled={!referenceLayer || templateDownloading}
+                  onClick={() => {
+                    setTemplateDownloading(true)
+                  }}
+                >
+                  {
+                    templateDownloading ? <>
+                      <CircularProgress/>Downloading</> : 'Template'
+                  }
+                </Button>
+              }
             />
           </div>
         </Grid>

django_project/frontend/src/pages/Admin/ModalSelector/GeorepoView.jsx

@@ -41,6 +41,7 @@ const columns = [
  * @param {Boolean} isMultiple Is data returned multiple object.
  * @param {Boolean} showSelected Is Showing selected data.
  * @param {array} filter List of id of data that will be used to filter data.
+ * @param {React.Component} otherContent other content to be rendered.
  * */
 export default function GeorepoViewSelector(
   {
@@ -50,7 +51,8 @@ export default function GeorepoViewSelector(
     selectedDataChanged,
     isMultiple = true,
     showSelected = true,
-    filter = false
+    filter = false,
+    otherContent = null
   }
 ) {
 
@@ -121,28 +123,31 @@ export default function GeorepoViewSelector(
     usedInputData = usedInputData.filter(data => newFilter.includes(data.identifier))
   }
 
-  return <ModalSelector
-    title={"View(s)"}
-    inputData={usedInputData}
-    columns={columns}
-    open={open}
-    setOpen={setOpen}
-    selectedData={selectedData}
-    selectedDataChanged={selectedDataChanged}
-    defaultSorting={[{ field: 'name', sort: 'asc' }]}
-    isMultiple={isMultiple}
-    showSelected={showSelected}
-    beforeChildren={
-      <FormControl className='InputControl'>
-        <SelectWithList
-          placeholder={references ? 'Select dataset' : 'Loading'}
-          list={references}
-          value={reference}
-          onChange={evt => {
-            setReference(evt.value)
-          }}
-        />
-      </FormControl>
-    }
-  />
+  return <>
+    <ModalSelector
+      title={"View(s)"}
+      inputData={usedInputData}
+      columns={columns}
+      open={open}
+      setOpen={setOpen}
+      selectedData={selectedData}
+      selectedDataChanged={selectedDataChanged}
+      defaultSorting={[{ field: 'name', sort: 'asc' }]}
+      isMultiple={isMultiple}
+      showSelected={showSelected}
+      beforeChildren={
+        <FormControl className='InputControl'>
+          <SelectWithList
+            placeholder={references ? 'Select dataset' : 'Loading'}
+            list={references}
+            value={reference}
+            onChange={evt => {
+              setReference(evt.value)
+            }}
+          />
+        </FormControl>
+      }
+    />
+    {otherContent ? otherContent : null}
+  </>
 }

django_project/frontend/src/pages/Admin/ModalSelector/InputSelector/index.js

@@ -155,9 +155,12 @@ export function ContextLayerInputSelector(
  * @param {function} setData When the value changed.
  * @param {Boolean} isMultiple Is data returned multiple object.
  * @param {Boolean} showSelected Is Showing selected data.
+ * @param {React.Component} otherContent other content to be rendered.
  */
 export function GeorepoViewInputSelector(
-  { data, setData, isMultiple, showSelected }
+  {
+    data, setData, isMultiple, showSelected, otherContent = null
+  }
 ) {
   return <ModalInputSelector
     placeholder={'Select view ' + (isMultiple ? '(s)' : '')}
@@ -167,6 +170,6 @@ export function GeorepoViewInputSelector(
     showSelected={showSelected}
     hideLabel={true}
   >
-    <GeorepoViewSelector/>
+    <GeorepoViewSelector otherContent={otherContent}/>
   </ModalInputSelector>
 }

django_project/frontend/src/utils/georepo.jsx

@@ -63,7 +63,7 @@ export const fetchReferenceLayerList = async function () {
   data.map(row => {
     row.identifier = row.uuid
   })
-  return data
+  return [].concat(data.filter(row => row.is_favorite), data.filter(row => !row.is_favorite));
 }
 
 /**

django_project/frontend/src/utils/main.jsx

@@ -254,6 +254,25 @@ export function jsonToXlsx(data, filename, sheetName = "Sheet 1") {
   XLSX.writeFile(workbook, filename);
 }
 
+/**
+ * Multiple json to multiple sheet
+ * @param {Array} data Array of object.
+ * @param {string} filename Filename of json
+ */
+export function multiJsonToMultipleSheetsXlsx(data, filename) {
+  const workbook = XLSX.utils.book_new();
+  for (const [sheetName, sheetData] of Object.entries(data)) {
+    const worksheet = XLSX.utils.json_to_sheet(sheetData);
+    if (sheetData[0]) {
+      worksheet["!cols"] = Object.keys(sheetData[0]).map(key => {
+        return { wch: sheetData.reduce((w, r) => Math.max(w, r[key]?.length), 10) }
+      });
+    }
+    XLSX.utils.book_append_sheet(workbook, worksheet, sheetName);
+  }
+  XLSX.writeFile(workbook, filename);
+}
+
 /** Return now date in UTC */
 export function nowUTC(secondZero = false) {
   const date = new Date();