refactor user accounts structure

src/app/shared/abstractClasses/abstract-select.component.ts

@@ -4,7 +4,7 @@ import { FormControl } from '@angular/forms';
 import { Observable } from 'rxjs';
 
 export interface ISelectItem {
-  id: number;
+  id: string;
   name: string;
 }
 

src/app/shared/catalog/accountTypes/components/select.component.ts

@@ -0,0 +1,44 @@
+import ISummary from '@/core/models/summary';
+import { AbstractSelectComponent, ISelectItem } from '@/shared/abstractClasses';
+import { UikitFieldComponent } from '@/uikit';
+import { Component, inject, Input } from '@angular/core';
+import { ReactiveFormsModule } from '@angular/forms';
+import { Select } from 'primeng/select';
+import { Observable } from 'rxjs';
+import { AccountType, AccountTypeTranslates } from 'src/assets/constants';
+import { CatalogsService } from '../../service';
+
+@Component({
+  selector: 'catalog-accountTypes-select',
+  templateUrl: '../../template.html',
+  imports: [UikitFieldComponent, Select, ReactiveFormsModule],
+})
+export class CatalogAccountTypeSelectComponent extends AbstractSelectComponent<
+  ISummary,
+  ISelectItem[]
+> {
+  @Input() override showClear: boolean = false;
+  @Input() label: string = '';
+  private readonly service = inject(CatalogsService);
+
+  get preparedLabel() {
+    return this.label || 'انتخاب نوع حساب';
+  }
+
+  ngOnInit() {
+    this.getData();
+  }
+
+  getDataService() {
+    return new Observable<ISelectItem[]>((observer) => {
+      const accountTypes = [] as ISelectItem[];
+      Object.entries(AccountType).forEach(([key, value]) => {
+        accountTypes.push({
+          id: value,
+          name: AccountTypeTranslates[value],
+        });
+      });
+      observer.next(accountTypes);
+    });
+  }
+}

src/app/shared/catalog/accountTypes/index.ts

@@ -0,0 +1 @@
+export * from './components/select.component';

src/app/shared/catalog/roleTypes/components/select.component.ts

@@ -0,0 +1,91 @@
+import ISummary from '@/core/models/summary';
+import { AbstractSelectComponent, ISelectItem } from '@/shared/abstractClasses';
+import { UikitFieldComponent } from '@/uikit';
+import { Component, Input } from '@angular/core';
+import { ReactiveFormsModule } from '@angular/forms';
+import { Select } from 'primeng/select';
+import { Observable } from 'rxjs';
+import {
+  BusinessRole,
+  businessRoleTranslate,
+  ComplexRole,
+  complexRoleTranslate,
+  PartnerRole,
+  partnerRoleTranslate,
+  POSRole,
+  posRoleTranslate,
+  ProviderRole,
+  providerRoleTranslate,
+} from 'src/assets/constants';
+
+@Component({
+  selector: 'catalog-roleTypes-select',
+  templateUrl: '../../template.html',
+  imports: [UikitFieldComponent, Select, ReactiveFormsModule],
+})
+export class CatalogRoleTypeSelectComponent extends AbstractSelectComponent<
+  ISummary,
+  ISelectItem[]
+> {
+  @Input() override showClear: boolean = false;
+  @Input() label: string = '';
+  @Input({ required: true }) type!: 'PARTNER' | 'PROVIDER' | 'BUSINESS' | 'COMPLEX' | 'POS';
+
+  get preparedLabel() {
+    return this.label || 'انتخاب سطح دسترسی';
+  }
+
+  ngOnInit() {
+    this.getData();
+  }
+
+  getDataService() {
+    return new Observable<ISelectItem[]>((observer) => {
+      const roleTypes = [] as ISelectItem[];
+      switch (this.type) {
+        case 'PARTNER':
+          Object.values(PartnerRole).forEach((value) => {
+            roleTypes.push({
+              id: value,
+              name: partnerRoleTranslate[value],
+            });
+          });
+          break;
+        case 'PROVIDER':
+          Object.values(ProviderRole).forEach((value) => {
+            roleTypes.push({
+              id: value,
+              name: providerRoleTranslate[value],
+            });
+          });
+          break;
+        case 'BUSINESS':
+          Object.values(BusinessRole).forEach((value) => {
+            roleTypes.push({
+              id: value,
+              name: businessRoleTranslate[value],
+            });
+          });
+          break;
+        case 'COMPLEX':
+          Object.values(ComplexRole).forEach((value) => {
+            roleTypes.push({
+              id: value,
+              name: complexRoleTranslate[value],
+            });
+          });
+          break;
+        case 'POS':
+          Object.values(POSRole).forEach((value) => {
+            roleTypes.push({
+              id: value,
+              name: posRoleTranslate[value],
+            });
+          });
+          break;
+      }
+
+      observer.next(roleTypes);
+    });
+  }
+}

src/app/shared/catalog/roleTypes/index.ts

@@ -0,0 +1 @@
+export * from './components/select.component';

src/app/shared/components/pageDataList/page-data-list.component.ts

@@ -34,9 +34,9 @@ export interface IColumn<T = any> {
 @Component({
   selector: 'app-page-data-list',
   templateUrl: './page-data-list.component.html',
-  // host: {
-  //   class: 'inline-block w-full',
-  // },
+  host: {
+    class: 'block w-full',
+  },
   imports: [
     CommonModule,
     TableActionRowComponent,
@@ -56,11 +56,11 @@ export class PageDataListComponent<I> {
     private renderer: Renderer2,
   ) {}
 
-  @Input() pageTitle!: string;
+  @Input({ required: true }) pageTitle!: string;
   @Input() addNewCtaLabel?: string;
-  @Input() columns!: IColumn[];
-  @Input() items!: I[];
-  @Input() loading!: boolean;
+  @Input({ required: true }) columns!: IColumn[];
+  @Input({ required: true }) items!: I[];
+  @Input({ required: true }) loading!: boolean;
   @Input() emptyPlaceholderTitle: string = 'موردی برای نمایش وجود ندارد';
   @Input() emptyPlaceholderDescription?: string = '';
   @Input() emptyPlaceholderCtaLabel?: string;
@@ -73,7 +73,7 @@ export class PageDataListComponent<I> {
   @Input() showAdd: boolean = false;
   @Input() isFiltered: boolean = false;
   @Input() fullHeight?: boolean = false;
-  @Input() height: string = '500px';
+  @Input() height: string = '';
 
   @ContentChild('filter', { static: true }) filter!: TemplateRef<any> | null;
   @ContentChild('caption', { static: true }) caption!: TemplateRef<any> | null;
@@ -87,11 +87,12 @@ export class PageDataListComponent<I> {
   filterDrawerVisible = signal<boolean>(false);
 
   ngOnInit() {
-    this.renderer.setStyle(
-      this.host.nativeElement,
-      'height',
-      this.fullHeight ? '100cqmin' : this.height,
-    );
+    if (this.height)
+      this.renderer.setStyle(
+        this.host.nativeElement,
+        'height',
+        this.fullHeight ? '100cqmin' : this.height,
+      );
     // if (this.fullHeight) {
     // }
   }

src/app/shared/components/passwordInput/password-input.component.html

@@ -0,0 +1,28 @@
+<uikit-field label="رمز عبور" class="" [control]="passwordControl">
+  <p-password
+    id="password1"
+    name="password"
+    formControlName="password"
+    autocomplete="password"
+    [toggleMask]="true"
+    [fluid]="true"
+    [feedback]="false"
+    [invalid]="passwordControl.touched && passwordControl.invalid"
+  />
+  <span class="text-xs mt-1 mb-3 text-muted-color">
+    رمز باید حداقل ۸ کاراکتر بوده و شامل حداقل یک حرف بزرگ، یک حرف کوچک، یک عدد و یک کاراکتر ویژه باشد.
+  </span>
+</uikit-field>
+
+<uikit-field label="تکرار رمز عبور" class="" [control]="confirmPasswordControl">
+  <p-password
+    id="confirmPassword"
+    name="confirmPassword"
+    formControlName="confirmPassword"
+    autocomplete="new-password"
+    [toggleMask]="true"
+    [fluid]="true"
+    [feedback]="false"
+    [invalid]="confirmPasswordControl.touched && confirmPasswordControl.invalid"
+  />
+</uikit-field>

src/app/shared/components/passwordInput/password-input.component.ts

@@ -0,0 +1,15 @@
+import { UikitFieldComponent } from '@/uikit';
+import { Component, Input } from '@angular/core';
+import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { Password } from 'primeng/password';
+
+@Component({
+  selector: 'shared-password-input',
+  templateUrl: './password-input.component.html',
+  imports: [UikitFieldComponent, Password, ReactiveFormsModule],
+})
+export class SharedPasswordInputComponent {
+  @Input({ required: true }) passwordControl = new FormControl<string>('');
+  @Input({ required: true }) confirmPasswordControl = new FormControl<string>('');
+  @Input({ required: true }) formGroup!: FormGroup<any>;
+}