Uses field config and related table modal picker

django_project/frontend/src/pages/Admin/ContextLayer/Form/RelatedTableFields.jsx

@@ -14,14 +14,17 @@
  */
 
 import React, { Fragment, useEffect, useState } from 'react';
+import $ from 'jquery';
 
 
 import { SelectWithSearch } from "../../../../components/Input/SelectWithSearch";
 import WhereInputModal from "../../../../components/SqlQueryGenerator/WhereInputModal";
 import { getRelatedTableFields } from "../../../../utils/relatedTable";
 import { fetchingData } from "../../../../Requests";
 import { dictDeepCopy } from "../../../../utils/main";
-
+import {
+  RelatedTableInputSelector
+} from "../../ModalSelector/InputSelector";
 
 /**
  * Indicator Form App
@@ -62,8 +65,45 @@ export default function RelatedTableFields(
   }, [data.related_table])
 
   const relatedFields = relatedTableInfo && relatedTableData ? getRelatedTableFields(relatedTableInfo, relatedTableData) : []
+
+  useEffect(() => {
+    if (relatedFields && !data.data_fields) {
+      onSetData({
+        ...data,
+        data_fields: relatedFields.map(field => ({
+          alias: field.alias,
+          defaultValue: null,
+          domain: null,
+          editable: false,
+          name: field.name,
+          nullable: false,
+          sqlType: "sqlTypeOther",
+          type: field.type
+        }))
+      })
+    }
+  }, [relatedFields])
+
+  const handleRelatedTableChange = newRelatedTable => {
+    onSetData({ ...data, related_table: newRelatedTable[0]?.id })
+    setRelatedTableInfo(newRelatedTable[0])
+  }
+
   return (
     <div>
+      <div className='BasicFormSection'>
+        <div>
+          <label className="form-label required">
+            Related Table
+          </label>
+        </div>
+        <RelatedTableInputSelector
+          data={relatedTableInfo ? [relatedTableInfo] : []}
+          setData={handleRelatedTableChange}
+          isMultiple={false}
+          showSelected={true}
+        />
+      </div>
       <div className='BasicFormSection'>
         <div className='form-label'>Latitude Field</div>
         <div className='InputInLine'>

django_project/frontend/src/pages/Admin/ContextLayer/Form/index.jsx

@@ -31,7 +31,6 @@ import { dictDeepCopy } from "../../../../utils/main";
 import './style.scss';
 
 let currentArcGis = null
-let currentRelatedTable = null
 let init = false
 /**
  * Context Layer Form App
@@ -89,6 +88,7 @@ export default function ContextLayerForm() {
       $('*[name="label_styles"]').val(JSON.stringify(newData['label_styles']))
       $('*[name="data_fields"]').val(JSON.stringify(newData['data_fields']))
       $('*[name="styles"]').val(JSON.stringify(newData['styles']))
+      $('*[name="related_table"]').val(newData['related_table'])
       $('*[name="latitude_field"]').val(newData['latitude_field'])
       $('*[name="longitude_field"]').val(newData['longitude_field'])
       $('*[name="query"]').val(newData['query'])
@@ -99,18 +99,15 @@ export default function ContextLayerForm() {
   const typeChange = (value) => {
     if (value === 'ARCGIS') {
       $('div[data-wrapper-name="arcgis_config"]').show()
-      $('div[data-wrapper-name="related_table"]').hide()
     } else if (value === 'Related Table') {
       $('div[data-wrapper-name="arcgis_config"]').hide()
       $('div[data-wrapper-name="token"]').hide()
       $('div[data-wrapper-name="username"]').hide()
       $('div[data-wrapper-name="password"]').hide()
       $('div[data-wrapper-name="url"]').hide()
-      $('div[data-wrapper-name="related_table"]').show()
     }
     else {
       $('div[data-wrapper-name="arcgis_config"]').hide()
-      $('div[data-wrapper-name="related_table"]').hide()
       $('div[data-wrapper-name="url"]').show()
     }
     setData({ ...data, layer_type: value })
@@ -134,15 +131,6 @@ export default function ContextLayerForm() {
     }
   }
 
-  const relatedTableConfigChange = (value) => {
-    currentRelatedTable = value
-    if (value) {
-      setData({
-        ...data,
-        related_table: value
-      })
-    }
-  }
   return (
     <Admin
       minifySideNavigation={true}
@@ -189,8 +177,6 @@ export default function ContextLayerForm() {
                 } else if (name === 'arcgis_config') {
                   arcGisConfigChange(value)
                   setDataFn()
-                } else if (name === 'related_table') {
-                  relatedTableConfigChange(value)
                 }
               }}
             >

django_project/frontend/src/pages/Admin/ContextLayer/StyleConfig/RelatedTable/index.jsx

@@ -0,0 +1,78 @@
+/**
+ * GeoSight is UNICEF's geospatial web-based business intelligence platform.
+ *
+ * Contact : [email protected]
+ *
+ * .. note:: This program is free software; you can redistribute it and/or modify
+ *     it under the terms of the GNU Affero General Public License as published by
+ *     the Free Software Foundation; either version 3 of the License, or
+ *     (at your option) any later version.
+ *
+ * __author__ = '[email protected]'
+ * __date__ = '12/04/2024'
+ * __copyright__ = ('Copyright 2024, Unicef')
+ */
+
+/* ==========================================================================
+   ARCGIS STYLE
+   ========================================================================== */
+
+import React, { Fragment } from 'react';
+import { Checkbox, FormControlLabel, FormGroup } from "@mui/material";
+
+import FieldConfig from "../../../../../components/FieldConfig";
+
+/**
+ * Map Config component.
+ */
+export default function RelatedTableConfig(
+  {
+    originalData,
+    setData,
+    RelatedTableData,
+    useOverride = false,
+    useOverrideLabel = true
+  }
+) {
+  const data = JSON.parse(JSON.stringify(originalData))
+
+  const update = () => {
+    setData({ ...data })
+  }
+  return <Fragment>
+    <div className='ArcgisConfig Fields'>
+      {
+        useOverride ?
+          <FormGroup>
+            <FormControlLabel
+              control={
+                <Checkbox
+                  checked={data?.override_field ? data?.override_field : false}
+                  onChange={evt => {
+                    setData({
+                      ...data,
+                      data_fields: RelatedTableData?.data?.fields,
+                      override_field: evt.target.checked
+                    })
+                  }} />
+              }
+              label="Override field config from default" />
+          </FormGroup> : null
+      }
+      {
+        (!useOverride || data.override_field) ?
+          data.data_fields ?
+            <Fragment>
+              <div className='ArcgisConfigFields'>
+                <FieldConfig
+                  data_fields={data.data_fields}
+                  update={(fields) => {
+                    data.data_fields = fields
+                    update()
+                  }} />
+              </div>
+            </Fragment> : <div>Loading</div> : null
+      }
+    </div>
+  </Fragment>
+}

django_project/frontend/src/pages/Admin/ContextLayer/StyleConfig/index.jsx

@@ -21,6 +21,7 @@ import { getLayer } from '../../../Dashboard/LeftPanel/ContextLayers/Layer'
 import { defaultPointStyle, defaultVectorTyleStyle } from './layerStyles';
 
 import './style.scss';
+import RelatedTableConfig from './RelatedTable';
 
 
 /**
@@ -195,6 +196,11 @@ export default function StyleConfig(
                 originalData={data} setData={setData}
                 ArcgisData={layerData} useOverride={useOverride}
                 useOverrideLabel={useOverrideLabel}
+              /> : data.layer_type === 'Related Table' ?
+                <RelatedTableConfig
+                  originalData={data} setData={setData}
+                  RelatedTableData={layerData} useOverride={useOverride}
+                  useOverrideLabel={useOverrideLabel}
               /> :
               <Fragment>
                 <div className='ArcgisConfig Fields form-helptext'>

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

@@ -38,7 +38,7 @@ export default function RelatedTableSelector(
 ) {
   return <ModalSelector
     title={"Indicator(s)"}
-    api={urls.api.relatedTable}
+    api={'/api/related-table/list'}
     columns={relatedTableColumns}
     open={open}
     setOpen={setOpen}

django_project/frontend/src/pages/Dashboard/MapLibre/Layers/ContextLayers/index.jsx

@@ -254,12 +254,10 @@ export function contextLayerRendering(id, contextLayerData, contextLayer, map, c
           relatedTableLayer(
             map, id, layer, contextLayerData, featureProperties => {
               return popupFeature(
-                featureProperties, contextLayerData.name, null, Object.keys(featureProperties).map(property => {
-                  return {
-                    name: property,
-                    alias: property,
-                  }
-                })
+                featureProperties,
+                contextLayerData.name,
+                null,
+                contextLayerData.data_fields
               )
             }, contextLayerOrder
           )

django_project/geosight/data/forms/context_layer.py

@@ -20,6 +20,7 @@
 from django.forms.models import model_to_dict
 
 from geosight.data.models.context_layer import ContextLayer, ContextLayerGroup
+from geosight.data.models.related_table import RelatedTable
 
 
 class ContextLayerForm(forms.ModelForm):
@@ -67,6 +68,11 @@ class ContextLayerForm(forms.ModelForm):
         widget=forms.HiddenInput()
     )
 
+    related_table = forms.CharField(
+        label='Related Table',
+        widget=forms.HiddenInput()
+    )
+
     def __init__(self, *args, **kwargs):
         """Init."""
         super().__init__(*args, **kwargs)
@@ -89,6 +95,12 @@ def clean_group(self):
             name=self.cleaned_data['group']
         )
         return group
+
+    def clean_related_table(self):
+        """Return related table."""
+        if self.instance and self.cleaned_data['related_table']:
+            return RelatedTable.objects.get(pk=self.cleaned_data['related_table'])
+        return None
 
     def clean_styles(self):
         """Return styles."""