DECAF-26 - update file upload component

src/app/ew/fabric/Leaflet.ts

@@ -1,14 +1,13 @@
-import { Comparison, Model, model, required, type ModelArg } from '@decaf-ts/decorator-validation';
+import { Comparison, list, Model, model, required, type ModelArg } from '@decaf-ts/decorator-validation';
 import { LeafletFile } from './LeafletFile';
 // import { gtin } from "@pharmaledgerassoc/ptp-toolkit/shared";
 // import { BatchPattern, TableNames } from "@pharmaledgerassoc/ptp-toolkit/shared";
-import { Cascade, column, index, oneToMany, OrderDirection, pk, table } from '@decaf-ts/core';
-import { composed, InternalError, OperationKeys, readonly } from '@decaf-ts/db-decorators';
+import { column, index, OrderDirection, pk, table } from '@decaf-ts/core';
+import { composed, InternalError, readonly } from '@decaf-ts/db-decorators';
 import { description } from '@decaf-ts/decoration';
 import {
   ComponentEventNames,
   DecafComponent,
-  DecafEventHandler,
   ElementPositions,
   ElementSizes,
   HTML5InputTypes,
@@ -17,7 +16,7 @@ import {
   uilistmodel,
   uimodel,
   uionrender,
-  uitablecol,
+  uitablecol
 } from '@decaf-ts/ui-decorators';
 import { getDocumentTypes, getLeafletLanguages, getMarkets } from 'src/app/ew/utils/helpers';
 import { Batch } from './Batch';
@@ -43,6 +42,7 @@ export enum LeafletType {
 @uimodel('ngx-decaf-crud-form', { empty: { showButton: false } })
 @uihandlers({
   [ComponentEventNames.Submit]: LeafletHandler,
+  [ComponentEventNames.Render]: LeafletHandler,
 })
 @model()
 export class Leaflet extends Cacheable {
@@ -120,20 +120,21 @@ export class Leaflet extends Cacheable {
     }),
     options: () => Batch,
   })
-  @uionrender(
-    () =>
-      class _ extends DecafEventHandler {
-        override async render(): Promise<void> {
-          const instance = this as unknown as {
-            headers: string[];
-            operation: OperationKeys[];
-          };
-          if (instance.headers)
-            instance.headers = instance.headers.map((header) => (header === 'batchNumber' ? 'batchCol' : header));
-        }
-      }
-  )
-  @uitablecol(1, async (instance: DecafComponent<Model> & { type: string }, value: string) => {
+  @uionrender(() => LeafletHandler)
+  // @uionrender(
+  //   () =>
+  //     class _ extends DecafEventHandler {
+  //       override async render(): Promise<void> {
+  //         const instance = this as unknown as {
+  //           headers: string[];
+  //           operation: OperationKeys[];
+  //         };
+  //         if (instance.headers)
+  //           instance.headers = instance.headers.map((header) => (header === 'batchNumber' ? 'batchCol' : header));
+  //       }
+  //     }
+  // )
+  @uitablecol(1, async (instance: DecafComponent<Model> & { type: string }, prop: string, value: string) => {
     if (instance.operation && ['paginated', 'infinite'].includes(instance.type)) value = 'subinfo'; // fallback mapper to list item position
     return value;
   })
@@ -176,13 +177,16 @@ export class Leaflet extends Cacheable {
     startEmpty: false,
     translatable: false,
   })
-  @uitablecol(3, async (instance: DecafComponent<Model> & { type: string }, v: string) => {
-    if (instance.operation && ['paginated', 'infinite'].includes(instance.type)) return 'subinfo';
-    if (!instance.operation) {
-      return getLeafletLanguages().find(({ value }) => value === v)?.text;
+  @uitablecol(
+    3,
+    async (
+      instance: DecafComponent<Model> & { type: 'infinite' | 'paginated' },
+      prop: keyof Leaflet,
+      value: string
+    ) => {
+      return LeafletHandler.getLanguage(instance, value);
     }
-    return v;
-  })
+  )
   lang!: string; // TODO -> rollback to language property
 
   //@cache()
@@ -197,11 +201,8 @@ export class Leaflet extends Cacheable {
     type: HTML5InputTypes.SELECT,
     options: getMarkets(),
   })
-  @uitablecol(4, async (instance: DecafComponent<Model>, v: string) => {
-    if (!instance.operation) {
-      return getMarkets().find(({ value }) => value === v)?.text;
-    }
-    return v;
+  @uitablecol(4, async (instance: DecafComponent<Model>, prop: keyof Leaflet, value: string) => {
+    return LeafletHandler.getMarket(instance, value);
   })
   epiMarket!: string; // TODO -> Create validation decorator. CountryMarket is a CONDITIONAL property. can only exist for product only. no batch
 
@@ -217,17 +218,27 @@ export class Leaflet extends Cacheable {
     size: ElementSizes.small,
     position: ElementPositions.left,
     required: true,
+    valueType: 'files',
     subType: 'text',
     maxFileSize: 10,
     // previewHandler: XmlPreviewHandler,
     accept: ['image/*', '.xml'],
+    // propsMapperFn: {
+    //   parseValue: () => async (revert: boolean) => {
+    //     const instance = this as unknown as FileUploadComponent;
+    //     console.log(instance);
+    //     console.log(revert);
+    //     // override aqui
+    //   },
+    // },
   })
   xmlFileContent!: string | LeafletFile;
 
   //@cache()
-  @oneToMany(() => LeafletFile, { update: Cascade.CASCADE, delete: Cascade.CASCADE }, false)
+  // @oneToMany(() => LeafletFile, { update: Cascade.CASCADE, delete: Cascade.CASCADE }, false)
+  @list(LeafletFile)
   @description('List of additional files linked to the leaflet, such as PDFs or images.')
-  otherFilesContent!: string[] | LeafletFile[];
+  otherFilesContent!: LeafletFile[];
 
   constructor(model?: ModelArg<Leaflet>) {
     super(model);

src/app/ew/fabric/LeafletFile.ts

@@ -1,41 +1,39 @@
-import type { ModelArg } from "@decaf-ts/decorator-validation";
-import { model, required } from "@decaf-ts/decorator-validation";
-import { column, index, OrderDirection, pk, table } from "@decaf-ts/core";
+import { column, index, OrderDirection, pk, table } from '@decaf-ts/core';
+import type { ModelArg } from '@decaf-ts/decorator-validation';
+import { model, required } from '@decaf-ts/decorator-validation';
 // import { TableNames } from "@pharmaledgerassoc/ptp-toolkit/shared";
-import { description, uses } from "@decaf-ts/decoration";
- import { composed } from "@decaf-ts/db-decorators";
+import { composed } from '@decaf-ts/db-decorators';
+import { description } from '@decaf-ts/decoration';
 // import { cache } from "@pharmaledgerassoc/ptp-toolkit/shared";
-import { Cacheable } from "./Cacheable";
-import { TableNames } from "./constants";
+import { Cacheable } from './Cacheable';
+import { TableNames } from './constants';
 
-@description(
-  "Represents an additional file associated with a leaflet, such as a PDF or image."
-)
+@description('Represents an additional file associated with a leaflet, such as a PDF or image.')
 //@uses(FabricFlavour)
 @table(TableNames.LeafletFile)
 @model()
 export class LeafletFile extends Cacheable {
   @pk()
-  @composed(["leafletId", "filename"], ":")
-  @description("Unique identifier of the leaflet file.")
+  @composed(['leafletId', 'fileName'], ':')
+  @description('Unique identifier of the leaflet file.')
   id!: string;
 
   @required()
   @index([OrderDirection.ASC, OrderDirection.DSC])
-  @description("Identifier of the leaflet this file belongs to.")
+  @description('Identifier of the leaflet this file belongs to.')
   leafletId!: string;
 
   //@cache()
   @column()
   @required()
   @index([OrderDirection.ASC, OrderDirection.DSC])
-  @description("Name of the file, including its extension.")
-  filename!: string;
+  @description('Name of the file, including its extension.')
+  fileName!: string;
 
   //@cache()
   @column()
   @required()
-  @description("Base64-encoded content of the file.")
+  @description('Base64-encoded content of the file.')
   fileContent!: string;
 
   // eslint-disable-next-line @typescript-eslint/no-useless-constructor

src/app/ew/fabric/Product.ts

@@ -1,44 +1,28 @@
-import type { Model, ModelArg } from '@decaf-ts/decorator-validation';
-import { maxlength, min, minlength, model, required, type } from '@decaf-ts/decorator-validation';
+import type { ModelArg } from '@decaf-ts/decorator-validation';
+import { minlength, model, required } from '@decaf-ts/decorator-validation';
 // import { gtin, TableNames } from "@pharmaledgerassoc/ptp-toolkit/shared";
-import { propMetadata, Constructor } from '@decaf-ts/decoration';
 
-import {
-  Cascade,
-  column,
-  Condition,
-  index,
-  oneToMany,
-  oneToOne,
-  OrderDirection,
-  pk,
-  table,
-} from '@decaf-ts/core';
+import { Cascade, column, index, oneToMany, oneToOne, OrderDirection, pk } from '@decaf-ts/core';
 // import {BlockOperations, OperationKeys, readonly} from "@decaf-ts/db-decorators";
-import { description, uses } from '@decaf-ts/decoration';
-import { ProductStrength } from './ProductStrength';
+import { description } from '@decaf-ts/decoration';
 import { ProductMarket } from './ProductMarket';
+import { ProductStrength } from './ProductStrength';
 // import { assignProductOwner, audit } from "@pharmaledgerassoc/ptp-toolkit/shared";
 import { ProductImage } from './ProductImage';
 // import { cache } from "@pharmaledgerassoc/ptp-toolkit/shared";
-import { Cacheable } from './Cacheable';
 import {
+  HTML5InputTypes,
   uielement,
-  uilistprop,
-  uilistmodel,
   uilayout,
   uilayoutprop,
-  HTML5InputTypes,
+  uilistmodel,
+  uilistprop,
   uionrender,
-  DecafComponent,
 } from '@decaf-ts/ui-decorators';
-import { getModelAndRepository, NgxComponentDirective, NgxEventHandler } from 'src/lib/engine';
-import { OperationKeys } from '@decaf-ts/db-decorators';
-import { audit } from './utils';
-import { FileUploadComponent } from 'src/lib/components';
-import { ProductImageHandler } from './handlers/ProductImageHandler';
-import { ProductHandler } from './handlers/ProductHandler';
+import { Cacheable } from './Cacheable';
 import { gtin } from './gtin';
+import { ProductHandler } from './handlers/ProductHandler';
+import { audit } from './utils';
 
 // @BlockOperations([OperationKeys.DELETE])
 //@uses(FabricFlavour)
@@ -126,14 +110,16 @@ export class Product extends Cacheable {
       update: Cascade.CASCADE,
       delete: Cascade.CASCADE,
     },
-    false,
+    false
   )
   @uielement('ngx-decaf-file-upload', {
     label: 'product.productImage.label',
     type: 'text',
   })
   @uilayoutprop(1)
-  @uionrender(() => ProductImageHandler)
+  @uionrender(() => ProductHandler)
+
+  // @uionrender(() => ProductImageHandler)
   imageData?: ProductImage;
 
   //

src/app/ew/fabric/handlers/EpiHandler.ts

@@ -1,6 +1,7 @@
 import { Condition, OrderDirection } from '@decaf-ts/core';
-import { Metadata, Constructor } from '@decaf-ts/decoration';
+import { OperationKeys } from '@decaf-ts/db-decorators';
 import { Model, Primitives } from '@decaf-ts/decorator-validation';
+import { CrudFieldComponent } from 'src/lib/components';
 import {
   DecafRepository,
   getModelAndRepository,
@@ -9,10 +10,7 @@ import {
   NgxEventHandler,
   SelectOption,
 } from 'src/lib/engine';
-import { Batch, Leaflet, Product, ProductMarket, ProductStrength } from '..';
-import { CrudFieldComponent, FieldsetComponent, ListComponent } from 'src/lib/components';
-import { OperationKeys, readonly } from '@decaf-ts/db-decorators';
-import { DecafComponent } from '@decaf-ts/ui-decorators';
+import { Leaflet, ProductMarket } from '..';
 
 export async function renderMakets<C extends CrudFieldComponent>(instance: C): Promise<void> {
   return await new EpiHandler().renderMakets(instance);
@@ -75,11 +73,7 @@ export class EpiHandler extends NgxEventHandler {
 
   async renderMakets<C extends CrudFieldComponent>(component: C): Promise<void> {
     if (component?.modelId) {
-      const query = await this.query<ProductMarket>(
-        ProductMarket.name,
-        'productCode',
-        component.modelId as Primitives,
-      );
+      const query = await this.query<ProductMarket>(ProductMarket.name, 'productCode', component.modelId as Primitives);
       if (query?.length) {
         const filterMarkets = query.map((item) => item.marketId);
         component.options = (component.options as SelectOption[])?.filter((option) => {
@@ -91,17 +85,13 @@ export class EpiHandler extends NgxEventHandler {
     }
   }
 
-  async query<M extends Model>(
-    modelName: string,
-    relation: string,
-    modelId: Primitives,
-  ): Promise<M[]> {
+  async query<M extends Model>(modelName: string, relation: string, modelId: Primitives): Promise<M[]> {
     const repo = getModelAndRepository(modelName);
     if (repo) {
       const { repository } = repo;
       return await (repository as DecafRepository<M>).query(
         Condition.attribute<M>(relation as keyof M).eq(modelId),
-        relation as keyof M,
+        relation as keyof M
       );
     }
     return [];