@masterteam/properties 0.0.33 → 0.0.35

package/assets/i18n/ar.json

@@ -8,7 +8,7 @@
       "columnName": "الاسم",
       "columnType": "النوع",
       "columnRequired": "مطلوب",
-      "columnCalculated": "محسوبة",
+      "columnCalculated": "هل هي محسوبة",
       "createAction": "إنشاء",
       "editAction": "تعديل",
       "deleteAction": "حذف",

package/assets/i18n/en.json

@@ -8,7 +8,7 @@
       "columnName": "Name",
       "columnType": "Type",
       "columnRequired": "Required",
-      "columnCalculated": "Calculated",
+      "columnCalculated": "Is Calculated",
       "createAction": "Create",
       "editAction": "Edit",
       "deleteAction": "Delete",

package/fesm2022/masterteam-properties.mjs

@@ -6,7 +6,7 @@ import { Router, ActivatedRoute } from '@angular/router';
 import { HttpClient, HttpContextToken } from '@angular/common/http';
 import { Action, Selector, State, Store, select } from '@ngxs/store';
 import { of, finalize, startWith, map, distinctUntilChanged, Subscription } from 'rxjs';
-import { CrudStateBase, handleApiRequest, PickListFieldConfig, ValidatorConfig, ColorPickerFieldConfig, IconFieldConfig } from '@masterteam/components';
+import { CrudStateBase, handleApiRequest, ValidatorConfig, PickListFieldConfig, ColorPickerFieldConfig, IconFieldConfig } from '@masterteam/components';
 import { Breadcrumb } from '@masterteam/components/breadcrumb';
 import { Card } from '@masterteam/components/card';
 import { Avatar } from '@masterteam/components/avatar';
@@ -340,7 +340,7 @@ let PropertiesState = class PropertiesState extends CrudStateBase {
             key: PropertiesActionKey.GetAll,
             request$: req$,
             onSuccess: (response) => ({
-                properties: response.data ?? [],
+                properties: (response.data?.properties ?? []).map(mapCatalogProperty),
             }),
         });
     }
@@ -525,7 +525,7 @@ let PropertiesState = class PropertiesState extends CrudStateBase {
             key: PropertiesActionKey.GetConfigProperties,
             request$: req$,
             onSuccess: (response) => ({
-                configTypeProperties: response.data ?? [],
+                configTypeProperties: (response.data ?? []).map(mapCatalogProperty),
             }),
         });
     }
@@ -837,6 +837,21 @@ PropertiesState = __decorate([
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: PropertiesState, decorators: [{
             type: Injectable
         }], propDecorators: { getAll: [], getOne: [], getLookups: [], getGroups: [], getConfigAsType: [], getCountries: [], testApiConfiguration: [], getPropertyStatuses: [], createPropertyStatus: [], updatePropertyStatus: [], deletePropertyStatus: [], reorderPropertyStatuses: [], getPropertiesForConfigType: [], resetConfigProperties: [], resetConfigScopes: [], resetSelectedProperty: [], resetApiConfiguration: [], resetPropertyStatuses: [], setModuleInfo: [], SetPropertyTypes: [], setBreadcrumb: [], setDefaultViewType: [], createProperty: [], updateProperty: [], deleteProperty: [] } });
+function mapCatalogProperty(property) {
+    return {
+        id: property.id,
+        key: property.key,
+        normalizedKey: property.normalizedKey,
+        viewType: property.viewType,
+        viewTypeLabel: property.viewType,
+        name: { display: property.label },
+        order: property.order,
+        isRequired: property.isRequired,
+        isSystem: property.isSystem,
+        isCalculated: property.source?.toLowerCase().includes('calculated'),
+        configuration: property.configuration ?? undefined,
+    };
+}
 
 class PropertiesFacade {
     store = inject(Store);
@@ -1086,7 +1101,7 @@ class PropertiesList {
             },
         },
         {
-            key: 'isRequired',
+            key: 'isCalculated',
             label: this.transloco.translate('properties.list.columnCalculated'),
             type: 'boolean',
             readonly: true,
@@ -1488,6 +1503,7 @@ class CheckListFormConfiguration {
                         optionValue: 'id',
                         filter: true,
                         options: this.lookups(),
+                        validators: [ValidatorConfig.required()],
                     },
                     {
                         key: 'scopeId',
@@ -1497,6 +1513,7 @@ class CheckListFormConfiguration {
                         optionValue: 'id',
                         options: this.scopeItems(),
                         filter: true,
+                        validators: [ValidatorConfig.required()],
                     },
                     new PickListFieldConfig({
                         key: 'properties',
@@ -1506,6 +1523,7 @@ class CheckListFormConfiguration {
                         optionValue: 'key',
                         sourceHeader: this.transloco.translate('properties.form.availableProperties'),
                         targetHeader: this.transloco.translate('properties.form.selectedProperties'),
+                        validators: [ValidatorConfig.required()],
                     }),
                 ],
             },
@@ -1586,6 +1604,7 @@ class EntityListConfiguration {
                         optionValue: 'id',
                         options: this.moduleItems(),
                         filter: true,
+                        validators: [ValidatorConfig.required()],
                     },
                     {
                         key: 'access',
@@ -1594,6 +1613,7 @@ class EntityListConfiguration {
                         optionLabel: 'label',
                         optionValue: 'value',
                         options: this.accessOptions,
+                        validators: [ValidatorConfig.required()],
                     },
                     {
                         key: 'snapshotMode',
@@ -1611,6 +1631,7 @@ class EntityListConfiguration {
                         optionValue: 'key',
                         sourceHeader: 'Available Read Fields',
                         targetHeader: 'Selected Read Fields',
+                        validators: [ValidatorConfig.required()],
                     }),
                     new PickListFieldConfig({
                         key: 'writeFields',
@@ -1620,6 +1641,7 @@ class EntityListConfiguration {
                         optionValue: 'key',
                         sourceHeader: 'Available Write Fields',
                         targetHeader: 'Selected Write Fields',
+                        validators: [ValidatorConfig.required()],
                         relations: [
                             { action: 'show', key: 'access', value: 'Write' },
                             { action: 'show', key: 'access', value: 'ReadWrite' },
@@ -1699,6 +1721,7 @@ class LocationConfiguration {
                         optionValue: 'name',
                         options: this.countries(),
                         filter: true,
+                        validators: [ValidatorConfig.required()],
                     },
                 ],
             },
@@ -1746,6 +1769,7 @@ class LookupConfiguration {
                         optionValue: 'id',
                         options: this.lookups(),
                         filter: true,
+                        validators: [ValidatorConfig.required()],
                     },
                 ],
             },
@@ -2320,6 +2344,7 @@ class AttachmentConfiguration {
                         sourceHeader: this.transloco.translate('properties.form.availableTypes'),
                         targetHeader: this.transloco.translate('properties.form.selectedTypes'),
                         cssClass: 'md:col-span-2',
+                        validators: [ValidatorConfig.required()],
                     }),
                     {
                         key: 'IsMulitple',
@@ -2372,14 +2397,13 @@ class PropertyForm {
     mainControl = this.propertyForm.get('main');
     configurationControl = this.propertyForm.get('configuration');
     formulaControl = this.propertyForm.get('formula');
+    mainValue = signal(this.mainControl.value, ...(ngDevMode ? [{ debugName: "mainValue" }] : []));
     creating = this.facade.isCreating;
     updating = this.facade.isUpdating;
     loading = this.facade.isLoadingOne;
     submitting = computed(() => this.creating() || this.updating(), ...(ngDevMode ? [{ debugName: "submitting" }] : []));
-    propertyType = toSignal(this.mainControl.valueChanges.pipe(map((v) => v?.viewType), distinctUntilChanged()));
-    isCalculated = toSignal(this.mainControl.valueChanges.pipe(map((v) => Boolean(v?.isCalculated)), distinctUntilChanged()), {
-        initialValue: Boolean(this.mainControl.value?.isCalculated),
-    });
+    propertyType = computed(() => this.mainValue()?.viewType ?? null, ...(ngDevMode ? [{ debugName: "propertyType" }] : []));
+    isCalculated = computed(() => Boolean(this.mainValue()?.isCalculated), ...(ngDevMode ? [{ debugName: "isCalculated" }] : []));
     formulaSchemaId = computed(() => this.resolveSchemaId(this.facade.parentModuleId() ?? this.facade.moduleId()), ...(ngDevMode ? [{ debugName: "formulaSchemaId" }] : []));
     selectedViewType = computed(() => this.propertyType() ??
         this.facade.selected()?.viewType, ...(ngDevMode ? [{ debugName: "selectedViewType" }] : []));
@@ -2407,7 +2431,8 @@ class PropertyForm {
     configurationComponentRef = null;
     configurationComponentLoadId = 0;
     externalConfigurationForm = signal(null, ...(ngDevMode ? [{ debugName: "externalConfigurationForm" }] : []));
-    externalConfigurationSubscriptions = null;
+    externalConfigurationSubscriptions = new Subscription();
+    subscriptions = new Subscription();
     externalConfigurationInvalid = signal(false, ...(ngDevMode ? [{ debugName: "externalConfigurationInvalid" }] : []));
     lastStatusScrollKey = signal(null, ...(ngDevMode ? [{ debugName: "lastStatusScrollKey" }] : []));
     configurationComponentExists = computed(() => !!this.configurationComponentType(), ...(ngDevMode ? [{ debugName: "configurationComponentExists" }] : []));
@@ -2478,16 +2503,6 @@ class PropertyForm {
                                 key: 'viewType',
                                 value: 'Checkbox',
                             },
-                            {
-                                action: 'show',
-                                key: 'viewType',
-                                value: 'Lookup',
-                            },
-                            {
-                                action: 'show',
-                                key: 'viewType',
-                                value: 'LookupMultiSelect',
-                            },
                             {
                                 action: 'show',
                                 key: 'viewType',
@@ -2536,6 +2551,7 @@ class PropertyForm {
         ],
     }), ...(ngDevMode ? [{ debugName: "dynamicFormConfigMain" }] : []));
     constructor() {
+        this.subscriptions.add(this.mainControl.valueChanges.subscribe((value) => this.mainValue.set(value)));
         // Load when editing
         effect(() => {
             if (this.propertyId()) {
@@ -2581,6 +2597,11 @@ class PropertyForm {
         effect(() => {
             this.renderConfigurationComponent(this.configurationComponentType());
         });
+        effect(() => {
+            const calculated = this.isCalculated();
+            this.formulaControl.setValidators(calculated ? [Validators.required] : []);
+            this.formulaControl.updateValueAndValidity({ emitEvent: false });
+        });
         effect(() => {
             const fragment = this.routeFragment();
             const section = this.statusConfigurationSection();
@@ -2618,8 +2639,9 @@ class PropertyForm {
         this.connectExternalConfigurationForm(componentRef.instance);
     }
     destroyConfigurationComponent() {
-        this.externalConfigurationSubscriptions?.unsubscribe();
-        this.externalConfigurationSubscriptions = null;
+        const formSubscriptions = this.externalConfigurationSubscriptions;
+        this.externalConfigurationSubscriptions = new Subscription();
+        formSubscriptions.unsubscribe();
         this.externalConfigurationForm.set(null);
         this.externalConfigurationInvalid.set(false);
         this.configurationComponentRef?.destroy();
@@ -2639,7 +2661,6 @@ class PropertyForm {
         this.configurationControl.setValue(form.value ?? null, {
             emitEvent: false,
         });
-        this.externalConfigurationSubscriptions = new Subscription();
         this.externalConfigurationSubscriptions.add(form.valueChanges.subscribe((value) => this.configurationControl.setValue(value, { emitEvent: false })));
         this.externalConfigurationSubscriptions.add(form.statusChanges.subscribe(() => this.externalConfigurationInvalid.set(form.invalid)));
     }
@@ -2726,6 +2747,7 @@ class PropertyForm {
         this.mainControl.patchValue(property, {
             emitEvent: false,
         });
+        this.mainValue.set(this.mainControl.value);
         this.configurationControl.setValue(property?.configuration);
         this.formulaControl.setValue(property.formula ?? null, {
             emitEvent: false,
@@ -2781,6 +2803,7 @@ class PropertyForm {
         this.facade.resetSelectedProperty();
         this.facade.setDefaultViewType('');
         this.destroyConfigurationComponent();
+        this.subscriptions.unsubscribe();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: PropertyForm, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: PropertyForm, isStandalone: true, selector: "mt-property-form", inputs: { propertyId: { classPropertyName: "propertyId", publicName: "propertyId", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "statusConfigurationSection", first: true, predicate: ["statusConfigurationSection"], descendants: true, isSignal: true }, { propertyName: "configurationHost", first: true, predicate: ["configurationHost"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<mt-page\n  [title]=\"\n    propertyId()\n      ? ('properties.form.editProperty' | transloco)\n      : ('properties.form.createNewProperty' | transloco)\n  \"\n  avatarIcon=\"custom.products-and-services\"\n  [avatarStyle]=\"{\n    '--p-avatar-background': 'var(--p-sky-50)',\n    '--p-avatar-color': 'var(--p-sky-700)',\n  }\"\n  (backButtonClick)=\"goBack()\"\n  backButton\n  class=\"h-full\"\n>\n  <ng-template #headerEnd>\n    <mt-button\n      class=\"mx-2\"\n      [label]=\"submitLabel()\"\n      [icon]=\"isEditing() ? 'custom.pencil' : 'general.plus'\"\n      [loading]=\"submitting()\"\n      [disabled]=\"submitDisabled() || this.propertyForm.invalid\"\n      (click)=\"createOrEditProperty()\"\n    />\n  </ng-template>\n  <div\n    [formGroup]=\"propertyForm\"\n    class=\"h-full py-4 h-full overflow-y-auto flex justify-center\"\n  >\n    <div class=\"w-2/3 flex flex-col gap-6\">\n      @if (loading()) {\n        <!-- Skeleton Loading State -->\n        <div class=\"rounded-xl bg-white shadow-sm p-6 space-y-4\">\n          <div class=\"flex justify-between items-center gap-6\">\n            <p-skeleton width=\"50%\" height=\"3rem\"></p-skeleton>\n            <p-skeleton width=\"8rem\" height=\"2.5rem\"></p-skeleton>\n          </div>\n        </div>\n\n        <div class=\"rounded-xl bg-white shadow-sm p-6 space-y-4\">\n          <p-skeleton\n            width=\"12rem\"\n            height=\"1.5rem\"\n            styleClass=\"mb-4\"\n          ></p-skeleton>\n          <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n            <p-skeleton height=\"3rem\"></p-skeleton>\n            <p-skeleton height=\"3rem\"></p-skeleton>\n            <p-skeleton height=\"6rem\" styleClass=\"md:col-span-2\"></p-skeleton>\n            <p-skeleton height=\"3rem\" styleClass=\"md:col-span-2\"></p-skeleton>\n          </div>\n        </div>\n\n        <div class=\"rounded-xl bg-white shadow-sm p-6 space-y-4\">\n          <p-skeleton\n            width=\"10rem\"\n            height=\"1.5rem\"\n            styleClass=\"mb-4\"\n          ></p-skeleton>\n          <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n            <p-skeleton height=\"3rem\"></p-skeleton>\n            <p-skeleton height=\"3rem\"></p-skeleton>\n            <p-skeleton height=\"8rem\" styleClass=\"md:col-span-2\"></p-skeleton>\n          </div>\n        </div>\n      } @else {\n        <mt-dynamic-form\n          [formConfig]=\"dynamicFormConfigMain()\"\n          [formControlName]=\"'main'\"\n        />\n        @if (configurationFormConfig()) {\n          <mt-dynamic-form\n            formControlName=\"configuration\"\n            [formConfig]=\"configurationFormConfig()!\"\n          />\n        } @else {\n          <ng-container #configurationHost></ng-container>\n          @if (!configurationComponentExists()) {\n            @switch (propertyType()) {\n              @case (\"User\") {\n                <mt-user-configuration />\n              }\n              @case (\"Percentage\") {\n                <mt-percentage-configuration />\n              }\n              @case (\"Lookup\") {\n                <mt-lookup-configuration />\n              }\n              @case (\"LookupMultiSelect\") {\n                <mt-lookup-configuration />\n              }\n              @case (\"EntityList\") {\n                <mt-entity-list-configuration />\n              }\n              @case (\"API\") {\n                <mt-api-configuration formControlName=\"configuration\" />\n              }\n              @case (\"Status\") {\n                <section #statusConfigurationSection>\n                  <mt-status-configuration\n                    [propertyId]=\"statusPropertyId()\"\n                    [levelSchemaId]=\"formulaSchemaId()\"\n                  />\n                </section>\n              }\n              <!-- @case('ViewList') { REMOVED FOR NOW\n                  <mt-view-list-configuration />\n                  } -->\n              @case (\"Attachment\") {\n                <mt-attachment-configuration />\n              }\n              <!-- @case('ReferenceProperty') { REMOVED FOR NOW\n                   } -->\n              @case (\"LookupModuleCheckList\") {\n                <mt-check-list-form-configuration />\n              }\n              <!-- @case('LookupMatrix') { REMOVED FOR NOW\n                  <mt-lookup-configuration />\n                  } -->\n              @case (\"Location\") {\n                <mt-location-configuration />\n              }\n            }\n          }\n        }\n        @if (isCalculated()) {\n          <mt-card title=\"Formula\">\n            <mt-formula-builder\n              formControlName=\"formula\"\n              [levelSchemaId]=\"formulaSchemaId()\"\n            />\n          </mt-card>\n        }\n      }\n    </div>\n  </div>\n</mt-page>\n", styles: [""], dependencies: [{ kind: "component", type: Page, selector: "mt-page", inputs: ["backButton", "backButtonIcon", "avatarIcon", "avatarStyle", "avatarShape", "title", "tabs", "activeTab", "contentClass", "contentId"], outputs: ["backButtonClick", "tabChange"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig", "forcedHiddenFieldKeys", "preserveForcedHiddenValues", "visibleSectionKeys"], outputs: ["runtimeMessagesChange"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: FormulaBuilder, selector: "mt-formula-builder", inputs: ["propertiesByPath", "levelSchemaId", "templateId", "placeholder", "hideToolbar", "hideStatusBar"], outputs: ["validationChange", "tokensChange"] }, { kind: "component", type: ApiConfiguration, selector: "mt-api-configuration" }, { kind: "component", type: CheckListFormConfiguration, selector: "mt-check-list-form-configuration" }, { kind: "component", type: EntityListConfiguration, selector: "mt-entity-list-configuration" }, { kind: "component", type: LocationConfiguration, selector: "mt-location-configuration" }, { kind: "component", type: LookupConfiguration, selector: "mt-lookup-configuration" }, { kind: "component", type: PercentageConfiguration, selector: "mt-percentage-configuration" }, { kind: "component", type: StatusConfiguration, selector: "mt-status-configuration", inputs: ["propertyId", "levelSchemaId"] }, { kind: "component", type: UserConfiguration, selector: "mt-user-configuration" }, { kind: "component", type: AttachmentConfiguration, selector: "mt-attachment-configuration" }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i2$1.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "pipe", type: i2.TranslocoPipe, name: "transloco" }] });