@flusys/ng-iam 9.1.0-rc.1 → 9.1.1

package/fesm2022/flusys-ng-iam-action-form-page.component-DJ-A1gc2.mjs

@@ -0,0 +1,685 @@
+import { a as ActionApiService, t as buildActionParentTree } from "./flusys-ng-iam-tree-utils-B1pBG4At.mjs";
+import { ActionType, LogicBuilderComponent } from "./flusys-ng-iam.mjs";
+import * as i0 from "@angular/core";
+import { Component, computed, effect, inject, signal } from "@angular/core";
+import { TranslatePipe, TranslateService } from "@flusys/ng-shared";
+import { CheckboxComponent, FButtonDirective, InputTextDirective, MessageService, SelectComponent, TreeSelectComponent, UiIconComponent } from "@flusys/ng-ui";
+import { toSignal } from "@angular/core/rxjs-interop";
+import { FormField, form, required } from "@angular/forms/signals";
+import { ActivatedRoute, Router } from "@angular/router";
+var ActionFormPageComponent = class ActionFormPageComponent {
+	route = inject(ActivatedRoute);
+	router = inject(Router);
+	actionApi = inject(ActionApiService);
+	messageService = inject(MessageService);
+	translateAdapter = inject(TranslateService, { optional: true });
+	routeParams = toSignal(this.route.paramMap);
+	initialized = false;
+	translate(key, vars) {
+		return this.translateAdapter?.translate(key, vars) ?? key;
+	}
+	isLoading = signal(false, ...ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []);
+	existingAction = signal(null, ...ngDevMode ? [{ debugName: "existingAction" }] : /* istanbul ignore next */ []);
+	isEditMode = computed(() => !!this.existingAction(), ...ngDevMode ? [{ debugName: "isEditMode" }] : /* istanbul ignore next */ []);
+	allActionsForLogic = signal([], ...ngDevMode ? [{ debugName: "allActionsForLogic" }] : /* istanbul ignore next */ []);
+	allActions = signal([], ...ngDevMode ? [{ debugName: "allActions" }] : /* istanbul ignore next */ []);
+	parentTreeNodes = computed(() => buildActionParentTree(this.allActions(), this.existingAction()?.id), ...ngDevMode ? [{ debugName: "parentTreeNodes" }] : /* istanbul ignore next */ []);
+	formModel = signal({
+		id: "",
+		name: "",
+		description: "",
+		code: "",
+		actionType: ActionType.BACKEND,
+		permissionLogic: null,
+		parentId: null,
+		serial: "",
+		isActive: true
+	}, ...ngDevMode ? [{ debugName: "formModel" }] : /* istanbul ignore next */ []);
+	actionTypes = computed(() => [
+		{
+			label: this.translate("iam.action.type.backend.label"),
+			value: ActionType.BACKEND
+		},
+		{
+			label: this.translate("iam.action.type.frontend.label"),
+			value: ActionType.FRONTEND
+		},
+		{
+			label: this.translate("iam.action.type.both.label"),
+			value: ActionType.BOTH
+		}
+	], ...ngDevMode ? [{ debugName: "actionTypes" }] : /* istanbul ignore next */ []);
+	actionForm = form(this.formModel, (f) => {
+		required(f.name, { message: this.translate("shared.validation.required", { field: this.translate("iam.action.name") }) });
+	});
+	isFormValid = computed(() => {
+		return this.formModel().name.trim().length > 0;
+	}, ...ngDevMode ? [{ debugName: "isFormValid" }] : /* istanbul ignore next */ []);
+	constructor() {
+		effect(() => {
+			const params = this.routeParams();
+			if (!params || this.initialized) return;
+			this.initialized = true;
+			this.initializeForm(params.get("id"));
+		});
+	}
+	async initializeForm(id) {
+		try {
+			const response = await this.actionApi.getAll({
+				pagination: {
+					currentPage: 0,
+					pageSize: 1e4
+				},
+				select: [
+					"id",
+					"name",
+					"code",
+					"actionType",
+					"permissionLogic",
+					"parentId"
+				]
+			});
+			if (response?.success && response.data) {
+				this.allActionsForLogic.set(response.data.map((a) => ({
+					id: a.id,
+					name: a.name ?? this.translate("shared.unnamed")
+				})));
+				this.allActions.set(response.data);
+			}
+		} catch {}
+		if (id && id !== "new") await this.loadAction(id);
+	}
+	async loadAction(id) {
+		this.isLoading.set(true);
+		try {
+			const response = await this.actionApi.findById(id, [
+				"id",
+				"name",
+				"description",
+				"code",
+				"actionType",
+				"permissionLogic",
+				"parentId",
+				"serial",
+				"isActive",
+				"readOnly"
+			]);
+			if (response?.success && response.data) {
+				const action = response.data;
+				if (action.readOnly) {
+					this.messageService.add({
+						severity: "error",
+						summary: this.translate("shared.error"),
+						detail: this.translate("iam.action.readonly.edit.forbidden")
+					});
+					this.router.navigate(["/iam/actions"]);
+					return;
+				}
+				this.existingAction.set(action);
+				this.formModel.set({
+					id: action.id ?? "",
+					name: action.name ?? "",
+					description: action.description ?? "",
+					code: action.code ?? "",
+					actionType: action.actionType ?? ActionType.BACKEND,
+					permissionLogic: action.permissionLogic ?? null,
+					parentId: action.parentId ?? null,
+					serial: action.serial?.toString() ?? "",
+					isActive: action.isActive ?? true
+				});
+			} else this.router.navigate(["/iam/actions"]);
+		} catch {
+			this.router.navigate(["/iam/actions"]);
+		} finally {
+			this.isLoading.set(false);
+		}
+	}
+	async onSubmit(event) {
+		event.preventDefault();
+		if (!this.isFormValid()) {
+			this.messageService.add({
+				severity: "error",
+				summary: this.translate("shared.validation.error"),
+				detail: this.translate("shared.fill.required.fields")
+			});
+			return;
+		}
+		this.isLoading.set(true);
+		try {
+			const formValue = this.formModel();
+			const dto = {
+				...formValue,
+				description: formValue.description || void 0,
+				code: formValue.code || void 0,
+				parentId: formValue.parentId || void 0,
+				serial: formValue.serial ? parseInt(formValue.serial, 10) : void 0,
+				permissionLogic: formValue.permissionLogic ?? void 0
+			};
+			const response = this.isEditMode() ? await this.actionApi.update(dto) : await this.actionApi.insert(dto);
+			this.messageService.add({
+				severity: "success",
+				summary: this.translate("shared.success"),
+				detail: response.messageKey ? this.translate(response.messageKey, response.messageVariables) : response.message ?? ""
+			});
+			this.router.navigate(["/iam/actions"]);
+		} catch {} finally {
+			this.isLoading.set(false);
+		}
+	}
+	onBack() {
+		this.router.navigate(["/iam/actions"]);
+	}
+	onLogicChange(logic) {
+		this.formModel.update((model) => ({
+			...model,
+			permissionLogic: logic
+		}));
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: ActionFormPageComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: ActionFormPageComponent,
+		isStandalone: true,
+		selector: "lib-action-form-page",
+		ngImport: i0,
+		template: `
+    <div class="card">
+      <h3 class="text-lg sm:text-xl font-semibold mb-4">
+        {{
+          isEditMode()
+            ? ('iam.action.edit' | translate)
+            : ('iam.action.new' | translate)
+        }}
+      </h3>
+
+      <form
+        (submit)="onSubmit($event)"
+        class="grid grid-cols-1 md:grid-cols-2 gap-4"
+      >
+        <!-- Name -->
+        <div class="flex flex-col gap-2">
+          <label for="name" class="font-medium"
+            >{{ 'iam.action.name' | translate }} *</label
+          >
+          <input
+            fInputText
+            id="name"
+            [formField]="actionForm.name"
+            [placeholder]="'iam.action.name.placeholder' | translate"
+          />
+        </div>
+
+        <!-- Code -->
+        <div class="flex flex-col gap-2">
+          <label for="code" class="font-medium">{{
+            'iam.action.code' | translate
+          }}</label>
+          <input
+            fInputText
+            id="code"
+            [formField]="actionForm.code"
+            [placeholder]="'iam.action.code.placeholder' | translate"
+          />
+        </div>
+
+        <!-- Description -->
+        <div class="flex flex-col gap-2">
+          <label for="description" class="font-medium">{{
+            'shared.description' | translate
+          }}</label>
+          <input
+            fInputText
+            id="description"
+            [formField]="actionForm.description"
+            [placeholder]="'shared.description.placeholder' | translate"
+          />
+        </div>
+
+        <!-- Action Type -->
+        <div class="flex flex-col gap-2">
+          <label for="actionType" class="font-medium"
+            >{{ 'iam.action.type' | translate }} *</label
+          >
+          <f-select
+            inputId="actionType"
+            [options]="actionTypes()"
+            optionLabel="label"
+            optionValue="value"
+            [formField]="actionForm.actionType"
+            [placeholder]="'iam.action.type' | translate"
+          />
+        </div>
+
+        <!-- Parent Action -->
+        <div class="flex flex-col gap-2">
+          <label class="font-medium">{{
+            'iam.action.parent' | translate
+          }}</label>
+          <f-treeselect
+            [options]="parentTreeNodes()"
+            [formField]="actionForm.parentId"
+            [placeholder]="'iam.action.select.parent' | translate"
+            [filter]="true"
+            [showClear]="true"
+          />
+        </div>
+
+        <!-- Order -->
+        <div class="flex flex-col gap-2">
+          <label for="serial" class="font-medium">{{
+            'shared.display.order' | translate
+          }}</label>
+          <input
+            fInputText
+            id="serial"
+            type="number"
+            [formField]="actionForm.serial"
+            [placeholder]="'shared.display.order.placeholder' | translate"
+          />
+        </div>
+
+        <!-- Is Active -->
+        <div class="flex items-end gap-2 pb-1 md:col-span-2">
+          <f-checkbox
+            [formField]="actionForm.isActive"
+            [binary]="true"
+            inputId="isActive"
+          />
+          <label for="isActive">{{ 'shared.active' | translate }}</label>
+        </div>
+
+        <!-- Permission Logic Builder -->
+        <div class="md:col-span-2">
+          <lib-logic-builder
+            [logic]="formModel().permissionLogic"
+            [actions]="allActionsForLogic()"
+            (logicChange)="onLogicChange($event)"
+          />
+        </div>
+
+        <!-- Actions -->
+        <div class="flex justify-end gap-2 md:col-span-2 pt-4">
+          <button
+            fButton
+            type="button"
+            severity="secondary"
+            [outlined]="true"
+            (click)="onBack()"
+          >
+            <span pButtonLabel>{{ 'shared.cancel' | translate }}</span>
+          </button>
+          <button
+            fButton
+            type="submit"
+            [disabled]="!isFormValid() || isLoading()"
+          >
+            @if (isLoading()) {
+              <ui-icon pButtonIcon name="spinner" [spin]="true"></ui-icon>
+            }
+            <span pButtonLabel>{{ 
+              isEditMode()
+                ? ('shared.update' | translate)
+                : ('shared.create' | translate)
+             }}</span>
+          </button>
+        </div>
+      </form>
+    </div>
+  `,
+		isInline: true,
+		dependencies: [
+			{
+				kind: "component",
+				type: CheckboxComponent,
+				selector: "f-checkbox",
+				inputs: [
+					"label",
+					"binary",
+					"disabled",
+					"readonly",
+					"inputId",
+					"invalid",
+					"indeterminate",
+					"variant",
+					"size",
+					"touched",
+					"styleClass",
+					"style",
+					"checked"
+				],
+				outputs: [
+					"onChange",
+					"onBlur",
+					"touch",
+					"checkedChange"
+				]
+			},
+			{
+				kind: "directive",
+				type: FButtonDirective,
+				selector: "[fButton]",
+				inputs: [
+					"severity",
+					"text",
+					"outlined",
+					"link",
+					"variant",
+					"rounded",
+					"raised",
+					"fluid",
+					"disabled",
+					"loading",
+					"loadingIcon",
+					"size",
+					"label",
+					"icon",
+					"iconPos",
+					"ariaLabel",
+					"plain"
+				]
+			},
+			{
+				kind: "directive",
+				type: InputTextDirective,
+				selector: "[fInputText]",
+				inputs: [
+					"invalid",
+					"touched",
+					"variant",
+					"size",
+					"fluid"
+				]
+			},
+			{
+				kind: "component",
+				type: SelectComponent,
+				selector: "f-select",
+				inputs: [
+					"options",
+					"optionLabel",
+					"optionValue",
+					"placeholder",
+					"disabled",
+					"filter",
+					"filterBy",
+					"filterMatchMode",
+					"filterLocale",
+					"filterPlaceholder",
+					"resetFilterOnHide",
+					"autofocusFilter",
+					"emptyMessage",
+					"emptyFilterMessage",
+					"showClear",
+					"loading",
+					"loadingIcon",
+					"dropdownIcon",
+					"clearIcon",
+					"inputId",
+					"invalid",
+					"touched",
+					"styleClass",
+					"style",
+					"appendTo",
+					"editable",
+					"readonly",
+					"autofocus",
+					"checkmark",
+					"group",
+					"optionGroupLabel",
+					"optionGroupChildren",
+					"virtualScroll",
+					"virtualScrollItemSize",
+					"lazy",
+					"selectedObject"
+				],
+				outputs: [
+					"onFilter",
+					"onChange",
+					"onShow",
+					"onHide",
+					"onBlur",
+					"onFocus",
+					"onClear",
+					"onLazyLoad"
+				]
+			},
+			{
+				kind: "component",
+				type: TreeSelectComponent,
+				selector: "f-treeselect",
+				inputs: [
+					"options",
+					"placeholder",
+					"inputId",
+					"disabled",
+					"filter",
+					"filterBy",
+					"filterPlaceholder",
+					"selectionMode",
+					"display",
+					"propagateSelectionDown",
+					"propagateSelectionUp",
+					"showClear",
+					"virtualScroll",
+					"virtualScrollItemSize",
+					"emptyMessage",
+					"invalid",
+					"touched",
+					"styleClass",
+					"style",
+					"appendTo"
+				]
+			},
+			{
+				kind: "component",
+				type: UiIconComponent,
+				selector: "ui-icon",
+				inputs: [
+					"name",
+					"size",
+					"spin",
+					"fill",
+					"severity"
+				]
+			},
+			{
+				kind: "directive",
+				type: FormField,
+				selector: "[formField]",
+				inputs: ["formField"],
+				exportAs: ["formField"]
+			},
+			{
+				kind: "component",
+				type: LogicBuilderComponent,
+				selector: "lib-logic-builder",
+				inputs: ["logic", "actions"],
+				outputs: ["logicChange"]
+			},
+			{
+				kind: "pipe",
+				type: TranslatePipe,
+				name: "translate"
+			}
+		]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: ActionFormPageComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "lib-action-form-page",
+			imports: [
+				CheckboxComponent,
+				FButtonDirective,
+				InputTextDirective,
+				SelectComponent,
+				TreeSelectComponent,
+				UiIconComponent,
+				FormField,
+				LogicBuilderComponent,
+				TranslatePipe
+			],
+			template: `
+    <div class="card">
+      <h3 class="text-lg sm:text-xl font-semibold mb-4">
+        {{
+          isEditMode()
+            ? ('iam.action.edit' | translate)
+            : ('iam.action.new' | translate)
+        }}
+      </h3>
+
+      <form
+        (submit)="onSubmit($event)"
+        class="grid grid-cols-1 md:grid-cols-2 gap-4"
+      >
+        <!-- Name -->
+        <div class="flex flex-col gap-2">
+          <label for="name" class="font-medium"
+            >{{ 'iam.action.name' | translate }} *</label
+          >
+          <input
+            fInputText
+            id="name"
+            [formField]="actionForm.name"
+            [placeholder]="'iam.action.name.placeholder' | translate"
+          />
+        </div>
+
+        <!-- Code -->
+        <div class="flex flex-col gap-2">
+          <label for="code" class="font-medium">{{
+            'iam.action.code' | translate
+          }}</label>
+          <input
+            fInputText
+            id="code"
+            [formField]="actionForm.code"
+            [placeholder]="'iam.action.code.placeholder' | translate"
+          />
+        </div>
+
+        <!-- Description -->
+        <div class="flex flex-col gap-2">
+          <label for="description" class="font-medium">{{
+            'shared.description' | translate
+          }}</label>
+          <input
+            fInputText
+            id="description"
+            [formField]="actionForm.description"
+            [placeholder]="'shared.description.placeholder' | translate"
+          />
+        </div>
+
+        <!-- Action Type -->
+        <div class="flex flex-col gap-2">
+          <label for="actionType" class="font-medium"
+            >{{ 'iam.action.type' | translate }} *</label
+          >
+          <f-select
+            inputId="actionType"
+            [options]="actionTypes()"
+            optionLabel="label"
+            optionValue="value"
+            [formField]="actionForm.actionType"
+            [placeholder]="'iam.action.type' | translate"
+          />
+        </div>
+
+        <!-- Parent Action -->
+        <div class="flex flex-col gap-2">
+          <label class="font-medium">{{
+            'iam.action.parent' | translate
+          }}</label>
+          <f-treeselect
+            [options]="parentTreeNodes()"
+            [formField]="actionForm.parentId"
+            [placeholder]="'iam.action.select.parent' | translate"
+            [filter]="true"
+            [showClear]="true"
+          />
+        </div>
+
+        <!-- Order -->
+        <div class="flex flex-col gap-2">
+          <label for="serial" class="font-medium">{{
+            'shared.display.order' | translate
+          }}</label>
+          <input
+            fInputText
+            id="serial"
+            type="number"
+            [formField]="actionForm.serial"
+            [placeholder]="'shared.display.order.placeholder' | translate"
+          />
+        </div>
+
+        <!-- Is Active -->
+        <div class="flex items-end gap-2 pb-1 md:col-span-2">
+          <f-checkbox
+            [formField]="actionForm.isActive"
+            [binary]="true"
+            inputId="isActive"
+          />
+          <label for="isActive">{{ 'shared.active' | translate }}</label>
+        </div>
+
+        <!-- Permission Logic Builder -->
+        <div class="md:col-span-2">
+          <lib-logic-builder
+            [logic]="formModel().permissionLogic"
+            [actions]="allActionsForLogic()"
+            (logicChange)="onLogicChange($event)"
+          />
+        </div>
+
+        <!-- Actions -->
+        <div class="flex justify-end gap-2 md:col-span-2 pt-4">
+          <button
+            fButton
+            type="button"
+            severity="secondary"
+            [outlined]="true"
+            (click)="onBack()"
+          >
+            <span pButtonLabel>{{ 'shared.cancel' | translate }}</span>
+          </button>
+          <button
+            fButton
+            type="submit"
+            [disabled]="!isFormValid() || isLoading()"
+          >
+            @if (isLoading()) {
+              <ui-icon pButtonIcon name="spinner" [spin]="true"></ui-icon>
+            }
+            <span pButtonLabel>{{ 
+              isEditMode()
+                ? ('shared.update' | translate)
+                : ('shared.create' | translate)
+             }}</span>
+          </button>
+        </div>
+      </form>
+    </div>
+  `
+		}]
+	}],
+	ctorParameters: () => []
+});
+export { ActionFormPageComponent };
+
+//# sourceMappingURL=flusys-ng-iam-action-form-page.component-DJ-A1gc2.mjs.map