@masterteam/users-groups 0.0.1

package/fesm2022/masterteam-users-groups.mjs

@@ -0,0 +1,1221 @@
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, Injectable, computed, signal, Component, input, effect, viewChild, linkedSignal } from '@angular/core';
+import { Breadcrumb } from '@masterteam/components/breadcrumb';
+import { CrudStateBase, REQUEST_CONTEXT, handleApiRequest, UserSearchFieldConfig, ValidatorConfig, UploadFileFieldConfig, TextareaFieldConfig } from '@masterteam/components';
+import { Action, Selector, State, Store, select } from '@ngxs/store';
+import { HttpClient, HttpContext } from '@angular/common/http';
+import { ActivatedRoute, Router, RouterOutlet } from '@angular/router';
+import { TranslocoService, TranslocoDirective, TranslocoPipe } from '@jsverse/transloco';
+import { Page } from '@masterteam/components/page';
+import { Button } from '@masterteam/components/button';
+import { Table } from '@masterteam/components/table';
+import * as i1 from 'primeng/skeleton';
+import { SkeletonModule } from 'primeng/skeleton';
+import { Avatar } from '@masterteam/components/avatar';
+import { ModalService } from '@masterteam/components/modal';
+import * as i2 from '@angular/forms';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { DynamicForm } from '@masterteam/forms/dynamic-form';
+import { ModalRef, DialogService } from '@masterteam/components/dialog';
+import { Tabs } from '@masterteam/components/tabs';
+import { finalize } from 'rxjs';
+
+class GetUsers {
+    static type = '[UsersGroups] Get Users';
+}
+class GetUser {
+    userName;
+    static type = '[UsersGroups] Get One';
+    constructor(userName) {
+        this.userName = userName;
+    }
+}
+class CreateUser {
+    payload;
+    static type = '[UsersGroups] Create User';
+    constructor(payload) {
+        this.payload = payload;
+    }
+}
+class AddUserToGroup {
+    payload;
+    static type = '[UsersGroups] Add User To Group';
+    constructor(payload) {
+        this.payload = payload;
+    }
+}
+class UpdateUser {
+    userId;
+    changes;
+    static type = '[UsersGroups] Update User';
+    constructor(userId, changes) {
+        this.userId = userId;
+        this.changes = changes;
+    }
+}
+class DeleteUser {
+    userName;
+    static type = '[UsersGroups] Delete User';
+    constructor(userName) {
+        this.userName = userName;
+    }
+}
+class DeleteUserFromGroup {
+    payload;
+    static type = '[UsersGroups] Delete User From Group';
+    constructor(payload) {
+        this.payload = payload;
+    }
+}
+class GetGroups {
+    static type = '[UsersGroups] Get Groups';
+}
+class ClearSelectedGroup {
+    static type = '[UsersGroups] Clear Selected Group';
+}
+class GetGroup {
+    groupId;
+    static type = '[UsersGroups] Get One Group';
+    constructor(groupId) {
+        this.groupId = groupId;
+    }
+}
+class CreateGroup {
+    payload;
+    static type = '[UsersGroups] Create Group';
+    constructor(payload) {
+        this.payload = payload;
+    }
+}
+class UpdateGroup {
+    groupId;
+    changes;
+    static type = '[UsersGroups] Update Group';
+    constructor(groupId, changes) {
+        this.groupId = groupId;
+        this.changes = changes;
+    }
+}
+class DeleteGroup {
+    groupId;
+    static type = '[UsersGroups] Delete Group';
+    constructor(groupId) {
+        this.groupId = groupId;
+    }
+}
+
+var UsersGroupsActionKey;
+(function (UsersGroupsActionKey) {
+    UsersGroupsActionKey["GetUsers"] = "getUsers";
+    UsersGroupsActionKey["GetUser"] = "getUser";
+    UsersGroupsActionKey["CreateUser"] = "createUser";
+    UsersGroupsActionKey["UpdateUser"] = "updateUser";
+    UsersGroupsActionKey["DeleteUser"] = "deleteUser";
+    UsersGroupsActionKey["AddUserToGroup"] = "addUserToGroup";
+    UsersGroupsActionKey["DeleteUserFromGroup"] = "deleteUserFromGroup";
+    UsersGroupsActionKey["GetGroups"] = "getGroups";
+    UsersGroupsActionKey["GetGroup"] = "getGroup";
+    UsersGroupsActionKey["CreateGroup"] = "createGroup";
+    UsersGroupsActionKey["UpdateGroup"] = "updateGroup";
+    UsersGroupsActionKey["DeleteGroup"] = "deleteGroup";
+})(UsersGroupsActionKey || (UsersGroupsActionKey = {}));
+
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+let UsersGroupsState = class UsersGroupsState extends CrudStateBase {
+    http = inject(HttpClient);
+    context = new HttpContext().set(REQUEST_CONTEXT, {
+        useBaseUrl: true,
+    });
+    // ============================================================================
+    // Data Selectors - Individual selectors for fine-grained reactivity
+    // ============================================================================
+    static getUsers(state) {
+        return state.users;
+    }
+    static getSelectedUser(state) {
+        return state.selectedUser;
+    }
+    static getGroups(state) {
+        return state.groups;
+    }
+    static getSelectedGroup(state) {
+        return state.selectedGroup;
+    }
+    // ============================================================================
+    // Loading/Error Slice Selectors - REQUIRED for optimal performance
+    // ============================================================================
+    static getLoadingActive(state) {
+        return state.loadingActive;
+    }
+    static getErrors(state) {
+        return state.errors;
+    }
+    // ============================================================================
+    // CRUD Actions
+    // ============================================================================
+    getUsers(ctx) {
+        const req$ = this.http.get('Identity/users', {
+            context: this.context,
+        });
+        return handleApiRequest({
+            ctx,
+            key: UsersGroupsActionKey.GetUsers,
+            request$: req$,
+            onSuccess: (response) => ({
+                users: response.data ?? [],
+            }),
+        });
+    }
+    getUser(ctx, { userName }) {
+        const req$ = this.http.get(`Identity/users/${userName}?editMode=true`, { context: this.context });
+        return handleApiRequest({
+            ctx,
+            key: UsersGroupsActionKey.GetUser,
+            request$: req$,
+            onSuccess: (response) => ({
+                selectedUser: response.data?.[0] ?? null,
+            }),
+        });
+    }
+    createUser(ctx, { payload }) {
+        const req$ = this.http.post('Identity/user', payload, {
+            context: this.context,
+        });
+        return handleApiRequest({
+            ctx,
+            key: UsersGroupsActionKey.CreateUser,
+            request$: req$,
+            onSuccess: (response, state) => {
+                const newUser = response.data;
+                if (!newUser)
+                    return {};
+                return {
+                    users: this.adapter.addOne(state.users, newUser),
+                    selectedUser: newUser,
+                };
+            },
+            onError: (error) => {
+                throw error;
+            },
+        });
+    }
+    addUserToGroup(ctx, { payload }) {
+        const req$ = this.http.post(`identity/groups/${payload.groupId}/members`, { member: payload?.userId });
+        return handleApiRequest({
+            ctx,
+            key: UsersGroupsActionKey.AddUserToGroup,
+            request$: req$,
+            onSuccess: (response, state) => {
+                const newMembers = response.data?.members ?? [];
+                const existingMembers = state.selectedGroup?.members ?? [];
+                return {
+                    selectedGroup: {
+                        ...(state.selectedGroup ?? {}),
+                        members: [...existingMembers, ...newMembers],
+                    },
+                };
+            },
+        });
+    }
+    updateUser(ctx, { changes, userId }) {
+        const req$ = this.http.put(`Identity/user/${userId}`, changes, {
+            context: this.context,
+        });
+        return handleApiRequest({
+            ctx,
+            key: UsersGroupsActionKey.UpdateUser,
+            request$: req$,
+            onSuccess: (response, state) => {
+                const updatedUser = response.data;
+                if (!updatedUser)
+                    return {};
+                return {
+                    users: this.adapter.upsertOne(state.users, updatedUser, 'userId'),
+                    selectedUser: updatedUser,
+                };
+            },
+            onError: (error) => {
+                throw error;
+            },
+        });
+    }
+    deleteUser(ctx, { userName }) {
+        const req$ = this.http.delete(`Identity/user/${userName}`, {
+            context: this.context,
+        });
+        return this.delete(ctx, {
+            key: UsersGroupsActionKey.DeleteUser,
+            request$: req$,
+            stateProperty: (state) => state.users,
+            uniqueKey: 'userName',
+            id: userName,
+        });
+    }
+    deleteUserFromGroup(ctx, { payload }) {
+        const req$ = this.http.delete(`identity/groups/${payload.groupId}/members/${payload.userName}`);
+        return handleApiRequest({
+            ctx,
+            key: UsersGroupsActionKey.DeleteUserFromGroup,
+            request$: req$,
+            onSuccess: (_response, state) => {
+                const filteredMembers = state.selectedGroup?.members?.filter((e) => e.user.userName !== payload.userName) ?? [];
+                return {
+                    selectedGroup: {
+                        ...(state.selectedGroup ?? {}),
+                        members: filteredMembers,
+                    },
+                };
+            },
+        });
+    }
+    getGroups(ctx) {
+        const req$ = this.http.get('Identity/groups');
+        return handleApiRequest({
+            ctx,
+            key: UsersGroupsActionKey.GetGroups,
+            request$: req$,
+            onSuccess: (response) => ({
+                groups: response.data ?? [],
+            }),
+        });
+    }
+    getGroup(ctx, { groupId }) {
+        const req$ = this.http.get(`Identity/groups/${groupId}?Mode=edit`);
+        return handleApiRequest({
+            ctx,
+            key: UsersGroupsActionKey.GetGroup,
+            request$: req$,
+            onSuccess: (response) => ({
+                selectedGroup: response.data ?? null,
+            }),
+        });
+    }
+    createGroup(ctx, { payload }) {
+        const req$ = this.http.post('Identity/groups', payload);
+        return handleApiRequest({
+            ctx,
+            key: UsersGroupsActionKey.CreateGroup,
+            request$: req$,
+            onSuccess: (response, state) => {
+                const newGroup = response.data?.result ?? null;
+                if (!newGroup)
+                    return {};
+                return {
+                    groups: this.adapter.addOne(state.groups, newGroup),
+                    selectedGroup: newGroup,
+                };
+            },
+        });
+    }
+    updateGroup(ctx, { changes, groupId }) {
+        const req$ = this.http.put(`Identity/groups/${groupId}`, changes);
+        return handleApiRequest({
+            ctx,
+            key: UsersGroupsActionKey.UpdateGroup,
+            request$: req$,
+            onSuccess: (response, state) => {
+                const updatedGroup = {
+                    ...response.data,
+                    members: state.selectedGroup?.members,
+                    membersCount: state.selectedGroup?.members?.length ?? 0,
+                };
+                return {
+                    groups: this.adapter.upsertOne(state.groups, updatedGroup, 'id'),
+                    selectedGroup: updatedGroup,
+                };
+            },
+        });
+    }
+    deleteGroup(ctx, { groupId }) {
+        const req$ = this.http.delete(`Identity/groups/${groupId}`);
+        return this.delete(ctx, {
+            key: UsersGroupsActionKey.DeleteGroup,
+            request$: req$,
+            stateProperty: (state) => state.groups,
+            uniqueKey: 'id',
+            id: groupId,
+        });
+    }
+    // ============================================================================
+    // Simple State Updates (No HTTP)
+    // ============================================================================
+    clearSelectedGroup(ctx) {
+        ctx.patchState({ selectedGroup: null });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: UsersGroupsState, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: UsersGroupsState });
+};
+__decorate([
+    Action(GetUsers)
+], UsersGroupsState.prototype, "getUsers", null);
+__decorate([
+    Action(GetUser)
+], UsersGroupsState.prototype, "getUser", null);
+__decorate([
+    Action(CreateUser)
+], UsersGroupsState.prototype, "createUser", null);
+__decorate([
+    Action(AddUserToGroup)
+], UsersGroupsState.prototype, "addUserToGroup", null);
+__decorate([
+    Action(UpdateUser)
+], UsersGroupsState.prototype, "updateUser", null);
+__decorate([
+    Action(DeleteUser)
+], UsersGroupsState.prototype, "deleteUser", null);
+__decorate([
+    Action(DeleteUserFromGroup)
+], UsersGroupsState.prototype, "deleteUserFromGroup", null);
+__decorate([
+    Action(GetGroups)
+], UsersGroupsState.prototype, "getGroups", null);
+__decorate([
+    Action(GetGroup)
+], UsersGroupsState.prototype, "getGroup", null);
+__decorate([
+    Action(CreateGroup)
+], UsersGroupsState.prototype, "createGroup", null);
+__decorate([
+    Action(UpdateGroup)
+], UsersGroupsState.prototype, "updateGroup", null);
+__decorate([
+    Action(DeleteGroup)
+], UsersGroupsState.prototype, "deleteGroup", null);
+__decorate([
+    Action(ClearSelectedGroup)
+], UsersGroupsState.prototype, "clearSelectedGroup", null);
+__decorate([
+    Selector()
+], UsersGroupsState, "getUsers", null);
+__decorate([
+    Selector()
+], UsersGroupsState, "getSelectedUser", null);
+__decorate([
+    Selector()
+], UsersGroupsState, "getGroups", null);
+__decorate([
+    Selector()
+], UsersGroupsState, "getSelectedGroup", null);
+__decorate([
+    Selector()
+], UsersGroupsState, "getLoadingActive", null);
+__decorate([
+    Selector()
+], UsersGroupsState, "getErrors", null);
+UsersGroupsState = __decorate([
+    State({
+        name: 'usersGroups',
+        defaults: {
+            users: [],
+            selectedUser: null,
+            groups: [],
+            selectedGroup: null,
+            loadingActive: [],
+            errors: {},
+        },
+    })
+], UsersGroupsState);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: UsersGroupsState, decorators: [{
+            type: Injectable
+        }], propDecorators: { getUsers: [], getUser: [], createUser: [], addUserToGroup: [], updateUser: [], deleteUser: [], deleteUserFromGroup: [], getGroups: [], getGroup: [], createGroup: [], updateGroup: [], deleteGroup: [], clearSelectedGroup: [] } });
+
+class UsersGroupsFacade {
+    store = inject(Store);
+    // ============================================================================
+    // Data Selectors - Memoized by NGXS (fine-grained reactivity)
+    // ============================================================================
+    users = select(UsersGroupsState.getUsers);
+    selectedUser = select(UsersGroupsState.getSelectedUser);
+    groups = select(UsersGroupsState.getGroups);
+    selectedGroup = select(UsersGroupsState.getSelectedGroup);
+    // ============================================================================
+    // Loading/Error Slices - Memoized by NGXS
+    // ============================================================================
+    loadingActive = select(UsersGroupsState.getLoadingActive);
+    // ============================================================================
+    // Loading Signals - Computed from slice (minimal reactivity)
+    // ============================================================================
+    isLoadingUsers = computed(() => this.loadingActive().includes(UsersGroupsActionKey.GetUsers), ...(ngDevMode ? [{ debugName: "isLoadingUsers" }] : []));
+    isLoadingUser = computed(() => this.loadingActive().includes(UsersGroupsActionKey.GetUser), ...(ngDevMode ? [{ debugName: "isLoadingUser" }] : []));
+    isSavingUser = computed(() => this.loadingActive().includes(UsersGroupsActionKey.CreateUser) ||
+        this.loadingActive().includes(UsersGroupsActionKey.UpdateUser), ...(ngDevMode ? [{ debugName: "isSavingUser" }] : []));
+    isDeletingUser = computed(() => this.loadingActive().includes(UsersGroupsActionKey.DeleteUser), ...(ngDevMode ? [{ debugName: "isDeletingUser" }] : []));
+    isLoadingGroups = computed(() => this.loadingActive().includes(UsersGroupsActionKey.GetGroups), ...(ngDevMode ? [{ debugName: "isLoadingGroups" }] : []));
+    isLoadingGroup = computed(() => this.loadingActive().includes(UsersGroupsActionKey.GetGroup), ...(ngDevMode ? [{ debugName: "isLoadingGroup" }] : []));
+    isSavingGroup = computed(() => this.loadingActive().includes(UsersGroupsActionKey.CreateGroup) ||
+        this.loadingActive().includes(UsersGroupsActionKey.UpdateGroup), ...(ngDevMode ? [{ debugName: "isSavingGroup" }] : []));
+    isDeletingGroup = computed(() => this.loadingActive().includes(UsersGroupsActionKey.DeleteGroup), ...(ngDevMode ? [{ debugName: "isDeletingGroup" }] : []));
+    isAddingUserToGroup = computed(() => this.loadingActive().includes(UsersGroupsActionKey.AddUserToGroup), ...(ngDevMode ? [{ debugName: "isAddingUserToGroup" }] : []));
+    isDeletingUserFromGroup = computed(() => this.loadingActive().includes(UsersGroupsActionKey.DeleteUserFromGroup), ...(ngDevMode ? [{ debugName: "isDeletingUserFromGroup" }] : []));
+    // ============================================================================
+    // Action Dispatchers
+    // ============================================================================
+    getUsers() {
+        return this.store.dispatch(new GetUsers());
+    }
+    getUser(id) {
+        return this.store.dispatch(new GetUser(id));
+    }
+    createUser(payload) {
+        return this.store.dispatch(new CreateUser(payload));
+    }
+    addUserToGroup(userId, groupId) {
+        return this.store.dispatch(new AddUserToGroup({ userId, groupId }));
+    }
+    deleteUserFromGroup(payload) {
+        return this.store.dispatch(new DeleteUserFromGroup(payload));
+    }
+    updateUser(id, changes) {
+        return this.store.dispatch(new UpdateUser(id, changes));
+    }
+    deleteUser(userName) {
+        return this.store.dispatch(new DeleteUser(userName));
+    }
+    getGroups() {
+        return this.store.dispatch(new GetGroups());
+    }
+    getGroup(id) {
+        return this.store.dispatch(new GetGroup(id));
+    }
+    createGroup(payload) {
+        return this.store.dispatch(new CreateGroup(payload));
+    }
+    updateGroup(id, changes) {
+        return this.store.dispatch(new UpdateGroup(id, changes));
+    }
+    deleteGroup(groupId) {
+        return this.store.dispatch(new DeleteGroup(groupId));
+    }
+    clearSelectedGroup() {
+        this.store.dispatch(new ClearSelectedGroup());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: UsersGroupsFacade, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: UsersGroupsFacade, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: UsersGroupsFacade, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class UsersGroups {
+    facade = inject(UsersGroupsFacade);
+    route = inject(ActivatedRoute);
+    router = inject(Router);
+    translocoService = inject(TranslocoService);
+    selectedTab = signal('users', ...(ngDevMode ? [{ debugName: "selectedTab" }] : []));
+    tabsList = [
+        {
+            label: this.translocoService.translate('users-groups.users'),
+            value: 'users',
+        },
+        {
+            label: this.translocoService.translate('users-groups.groups'),
+            value: 'groups',
+        },
+    ];
+    breadcrumbItems = [
+        {
+            label: '',
+            icon: 'general.home-line',
+            routerLink: '/control-panel/workspaces',
+        },
+        {
+            label: this.translocoService.translate('product-settings.product-settings'),
+            routerLink: '/control-panel/product-settings',
+        },
+        { label: this.translocoService.translate('users-groups.users-groups') },
+    ];
+    ngOnInit() {
+        const selectedTab = this.route.snapshot.firstChild?.data['componentType'];
+        this.selectedTab.set(selectedTab || 'users');
+        this.facade.getUsers();
+    }
+    goBack() {
+        this.router.navigate(['control-panel/product-settings']);
+    }
+    onTabChange(event) {
+        this.selectedTab.set(event);
+        if (event == 'users') {
+            this.router.navigate(['users'], { relativeTo: this.route });
+        }
+        else if (event == 'groups') {
+            this.router.navigate(['groups'], { relativeTo: this.route });
+        }
+    }
+    getUsers() {
+        this.facade.getUsers();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: UsersGroups, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: UsersGroups, isStandalone: true, selector: "mt-users-groups", ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'users-groups'\">\r\n  <mt-page\r\n    [title]=\"t('users-groups')\"\r\n    [avatarIcon]=\"'user.user-circle'\"\r\n    [avatarStyle]=\"{\r\n      '--p-avatar-background': 'var(--p-sky-100)',\r\n      '--p-avatar-color': 'var(--p-sky-700)',\r\n    }\"\r\n    [tabs]=\"tabsList\"\r\n    [activeTab]=\"selectedTab()\"\r\n    (tabChange)=\"onTabChange($event)\"\r\n    (backButtonClick)=\"goBack()\"\r\n    backButton\r\n  >\r\n    <div class=\"flex justify-between items-end\">\r\n      <div>\r\n        <h3 class=\"font-bold text-lg\">{{ t(\"users-groups\") }}</h3>\r\n        <mt-breadcrumb\r\n          [items]=\"breadcrumbItems\"\r\n          [styleClass]=\"'flex justify-start mx-1'\"\r\n        ></mt-breadcrumb>\r\n      </div>\r\n      @if (selectedTab() === \"users\") {\r\n        <mt-button\r\n          [icon]=\"'arrow.refresh-cw-02'\"\r\n          [label]=\"\r\n            translocoService.translate('users-groups.sync-users-information')\r\n          \"\r\n          [severity]=\"'primary'\"\r\n          [variant]=\"'outlined'\"\r\n          [size]=\"'small'\"\r\n          (click)=\"getUsers()\"\r\n          class=\"mx-4\"\r\n        >\r\n        </mt-button>\r\n      }\r\n    </div>\r\n    <router-outlet />\r\n  </mt-page>\r\n</ng-container>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Page, selector: "mt-page", inputs: ["backButton", "backButtonIcon", "avatarIcon", "avatarStyle", "avatarShape", "title", "tabs", "activeTab", "contentClass", "contentId"], outputs: ["backButtonClick", "tabChange"] }, { kind: "component", type: Breadcrumb, selector: "mt-breadcrumb", inputs: ["items", "styleClass"], outputs: ["onItemClick"] }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { 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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: UsersGroups, decorators: [{
+            type: Component,
+            args: [{ selector: 'mt-users-groups', standalone: true, imports: [
+                        CommonModule,
+                        Page,
+                        Breadcrumb,
+                        RouterOutlet,
+                        TranslocoDirective,
+                        Button,
+                    ], template: "<ng-container *transloco=\"let t; prefix: 'users-groups'\">\r\n  <mt-page\r\n    [title]=\"t('users-groups')\"\r\n    [avatarIcon]=\"'user.user-circle'\"\r\n    [avatarStyle]=\"{\r\n      '--p-avatar-background': 'var(--p-sky-100)',\r\n      '--p-avatar-color': 'var(--p-sky-700)',\r\n    }\"\r\n    [tabs]=\"tabsList\"\r\n    [activeTab]=\"selectedTab()\"\r\n    (tabChange)=\"onTabChange($event)\"\r\n    (backButtonClick)=\"goBack()\"\r\n    backButton\r\n  >\r\n    <div class=\"flex justify-between items-end\">\r\n      <div>\r\n        <h3 class=\"font-bold text-lg\">{{ t(\"users-groups\") }}</h3>\r\n        <mt-breadcrumb\r\n          [items]=\"breadcrumbItems\"\r\n          [styleClass]=\"'flex justify-start mx-1'\"\r\n        ></mt-breadcrumb>\r\n      </div>\r\n      @if (selectedTab() === \"users\") {\r\n        <mt-button\r\n          [icon]=\"'arrow.refresh-cw-02'\"\r\n          [label]=\"\r\n            translocoService.translate('users-groups.sync-users-information')\r\n          \"\r\n          [severity]=\"'primary'\"\r\n          [variant]=\"'outlined'\"\r\n          [size]=\"'small'\"\r\n          (click)=\"getUsers()\"\r\n          class=\"mx-4\"\r\n        >\r\n        </mt-button>\r\n      }\r\n    </div>\r\n    <router-outlet />\r\n  </mt-page>\r\n</ng-container>\r\n" }]
+        }] });
+
+class UserForm {
+    modal = inject(ModalService);
+    ref = inject(ModalRef);
+    userForEdit = input(null, ...(ngDevMode ? [{ debugName: "userForEdit" }] : []));
+    selectedTab = signal('internal', ...(ngDevMode ? [{ debugName: "selectedTab" }] : []));
+    translocoService = inject(TranslocoService);
+    tabsList = [
+        {
+            label: this.translocoService.translate('users-groups.internal'),
+            value: 'internal',
+        },
+        {
+            label: this.translocoService.translate('users-groups.external'),
+            value: 'external',
+        },
+    ];
+    facade = inject(UsersGroupsFacade);
+    selectedUser = this.facade.selectedUser;
+    internalUserFormControl = new FormControl();
+    externalUserFormControl = new FormControl();
+    getUserFormLoading = this.facade.isLoadingUser;
+    createUpdateUserLoading = this.facade.isSavingUser;
+    context = new HttpContext().set(REQUEST_CONTEXT, {
+        useBaseUrl: true,
+    });
+    internalUserFormConfig = signal({
+        sections: [
+            {
+                key: 'internalUserFormConfig',
+                type: 'header',
+                order: 1,
+                fields: [
+                    new UserSearchFieldConfig({
+                        key: 'userField',
+                        label: this.translocoService.translate('users-groups.user-name'),
+                        apiUrl: 'Identity/adUsers',
+                        context: this.context,
+                        validators: [ValidatorConfig.required()],
+                        order: 1,
+                    }),
+                ],
+            },
+        ],
+    }, ...(ngDevMode ? [{ debugName: "internalUserFormConfig" }] : []));
+    fieldColSpan = computed(() => (this.userForEdit()?.userName ? 12 : 6), ...(ngDevMode ? [{ debugName: "fieldColSpan" }] : []));
+    externalUserFormConfig = computed(() => ({
+        sections: [
+            {
+                key: 'externalUserFormConfig',
+                type: 'header',
+                order: 1,
+                fields: [
+                    new UploadFileFieldConfig({
+                        key: 'image',
+                        label: 'Avatar',
+                        shape: 'circle',
+                        endPoint: 'avatar',
+                        context: this.context,
+                        colSpan: 12,
+                        order: 1,
+                    }),
+                    {
+                        key: 'displayName',
+                        label: this.translocoService.translate('users-groups.display-name'),
+                        placeholder: this.translocoService.translate('users-groups.display-name'),
+                        validators: [ValidatorConfig.required()],
+                        colSpan: this.fieldColSpan(),
+                        order: 2,
+                    },
+                    {
+                        key: 'email',
+                        label: this.translocoService.translate('users-groups.email'),
+                        placeholder: this.translocoService.translate('users-groups.email'),
+                        inputType: 'email',
+                        required: true,
+                        validators: [
+                            ValidatorConfig.required('Email is required'),
+                            ValidatorConfig.email('Please enter a valid email address'),
+                        ],
+                        colSpan: this.fieldColSpan(),
+                        order: 4,
+                    },
+                    {
+                        key: 'mobile',
+                        label: this.translocoService.translate('users-groups.mobile'),
+                        placeholder: this.translocoService.translate('users-groups.mobile'),
+                        validators: [ValidatorConfig.required()],
+                        colSpan: this.fieldColSpan(),
+                        order: 5,
+                    },
+                ],
+            },
+        ],
+    }), ...(ngDevMode ? [{ debugName: "externalUserFormConfig" }] : []));
+    constructor() {
+        effect(() => {
+            const userName = this.userForEdit()?.userName;
+            if (this.selectedUser() && userName) {
+                this.selectedTab.set('external');
+                const data = {
+                    ...this.selectedUser(),
+                    image: this.selectedUser()?.photo,
+                };
+                this.externalUserFormControl.patchValue(data);
+            }
+        });
+    }
+    ngOnInit() {
+        if (this.userForEdit()?.userName) {
+            this.facade.getUser(this.userForEdit()?.userName || null);
+        }
+        this.updateFormFields();
+    }
+    onSubmit() {
+        if (this.userForEdit()?.userName) {
+            const payload = {
+                displayName: this.externalUserFormControl.value?.displayName,
+                email: this.externalUserFormControl.value?.email,
+                mobile: this.externalUserFormControl.value?.mobile,
+                image: this.externalUserFormControl.value?.image?.fileName,
+            };
+            this.facade.updateUser(this.userForEdit()?.userId, payload).subscribe({
+                next: () => {
+                    this.ref.close(true);
+                },
+                error: () => { },
+            });
+        }
+        else {
+            let payload = {};
+            if (this.selectedTab() === 'internal') {
+                payload = {
+                    userName: this.internalUserFormControl.value?.userField?.userName,
+                    isExternal: false,
+                };
+            }
+            else {
+                payload = {
+                    userId: '',
+                    userName: this.externalUserFormControl.value?.userName,
+                    displayName: this.externalUserFormControl.value?.displayName,
+                    email: this.externalUserFormControl.value?.email,
+                    mobile: this.externalUserFormControl.value?.mobile,
+                    password: this.externalUserFormControl.value?.password,
+                    isExternal: true,
+                    image: this.externalUserFormControl.value?.image?.fileName,
+                };
+            }
+            this.facade.createUser(payload).subscribe({
+                next: () => {
+                    this.ref.close(true);
+                },
+                error: () => { },
+            });
+        }
+    }
+    updateFormFields() {
+        if (!this.userForEdit()?.userName) {
+            this.externalUserFormConfig().sections[0].fields.push({
+                key: 'userName',
+                label: this.translocoService.translate('users-groups.user-name'),
+                placeholder: this.translocoService.translate('users-groups.user-name'),
+                validators: [
+                    ValidatorConfig.required(),
+                    ValidatorConfig.pattern('^[a-zA-Z0-9]+$'),
+                ],
+                colSpan: 6,
+                order: 3,
+                hidden: !!this.userForEdit()?.userName,
+            }, {
+                key: 'password',
+                label: this.translocoService.translate('users-groups.password'),
+                placeholder: this.translocoService.translate('users-groups.password'),
+                validators: [ValidatorConfig.required()],
+                inputType: 'password',
+                colSpan: 6,
+                order: 6,
+                hidden: !!this.userForEdit()?.userName,
+            }, {
+                key: 'confirmPassword',
+                label: this.translocoService.translate('users-groups.confirm-password'),
+                placeholder: this.translocoService.translate('users-groups.confirm-password'),
+                validators: [ValidatorConfig.required()],
+                inputType: 'password',
+                colSpan: 6,
+                order: 6,
+                hidden: !!this.userForEdit()?.userName,
+            });
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: UserForm, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: UserForm, isStandalone: true, selector: "mt-user-form", inputs: { userForEdit: { classPropertyName: "userForEdit", publicName: "userForEdit", isSignal: true, isRequired: false, transformFunction: null } }, providers: [DialogService], ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'users-groups'\">\r\n  <div [class]=\"'flex flex-col gap-1 p-4 ' + modal.contentClass\">\r\n    @if (!getUserFormLoading()) {\r\n      <div class=\"flex justify-center\">\r\n        <div class=\"w-60\">\r\n          <mt-tabs\r\n            [(active)]=\"selectedTab\"\r\n            [options]=\"tabsList\"\r\n            fluid\r\n            size=\"small\"\r\n            [disabled]=\"!!this.userForEdit()?.userName\"\r\n          ></mt-tabs>\r\n        </div>\r\n      </div>\r\n\r\n      <form class=\"col-span-1\">\r\n        @if (selectedTab() === \"internal\") {\r\n          <mt-dynamic-form\r\n            [formConfig]=\"internalUserFormConfig()\"\r\n            [formControl]=\"internalUserFormControl\"\r\n          />\r\n        } @else {\r\n          <mt-dynamic-form\r\n            [formConfig]=\"externalUserFormConfig()\"\r\n            [formControl]=\"externalUserFormControl\"\r\n          />\r\n        }\r\n      </form>\r\n    } @else {\r\n      <p-skeleton class=\"my-4 mt-7\" height=\"3rem\" />\r\n      <p-skeleton class=\"my-4\" height=\"3rem\" />\r\n      <p-skeleton class=\"my-4\" height=\"3rem\" />\r\n    }\r\n  </div>\r\n\r\n  <div [class]=\"modal.footerClass\">\r\n    <mt-button\r\n      [label]=\"selectedUser() ? ('save' | transloco) : ('add' | transloco)\"\r\n      (click)=\"onSubmit()\"\r\n      [loading]=\"createUpdateUserLoading()\"\r\n      [disabled]=\"\r\n        selectedTab() === 'internal'\r\n          ? !this.internalUserFormControl.valid\r\n          : !this.externalUserFormControl.valid\r\n      \"\r\n    />\r\n  </div>\r\n</ng-container>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i1.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: Tabs, selector: "mt-tabs", inputs: ["options", "optionLabel", "optionValue", "active", "size", "fluid", "disabled"], outputs: ["activeChange", "onChange"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: UserForm, decorators: [{
+            type: Component,
+            args: [{ selector: 'mt-user-form', standalone: true, imports: [
+                        CommonModule,
+                        Button,
+                        TranslocoDirective,
+                        SkeletonModule,
+                        DynamicForm,
+                        ReactiveFormsModule,
+                        Tabs,
+                        TranslocoPipe,
+                    ], providers: [DialogService], template: "<ng-container *transloco=\"let t; prefix: 'users-groups'\">\r\n  <div [class]=\"'flex flex-col gap-1 p-4 ' + modal.contentClass\">\r\n    @if (!getUserFormLoading()) {\r\n      <div class=\"flex justify-center\">\r\n        <div class=\"w-60\">\r\n          <mt-tabs\r\n            [(active)]=\"selectedTab\"\r\n            [options]=\"tabsList\"\r\n            fluid\r\n            size=\"small\"\r\n            [disabled]=\"!!this.userForEdit()?.userName\"\r\n          ></mt-tabs>\r\n        </div>\r\n      </div>\r\n\r\n      <form class=\"col-span-1\">\r\n        @if (selectedTab() === \"internal\") {\r\n          <mt-dynamic-form\r\n            [formConfig]=\"internalUserFormConfig()\"\r\n            [formControl]=\"internalUserFormControl\"\r\n          />\r\n        } @else {\r\n          <mt-dynamic-form\r\n            [formConfig]=\"externalUserFormConfig()\"\r\n            [formControl]=\"externalUserFormControl\"\r\n          />\r\n        }\r\n      </form>\r\n    } @else {\r\n      <p-skeleton class=\"my-4 mt-7\" height=\"3rem\" />\r\n      <p-skeleton class=\"my-4\" height=\"3rem\" />\r\n      <p-skeleton class=\"my-4\" height=\"3rem\" />\r\n    }\r\n  </div>\r\n\r\n  <div [class]=\"modal.footerClass\">\r\n    <mt-button\r\n      [label]=\"selectedUser() ? ('save' | transloco) : ('add' | transloco)\"\r\n      (click)=\"onSubmit()\"\r\n      [loading]=\"createUpdateUserLoading()\"\r\n      [disabled]=\"\r\n        selectedTab() === 'internal'\r\n          ? !this.internalUserFormControl.valid\r\n          : !this.externalUserFormControl.valid\r\n      \"\r\n    />\r\n  </div>\r\n</ng-container>\r\n" }]
+        }], ctorParameters: () => [], propDecorators: { userForEdit: [{ type: i0.Input, args: [{ isSignal: true, alias: "userForEdit", required: false }] }] } });
+function passwordMatchValidator(passwordControlName, confirmPasswordControlName) {
+    return (group) => {
+        // 1. Get the controls from the group
+        const passwordControl = group.get(passwordControlName);
+        const confirmPasswordControl = group.get(confirmPasswordControlName);
+        // 2. Basic checks (if controls don't exist, or if one is null, it's not a mismatch error)
+        if (!passwordControl || !confirmPasswordControl) {
+            return null;
+        }
+        // 3. Check for value mismatch
+        if (passwordControl.value !== confirmPasswordControl.value) {
+            // 4. Set the error on the 'confirm password' control for clearer user feedback
+            confirmPasswordControl.setErrors({ mismatch: true });
+            return { mismatch: true }; // The group itself has a mismatch error
+        }
+        else {
+            // 5. If they match, clear any previous mismatch error on the 'confirm password' control
+            if (confirmPasswordControl.hasError('mismatch')) {
+                const errors = confirmPasswordControl.errors;
+                if (errors) {
+                    delete errors['mismatch'];
+                    confirmPasswordControl.setErrors(Object.keys(errors).length > 0 ? errors : null);
+                }
+            }
+            return null; // No mismatch error
+        }
+    };
+}
+
+class Users {
+    typeCol = viewChild.required('typeCol');
+    userCol = viewChild.required('userCol');
+    facade = inject(UsersGroupsFacade);
+    modal = inject(ModalService);
+    translocoService = inject(TranslocoService);
+    users = computed(() => {
+        const tab = this.activeTab();
+        const all = this.allUsers();
+        switch (tab) {
+            case 'internal':
+                return all.filter((user) => !user.isExternal);
+            case 'external':
+                return all.filter((user) => user.isExternal);
+            case 'all':
+            default:
+                return all;
+        }
+    }, ...(ngDevMode ? [{ debugName: "users" }] : []));
+    tabs = signal([
+        {
+            label: this.translocoService.translate('users-groups.all'),
+            value: 'all',
+        },
+        {
+            label: this.translocoService.translate('users-groups.internal'),
+            value: 'internal',
+        },
+        {
+            label: this.translocoService.translate('users-groups.external'),
+            value: 'external',
+        },
+    ], ...(ngDevMode ? [{ debugName: "tabs" }] : []));
+    activeTab = signal('all', ...(ngDevMode ? [{ debugName: "activeTab" }] : []));
+    tableActions = signal([
+        {
+            icon: 'general.plus',
+            label: this.translocoService.translate('users-groups.add-user'),
+            color: 'primary',
+            action: () => {
+                this.addUserDialog();
+            },
+        },
+    ], ...(ngDevMode ? [{ debugName: "tableActions" }] : []));
+    deletingRowIds = signal([], ...(ngDevMode ? [{ debugName: "deletingRowIds" }] : []));
+    rowActions = signal([
+        {
+            icon: 'custom.pencil',
+            tooltip: this.translocoService.translate('edit'),
+            color: 'primary',
+            action: (row) => {
+                this.addUserDialog(row);
+            },
+            hidden: (row) => !row.isExternal,
+        },
+        {
+            icon: 'general.trash-01',
+            tooltip: this.translocoService.translate('delete'),
+            color: 'danger',
+            variant: 'outlined',
+            action: (row) => {
+                this.deletingRowIds.update((ids) => [...ids, row.userName]);
+                this.facade
+                    .deleteUser(row.userName)
+                    .pipe(finalize(() => {
+                    this.deletingRowIds.update((ids) => ids.filter((id) => id !== row.userName));
+                }))
+                    .subscribe();
+            },
+            confirmation: {
+                type: 'popup',
+                confirmationType: 'delete',
+            },
+            loading: (row) => this.deletingRowIds().includes(row.userName),
+        },
+    ], ...(ngDevMode ? [{ debugName: "rowActions" }] : []));
+    tableColumns = linkedSignal(() => [
+        {
+            key: 'displayName',
+            label: this.translocoService.translate('users-groups.user'),
+            type: 'custom',
+            customCellTpl: this.userCol(),
+            filterConfig: {
+                type: 'text',
+                label: this.translocoService.translate('users-groups.user'),
+            },
+        },
+        {
+            key: 'isExternal',
+            label: this.translocoService.translate('users-groups.type'),
+            type: 'custom',
+            customCellTpl: this.typeCol(),
+        },
+        {
+            key: 'email',
+            label: this.translocoService.translate('users-groups.email'),
+            filterConfig: {
+                type: 'text',
+                label: this.translocoService.translate('users-groups.email'),
+            },
+        },
+        {
+            key: 'lastLoginTime.displayValue',
+            label: this.translocoService.translate('users-groups.last-seen'),
+        },
+    ], ...(ngDevMode ? [{ debugName: "tableColumns" }] : []));
+    loading = this.facade.isLoadingUsers;
+    allUsers = this.facade.users;
+    ngOnInit() {
+        this.facade.getUsers();
+    }
+    addUserDialog(user = null) {
+        const modalType = user ? 'drawer' : 'dialog';
+        this.modal.openModal(UserForm, modalType, {
+            header: user
+                ? this.translocoService.translate('users-groups.edit-user')
+                : this.translocoService.translate('users-groups.add-user'),
+            styleClass: modalType === 'drawer'
+                ? '!w-[30rem] !absolute !shadow-none'
+                : '!w-[50rem]',
+            position: modalType === 'drawer' ? 'end' : '',
+            appendTo: modalType === 'drawer' ? 'page-content' : 'body',
+            dismissableMask: true,
+            dismissible: true,
+            inputValues: {
+                userForEdit: user,
+            },
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: Users, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.3", type: Users, isStandalone: true, selector: "mt-users", viewQueries: [{ propertyName: "typeCol", first: true, predicate: ["typeCol"], descendants: true, isSignal: true }, { propertyName: "userCol", first: true, predicate: ["userCol"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'users-groups'\">\r\n  <div class=\"mt-5\">\r\n    <ng-template #typeCol let-row>\r\n      <div>{{ row.isExternal ? t(\"external\") : t(\"internal\") }}</div>\r\n    </ng-template>\r\n    <ng-template #userCol let-row>\r\n      <div class=\"flex items-center gap-2\">\r\n        <mt-avatar [icon]=\"'custom.user-pp'\"> </mt-avatar> {{ row.displayName }}\r\n      </div>\r\n    </ng-template>\r\n\r\n    <mt-table\r\n      [tabs]=\"tabs()\"\r\n      [(activeTab)]=\"activeTab\"\r\n      [data]=\"users()\"\r\n      [columns]=\"tableColumns()\"\r\n      [actions]=\"tableActions()\"\r\n      [rowActions]=\"rowActions()\"\r\n      [generalSearch]=\"true\"\r\n      [showFilters]=\"true\"\r\n      [loading]=\"loading()\"\r\n    >\r\n    </mt-table>\r\n  </div>\r\n</ng-container>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: Table, selector: "mt-table", inputs: ["filters", "data", "columns", "rowActions", "size", "showGridlines", "stripedRows", "selectableRows", "generalSearch", "showFilters", "loading", "updating", "lazy", "lazyTotalRecords", "reorderableColumns", "reorderableRows", "dataKey", "exportable", "exportFilename", "tabs", "tabsOptionLabel", "tabsOptionValue", "activeTab", "actions", "paginatorPosition", "pageSize", "currentPage", "first", "filterTerm"], outputs: ["selectionChange", "cellChange", "lazyLoad", "columnReorder", "rowReorder", "filtersChange", "activeTabChange", "onTabChange", "pageSizeChange", "currentPageChange", "firstChange", "filterTermChange"] }, { kind: "component", type: Avatar, selector: "mt-avatar", inputs: ["label", "icon", "image", "styleClass", "size", "shape", "badge", "badgeSize", "badgeSeverity"], outputs: ["onImageError"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: Users, decorators: [{
+            type: Component,
+            args: [{ selector: 'mt-users', standalone: true, imports: [CommonModule, SkeletonModule, Table, Avatar, TranslocoDirective], template: "<ng-container *transloco=\"let t; prefix: 'users-groups'\">\r\n  <div class=\"mt-5\">\r\n    <ng-template #typeCol let-row>\r\n      <div>{{ row.isExternal ? t(\"external\") : t(\"internal\") }}</div>\r\n    </ng-template>\r\n    <ng-template #userCol let-row>\r\n      <div class=\"flex items-center gap-2\">\r\n        <mt-avatar [icon]=\"'custom.user-pp'\"> </mt-avatar> {{ row.displayName }}\r\n      </div>\r\n    </ng-template>\r\n\r\n    <mt-table\r\n      [tabs]=\"tabs()\"\r\n      [(activeTab)]=\"activeTab\"\r\n      [data]=\"users()\"\r\n      [columns]=\"tableColumns()\"\r\n      [actions]=\"tableActions()\"\r\n      [rowActions]=\"rowActions()\"\r\n      [generalSearch]=\"true\"\r\n      [showFilters]=\"true\"\r\n      [loading]=\"loading()\"\r\n    >\r\n    </mt-table>\r\n  </div>\r\n</ng-container>\r\n" }]
+        }], propDecorators: { typeCol: [{ type: i0.ViewChild, args: ['typeCol', { isSignal: true }] }], userCol: [{ type: i0.ViewChild, args: ['userCol', { isSignal: true }] }] } });
+
+class GroupForm {
+    modal = inject(ModalService);
+    ref = inject(ModalRef);
+    groupForEdit = input(null, ...(ngDevMode ? [{ debugName: "groupForEdit" }] : []));
+    translocoService = inject(TranslocoService);
+    facade = inject(UsersGroupsFacade);
+    selectedGroup = this.facade.selectedGroup;
+    groupFormControl = new FormControl();
+    getGroupFormLoading = this.facade.isLoadingGroup;
+    createUpdateGroupLoading = this.facade.isSavingGroup;
+    addUserToGroupLoading = this.facade.isAddingUserToGroup;
+    deleteUserFromGroupLoading = this.facade.isDeletingUserFromGroup;
+    internalUserFormControl = new FormControl();
+    userCol = viewChild.required('userCol');
+    isUserExistInMembers = signal(false, ...(ngDevMode ? [{ debugName: "isUserExistInMembers" }] : []));
+    context = new HttpContext().set(REQUEST_CONTEXT, {
+        useBaseUrl: true,
+    });
+    groupFormConfig = signal({
+        sections: [
+            {
+                key: 'groupFormConfig',
+                type: 'header',
+                order: 1,
+                fields: [
+                    {
+                        key: 'name.en',
+                        label: this.translocoService.translate('users-groups.group-name-en'),
+                        placeholder: this.translocoService.translate('users-groups.group-name-en'),
+                        validators: [ValidatorConfig.required()],
+                        order: 1,
+                    },
+                    {
+                        key: 'name.ar',
+                        label: this.translocoService.translate('users-groups.group-name-ar'),
+                        placeholder: this.translocoService.translate('users-groups.group-name-ar'),
+                        validators: [ValidatorConfig.required()],
+                        order: 1,
+                    },
+                    new TextareaFieldConfig({
+                        key: 'description',
+                        label: this.translocoService.translate('users-groups.description'),
+                        placeholder: this.translocoService.translate('users-groups.description'),
+                        order: 3,
+                    }),
+                ],
+            },
+        ],
+    }, ...(ngDevMode ? [{ debugName: "groupFormConfig" }] : []));
+    usersLoading = signal(false, ...(ngDevMode ? [{ debugName: "usersLoading" }] : []));
+    internalUserFormConfig = signal({
+        sections: [
+            {
+                key: 'internalUserFormConfig',
+                type: 'header',
+                order: 1,
+                fields: [
+                    new UserSearchFieldConfig({
+                        key: 'userField',
+                        label: this.translocoService.translate('users-groups.user-name'),
+                        apiUrl: 'identity/users',
+                        context: this.context,
+                        order: 1,
+                    }),
+                ],
+            },
+        ],
+    }, ...(ngDevMode ? [{ debugName: "internalUserFormConfig" }] : []));
+    tableColumns = linkedSignal(() => [
+        {
+            key: 'displayName',
+            label: this.translocoService.translate('users-groups.user'),
+            type: 'custom',
+            customCellTpl: this.userCol(),
+        },
+    ], ...(ngDevMode ? [{ debugName: "tableColumns" }] : []));
+    deletingRowIds = signal([], ...(ngDevMode ? [{ debugName: "deletingRowIds" }] : []));
+    rowActions = signal([
+        {
+            icon: 'general.trash-01',
+            tooltip: this.translocoService.translate('delete'),
+            color: 'danger',
+            variant: 'outlined',
+            action: (row) => {
+                this.deletingRowIds.update((ids) => [...ids, row?.user?.userName]);
+                this.facade
+                    .deleteUserFromGroup({
+                    userName: row?.user?.userName,
+                    groupId: this.groupForEdit()?.id,
+                })
+                    .pipe(finalize(() => {
+                    this.deletingRowIds.update((ids) => ids.filter((id) => id !== row?.user?.userName));
+                }))
+                    .subscribe();
+            },
+            confirmation: {
+                type: 'popup',
+                confirmationType: 'delete',
+            },
+            loading: (row) => this.deletingRowIds().includes(row?.user?.userName),
+        },
+    ], ...(ngDevMode ? [{ debugName: "rowActions" }] : []));
+    constructor() {
+        // effect(() => {
+        //   const groupId = this.groupForEdit()?.id;
+        //   if (this.selectedGroup() && groupId) {
+        //     this.groupFormControl.patchValue(this.selectedGroup());
+        //   }
+        // });
+    }
+    ngOnInit() {
+        if (this.groupForEdit()?.id) {
+            this.facade.getGroup(this.groupForEdit()?.id || null).subscribe((_) => {
+                if (this.selectedGroup()) {
+                    this.groupFormControl.patchValue(this.selectedGroup());
+                }
+            });
+        }
+        this.internalUserFormControl.valueChanges.subscribe((value) => {
+            const isUserExistInMembers = this.selectedGroup()?.members?.find((member) => member?.user?.userId === value?.userField?.userId);
+            this.isUserExistInMembers.set(isUserExistInMembers);
+        });
+    }
+    onSubmit() {
+        if (this.groupForEdit()?.id) {
+            const payload = {
+                name: this.groupFormControl.value?.name,
+                workspace: this.groupFormControl.value?.workspace,
+                description: this.groupFormControl.value?.description,
+            };
+            this.facade.updateGroup(this.groupForEdit()?.id, payload).subscribe({
+                next: () => {
+                    this.ref.close(true);
+                },
+                error: () => { },
+            });
+        }
+        else {
+            const payload = {
+                name: this.groupFormControl.value?.name,
+                workspace: this.groupFormControl.value?.workspace,
+                description: this.groupFormControl.value?.description,
+            };
+            this.facade.createGroup(payload).subscribe({
+                next: () => {
+                    this.ref.close(true);
+                },
+                error: () => { },
+            });
+        }
+    }
+    onAddUser() {
+        if (this.internalUserFormControl.value.userField.userId &&
+            !this.isUserExistInMembers()) {
+            this.facade
+                .addUserToGroup(this.internalUserFormControl.value.userField.userName, this.groupForEdit()?.id)
+                .subscribe((_) => {
+                this.internalUserFormControl.setValue({ userField: null });
+            });
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: GroupForm, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: GroupForm, isStandalone: true, selector: "mt-group-form", inputs: { groupForEdit: { classPropertyName: "groupForEdit", publicName: "groupForEdit", isSignal: true, isRequired: false, transformFunction: null } }, providers: [DialogService], viewQueries: [{ propertyName: "userCol", first: true, predicate: ["userCol"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'users-groups'\">\r\n  <div [class]=\"'flex flex-col gap-1 p-4 ' + modal.contentClass\">\r\n    @if (!getGroupFormLoading()) {\r\n      <form class=\"col-span-1\">\r\n        <mt-dynamic-form\r\n          [formConfig]=\"groupFormConfig()\"\r\n          [formControl]=\"groupFormControl\"\r\n        />\r\n      </form>\r\n\r\n      @if (groupForEdit()) {\r\n        <div class=\"flex gap-3 items-end mt-6 pt-4 border-t-1 border-surface\">\r\n          <mt-dynamic-form\r\n            class=\"flex-1\"\r\n            [formConfig]=\"internalUserFormConfig()\"\r\n            [formControl]=\"internalUserFormControl\"\r\n          />\r\n          <mt-button\r\n            icon=\"general.plus\"\r\n            class=\"mb-0\"\r\n            variant=\"outlined\"\r\n            (click)=\"onAddUser()\"\r\n            [disabled]=\"\r\n              addUserToGroupLoading() ||\r\n              isUserExistInMembers() ||\r\n              !internalUserFormControl.value?.userField\r\n            \"\r\n          />\r\n        </div>\r\n\r\n        <mt-table\r\n          [data]=\"selectedGroup()?.members || []\"\r\n          [columns]=\"tableColumns()\"\r\n          [rowActions]=\"rowActions()\"\r\n          [generalSearch]=\"false\"\r\n          [showFilters]=\"false\"\r\n          [loading]=\"addUserToGroupLoading()\"\r\n        >\r\n        </mt-table>\r\n        <ng-template #userCol let-row>\r\n          <div class=\"flex items-center gap-2\">\r\n            <mt-avatar [icon]=\"'custom.user-pp'\"> </mt-avatar>\r\n            {{ row?.user?.displayName }}\r\n          </div>\r\n        </ng-template>\r\n      }\r\n    } @else {\r\n      <p-skeleton class=\"my-4 mt-7\" height=\"3rem\" />\r\n      <p-skeleton class=\"my-4\" height=\"3rem\" />\r\n      <p-skeleton class=\"my-4\" height=\"3rem\" />\r\n    }\r\n  </div>\r\n\r\n  <div [class]=\"modal.footerClass\">\r\n    <mt-button\r\n      [label]=\"selectedGroup() ? ('save' | transloco) : ('add' | transloco)\"\r\n      (click)=\"onSubmit()\"\r\n      [loading]=\"createUpdateGroupLoading()\"\r\n      [disabled]=\"!this.groupFormControl.valid\"\r\n    />\r\n  </div>\r\n</ng-container>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i1.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: Avatar, selector: "mt-avatar", inputs: ["label", "icon", "image", "styleClass", "size", "shape", "badge", "badgeSize", "badgeSeverity"], outputs: ["onImageError"] }, { kind: "component", type: Table, selector: "mt-table", inputs: ["filters", "data", "columns", "rowActions", "size", "showGridlines", "stripedRows", "selectableRows", "generalSearch", "showFilters", "loading", "updating", "lazy", "lazyTotalRecords", "reorderableColumns", "reorderableRows", "dataKey", "exportable", "exportFilename", "tabs", "tabsOptionLabel", "tabsOptionValue", "activeTab", "actions", "paginatorPosition", "pageSize", "currentPage", "first", "filterTerm"], outputs: ["selectionChange", "cellChange", "lazyLoad", "columnReorder", "rowReorder", "filtersChange", "activeTabChange", "onTabChange", "pageSizeChange", "currentPageChange", "firstChange", "filterTermChange"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: GroupForm, decorators: [{
+            type: Component,
+            args: [{ selector: 'mt-group-form', standalone: true, imports: [
+                        CommonModule,
+                        Button,
+                        TranslocoDirective,
+                        SkeletonModule,
+                        DynamicForm,
+                        ReactiveFormsModule,
+                        TranslocoPipe,
+                        Avatar,
+                        Table,
+                    ], providers: [DialogService], template: "<ng-container *transloco=\"let t; prefix: 'users-groups'\">\r\n  <div [class]=\"'flex flex-col gap-1 p-4 ' + modal.contentClass\">\r\n    @if (!getGroupFormLoading()) {\r\n      <form class=\"col-span-1\">\r\n        <mt-dynamic-form\r\n          [formConfig]=\"groupFormConfig()\"\r\n          [formControl]=\"groupFormControl\"\r\n        />\r\n      </form>\r\n\r\n      @if (groupForEdit()) {\r\n        <div class=\"flex gap-3 items-end mt-6 pt-4 border-t-1 border-surface\">\r\n          <mt-dynamic-form\r\n            class=\"flex-1\"\r\n            [formConfig]=\"internalUserFormConfig()\"\r\n            [formControl]=\"internalUserFormControl\"\r\n          />\r\n          <mt-button\r\n            icon=\"general.plus\"\r\n            class=\"mb-0\"\r\n            variant=\"outlined\"\r\n            (click)=\"onAddUser()\"\r\n            [disabled]=\"\r\n              addUserToGroupLoading() ||\r\n              isUserExistInMembers() ||\r\n              !internalUserFormControl.value?.userField\r\n            \"\r\n          />\r\n        </div>\r\n\r\n        <mt-table\r\n          [data]=\"selectedGroup()?.members || []\"\r\n          [columns]=\"tableColumns()\"\r\n          [rowActions]=\"rowActions()\"\r\n          [generalSearch]=\"false\"\r\n          [showFilters]=\"false\"\r\n          [loading]=\"addUserToGroupLoading()\"\r\n        >\r\n        </mt-table>\r\n        <ng-template #userCol let-row>\r\n          <div class=\"flex items-center gap-2\">\r\n            <mt-avatar [icon]=\"'custom.user-pp'\"> </mt-avatar>\r\n            {{ row?.user?.displayName }}\r\n          </div>\r\n        </ng-template>\r\n      }\r\n    } @else {\r\n      <p-skeleton class=\"my-4 mt-7\" height=\"3rem\" />\r\n      <p-skeleton class=\"my-4\" height=\"3rem\" />\r\n      <p-skeleton class=\"my-4\" height=\"3rem\" />\r\n    }\r\n  </div>\r\n\r\n  <div [class]=\"modal.footerClass\">\r\n    <mt-button\r\n      [label]=\"selectedGroup() ? ('save' | transloco) : ('add' | transloco)\"\r\n      (click)=\"onSubmit()\"\r\n      [loading]=\"createUpdateGroupLoading()\"\r\n      [disabled]=\"!this.groupFormControl.valid\"\r\n    />\r\n  </div>\r\n</ng-container>\r\n" }]
+        }], ctorParameters: () => [], propDecorators: { groupForEdit: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupForEdit", required: false }] }], userCol: [{ type: i0.ViewChild, args: ['userCol', { isSignal: true }] }] } });
+
+class Groups {
+    workspaceCol = viewChild.required('workspaceCol');
+    groupCol = viewChild.required('groupCol');
+    facade = inject(UsersGroupsFacade);
+    modal = inject(ModalService);
+    translocoService = inject(TranslocoService);
+    activeTab = signal('all', ...(ngDevMode ? [{ debugName: "activeTab" }] : []));
+    tableActions = signal([
+        {
+            icon: 'general.plus',
+            label: this.translocoService.translate('users-groups.add-group'),
+            color: 'primary',
+            action: () => {
+                this.addGroupDialog();
+            },
+        },
+    ], ...(ngDevMode ? [{ debugName: "tableActions" }] : []));
+    deletingRowIds = signal([], ...(ngDevMode ? [{ debugName: "deletingRowIds" }] : []));
+    rowActions = signal([
+        {
+            icon: 'custom.pencil',
+            tooltip: this.translocoService.translate('edit'),
+            color: 'primary',
+            action: (row) => {
+                this.facade.clearSelectedGroup();
+                this.addGroupDialog(row);
+            },
+        },
+        {
+            icon: 'general.trash-01',
+            tooltip: this.translocoService.translate('delete'),
+            color: 'danger',
+            variant: 'outlined',
+            action: (row) => {
+                this.deletingRowIds.update((ids) => [...ids, row.id]);
+                this.facade
+                    .deleteGroup(row.id)
+                    .pipe(finalize(() => {
+                    this.deletingRowIds.update((ids) => ids.filter((id) => id !== row.id));
+                }))
+                    .subscribe();
+            },
+            confirmation: {
+                type: 'popup',
+                confirmationType: 'delete',
+            },
+            loading: (row) => this.deletingRowIds().includes(row.id),
+        },
+    ], ...(ngDevMode ? [{ debugName: "rowActions" }] : []));
+    tableColumns = linkedSignal(() => [
+        {
+            key: 'name',
+            label: this.translocoService.translate('users-groups.group'),
+            type: 'custom',
+            customCellTpl: this.groupCol(),
+            filterConfig: {
+                type: 'text',
+                label: this.translocoService.translate('users-groups.group'),
+            },
+        },
+        {
+            key: 'membersCount',
+            label: this.translocoService.translate('users-groups.users'),
+        },
+    ], ...(ngDevMode ? [{ debugName: "tableColumns" }] : []));
+    loading = this.facade.isLoadingGroups;
+    allGroups = this.facade.groups;
+    ngOnInit() {
+        this.facade.getGroups();
+    }
+    addGroupDialog(group = null) {
+        const modalType = group ? 'drawer' : 'dialog';
+        this.modal.openModal(GroupForm, modalType, {
+            header: group
+                ? this.translocoService.translate('users-groups.edit-group')
+                : this.translocoService.translate('users-groups.add-group'),
+            styleClass: '!w-[35rem] !absolute !shadow-none',
+            position: modalType === 'drawer' ? 'end' : '',
+            appendTo: modalType === 'drawer' ? 'page-content' : 'body',
+            dismissableMask: true,
+            dismissible: true,
+            inputValues: {
+                groupForEdit: group,
+            },
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: Groups, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.3", type: Groups, isStandalone: true, selector: "mt-groups", viewQueries: [{ propertyName: "workspaceCol", first: true, predicate: ["workspaceCol"], descendants: true, isSignal: true }, { propertyName: "groupCol", first: true, predicate: ["groupCol"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'users-groups'\">\r\n  <div class=\"mt-5\">\r\n    <ng-template #workspaceCol let-row>\r\n      <div>{{ row.workspace }}</div>\r\n    </ng-template>\r\n    <ng-template #groupCol let-row>\r\n      <div class=\"flex items-center gap-2\">{{ row.name }}</div>\r\n    </ng-template>\r\n\r\n    <mt-table\r\n      [(activeTab)]=\"activeTab\"\r\n      [data]=\"allGroups()\"\r\n      [columns]=\"tableColumns()\"\r\n      [actions]=\"tableActions()\"\r\n      [rowActions]=\"rowActions()\"\r\n      [generalSearch]=\"true\"\r\n      [showFilters]=\"true\"\r\n      [loading]=\"loading()\"\r\n    >\r\n    </mt-table>\r\n  </div>\r\n</ng-container>\r\n", styles: [".groups{padding:2rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: Table, selector: "mt-table", inputs: ["filters", "data", "columns", "rowActions", "size", "showGridlines", "stripedRows", "selectableRows", "generalSearch", "showFilters", "loading", "updating", "lazy", "lazyTotalRecords", "reorderableColumns", "reorderableRows", "dataKey", "exportable", "exportFilename", "tabs", "tabsOptionLabel", "tabsOptionValue", "activeTab", "actions", "paginatorPosition", "pageSize", "currentPage", "first", "filterTerm"], outputs: ["selectionChange", "cellChange", "lazyLoad", "columnReorder", "rowReorder", "filtersChange", "activeTabChange", "onTabChange", "pageSizeChange", "currentPageChange", "firstChange", "filterTermChange"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: Groups, decorators: [{
+            type: Component,
+            args: [{ selector: 'mt-groups', standalone: true, imports: [CommonModule, SkeletonModule, Table, TranslocoDirective], template: "<ng-container *transloco=\"let t; prefix: 'users-groups'\">\r\n  <div class=\"mt-5\">\r\n    <ng-template #workspaceCol let-row>\r\n      <div>{{ row.workspace }}</div>\r\n    </ng-template>\r\n    <ng-template #groupCol let-row>\r\n      <div class=\"flex items-center gap-2\">{{ row.name }}</div>\r\n    </ng-template>\r\n\r\n    <mt-table\r\n      [(activeTab)]=\"activeTab\"\r\n      [data]=\"allGroups()\"\r\n      [columns]=\"tableColumns()\"\r\n      [actions]=\"tableActions()\"\r\n      [rowActions]=\"rowActions()\"\r\n      [generalSearch]=\"true\"\r\n      [showFilters]=\"true\"\r\n      [loading]=\"loading()\"\r\n    >\r\n    </mt-table>\r\n  </div>\r\n</ng-container>\r\n", styles: [".groups{padding:2rem}\n"] }]
+        }], propDecorators: { workspaceCol: [{ type: i0.ViewChild, args: ['workspaceCol', { isSignal: true }] }], groupCol: [{ type: i0.ViewChild, args: ['groupCol', { isSignal: true }] }] } });
+
+// store/index.ts
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AddUserToGroup, ClearSelectedGroup, CreateGroup, CreateUser, DeleteGroup, DeleteUser, DeleteUserFromGroup, GetGroup, GetGroups, GetUser, GetUsers, GroupForm, Groups, UpdateGroup, UpdateUser, UserForm, Users, UsersGroups, UsersGroupsActionKey, UsersGroupsFacade, UsersGroupsState };
+//# sourceMappingURL=masterteam-users-groups.mjs.map