@haus-tech/badge-plugin 4.0.3 → 4.0.6-0

package/src/dashboard/badge-detail.tsx

@@ -0,0 +1,457 @@
+import {
+  DashboardRouteDefinition,
+  detailPageRouteLoader,
+  useDetailPage,
+  Page,
+  PageTitle,
+  PageActionBar,
+  PageActionBarRight,
+  PageLayout,
+  PageBlock,
+  FormFieldWrapper,
+  Button,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  Label,
+  VendureImage,
+} from '@vendure/dashboard'
+import { AnyRoute, useNavigate } from '@tanstack/react-router'
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
+import { useCallback, useState, useRef, useEffect } from 'react'
+import { toast } from 'sonner'
+import { api } from '@vendure/dashboard'
+import { graphql } from '@/gql'
+import { UploadIcon } from 'lucide-react'
+
+const getBadgeDetailDocument = graphql(`
+  query GetBadgeDetail($id: ID!) {
+    badge(id: $id) {
+      id
+      createdAt
+      updatedAt
+      collection {
+        id
+        name
+      }
+      collectionId
+      position
+      assetId
+      asset {
+        id
+        name
+        type
+        mimeType
+        width
+        height
+        fileSize
+        source
+        preview
+      }
+    }
+  }
+`)
+
+const createBadgeDocument = graphql(`
+  mutation CreateBadge($input: CreateBadgeInput!) {
+    createBadge(input: $input) {
+      id
+    }
+  }
+`)
+
+const updateBadgeDocument = graphql(`
+  mutation UpdateBadge($input: UpdateBadgeInput!) {
+    updateBadge(input: $input) {
+      id
+    }
+  }
+`)
+
+const getBadgePluginConfigDocument = graphql(`
+  query GetBadgePluginConfig {
+    getBadgePluginConfig {
+      availablePositions
+    }
+  }
+`)
+
+const getCollectionsDocument = graphql(`
+  query GetCollections {
+    collections {
+      items {
+        id
+        name
+        slug
+      }
+    }
+  }
+`)
+
+const createAssetsDocument = graphql(`
+  mutation CreateAssets($input: [CreateAssetInput!]!) {
+    createAssets(input: $input) {
+      ... on Asset {
+        id
+        name
+        source
+        preview
+      }
+      ... on MimeTypeError {
+        message
+      }
+    }
+  }
+`)
+
+export const badgeDetailRoute: DashboardRouteDefinition = {
+  path: '/badges/$id',
+  loader: detailPageRouteLoader({
+    queryDocument: getBadgeDetailDocument,
+    breadcrumb: (isNew, entity) => [
+      { path: '/badges', label: 'Badges' },
+      isNew ? 'New Badge' : `Badge ${entity?.id || ''}`,
+    ],
+  }),
+  component: (route) => {
+    return <BadgeDetailPage route={route as any} />
+  },
+}
+
+function BadgeDetailPage({ route }: { route: AnyRoute }) {
+  const params = route.useParams()
+  const navigate = useNavigate()
+  const queryClient = useQueryClient()
+  const creatingNewEntity = params.id === 'new'
+  const fileInputRef = useRef<HTMLInputElement>(null)
+  const [uploadedAsset, setUploadedAsset] = useState<{
+    id: string
+    name: string
+    preview: string
+  } | null>(null)
+  const [uploading, setUploading] = useState(false)
+
+  const { data: configData } = useQuery({
+    queryKey: ['badge-plugin-config'],
+    queryFn: () => api.query(getBadgePluginConfigDocument),
+  })
+
+  const { data: collectionsData } = useQuery({
+    queryKey: ['collections'],
+    queryFn: () => api.query(getCollectionsDocument),
+  })
+
+  const availablePositions = configData?.getBadgePluginConfig?.availablePositions || []
+
+  const collections = collectionsData?.collections?.items || []
+
+  const setValuesForUpdate = useCallback(
+    (
+      badge:
+        | {
+            id: string
+            position: string
+            collectionId: string | null
+            assetId: string
+            asset: {
+              id: string
+              name: string
+              preview: string
+            }
+          }
+        | null
+        | undefined,
+    ) => {
+      const position =
+        badge?.position && badge.position.trim() !== ''
+          ? badge.position
+          : availablePositions?.length > 0
+            ? availablePositions[0]
+            : ''
+
+      return {
+        id: badge?.id ?? '',
+        position: position || 'top-left',
+        collectionId: badge?.collectionId ?? null,
+      }
+    },
+    [availablePositions],
+  )
+
+  const { form, submitHandler, entity, isPending, resetForm, refreshEntity } = useDetailPage({
+    queryDocument: getBadgeDetailDocument,
+    createDocument: creatingNewEntity ? createBadgeDocument : undefined,
+    updateDocument: creatingNewEntity ? undefined : updateBadgeDocument,
+    setValuesForUpdate,
+    params: creatingNewEntity ? { id: 'new' } : { id: params.id },
+    onSuccess: async (data) => {
+      toast.success(creatingNewEntity ? 'Successfully created badge' : 'Successfully saved badge')
+      resetForm()
+      if (creatingNewEntity) {
+        await navigate({ to: `/badges/${data.id}` })
+      } else {
+        await refreshEntity()
+      }
+      queryClient.invalidateQueries({ queryKey: ['badges'] })
+    },
+    onError: (err) => {
+      toast.error(creatingNewEntity ? 'Failed to create badge' : 'Failed to save badge', {
+        description: err instanceof Error ? err.message : 'Unknown error',
+      })
+    },
+  })
+
+  const createAssetMutation = useMutation({
+    mutationFn: async (file: File) => {
+      const input = [{ file }]
+      const result: any = await api.mutate(createAssetsDocument, { input })
+      const assetResult = result.createAssets[0]
+      if ('id' in assetResult) {
+        return assetResult
+      } else if ('message' in assetResult) {
+        throw new Error(assetResult.message)
+      }
+      throw new Error('Failed to upload asset')
+    },
+    onSuccess: (asset) => {
+      setUploadedAsset({
+        id: asset.id,
+        name: asset.name || 'Uploaded image',
+        preview: asset.preview || '',
+      })
+      setUploading(false)
+      toast.success('Image uploaded successfully')
+    },
+    onError: (error) => {
+      toast.error('Failed to upload image', {
+        description: error instanceof Error ? error.message : 'Unknown error',
+      })
+      setUploading(false)
+    },
+  })
+
+  // Track synced entity ID to prevent re-syncing
+  const syncedEntityIdRef = useRef<string | null>(null)
+  const entityIdRef = useRef<string | null>(null)
+
+  // Sync uploadedAsset state when entity changes (only when entity.id changes)
+  useEffect(() => {
+    if (entity?.id && entity.id !== entityIdRef.current) {
+      entityIdRef.current = entity.id
+      syncedEntityIdRef.current = null // Reset sync tracking when entity changes
+      if (entity?.asset) {
+        setUploadedAsset({
+          id: entity.asset.id,
+          name: entity.asset.name,
+          preview: entity.asset.preview,
+        })
+      }
+    }
+  }, [entity?.id, entity?.asset])
+
+  // Sync form values when entity loads (for edit mode)
+  // Run whenever entity data or availablePositions changes
+  useEffect(() => {
+    const badge = entity
+    if (!creatingNewEntity && badge?.id) {
+      const entityPosition = badge.position
+      const entityCollectionId = badge.collectionId
+
+      // Set position - use entity value if available, otherwise keep what's there
+      if (entityPosition) {
+        if (availablePositions.length > 0 && availablePositions.includes(entityPosition)) {
+          form.setValue('position', entityPosition, { shouldDirty: false })
+        } else if (availablePositions.length === 0) {
+          // If positions not loaded yet, set it anyway (will be validated later)
+          form.setValue('position', entityPosition, { shouldDirty: false })
+        }
+      }
+
+      // Always sync collection - set it immediately
+      form.setValue('collectionId', entityCollectionId ?? null, { shouldDirty: false })
+    }
+
+    // Initialize default values for new badges
+    if (creatingNewEntity && availablePositions.length > 0) {
+      form.setValue('position', availablePositions[0])
+      form.setValue('collectionId', null)
+    }
+  }, [entity, availablePositions, creatingNewEntity, form])
+
+  const handleFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0]
+    if (file) {
+      if (!file.type.startsWith('image/')) {
+        toast.error('Please select an image file')
+        return
+      }
+      setUploading(true)
+      createAssetMutation.mutate(file)
+    }
+    if (fileInputRef.current) {
+      fileInputRef.current.value = ''
+    }
+  }
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault()
+
+    if (creatingNewEntity) {
+      if (!uploadedAsset?.id) {
+        toast.error('Please upload an image first')
+        return
+      }
+
+      const formValues = form.getValues()
+      try {
+        const result = await api.mutate(createBadgeDocument, {
+          input: {
+            assetId: uploadedAsset.id,
+            position: formValues.position || availablePositions[0] || 'top-left',
+            collectionId: formValues.collectionId || null,
+          },
+        })
+
+        toast.success('Badge created successfully')
+        await navigate({ to: `/badges/${result.createBadge.id}` })
+        queryClient.invalidateQueries({ queryKey: ['badges'] })
+      } catch (error: any) {
+        toast.error('Failed to create badge', {
+          description: error instanceof Error ? error.message : 'Unknown error',
+        })
+      }
+      return
+    }
+
+    await submitHandler(e)
+  }
+
+  const currentAsset =
+    uploadedAsset ||
+    (entity?.asset
+      ? {
+          id: entity.asset.id,
+          name: entity.asset.name,
+          preview: entity.asset.preview,
+        }
+      : null)
+
+  return (
+    <Page pageId="badge-detail" form={form} submitHandler={handleSubmit}>
+      <PageTitle>
+        {creatingNewEntity ? 'New Badge' : entity?.id ? `Badge ${entity.id}` : 'Edit Badge'}
+      </PageTitle>
+      <PageActionBar>
+        <PageActionBarRight>
+          <Button
+            type="submit"
+            disabled={
+              creatingNewEntity
+                ? !uploadedAsset || !form.formState.isValid || isPending || uploading
+                : !form.formState.isDirty || !form.formState.isValid || isPending
+            }
+          >
+            {isPending || uploading ? 'Saving...' : creatingNewEntity ? 'Create' : 'Update'}
+          </Button>
+        </PageActionBarRight>
+      </PageActionBar>
+      <PageLayout>
+        <PageBlock column="main" blockId="main-form">
+          <div className="space-y-4">
+            <div className="space-y-2" style={{ maxWidth: '400px' }}>
+              <Label>Image</Label>
+              <div className="space-y-4">
+                {currentAsset ? (
+                  <div className="space-y-2">
+                    <VendureImage
+                      asset={entity?.asset || ({ ...currentAsset, type: 'IMAGE' } as any)}
+                      alt={currentAsset.name}
+                      preset="medium"
+                    />
+                    <div className="text-sm text-muted-foreground">{currentAsset.name}</div>
+                  </div>
+                ) : (
+                  <div className="border-2 border-dashed border-muted rounded-lg p-8 text-center">
+                    <UploadIcon className="h-12 w-12 mx-auto mb-4 text-muted-foreground" />
+                    <p className="text-sm text-muted-foreground mb-4">No image uploaded</p>
+                  </div>
+                )}
+                <div>
+                  <input
+                    ref={fileInputRef}
+                    type="file"
+                    accept="image/*"
+                    onChange={handleFileSelect}
+                    className="hidden"
+                  />
+                  <Button
+                    type="button"
+                    variant="outline"
+                    onClick={() => fileInputRef.current?.click()}
+                    disabled={uploading}
+                    className="w-full"
+                  >
+                    <UploadIcon className="mr-2 h-4 w-4" />
+                    {uploading ? 'Uploading...' : currentAsset ? 'Change Image' : 'Upload Image'}
+                  </Button>
+                </div>
+              </div>
+            </div>
+
+            <div style={{ maxWidth: '700px' }} className="space-y-4">
+              <FormFieldWrapper
+                control={form.control}
+                name="position"
+                label="Position"
+                render={({ field }) => {
+                  // Ensure value is valid - use field.value if it exists and is in availablePositions, otherwise empty string
+                  const validValue =
+                    field.value && availablePositions.includes(field.value) ? field.value : ''
+                  return (
+                    <Select value={validValue} onValueChange={field.onChange}>
+                      <SelectTrigger className="w-full">
+                        <SelectValue placeholder="Select position" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {availablePositions.map((pos) => (
+                          <SelectItem key={pos} value={pos}>
+                            {pos}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  )
+                }}
+              />
+              <FormFieldWrapper
+                control={form.control}
+                name="collectionId"
+                label="Collection"
+                render={({ field }) => (
+                  <Select
+                    value={field.value}
+                    onValueChange={(val) => field.onChange(val === 'none' ? null : val)}
+                  >
+                    <SelectTrigger className="w-full">
+                      <SelectValue placeholder="No collection" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="none">No collection</SelectItem>
+                      {collections.map((collection) => (
+                        <SelectItem key={collection.id} value={collection.id}>
+                          {collection.name}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                )}
+              />
+            </div>
+          </div>
+        </PageBlock>
+      </PageLayout>
+    </Page>
+  )
+}

package/src/dashboard/badge-list.tsx

@@ -0,0 +1,142 @@
+import {
+  DashboardRouteDefinition,
+  ListPage,
+  PageActionBarRight,
+  Button,
+  VendureImage,
+  Badge as BadgeComponent,
+} from '@vendure/dashboard'
+import { PencilIcon, PlusIcon } from 'lucide-react'
+import { Link } from '@tanstack/react-router'
+import { graphql } from '@/gql'
+
+const getBadgeListDocument = graphql(`
+  query GetBadges($options: BadgeListOptions) {
+    badges(options: $options) {
+      items {
+        id
+        createdAt
+        updatedAt
+        collection {
+          id
+          name
+        }
+        collectionId
+        position
+        asset {
+          id
+          name
+          type
+          mimeType
+          width
+          height
+          fileSize
+          source
+          preview
+        }
+      }
+      totalItems
+    }
+  }
+`)
+
+const deleteBadgeDocument = graphql(`
+  mutation DeleteBadge($id: ID!) {
+    deleteBadge(ids: [$id]) {
+      result
+      message
+    }
+  }
+`)
+
+export const badgeListRoute: DashboardRouteDefinition = {
+  navMenuItem: {
+    sectionId: 'catalog',
+    id: 'badges',
+    url: '/badges',
+    title: 'Badges',
+  },
+  path: '/badges',
+  loader: () => ({
+    breadcrumb: 'Badges',
+  }),
+  component: (route) => {
+    const navigate = route.useNavigate()
+
+    return (
+      <ListPage
+        pageId="badge-list"
+        title="Badges"
+        listQuery={getBadgeListDocument}
+        deleteMutation={deleteBadgeDocument}
+        route={route}
+        customizeColumns={{
+          asset: {
+            cell: ({ row }) => {
+              const badge = row.original
+              return (
+                <div className="flex items-center gap-2">
+                  <VendureImage
+                    asset={badge.asset}
+                    alt={badge.asset.name}
+                    preset="thumb"
+                    className="w-12 h-12 object-cover rounded"
+                  />
+                </div>
+              )
+            },
+          },
+          position: {
+            cell: ({ row }) => {
+              return <BadgeComponent variant="secondary">{row.original.position}</BadgeComponent>
+            },
+          },
+          collection: {
+            cell: ({ row }) => {
+              const badge = row.original
+              return badge.collection ? (
+                <Link
+                  to={`/collections/${badge.collection.id}`}
+                  className="text-sm text-primary hover:underline"
+                >
+                  {badge.collection.name}
+                </Link>
+              ) : (
+                <span className="text-sm text-muted-foreground">—</span>
+              )
+            },
+          },
+        }}
+        rowActions={[
+          {
+            label: (
+              <>
+                <PencilIcon className="mr-2 h-4 w-4" />
+                Edit
+              </>
+            ),
+            onClick: (row) => {
+              navigate({ to: `/badges/${row.id}` })
+            },
+          },
+        ]}
+        defaultVisibility={{
+          asset: true,
+          position: true,
+          collection: true,
+          updatedAt: true,
+        }}
+        defaultColumnOrder={['asset', 'position', 'collection', 'updatedAt']}
+      >
+        <PageActionBarRight>
+          <Button asChild>
+            <Link to="./new">
+              <PlusIcon className="mr-2 h-4 w-4" />
+              New Badge
+            </Link>
+          </Button>
+        </PageActionBarRight>
+      </ListPage>
+    )
+  },
+}

package/src/dashboard/index.tsx

@@ -0,0 +1,7 @@
+import { defineDashboardExtension } from '@vendure/dashboard'
+import { badgeListRoute } from './badge-list'
+import { badgeDetailRoute } from './badge-detail'
+
+export default defineDashboardExtension({
+  routes: [badgeListRoute, badgeDetailRoute],
+})

package/{dist → src}/entity/badge.entity.js

@@ -29,6 +29,7 @@ let Badge = class Badge extends core_1.VendureEntity {
     collection;
     collectionId;
 };
+exports.Badge = Badge;
 __decorate([
     (0, typeorm_1.ManyToMany)((type) => core_1.Channel),
     (0, typeorm_1.JoinTable)(),
@@ -73,8 +74,8 @@ __decorate([
     (0, core_1.EntityId)({ nullable: true }),
     __metadata("design:type", Object)
 ], Badge.prototype, "collectionId", void 0);
-Badge = __decorate([
+exports.Badge = Badge = __decorate([
     (0, typeorm_1.Entity)(),
     __metadata("design:paramtypes", [Object])
 ], Badge);
-exports.Badge = Badge;
+//# sourceMappingURL=badge.entity.js.map

package/src/entity/badge.entity.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.entity.js","sourceRoot":"","sources":["../../../../../packages/badge-plugin/src/entity/badge.entity.ts"],"names":[],"mappings":";;;;;;;;;;;;AACA,wCAQsB;AACtB,qCASgB;AAGT,IAAM,KAAK,GAAX,MAAM,KAAM,SAAQ,oBAAa;IACtC,YAAY,KAA0B;QACpC,KAAK,CAAC,KAAK,CAAC,CAAA;QAEZ,sEAAsE;QACtE,IAAI,KAAK,EAAE,CAAC;YACV,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,CAAA;QAC5B,CAAC;IACH,CAAC;IAID,QAAQ,CAAW;IAGnB,QAAQ,CAAQ;IAGhB,KAAK,CAAQ;IAGb,IAAI,CAAQ;IAUZ,KAAK,CAAO;IAGZ,OAAO,CAAI;IAOX,UAAU,CAAmB;IAG7B,YAAY,CAAW;CACxB,CAAA;AA7CY,sBAAK;AAYhB;IAFC,IAAA,oBAAU,EAAC,CAAC,IAAI,EAAE,EAAE,CAAC,cAAO,CAAC;IAC7B,IAAA,mBAAS,GAAE;;uCACO;AAGnB;IADC,IAAA,gBAAM,EAAC,EAAE,OAAO,EAAE,UAAU,EAAE,CAAC;;uCAChB;AAGhB;IADC,IAAA,gBAAM,EAAC,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC;;oCACV;AAGb;IADC,IAAA,gBAAM,EAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;;mCACf;AAUZ;IARC,IAAA,kBAAQ,EAAC,CAAC,IAAI,EAAE,EAAE,CAAC,YAAK,EAAE;QACzB,OAAO,EAAE,IAAI;QACb,KAAK,EAAE,IAAI;KACZ,CAAC;IACD,IAAA,oBAAU,EAAC;QACV,IAAI,EAAE,SAAS;QACf,oBAAoB,EAAE,IAAI;KAC3B,CAAC;8BACK,YAAK;oCAAA;AAGZ;IADC,IAAA,eAAQ,EAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;;sCAClB;AAOX;IALC,IAAA,kBAAQ,EAAC,CAAC,IAAI,EAAE,EAAE,CAAC,iBAAU,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC;IAC/D,IAAA,oBAAU,EAAC;QACV,IAAI,EAAE,cAAc;QACpB,oBAAoB,EAAE,IAAI;KAC3B,CAAC;;yCAC2B;AAG7B;IADC,IAAA,eAAQ,EAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;;2CACN;gBA5CZ,KAAK;IADjB,IAAA,gBAAM,GAAE;;GACI,KAAK,CA6CjB"}

package/{dist → src}/gql/generated.d.ts

@@ -744,6 +744,7 @@ export type CreateAssetResult = Asset | MimeTypeError;
 export type CreateBadgeInput = {
     assetId: Scalars['ID']['input'];
     position?: InputMaybe<Scalars['String']['input']>;
+    collectionId?: InputMaybe<Scalars['ID']['input']>;
 };
 export type CreateChannelCustomFieldsInput = {
     lastCancelTime?: InputMaybe<Scalars['Int']['input']>;