@haus-tech/badge-plugin 0.1.8 → 0.1.10

package/dist/badge.plugin.js

@@ -27,7 +27,7 @@ let BadgePlugin = BadgePlugin_1 = class BadgePlugin {
         if (options) {
             this.options = options;
         }
-        return this;
+        return BadgePlugin_1;
     }
     static ui = {
         extensionPath: path_1.default.join(__dirname, 'ui'),
@@ -35,8 +35,19 @@ 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'),
         },
-        providers: ['providers.ts'],
-        routes: [{ route: 'badges', filePath: 'routes.ts' }],
+        ngModules: [
+            {
+                type: 'lazy',
+                route: 'badges',
+                ngModuleFileName: 'badge.module.ts',
+                ngModuleName: 'BadgeModule',
+            },
+            {
+                type: 'shared',
+                ngModuleFileName: 'badge-nav.module.ts',
+                ngModuleName: 'BadgesNavModule',
+            },
+        ],
     };
 };
 BadgePlugin = BadgePlugin_1 = __decorate([

package/dist/index.d.ts

@@ -1,2 +1 @@
 export * from './badge.plugin';
-export * from './ui/gql/graphql';

package/dist/index.js

@@ -15,4 +15,3 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./badge.plugin"), exports);
-__exportStar(require("./ui/gql/graphql"), exports);

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,7 +17,6 @@ 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) {
@@ -232,8 +231,6 @@ 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,274 @@
+import {
+  TypedBaseListComponent,
+  NotificationService,
+  ModalService,
+  SelectionManager,
+} 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'
+
+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,
+})
+@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/badge-nav.module.d.ts

@@ -0,0 +1,2 @@
+export declare class BadgesNavModule {
+}

package/dist/ui/badge-nav.module.js

@@ -0,0 +1,27 @@
+"use strict";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BadgesNavModule = void 0;
+const core_1 = require("@angular/core");
+const core_2 = require("@vendure/admin-ui/core");
+let BadgesNavModule = class BadgesNavModule {
+};
+BadgesNavModule = __decorate([
+    (0, core_1.NgModule)({
+        imports: [core_2.SharedModule],
+        providers: [
+            (0, core_2.addNavMenuItem)({
+                id: 'badges',
+                label: 'Badges',
+                routerLink: ['/extensions/badges'],
+                icon: 'star',
+            }, 'catalog'),
+        ],
+    })
+], BadgesNavModule);
+exports.BadgesNavModule = BadgesNavModule;

package/dist/ui/badge-nav.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core'
+import { addNavMenuItem, SharedModule } from '@vendure/admin-ui/core'
+
+@NgModule({
+  imports: [SharedModule],
+  providers: [
+    addNavMenuItem(
+      {
+        id: 'badges',
+        label: 'Badges',
+        routerLink: ['/extensions/badges'],
+        icon: 'star',
+      },
+      'catalog',
+    ),
+  ],
+})
+export class BadgesNavModule {}

package/dist/ui/badge.module.d.ts

@@ -0,0 +1,2 @@
+export declare class BadgeModule {
+}

package/dist/ui/badge.module.js

@@ -0,0 +1,34 @@
+"use strict";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BadgeModule = void 0;
+const core_1 = require("@angular/core");
+const router_1 = require("@angular/router");
+const core_2 = require("@vendure/admin-ui/core");
+const badge_list_component_1 = require("./badge-list.component");
+const update_badge_component_1 = require("./update-badge.component");
+let BadgeModule = class BadgeModule {
+};
+BadgeModule = __decorate([
+    (0, core_1.NgModule)({
+        imports: [
+            core_2.SharedModule,
+            router_1.RouterModule.forChild([
+                {
+                    path: '',
+                    pathMatch: 'full',
+                    component: badge_list_component_1.BadgeListComponent,
+                    data: { breadcrumb: 'Badges' },
+                },
+            ]),
+        ],
+        providers: [],
+        declarations: [badge_list_component_1.BadgeListComponent, update_badge_component_1.UpdateBadgeComponent],
+    })
+], BadgeModule);
+exports.BadgeModule = BadgeModule;

package/dist/ui/badge.module.ts

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core'
+import { RouterModule } from '@angular/router'
+import { SharedModule } from '@vendure/admin-ui/core'
+import { BadgeListComponent } from './badge-list.component'
+import { UpdateBadgeComponent } from './update-badge.component'
+
+@NgModule({
+  imports: [
+    SharedModule,
+    RouterModule.forChild([
+      {
+        path: '',
+        pathMatch: 'full',
+        component: BadgeListComponent,
+        data: { breadcrumb: 'Badges' },
+      },
+    ]),
+  ],
+  providers: [],
+  declarations: [BadgeListComponent, UpdateBadgeComponent],
+})
+export class BadgeModule {}