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

package/fesm2022/flusys-ng-iam-role-list-page.component-BCO_gQ8k.mjs

@@ -0,0 +1,685 @@
+import { t as RoleApiService } from "./flusys-ng-iam-role-api.service-OwPgmSFc.mjs";
+import { RolePermittedUsersDialogComponent } from "./flusys-ng-iam.mjs";
+import * as i0 from "@angular/core";
+import { Component, computed, effect, inject, signal, untracked } from "@angular/core";
+import { HasPermissionDirective, ROLE_PERMISSIONS, TranslatePipe, TranslateService, USER_ROLE_PERMISSIONS } from "@flusys/ng-shared";
+import { APP_CONFIG, DEFAULT_APP_NAME, getPermissionMode, isCompanyFeatureEnabled } from "@flusys/ng-core";
+import { ConfirmationService, FButtonDirective, IconFieldComponent, InputIconComponent, InputTextDirective, MessageService, TableComponent, TagComponent, TooltipDirective, UiIconComponent } from "@flusys/ng-ui";
+import * as i1 from "@angular/forms";
+import { FormsModule } from "@angular/forms";
+import { LAYOUT_AUTH_STATE } from "@flusys/ng-layout";
+import { Router } from "@angular/router";
+var RoleListPageComponent = class RoleListPageComponent {
+	ROLE_PERMISSIONS = ROLE_PERMISSIONS;
+	USER_ROLE_PERMISSIONS = USER_ROLE_PERMISSIONS;
+	router = inject(Router);
+	appConfig = inject(APP_CONFIG);
+	companyContext = inject(LAYOUT_AUTH_STATE);
+	roleApi = inject(RoleApiService);
+	messageService = inject(MessageService);
+	confirmationService = inject(ConfirmationService);
+	translateAdapter = inject(TranslateService, { optional: true });
+	translate(key, vars) {
+		return this.translateAdapter?.translate(key, vars) ?? key;
+	}
+	roles = signal([], ...ngDevMode ? [{ debugName: "roles" }] : /* istanbul ignore next */ []);
+	isLoading = signal(false, ...ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []);
+	total = signal(0, ...ngDevMode ? [{ debugName: "total" }] : /* istanbul ignore next */ []);
+	pageSize = signal(10, ...ngDevMode ? [{ debugName: "pageSize" }] : /* istanbul ignore next */ []);
+	first = signal(0, ...ngDevMode ? [{ debugName: "first" }] : /* istanbul ignore next */ []);
+	_searchTerm = signal("", ...ngDevMode ? [{ debugName: "_searchTerm" }] : /* istanbul ignore next */ []);
+	searchTerm = this._searchTerm.asReadonly();
+	showCompanyInfo = computed(() => this.appConfig.enableCompanyFeature, ...ngDevMode ? [{ debugName: "showCompanyInfo" }] : /* istanbul ignore next */ []);
+	showRoleUsers = computed(() => {
+		const permissionMode = getPermissionMode(this.appConfig);
+		return permissionMode === "rbac" || permissionMode === "full";
+	}, ...ngDevMode ? [{ debugName: "showRoleUsers" }] : /* istanbul ignore next */ []);
+	currentCompanyName = computed(() => this.companyContext.currentCompanyInfo()?.name ?? DEFAULT_APP_NAME, ...ngDevMode ? [{ debugName: "currentCompanyName" }] : /* istanbul ignore next */ []);
+	permittedUsersDialogVisible = signal(false, ...ngDevMode ? [{ debugName: "permittedUsersDialogVisible" }] : /* istanbul ignore next */ []);
+	selectedRole = signal(null, ...ngDevMode ? [{ debugName: "selectedRole" }] : /* istanbul ignore next */ []);
+	previousCompanyId = void 0;
+	constructor() {
+		effect(() => {
+			const currentCompanyId = this.companyContext.currentCompanyInfo()?.id ?? null;
+			if (this.previousCompanyId === void 0) {
+				this.previousCompanyId = currentCompanyId;
+				return;
+			}
+			if (this.previousCompanyId === currentCompanyId) return;
+			this.previousCompanyId = currentCompanyId;
+			untracked(() => {
+				this.first.set(0);
+				this.loadRoles();
+			});
+		});
+	}
+	async loadRoles() {
+		this.isLoading.set(true);
+		try {
+			const enableCompanyFeature = isCompanyFeatureEnabled(this.appConfig);
+			const companyId = enableCompanyFeature ? this.companyContext.currentCompanyInfo()?.id || void 0 : void 0;
+			const selectFields = [
+				"id",
+				"name",
+				"description",
+				"isActive",
+				"readOnly",
+				"serial",
+				"createdAt",
+				"deletedAt"
+			];
+			if (enableCompanyFeature) selectFields.push("companyId");
+			const response = await this.roleApi.getAll({
+				filter: companyId ? { companyId } : void 0,
+				pagination: {
+					currentPage: Math.floor(this.first() / this.pageSize()),
+					pageSize: this.pageSize()
+				},
+				select: selectFields,
+				sort: { id: "ASC" }
+			}, this._searchTerm());
+			this.roles.set(response?.data ?? []);
+			this.total.set(response?.meta?.total ?? 0);
+		} catch {} finally {
+			this.isLoading.set(false);
+		}
+	}
+	onCreate() {
+		this.router.navigate(["/iam/roles/new"]);
+	}
+	onEdit(role) {
+		this.router.navigate(["/iam/roles", role.id]);
+	}
+	onViewUsers(role) {
+		this.selectedRole.set(role);
+		this.permittedUsersDialogVisible.set(true);
+	}
+	onDelete(role) {
+		this.confirmationService.confirm({
+			message: this.translate("shared.confirm.delete.item", { name: role.name }),
+			header: this.translate("iam.role.delete.title"),
+			icon: "exclamation-triangle",
+			accept: async () => {
+				try {
+					const response = await this.roleApi.delete({
+						id: role.id,
+						type: "permanent"
+					});
+					this.roles.update((list) => list.filter((r) => r.id !== role.id));
+					this.total.update((t) => Math.max(0, t - 1));
+					this.messageService.add({
+						severity: "success",
+						summary: this.translate("shared.success"),
+						detail: response?.messageKey ? this.translate(response.messageKey, response.messageVariables) : response?.message
+					});
+				} catch {}
+			}
+		});
+	}
+	onLazyLoad(event) {
+		this.first.set(event.first ?? 0);
+		this.pageSize.set(event.rows ?? 10);
+		this.loadRoles();
+	}
+	onSearchChange(value) {
+		this._searchTerm.set(value);
+		this.first.set(0);
+		this.loadRoles();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: RoleListPageComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: RoleListPageComponent,
+		isStandalone: true,
+		selector: "lib-role-list-page",
+		ngImport: i0,
+		template: `
+    <div class="card">
+      <div
+        class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3 mb-4"
+      >
+        <div>
+          <h3 class="text-lg sm:text-xl font-semibold">
+            {{ 'iam.role.title' | translate }}
+          </h3>
+          @if (showCompanyInfo()) {
+            <p class="text-sm text-muted-color mt-1">
+              {{ 'iam.company.title' | translate }}: {{ currentCompanyName() }}
+            </p>
+          }
+        </div>
+        <div class="flex flex-wrap items-center gap-2 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"
+              class="w-full"
+            />
+          </f-iconfield>
+          <button
+            fButton
+            *hasPermission="ROLE_PERMISSIONS.CREATE"
+            (click)="onCreate()"
+            class="w-full sm:w-auto"
+          >
+            <ui-icon pButtonIcon name="plus"></ui-icon>
+            <span pButtonLabel>{{ 'iam.role.new' | translate }}</span>
+          </button>
+        </div>
+      </div>
+
+      <div class="overflow-x-auto -mx-4 sm:mx-0">
+        <f-table
+          [value]="roles()"
+          [loading]="isLoading()"
+          [paginator]="total() > 0"
+          [rows]="pageSize()"
+          [first]="first()"
+          [totalRecords]="total()"
+          [lazy]="true"
+          (onLazyLoad)="onLazyLoad($event)"
+          [rowsPerPageOptions]="[10, 25, 50]"
+          [scrollable]="true"
+          [tableStyle]="{ 'min-width': '40rem' }"
+        >
+          <ng-template #header>
+            <tr>
+              <th>{{ 'iam.role.name' | translate }}</th>
+              <th class="hidden md:table-cell">
+                {{ 'shared.description' | translate }}
+              </th>
+              <th>{{ 'shared.active' | translate }}</th>
+              <th class="hidden sm:table-cell">
+                {{ 'shared.read.only' | translate }}
+              </th>
+              <th class="w-[120px]">{{ 'shared.actions' | translate }}</th>
+            </tr>
+          </ng-template>
+          <ng-template #body let-role>
+            <tr>
+              <td>{{ role.name }}</td>
+              <td class="hidden md:table-cell">
+                {{ role.description ?? '-' }}
+              </td>
+              <td>
+                <f-tag
+                  [value]="
+                    role.isActive
+                      ? ('shared.active' | translate)
+                      : ('shared.inactive' | translate)
+                  "
+                  [severity]="role.isActive ? 'success' : 'secondary'"
+                />
+              </td>
+              <td class="hidden sm:table-cell">
+                <f-tag
+                  [value]="
+                    role.readOnly
+                      ? ('shared.yes' | translate)
+                      : ('shared.no' | translate)
+                  "
+                  [severity]="role.readOnly ? 'warn' : 'secondary'"
+                />
+              </td>
+              <td>
+                <div class="flex gap-1">
+                  <button
+                    fButton
+                    *hasPermission="ROLE_PERMISSIONS.UPDATE"
+                    [text]="true"
+                    severity="secondary"
+                    size="small"
+                    [disabled]="role.readOnly"
+                    [fTooltip]="'shared.edit' | translate"
+                    (click)="onEdit(role)"
+                  >
+                    <ui-icon pButtonIcon name="pencil"></ui-icon>
+                  </button>
+                  @if (showRoleUsers()) {
+                    <button
+                      fButton
+                      *hasPermission="USER_ROLE_PERMISSIONS.READ"
+                      [text]="true"
+                      severity="secondary"
+                      size="small"
+                      [fTooltip]="'iam.permission.view.users' | translate"
+                      (click)="onViewUsers(role)"
+                    >
+                      <ui-icon pButtonIcon name="users"></ui-icon>
+                    </button>
+                  }
+                  <button
+                    fButton
+                    *hasPermission="ROLE_PERMISSIONS.DELETE"
+                    [text]="true"
+                    severity="danger"
+                    size="small"
+                    [fTooltip]="'shared.delete' | translate"
+                    [disabled]="role.readOnly"
+                    (click)="onDelete(role)"
+                  >
+                    <ui-icon pButtonIcon name="trash"></ui-icon>
+                  </button>
+                </div>
+              </td>
+            </tr>
+          </ng-template>
+          <ng-template #emptymessage>
+            <tr>
+              <td colspan="5" class="text-center py-4 text-muted-color">
+                {{ 'iam.role.no.roles' | translate }}
+              </td>
+            </tr>
+          </ng-template>
+        </f-table>
+      </div>
+    </div>
+
+    <flusys-role-permitted-users-dialog
+      [visible]="permittedUsersDialogVisible()"
+      [role]="selectedRole()"
+      (closed)="permittedUsersDialogVisible.set(false)"
+    />
+  `,
+		isInline: true,
+		dependencies: [
+			{
+				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: "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: 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: TableComponent,
+				selector: "f-table",
+				inputs: [
+					"value",
+					"lazy",
+					"loading",
+					"rows",
+					"totalRecords",
+					"rowHover",
+					"dataKey",
+					"scrollable",
+					"scrollHeight",
+					"paginator",
+					"first",
+					"rowsPerPageOptions",
+					"showCurrentPageReport",
+					"currentPageReportTemplate",
+					"tableStyle",
+					"styleClass",
+					"globalFilterFields",
+					"filterDelay",
+					"responsiveLayout",
+					"selectionMode",
+					"sortMode",
+					"rowExpandMode",
+					"resizableColumns",
+					"rowStyleClass",
+					"virtualScroll",
+					"virtualScrollItemSize",
+					"sortField",
+					"sortOrder",
+					"multiSortMeta",
+					"filters",
+					"selection",
+					"expandedRowKeys",
+					"contextMenuSelection"
+				],
+				outputs: [
+					"sortFieldChange",
+					"sortOrderChange",
+					"multiSortMetaChange",
+					"filtersChange",
+					"selectionChange",
+					"expandedRowKeysChange",
+					"contextMenuSelectionChange",
+					"onLazyLoad",
+					"onSort",
+					"onFilter",
+					"onRowSelect",
+					"onRowUnselect",
+					"onSelectAllChange",
+					"onRowExpand",
+					"onRowCollapse",
+					"onColResize",
+					"onRowContextMenu"
+				]
+			},
+			{
+				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: UiIconComponent,
+				selector: "ui-icon",
+				inputs: [
+					"name",
+					"size",
+					"spin",
+					"fill",
+					"severity"
+				]
+			},
+			{
+				kind: "directive",
+				type: HasPermissionDirective,
+				selector: "[hasPermission]",
+				inputs: ["hasPermission"]
+			},
+			{
+				kind: "component",
+				type: RolePermittedUsersDialogComponent,
+				selector: "flusys-role-permitted-users-dialog",
+				inputs: ["visible", "role"],
+				outputs: ["closed"]
+			},
+			{
+				kind: "pipe",
+				type: TranslatePipe,
+				name: "translate"
+			}
+		]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: RoleListPageComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "lib-role-list-page",
+			imports: [
+				FButtonDirective,
+				FormsModule,
+				IconFieldComponent,
+				InputIconComponent,
+				InputTextDirective,
+				TableComponent,
+				TagComponent,
+				TooltipDirective,
+				UiIconComponent,
+				HasPermissionDirective,
+				RolePermittedUsersDialogComponent,
+				TranslatePipe
+			],
+			template: `
+    <div class="card">
+      <div
+        class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3 mb-4"
+      >
+        <div>
+          <h3 class="text-lg sm:text-xl font-semibold">
+            {{ 'iam.role.title' | translate }}
+          </h3>
+          @if (showCompanyInfo()) {
+            <p class="text-sm text-muted-color mt-1">
+              {{ 'iam.company.title' | translate }}: {{ currentCompanyName() }}
+            </p>
+          }
+        </div>
+        <div class="flex flex-wrap items-center gap-2 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"
+              class="w-full"
+            />
+          </f-iconfield>
+          <button
+            fButton
+            *hasPermission="ROLE_PERMISSIONS.CREATE"
+            (click)="onCreate()"
+            class="w-full sm:w-auto"
+          >
+            <ui-icon pButtonIcon name="plus"></ui-icon>
+            <span pButtonLabel>{{ 'iam.role.new' | translate }}</span>
+          </button>
+        </div>
+      </div>
+
+      <div class="overflow-x-auto -mx-4 sm:mx-0">
+        <f-table
+          [value]="roles()"
+          [loading]="isLoading()"
+          [paginator]="total() > 0"
+          [rows]="pageSize()"
+          [first]="first()"
+          [totalRecords]="total()"
+          [lazy]="true"
+          (onLazyLoad)="onLazyLoad($event)"
+          [rowsPerPageOptions]="[10, 25, 50]"
+          [scrollable]="true"
+          [tableStyle]="{ 'min-width': '40rem' }"
+        >
+          <ng-template #header>
+            <tr>
+              <th>{{ 'iam.role.name' | translate }}</th>
+              <th class="hidden md:table-cell">
+                {{ 'shared.description' | translate }}
+              </th>
+              <th>{{ 'shared.active' | translate }}</th>
+              <th class="hidden sm:table-cell">
+                {{ 'shared.read.only' | translate }}
+              </th>
+              <th class="w-[120px]">{{ 'shared.actions' | translate }}</th>
+            </tr>
+          </ng-template>
+          <ng-template #body let-role>
+            <tr>
+              <td>{{ role.name }}</td>
+              <td class="hidden md:table-cell">
+                {{ role.description ?? '-' }}
+              </td>
+              <td>
+                <f-tag
+                  [value]="
+                    role.isActive
+                      ? ('shared.active' | translate)
+                      : ('shared.inactive' | translate)
+                  "
+                  [severity]="role.isActive ? 'success' : 'secondary'"
+                />
+              </td>
+              <td class="hidden sm:table-cell">
+                <f-tag
+                  [value]="
+                    role.readOnly
+                      ? ('shared.yes' | translate)
+                      : ('shared.no' | translate)
+                  "
+                  [severity]="role.readOnly ? 'warn' : 'secondary'"
+                />
+              </td>
+              <td>
+                <div class="flex gap-1">
+                  <button
+                    fButton
+                    *hasPermission="ROLE_PERMISSIONS.UPDATE"
+                    [text]="true"
+                    severity="secondary"
+                    size="small"
+                    [disabled]="role.readOnly"
+                    [fTooltip]="'shared.edit' | translate"
+                    (click)="onEdit(role)"
+                  >
+                    <ui-icon pButtonIcon name="pencil"></ui-icon>
+                  </button>
+                  @if (showRoleUsers()) {
+                    <button
+                      fButton
+                      *hasPermission="USER_ROLE_PERMISSIONS.READ"
+                      [text]="true"
+                      severity="secondary"
+                      size="small"
+                      [fTooltip]="'iam.permission.view.users' | translate"
+                      (click)="onViewUsers(role)"
+                    >
+                      <ui-icon pButtonIcon name="users"></ui-icon>
+                    </button>
+                  }
+                  <button
+                    fButton
+                    *hasPermission="ROLE_PERMISSIONS.DELETE"
+                    [text]="true"
+                    severity="danger"
+                    size="small"
+                    [fTooltip]="'shared.delete' | translate"
+                    [disabled]="role.readOnly"
+                    (click)="onDelete(role)"
+                  >
+                    <ui-icon pButtonIcon name="trash"></ui-icon>
+                  </button>
+                </div>
+              </td>
+            </tr>
+          </ng-template>
+          <ng-template #emptymessage>
+            <tr>
+              <td colspan="5" class="text-center py-4 text-muted-color">
+                {{ 'iam.role.no.roles' | translate }}
+              </td>
+            </tr>
+          </ng-template>
+        </f-table>
+      </div>
+    </div>
+
+    <flusys-role-permitted-users-dialog
+      [visible]="permittedUsersDialogVisible()"
+      [role]="selectedRole()"
+      (closed)="permittedUsersDialogVisible.set(false)"
+    />
+  `
+		}]
+	}],
+	ctorParameters: () => []
+});
+export { RoleListPageComponent };
+
+//# sourceMappingURL=flusys-ng-iam-role-list-page.component-BCO_gQ8k.mjs.map