create consumer pos list page

src/app/domains/consumer/modules/poses/components/form.component.html

@@ -0,0 +1,13 @@
+<p-dialog
+  [header]="preparedTitle"
+  [(visible)]="visible"
+  [modal]="true"
+  [style]="{ width: '500px' }"
+  [closable]="true"
+  (onHide)="close()"
+>
+  <form [formGroup]="form" (submit)="submit()" class="flex flex-col gap-4">
+    <app-input label="عنوان" [control]="form.controls.name" name="name" />
+    <app-form-footer-actions [submitLabel]="'ذخیره'" [loading]="submitLoading()" (onCancel)="close()" />
+  </form>
+</p-dialog>

src/app/domains/consumer/modules/poses/components/form.component.ts

@@ -0,0 +1,40 @@
+// import { CatalogRolesComponent } from '@/shared/catalog/roles';
+import { CONSUMER_COMPONENTS_CONST } from '@/domains/consumer/constants';
+import { AbstractFormDialog } from '@/shared/abstractClasses';
+import { InputComponent } from '@/shared/components';
+import { FormFooterActionsComponent } from '@/shared/components/formFooterActions/form-footer-actions.component';
+import { Component, inject, Input } from '@angular/core';
+import { ReactiveFormsModule } from '@angular/forms';
+import { Dialog } from 'primeng/dialog';
+import { IPosRequest, IPosResponse } from '../models';
+import { ConsumerPosesService } from '../services/main.service';
+
+@Component({
+  selector: 'consumer-pos-form',
+  templateUrl: './form.component.html',
+  imports: [ReactiveFormsModule, Dialog, InputComponent, FormFooterActionsComponent],
+})
+export class ConsumerPosFormComponent extends AbstractFormDialog<IPosRequest, IPosResponse> {
+  private readonly service = inject(ConsumerPosesService);
+
+  @Input({ required: true }) posId!: string;
+
+  initForm() {
+    return CONSUMER_COMPONENTS_CONST.pos.initForm(this.fb, this.initialValues);
+  }
+
+  form = this.initForm();
+
+  get preparedTitle() {
+    return `ویرایش پایانه فروش ${this.initialValues?.name}`;
+  }
+
+  override ngOnChanges(): void {
+    this.form = this.initForm();
+  }
+
+  submitForm() {
+    const formValue = this.form.value as IPosRequest;
+    return this.service.update(this.posId, formValue);
+  }
+}

src/app/domains/consumer/modules/poses/components/layout.component.html

@@ -0,0 +1,5 @@
+@if (loading()) {
+  <shared-page-loading />
+} @else {
+  <router-outlet></router-outlet>
+}

src/app/domains/consumer/modules/poses/components/layout.component.ts

@@ -0,0 +1,28 @@
+import { PageLoadingComponent } from '@/shared/components/page-loading.component';
+import pageParamsUtils from '@/utils/page-params.utils';
+import { Component, computed, inject } from '@angular/core';
+import { ActivatedRoute, RouterOutlet } from '@angular/router';
+import { ConsumerPosStore } from '../store/pos.store';
+
+@Component({
+  selector: 'consumer-pos-layout',
+  templateUrl: './layout.component.html',
+  imports: [PageLoadingComponent, RouterOutlet],
+})
+export class ConsumerPosLayoutComponent {
+  private readonly store = inject(ConsumerPosStore);
+  private readonly route = inject(ActivatedRoute);
+
+  readonly loading = computed(() => this.store.loading());
+  readonly pageParams = computed(() => pageParamsUtils(this.route));
+
+  readonly posId = computed(() => this.pageParams()['posId']!);
+
+  getData() {
+    this.store.getData(this.posId());
+  }
+
+  ngOnInit() {
+    this.getData();
+  }
+}

src/app/domains/consumer/modules/poses/components/list.component.html

@@ -0,0 +1,22 @@
+<app-page-data-list
+  pageTitle="لیست پایانه‌های فروش"
+  [columns]="columns"
+  emptyPlaceholderTitle="پایانه‌ی فروشی یافت نشد."
+  [items]="items()"
+  [loading]="loading()"
+  [showDetails]="true"
+  [showEdit]="true"
+  (onEdit)="onEditClick($event)"
+  (onDetails)="toSinglePage($event)"
+>
+  <ng-template #toPosLandingAction let-item>
+    <p-button type="button" variant="outlined" (onClick)="toPosLanding(item.id)"> ورود به پایانه </p-button>
+  </ng-template>
+</app-page-data-list>
+<consumer-pos-form
+  [(visible)]="visibleForm"
+  [editMode]="editMode()"
+  [posId]="selectedItemForEdit()?.id || ''"
+  [initialValues]="selectedItemForEdit() || undefined"
+  (onSubmit)="refresh()"
+/>

src/app/domains/consumer/modules/poses/components/list.component.ts

@@ -0,0 +1,78 @@
+// import { CatalogRoleTagComponent } from '@/shared/catalog/roles';
+import { CONSUMER_COMPONENTS_CONST } from '@/domains/consumer/constants';
+import { AbstractList } from '@/shared/abstractClasses/abstract-list';
+import {
+  IColumn,
+  PageDataListComponent,
+} from '@/shared/components/pageDataList/page-data-list.component';
+import { Component, inject, Input, TemplateRef, ViewChild } from '@angular/core';
+import { Router } from '@angular/router';
+import { CookieService } from 'ngx-cookie-service';
+import { Button } from 'primeng/button';
+import { COOKIE_KEYS } from 'src/assets/constants';
+import { ConsumerPosesNamedRoutes } from '../constants';
+import { IPosResponse } from '../models';
+import { ConsumerPosesService } from '../services/main.service';
+import { ConsumerPosFormComponent } from './form.component';
+
+@Component({
+  selector: 'consumer-pos-list',
+  templateUrl: './list.component.html',
+  imports: [PageDataListComponent, ConsumerPosFormComponent, Button],
+})
+export class ConsumerPosListComponent extends AbstractList<IPosResponse> {
+  @Input() fullHeight?: boolean;
+  @Input() header: IColumn[] = CONSUMER_COMPONENTS_CONST.pos.columns;
+
+  private readonly service = inject(ConsumerPosesService);
+  private readonly cookieService = inject(CookieService);
+  private readonly router = inject(Router);
+
+  @ViewChild('toPosLandingAction', { static: true }) toPosLandingAction!: TemplateRef<any>;
+
+  override setColumns(): void {
+    this.columns = [
+      ...this.header.filter((header) =>
+        ['name', 'status', 'pos_type'].includes(header.field as string),
+      ),
+      {
+        field: 'complex.business_activity',
+        header: 'عنوان کسب و کار',
+        type: 'nested',
+        nestedPath: 'complex.business_activity.name',
+      },
+      {
+        field: 'complex',
+        header: 'عنوان فروشگاه',
+        type: 'nested',
+        nestedPath: 'complex.name',
+      },
+      {
+        field: 'customAction',
+        header: '',
+        width: '128px',
+        minWidth: '128px',
+        customDataModel: this.toPosLandingAction,
+      },
+    ];
+  }
+
+  override getDataRequest() {
+    return this.service.getAll();
+  }
+
+  toSinglePage(item: IPosResponse) {
+    this.router.navigateByUrl(ConsumerPosesNamedRoutes.pos.meta.pagePath!(item.id));
+  }
+
+  toPosLanding(posId: string) {
+    this.cookieService.set(COOKIE_KEYS.POS_ID, '', new Date());
+    this.cookieService.set(COOKIE_KEYS.POS_ID, posId, {
+      sameSite: 'Lax', // or 'Strict' for same-site requests only
+      secure: false,
+      path: '/',
+      domain: 'localhost',
+    });
+    window.open('/pos', '_blank');
+  }
+}

src/app/domains/consumer/modules/poses/constants/apiRoutes/index.ts

@@ -0,0 +1,6 @@
+const baseUrl = () => `/api/v1/consumer/poses`;
+
+export const CONSUMER_POSES_API_ROUTES = {
+  list: () => `${baseUrl()}`,
+  single: (posId: string) => `${baseUrl()}/${posId}`,
+};

src/app/domains/consumer/modules/poses/constants/index.ts

@@ -0,0 +1,2 @@
+export * from './apiRoutes';
+export * from './routes';

src/app/domains/consumer/modules/poses/constants/routes/index.ts

@@ -0,0 +1,44 @@
+import { NamedRoutes } from '@/core';
+import { Routes } from '@angular/router';
+
+export type TPosesRouteNames = 'poses' | 'pos';
+
+const baseUrl = `/consumer/poses`;
+
+export const ConsumerPosesNamedRoutes: NamedRoutes<TPosesRouteNames> = {
+  poses: {
+    path: 'poses',
+    loadComponent: () =>
+      import('../../views/list.component').then((m) => m.ConsumerPosListPageComponent),
+    // @ts-ignore
+    meta: {
+      title: 'پایانه‌های فروش',
+      pagePath: () => baseUrl,
+    },
+  },
+  pos: {
+    path: 'poses/:posId',
+    loadComponent: () =>
+      import('../../views/single.component').then((m) => m.ConsumerPosPageComponent),
+    // @ts-ignore
+    meta: {
+      title: 'پایانه‌ی فروش',
+      pagePath: (posId: string) => `${baseUrl}/${posId}`,
+    },
+  },
+};
+
+export const CONSUMER_POSES_ROUTES: Routes = [
+  ConsumerPosesNamedRoutes.poses,
+  {
+    path: ConsumerPosesNamedRoutes.pos.path,
+    loadComponent: () =>
+      import('../../components/layout.component').then((m) => m.ConsumerPosLayoutComponent),
+    children: [
+      {
+        path: '',
+        loadComponent: ConsumerPosesNamedRoutes.pos.loadComponent,
+      },
+    ],
+  },
+];

src/app/domains/consumer/modules/poses/models/index.ts

@@ -0,0 +1 @@
+export * from './io';

src/app/domains/consumer/modules/poses/models/io.d.ts

@@ -0,0 +1,18 @@
+import ISummary from '@/core/models/summary';
+
+export interface IPosRawResponse {
+  id: string;
+  name: string;
+  serial: string;
+  model?: string;
+  status: string;
+  pos_type: string;
+  complex: ISummary;
+  device?: ISummary;
+  provider?: ISummary;
+}
+export interface IPosResponse extends IPosRawResponse {}
+
+export interface IPosRequest {
+  name: string;
+}

src/app/domains/consumer/modules/poses/services/main.service.ts

@@ -0,0 +1,24 @@
+import { IPaginatedResponse } from '@/core/models/service.model';
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { CONSUMER_POSES_API_ROUTES } from '../constants';
+import { IPosRawResponse, IPosRequest, IPosResponse } from '../models';
+
+@Injectable({ providedIn: 'root' })
+export class ConsumerPosesService {
+  constructor(private http: HttpClient) {}
+
+  private apiRoutes = CONSUMER_POSES_API_ROUTES;
+
+  getAll(): Observable<IPaginatedResponse<IPosResponse>> {
+    return this.http.get<IPaginatedResponse<IPosRawResponse>>(this.apiRoutes.list());
+  }
+  getSingle(posId: string): Observable<IPosResponse> {
+    return this.http.get<IPosRawResponse>(this.apiRoutes.single(posId));
+  }
+
+  update(posId: string, data: IPosRequest): Observable<IPosResponse> {
+    return this.http.patch<IPosRawResponse>(this.apiRoutes.single(posId), data);
+  }
+}

src/app/domains/consumer/modules/poses/store/pos.store.ts

@@ -0,0 +1,75 @@
+import { EntityState, EntityStore } from '@/core/state';
+import { computed, inject, Injectable } from '@angular/core';
+import { MenuItem } from 'primeng/api';
+import { catchError, finalize } from 'rxjs';
+import { consumerPosesNamedRoutes } from '../../businessActivities/constants/routes/poses';
+import { IPosResponse } from '../models';
+import { ConsumerPosesService } from '../services/main.service';
+
+interface ConsumerPosState extends EntityState<IPosResponse> {
+  breadcrumbItems: MenuItem[];
+}
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ConsumerPosStore extends EntityStore<IPosResponse, ConsumerPosState> {
+  private readonly service = inject(ConsumerPosesService);
+  constructor() {
+    super({
+      loading: false,
+      error: null,
+      entity: null,
+      initialized: false,
+      isRefreshing: false,
+      breadcrumbItems: [],
+    });
+  }
+
+  breadcrumbItems = computed(() => this._state().breadcrumbItems);
+
+  private setBreadcrumb(posId: string) {
+    this.patchState({
+      breadcrumbItems: [
+        {
+          ...consumerPosesNamedRoutes.poses.meta,
+          routerLink: consumerPosesNamedRoutes.poses.meta.pagePath!(),
+        },
+        {
+          title: this.entity()?.name,
+          routerLink: consumerPosesNamedRoutes.pos.meta.pagePath!(posId),
+        },
+      ],
+    });
+  }
+
+  getData(posId: string) {
+    this.patchState({ loading: true });
+    this.service
+      .getSingle(posId)
+      .pipe(
+        finalize(() => {
+          this.patchState({ loading: false });
+        }),
+        catchError((error) => {
+          this.setError(error);
+          throw error;
+        }),
+      )
+      .subscribe((entity) => {
+        this.setEntity(entity);
+        this.setBreadcrumb(posId);
+      });
+  }
+
+  override reset(): void {
+    this.setState({
+      loading: false,
+      error: null,
+      entity: null,
+      initialized: false,
+      isRefreshing: false,
+      breadcrumbItems: [],
+    });
+  }
+}

src/app/domains/consumer/modules/poses/views/index.ts

@@ -0,0 +1,2 @@
+export * from './list.component';
+export * from './single.component';

src/app/domains/consumer/modules/poses/views/list.component.html

@@ -0,0 +1 @@
+<consumer-pos-list />

src/app/domains/consumer/modules/poses/views/list.component.ts

@@ -0,0 +1,10 @@
+// import { CatalogRoleTagComponent } from '@/shared/catalog/roles';
+import { Component } from '@angular/core';
+import { ConsumerPosListComponent } from '../components/list.component';
+
+@Component({
+  selector: 'consumer-poses',
+  templateUrl: './list.component.html',
+  imports: [ConsumerPosListComponent],
+})
+export class ConsumerPosListPageComponent {}

src/app/domains/consumer/modules/poses/views/single.component.html

@@ -0,0 +1,25 @@
+<div class="flex flex-col gap-6">
+  <app-card-data cardTitle="اطلاعات پایانه‌ی فروش" [editable]="true" [(editMode)]="editMode">
+    <ng-template #moreAction>
+      <p-button type="button" variant="outlined" (onClick)="toPosLanding()"> ورود به پایانه </p-button>
+    </ng-template>
+    <div class="flex flex-col gap-4">
+      <div class="grid grid-cols-3 gap-4 items-center">
+        <app-key-value label="عنوان" [value]="pos()?.name" />
+        <app-key-value label="شماره سریال" [value]="pos()?.serial" />
+        <app-key-value label="نوع پایانه" [value]="pos()?.pos_type" />
+        <app-key-value label="نوع دستگاه" [value]="pos()?.device?.name" />
+        <app-key-value label="مدل دستگاه" [value]="pos()?.model" />
+        <app-key-value label="ارایه‌دهنده" [value]="pos()?.provider?.name" />
+      </div>
+    </div>
+  </app-card-data>
+
+  <consumer-pos-form
+    [(visible)]="editMode"
+    [editMode]="true"
+    [posId]="posId()"
+    [initialValues]="pos() || undefined"
+    (onSubmit)="getData()"
+  />
+</div>

src/app/domains/consumer/modules/poses/views/single.component.ts

@@ -0,0 +1,55 @@
+import { BreadcrumbService } from '@/core/services';
+import { AppCardComponent, KeyValueComponent } from '@/shared/components';
+import { Component, computed, effect, inject, signal } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { CookieService } from 'ngx-cookie-service';
+import { Button } from 'primeng/button';
+import { COOKIE_KEYS } from 'src/assets/constants';
+import { ConsumerPosFormComponent } from '../components/form.component';
+import { ConsumerPosStore } from '../store/pos.store';
+
+@Component({
+  selector: 'consumer-pos-page',
+  templateUrl: './single.component.html',
+  imports: [AppCardComponent, KeyValueComponent, Button, ConsumerPosFormComponent],
+})
+export class ConsumerPosPageComponent {
+  private readonly store = inject(ConsumerPosStore);
+  private readonly route = inject(ActivatedRoute);
+  private readonly breadcrumbService = inject(BreadcrumbService);
+  private readonly cookieService = inject(CookieService);
+
+  readonly posId = signal<string>(this.route.snapshot.paramMap.get('posId')!);
+  editMode = signal<boolean>(false);
+
+  readonly loading = computed(() => this.store.loading());
+  readonly pos = computed(() => this.store.entity());
+  readonly posBreadcrumb = computed(() => this.store.breadcrumbItems());
+
+  constructor() {
+    effect(() => {
+      if (this.pos()?.id) {
+        this.setBreadcrumb();
+      }
+    });
+  }
+
+  getData() {
+    this.store.getData(this.posId());
+  }
+
+  setBreadcrumb() {
+    this.breadcrumbService.setItems(this.posBreadcrumb());
+  }
+
+  toPosLanding() {
+    this.cookieService.set(COOKIE_KEYS.POS_ID, '', new Date());
+    this.cookieService.set(COOKIE_KEYS.POS_ID, this.posId(), {
+      sameSite: 'Lax', // or 'Strict' for same-site requests only
+      secure: false,
+      path: '/',
+      domain: 'localhost',
+    });
+    window.open('/pos', '_blank');
+  }
+}