@csbeker/medusa-product-attributes 2.2.0

package/src/admin/routes/attributes/page.tsx

@@ -0,0 +1,346 @@
+import { defineRouteConfig } from "@medusajs/admin-sdk";
+import {
+  Container,
+  Heading,
+  Button,
+  DataTable,
+  useDataTable,
+  DataTablePaginationState,
+  Badge,
+  DropdownMenu,
+  IconButton,
+} from "@medusajs/ui";
+import { ListBullet, XMark, DescendingSorting } from "@medusajs/icons";
+import { useState, useMemo, useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import { SingleColumnLayout } from "../../layouts/single-column";
+import { useAttributeTableColumns } from "../../hooks/table/columns/use-attribute-table-columns";
+
+import { useAttributes } from "../../hooks/api/attributes";
+import { Attribute } from "../../../types/attribute";
+
+const AttributesPage = () => {
+  const navigate = useNavigate();
+  const [page, setPage] = useState(1);
+  const pageSize = 10;
+
+  // Filter state
+  const [filters, setFilters] = useState<{
+    filterable?: boolean;
+    global?: boolean;
+  }>({});
+
+  // Sorting state
+  const [sorting, setSorting] = useState<{
+    field: 'name' | 'created_at' | 'updated_at' | null;
+    order: 'asc' | 'desc';
+  }>({
+    field: null,
+    order: 'asc'
+  });
+
+  // Fetch all attributes for client-side filtering and sorting
+  const { attributes: allAttributes, isLoading } = useAttributes({
+    limit: 1000, // Get all records
+    offset: 0,
+    fields: "id,name,description,handle,ui_component,is_filterable,is_required,product_categories.id,product_categories.name,possible_values.*,created_at,updated_at",
+  })
+
+  const { columns, modal } = useAttributeTableColumns()
+
+  const [pagination, setPagination] = useState<DataTablePaginationState>({
+    pageIndex: page - 1,
+    pageSize,
+  });
+
+  const [search, setSearch] = useState("");
+
+  useEffect(() => {
+    setPagination(prev => ({ ...prev, pageIndex: 0 }));
+  }, [search]);
+
+  const addFilter = (key: 'filterable' | 'global', value: boolean) => {
+    setFilters(prev => ({ ...prev, [key]: value }));
+    setPagination(prev => ({ ...prev, pageIndex: 0 }));
+  };
+
+  const removeFilter = (key: 'filterable' | 'global') => {
+    setFilters(prev => {
+      const newFilters = { ...prev };
+      delete newFilters[key];
+      return newFilters;
+    });
+    setPagination(prev => ({ ...prev, pageIndex: 0 }));
+  };
+
+  const clearAllFilters = () => {
+    setFilters({});
+    setPagination(prev => ({ ...prev, pageIndex: 0 }));
+  };
+
+  const handleSortFieldChange = (field: 'name' | 'created_at' | 'updated_at') => {
+    setSorting(prev => ({
+      ...prev,
+      field: prev.field === field ? null : field
+    }));
+  };
+
+  const handleSortOrderChange = (order: 'asc' | 'desc') => {
+    setSorting(prev => ({ ...prev, order }));
+  };
+
+  // Client-side filtering and sorting logic
+  const processedAttributes = useMemo(() => {
+    if (!allAttributes) return [];
+
+    let filtered = [...allAttributes];
+
+    if (filters.filterable !== undefined) {
+      filtered = filtered.filter(attr => attr.is_filterable === filters.filterable);
+    }
+
+    if (filters.global !== undefined) {
+      filtered = filtered.filter(attr => {
+        const isGlobal = !attr.product_categories?.length;
+        return isGlobal === filters.global;
+      });
+    }
+
+    if (search.trim()) {
+      const searchLower = search.toLowerCase();
+      filtered = filtered.filter(attr =>
+        attr.name?.toLowerCase().includes(searchLower) ||
+        attr.description?.toLowerCase().includes(searchLower)
+      );
+    }
+
+    if (sorting.field) {
+      filtered.sort((a, b) => {
+        let aValue: any;
+        let bValue: any;
+
+        switch (sorting.field) {
+          case 'name':
+            aValue = (a.name || '').toLowerCase().trim();
+            bValue = (b.name || '').toLowerCase().trim();
+            break;
+          case 'created_at':
+            aValue = (a.created_at || '').trim();
+            bValue = (b.created_at || '').trim();
+            break;
+          case 'updated_at':
+            aValue = (a.updated_at || '').trim();
+            bValue = (b.updated_at || '').trim();
+            break;
+          default:
+            return 0;
+        }
+
+        if (aValue < bValue) return sorting.order === 'asc' ? -1 : 1;
+        if (aValue > bValue) return sorting.order === 'asc' ? 1 : -1;
+        return 0;
+      });
+    }
+
+    return filtered;
+  }, [allAttributes, filters, search, sorting]);
+
+  // Pagination logic
+  const paginatedAttributes = useMemo(() => {
+    const startIndex = pagination.pageIndex * pagination.pageSize;
+    const endIndex = startIndex + pagination.pageSize;
+    return processedAttributes.slice(startIndex, endIndex);
+  }, [processedAttributes, pagination]);
+
+  const table = useDataTable({
+    columns,
+    data: paginatedAttributes || [],
+    getRowId: (attribute: Attribute) => attribute.id,
+    rowCount: processedAttributes.length,
+    isLoading,
+    pagination: {
+      state: pagination,
+      onPaginationChange: (newPagination) => {
+        setPagination(newPagination);
+        setPage(newPagination.pageIndex + 1);
+      },
+    },
+    search: {
+      state: search,
+      onSearchChange: setSearch,
+    },
+    onRowClick: (_event, row: Attribute) => {
+      navigate(`/attributes/${row.id}`);
+    },
+  });
+
+  return (
+    <SingleColumnLayout>
+      <Container className="divide-y p-0">
+        <div className="flex items-center justify-between px-6 py-4">
+          <Heading level="h2">Product Attributes</Heading>
+          <Button
+            variant="primary"
+            size="small"
+            onClick={() => navigate("/attributes/create")}
+          >
+            Create
+          </Button>
+        </div>
+
+        <div>
+          <DataTable instance={table}>
+            <DataTable.Toolbar className="flex flex-col items-start justify-between gap-2 md:flex-row md:items-center">
+              <div className="flex flex-wrap items-center gap-2">
+                {/* Active Filters */}
+                {filters.filterable !== undefined && (
+                  <Badge size="small" className="flex items-center gap-1 bg-ui-bg-subtle text-ui-fg-subtle">
+                    Filterable
+                    <DropdownMenu>
+                      <DropdownMenu.Trigger asChild>
+                        <button className="hover:bg-ui-bg-subtle-hover px-2 h-7 border border-ui-border-base">
+                          {filters.filterable ? "Yes" : "No"}
+                        </button>
+                      </DropdownMenu.Trigger>
+                      <DropdownMenu.Content align="start">
+                        <DropdownMenu.Item onClick={() => addFilter('filterable', true)}>
+                          {filters.filterable === true ? <span className="mr-2">•</span> : <span className="ml-4" />}
+                          Yes
+                        </DropdownMenu.Item>
+                        <DropdownMenu.Item onClick={() => addFilter('filterable', false)}>
+                          {filters.filterable === false ? <span className="mr-2">•</span> : <span className="ml-4" />}
+                          No
+                        </DropdownMenu.Item>
+                      </DropdownMenu.Content>
+                    </DropdownMenu>
+                    <button
+                      onClick={() => removeFilter('filterable')}
+                      className="hover:bg-ui-bg-subtle-hover px-2 h-7 border border-ui-border-base bg-ui-bg-subtle flex items-center justify-center rounded-e-md border-x-0 -ml-1 -mr-2"
+                    >
+                      <XMark />
+                    </button>
+                  </Badge>
+                )}
+                {filters.global !== undefined && (
+                  <Badge size="small" className="flex items-center gap-1 bg-ui-bg-subtle text-ui-fg-subtle">
+                    Global
+                    <DropdownMenu>
+                      <DropdownMenu.Trigger asChild>
+                        <button className="hover:bg-ui-bg-subtle-hover px-2 h-7 border border-ui-border-base">
+                          {filters.global ? "Yes" : "No"}
+                        </button>
+                      </DropdownMenu.Trigger>
+                      <DropdownMenu.Content align="start">
+                        <DropdownMenu.Item onClick={() => addFilter('global', true)}>
+                          {filters.global === true ? <span className="mr-2">•</span> : <span className="ml-4" />}
+                          Yes
+                        </DropdownMenu.Item>
+                        <DropdownMenu.Item onClick={() => addFilter('global', false)}>
+                          {filters.global === false ? <span className="mr-2">•</span> : <span className="ml-4" />}
+                          No
+                        </DropdownMenu.Item>
+                      </DropdownMenu.Content>
+                    </DropdownMenu>
+                    <button
+                      onClick={() => removeFilter('global')}
+                      className="hover:bg-ui-bg-subtle-hover px-2 h-7 border border-ui-border-base bg-ui-bg-subtle flex items-center justify-center rounded-e-md border-x-0 -ml-1 -mr-2"
+                    >
+                      <XMark />
+                    </button>
+                  </Badge>
+                )}
+
+                {/* Add Filter Button */}
+                <DropdownMenu>
+                  <DropdownMenu.Trigger asChild disabled={filters.filterable !== undefined && filters.global !== undefined}>
+                    <Button
+                      variant="secondary"
+                      size="small"
+                      disabled={filters.filterable !== undefined && filters.global !== undefined}
+                    >
+                      Add filter
+                    </Button>
+                  </DropdownMenu.Trigger>
+                  <DropdownMenu.Content align="start">
+                    {filters.filterable === undefined && (
+                      <DropdownMenu.Item onClick={() => addFilter('filterable', true)}>
+                        Filterable
+                      </DropdownMenu.Item>
+                    )}
+                    {filters.global === undefined && (
+                      <DropdownMenu.Item onClick={() => addFilter('global', true)}>
+                        Global
+                      </DropdownMenu.Item>
+                    )}
+                  </DropdownMenu.Content>
+                </DropdownMenu>
+
+                {/* Clear All Button */}
+                {Object.keys(filters).length > 0 && (
+                  <Button
+                    className="text-ui-fg-muted hover:text-ui-fg-subtle"
+                    variant="transparent"
+                    size="small"
+                    onClick={clearAllFilters}
+                  >
+                    Clear all
+                  </Button>
+                )}
+              </div>
+
+              <div className="flex items-center gap-2">
+                <DataTable.Search placeholder="Search table" />
+
+                {/* Sorting Dropdown */}
+                <DropdownMenu>
+                  <DropdownMenu.Trigger asChild>
+                    <IconButton size="small">
+                      <DescendingSorting />
+                    </IconButton>
+                  </DropdownMenu.Trigger>
+                  <DropdownMenu.Content align="end">
+                    <div className="px-2 py-1">
+                      <DropdownMenu.Item onClick={() => handleSortFieldChange('name')}>
+                        {sorting.field === 'name' ? <span className="mr-2">•</span> : <span className="ml-4" />}
+                        Name
+                      </DropdownMenu.Item>
+                      <DropdownMenu.Item onClick={() => handleSortFieldChange('created_at')}>
+                        {sorting.field === 'created_at' ? <span className="mr-2">•</span> : <span className="ml-4" />}
+                        Created At
+                      </DropdownMenu.Item>
+                      <DropdownMenu.Item onClick={() => handleSortFieldChange('updated_at')}>
+                        {sorting.field === 'updated_at' ? <span className="mr-2">•</span> : <span className="ml-4" />}
+                        Updated At
+                      </DropdownMenu.Item>
+                    </div>
+                    <DropdownMenu.Separator />
+                    <div className="px-2 py-1">
+                      <DropdownMenu.Item onClick={() => handleSortOrderChange('asc')}>
+                        {sorting.order === 'asc' ? <span className="mr-2">•</span> : <span className="ml-4" />}
+                        Ascending (1 → 30)
+                      </DropdownMenu.Item>
+                      <DropdownMenu.Item onClick={() => handleSortOrderChange('desc')}>
+                        {sorting.order === 'desc' ? <span className="mr-2">•</span> : <span className="ml-4" />}
+                        Descending (30 → 1)
+                      </DropdownMenu.Item>
+                    </div>
+                  </DropdownMenu.Content>
+                </DropdownMenu>
+              </div>
+            </DataTable.Toolbar>
+            <DataTable.Table />
+            <DataTable.Pagination />
+          </DataTable>
+        </div>
+      </Container>
+      {modal}
+    </SingleColumnLayout>
+  );
+};
+
+export const config = defineRouteConfig({
+  label: "Attributes",
+  icon: ListBullet,
+});
+
+export default AttributesPage;

package/src/admin/routes/attributes/set/[id]/attributes/page.tsx

@@ -0,0 +1,35 @@
+import { useParams } from 'react-router-dom'
+import { AttributeSetAttributesForm } from '../components/attribute-set-attributes-form'
+import { useAttributes } from '../../../../../hooks/api/attributes'
+import { defineRouteConfig } from '@medusajs/admin-sdk'
+
+const AttributeSetAttributesPage = () => {
+    const { id } = useParams()
+
+    if (!id) {
+        return (
+            <p>Something went wrong...</p>
+        )
+    }
+
+    const { attributes, isLoading } = useAttributes({
+        sets: {
+            id
+        }
+    })
+
+    if (isLoading) {
+        return (
+            <p>Loading...</p>
+        )
+    }
+
+    return (
+        <AttributeSetAttributesForm attributeSetId={id} attributes={attributes || []}/>
+    )
+}
+
+export const config = defineRouteConfig({});
+  
+export default AttributeSetAttributesPage
+  

package/src/admin/routes/attributes/set/[id]/components/AttributeSetAttributesSection.tsx

@@ -0,0 +1,114 @@
+import { useMemo, useState } from "react";
+import { Attribute, AttributeSet } from "../../../../../../types/attribute";
+import { useAttributes } from "../../../../../hooks/api/attributes";
+import {
+    Container,
+  createDataTableColumnHelper,
+  createDataTableCommandHelper,
+  DataTable,
+  DataTableRowSelectionState,
+  DropdownMenu,
+  Heading,
+  IconButton,
+  toast,
+  useDataTable,
+} from "@medusajs/ui";
+import { useAttributeTableColumns } from "../../../../../hooks/table/columns";
+import { EllipsisHorizontal, Plus } from "@medusajs/icons";
+import { useNavigate } from 'react-router-dom' 
+import { useBatchAttributesToSets } from "../../../../../hooks/api/attribute-set";
+
+type Props = {
+  attributeSet: AttributeSet;
+};
+
+export const AttributeSetAttributesSection = ({ attributeSet }: Props) => {
+  const [rowSelection, setRowSelection] = useState<DataTableRowSelectionState>(
+    {}
+  );
+  const navigate = useNavigate()
+
+  const { attributes, count, isLoading } = useAttributes({
+    sets: {
+      id: attributeSet.id,
+    },
+    fields: 'id, name, handle, product_categories.id, possible_values.value',
+  });
+
+  console.log('Received attrs in attribute set detail -> ', attributes)
+  
+  const { mutateAsync } = useBatchAttributesToSets(attributeSet.id)
+  const columns = useColumns();
+  const commands = useCommands((selection: DataTableRowSelectionState) => 
+    mutateAsync({
+      remove: Object.keys(selection)
+    }, {
+      onSuccess: () => {
+        toast.success('Removed attributes from set')
+      },
+      onError: (error) => {
+        toast.error(error.message)
+      }
+    })
+  );
+
+  const table = useDataTable({
+    data: attributes || [],
+    columns,
+    getRowId: (product) => product.id,
+    rowCount: count,
+    isLoading,
+    commands,
+    rowSelection: {
+      state: rowSelection,
+      onRowSelectionChange: setRowSelection,
+    },
+  });
+
+  return (
+    <Container className="divide-y p-0">
+        <DataTable instance={table}>
+        <DataTable.Toolbar className="flex justify-between items-center">
+            <Heading>Attributes</Heading>
+            <DropdownMenu>
+                <DropdownMenu.Trigger>
+                    <IconButton variant="transparent">
+                        <EllipsisHorizontal />
+                    </IconButton>
+                </DropdownMenu.Trigger>
+                <DropdownMenu.Content>
+                    <DropdownMenu.Item onClick={() => navigate(`/attributes/set/${attributeSet.id}/attributes`)}>
+                        <Plus className="mr-2" />
+                        Add
+                    </DropdownMenu.Item>
+                </DropdownMenu.Content>
+            </DropdownMenu>
+        </DataTable.Toolbar>
+        <DataTable.Table />
+        <DataTable.CommandBar selectedLabel={(count) => `${count} selected`} />
+        </DataTable>
+    </Container>
+  );
+};
+
+const columnHelper = createDataTableColumnHelper<Attribute>();
+
+const useColumns = () => {
+  const base = useAttributeTableColumns();
+
+  return useMemo(() => [columnHelper.select(), ...base], [base]);
+};
+
+const commandHelper = createDataTableCommandHelper();
+
+const useCommands = (onDelete: (selection: DataTableRowSelectionState) => Promise<unknown>) => {
+  return [
+    commandHelper.command({
+      label: "Eliminar",
+      shortcut: "D",
+      action: async (selection) => {
+        await onDelete(selection)
+      },
+    }),
+  ];
+};

package/src/admin/routes/attributes/set/[id]/components/AttributeSetGeneralSection.tsx

@@ -0,0 +1,42 @@
+import { EllipsisHorizontal, PencilSquare, Trash } from "@medusajs/icons";
+import { Container, Heading, DropdownMenu, IconButton } from "@medusajs/ui";
+import { AttributeSet } from "../../../../../../types/attribute";
+import { SectionRow } from "../../../../../components/section-row";
+import { useNavigate } from "react-router-dom" 
+
+type Props = {
+  attributeSet: AttributeSet;
+};
+
+export const AttributeSetGeneralSection = ({ attributeSet }: Props) => {
+  const navigate = useNavigate()
+
+  return (
+    <Container className="divide-y p-0">
+      <div className="flex items-center justify-between px-6 py-4">
+        <Heading level="h1">{attributeSet.name}</Heading>
+        <DropdownMenu>
+          <DropdownMenu.Trigger asChild>
+            <IconButton variant="transparent">
+              <EllipsisHorizontal />
+            </IconButton>
+          </DropdownMenu.Trigger>
+
+          <DropdownMenu.Content>
+            <DropdownMenu.Item onClick={() => navigate(`/attributes/set/${attributeSet.id}/edit`)}>
+              <PencilSquare className="mr-2" />
+              Edit
+            </DropdownMenu.Item>
+            <DropdownMenu.Item>
+              <Trash className="mr-2" />
+              Delete
+            </DropdownMenu.Item>
+          </DropdownMenu.Content>
+        </DropdownMenu>
+      </div>
+      <SectionRow title="Name" value={attributeSet.name} />
+      <SectionRow title="Handle" value={attributeSet.handle} />
+      <SectionRow title="Description" value={attributeSet.description} />
+    </Container>
+  );
+};

package/src/admin/routes/attributes/set/[id]/components/attribute-set-attributes-form.tsx

@@ -0,0 +1,143 @@
+import { useMemo, useState } from "react";
+import { Attribute, AttributeSet } from "../../../../../../types/attribute";
+import {
+  Button,
+  createDataTableColumnHelper,
+  DataTable,
+  DataTableRowSelectionState,
+  FocusModal,
+  toast,
+  useDataTable,
+} from "@medusajs/ui";
+import { useAttributeTableColumns } from "../../../../../hooks/table/columns";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+import { useAttributes } from "../../../../../hooks/api/attributes";
+import { useNavigate } from "react-router-dom";
+import { useBatchAttributesToSets } from "../../../../../hooks/api/attribute-set";
+
+type Props = {
+  attributeSetId: string;
+  attributes: Attribute[];
+};
+
+const FormSchema = z.object({
+  attribute_ids: z.array(z.string()),
+});
+type FormValues = z.infer<typeof FormSchema>;
+
+export const AttributeSetAttributesForm = ({
+  attributeSetId,
+  attributes = [],
+}: Props) => {
+  const [selection, setSelection] = useState<DataTableRowSelectionState>(
+    attributes.reduce((acc, attr) => {
+      acc[attr.id] = true;
+      return acc;
+    }, {} as DataTableRowSelectionState)
+  );
+  console.log('selection -> ', selection)
+  const navigate = useNavigate();
+
+  const columns = useColumns();
+  const form = useForm<FormValues>({
+    resolver: zodResolver(FormSchema),
+    defaultValues: {
+      attribute_ids: [],
+    },
+  });
+
+  const { mutateAsync, isPending } = useBatchAttributesToSets(attributeSetId);
+
+  const handleSelectionChange = (selection: DataTableRowSelectionState) => {
+    form.setValue("attribute_ids", Object.keys(selection), {
+      shouldDirty: true,
+      shouldTouch: true,
+    });
+
+    setSelection(selection);
+  };
+
+  const handleSubmit = form.handleSubmit(async (data: FormValues) => {
+    await mutateAsync(
+      {
+        add: data.attribute_ids,
+      },
+      {
+        onSuccess: () => {
+          toast.success("Linked attributes to set");
+          navigate(-1);
+        },
+        onError: (error) => {
+          toast.error(error.message);
+        },
+      }
+    );
+  });
+
+  const handleClose = () => {
+    navigate(-1);
+  };
+
+  const { attributes: data, count, isLoading } = useAttributes();
+
+  const table = useDataTable({
+    data: data || [],
+    columns,
+    getRowId: (attribute) => attribute.id,
+    rowCount: count,
+    isLoading,
+    rowSelection: {
+      state: selection,
+      onRowSelectionChange: handleSelectionChange,
+    },
+  });
+
+  return (
+    <FocusModal
+      open={true}
+      onOpenChange={(open) => {
+        if (!open) handleClose();
+      }}
+    >
+      <FocusModal.Content>
+        <FocusModal.Header>
+          <div>
+            <Button
+              className="mr-2"
+              type="button"
+              size="small"
+              disabled={isPending}
+            >
+              Cancel
+            </Button>
+            <Button
+              type="submit"
+              form="attribute-set-attributes-form"
+              variant="secondary"
+              disabled={isPending}
+            >
+              Save
+            </Button>
+          </div>
+        </FocusModal.Header>
+        <FocusModal.Body>
+          <form id='attribute-set-attributes-form' onSubmit={handleSubmit}>
+            <DataTable instance={table}>
+              <DataTable.Table />
+            </DataTable>
+          </form>
+        </FocusModal.Body>
+      </FocusModal.Content>
+    </FocusModal>
+  );
+};
+
+const columnHelper = createDataTableColumnHelper<Attribute>();
+
+const useColumns = () => {
+  const base = useAttributeTableColumns();
+
+  return useMemo(() => [columnHelper.select(), ...base], [base]);
+};

package/src/admin/routes/attributes/set/[id]/components/index.ts

@@ -0,0 +1,2 @@
+export * from './AttributeSetAttributesSection'
+export * from './AttributeSetGeneralSection'