123

pages/marketplaces/components/BaseMarketplaceColumnRender/BaseMarketplaceColumnRender.tsx

@@ -0,0 +1,11 @@
+import { Avatar, Image, ThemeIcon } from '@mantine/core';
+import { BaseMarketplaceSchema } from '@/lib/client';
+
+type Props = {
+  object: BaseMarketplaceSchema;
+};
+const BaseMarketplaceColumnRender = ({ object }: Props) => {
+  return <Avatar src={object.iconUrl} radius={"xs"} />;
+};
+
+export default BaseMarketplaceColumnRender;

pages/marketplaces/components/MarketplacesTable/MarketplacesTable.tsx

@@ -0,0 +1,41 @@
+import { IconCirclePlus } from '@tabler/icons-react';
+import { useQuery } from '@tanstack/react-query';
+import { ActionIcon, Affix, Tooltip } from '@mantine/core';
+
+import BaseTable from '@/components/BaseTable/BaseTable';
+import { MarketplaceSchema } from '@/lib/client';
+import { getMarketplacesOptions } from '@/lib/client/@tanstack/react-query.gen';
+import useMarketplacesTableColumns from '@/pages/marketplaces/components/MarketplacesTable/columns';
+import { CRUDTableProps } from '@/types/CrudTable/CrudTable';
+
+type Props = CRUDTableProps<MarketplaceSchema>;
+const MarketplacesTable = (props: Props) => {
+  const { data, isLoading } = useQuery({
+    ...getMarketplacesOptions({ path: { clientId: 5 } }),
+  });
+  const onCreateClick = ()=>{
+
+  }
+
+  const columns = useMarketplacesTableColumns();
+  return (
+    <>
+      <BaseTable
+        scrollAreaProps={{ type: 'auto' }}
+        style={{ width: '100%', height: '100%' }}
+        records={data?.items || []}
+        columns={columns}
+        fetching={isLoading}
+      />
+      <Affix position={{ bottom: 40, right: 40 }}>
+        <Tooltip label="Создать маркетплейс" withArrow>
+          <ActionIcon onClick={() => {}} size="xl" variant="gradient" radius="xl">
+            <IconCirclePlus />
+          </ActionIcon>
+        </Tooltip>
+      </Affix>
+    </>
+  );
+};
+
+export default MarketplacesTable;

pages/marketplaces/components/MarketplacesTable/columns.tsx

@@ -0,0 +1,57 @@
+import { useMemo } from 'react';
+import { IconSettings } from '@tabler/icons-react';
+import { DataTableColumn } from 'mantine-datatable';
+import { Center } from '@mantine/core';
+import BaseTableActions from '@/components/Tables/Actions/BaseTableActions';
+import { MarketplaceSchema } from '@/lib/client';
+import { zMarketplaceSchema } from '@/lib/client/zod.gen';
+import BaseMarketplaceColumnRender from '@/pages/marketplaces/components/BaseMarketplaceColumnRender/BaseMarketplaceColumnRender';
+
+const useMarketplacesTableColumns = () => {
+  return useMemo(
+    () =>
+      [
+        {
+          accessor: 'id',
+          title: 'ID',
+          width: '0%',
+        },
+        {
+          accessor: 'baseMarketplace',
+          title: 'Базовый маркетплейс',
+          render: ({ baseMarketplace }: MarketplaceSchema) => (
+            <BaseMarketplaceColumnRender object={baseMarketplace} />
+          ),
+          width: '0%',
+        },
+        {
+          accessor: 'name',
+          title: 'Название',
+        },
+        {
+          width: '0%',
+          accessor: 'actions',
+          title: (
+            <Center>
+              <IconSettings size={16} />
+            </Center>
+          ),
+          render: (element) => (
+            <BaseTableActions
+              element={element}
+              onChange={async () => {
+                // const zodSchema = await zMarketplaceSchema.parseAsync(element)
+                Object.entries(zMarketplaceSchema.shape).forEach(([key, val], index, arr) => {
+                  console.log(val.type);
+                });
+              }}
+              onDelete={async () => {}}
+            />
+          ),
+        },
+      ] as DataTableColumn<MarketplaceSchema>[],
+    []
+  );
+};
+
+export default useMarketplacesTableColumns;