@csbeker/medusa-product-attributes 2.2.0

package/src/admin/lib/query-key-factory.ts

@@ -0,0 +1,53 @@
+import { QueryKey, UseQueryOptions } from "@tanstack/react-query"
+
+export type TQueryKey<TKey, TListQuery = any, TDetailQuery = string> = {
+  all: readonly [TKey]
+  lists: () => readonly [...TQueryKey<TKey>["all"], "list"]
+  list: (
+    query?: TListQuery
+  ) => readonly [...ReturnType<TQueryKey<TKey>["lists"]>, { query: TListQuery }]
+  details: () => readonly [...TQueryKey<TKey>["all"], "detail"]
+  detail: (
+    id: TDetailQuery,
+    query?: TListQuery
+  ) => readonly [
+    ...ReturnType<TQueryKey<TKey>["details"]>,
+    TDetailQuery,
+    { query: TListQuery },
+  ]
+}
+
+export type UseQueryOptionsWrapper<
+  // Return type of queryFn
+  TQueryFn = unknown,
+  // Type thrown in case the queryFn rejects
+  E = Error,
+  // Query key type
+  TQueryKey extends QueryKey = QueryKey,
+> = Omit<
+  UseQueryOptions<TQueryFn, E, TQueryFn, TQueryKey>,
+  "queryKey" | "queryFn"
+>
+
+export const queryKeysFactory = <
+  T,
+  TListQueryType = any,
+  TDetailQueryType = string,
+>(
+  globalKey: T
+) => {
+  const queryKeyFactory: TQueryKey<T, TListQueryType, TDetailQueryType> = {
+    all: [globalKey],
+    lists: () => [...queryKeyFactory.all, "list"],
+    list: (query?: TListQueryType) =>
+      [...queryKeyFactory.lists(), query ? { query } : undefined].filter(
+        (k) => !!k
+      ),
+    details: () => [...queryKeyFactory.all, "detail"],
+    detail: (id: TDetailQueryType, query?: TListQueryType) =>
+      [...queryKeyFactory.details(), id, query ? { query } : undefined].filter(
+        (k) => !!k
+      ),
+  }
+  return queryKeyFactory
+}

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

@@ -0,0 +1,133 @@
+import { defineRouteConfig } from "@medusajs/admin-sdk";
+import { FocusModal, Heading, Button, toast, ProgressTabs } from "@medusajs/ui";
+import { useNavigate, useParams } from "react-router-dom";
+import { medusaClient } from "../../../../lib/config";
+import { useEffect, useState } from "react";
+import { AdminProductCategory } from "@medusajs/types";
+import {
+  AttributeForm,
+  CreateAttributeFormSchema,
+} from "../../components/AttributeForm";
+import { z } from "zod";
+import {
+  attributeQueryKeys,
+  useAttribute,
+  useUpdateAttribute,
+} from "../../../../hooks/api/attributes";
+import { useQueryClient } from "@tanstack/react-query";
+
+const EditAttributePage = () => {
+  const navigate = useNavigate();
+  const { id } = useParams();
+  const [categories, setCategories] = useState<AdminProductCategory[]>([]);
+  const [activeTab, setActiveTab] = useState<"details" | "type">("details");
+  const [tabStatuses, setTabStatuses] = useState<{
+    detailsStatus: "not-started" | "in-progress" | "completed";
+    typeStatus: "not-started" | "in-progress" | "completed";
+  }>({
+    detailsStatus: "completed", // Edit mode starts with completed status
+    typeStatus: "completed",    // Edit mode starts with completed status
+  });
+  const queryClient = useQueryClient();
+
+  const { attribute, isLoading } = useAttribute(
+    id ?? "",
+    {
+      fields:
+        "name,description,handle,is_variant_defining,is_filterable,ui_component,product_categories.name,possible_values.*",
+    },
+    { enabled: !!id }
+  );
+
+  const { mutateAsync } = useUpdateAttribute(id!);
+
+  useEffect(() => {
+    const fetchCategories = async () => {
+      try {
+        const response = await medusaClient.admin.productCategory.list();
+        setCategories(response.product_categories);
+      } catch (error) {
+        console.error("Failed to fetch categories:", error);
+      }
+    };
+    fetchCategories();
+  }, []);
+
+  const handleSave = async (
+    data: z.infer<typeof CreateAttributeFormSchema>
+  ) => {
+    const { ...payload } = data;
+    await mutateAsync(payload, {
+      onSuccess: () => {
+        queryClient.invalidateQueries({ queryKey: attributeQueryKeys.lists() });
+        toast.success("Attribute updated!");
+        navigate(-1);
+      },
+      onError: (error) => {
+        toast.error((error as Error).message);
+        console.error(error);
+      },
+    });
+  };
+
+  const handleClose = () => {
+    navigate(-1);
+  };
+
+  if (isLoading || !attribute) {
+    return null;
+  }
+
+  return (
+    <FocusModal
+      open={true}
+      onOpenChange={(open) => {
+        if (!open) handleClose();
+      }}
+    >
+      <FocusModal.Content>
+        <ProgressTabs value={activeTab} onValueChange={(value) => setActiveTab(value as "details" | "type")} className="w-full h-full">
+          <FocusModal.Header className="flex items-center justify-between w-full py-0 h-fit">
+            <div className="w-full border-l h-full">
+              <ProgressTabs.List className="justify-start flex w-full items-center">
+                <ProgressTabs.Trigger value="details" status={tabStatuses.detailsStatus}>
+                  Details
+                </ProgressTabs.Trigger>
+                <ProgressTabs.Trigger value="type" status={tabStatuses.typeStatus}>
+                  Type
+                </ProgressTabs.Trigger>
+              </ProgressTabs.List>
+            </div>
+          </FocusModal.Header>
+          <FocusModal.Body className="flex flex-col items-center py-16">
+            <div>
+              <AttributeForm
+                initialData={attribute}
+                //@ts-expect-error correct data type will be received here
+                onSubmit={handleSave}
+                onCancel={handleClose}
+                categories={categories}
+                activeTab={activeTab}
+                onFormStateChange={setTabStatuses}
+              />
+            </div>
+          </FocusModal.Body>
+        </ProgressTabs>
+        <FocusModal.Footer>
+          <Button variant="secondary" onClick={handleClose}>
+            Cancel
+          </Button>
+          <Button type="submit" form="attribute-form">
+            Save
+          </Button>
+        </FocusModal.Footer>
+      </FocusModal.Content>
+    </FocusModal>
+  );
+};
+
+export const config = defineRouteConfig({
+  label: "Edit Attribute",
+});
+
+export default EditAttributePage;

package/src/admin/routes/attributes/[id]/edit-possible-value/page.tsx

@@ -0,0 +1,174 @@
+import { defineRouteConfig } from "@medusajs/admin-sdk"
+import { Drawer, Heading, Text, Button, Input, toast, Label } from "@medusajs/ui"
+import { useQuery } from "@tanstack/react-query"
+import { useParams, useSearchParams, useNavigate } from "react-router-dom"
+import { medusaClient } from "../../../../lib/config"
+import { Attribute } from "../../../../../types/attribute/http/attribute"
+import { useEffect } from "react"
+import { useForm } from "react-hook-form"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { z } from "zod"
+import { MetadataEditor } from "../../../../components/metadata-editor"
+import { useAttribute, useUpdateAttributePossibleValue } from "../../../../hooks/api/attributes"
+
+const formSchema = z.object({
+  value: z.string().min(1, "Value is required"),
+  rank: z.preprocess(
+    (val) => (val === "" ? undefined : Number(val)),
+    z.number().min(0, "Rank must be non-negative").optional()
+  ),
+  metadata: z.array(z.object({
+    key: z.string(),
+    value: z.string(),
+  })).default([]),
+})
+
+type FormValues = z.infer<typeof formSchema>
+
+const EditPossibleValuePage = () => {
+  const { id: attributeId } = useParams()
+  const [searchParams] = useSearchParams()
+  const navigate = useNavigate()
+  const possibleValueId = searchParams.get("possible_value_id")
+
+  const { attribute, isLoading: isAttributeLoading } = useAttribute(attributeId!, {
+    fields: 'possible_values.*'
+  }, {
+    enabled: !!attributeId,
+  })
+
+  const { mutateAsync, isPending } = useUpdateAttributePossibleValue(attributeId!, possibleValueId!) 
+
+  const possibleValue = attribute?.possible_values?.find((pv: { id: string }) => pv.id === possibleValueId)
+
+  const form = useForm<FormValues>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      value: "",
+      rank: undefined,
+      metadata: [],
+    },
+  })
+
+  useEffect(() => {
+    if (possibleValue) {
+      const metadataArray = Object.entries(possibleValue.metadata || {}).map(([key, value]) => ({ key, value: String(value) }))
+      form.reset({
+        value: possibleValue.value,
+        rank: possibleValue.rank,
+        metadata: metadataArray.length > 0 ? metadataArray : [{ key: "", value: "" }],
+      })
+    }
+  }, [possibleValue, form])
+
+  const handleSave = form.handleSubmit(async (data) => {
+    const transformedMetadata = data.metadata.reduce((acc, item) => {
+      // Only include valid key-value pairs where both key and value are non-empty
+      if (item.key.trim() !== "" && item.value.trim() !== "") {
+        acc[item.key] = item.value;
+      }
+      return acc;
+    }, {} as Record<string, unknown>);
+
+    await mutateAsync(
+      {
+        value: data.value,
+        rank: data.rank,
+        metadata:
+          Object.keys(transformedMetadata).length > 0
+            ? transformedMetadata
+            : null,
+      },
+      {
+        onSuccess: () => {
+          toast.success("Possible value updated!");
+          navigate(-1);
+        },
+        onError: (error) => {
+          toast.error("Failed to update possible value");
+          console.error(error);
+        },
+      }
+    );
+  });
+
+  const handleClose = () => {
+    navigate(`/attributes/${attributeId}`)
+  }
+
+  return (
+    <Drawer open={true} onOpenChange={(open) => { if (!open) handleClose() }}>
+      <Drawer.Content>
+        {isAttributeLoading ? (
+          <>
+            <Drawer.Header>
+              <Heading>Loading...</Heading>
+            </Drawer.Header>
+            <Drawer.Body>
+              <Text>Fetching possible value details...</Text>
+            </Drawer.Body>
+          </>
+        ) : !possibleValue ? (
+          <>
+            <Drawer.Header>
+              <Heading>Possible Value Not Found</Heading>
+            </Drawer.Header>
+            <Drawer.Body>
+              <Text>The requested possible value could not be found.</Text>
+              <Button onClick={handleClose}>Close</Button>
+            </Drawer.Body>
+          </>
+        ) : (
+          <>
+            <Drawer.Header>
+              <Drawer.Title>Edit Possible Value</Drawer.Title>
+            </Drawer.Header>
+            <Drawer.Body>
+              <form id="edit-possible-value-form" onSubmit={handleSave}>
+                <div className="grid gap-4">
+                  <div>
+                    <Label htmlFor="value">Value</Label>
+                    <Input
+                      id="value"
+                      {...form.register("value")}
+                    />
+                    {form.formState.errors.value && (
+                      <Text className="text-red-500 text-sm mt-1">
+                        {form.formState.errors.value.message}
+                      </Text>
+                    )}
+                  </div>
+                  <div>
+                    <Label htmlFor="rank">Rank</Label>
+                    <Input
+                      id="rank"
+                      type="number"
+                      {...form.register("rank", { valueAsNumber: true })}
+                    />
+                    {form.formState.errors.rank && (
+                      <Text className="text-red-500 text-sm mt-1">
+                        {form.formState.errors.rank.message}
+                      </Text>
+                    )}
+                  </div>
+
+                  <MetadataEditor form={form} />
+                </div>
+              </form>
+            </Drawer.Body>
+            <Drawer.Footer>
+              <Button variant="secondary" onClick={handleClose} disabled={!!isPending}>Cancel</Button>
+              <Button type="submit" form="edit-possible-value-form" disabled={!!isPending}>Save</Button>
+            </Drawer.Footer>
+          </>
+        )}
+      </Drawer.Content>
+    </Drawer>
+  )
+}
+
+export const config = defineRouteConfig({
+
+})
+
+export default EditPossibleValuePage 

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

@@ -0,0 +1,127 @@
+import { defineRouteConfig } from "@medusajs/admin-sdk";
+import {
+  Container,
+  Heading,
+  Text,
+  toast,
+  DropdownMenu,
+  Button,
+  Badge,
+} from "@medusajs/ui";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { useParams, useNavigate } from "react-router-dom";
+import { medusaClient } from "../../../lib/config";
+import { Attribute } from "../../../../types/attribute/http/attribute";
+import { EllipsisHorizontal } from "@medusajs/icons";
+import { SectionRow } from "../../../components/section-row";
+import { PossibleValuesTable } from "../components/possible-values-table";
+import { SingleColumnLayout } from "../../../layouts/single-column";
+import { attributeQueryKeys, useAttribute } from "../../../hooks/api/attributes";
+
+const AttributeDetailPage = () => {
+  const { id } = useParams();
+  const navigate = useNavigate();
+
+  const queryClient = useQueryClient()
+
+  const { attribute, isLoading } = useAttribute(id ?? "", {
+    fields: 'name, description, handle, product_categories.name, possible_values.*, is_filterable, ui_component'
+  }, { enabled: !!id })
+
+  if (isLoading) {
+    return (
+      <Container>
+        <div className="flex items-center justify-center h-[200px]">
+          <Text>Loading...</Text>
+        </div>
+      </Container>
+    );
+  }
+
+  if (!attribute) {
+    return (
+      <Container>
+        <div className="flex items-center justify-center h-[200px]">
+          <Text>Attribute not found</Text>
+        </div>
+      </Container>
+    );
+  }
+
+  const handleEdit = () => {
+    navigate(`/attributes/${id}/edit`);
+  };
+
+  const handleDelete = async () => {
+    try {
+      await medusaClient.client.fetch(`/admin/plugin/attributes/${id}`, {
+        method: "DELETE",
+      });
+      toast.success("Attribute deleted!");
+	  queryClient.invalidateQueries({ queryKey: attributeQueryKeys.list() });
+      navigate("/attributes");
+    } catch (error) {
+      toast.error((error as Error).message);
+    }
+  };
+
+  return (
+    <SingleColumnLayout>
+      <Container className="divide-y p-0">
+        <div className="flex items-center justify-between px-6 py-4">
+          <Heading level="h2">{attribute.name}</Heading>
+          <div className="flex items-center gap-2">
+            <DropdownMenu>
+              <DropdownMenu.Trigger asChild>
+                <Button variant="transparent" size="small">
+                  <EllipsisHorizontal />
+                </Button>
+              </DropdownMenu.Trigger>
+              <DropdownMenu.Content align="end">
+                <DropdownMenu.Item onClick={handleEdit}>
+                  Edit
+                </DropdownMenu.Item>
+                <DropdownMenu.Item onClick={handleDelete}>
+                  Delete
+                </DropdownMenu.Item>
+              </DropdownMenu.Content>
+            </DropdownMenu>
+          </div>
+        </div>
+
+        <SectionRow title="Description" value={attribute.description} />
+        <SectionRow title="Handle" value={attribute.handle} />
+		<SectionRow title="UI Component" value={attribute.ui_component} />
+		<SectionRow title="Filterable" value={attribute.is_filterable ? "True" : "False"} />
+        <SectionRow
+          title="Global"
+          value={!attribute.product_categories?.length ? "True" : "False"}
+        />
+
+        {attribute.product_categories &&
+          attribute.product_categories.length > 0 && (
+            <SectionRow
+              title="Product Categories"
+              value={
+                <>
+                  {attribute.product_categories.map((category) => (
+                    <Badge size="xsmall" key={category.id}>
+                      {category.name}
+                    </Badge>
+                  ))}
+                </>
+              }
+            />
+          )}
+      </Container>
+
+      <PossibleValuesTable attribute={attribute} isLoading={isLoading} />
+    </SingleColumnLayout>
+  );
+};
+
+export const config = defineRouteConfig({
+  label: "Attribute Details",
+});
+
+export default AttributeDetailPage;