@haus-tech/badge-plugin 0.1.7 → 0.1.9

package/dist/badge.plugin.js

@@ -35,15 +35,8 @@ let BadgePlugin = BadgePlugin_1 = class BadgePlugin {
             en: path_1.default.join(__dirname, 'ui/translations/en.json'),
             sv: path_1.default.join(__dirname, 'ui/translations/sv.json'),
         },
-        ngModules: [
-            {
-                type: 'lazy',
-                route: 'badges',
-                ngModuleFileName: 'badge.module.ts',
-                ngModuleName: 'BadgeModule',
-            },
-        ],
         providers: ['providers.ts'],
+        routes: [{ route: 'badges', filePath: 'routes.ts' }],
     };
 };
 BadgePlugin = BadgePlugin_1 = __decorate([

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

@@ -0,0 +1,78 @@
+<vdr-page-block style="width: 100%">
+  <div class="my-2" style="width: 100%">
+    <vdr-page-block>
+      <vdr-action-bar>
+        <vdr-ab-left></vdr-ab-left>
+        <vdr-ab-right>
+          <vdr-asset-file-input
+            (selectFiles)="filesSelected($event)"
+            [uploading]="uploading"
+            dropZoneTarget=".content-area"
+          ></vdr-asset-file-input>
+        </vdr-ab-right>
+      </vdr-action-bar>
+    </vdr-page-block>
+  </div>
+  <div class="gallery-wrapper">
+    <div class="gallery">
+      <div
+        class="card"
+        *ngFor="let item of items$ | async"
+        (click)="toggleSelection(item, $event)"
+        [class.selected]="isSelected(item)"
+      >
+        <div class="card-img">
+          <vdr-select-toggle
+            [selected]="isSelected(item)"
+            [disabled]="true"
+            [hiddenWhenOff]="true"
+          ></vdr-select-toggle>
+          <img class="asset-thumb" [src]="item.asset | assetPreview : 'thumb'" />
+        </div>
+        <div class="detail">
+          <span [title]="item.position">{{ item.position }}</span>
+        </div>
+      </div>
+    </div>
+
+    <div class="info-bar">
+      <div class="card">
+        <div class="card-img">
+          <div class="placeholder" *ngIf="selectionManager.selection.length === 0">
+            <clr-icon shape="image" size="128"></clr-icon>
+            <div>{{ 'catalog.no-selection' | translate }}</div>
+          </div>
+          <img
+            class="preview"
+            *ngIf="selectionManager.selection.length >= 1"
+            [src]="lastSelected().asset.preview + '?preset=medium'"
+          />
+        </div>
+        <div class="card-block details" *ngIf="selectionManager.selection.length >= 1">
+          <div *ngIf="selectionManager.selection.length === 1">
+            <update-badge
+              [badge]="lastSelected()"
+              [availablePositions]="config.availablePositions"
+              (badgeUpdated)="onBadgeUpdated($event)"
+            ></update-badge>
+          </div>
+          <div *ngIf="canDelete">
+            <button (click)="deleteBadges(selectionManager.selection)" class="button-small mt-1">
+              <clr-icon shape="trash" class="is-danger"></clr-icon>
+              {{ 'common.delete' | translate }}
+            </button>
+          </div>
+        </div>
+      </div>
+      <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 }
+        }}
+        <ul>
+          <li *ngFor="let asset of selectionManager.selection">{{ asset.name }}</li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</vdr-page-block>

package/dist/ui/badge-list.component.js

@@ -17,6 +17,7 @@ const graphql_1 = require("./gql/graphql");
 const ngx_translate_extract_marker_1 = require("@biesbjerg/ngx-translate-extract-marker");
 const rxjs_1 = require("rxjs");
 const operators_1 = require("rxjs/operators");
+const update_badge_component_1 = require("./update-badge.component");
 const getBadgeListDocument = (0, gql_1.graphql)(`
   query GetBadges($options: BadgeListOptions) {
     badges(options: $options) {
@@ -231,6 +232,8 @@ BadgeListComponent = __decorate([
         templateUrl: './badge-list.component.html',
         styleUrls: ['./badge-list.component.scss'],
         changeDetection: core_2.ChangeDetectionStrategy.OnPush,
+        standalone: true,
+        imports: [core_1.SharedModule, update_badge_component_1.UpdateBadgeComponent],
     }),
     (0, core_2.Injectable)(),
     __metadata("design:paramtypes", [core_1.NotificationService,

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

@@ -0,0 +1,139 @@
+@import 'variables';
+
+:host {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.gallery-wrapper {
+  display: flex;
+  flex-direction: column-reverse;
+  @media screen and (min-width: $breakpoint-medium) {
+    flex-direction: row;
+  }
+}
+
+.gallery {
+  /* autoprefixer: off */
+  flex: 1;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, 150px);
+  grid-template-rows: repeat(auto-fill, 180px);
+  grid-gap: 10px 20px;
+
+  .card:hover {
+    box-shadow: 0 0.125rem 0 0 var(--color-primary-500);
+    border: 1px solid var(--color-primary-500);
+  }
+}
+
+.card {
+  margin-top: 0;
+  position: relative;
+}
+
+img.asset-thumb {
+  aspect-ratio: 1;
+}
+
+vdr-select-toggle {
+  position: absolute;
+  ::ng-deep .toggle {
+    box-shadow: 0px 5px 5px -4px rgba(0, 0, 0, 0.75);
+  }
+  top: -12px;
+  left: -12px;
+}
+
+.card.selected {
+  box-shadow: 0 0.125rem 0 0 var(--color-primary-500);
+  border: 1px solid var(--color-primary-500);
+
+  .selected-checkbox {
+    opacity: 1;
+  }
+}
+
+.detail {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 12px;
+  margin: 3px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  vdr-entity-info {
+    height: 16px;
+  }
+}
+
+.info-bar {
+  @media screen and (min-width: $breakpoint-medium) {
+    width: 25%;
+  }
+  padding: 0 6px;
+  overflow-y: visible;
+
+  .card {
+    z-index: 1;
+  }
+
+  .stack {
+    z-index: 0;
+    opacity: 0;
+    transform: perspective(500px) translateZ(0px) translateY(-16px);
+    height: 16px;
+    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;
+    }
+  }
+
+  .selection-count {
+    opacity: 0;
+    position: relative;
+    text-align: center;
+    visibility: hidden;
+    transition: opacity 0.3s, visibility 0s 0.3s;
+    &.visible {
+      opacity: 1;
+      visibility: visible;
+      transition: opacity 0.3s, visibility 0s;
+    }
+    ul {
+      text-align: start;
+      list-style-type: none;
+      margin-inline-start: 12px;
+      li {
+        font-size: 12px;
+      }
+    }
+  }
+
+  .placeholder {
+    text-align: center;
+    color: var(--color-grey-300);
+  }
+
+  .preview {
+    img {
+      max-width: 100%;
+    }
+  }
+  .details {
+    font-size: 12px;
+    word-break: break-all;
+  }
+  .name {
+    line-height: 14px;
+    font-weight: bold;
+    margin-bottom: 4px;
+  }
+}

package/dist/ui/badge-list.component.ts

@@ -0,0 +1,278 @@
+import {
+  TypedBaseListComponent,
+  NotificationService,
+  ModalService,
+  SelectionManager,
+  SharedModule,
+} from '@vendure/admin-ui/core'
+import {
+  Component,
+  Injectable,
+  OnInit,
+  OnChanges,
+  ChangeDetectionStrategy,
+  SimpleChanges,
+} from '@angular/core'
+import { graphql } from './gql'
+import { Badge, DeletionResult } from './gql/graphql'
+import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker'
+import { EMPTY } from 'rxjs'
+import { finalize, map, switchMap } from 'rxjs/operators'
+import { Asset } from '@vendure/core'
+import { UpdateBadgeComponent } from './update-badge.component'
+
+const getBadgeListDocument = graphql(`
+  query GetBadges($options: BadgeListOptions) {
+    badges(options: $options) {
+      items {
+        id
+        createdAt
+        updatedAt
+        collection {
+          id
+        }
+        collectionId
+        position
+        asset {
+          id
+          name
+          type
+          mimeType
+          width
+          height
+          fileSize
+          source
+          preview
+        }
+      }
+      totalItems
+    }
+  }
+`)
+
+const createBadgeDocument = graphql(`
+  mutation CreateBadge($input: CreateBadgeInput!) {
+    createBadge(input: $input) {
+      id
+    }
+  }
+`)
+
+const deleteBadgeDocument = graphql(`
+  mutation DeleteBadge($ids: [ID!]!) {
+    deleteBadge(ids: $ids) {
+      result
+      message
+    }
+  }
+`)
+
+const getPluginConfigDocument = graphql(`
+  query GetBadgePluginConfig {
+    getBadgePluginConfig {
+      availablePositions
+    }
+  }
+`)
+
+export interface BadgePluginOptions {
+  availablePositions: string[]
+}
+
+@Component({
+  selector: 'badge-list',
+  templateUrl: './badge-list.component.html',
+  styleUrls: ['./badge-list.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [SharedModule, UpdateBadgeComponent],
+})
+@Injectable()
+export class BadgeListComponent
+  extends TypedBaseListComponent<typeof getBadgeListDocument, 'badges'>
+  implements OnInit, OnChanges
+{
+  config: BadgePluginOptions
+  uploading = false
+  canDelete = true
+  badges: Badge[]
+
+  selectionManager = new SelectionManager<Badge>({
+    multiSelect: true,
+    itemsAreEqual: (a, b) => a.id === b.id,
+    additiveMode: false,
+  })
+
+  constructor(
+    private notificationService: NotificationService,
+    private modalService: ModalService,
+  ) {
+    super()
+    super.configure({
+      document: getBadgeListDocument,
+      getItems: (data) => {
+        this.badges = data.badges.items as Badge[]
+        return data.badges
+      },
+      setVariables: () => ({
+        options: {
+          skip: 0,
+          take: 999,
+        },
+      }),
+      refreshListOnChanges: [],
+    })
+
+    this.dataService
+      .query(getPluginConfigDocument)
+      .mapSingle((item) => item)
+      .subscribe({
+        next: (response) => {
+          this.config = response.getBadgePluginConfig as BadgePluginOptions
+        },
+        error: (error) => console.error('Query error:', error),
+      })
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    console.log('changes:', changes)
+    if (this.items$) {
+      for (const badge of this.selectionManager.selection) {
+        // Update any selected assets with any changes
+        const match = this.badges.find((a) => a.id === badge.id)
+        if (match) {
+          Object.assign(badge, match)
+        }
+      }
+    }
+    if (changes['badges']) {
+      this.selectionManager.setCurrentItems(this.badges)
+    }
+  }
+
+  async ngOnInit(): Promise<void> {
+    super.ngOnInit()
+  }
+
+  toggleSelection(asset: Badge, event?: any) {
+    this.selectionManager.toggleSelection(asset, event)
+  }
+
+  selectMultiple(assets: Badge[]) {
+    this.selectionManager.selectMultiple(assets)
+  }
+
+  isSelected(asset: Badge): boolean {
+    return this.selectionManager.isSelected(asset)
+  }
+
+  lastSelected(): Badge {
+    return this.selectionManager.lastSelected()
+  }
+
+  filesSelected(files: File[]) {
+    if (files.length) {
+      this.uploading = true
+      this.dataService.product
+        .createAssets(files)
+        .pipe(
+          finalize(() => {
+            this.uploading = false
+          }),
+        )
+        .subscribe(({ createAssets }) => {
+          let successCount = 0
+          for (const result of createAssets) {
+            switch (result.__typename) {
+              case 'Asset':
+                successCount++
+                break
+              case 'MimeTypeError':
+                this.notificationService.error(result.message)
+                break
+            }
+          }
+          if (0 < successCount) {
+            super.refresh()
+            this.notificationService.success(_('badge-plugin.notify-create-badges-success'), {
+              count: successCount,
+            })
+            this.createBadges(createAssets as Asset[])
+          }
+        })
+    }
+  }
+
+  async createBadges(assets: Asset[]) {
+    for (const asset of assets) {
+      await this.dataService
+        .mutate(createBadgeDocument, {
+          input: {
+            assetId: asset.id as string,
+            position: this.config.availablePositions[0],
+          },
+        })
+        .toPromise()
+    }
+    this.refresh()
+  }
+
+  deleteBadges(badges: Badge[]) {
+    this.showModalAndDelete(badges.map((a) => a.id))
+      .pipe(
+        switchMap((response) => {
+          if (response.result === DeletionResult.DELETED) {
+            return [true]
+          } else {
+            return this.showModalAndDelete(
+              badges.map((a) => a.id),
+              response.message || '',
+            ).pipe(map((r) => r.result === DeletionResult.DELETED))
+          }
+        }),
+      )
+      .subscribe(
+        () => {
+          this.notificationService.success(_('common.notify-delete-success'), {
+            entity: 'Badges',
+          })
+          this.refresh()
+          this.selectionManager.clearSelection()
+        },
+        () => {
+          this.notificationService.error(_('common.notify-delete-error'), {
+            entity: 'Badges',
+          })
+        },
+      )
+  }
+
+  onBadgeUpdated() {
+    this.refresh()
+  }
+
+  private showModalAndDelete(badgeIds: string[], message?: string) {
+    return this.modalService
+      .dialog({
+        title: _('badge-plugin.confirm-delete-badges'),
+        translationVars: {
+          count: badgeIds.length,
+        },
+        body: message,
+        buttons: [
+          { type: 'secondary', label: _('common.cancel') },
+          { type: 'danger', label: _('common.delete'), returnValue: true },
+        ],
+      })
+      .pipe(
+        switchMap((res) =>
+          res
+            ? this.dataService.mutate(deleteBadgeDocument, {
+                ids: badgeIds,
+              })
+            : EMPTY,
+        ),
+        map((res) => res.deleteBadge),
+      )
+  }
+}

package/dist/ui/gql/gql.ts

@@ -0,0 +1,62 @@
+/* eslint-disable */
+import * as types from './graphql';
+import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
+
+/**
+ * Map of all GraphQL operations in the project.
+ *
+ * This map has several performance disadvantages:
+ * 1. It is not tree-shakeable, so it will include all operations in the project.
+ * 2. It is not minifiable, so the string of a GraphQL query will be multiple times inside the bundle.
+ * 3. It does not support dead code elimination, so it will add unused operations.
+ *
+ * Therefore it is highly recommended to use the babel or swc plugin for production.
+ */
+const documents = {
+    "\n  query GetBadges($options: BadgeListOptions) {\n    badges(options: $options) {\n      items {\n        id\n        createdAt\n        updatedAt\n        collection {\n          id\n        }\n        collectionId\n        position\n        asset {\n          id\n          name\n          type\n          mimeType\n          width\n          height\n          fileSize\n          source\n          preview\n        }\n      }\n      totalItems\n    }\n  }\n": types.GetBadgesDocument,
+    "\n  mutation CreateBadge($input: CreateBadgeInput!) {\n    createBadge(input: $input) {\n      id\n    }\n  }\n": types.CreateBadgeDocument,
+    "\n  mutation DeleteBadge($ids: [ID!]!) {\n    deleteBadge(ids: $ids) {\n      result\n      message\n    }\n  }\n": types.DeleteBadgeDocument,
+    "\n  query GetBadgePluginConfig {\n    getBadgePluginConfig {\n      availablePositions\n    }\n  }\n": types.GetBadgePluginConfigDocument,
+    "\n  mutation UpdateBadge($input: UpdateBadgeInput!) {\n    updateBadge(input: $input) {\n      id\n    }\n  }\n": types.UpdateBadgeDocument,
+};
+
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ *
+ *
+ * @example
+ * ```ts
+ * const query = graphql(`query GetUser($id: ID!) { user(id: $id) { name } }`);
+ * ```
+ *
+ * The query argument is unknown!
+ * Please regenerate the types.
+ */
+export function graphql(source: string): unknown;
+
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(source: "\n  query GetBadges($options: BadgeListOptions) {\n    badges(options: $options) {\n      items {\n        id\n        createdAt\n        updatedAt\n        collection {\n          id\n        }\n        collectionId\n        position\n        asset {\n          id\n          name\n          type\n          mimeType\n          width\n          height\n          fileSize\n          source\n          preview\n        }\n      }\n      totalItems\n    }\n  }\n"): (typeof documents)["\n  query GetBadges($options: BadgeListOptions) {\n    badges(options: $options) {\n      items {\n        id\n        createdAt\n        updatedAt\n        collection {\n          id\n        }\n        collectionId\n        position\n        asset {\n          id\n          name\n          type\n          mimeType\n          width\n          height\n          fileSize\n          source\n          preview\n        }\n      }\n      totalItems\n    }\n  }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(source: "\n  mutation CreateBadge($input: CreateBadgeInput!) {\n    createBadge(input: $input) {\n      id\n    }\n  }\n"): (typeof documents)["\n  mutation CreateBadge($input: CreateBadgeInput!) {\n    createBadge(input: $input) {\n      id\n    }\n  }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(source: "\n  mutation DeleteBadge($ids: [ID!]!) {\n    deleteBadge(ids: $ids) {\n      result\n      message\n    }\n  }\n"): (typeof documents)["\n  mutation DeleteBadge($ids: [ID!]!) {\n    deleteBadge(ids: $ids) {\n      result\n      message\n    }\n  }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(source: "\n  query GetBadgePluginConfig {\n    getBadgePluginConfig {\n      availablePositions\n    }\n  }\n"): (typeof documents)["\n  query GetBadgePluginConfig {\n    getBadgePluginConfig {\n      availablePositions\n    }\n  }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(source: "\n  mutation UpdateBadge($input: UpdateBadgeInput!) {\n    updateBadge(input: $input) {\n      id\n    }\n  }\n"): (typeof documents)["\n  mutation UpdateBadge($input: UpdateBadgeInput!) {\n    updateBadge(input: $input) {\n      id\n    }\n  }\n"];
+
+export function graphql(source: string) {
+  return (documents as any)[source] ?? {};
+}
+
+export type DocumentType<TDocumentNode extends DocumentNode<any, any>> = TDocumentNode extends DocumentNode<  infer TType,  any>  ? TType  : never;