@flusys/ng-auth 9.1.0 → 9.1.1

package/fesm2022/flusys-ng-auth-branch-form.component-Df_sMC2G.mjs

@@ -0,0 +1,743 @@
+import { AuthStateService, BranchApiService, CompanyApiService } from "./flusys-ng-auth.mjs";
+import * as i0 from "@angular/core";
+import { Component, computed, effect, inject, signal, untracked } from "@angular/core";
+import { ActivatedRoute, Router } from "@angular/router";
+import { TranslatePipe, TranslateService, buildBranchTreeNodes } from "@flusys/ng-shared";
+import { CardComponent, 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";
+const BRANCH_FORM_FIELDS = [
+	"id",
+	"companyId",
+	"parentId",
+	"name",
+	"slug",
+	"email",
+	"phone",
+	"address",
+	"isActive",
+	"readOnly"
+];
+var BranchFormComponent = class BranchFormComponent {
+	router = inject(Router);
+	route = inject(ActivatedRoute);
+	messageService = inject(MessageService);
+	branchService = inject(BranchApiService);
+	companyService = inject(CompanyApiService);
+	authState = inject(AuthStateService);
+	translateAdapter = inject(TranslateService, { optional: true });
+	translate(key, vars) {
+		return this.translateAdapter?.translate(key, vars) ?? key;
+	}
+	routeParams = toSignal(this.route.paramMap);
+	queryParams = toSignal(this.route.queryParamMap);
+	isLoading = signal(false, ...ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []);
+	existingBranch = signal(null, ...ngDevMode ? [{ debugName: "existingBranch" }] : /* istanbul ignore next */ []);
+	isEditMode = computed(() => !!this.existingBranch(), ...ngDevMode ? [{ debugName: "isEditMode" }] : /* istanbul ignore next */ []);
+	companies = this.companyService.data;
+	companyBranches = signal([], ...ngDevMode ? [{ debugName: "companyBranches" }] : /* istanbul ignore next */ []);
+	parentTreeNodes = computed(() => buildBranchTreeNodes(this.companyBranches(), this.existingBranch()?.id), ...ngDevMode ? [{ debugName: "parentTreeNodes" }] : /* istanbul ignore next */ []);
+	selectedCompanyId = computed(() => this.formModel().companyId, ...ngDevMode ? [{ debugName: "selectedCompanyId" }] : /* istanbul ignore next */ []);
+	formModel = signal({
+		companyId: "",
+		parentId: null,
+		name: "",
+		slug: "",
+		email: "",
+		phone: "",
+		address: "",
+		isActive: true
+	}, ...ngDevMode ? [{ debugName: "formModel" }] : /* istanbul ignore next */ []);
+	branchForm = form(this.formModel, (f) => {
+		required(f.companyId, { message: this.translate("auth.validation.company.required") });
+		required(f.name, { message: this.translate("shared.name.required") });
+		required(f.slug, { message: this.translate("administrative.branch.slug.required") });
+	});
+	isFormValid = computed(() => {
+		const model = this.formModel();
+		return model.companyId.trim().length > 0 && model.name.trim().length > 0 && model.slug.trim().length > 0;
+	}, ...ngDevMode ? [{ debugName: "isFormValid" }] : /* istanbul ignore next */ []);
+	constructor() {
+		this.companyService.fetchList("", { pagination: {
+			currentPage: 0,
+			pageSize: 100
+		} });
+		effect(() => {
+			const params = this.routeParams();
+			const query = this.queryParams();
+			if (!params) return;
+			const id = params.get("id");
+			if (id && id !== "new") this.loadBranch(id);
+			else {
+				const queryCompanyId = query?.get("companyId");
+				const currentCompanyId = this.authState.company()?.id;
+				const companyId = queryCompanyId || currentCompanyId;
+				const parentId = query?.get("parentId") || null;
+				this.formModel.update((m) => ({
+					...m,
+					companyId: companyId || m.companyId,
+					parentId
+				}));
+			}
+		});
+		effect(() => {
+			const companyId = this.selectedCompanyId();
+			untracked(() => this.loadCompanyBranches(companyId));
+		});
+	}
+	async loadCompanyBranches(companyId) {
+		this.companyBranches.set([]);
+		if (!companyId) return;
+		try {
+			const response = await this.branchService.getAll({
+				filter: { companyId },
+				pagination: {
+					currentPage: 0,
+					pageSize: 1e3
+				},
+				select: [
+					"id",
+					"name",
+					"parentId",
+					"serial"
+				]
+			});
+			if (this.selectedCompanyId() !== companyId) return;
+			this.companyBranches.set(response?.success ? response.data ?? [] : []);
+			const parentId = this.formModel().parentId;
+			if (parentId && !this.companyBranches().some((b) => b.id === parentId)) this.formModel.update((m) => ({
+				...m,
+				parentId: null
+			}));
+		} catch {}
+	}
+	async loadBranch(id) {
+		this.isLoading.set(true);
+		try {
+			const response = await this.branchService.findById(id, BRANCH_FORM_FIELDS);
+			if (response.success && response.data) {
+				this.existingBranch.set(response.data);
+				this.formModel.set(this.toFormModel(response.data));
+			}
+		} catch {
+			this.router.navigate(["/administration/branch"]);
+		} finally {
+			this.isLoading.set(false);
+		}
+	}
+	toFormModel(branch) {
+		return {
+			companyId: branch.companyId,
+			parentId: branch.parentId ?? null,
+			name: branch.name,
+			slug: branch.slug,
+			email: branch.email || "",
+			phone: branch.phone || "",
+			address: branch.address || "",
+			isActive: branch.isActive
+		};
+	}
+	generateSlug() {
+		const model = this.formModel();
+		if (!model.slug && model.name) {
+			const slug = model.name.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
+			this.formModel.update((m) => ({
+				...m,
+				slug
+			}));
+		}
+	}
+	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 {
+			if (this.isEditMode() && this.existingBranch()) await this.updateBranch();
+			else await this.createBranch();
+			this.navigateToList();
+		} catch {} finally {
+			this.isLoading.set(false);
+		}
+	}
+	async updateBranch() {
+		const model = this.formModel();
+		const updateData = {
+			id: this.existingBranch().id,
+			name: model.name,
+			slug: model.slug,
+			...this.buildOptionalFields(model)
+		};
+		const response = await this.branchService.update(updateData);
+		this.onSaveSuccess(response.messageKey ? this.translate(response.messageKey, response.messageVariables) : response.message);
+	}
+	async createBranch() {
+		const model = this.formModel();
+		const createData = {
+			companyId: model.companyId,
+			name: model.name,
+			slug: model.slug,
+			...this.buildOptionalFields(model)
+		};
+		const response = await this.branchService.insert(createData);
+		this.onSaveSuccess(response.messageKey ? this.translate(response.messageKey, response.messageVariables) : response.message ?? "");
+	}
+	buildOptionalFields(model) {
+		return {
+			parentId: model.parentId || null,
+			email: model.email || void 0,
+			phone: model.phone || void 0,
+			address: model.address || void 0,
+			isActive: model.isActive
+		};
+	}
+	onSaveSuccess(message) {
+		this.messageService.add({
+			severity: "success",
+			summary: this.translate("shared.success"),
+			detail: message
+		});
+	}
+	getTargetCompanyId() {
+		return this.existingBranch()?.companyId || this.formModel().companyId || null;
+	}
+	navigateToList() {
+		const companyId = this.getTargetCompanyId();
+		this.router.navigate(["/administration/branch"], { queryParams: companyId ? { companyId } : {} });
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: BranchFormComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: BranchFormComponent,
+		isStandalone: true,
+		selector: "lib-branch-form",
+		ngImport: i0,
+		template: `
+    <f-card>
+      <ng-template #header>
+        <div class="flex justify-between items-center p-4">
+          <h2 class="text-xl font-semibold m-0">
+            {{
+              isEditMode()
+                ? ('administrative.branch.edit' | translate)
+                : ('administrative.branch.new' | translate)
+            }}
+          </h2>
+        </div>
+      </ng-template>
+
+      <form
+        (submit)="onSubmit($event)"
+        class="grid grid-cols-1 md:grid-cols-2 gap-4"
+      >
+        <!-- Company Selection -->
+        @if (!isEditMode()) {
+          <div class="flex flex-col gap-2">
+            <label for="companyId" class="font-medium"
+              >{{ 'shared.company' | translate }} *</label
+            >
+            <f-select
+              inputId="companyId"
+              [options]="companies()"
+              optionLabel="name"
+              optionValue="id"
+              [formField]="branchForm.companyId"
+              [placeholder]="'administrative.company.select' | translate"
+            />
+          </div>
+        }
+
+        <div class="flex flex-col gap-2">
+          <label for="parentId" class="font-medium">{{
+            'administrative.branch.parent' | translate
+          }}</label>
+          <f-treeselect
+            inputId="parentId"
+            [options]="parentTreeNodes()"
+            [formField]="branchForm.parentId"
+            [placeholder]="'administrative.branch.select.parent' | translate"
+            [filterPlaceholder]="'shared.search' | translate"
+            [emptyMessage]="'administrative.branch.no.branches' | translate"
+            [filter]="true"
+            [showClear]="true"
+          />
+        </div>
+
+        <!-- Name -->
+        <div class="flex flex-col gap-2">
+          <label for="name" class="font-medium"
+            >{{ 'administrative.branch.name' | translate }} *</label
+          >
+          <input
+            fInputText
+            id="name"
+            [formField]="branchForm.name"
+            (blur)="generateSlug()"
+            [placeholder]="'administrative.branch.name.placeholder' | translate"
+          />
+        </div>
+
+        <!-- Slug -->
+        <div class="flex flex-col gap-2">
+          <label for="slug" class="font-medium"
+            >{{ 'administrative.branch.slug' | translate }} *</label
+          >
+          <input
+            fInputText
+            id="slug"
+            [formField]="branchForm.slug"
+            [placeholder]="'administrative.branch.slug.placeholder' | translate"
+          />
+        </div>
+
+        <!-- Email -->
+        <div class="flex flex-col gap-2">
+          <label for="email" class="font-medium">{{
+            'administrative.email.label' | translate
+          }}</label>
+          <input
+            fInputText
+            id="email"
+            type="email"
+            [formField]="branchForm.email"
+            [placeholder]="'administrative.email.placeholder' | translate"
+          />
+        </div>
+
+        <!-- Phone -->
+        <div class="flex flex-col gap-2">
+          <label for="phone" class="font-medium">{{
+            'administrative.phone.label' | translate
+          }}</label>
+          <input
+            fInputText
+            id="phone"
+            [formField]="branchForm.phone"
+            [placeholder]="'administrative.phone.placeholder' | translate"
+          />
+        </div>
+
+        <!-- Is Active -->
+        <div class="flex items-center pt-6">
+          <f-checkbox [formField]="branchForm.isActive" [label]="'shared.active' | translate" />
+        </div>
+
+        <!-- Address -->
+        <div class="flex flex-col gap-2 md:col-span-2">
+          <label for="address" class="font-medium">{{
+            'administrative.address.label' | translate
+          }}</label>
+          <textarea
+            id="address"
+            fInputText
+            [formField]="branchForm.address"
+            [placeholder]="'administrative.address.placeholder' | translate"
+            rows="3"
+          ></textarea>
+        </div>
+
+        <!-- Actions -->
+        <div class="flex justify-end gap-4 md:col-span-2 pt-4">
+          <button
+            fButton
+            type="button"
+            severity="secondary"
+            [outlined]="true"
+            (click)="navigateToList()"
+          >
+            <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>
+    </f-card>
+  `,
+		isInline: true,
+		dependencies: [
+			{
+				kind: "component",
+				type: CardComponent,
+				selector: "f-card",
+				inputs: [
+					"header",
+					"subheader",
+					"styleClass",
+					"style"
+				]
+			},
+			{
+				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: "pipe",
+				type: TranslatePipe,
+				name: "translate"
+			}
+		]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: BranchFormComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "lib-branch-form",
+			imports: [
+				CardComponent,
+				CheckboxComponent,
+				FButtonDirective,
+				InputTextDirective,
+				SelectComponent,
+				TreeSelectComponent,
+				UiIconComponent,
+				FormField,
+				TranslatePipe
+			],
+			template: `
+    <f-card>
+      <ng-template #header>
+        <div class="flex justify-between items-center p-4">
+          <h2 class="text-xl font-semibold m-0">
+            {{
+              isEditMode()
+                ? ('administrative.branch.edit' | translate)
+                : ('administrative.branch.new' | translate)
+            }}
+          </h2>
+        </div>
+      </ng-template>
+
+      <form
+        (submit)="onSubmit($event)"
+        class="grid grid-cols-1 md:grid-cols-2 gap-4"
+      >
+        <!-- Company Selection -->
+        @if (!isEditMode()) {
+          <div class="flex flex-col gap-2">
+            <label for="companyId" class="font-medium"
+              >{{ 'shared.company' | translate }} *</label
+            >
+            <f-select
+              inputId="companyId"
+              [options]="companies()"
+              optionLabel="name"
+              optionValue="id"
+              [formField]="branchForm.companyId"
+              [placeholder]="'administrative.company.select' | translate"
+            />
+          </div>
+        }
+
+        <div class="flex flex-col gap-2">
+          <label for="parentId" class="font-medium">{{
+            'administrative.branch.parent' | translate
+          }}</label>
+          <f-treeselect
+            inputId="parentId"
+            [options]="parentTreeNodes()"
+            [formField]="branchForm.parentId"
+            [placeholder]="'administrative.branch.select.parent' | translate"
+            [filterPlaceholder]="'shared.search' | translate"
+            [emptyMessage]="'administrative.branch.no.branches' | translate"
+            [filter]="true"
+            [showClear]="true"
+          />
+        </div>
+
+        <!-- Name -->
+        <div class="flex flex-col gap-2">
+          <label for="name" class="font-medium"
+            >{{ 'administrative.branch.name' | translate }} *</label
+          >
+          <input
+            fInputText
+            id="name"
+            [formField]="branchForm.name"
+            (blur)="generateSlug()"
+            [placeholder]="'administrative.branch.name.placeholder' | translate"
+          />
+        </div>
+
+        <!-- Slug -->
+        <div class="flex flex-col gap-2">
+          <label for="slug" class="font-medium"
+            >{{ 'administrative.branch.slug' | translate }} *</label
+          >
+          <input
+            fInputText
+            id="slug"
+            [formField]="branchForm.slug"
+            [placeholder]="'administrative.branch.slug.placeholder' | translate"
+          />
+        </div>
+
+        <!-- Email -->
+        <div class="flex flex-col gap-2">
+          <label for="email" class="font-medium">{{
+            'administrative.email.label' | translate
+          }}</label>
+          <input
+            fInputText
+            id="email"
+            type="email"
+            [formField]="branchForm.email"
+            [placeholder]="'administrative.email.placeholder' | translate"
+          />
+        </div>
+
+        <!-- Phone -->
+        <div class="flex flex-col gap-2">
+          <label for="phone" class="font-medium">{{
+            'administrative.phone.label' | translate
+          }}</label>
+          <input
+            fInputText
+            id="phone"
+            [formField]="branchForm.phone"
+            [placeholder]="'administrative.phone.placeholder' | translate"
+          />
+        </div>
+
+        <!-- Is Active -->
+        <div class="flex items-center pt-6">
+          <f-checkbox [formField]="branchForm.isActive" [label]="'shared.active' | translate" />
+        </div>
+
+        <!-- Address -->
+        <div class="flex flex-col gap-2 md:col-span-2">
+          <label for="address" class="font-medium">{{
+            'administrative.address.label' | translate
+          }}</label>
+          <textarea
+            id="address"
+            fInputText
+            [formField]="branchForm.address"
+            [placeholder]="'administrative.address.placeholder' | translate"
+            rows="3"
+          ></textarea>
+        </div>
+
+        <!-- Actions -->
+        <div class="flex justify-end gap-4 md:col-span-2 pt-4">
+          <button
+            fButton
+            type="button"
+            severity="secondary"
+            [outlined]="true"
+            (click)="navigateToList()"
+          >
+            <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>
+    </f-card>
+  `
+		}]
+	}],
+	ctorParameters: () => []
+});
+export { BranchFormComponent };
+
+//# sourceMappingURL=flusys-ng-auth-branch-form.component-Df_sMC2G.mjs.map