feat(layout): enhance topbar with customizable templates and full-page support

- Updated app.layout.component.html to include start, center, and end templates for the topbar. - Modified app.layout.component.ts to manage new template references and added isFullPage getter. - Refactored app.topbar.component.html to utilize new templates and improved layout structure. - Enhanced app.topbar.component.ts to accept new input properties for templates. - Updated layout.service.ts to manage full-page state and new topbar slots. - Added new payment bridge services for POS functionality. - Introduced greater validator for form validation. - Improved dialog component to support mobile drawer and responsive design. - Updated styles for better mobile support and layout adjustments. - Added new main menu sidebar for POS with dynamic content.
2026-04-30 16:27:42 +03:30
parent c89d4027d6
commit 8104f1b7a7
56 changed files with 1130 additions and 434 deletions
@@ -0,0 +1,67 @@
+<p-drawer #drawerRef position="right" [(visible)]="visible">
+  <ng-template #headless>
+    <div class="flex flex-col h-full">
+      <div class="flex items-center justify-between px-6 pt-4 shrink-0">
+        <div class="flex flex-col gap-2">
+          <span class="font-semibold text-xl text-primary">{{ posInfo()?.name }}</span>
+          <span class="font-medium text-md text-muted-color">
+            {{ posInfo()?.businessActivity?.name }} - {{ posInfo()?.complex?.name }}
+          </span>
+        </div>
+        <span>
+          <p-button type="button" (click)="drawerRef.close($event)" icon="pi pi-times" outlined="true"></p-button>
+        </span>
+      </div>
+      <hr class="mt-4 mx-4 border-b border-0 border-surface" />
+
+      <div class="overflow-y-auto">
+        <ul class="list-none p-4 m-0">
+          <li>
+            <a
+              pRipple
+              class="flex items-center cursor-pointer p-4 rounded-border text-surface-700 dark:text-surface-100 hover:bg-surface-100 dark:hover:bg-surface-700 duration-150 transition-colors p-ripple"
+            >
+              <i class="pi pi-home me-2"></i>
+              <span class="font-medium">مشاهده‌ی فاکتورها</span>
+            </a>
+          </li>
+          <li>
+            <a
+              pRipple
+              class="flex items-center cursor-pointer p-4 rounded-border text-surface-700 dark:text-surface-100 hover:bg-surface-100 dark:hover:bg-surface-700 duration-150 transition-colors p-ripple"
+            >
+              <i class="pi pi-home me-2"></i>
+              <span class="font-medium">فروش کالا</span>
+            </a>
+          </li>
+          <li>
+            <a
+              pRipple
+              class="flex items-center cursor-pointer p-4 rounded-border text-surface-700 dark:text-surface-100 hover:bg-surface-100 dark:hover:bg-surface-700 duration-150 transition-colors p-ripple"
+            >
+              <i class="pi pi-home me-2"></i>
+              <span class="font-medium">درباره‌ی سیستم</span>
+            </a>
+          </li>
+          <li>
+            <a
+              pRipple
+              class="flex items-center cursor-pointer p-4 rounded-border text-surface-700 dark:text-surface-100 hover:bg-surface-100 dark:hover:bg-surface-700 duration-150 transition-colors p-ripple"
+            >
+              <i class="pi pi-home me-2"></i>
+              <span class="font-medium">ارتباط با پشتیبانی</span>
+            </a>
+          </li>
+        </ul>
+      </div>
+      <div class="mt-auto">
+        <hr class="mb-4 mx-4 border-t border-0 border-surface" />
+        @if (isPwaBuild) {
+          <div class="px-6 pb-6 text-sm text-muted-color">
+            نسخه برنامه : <span class="font-semibold">{{ appVersion }}</span>
+          </div>
+        }
+      </div>
+    </div>
+  </ng-template>
+</p-drawer>
@@ -0,0 +1,51 @@
+import { AbstractDialog } from '@/shared/abstractClasses/abstract-dialog';
+import { Component, computed, inject } from '@angular/core';
+import { SwUpdate, VersionReadyEvent } from '@angular/service-worker';
+import { Button } from 'primeng/button';
+import { Drawer } from 'primeng/drawer';
+import { Ripple } from 'primeng/ripple';
+import { filter } from 'rxjs';
+import { PosInfoStore } from '../../store';
+
+@Component({
+  selector: 'pos-main-menu-sidebar',
+  templateUrl: './main-menu-sidebar.component.html',
+  imports: [Drawer, Button, Ripple],
+})
+export class PosMainMenuSidebarComponent extends AbstractDialog {
+  private readonly posInfoStore = inject(PosInfoStore);
+  private readonly swUpdate = inject(SwUpdate);
+
+  readonly posInfo = computed(() => this.posInfoStore.entity());
+  appVersion = '0.0.0';
+  isPwaBuild = false;
+
+  readonly posName = computed(() => {
+    if (this.posInfo()) {
+      const { name, businessActivity, complex } = this.posInfo()!;
+      return `${name} (${businessActivity.name} - ${complex.name})`;
+    }
+    return '';
+  });
+
+  ngOnInit() {
+    this.isPwaBuild = this.swUpdate.isEnabled;
+    if (!this.isPwaBuild) return;
+
+    fetch('/ngsw.json')
+      .then((res) => res.json())
+      .then((data: { appData?: { appVersion?: string } }) => {
+        this.appVersion = data?.appData?.appVersion || this.appVersion;
+      })
+      .catch(() => {});
+
+    this.swUpdate.versionUpdates
+      .pipe(filter((event): event is VersionReadyEvent => event.type === 'VERSION_READY'))
+      .subscribe((event) => {
+        const appData = event.latestVersion.appData as { appVersion?: string } | undefined;
+        this.appVersion = appData?.appVersion || this.appVersion;
+      });
+
+    this.swUpdate.checkForUpdate().catch(() => {});
+  }
+}