[init] init version

src/app/pages/users/group/do/user-group-do.component.html

@@ -0,0 +1,57 @@
+<form class="dialog-main form-dialog " #ngf="ngForm" (ngSubmit)="onSubmit(ngf)" autocomplete="off">
+  <div class="dialog-main">
+    <div class="dialog-header">
+      <h2>{{title}}</h2>
+    </div>
+    <div class="dialog-body">
+      <div class="grid grid-cols-12 gap-4 md:gap-2 ">
+
+
+        <div class="col-span-6 md:col-span-12">
+          <mat-label>ชื่อ{{title}}</mat-label>
+          <mat-form-field>
+            <input matInput [(ngModel)]="dataForm.name" name="name" #name="ngModel" required>
+            <mat-error *ngIf="isFieldValid(ngf, name)"> กรุณากรอกข้อมูล</mat-error>
+          </mat-form-field>
+        </div>
+        <div class="col-span-12 md:col-span-12">
+          <mat-label>รายละเอียด</mat-label>
+          <mat-form-field>
+            <textarea matInput [(ngModel)]="dataForm.desc" name="desc" #desc="ngModel"></textarea>
+            <mat-error *ngIf="isFieldValid(ngf, desc)"> กรุณากรอกข้อมูล</mat-error>
+          </mat-form-field>
+        </div>
+
+
+        <div class="col-span-12 md:col-span-12">
+          <h2>สิทธิ์ในการมองเห็นเมนู</h2>
+          <div class="permission-list" >
+
+            <ng-template #tempPermission let-menus>
+              <div *ngFor="let item of menus; let i = index" class="permission-item" >
+                <ng-container *ngIf="!item.notShowing">
+                  <label class="inline-flex items-center cursor-pointer select-none ml-2 mb-2">
+                    <input type="checkbox" name="name-{{item.permission}}" (change)="onChecked(item)" [(ngModel)]="item.isChecked">
+                    <span style="padding-left: 2px;">{{item.name}}</span>
+                  </label>
+<!--                <mat-checkbox (change)="onChecked(item)" [(ngModel)]="item.isChecked" name="name-{{item.permission}}">{{item.name}}</mat-checkbox>-->
+                <div *ngIf="item.children" class="permission-item permission-item-children">
+                  <ng-container *ngTemplateOutlet="tempPermission; context:{ $implicit: item.children }"></ng-container>
+                </div>
+                </ng-container>
+              </div>
+            </ng-template>
+            <ng-container *ngTemplateOutlet="tempPermission; context:{ $implicit: menus }"></ng-container>
+          </div>
+          <div style="height: 20px;"></div>
+        </div>
+
+
+      </div>
+    </div>
+    <div class="dialog-footer">
+      <button type="submit" class="btn btn-submit">บันทึก</button>
+      <button type="button" mat-dialog-close class="btn btn-dialog-close">ยกเลิก</button>
+    </div>
+  </div>
+</form>

src/app/pages/users/group/do/user-group-do.component.ts

@@ -0,0 +1,118 @@
+import { ChangeDetectorRef, Component, Inject, OnInit } from "@angular/core";
+import { API, EAction, EText } from "../../../../@config/app";
+import { MAT_DIALOG_DATA, MatDialogRef } from "@angular/material/dialog";
+import { AppService } from "../../../../app.service";
+import { lastValueFrom } from "rxjs";
+import { BasePopupComponent } from "../../../../@common/base/base-popup.component";
+import { IDialogConfigData } from "../../../../@common/interface/Dialog";
+import { MENU } from "../../../../@config/menus";
+import deepCopy from "../../../../@common/utils/DeepCopy";
+
+@Component({
+  selector: "app-users-do",
+  templateUrl: "./user-group-do.component.html",
+  styleUrls: []
+})
+export class UserGroupDoComponent extends BasePopupComponent implements OnInit {
+
+  title = "สิทธิ์การใช้งาน";
+  apiUrl: string = API.userGroup;
+  isChecked: any = [];
+  menus: any = MENU;
+
+  auth: any = {};
+
+
+  constructor(
+    public dialogRef: MatDialogRef<UserGroupDoComponent>,
+    @Inject(MAT_DIALOG_DATA) public dialog: IDialogConfigData,
+    public changeDetectorRef: ChangeDetectorRef,
+    public appService: AppService
+  ) {
+    super();
+  }
+
+  async ngOnInit() {
+    this.auth = this.appService.auth();
+    this.dataForm.permission = [];
+    this.menus = deepCopy(MENU);
+    if (this.dialog.action === EAction.UPDATE) await this.getData();
+  }
+
+
+  async getData() {
+    if (!this.dialog.ids) this.appService.message(EAction.INFO, EText.NO_DATA);
+    this.ids = this.dialog.ids;
+    try {
+      this.dataForm = await lastValueFrom(this.appService.get(`${this.apiUrl}/getById/${this.ids}`));
+      this.dataForm.permission = this.dataForm.permission ? this.dataForm.permission?.split(",") : [];
+      this.dataForm.permission.map((item: any) => {
+        this.isChecked.push(item);
+      });
+      this.mapDataTree(this.menus);
+      this.changeDetectorRef.detectChanges();
+    } catch (err) {
+      this.appService.message(EAction.ERROR, EText.ERROR);
+      this.dialogRef.close();
+    }
+  }
+
+  onChecked(item: any) {
+    if (item.isChecked) {
+      this.isChecked.push(item.permission);
+      this.dataForm.permission.push(item.permission);
+
+      return;
+    }
+    this.isChecked = this.isChecked.filter((f: any) => f !== item.permission);
+    this.dataForm.permission = this.dataForm.permission.filter((f: any) => this.isChecked.includes(f));
+  }
+
+  mapDataTree(tree: any) {
+    tree.map((item: any) => {
+      item.isChecked = this.isChecked.includes(item.permission);
+      if (item.children) item.children = this.mapDataTree(item.children);
+    });
+    return tree;
+  }
+
+
+  async onSubmit(form: any) {
+    if (!form.valid) return false;
+    this.dataForm.permission = this.dataForm.permission?.[0] ? this.dataForm.permission.join(",") : null;
+    if (this.dialog.action === EAction.CREATE) return await this.onCreate();
+    if (this.dialog.action === EAction.UPDATE) return await this.onUpdate();
+  }
+
+  async onCreate() {
+    try {
+      await lastValueFrom(this.appService.post(this.apiUrl, this.dataForm));
+      await this.appService.message(EAction.SUCCESS, EText.CREATE);
+      await this.dialogRef.close(EAction.GET);
+    } catch (err) {
+      this.appService.message(EAction.ERROR, EText.ERROR);
+      this.dialogRef.close(EAction.GET);
+    }
+  }
+
+  async onUpdate() {
+    try {
+      await lastValueFrom(this.appService.post(`${this.apiUrl}/update/${this.ids}`, this.dataForm));
+      await this.appService.message(EAction.SUCCESS, EText.UPDATE);
+      if (this.ids === this.auth.userGroupId) {
+        const sweetalert = await lastValueFrom(this.appService.confirm(EAction.RELOAD));
+        if (!sweetalert.isConfirmed) {
+          return await this.dialogRef.close(EAction.GET);
+        }
+       return  location.reload();
+      }
+      await this.appService.message(EAction.SUCCESS, EText.CREATE);
+      await this.dialogRef.close(EAction.GET);
+
+    } catch (err) {
+      this.appService.message(EAction.ERROR, EText.ERROR);
+      this.dialogRef.close(EAction.GET);
+    }
+  }
+
+}

src/app/pages/users/group/index/user-group.component.html

@@ -0,0 +1,69 @@
+<div class="card card-table">
+  <div class="card-header text-right">
+    <button type="button" class="btn btn-create" (click)="onPopup()">
+      <i class="bi bi-plus"></i>
+      เพิ่มสิทธิ์การใช้งาน
+    </button>
+  </div>
+  <div class="card-body">
+    <div class="table-wrap">
+      <table class="table table-main" mat-table [dataSource]="dataSource" matSort (matSortChange)="onSort($event)">
+        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+
+        <ng-container matColumnDef="code">
+          <th mat-header-cell *matHeaderCellDef class="tac">รหัส</th>
+          <td mat-cell *matCellDef="let item" width="150" class="tac">
+            {{item.code}}
+          </td>
+        </ng-container>
+
+        <ng-container matColumnDef="name">
+          <th mat-header-cell *matHeaderCellDef class="tal">สิทธิ์การใช้งาน</th>
+          <td mat-cell *matCellDef="let item" class="">
+            {{item.name }}
+          </td>
+        </ng-container>
+        <ng-container matColumnDef="desc">
+          <th mat-header-cell *matHeaderCellDef class="tal">รายละเอียด</th>
+          <td mat-cell *matCellDef="let item" class="">
+            {{item.desc }}
+          </td>
+        </ng-container>
+
+
+        <ng-container matColumnDef="createdDate">
+          <th mat-header-cell *matHeaderCellDef class="tal">User Create</th>
+          <td mat-cell *matCellDef="let item" class="">
+            <span *ngIf="item?.created">{{item?.created?.name}}-</span>{{item.createdDate | date : 'dd/MM/YYYY' }}
+          </td>
+        </ng-container>
+
+        <ng-container matColumnDef="status">
+          <th mat-header-cell *matHeaderCellDef class="tac" width="100">สถานะ</th>
+          <td mat-cell *matCellDef="let item" class="tac">
+            <div *ngIf="item.status" class="status status-active">ใช้งาน</div>
+            <div *ngIf="!item.status" class="status status-disabled">ปิดใช้งาน</div>
+          </td>
+        </ng-container>
+
+        <ng-container matColumnDef="action">
+          <th mat-header-cell *matHeaderCellDef width="100">  </th>
+          <td mat-cell *matCellDef="let item">
+            <div class="action flex justify-center">
+              <div class="item">
+                <i class="bi bi-pencil-square icon-edit" (click)="onPopup(item.id)"></i>
+              </div>
+              <div class="item icon-delete">
+                <i class="bi bi-trash3" (click)="onDelete(item.id)"></i>
+              </div>
+            </div>
+          </td>
+        </ng-container>
+
+      </table>
+    </div>
+    <div *ngIf="dataSourceCount === 0" class="no-data"></div>
+    <mat-paginator [pageSizeOptions]="pageSizeOptions" showFirstLastButtons (page)="getData($event)"></mat-paginator>
+  </div>
+</div>

src/app/pages/users/group/index/user-group.component.ts

@@ -0,0 +1,68 @@
+import { Component, OnInit } from "@angular/core";
+import { BaseListComponent } from "../../../../@common/base/base-list.component";
+import { lastValueFrom } from "rxjs";
+import { MatDialog } from "@angular/material/dialog";
+import { AppService } from "../../../../app.service";
+import { API, EAction, EText } from "../../../../@config/app";
+import { UserGroupDoComponent } from "../do/user-group-do.component";
+
+@Component({
+  selector: "app-users-index",
+  templateUrl: "./user-group.component.html",
+  styleUrls: []
+})
+export class UserGroupComponent extends BaseListComponent implements OnInit {
+
+  pageTitle = "สิทธิ์การใช้งาน";
+  apiUrl: string = API.userGroup;
+  displayedColumns: string[] = ["action", "name", "desc"];
+  auth : any = {};
+
+  constructor(
+    private dialog: MatDialog,
+    public appService: AppService
+  ) {
+    super();
+  }
+
+  async ngOnInit() {
+    this.auth = this.appService.auth();
+    await this.getData();
+  }
+
+  async getData($event?: any) {
+    const dataSource = await lastValueFrom(this.appService.get(this.setParams(this.apiUrl, $event)));
+    this.dataSource = this.setDataSource<any>(dataSource);
+  }
+
+  onFilter() {
+
+  }
+
+  onSort($event: any) {
+    console.log($event);
+  }
+
+  async onPopup(ids?: any) {
+    this.dialogConfig.data.ids = ids;
+    this.dialogConfig.data.action = ids ? EAction.UPDATE : EAction.CREATE;
+    const dialogRef = this.dialog.open(UserGroupDoComponent, this.dialogConfig);
+    const afterClosed = await lastValueFrom(dialogRef.afterClosed());
+    if (afterClosed === EAction.GET) {
+      await this.getData(this.getCurrentPage());
+    }
+  }
+
+  async onDelete(ids: any) {
+    const sweetalert = await lastValueFrom(this.appService.confirm(EAction.DELETE));
+    if (!sweetalert.isConfirmed) return;
+    try {
+      await lastValueFrom(this.appService.delete(this.apiUrl, ids));
+      await this.appService.message(EAction.SUCCESS, EText.DELETE);
+      await this.getData(this.getCurrentPage());
+    } catch (err) {
+      this.appService.message(EAction.ERROR, EText.ERROR);
+    }
+  }
+
+}

src/app/pages/users/manage/do/user-manage-do.component.html

@@ -0,0 +1,65 @@
+<form class="dialog-main form-dialog " #ngf="ngForm" (ngSubmit)="onSubmit(ngf)" autocomplete="off">
+  <div class="dialog-main">
+    <div class="dialog-header">
+      <h2>ข้อมูล {{title}}</h2>
+    </div>
+    <div class="dialog-body">
+      <div class="grid grid-cols-12 gap-4 md:gap-2 ">
+        <div class="col-span-6 md:col-span-12">
+          <mat-label>สิทธิ์การใช้งาน</mat-label>
+          <ng-select placeholder="เลือกสิทธิ์การใช้งาน" name="userGroupId" #userGroupId="ngModel" [(ngModel)]="dataForm.userGroupId"  appendTo="body" required>
+            <ng-option *ngFor="let item of userGroup" [value]="item.id">{{item.name}}</ng-option>
+          </ng-select>
+        </div>
+        <div class="col-span-6 md:hidden"></div>
+
+        <div class="col-span-6 md:col-span-12">
+          <mat-label>ชื่อเข้าสู่ระบบ</mat-label>
+          <mat-form-field>
+            <input matInput [(ngModel)]="dataForm.username" name="username" #username="ngModel" required>
+            <mat-error *ngIf="isFieldValid(ngf, username)"> กรุณากรอกข้อมูล</mat-error>
+          </mat-form-field>
+        </div>
+        <div class="col-span-6 md:col-span-12">
+          <mat-label>รหัสผ่าน</mat-label>
+          <mat-form-field>
+            <input matInput type="password" [(ngModel)]="dataForm.password" name="password" #password="ngModel" [required]="!dataForm.id">
+            <mat-error *ngIf="isFieldValid(ngf, password)"> กรุณากรอกข้อมูล</mat-error>
+          </mat-form-field>
+        </div>
+        <div class="col-span-6 md:col-span-12">
+          <mat-label>ชื่อ นามสกุล</mat-label>
+          <mat-form-field>
+            <input matInput [(ngModel)]="dataForm.name" name="name" #name="ngModel" required>
+            <mat-error *ngIf="isFieldValid(ngf, name)"> กรุณากรอกข้อมูล</mat-error>
+          </mat-form-field>
+        </div>
+        <div class="col-span-6 md:col-span-12">
+          <mat-label>Email</mat-label>
+          <mat-form-field>
+            <input matInput [(ngModel)]="dataForm.email" name="email" #email="ngModel" required>
+            <mat-error *ngIf="isFieldValid(ngf, email)"> กรุณากรอกข้อมูล</mat-error>
+          </mat-form-field>
+        </div>
+
+
+        <div class="col-span-6 md:col-span-12">
+          <mat-label>หมายเลขโทรศัพท์</mat-label>
+          <mat-form-field>
+            <input matInput [(ngModel)]="dataForm.phone" name="phone" #phone="ngModel" required>
+            <mat-error *ngIf="isFieldValid(ngf, phone)"> กรุณากรอกข้อมูล</mat-error>
+          </mat-form-field>
+        </div>
+
+        <div class="col-span-6 md:col-span-12">
+          <div style="height: 25px;"></div>
+          <mat-slide-toggle [(ngModel)]="dataForm.status" name="status">เปิดใช้งาน</mat-slide-toggle>
+        </div>
+      </div>
+    </div>
+    <div class="dialog-footer">
+      <button type="submit" class="btn btn-submit">บันทึก</button>
+      <button type="button" mat-dialog-close class="btn btn-dialog-close">ยกเลิก</button>
+    </div>
+  </div>
+</form>

src/app/pages/users/manage/do/user-manage-do.component.ts

@@ -0,0 +1,81 @@
+import { ChangeDetectorRef, Component, Inject, OnInit } from "@angular/core";
+import { API, EAction, EText } from "../../../../@config/app";
+import { MAT_DIALOG_DATA, MatDialogRef } from "@angular/material/dialog";
+import { AppService } from "../../../../app.service";
+import { lastValueFrom } from "rxjs";
+import { BasePopupComponent } from "../../../../@common/base/base-popup.component";
+import { IDialogConfigData } from "../../../../@common/interface/Dialog";
+
+@Component({
+  selector: "app-users-do",
+  templateUrl: "./user-manage-do.component.html",
+  styleUrls: []
+})
+export class UserManageDoComponent extends BasePopupComponent implements OnInit {
+
+  title = "ผู้ใช้งาน";
+  apiUrl: string = API.users;
+
+
+  auth : any = {};
+  userGroup : any = [];
+
+
+  constructor(
+    public dialogRef: MatDialogRef<UserManageDoComponent>,
+    @Inject(MAT_DIALOG_DATA) public dialog: IDialogConfigData,
+    public changeDetectorRef: ChangeDetectorRef,
+    public appService: AppService
+  ) {
+    super();
+  }
+
+  async ngOnInit() {
+    this.auth = this.appService.auth();
+    this.userGroup = await lastValueFrom(this.appService.get(`${API.userGroup}?showAll=true`));
+    if (this.dialog.action === EAction.UPDATE) await this.getData();
+  }
+
+  async getData() {
+    if (!this.dialog.ids) this.appService.message(EAction.INFO, EText.NO_DATA);
+    this.ids = this.dialog.ids;
+    try {
+      this.dataForm = await lastValueFrom(this.appService.get(`${this.apiUrl}/getById/${this.ids}`));
+      delete this.dataForm.password;
+      this.changeDetectorRef.detectChanges();
+    } catch (err) {
+      this.appService.message(EAction.ERROR, EText.ERROR);
+      this.dialogRef.close();
+    }
+  }
+
+  async onSubmit(form : any) {
+    if (!form.valid) return false;
+    this.dataForm.userType = 'ADMIN';
+    if (this.dialog.action === EAction.CREATE) return await this.onCreate();
+    if (this.dialog.action === EAction.UPDATE) return await this.onUpdate();
+  }
+
+  async onCreate() {
+    try {
+      await lastValueFrom(this.appService.post(this.apiUrl, this.dataForm));
+      await this.appService.message(EAction.SUCCESS, EText.CREATE);
+      await this.dialogRef.close(EAction.GET);
+    } catch (err) {
+      this.appService.message(EAction.ERROR, EText.ERROR);
+      this.dialogRef.close(EAction.GET);
+    }
+  }
+
+  async onUpdate() {
+    try {
+      await lastValueFrom(this.appService.post(`${this.apiUrl}/update/${this.ids}`, this.dataForm));
+      await this.appService.message(EAction.SUCCESS, EText.UPDATE);
+      await this.dialogRef.close(EAction.GET);
+    } catch (err) {
+      this.appService.message(EAction.ERROR, EText.ERROR);
+      this.dialogRef.close(EAction.GET);
+    }
+  }
+
+}

src/app/pages/users/manage/index/user-manage.component.html

@@ -0,0 +1,84 @@
+<div class="card card-table">
+  <div class="card-header text-right">
+    <button type="button" class="btn btn-create" (click)="onPopup()">
+      <i class="bi bi-plus"></i>
+      เพิ่มผู้ใช้งาน
+    </button>
+  </div>
+  <div class="card-body">
+    <div class="table-wrap">
+      <table class="table table-main" mat-table [dataSource]="dataSource" matSort (matSortChange)="onSort($event)">
+        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+
+        <ng-container matColumnDef="code">
+          <th mat-header-cell *matHeaderCellDef class="tac">รหัส</th>
+          <td mat-cell *matCellDef="let item" width="150" class="tac">
+            {{item.code}}
+          </td>
+        </ng-container>
+
+        <ng-container matColumnDef="name">
+          <th mat-header-cell *matHeaderCellDef class="tal">ชื่อผู้ใช้งาน</th>
+          <td mat-cell *matCellDef="let item" class="">
+            {{item.name }}
+          </td>
+        </ng-container>
+
+        <ng-container matColumnDef="email">
+          <th mat-header-cell *matHeaderCellDef class="tal">อีเมล์</th>
+          <td mat-cell *matCellDef="let item" class="">
+            {{item.email }}
+          </td>
+        </ng-container>
+        <ng-container matColumnDef="userGroupId">
+          <th mat-header-cell *matHeaderCellDef class="tal">สิทธิ์การใช้งาน</th>
+          <td mat-cell *matCellDef="let item" class="">
+            {{item.userGroup?.name }}
+          </td>
+        </ng-container>
+
+        <ng-container matColumnDef="phone">
+          <th mat-header-cell *matHeaderCellDef class="tal">หมายเลขโทรศัพท์</th>
+          <td mat-cell *matCellDef="let item" class="">
+            {{item.phone }}
+          </td>
+        </ng-container>
+
+
+
+        <ng-container matColumnDef="createdDate">
+          <th mat-header-cell *matHeaderCellDef class="tal">User Create</th>
+          <td mat-cell *matCellDef="let item" class="">
+            <span *ngIf="item?.created">{{item?.created?.name}}-</span>{{item.createdDate | date : 'dd/MM/YYYY' }}
+          </td>
+        </ng-container>
+
+        <ng-container matColumnDef="status">
+          <th mat-header-cell *matHeaderCellDef class="tac" width="100">สถานะ</th>
+          <td mat-cell *matCellDef="let item" class="tac">
+            <div *ngIf="item.status" class="status status-active">ใช้งาน</div>
+            <div *ngIf="!item.status" class="status status-disabled">ปิดใช้งาน</div>
+          </td>
+        </ng-container>
+
+        <ng-container matColumnDef="action">
+          <th mat-header-cell *matHeaderCellDef width="100">  </th>
+          <td mat-cell *matCellDef="let item">
+            <div class="action flex justify-center">
+              <div class="item">
+                <i class="bi bi-pencil-square icon-edit" (click)="onPopup(item.id)"></i>
+              </div>
+              <div class="item icon-delete">
+                <i class="bi bi-trash3" (click)="onDelete(item.id)"></i>
+              </div>
+            </div>
+          </td>
+        </ng-container>
+
+      </table>
+    </div>
+    <div *ngIf="dataSourceCount === 0" class="no-data"></div>
+    <mat-paginator [pageSizeOptions]="pageSizeOptions" showFirstLastButtons (page)="getData($event)"></mat-paginator>
+  </div>
+</div>

src/app/pages/users/manage/index/user-manage.component.ts

@@ -0,0 +1,69 @@
+import { Component, OnInit } from "@angular/core";
+import { BaseListComponent } from "../../../../@common/base/base-list.component";
+import { lastValueFrom } from "rxjs";
+import { MatDialog } from "@angular/material/dialog";
+import { AppService } from "../../../../app.service";
+import { API, EAction, EText } from "../../../../@config/app";
+import { UserManageDoComponent } from "../do/user-manage-do.component";
+
+@Component({
+  selector: "app-users-index",
+  templateUrl: "./user-manage.component.html",
+  styleUrls: []
+})
+export class UserManageComponent extends BaseListComponent implements OnInit {
+
+  pageTitle = "ผู้ใช้งาน";
+  apiUrl: string = API.users;
+  displayedColumns: string[] = ["action", "name","phone", "userGroupId", "status"];
+  auth : any = {};
+
+  constructor(
+    private dialog: MatDialog,
+    public appService: AppService
+  ) {
+    super();
+  }
+
+  async ngOnInit() {
+    this.auth = this.appService.auth();
+    await this.getData();
+  }
+
+  async getData($event?: any) {
+    this.dataFilter.userType = "ADMIN";
+    const dataSource = await lastValueFrom(this.appService.get(this.setParams(this.apiUrl, $event)));
+    this.dataSource = this.setDataSource<any>(dataSource);
+  }
+
+  onFilter() {
+
+  }
+
+  onSort($event: any) {
+    console.log($event);
+  }
+
+  async onPopup(ids?: any) {
+    this.dialogConfig.data.ids = ids;
+    this.dialogConfig.data.action = ids ? EAction.UPDATE : EAction.CREATE;
+    const dialogRef = this.dialog.open(UserManageDoComponent, this.dialogConfig);
+    const afterClosed = await lastValueFrom(dialogRef.afterClosed());
+    if (afterClosed === EAction.GET) {
+      await this.getData(this.getCurrentPage());
+    }
+  }
+
+  async onDelete(ids: any) {
+    const sweetalert = await lastValueFrom(this.appService.confirm(EAction.DELETE));
+    if (!sweetalert.isConfirmed) return;
+    try {
+      await lastValueFrom(this.appService.delete(this.apiUrl, ids));
+      await this.appService.message(EAction.SUCCESS, EText.DELETE);
+      await this.getData(this.getCurrentPage());
+    } catch (err) {
+      this.appService.message(EAction.ERROR, EText.ERROR);
+    }
+  }
+
+}

src/app/pages/users/users-routing.module.ts

@@ -0,0 +1,25 @@
+import { NgModule } from "@angular/core";
+import { RouterModule, Routes } from "@angular/router";
+import { UserManageComponent } from "./manage/index/user-manage.component";
+import { UserManageDoComponent } from "./manage/do/user-manage-do.component";
+import { UserGroupComponent } from "./group/index/user-group.component";
+import { UserGroupDoComponent } from "./group/do/user-group-do.component";
+
+const routes: Routes = [
+  { path: "manage", component: UserManageComponent },
+  { path: "group", component: UserGroupComponent }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class UsersRoutingModule {
+}
+
+export const RoutingComponents = [
+  UserManageComponent,
+  UserManageDoComponent,
+  UserGroupComponent,
+  UserGroupDoComponent
+];

src/app/pages/users/users.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import {RoutingComponents, UsersRoutingModule} from './users-routing.module';
+import {AppSharedModule} from "../../app.shared";
+
+@NgModule({
+  declarations: [
+    ...RoutingComponents,
+  ],
+  imports: [
+    AppSharedModule,
+    UsersRoutingModule
+  ],
+})
+export class UsersModule {}