@haus-tech/badge-plugin 4.0.6 → 4.0.7

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+## 4.0.6
+
+### 🩹 Fixes
+
+- handle update asset ([33e1c58](https://github.com/WeAreHausTech/haus-tech-vendure-plugins/commit/33e1c58))
+
 ## 4.0.6-0
 
 ### 🚀 Features

package/README.md

@@ -2,7 +2,7 @@
 name: badge-plugin
 title: Badge Plugin
 description: Vendure plugin that allows you to manage and display badges for products in your e-commerce store.
-version: 4.0.6-0
+version: 4.0.6
 tags: [vendure, plugin, badge]
 ---
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@haus-tech/badge-plugin",
-  "version": "4.0.6",
+  "version": "4.0.7",
   "description": "Adds a badge to product images",
   "author": "Haus Tech",
   "repository": "https://github.com/WeAreHausTech/haus-tech-vendure-plugins",

package/src/dashboard/badge-detail.tsx

@@ -5,7 +5,7 @@ import {
   Page,
   PageTitle,
   PageActionBar,
-  PageActionBarRight,
+  ActionBarItem,
   PageLayout,
   PageBlock,
   FormFieldWrapper,
@@ -23,7 +23,7 @@ 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 { graphql } from './gql'
 import { UploadIcon } from 'lucide-react'
 import type { ComponentProps } from 'react'
 
@@ -117,7 +117,7 @@ export const badgeDetailRoute: DashboardRouteDefinition = {
     ],
   }),
   component: (route) => {
-    return <BadgeDetailPage route={route as any} />
+    return <BadgeDetailPage route={route as AnyRoute} />
   },
 }
 
@@ -209,7 +209,9 @@ function BadgeDetailPage({ route }: { route: AnyRoute }) {
   const createAssetMutation = useMutation({
     mutationFn: async (file: File) => {
       const input = [{ file }]
-      const result: any = await api.mutate(createAssetsDocument, { input })
+      const result = await api.mutate(createAssetsDocument, { input }) as {
+        createAssets: Array<{ id?: string; name?: string; source?: string; preview?: string; message?: string }>
+      }
       const assetResult = result.createAssets[0]
       if ('id' in assetResult) {
         return assetResult
@@ -324,7 +326,7 @@ function BadgeDetailPage({ route }: { route: AnyRoute }) {
         toast.success('Badge created successfully')
         await navigate({ to: `/badges/${result.createBadge.id}` })
         queryClient.invalidateQueries({ queryKey: ['badges'] })
-      } catch (error: any) {
+      } catch (error: unknown) {
         toast.error('Failed to create badge', {
           description: error instanceof Error ? error.message : 'Unknown error',
         })
@@ -361,7 +363,7 @@ function BadgeDetailPage({ route }: { route: AnyRoute }) {
         {creatingNewEntity ? 'New Badge' : entity?.id ? `Badge ${entity.id}` : 'Edit Badge'}
       </PageTitle>
       <PageActionBar>
-        <PageActionBarRight>
+        <ActionBarItem itemId="save-button">
           <Button
             type="submit"
             disabled={
@@ -372,7 +374,7 @@ function BadgeDetailPage({ route }: { route: AnyRoute }) {
           >
             {isPending || uploading ? 'Saving...' : creatingNewEntity ? 'Create' : 'Update'}
           </Button>
-        </PageActionBarRight>
+        </ActionBarItem>
       </PageActionBar>
       <PageLayout>
         <PageBlock column="main" blockId="main-form">

package/src/dashboard/badge-list.tsx

@@ -1,14 +1,14 @@
 import {
   DashboardRouteDefinition,
   ListPage,
-  PageActionBarRight,
+  ActionBarItem,
   Button,
   VendureImage,
   Badge as BadgeComponent,
 } from '@vendure/dashboard'
 import { PencilIcon, PlusIcon } from 'lucide-react'
 import { Link } from '@tanstack/react-router'
-import { graphql } from '@/gql'
+import { graphql } from './gql'
 
 const getBadgeListDocument = graphql(`
   query GetBadges($options: BadgeListOptions) {
@@ -128,14 +128,12 @@ export const badgeListRoute: DashboardRouteDefinition = {
         }}
         defaultColumnOrder={['asset', 'position', 'collection', 'updatedAt']}
       >
-        <PageActionBarRight>
-          <Button asChild>
-            <Link to="./new">
-              <PlusIcon className="mr-2 h-4 w-4" />
-              New Badge
-            </Link>
+        <ActionBarItem itemId="create-button">
+          <Button render={<Link to="./new" />}>
+            <PlusIcon />
+            New Badge
           </Button>
-        </PageActionBarRight>
+        </ActionBarItem>
       </ListPage>
     )
   },

package/src/dashboard/gql.ts

@@ -0,0 +1,146 @@
+import gql from 'graphql-tag'
+import type { TypedDocumentNode } from '@graphql-typed-document-node/core'
+
+type AnyDoc = TypedDocumentNode<any, any>
+
+const getBadgesDocument = gql(`
+  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
+    }
+  }
+`) as AnyDoc
+
+const deleteBadgeDocument = gql(`
+  mutation DeleteBadge($id: ID!) {
+    deleteBadge(ids: [$id]) {
+      result
+      message
+    }
+  }
+`) as AnyDoc
+
+const getBadgeDetailDocument = gql(`
+  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
+      }
+    }
+  }
+`) as AnyDoc
+
+const createBadgeDocument = gql(`
+  mutation CreateBadge($input: CreateBadgeInput!) {
+    createBadge(input: $input) {
+      id
+    }
+  }
+`) as AnyDoc
+
+const updateBadgeDocument = gql(`
+  mutation UpdateBadge($input: UpdateBadgeInput!) {
+    updateBadge(input: $input) {
+      id
+    }
+  }
+`) as AnyDoc
+
+const getBadgePluginConfigDocument = gql(`
+  query GetBadgePluginConfig {
+    getBadgePluginConfig {
+      availablePositions
+    }
+  }
+`) as AnyDoc
+
+const getCollectionsDocument = gql(`
+  query GetCollections {
+    collections {
+      items {
+        id
+        name
+        slug
+      }
+    }
+  }
+`) as AnyDoc
+
+const createAssetsDocument = gql(`
+  mutation CreateAssets($input: [CreateAssetInput!]!) {
+    createAssets(input: $input) {
+      ... on Asset {
+        id
+        name
+        source
+        preview
+      }
+      ... on MimeTypeError {
+        message
+      }
+    }
+  }
+`) as AnyDoc
+
+function normalize(source: string): string {
+  return source.replace(/\s+/g, ' ').trim()
+}
+
+const documents = new Map<string, AnyDoc>([
+  [normalize(getBadgesDocument.loc?.source.body ?? ''), getBadgesDocument],
+  [normalize(deleteBadgeDocument.loc?.source.body ?? ''), deleteBadgeDocument],
+  [normalize(getBadgeDetailDocument.loc?.source.body ?? ''), getBadgeDetailDocument],
+  [normalize(createBadgeDocument.loc?.source.body ?? ''), createBadgeDocument],
+  [normalize(updateBadgeDocument.loc?.source.body ?? ''), updateBadgeDocument],
+  [normalize(getBadgePluginConfigDocument.loc?.source.body ?? ''), getBadgePluginConfigDocument],
+  [normalize(getCollectionsDocument.loc?.source.body ?? ''), getCollectionsDocument],
+  [normalize(createAssetsDocument.loc?.source.body ?? ''), createAssetsDocument],
+])
+
+export function graphql(source: string): AnyDoc {
+  const document = documents.get(normalize(source))
+  if (!document) {
+    throw new Error('Unknown dashboard GraphQL operation in badge-plugin')
+  }
+  return document
+}

package/src/ui/badge-list.component.d.ts

@@ -2,7 +2,7 @@ import { TypedBaseListComponent, NotificationService, ModalService, SelectionMan
 import { OnInit, OnChanges, SimpleChanges } from '@angular/core';
 import { Badge } from './gql/graphql';
 import { Asset } from '@vendure/core';
-declare const getBadgeListDocument: import("apollo-angular").TypedDocumentNode<import("./gql/graphql").GetBadgesQuery, import("./gql/graphql").Exact<{
+declare const getBadgeListDocument: import("@graphql-typed-document-node/core").TypedDocumentNode<import("./gql/graphql").GetBadgesQuery, import("./gql/graphql").Exact<{
     options?: import("./gql/graphql").InputMaybe<import("./gql/graphql").BadgeListOptions>;
 }>>;
 export interface BadgePluginOptions {

package/src/ui/badge-list.component.html

@@ -27,7 +27,7 @@
             [disabled]="true"
             [hiddenWhenOff]="true"
           ></vdr-select-toggle>
-          <img class="asset-thumb" [src]="item.asset | assetPreview : 'medium'" />
+          <img class="asset-thumb" [src]="item.asset | assetPreview: 'medium'" />
         </div>
         <div class="detail">
           <span [title]="item.position">{{ item.position }}</span>
@@ -67,7 +67,7 @@
       <div class="card stack" [class.visible]="selectionManager.selection.length > 1"></div>
       <div class="selection-count" [class.visible]="selectionManager.selection.length > 1">
         {{
-          'asset.assets-selected-count' | translate : { count: selectionManager.selection.length }
+          'asset.assets-selected-count' | translate: { count: selectionManager.selection.length }
         }}
         <ul>
           <li *ngFor="let asset of selectionManager.selection">{{ asset.name }}</li>

package/src/ui/badge-list.component.scss

@@ -86,14 +86,18 @@ vdr-select-toggle {
     opacity: 0;
     transform: perspective(500px) translateZ(0px) translateY(-16px);
     height: 16px;
-    transition: transform 0.3s, opacity 0s 0.3s;
+    transition:
+      transform 0.3s,
+      opacity 0s 0.3s;
     background-color: white;
 
     &.visible {
       opacity: 1;
       transform: perspective(500px) translateZ(-44px) translateY(0px);
       background-color: var(--color-component-bg-100);
-      transition: transform 0.3s, color 0.3s;
+      transition:
+        transform 0.3s,
+        color 0.3s;
     }
   }
 
@@ -102,11 +106,15 @@ vdr-select-toggle {
     position: relative;
     text-align: center;
     visibility: hidden;
-    transition: opacity 0.3s, visibility 0s 0.3s;
+    transition:
+      opacity 0.3s,
+      visibility 0s 0.3s;
     &.visible {
       opacity: 1;
       visibility: visible;
-      transition: opacity 0.3s, visibility 0s;
+      transition:
+        opacity 0.3s,
+        visibility 0s;
     }
     ul {
       text-align: start;