Merge branch 'feature/map_fixes' into 'dev'

delete point loader fix, no icon fix, filters fix

See merge request spatial/postamates_frontend!63

src/Map/Layers/PendingPoints.jsx

@@ -32,6 +32,9 @@ const useFilterExpression = () => {
   ];
 
   const staticKeyFiltersExpressions = RANGE_FILTERS_KEYS.map((key) => {
+    if (/d[0-9]/.test(key) && filters[`${key}__lt`] === 4000) return [
+      [">=", ["get", key], filters[`${key}__gt`]]
+    ];
     return [
       [">=", ["get", key], filters[`${key}__gt`]],
       ["<=", ["get", key], filters[`${key}__lt`]],

src/Map/Layers/layers-config.js

@@ -103,7 +103,11 @@ export const getPointSymbolLayer = (image) => {
   return {
     type: "symbol",
     layout: {
-      "icon-image": image,
+      "icon-image": [
+        'coalesce',
+        ['image', image],
+        ['image', 'defaultIcon']
+      ],
       "icon-size": ["interpolate", ["linear"], ["zoom"], 3, 0, 9, 0.1, 13, 0.5],
     },
   };

src/assets/circle.svg

@@ -0,0 +1,10 @@
+<svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 2 2"
+    width="2"
+    height="2"
+>
+    <g>
+        <circle cx="1" cy="1" r="0.5" fill="#26a2a2" />
+    </g>
+</svg>

src/icons/icons-config.js

@@ -1,3 +1,7 @@
 import logo from "../assets/logopng.png";
+import defaultIcon from "../assets/circle.svg";
 
-export const icons = [{ name: "logo", url: logo }];
+export const icons = [
+  { name: "logo", url: logo },
+  { name: "defaultIcon", url: defaultIcon },
+];

src/modules/Table/PendingTable/PendingTable.jsx

@@ -18,8 +18,8 @@ export const PendingTable = ({ fullWidth }) => {
   const [page, setPage] = useState(1);
   const [pageSize, setPageSize] = useState(PAGE_SIZE);
 
-  const fields = usePendingTableFields();
+  const { fields, isDeleting } = usePendingTableFields();
-  const {columns, orderColumns, sort, setSort} = useColumns(fields, tableKey);
+  const { columns, orderColumns, sort, setSort } = useColumns(fields, tableKey);
   const { setPopup } = usePopup();
 
   const onSort = (sortDirection, key) => {
@@ -94,7 +94,7 @@ export const PendingTable = ({ fullWidth }) => {
         onSort(sorter.order, sorter.columnKey);
       }}
       header={<HeaderWrapper exportProvider={useExportPendingData} orderColumns={orderColumns} />}
-      loading={isDataLoading}
+      loading={isDataLoading || isDeleting}
     />
   );
 };

src/modules/Table/PendingTable/usePendingTableFields.jsx

@@ -1,5 +1,5 @@
 import { useMode } from "../../../stores/useMode.js";
-import React, { useMemo } from "react";
+import React, { useMemo, useState } from "react";
 import { Button } from "antd";
 import { BiTrash } from "react-icons/all.js";
 import { deletePoint } from "../../../api.js";
@@ -24,13 +24,17 @@ const MATCHING_STATUS = {
 export const usePendingTableFields = () => {
   const { isImportMode } = useMode();
   const { toggleUpdateCounter } = useUpdateLayerCounter();
+  const [isDeleting, setIsDeleting] = useState(false);
   const deleteRow = async (e, id) => {
     e.stopPropagation();
+    setIsDeleting(true);
     try {
       await deletePoint(id);
       toggleUpdateCounter();
     } catch (e) {
       //
+    } finally {
+      setIsDeleting(false);
     }
   };
 
@@ -71,5 +75,5 @@ export const usePendingTableFields = () => {
       }
     ] : [];
   }, [isImportMode]);
-  return fields;
+  return { fields, isDeleting };
 }

src/modules/Table/useColumns.jsx

@@ -426,7 +426,7 @@ export const useColumns = (fields = [], key) => {
   const columns = useMemo(() => {
     return order.flatMap((item) => !item.show ? [] : defaultColumns[item.position])
       .map((column) => {
-        if (sort && sort.includes(column.key)) return {
+        if (sort && sort.includes(column?.key)) return {
           ...column,
           defaultSortOrder: sort.includes('-') ? 'descend' : 'ascend',
         };

src/utils.js

@@ -107,10 +107,12 @@ export const appendFiltersInUse = (params, filters, ranges) => {
         filterKey.split('d')[1],
         filters[`${filterKey}__gt`] - 1
       ].join(','));
-      params.append('dist_to_group__lt', [
+      if (filters[`${filterKey}__lt`] < 4000) {
-        filterKey.split('d')[1],
+        params.append('dist_to_group__lt', [
-        filters[`${filterKey}__lt`] + 1
+          filterKey.split('d')[1],
-      ].join(','));
+          filters[`${ filterKey }__lt`] + 1
+        ].join(','));
+      }
     } else {
       params.append(`${filterKey}__gt`, filters[`${filterKey}__gt`] - 1);
       params.append(`${filterKey}__lt`, filters[`${filterKey}__lt`] + 1);