create consumer pos list page

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');
+  }
+}