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

package/fesm2022/flusys-ng-auth-branch-list.component-CWat6QWN.mjs

@@ -0,0 +1,775 @@
+import { AuthStateService, BranchApiService, BranchPermittedUsersDialogComponent, 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 { BRANCH_PERMISSIONS, HasPermissionDirective, TranslatePipe, TranslateService, USER_PERMISSIONS, buildBranchHierarchy, collectBranchDescendantIds, filterBranchHierarchy } from "@flusys/ng-shared";
+import { CardComponent, ConfirmationService, FButtonDirective, IconFieldComponent, InputIconComponent, InputTextDirective, MessageService, SelectComponent, TagComponent, TooltipDirective, TreeTableComponent, TreeTableTogglerComponent, UiIconComponent } from "@flusys/ng-ui";
+import { toSignal } from "@angular/core/rxjs-interop";
+import * as i1 from "@angular/forms";
+import { FormsModule } from "@angular/forms";
+function matchesSearch(branch, term) {
+	return [
+		branch.name,
+		branch.slug,
+		branch.email,
+		branch.phone
+	].some((v) => v?.toLowerCase().includes(term));
+}
+function buildBranchTree(branches, search = "") {
+	const term = search.trim().toLowerCase();
+	const hierarchy = buildBranchHierarchy(branches);
+	const items = term ? filterBranchHierarchy(hierarchy, (branch) => matchesSearch(branch, term)) : hierarchy;
+	const convert = (list) => list.map(({ data, children }) => {
+		const childNodes = convert(children);
+		return {
+			key: data.id,
+			data,
+			children: childNodes,
+			leaf: !childNodes.length,
+			expanded: !!term && childNodes.length > 0
+		};
+	});
+	return convert(items);
+}
+function countBranchDescendants(branches, branchId) {
+	return collectBranchDescendantIds(branches, branchId).length;
+}
+const BRANCH_FETCH_LIMIT = 1e3;
+var BranchListComponent = class BranchListComponent {
+	BRANCH_PERMISSIONS = BRANCH_PERMISSIONS;
+	USER_PERMISSIONS = USER_PERMISSIONS;
+	router = inject(Router);
+	route = inject(ActivatedRoute);
+	messageService = inject(MessageService);
+	confirmationService = inject(ConfirmationService);
+	branchService = inject(BranchApiService);
+	companyService = inject(CompanyApiService);
+	authState = inject(AuthStateService);
+	translateAdapter = inject(TranslateService, { optional: true });
+	translate(key, vars) {
+		return this.translateAdapter?.translate(key, vars) ?? key;
+	}
+	queryParamMap = toSignal(this.route.queryParamMap);
+	initialized = false;
+	selectedCompanyId = signal(null, ...ngDevMode ? [{ debugName: "selectedCompanyId" }] : /* istanbul ignore next */ []);
+	companies = this.companyService.data;
+	isLoading = this.branchService.isLoading;
+	permittedUsersDialogVisible = signal(false, ...ngDevMode ? [{ debugName: "permittedUsersDialogVisible" }] : /* istanbul ignore next */ []);
+	selectedBranch = signal(null, ...ngDevMode ? [{ debugName: "selectedBranch" }] : /* istanbul ignore next */ []);
+	_searchTerm = signal("", ...ngDevMode ? [{ debugName: "_searchTerm" }] : /* istanbul ignore next */ []);
+	searchTerm = this._searchTerm.asReadonly();
+	treeNodes = computed(() => buildBranchTree(this.branchService.data(), this._searchTerm()), ...ngDevMode ? [{ debugName: "treeNodes" }] : /* istanbul ignore next */ []);
+	constructor() {
+		effect(() => {
+			const params = this.queryParamMap();
+			if (this.initialized) return;
+			this.initialized = true;
+			untracked(() => {
+				this.companyService.fetchList("", { pagination: {
+					currentPage: 0,
+					pageSize: 100
+				} });
+				const queryCompanyId = params?.get("companyId") || null;
+				const currentCompanyId = this.authState.company()?.id;
+				const companyId = queryCompanyId || currentCompanyId || null;
+				this.selectedCompanyId.set(companyId);
+				if (companyId) this.loadBranches();
+			});
+		});
+	}
+	loadBranches() {
+		const companyId = this.selectedCompanyId();
+		if (!companyId) return;
+		this.branchService.fetchList("", {
+			filter: { companyId },
+			pagination: {
+				currentPage: 0,
+				pageSize: BRANCH_FETCH_LIMIT
+			}
+		});
+	}
+	onSearchChange(value) {
+		this._searchTerm.set(value);
+	}
+	onCreate() {
+		this.router.navigate(["/administration/branch/new"], { queryParams: { companyId: this.selectedCompanyId() } });
+	}
+	onAddChild(branch) {
+		this.router.navigate(["/administration/branch/new"], { queryParams: {
+			companyId: this.selectedCompanyId(),
+			parentId: branch.id
+		} });
+	}
+	onEdit(branch) {
+		this.router.navigate(["/administration/branch", branch.id]);
+	}
+	onViewUsers(branch) {
+		this.selectedBranch.set(branch);
+		this.permittedUsersDialogVisible.set(true);
+	}
+	onDelete(branch) {
+		const descendantCount = countBranchDescendants(this.branchService.data(), branch.id);
+		this.confirmationService.confirm({
+			message: descendantCount ? this.translate("administrative.branch.confirm.delete.with.children", {
+				name: branch.name,
+				count: descendantCount
+			}) : this.translate("shared.confirm.delete.item", { name: branch.name }),
+			header: this.translate("administrative.branch.delete.title"),
+			icon: "exclamation-triangle",
+			acceptButtonStyleClass: "p-button-danger",
+			accept: async () => {
+				try {
+					const response = await this.branchService.delete({
+						id: branch.id,
+						type: "permanent"
+					});
+					this.messageService.add({
+						severity: "success",
+						summary: this.translate("shared.success"),
+						detail: response?.messageKey ? this.translate(response.messageKey, response.messageVariables) : response?.message
+					});
+					this.branchService.reload();
+				} catch {}
+			}
+		});
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: BranchListComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: BranchListComponent,
+		isStandalone: true,
+		selector: "lib-branch-list",
+		ngImport: i0,
+		template: `
+    <f-card>
+      <ng-template #header>
+        <div
+          class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3 p-4"
+        >
+          <div
+            class="flex flex-col sm:flex-row items-start sm:items-center gap-3 sm:gap-4 w-full sm:w-auto"
+          >
+            <h2 class="text-xl font-semibold m-0">
+              {{ 'administrative.branch.title' | translate }}
+            </h2>
+            @if (companies().length > 1) {
+              <f-select
+                [options]="companies()"
+                [ngModel]="selectedCompanyId()"
+                (ngModelChange)="
+                  selectedCompanyId.set($event); loadBranches()
+                "
+                optionLabel="name"
+                optionValue="id"
+                [placeholder]="'administrative.company.select' | translate"
+                styleClass="w-full sm:w-64"
+              />
+            }
+          </div>
+          <div class="flex items-center gap-3 w-full sm:w-auto">
+            <f-iconfield class="w-full sm:w-64">
+              <f-inputicon icon="search" />
+              <input
+                fInputText
+                type="text"
+                [ngModel]="searchTerm()"
+                (ngModelChange)="onSearchChange($event)"
+                [placeholder]="'shared.search' | translate"
+              />
+            </f-iconfield>
+            <button
+              fButton
+              *hasPermission="BRANCH_PERMISSIONS.CREATE"
+              [disabled]="!selectedCompanyId()"
+              (click)="onCreate()"
+            >
+              <ui-icon pButtonIcon name="plus"></ui-icon>
+              <span pButtonLabel>{{
+                'administrative.branch.add' | translate
+              }}</span>
+            </button>
+          </div>
+        </div>
+      </ng-template>
+
+      <div class="overflow-x-auto">
+        <f-treetable
+          [value]="treeNodes()"
+          [loading]="isLoading()"
+          dataKey="id"
+          [tableStyle]="{ 'min-width': '50rem' }"
+        >
+          <ng-template #header>
+            <tr>
+              <th>{{ 'administrative.branch.name' | translate }}</th>
+              <th>{{ 'administrative.branch.slug' | translate }}</th>
+              <th>{{ 'administrative.email.label' | translate }}</th>
+              <th>{{ 'administrative.phone.label' | translate }}</th>
+              <th>{{ 'shared.status' | translate }}</th>
+              <th class="w-[160px]">{{ 'shared.actions' | translate }}</th>
+            </tr>
+          </ng-template>
+          <ng-template #body let-rowNode let-branch="rowData">
+            <tr>
+              <td>
+                <f-treetabletoggler [rowNode]="rowNode" />
+                {{ branch.name }}
+              </td>
+              <td>{{ branch.slug }}</td>
+              <td>{{ branch.email || '-' }}</td>
+              <td>{{ branch.phone || '-' }}</td>
+              <td>
+                <f-tag
+                  [value]="
+                    branch.isActive
+                      ? ('shared.active' | translate)
+                      : ('shared.inactive' | translate)
+                  "
+                  [severity]="branch.isActive ? 'success' : 'danger'"
+                />
+              </td>
+              <td>
+                <div class="flex gap-2">
+                  <button
+                    fButton
+                    *hasPermission="BRANCH_PERMISSIONS.CREATE"
+                    [rounded]="true"
+                    [text]="true"
+                    severity="success"
+                    [fTooltip]="'administrative.branch.add.child' | translate"
+                    (click)="onAddChild(branch)"
+                  >
+                    <ui-icon pButtonIcon name="git-branch-plus"></ui-icon>
+                  </button>
+                  <button
+                    fButton
+                    *hasPermission="BRANCH_PERMISSIONS.UPDATE"
+                    [rounded]="true"
+                    [text]="true"
+                    severity="info"
+                    [fTooltip]="'shared.edit' | translate"
+                    (click)="onEdit(branch)"
+                  >
+                    <ui-icon pButtonIcon name="pencil"></ui-icon>
+                  </button>
+                  <button
+                    fButton
+                    *hasPermission="USER_PERMISSIONS.READ"
+                    [rounded]="true"
+                    [text]="true"
+                    severity="secondary"
+                    [fTooltip]="'administrative.permission.view.users' | translate"
+                    (click)="onViewUsers(branch)"
+                  >
+                    <ui-icon pButtonIcon name="users"></ui-icon>
+                  </button>
+                  @if (!branch.readOnly) {
+                    <button
+                      fButton
+                      *hasPermission="BRANCH_PERMISSIONS.DELETE"
+                      [rounded]="true"
+                      [text]="true"
+                      severity="danger"
+                      [fTooltip]="'shared.delete' | translate"
+                      (click)="onDelete(branch)"
+                    >
+                      <ui-icon pButtonIcon name="trash"></ui-icon>
+                    </button>
+                  }
+                </div>
+              </td>
+            </tr>
+          </ng-template>
+          <ng-template #emptymessage>
+            <tr>
+              <td colspan="6" class="text-center py-8">
+                @if (!selectedCompanyId()) {
+                  {{ 'administrative.branch.select.company.first' | translate }}
+                } @else {
+                  {{ 'administrative.branch.no.branches' | translate }}
+                }
+              </td>
+            </tr>
+          </ng-template>
+        </f-treetable>
+      </div>
+    </f-card>
+
+    <lib-branch-permitted-users-dialog
+      [visible]="permittedUsersDialogVisible()"
+      [branch]="selectedBranch()"
+      (closed)="permittedUsersDialogVisible.set(false)"
+    />
+  `,
+		isInline: true,
+		dependencies: [
+			{
+				kind: "ngmodule",
+				type: FormsModule
+			},
+			{
+				kind: "directive",
+				type: i1.DefaultValueAccessor,
+				selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]"
+			},
+			{
+				kind: "directive",
+				type: i1.NgControlStatus,
+				selector: "[formControlName],[ngModel],[formControl]"
+			},
+			{
+				kind: "directive",
+				type: i1.NgModel,
+				selector: "[ngModel]:not([formControlName]):not([formControl])",
+				inputs: [
+					"name",
+					"disabled",
+					"ngModel",
+					"ngModelOptions"
+				],
+				outputs: ["ngModelChange"],
+				exportAs: ["ngModel"]
+			},
+			{
+				kind: "component",
+				type: CardComponent,
+				selector: "f-card",
+				inputs: [
+					"header",
+					"subheader",
+					"styleClass",
+					"style"
+				]
+			},
+			{
+				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: "component",
+				type: IconFieldComponent,
+				selector: "f-iconfield",
+				inputs: ["iconPosition", "styleClass"]
+			},
+			{
+				kind: "component",
+				type: InputIconComponent,
+				selector: "f-inputicon",
+				inputs: [
+					"icon",
+					"position",
+					"styleClass",
+					"style"
+				]
+			},
+			{
+				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: TagComponent,
+				selector: "f-tag",
+				inputs: [
+					"value",
+					"severity",
+					"icon",
+					"rounded",
+					"color",
+					"styleClass",
+					"style"
+				]
+			},
+			{
+				kind: "directive",
+				type: TooltipDirective,
+				selector: "[fTooltip]",
+				inputs: [
+					"fTooltip",
+					"tooltipPosition",
+					"positionStyle",
+					"tooltipStyleClass",
+					"disabled",
+					"tooltipEvent",
+					"showDelay",
+					"hideDelay",
+					"life",
+					"autoHide",
+					"positionTop",
+					"positionLeft",
+					"escape"
+				]
+			},
+			{
+				kind: "component",
+				type: TreeTableComponent,
+				selector: "f-treetable",
+				inputs: [
+					"value",
+					"loading",
+					"dataKey",
+					"styleClass",
+					"tableStyle",
+					"scrollable",
+					"scrollHeight",
+					"resizableColumns",
+					"lazy",
+					"totalRecords",
+					"paginator",
+					"first",
+					"rows",
+					"rowsPerPageOptions",
+					"showCurrentPageReport",
+					"currentPageReportTemplate",
+					"globalFilterFields",
+					"filterDelay",
+					"selectionMode",
+					"sortMode",
+					"virtualScroll",
+					"virtualScrollItemSize",
+					"sortField",
+					"sortOrder",
+					"multiSortMeta",
+					"filters",
+					"selection",
+					"contextMenuSelection"
+				],
+				outputs: [
+					"sortFieldChange",
+					"sortOrderChange",
+					"multiSortMetaChange",
+					"filtersChange",
+					"selectionChange",
+					"contextMenuSelectionChange",
+					"onLazyLoad",
+					"onSort",
+					"onFilter",
+					"onNodeExpand",
+					"onNodeCollapse",
+					"onNodeSelect",
+					"onNodeUnselect",
+					"onRowContextMenu"
+				]
+			},
+			{
+				kind: "component",
+				type: TreeTableTogglerComponent,
+				selector: "f-treetabletoggler",
+				inputs: ["rowNode"]
+			},
+			{
+				kind: "component",
+				type: UiIconComponent,
+				selector: "ui-icon",
+				inputs: [
+					"name",
+					"size",
+					"spin",
+					"fill",
+					"severity"
+				]
+			},
+			{
+				kind: "directive",
+				type: HasPermissionDirective,
+				selector: "[hasPermission]",
+				inputs: ["hasPermission"]
+			},
+			{
+				kind: "component",
+				type: BranchPermittedUsersDialogComponent,
+				selector: "lib-branch-permitted-users-dialog",
+				inputs: ["visible", "branch"],
+				outputs: ["closed"]
+			},
+			{
+				kind: "pipe",
+				type: TranslatePipe,
+				name: "translate"
+			}
+		]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: BranchListComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "lib-branch-list",
+			imports: [
+				FormsModule,
+				CardComponent,
+				FButtonDirective,
+				IconFieldComponent,
+				InputIconComponent,
+				InputTextDirective,
+				SelectComponent,
+				TagComponent,
+				TooltipDirective,
+				TreeTableComponent,
+				TreeTableTogglerComponent,
+				UiIconComponent,
+				HasPermissionDirective,
+				BranchPermittedUsersDialogComponent,
+				TranslatePipe
+			],
+			template: `
+    <f-card>
+      <ng-template #header>
+        <div
+          class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3 p-4"
+        >
+          <div
+            class="flex flex-col sm:flex-row items-start sm:items-center gap-3 sm:gap-4 w-full sm:w-auto"
+          >
+            <h2 class="text-xl font-semibold m-0">
+              {{ 'administrative.branch.title' | translate }}
+            </h2>
+            @if (companies().length > 1) {
+              <f-select
+                [options]="companies()"
+                [ngModel]="selectedCompanyId()"
+                (ngModelChange)="
+                  selectedCompanyId.set($event); loadBranches()
+                "
+                optionLabel="name"
+                optionValue="id"
+                [placeholder]="'administrative.company.select' | translate"
+                styleClass="w-full sm:w-64"
+              />
+            }
+          </div>
+          <div class="flex items-center gap-3 w-full sm:w-auto">
+            <f-iconfield class="w-full sm:w-64">
+              <f-inputicon icon="search" />
+              <input
+                fInputText
+                type="text"
+                [ngModel]="searchTerm()"
+                (ngModelChange)="onSearchChange($event)"
+                [placeholder]="'shared.search' | translate"
+              />
+            </f-iconfield>
+            <button
+              fButton
+              *hasPermission="BRANCH_PERMISSIONS.CREATE"
+              [disabled]="!selectedCompanyId()"
+              (click)="onCreate()"
+            >
+              <ui-icon pButtonIcon name="plus"></ui-icon>
+              <span pButtonLabel>{{
+                'administrative.branch.add' | translate
+              }}</span>
+            </button>
+          </div>
+        </div>
+      </ng-template>
+
+      <div class="overflow-x-auto">
+        <f-treetable
+          [value]="treeNodes()"
+          [loading]="isLoading()"
+          dataKey="id"
+          [tableStyle]="{ 'min-width': '50rem' }"
+        >
+          <ng-template #header>
+            <tr>
+              <th>{{ 'administrative.branch.name' | translate }}</th>
+              <th>{{ 'administrative.branch.slug' | translate }}</th>
+              <th>{{ 'administrative.email.label' | translate }}</th>
+              <th>{{ 'administrative.phone.label' | translate }}</th>
+              <th>{{ 'shared.status' | translate }}</th>
+              <th class="w-[160px]">{{ 'shared.actions' | translate }}</th>
+            </tr>
+          </ng-template>
+          <ng-template #body let-rowNode let-branch="rowData">
+            <tr>
+              <td>
+                <f-treetabletoggler [rowNode]="rowNode" />
+                {{ branch.name }}
+              </td>
+              <td>{{ branch.slug }}</td>
+              <td>{{ branch.email || '-' }}</td>
+              <td>{{ branch.phone || '-' }}</td>
+              <td>
+                <f-tag
+                  [value]="
+                    branch.isActive
+                      ? ('shared.active' | translate)
+                      : ('shared.inactive' | translate)
+                  "
+                  [severity]="branch.isActive ? 'success' : 'danger'"
+                />
+              </td>
+              <td>
+                <div class="flex gap-2">
+                  <button
+                    fButton
+                    *hasPermission="BRANCH_PERMISSIONS.CREATE"
+                    [rounded]="true"
+                    [text]="true"
+                    severity="success"
+                    [fTooltip]="'administrative.branch.add.child' | translate"
+                    (click)="onAddChild(branch)"
+                  >
+                    <ui-icon pButtonIcon name="git-branch-plus"></ui-icon>
+                  </button>
+                  <button
+                    fButton
+                    *hasPermission="BRANCH_PERMISSIONS.UPDATE"
+                    [rounded]="true"
+                    [text]="true"
+                    severity="info"
+                    [fTooltip]="'shared.edit' | translate"
+                    (click)="onEdit(branch)"
+                  >
+                    <ui-icon pButtonIcon name="pencil"></ui-icon>
+                  </button>
+                  <button
+                    fButton
+                    *hasPermission="USER_PERMISSIONS.READ"
+                    [rounded]="true"
+                    [text]="true"
+                    severity="secondary"
+                    [fTooltip]="'administrative.permission.view.users' | translate"
+                    (click)="onViewUsers(branch)"
+                  >
+                    <ui-icon pButtonIcon name="users"></ui-icon>
+                  </button>
+                  @if (!branch.readOnly) {
+                    <button
+                      fButton
+                      *hasPermission="BRANCH_PERMISSIONS.DELETE"
+                      [rounded]="true"
+                      [text]="true"
+                      severity="danger"
+                      [fTooltip]="'shared.delete' | translate"
+                      (click)="onDelete(branch)"
+                    >
+                      <ui-icon pButtonIcon name="trash"></ui-icon>
+                    </button>
+                  }
+                </div>
+              </td>
+            </tr>
+          </ng-template>
+          <ng-template #emptymessage>
+            <tr>
+              <td colspan="6" class="text-center py-8">
+                @if (!selectedCompanyId()) {
+                  {{ 'administrative.branch.select.company.first' | translate }}
+                } @else {
+                  {{ 'administrative.branch.no.branches' | translate }}
+                }
+              </td>
+            </tr>
+          </ng-template>
+        </f-treetable>
+      </div>
+    </f-card>
+
+    <lib-branch-permitted-users-dialog
+      [visible]="permittedUsersDialogVisible()"
+      [branch]="selectedBranch()"
+      (closed)="permittedUsersDialogVisible.set(false)"
+    />
+  `
+		}]
+	}],
+	ctorParameters: () => []
+});
+export { BranchListComponent };
+
+//# sourceMappingURL=flusys-ng-auth-branch-list.component-CWat6QWN.mjs.map