apps/web:/Components added AdminRow and AdminRows components

apps/web/Components/Admin/AdminRow/AdminRow.tsx

@@ -1,13 +1,16 @@
 import style from '../AdminTable/Admin.module.css';
+import { getQueryValue } from '@/api/cache/query';
+import type { ResponseQueries } from '@/api/cache/types';
 import type { CollapseProps } from 'antd';
 import { Button, Collapse } from 'antd';
+import { useState } from 'react';
 import styled from 'styled-components';
 
 type IProps = {
   readonly data: string;
   readonly index: number;
   readonly name: string;
-  readonly onClick: (name: string) => void;
+  readonly onClick: (name: string, key: string) => void;
 };
 
 const Wrapper = styled.div`
@@ -17,12 +20,7 @@ const Wrapper = styled.div`
 
 export default function AdminRow(props: IProps) {
   const { data, index, name, onClick } = props;
-
-  const handleClick = () => {
-    onClick(name);
-  };
-
-  const items: CollapseProps['items'] = [
+  const defaultItems: CollapseProps['items'] = [
     {
       children: <p>{data}</p>,
       key: index.toString(),
@@ -30,10 +28,36 @@ export default function AdminRow(props: IProps) {
     },
   ];
 
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [queryText, setQueryText] = useState<ResponseQueries>({});
+  const [items, setItems] = useState<CollapseProps['items']>(defaultItems);
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [key, setKey] = useState(data);
+
+  const handleClick = () => {
+    onClick(name, key);
+  };
+
+  const handleChange = async () => {
+    const query = await getQueryValue(key);
+    setQueryText(query);
+    setItems(
+      [...items].map((obj) => ({
+        ...obj,
+        children: <p>lolo</p>,
+      }))
+    );
+  };
+
   return (
     <Wrapper>
-      <Collapse className={style.collapse} items={items} />
+      <Collapse className={style.collapse} onChange={handleChange} items={items} />
       <Button onClick={handleClick}>Удалить</Button>
     </Wrapper>
   );
 }
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function addSlashToString(key: string) {
+  return key.replace(`"`, '"');
+}

apps/web/Components/Admin/AdminRows/AdminRows.tsx

@@ -1,6 +1,6 @@
 import AdminRow from '../AdminRow/AdminRow';
 import type { CollapseProps } from 'antd';
-import { Collapse } from 'antd';
+import { Collapse } from 'ui/elements';
 
 export default function AdminRows({
   index,
@@ -10,11 +10,11 @@ export default function AdminRows({
 }: {
   readonly index: number;
   readonly name: string;
-  readonly onClick: (name: string) => void;
+  readonly onClick: (name: string, key: string) => void;
   readonly queries: string[];
 }) {
   if (queries.length === 0) {
-    const items2: CollapseProps['items'] = [
+    const items: CollapseProps['items'] = [
       {
         children: null,
         key: index.toString(),
@@ -22,14 +22,18 @@ export default function AdminRows({
       },
     ];
 
-    return <Collapse items={items2} />;
+    return <Collapse items={items} />;
   }
 
-  const rows: CollapseProps['items'] = queries.map((x, ind) => ({
-    children: <AdminRow key={x} data={x} index={ind} name={name} onClick={onClick} />,
-    key: index.toString(),
-    label: name,
-  }));
+  const rows: CollapseProps['items'] = [
+    {
+      children: queries.map((x, ind) => (
+        <AdminRow key={x} data={x} index={ind} name={name} onClick={onClick} />
+      )),
+      key: index.toString(),
+      label: name,
+    },
+  ];
 
   return <Collapse items={rows} />;
 }

apps/web/Components/Admin/AdminTable/AdminTable.tsx

@@ -1,21 +1,49 @@
 import AdminRows from '../AdminRows/AdminRows';
-import { deleteQuery, getQueries } from '@/api/cache/query';
+import { deleleteQueriesByKey, deleteQuery, getQueries } from '@/api/cache/query';
 import type { ResponseQueries } from '@/api/cache/types';
 import { useEffect, useState } from 'react';
+import type { QueryItem } from 'shared/types/cache';
+import styled from 'styled-components';
+import { Button } from 'ui/elements';
+
+const Wrapper = styled.div`
+  display: flex;
+  justify-content: space-between;
+  > * {
+    &:first-child {
+      flex-grow: 1;
+    }
+  }
+`;
 
 export default function AdminTable() {
   const [data, setData] = useState<ResponseQueries>({});
 
-  const handleClick = async (name: string) => {
-    await deleteQuery(name);
-    const queryList = await getQueries();
-    setData(queryList);
+  const handleClick = async (name: string, key: string) => {
+    await deleteQuery(key);
+
+    const index = data[name].queries.indexOf(key);
+    const updatedQuery: QueryItem = { ...data[name] };
+
+    if (index >= 0 && updatedQuery.queries.length > 1) {
+      setData({ ...data, [name]: { ...data[name], queries: data[name].queries.splice(index, 1) } });
+    } else if (index === 0) {
+      setData({ ...data, [name]: { ...data[name], queries: [] } });
+    }
+  };
+
+  const handleClickQueriesGroup = async (name: string) => {
+    await deleleteQueriesByKey(name);
+    if (data[name].queries.length > 0) {
+      const updatedQuery = { ...data[name], queries: [] };
+      setData({ ...data, [name]: updatedQuery });
+    }
   };
 
   useEffect(() => {
     const getRows = async () => {
       const queryList = await getQueries();
-      // debugger;
+
       setData(queryList);
     };
 
@@ -25,13 +53,16 @@ export default function AdminTable() {
   return (
     <>
       {Object.keys(data).map((key, index) => (
-        <AdminRows
-          key={key}
-          queries={data[key].queries}
-          name={key}
-          index={index}
-          onClick={handleClick}
-        />
+        <Wrapper key={key}>
+          <AdminRows
+            key={key}
+            queries={data[key].queries}
+            name={key}
+            index={index}
+            onClick={handleClick}
+          />
+          <Button onClick={() => handleClickQueriesGroup(key)}>Удалить все</Button>
+        </Wrapper>
       ))}
     </>
   );