Merge branch 'feature/legend_group_items' into 'dev'

legend groups

See merge request spatial/postamates_frontend!14

src/Map/Legend.jsx

@@ -1,34 +1,38 @@
-import { useMode } from "../stores/useMode";
+import {useMode} from "../stores/useMode";
-import { MODES } from "../config";
+import {MODES} from "../config";
 import {
   APPROVE_COLOR,
   CANCELLED_COLOR,
   OTHER_POSTAMATES_COLOR,
   PENDING_COLOR,
-  PVZ_COLOR,
 } from "./Layers/layers-config";
-import { Logo } from "../icons/Logo.jsx";
+import {Logo} from "../icons/Logo.jsx";
+import {usePostamatesAndPvzGroups} from "../api.js";
+import {Collapse, Image} from "antd";
+import React from "react";
 
-const LegendPointItem = ({ color, name }) => {
+const LegendPointItem = ({color, imageSrc, name}) => {
   return (
     <div className="flex gap-2 items-center">
-      {color ? (
+      {imageSrc && <Image src={imageSrc} width={12} height={12} preview={false}/>}
+      {color && !imageSrc && (
         <span
           className="rounded-xl w-3 h-3 inline-block"
-          style={{ backgroundColor: color }}
+          style={{backgroundColor: color}}
         />
-      ) : (
+      )}
-        <Logo width={12} height={12} fill="#E63941" />
+      {!imageSrc && !color && (
+        <Logo width={12} height={12} fill="#E63941"/>
       )}
 
-      <span>{name}</span>
+      <span className='text-xs text-grey'>{name}</span>
     </div>
   );
 };
 
 const pendingColors = PENDING_COLOR.stops.map(([_value, color]) => color);
 
-const LegendColorRampItem = ({ colors, name }) => {
+const LegendColorRampItem = ({colors, name}) => {
   return (
     <div className="mb-3">
       <span className={"mb-1 mt-3 text-center"}>{name}</span>
@@ -46,11 +50,48 @@ const LegendColorRampItem = ({ colors, name }) => {
   );
 };
 
+const LegendGroupItem = ({item}) => {
+  return (
+    <Collapse
+      bordered={false}
+      expandIcon={null}
+      style={{
+        background: 'none',
+      }}
+      className="legend_group"
+    >
+      <Collapse.Panel
+        key={"opened"}
+        header={<LegendPointItem name={item.name} imageSrc={item.image} color={OTHER_POSTAMATES_COLOR}/>}
+        showArrow={false}
+      >
+        <div className="ml-3 my-1">
+          {item.groups && item.groups?.map((groupItem) => {
+            return (
+              <div className="my-1">
+                <LegendPointItem
+                  key={groupItem.id}
+                  color={OTHER_POSTAMATES_COLOR}
+                  imageSrc={groupItem.image}
+                  name={groupItem.name}
+                />
+              </div>
+            )
+          })}
+        </div>
+
+      </Collapse.Panel>
+    </Collapse>
+  )
+}
+
 export function Legend() {
-  const { mode } = useMode();
+  const {mode} = useMode();
+  const {data: postamatesAndPvzGroups} = usePostamatesAndPvzGroups();
 
   return (
-    <div className="absolute bottom-[20px] left-[20px] text-xs text-grey z-10 bg-white-background rounded-xl p-3 space-y-3">
+    <div
+      className="absolute bottom-[20px] left-[20px] text-xs text-grey z-10 bg-white-background rounded-xl p-3 space-y-3">
       <div>
         <div className="space-y-1">
           {mode === MODES.PENDING && (
@@ -59,7 +100,7 @@ export function Legend() {
                 colors={pendingColors}
                 name="Локации к рассмотрению"
               />
-              <LegendPointItem name="Работающие постаматы" />
+              <LegendPointItem name="Работающие постаматы"/>
               <LegendPointItem
                 name="Отмененные локации"
                 color={CANCELLED_COLOR}
@@ -72,7 +113,7 @@ export function Legend() {
                 name="Согласование-установка"
                 color={APPROVE_COLOR}
               />
-              <LegendPointItem name="Работающие постаматы" />
+              <LegendPointItem name="Работающие постаматы"/>
               <LegendPointItem
                 name="Отмененные локации"
                 color={CANCELLED_COLOR}
@@ -81,18 +122,16 @@ export function Legend() {
           )}
           {mode === MODES.WORKING && (
             <>
-              <LegendPointItem name="Работающие постаматы" />
+              <LegendPointItem name="Работающие постаматы"/>
             </>
           )}
         </div>
       </div>
 
       <div className="space-y-1">
-        <LegendPointItem name="ПВЗ" color={PVZ_COLOR} />
+        {postamatesAndPvzGroups && postamatesAndPvzGroups?.map((item) => {
-        <LegendPointItem
+          return <LegendGroupItem key={item.id} item={item}/>
-          name="Постаматы прочих сетей"
+        })}
-          color={OTHER_POSTAMATES_COLOR}
-        />
       </div>
     </div>
   );

src/api.js

@@ -132,6 +132,23 @@ export const getLastMLRun = async () => {
   return data?.last_time ? new Date(data?.last_time).toLocaleString('ru-RU') : '';
 };
 
+export const getPostamatesAndPvzGroups = async () => {
+  const { data } = await api.get(
+    `/api/postamate_and_pvz_groups/`
+  );
+
+  return data;
+};
+
+export const usePostamatesAndPvzGroups = () => {
+  return useQuery(
+    ['groups'],
+    async () => {
+      return await getPostamatesAndPvzGroups();
+    },
+  );
+};
+
 export const useLastMLRun = () => {
   return useQuery(
     ['last_time'],

src/index.css

@@ -95,6 +95,10 @@
   width: 100% !important;
 }
 
+.legend_group .ant-collapse-header {
+  padding: 0 !important;
+}
+
 ::-webkit-scrollbar {
   width: 12px;
   height: 12px;

src/modules/Table/TableSettings.jsx

@@ -40,7 +40,7 @@ export const TableSettings = ({orderColumns}) => {
                   return (
                     <Draggable key={`list-${num}`} draggableId={`list-${num}`} index={index}>
                       {(provided) => (
-                        <div className="flex flex-row gap-2 p-1 hover:bg-gray-300" ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>
+                        <div className="flex flex-row gap-2 p-1.5 hover:bg-gray-300 rounded-md" ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>
                           <Checkbox onChange={() => hideColumn(index)} checked={item.show} />
                           <p className="m-0">
                             { orderColumns.defaultColumns[num].name || orderColumns.defaultColumns[num].title }