WIP

.graphqlconfig

@@ -0,0 +1,3 @@
+{
+    "schema": "./schema-admin.json"
+}

packages/admin-ui/src/lib/catalog/src/catalog.module.ts

@@ -1,4 +1,4 @@
-import { NgModule } from '@angular/core';
+import { Component, NgModule } from '@angular/core';
 import { RouterModule, ROUTES } from '@angular/router';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import {
@@ -8,6 +8,7 @@ import {
     PageService,
     SharedModule,
 } from '@vendure/admin-ui/core';
+import { PageBlockComponent } from '../../core/src/shared/components/page-block/page-block.component';
 
 import { createRoutes } from './catalog.routes';
 import { ApplyFacetDialogComponent } from './components/apply-facet-dialog/apply-facet-dialog.component';
@@ -191,5 +192,22 @@ export class CatalogModule {
             route: '',
             component: AssetListComponent,
         });
+
+        pageService.registerPageTab({
+            location: 'product-list',
+            tab: 'Stock control',
+            route: 'stock-control',
+            component: StockControlComponent,
+        });
     }
 }
+
+@Component({
+    standalone: true,
+    selector: 'vdr-custom-stock-control',
+    imports: [SharedModule],
+    template: `<vdr-page-block>Stock control!</vdr-page-block> `,
+})
+export class StockControlComponent {
+    // component logic
+}

packages/admin-ui/src/lib/catalog/src/components/product-list/product-list.graphql.ts

@@ -1,31 +1,38 @@
 import { gql } from 'apollo-angular';
 
+const PRODUCT_LIST_QUERY_PRODUCT_FRAGMENT = gql`
+    fragment ProductListQueryProductFragment on Product {
+        id
+        createdAt
+        updatedAt
+        enabled
+        languageCode
+        name
+        slug
+        featuredAsset {
+            id
+            createdAt
+            updatedAt
+            preview
+            focalPoint {
+                x
+                y
+            }
+        }
+        variantList {
+            totalItems
+        }
+    }
+`;
+
 export const PRODUCT_LIST_QUERY = gql`
     query ProductListQuery($options: ProductListOptions) {
         products(options: $options) {
             items {
-                id
-                createdAt
-                updatedAt
-                enabled
-                languageCode
-                name
-                slug
-                featuredAsset {
-                    id
-                    createdAt
-                    updatedAt
-                    preview
-                    focalPoint {
-                        x
-                        y
-                    }
-                }
-                variantList {
-                    totalItems
-                }
+                ...ProductListQueryProductFragment
             }
             totalItems
         }
     }
+    ${PRODUCT_LIST_QUERY_PRODUCT_FRAGMENT}
 `;

packages/admin-ui/src/lib/catalog/src/components/product-variant-list/product-variant-list.component.html

@@ -116,4 +116,8 @@
             </vdr-chip>
         </ng-template>
     </vdr-dt2-column>
+    <vdr-dt2-custom-field-column
+        *ngFor="let field of customFields"
+        [customField]="field"
+        [sorts]="sorts" />
 </vdr-data-table-2>

packages/admin-ui/src/lib/catalog/src/components/product-variant-list/product-variant-list.component.ts

@@ -13,7 +13,7 @@ export class ProductVariantListComponent
 {
     @Input() productId?: string;
     @Input() hideLanguageSelect = false;
-
+    readonly customFields = this.getCustomFieldConfig('ProductVariant');
     readonly filters = this.createFilterCollection()
         .addDateFilters()
         .addFilters([
@@ -48,6 +48,7 @@ export class ProductVariantListComponent
                 filterField: 'priceWithTax',
             },
         ])
+        .addCustomFieldFilters(this.customFields)
         .connectToRoute(this.route);
 
     readonly sorts = this.createSortCollection()
@@ -60,6 +61,7 @@ export class ProductVariantListComponent
             { name: 'price' },
             { name: 'priceWithTax' },
         ])
+        .addCustomFieldSorts(this.customFields)
         .connectToRoute(this.route);
 
     constructor() {

packages/admin-ui/src/lib/catalog/src/components/product-variant-list/product-variant-list.graphql.ts

@@ -1,44 +1,52 @@
 import { ASSET_FRAGMENT } from '@vendure/admin-ui/core';
 import { gql } from 'apollo-angular';
 
-export const PRODUCT_VARIANT_LIST_QUERY = gql`
-    query ProductVariantListQuery($options: ProductVariantListOptions!) {
-        productVariants(options: $options) {
-            items {
+const PRODUCT_VARIANT_LIST_QUERY_PRODUCT_VARIANT_FRAGMENT = gql`
+    fragment ProductVariantListQueryProductVariantFragment on ProductVariant {
+        id
+        createdAt
+        updatedAt
+        productId
+        enabled
+        languageCode
+        name
+        price
+        currencyCode
+        priceWithTax
+        trackInventory
+        outOfStockThreshold
+        stockLevels {
+            id
+            createdAt
+            updatedAt
+            stockLocationId
+            stockOnHand
+            stockAllocated
+            stockLocation {
                 id
                 createdAt
                 updatedAt
-                productId
-                enabled
-                languageCode
                 name
-                price
-                currencyCode
-                priceWithTax
-                trackInventory
-                outOfStockThreshold
-                stockLevels {
-                    id
-                    createdAt
-                    updatedAt
-                    stockLocationId
-                    stockOnHand
-                    stockAllocated
-                    stockLocation {
-                        id
-                        createdAt
-                        updatedAt
-                        name
-                    }
-                }
-                useGlobalOutOfStockThreshold
-                sku
-                featuredAsset {
-                    ...Asset
-                }
             }
-            totalItems
+        }
+        useGlobalOutOfStockThreshold
+        sku
+        featuredAsset {
+            ...Asset
         }
     }
+
     ${ASSET_FRAGMENT}
 `;
+
+export const PRODUCT_VARIANT_LIST_QUERY = gql`
+    query ProductVariantListQuery($options: ProductVariantListOptions!) {
+        productVariants(options: $options) {
+            items {
+                ...ProductVariantListQueryProductVariantFragment
+            }
+            totalItems
+        }
+    }
+    ${PRODUCT_VARIANT_LIST_QUERY_PRODUCT_VARIANT_FRAGMENT}
+`;

packages/admin-ui/src/lib/core/src/shared/components/data-table-filters/data-table-filters.component.html

@@ -48,25 +48,31 @@
                     </div>
                     <div *ngSwitchCase="'text'">
                         <div [formGroup]="formControl">
-                            <select clrSelect name="options" formControlName="operator" class="mb-1">
-                                <option value="contains">{{ 'common.operator-contains' | translate }}</option>
-                                <option value="eq">{{ 'common.operator-eq' | translate }}</option>
-                                <option value="notContains">
-                                    {{ 'common.operator-not-contains' | translate }}
-                                </option>
-                                <option value="notEq">{{ 'common.operator-not-eq' | translate }}</option>
-                                <option value="regex">{{ 'common.operator-regex' | translate }}</option>
-                            </select>
+                            <div>
+                                <select name="options" formControlName="operator" class="mb-1">
+                                    <option value="contains">
+                                        {{ 'common.operator-contains' | translate }}
+                                    </option>
+                                    <option value="eq">{{ 'common.operator-eq' | translate }}</option>
+                                    <option value="notContains">
+                                        {{ 'common.operator-not-contains' | translate }}
+                                    </option>
+                                    <option value="notEq">{{ 'common.operator-not-eq' | translate }}</option>
+                                    <option value="regex">{{ 'common.operator-regex' | translate }}</option>
+                                </select>
+                            </div>
                             <input type="text" formControlName="term" />
                         </div>
                     </div>
                     <div *ngSwitchCase="'number'">
                         <div [formGroup]="formControl">
-                            <select clrSelect name="options" formControlName="operator" class="mb-1">
-                                <option value="eq">{{ 'common.operator-eq' | translate }}</option>
-                                <option value="gt">{{ 'common.operator-gt' | translate }}</option>
-                                <option value="lt">{{ 'common.operator-lt' | translate }}</option>
-                            </select>
+                            <div>
+                                <select name="options" formControlName="operator" class="mb-1">
+                                    <option value="eq">{{ 'common.operator-eq' | translate }}</option>
+                                    <option value="gt">{{ 'common.operator-gt' | translate }}</option>
+                                    <option value="lt">{{ 'common.operator-lt' | translate }}</option>
+                                </select>
+                            </div>
                             <input
                                 *ngIf="$any(selectedFilter.type).inputType !== 'currency'"
                                 type="text"

packages/common/src/generated-types.ts

@@ -823,9 +823,14 @@ export type CreateProductOptionInput = {
   translations: Array<ProductOptionGroupTranslationInput>;
 };
 
+export type CreateProductVariantCustomFieldsInput = {
+  gtin?: InputMaybe<Scalars['String']>;
+  weight?: InputMaybe<Scalars['Int']>;
+};
+
 export type CreateProductVariantInput = {
   assetIds?: InputMaybe<Array<Scalars['ID']>>;
-  customFields?: InputMaybe<Scalars['JSON']>;
+  customFields?: InputMaybe<CreateProductVariantCustomFieldsInput>;
   facetValueIds?: InputMaybe<Array<Scalars['ID']>>;
   featuredAssetId?: InputMaybe<Scalars['ID']>;
   optionIds?: InputMaybe<Array<Scalars['ID']>>;
@@ -4491,7 +4496,7 @@ export type ProductVariant = Node & {
   channels: Array<Channel>;
   createdAt: Scalars['DateTime'];
   currencyCode: CurrencyCode;
-  customFields?: Maybe<Scalars['JSON']>;
+  customFields?: Maybe<ProductVariantCustomFields>;
   enabled: Scalars['Boolean'];
   facetValues: Array<FacetValue>;
   featuredAsset?: Maybe<Asset>;
@@ -4525,11 +4530,18 @@ export type ProductVariantStockMovementsArgs = {
   options?: InputMaybe<StockMovementListOptions>;
 };
 
+export type ProductVariantCustomFields = {
+  __typename?: 'ProductVariantCustomFields';
+  gtin?: Maybe<Scalars['String']>;
+  weight?: Maybe<Scalars['Int']>;
+};
+
 export type ProductVariantFilterParameter = {
   createdAt?: InputMaybe<DateOperators>;
   currencyCode?: InputMaybe<StringOperators>;
   enabled?: InputMaybe<BooleanOperators>;
   facetValueId?: InputMaybe<IdOperators>;
+  gtin?: InputMaybe<StringOperators>;
   id?: InputMaybe<IdOperators>;
   languageCode?: InputMaybe<StringOperators>;
   name?: InputMaybe<StringOperators>;
@@ -4544,6 +4556,7 @@ export type ProductVariantFilterParameter = {
   trackInventory?: InputMaybe<StringOperators>;
   updatedAt?: InputMaybe<DateOperators>;
   useGlobalOutOfStockThreshold?: InputMaybe<BooleanOperators>;
+  weight?: InputMaybe<NumberOperators>;
 };
 
 export type ProductVariantList = PaginatedList & {
@@ -4567,6 +4580,7 @@ export type ProductVariantListOptions = {
 
 export type ProductVariantSortParameter = {
   createdAt?: InputMaybe<SortOrder>;
+  gtin?: InputMaybe<SortOrder>;
   id?: InputMaybe<SortOrder>;
   name?: InputMaybe<SortOrder>;
   outOfStockThreshold?: InputMaybe<SortOrder>;
@@ -4578,6 +4592,7 @@ export type ProductVariantSortParameter = {
   stockLevel?: InputMaybe<SortOrder>;
   stockOnHand?: InputMaybe<SortOrder>;
   updatedAt?: InputMaybe<SortOrder>;
+  weight?: InputMaybe<SortOrder>;
 };
 
 export type ProductVariantTranslation = {
@@ -6132,9 +6147,14 @@ export type UpdateProductOptionInput = {
   translations?: InputMaybe<Array<ProductOptionGroupTranslationInput>>;
 };
 
+export type UpdateProductVariantCustomFieldsInput = {
+  gtin?: InputMaybe<Scalars['String']>;
+  weight?: InputMaybe<Scalars['Int']>;
+};
+
 export type UpdateProductVariantInput = {
   assetIds?: InputMaybe<Array<Scalars['ID']>>;
-  customFields?: InputMaybe<Scalars['JSON']>;
+  customFields?: InputMaybe<UpdateProductVariantCustomFieldsInput>;
   enabled?: InputMaybe<Scalars['Boolean']>;
   facetValueIds?: InputMaybe<Array<Scalars['ID']>>;
   featuredAssetId?: InputMaybe<Scalars['ID']>;

packages/dev-server/dev-config.ts

@@ -61,6 +61,30 @@ export const devConfig: VendureConfig = {
     paymentOptions: {
         paymentMethodHandlers: [dummyPaymentHandler],
     },
+
+    customFields: {
+        ProductVariant: [
+            {
+                name: 'weight',
+                type: 'int',
+                defaultValue: 0,
+                nullable: false,
+                min: 0,
+                step: 1,
+                public: true,
+                label: [{ languageCode: LanguageCode.en, value: 'Weight' }],
+                ui: { component: 'number-form-input', suffix: 'g' },
+            },
+            {
+                name: 'gtin',
+                type: 'string',
+                nullable: true,
+                public: true,
+                label: [{ languageCode: LanguageCode.en, value: 'GTIN (barcode)' }],
+            },
+        ],
+    },
+
     /* customFields: {
         ProductVariant: [
             {
@@ -426,7 +450,7 @@ function getDbConfig(): DataSourceOptions {
         default:
             console.log('Using mysql connection');
             return {
-                synchronize: true,
+                synchronize: false,
                 type: 'mariadb',
                 host: '127.0.0.1',
                 port: 3306,