feat(admin-ui): Add thumbnails to ProductListComponent

admin-ui/src/app/catalog/components/product-list/product-list.component.html

@@ -15,16 +15,18 @@
     (pageChange)="setPageNumber($event)"
     (itemsPerPageChange)="setItemsPerPage($event)"
 >
-    <vdr-dt-column>{{ 'common.ID' | translate }}</vdr-dt-column>
+    <vdr-dt-column></vdr-dt-column>
     <vdr-dt-column>{{ 'common.name' | translate }}</vdr-dt-column>
     <vdr-dt-column>{{ 'catalog.slug' | translate }}</vdr-dt-column>
-    <vdr-dt-column>{{ 'common.description' | translate }}</vdr-dt-column>
     <vdr-dt-column></vdr-dt-column>
     <ng-template let-product="item">
-        <td class="left">{{ product.id }}</td>
+        <td class="left">
+            <div class="image-placeholder">
+                <img [src]="product.featuredAsset?.preview + '?preset=tiny'" />
+            </div>
+        </td>
         <td class="left">{{ product.name }}</td>
         <td class="left">{{ product.slug }}</td>
-        <td class="left">{{ product.description }}</td>
         <td class="right">
             <vdr-table-row-action
                 iconShape="edit"

admin-ui/src/app/catalog/components/product-list/product-list.component.scss

@@ -0,0 +1,7 @@
+@import "variables";
+
+.image-placeholder {
+    width: 50px;
+    height: 50px;
+    background-color: $color-grey-2;
+}

admin-ui/src/app/data/definitions/product-definitions.ts

@@ -218,7 +218,10 @@ export const GET_PRODUCT_LIST = gql`
                 languageCode
                 name
                 slug
-                description
+                featuredAsset {
+                    id
+                    preview
+                }
             }
             totalItems
         }

admin-ui/src/app/settings/components/payment-method-detail/payment-method-detail.component.html

@@ -5,7 +5,6 @@
         <button
             class="btn btn-primary"
             *ngIf="(isNew$ | async); else: updateButton"
-            (click)="create()"
             [disabled]="paymentMethodForm.pristine || paymentMethodForm.invalid"
         >
             {{ 'common.create' | translate }}

shared/generated-types.ts

@@ -5282,7 +5282,12 @@ export namespace GetProductList {
         languageCode: LanguageCode;
         name: string;
         slug: string;
-        description: string;
+        featuredAsset?: FeaturedAsset | null;
+    };
+
+    export type FeaturedAsset = {
+        __typename?: 'Asset';
+        preview: string;
     };
 }