Feature/1491 migrate dataset server table

django_project/frontend/src/components/Table/ServerTable.tsx

@@ -71,8 +71,8 @@ const ServerTable = forwardRef(
    }: ServerTableProps, ref
   ) => {
     const { openConfirmDialog } = useConfirmDialog();
-    const [filterModel, setFilterModel] = useState({})
     if (enable.filter) {
+      const [filterModel, setFilterModel] = useState(defaults.filters);
       columns.forEach(column => {
         if (column.type === 'actions') {
           if (!column.headerName) {
@@ -87,9 +87,22 @@ const ServerTable = forwardRef(
           }
         }
       });
+      useEffect(() => {
+        // @ts-ignore
+        let newParameters: any = {
+          ...parameters,
+          ...filterModel,
+          ...defaults.filters
+        }
+        newParameters = Object.fromEntries(
+          Object.entries(newParameters).filter(
+            ([_, value]) => value != null
+          )
+        )
+        setParameters(newParameters)
+      }, [filterModel, defaults.filters]);
     }
 
-
     // Notification
     const notificationRef = useRef(null);
     const notify = (newMessage: string, newSeverity: string = NotificationStatus.INFO) => {
@@ -125,14 +138,6 @@ const ServerTable = forwardRef(
       }
     )
 
-    useEffect(() => {
-      // @ts-ignore
-      setParameters({
-        ...parameters,
-        ...filterModel
-      })
-    }, [filterModel]);
-
     // Sort model
     const [sortModel, setSortModel] = useState<any[]>(defaults.sort);
 

django_project/frontend/src/pages/Admin/Dataset/index.jsx

@@ -13,42 +13,33 @@
  * __copyright__ = ('Copyright 2023, Unicef')
  */
 
-import React, { useEffect, useRef, useState } from 'react';
+import React, {useEffect, useRef, useState} from 'react';
 import $ from "jquery";
-import { GridActionsCellItem } from "@mui/x-data-grid";
-import DoDisturbOnIcon from "@mui/icons-material/DoDisturbOn";
-import Tooltip from "@mui/material/Tooltip";
+import {FormControlLabel, FormGroup} from "@mui/material";
 import Switch from "@mui/material/Switch";
-import { FormControlLabel, FormGroup } from "@mui/material";
-import AddIcon from '@mui/icons-material/Add';
+import {GridActionsCellItem} from "@mui/x-data-grid";
+import DoDisturbOnIcon from "@mui/icons-material/DoDisturbOn";
 
-import { DataBrowserActiveIcon } from "../../../components/Icons";
-import { render } from '../../../app';
-import { store } from '../../../store/admin';
-import { splitParams, urlParams } from "../../../utils/main";
-import {
-  Notification,
-  NotificationStatus
-} from "../../../components/Notification";
-import { AdminListPagination } from "../AdminListPagination";
-import { AdminPage, pageNames } from "../index";
+import {render} from '../../../app';
+import {store} from '../../../store/admin';
+import {splitParams, urlParams} from "../../../utils/main";
+import {NotificationStatus} from "../../../components/Notification";
+import {pageNames} from "../index";
+import {DataBrowserActiveIcon} from "../../../components/Icons";
+import {DatasetFilterSelector} from "../../../components/ResourceSelector/DatasetViewSelector";
+import {IndicatorFilterSelector} from "../../../components/ResourceSelector/IndicatorSelector";
+import {ThemeButton} from "../../../components/Elements/Button";
+import AdminList from "../../../components/AdminList";
+import Tooltip from "@mui/material/Tooltip";
 import PermissionModal from "../Permission";
-import { ThemeButton } from "../../../components/Elements/Button";
-import { removeElement } from "../../../utils/Array";
-import {
-  MultipleSelectWithSearch
-} from "../../../components/Input/SelectWithSearch";
-import {
-  DatasetFilterSelector
-} from "../../../components/ResourceSelector/DatasetViewSelector";
+import AddIcon from '@mui/icons-material/Add';
+import {MultipleSelectWithSearch} from "../../../components/Input/SelectWithSearch";
 
 
 import './style.scss';
-import {
-  IndicatorFilterSelector
-} from "../../../components/ResourceSelector/IndicatorSelector";
+import {removeElement} from "../../../utils/Array";
 
-/*** Dataset admin */
+/*** Data Browser admin */
 const deleteWarning = "WARNING! Do you want to delete the selected data? This will apply directly to database."
 
 export default function DatasetAdmin() {
@@ -68,19 +59,12 @@ export default function DatasetAdmin() {
     levels: defaultFilters.levels ? splitParams(defaultFilters.levels) : [],
     detail: true,
   })
-  const [disabled, setDisabled] = useState(false)
-  const [isInit, setIsInit] = useState(true)
   const [filtersSequences, setFiltersSequences] = useState([])
   const [quickData, setQuickData] = useState({})
   let [selectionModel, setSelectionModel] = useState([]);
 
   // When filter changed
   useEffect((prev) => {
-    if (!isInit) {
-      tableRef?.current?.refresh()
-    }
-    setIsInit(false)
-
     // Check filter sequences
     for (const [key, value] of Object.entries(filters)) {
       if (key !== 'groupAdminLevel') {
@@ -185,22 +169,22 @@ export default function DatasetAdmin() {
     if (filters.indicators.length) {
       parameters['indicator_id__in'] = filters.indicators.join(',')
     } else {
-      delete parameters['indicator_id__in']
+      parameters['indicator_id__in'] = null
     }
     if (filters.groupAdminLevel) {
       parameters['group_admin_level'] = true
     } else {
-      delete parameters['group_admin_level']
+      parameters['group_admin_level'] = false
     }
     if (filters.datasets.length) {
       parameters['reference_layer_id__in'] = filters.datasets.join(',')
     } else {
-      delete parameters['reference_layer_id__in']
+      parameters['reference_layer_id__in'] = null
     }
     if (filters.levels.length) {
       parameters['admin_level__in'] = filters.levels.join(',')
     } else {
-      delete parameters['admin_level__in']
+      parameters['admin_level__in'] = null
     }
     parameters['detail'] = filters.detail
     return parameters
@@ -218,87 +202,85 @@ export default function DatasetAdmin() {
   selectedViews = Array.from(new Set(selectedViews));
   selectedIndicators = Array.from(new Set(selectedIndicators));
 
-  return <AdminPage pageName={pageNames.Dataset}>
-    <AdminListPagination
-      ref={tableRef}
-      urlData={urls.api.datasetApi}
-      COLUMNS={COLUMNS}
-      disabled={disabled}
-      setDisabled={setDisabled}
-      selectAllUrl={urls.api.datasetApi + 'ids'}
-      otherFilters={
-        <div className='ListAdminFilters'>
-          <FormGroup>
-            <FormControlLabel
-              control={<Switch checked={filters.groupAdminLevel}/>}
-              label="Group all admin levels"
-              onChange={(evt) => {
-                setFilters({
-                  ...filters,
-                  groupAdminLevel: evt.target.checked
-                })
-              }}
-            />
-          </FormGroup>
-          <div className='Separator'/>
-          <ThemeButton
-            variant='primary'
-            disabled={selectedViews.length !== 1}
-            onClick={() => {
-              let url = `/admin/project/create?dataset_id=${selectedViews[0]}`
-              if (selectedModelIds) {
-                url += `&indicators=${selectedIndicators.join(',')}`
-              }
-              window.location.href = url;
-            }}
-            title={'Enable this by selecting data contain just 1 view.'}
-          >
-            <AddIcon/> Add to New Project
-          </ThemeButton>
-          &nbsp;&nbsp;&nbsp;
-          <IndicatorFilterSelector
-            data={filters.indicators}
-            setData={newFilter => setFilters({
-              ...filters,
-              indicators: newFilter
-            })}
-            filter={quickData.indicators}
-          />
-          <DatasetFilterSelector
-            data={filters.datasets}
-            setData={newFilter => setFilters({
-              ...filters,
-              datasets: newFilter
-            })}
-            filter={quickData.datasets}
-          />
-          <MultipleSelectWithSearch
-            placeholder={'Filter by Level(s)'}
-            options={!filtersSequences.length || !filtersSequences.indexOf('levels') ? ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'] : quickData.levels ? quickData.levels.map(level => level + '') : []}
-            value={filters.levels}
-            onChangeFn={evt => {
+  return <AdminList
+    url={{
+      list: `${urls.api.datasetApi}`
+    }}
+    title={contentTitle}
+    columns={COLUMNS}
+    middleContent={
+      <div className='ListAdminFilters'>
+        <FormGroup>
+          <FormControlLabel
+            control={<Switch checked={filters.groupAdminLevel}/>}
+            label="Group all admin levels"
+            onChange={(evt) => {
               setFilters({
                 ...filters,
-                levels: evt
+                groupAdminLevel: evt.target.checked
               })
             }}
-            showValues={true}
           />
-        </div>
-      }
-      getParameters={getParameters}
-      hideSearch={true}
-      deselectWhenParameterChanged={true}
-      quickDataChanged={
-        (data) => {
-          setQuickData(data)
-        }
-      }
-      selectionModel={selectionModel}
-      setSelectionModel={setSelectionModel}
-    />
-    <Notification ref={notificationRef}/>
-  </AdminPage>
+        </FormGroup>
+        <div className='Separator'/>
+        <ThemeButton
+          variant='primary'
+          disabled={selectedViews.length !== 1}
+          onClick={() => {
+            let url = `/admin/project/create?dataset_id=${selectedViews[0]}`
+            if (selectedModelIds) {
+              url += `&indicators=${selectedIndicators.join(',')}`
+            }
+            window.location.href = url;
+          }}
+          title={'Enable this by selecting data contain just 1 view.'}
+        >
+          <AddIcon/> Add to New Project
+        </ThemeButton>
+        &nbsp;&nbsp;&nbsp;
+        <IndicatorFilterSelector
+          data={filters.indicators}
+          setData={newFilter => setFilters({
+            ...filters,
+            indicators: newFilter
+          })}
+          filter={quickData.indicators}
+        />
+        <DatasetFilterSelector
+          data={filters.datasets}
+          setData={newFilter => setFilters({
+            ...filters,
+            datasets: newFilter
+          })}
+          filter={quickData.datasets}
+        />
+        <MultipleSelectWithSearch
+          placeholder={'Filter by Level(s)'}
+          options={!filtersSequences.length || !filtersSequences.indexOf('levels') ? ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'] : quickData.levels ? quickData.levels.map(level => level + '') : []}
+          value={filters.levels}
+          onChangeFn={evt => {
+            setFilters({
+              ...filters,
+              levels: evt
+            })
+          }}
+          showValues={true}
+        />
+      </div>
+    }
+    pageName={pageNames.Dataset}
+    multipleDelete={true}
+    enableFilter={true}
+    useSearch={false}
+    selection={selectionModel}
+    selectionChanged={setSelectionModel}
+    defaults={{
+      sort: [
+        { field: 'id', sort: 'asc' }
+      ],
+      filters: getParameters({})
+    }}
+  />
 }
 
 render(DatasetAdmin, store)

django_project/frontend/src/pages/Admin/Dataset/style.scss

@@ -12,10 +12,69 @@
 * __date__ = '13/06/2023'
 * __copyright__ = ('Copyright 2023, Unicef')
 */
-
 /* ==========================================================================
    Dataset style
    ========================================================================== */
+.AdminList {
+  background-color: unset !important;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  min-height: 0;
+  margin: 0 !important;
+  padding: 0 !important;
+  border-radius: var(--border-radius) !important;
+  overflow: hidden;
+}
+.AdminList .MoreActionIcon {
+  width: 16px;
+  height: 16px;
+  color: var(--primary-color);
+}
+.AdminList .MoreActionIcon svg {
+  width: 100%;
+  height: 100%;
+}
+.AdminList .AdminTable {
+  height: 100%;
+  width: 100%;
+  position: relative;
+  background-color: white;
+}
+.AdminList .AdminTable .AdminTableError {
+  color: var(--error);
+  margin: auto;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  position: absolute;
+  background-color: rgba(255, 255, 255, 0.5);
+  padding-top: 200px;
+  z-index: 9;
+}
+.AdminList .AdminTableDelete {
+  color: var(--error);
+}
+.AdminList .AdminTable-Loading {
+  padding: 1rem;
+}
+.AdminList .CellLink {
+  color: var(--primary-color) !important;
+}
+.AdminList .CellError {
+  color: white;
+  background-color: var(--error);
+}
+.AdminList .CellWarning {
+  color: white;
+  background-color: #ed6c02;
+}
+.AdminList .FlexCell {
+  display: flex;
+}
+.AdminList .FlexCell div {
+  margin-right: 2px;
+}
 
 .ListAdminFilters {
   &::before {

django_project/frontend/templates/frontend/base.html

@@ -205,6 +205,7 @@
       'styleList': "{% url "admin-style-list-view" %}",
       'dataset': "{% url "admin-dataset-view" %}",
       'dataAccess': "{% url "admin-data-access-view" %}",
+      'datasetList': "{% url "data-browser-api" %}",
       'relatedTableList': "{% url "admin-related-table-list-view" %}",
       'importer': "{% url "admin-importer-create-view" %}",
       'dataManagement': "{% url 'admin-data-management-list-view' %}",