feat: update app version in ngsw-config.json; refactor service worker integration and UI components for improved functionality

src/app/domains/pos/layouts/mainMenuSidebar/main-menu-sidebar.component.ts

@@ -2,11 +2,9 @@ import { ToastService } from '@/core/services/toast.service';
 import { AbstractDialog } from '@/shared/abstractClasses/abstract-dialog';
 import { Component, computed, inject } from '@angular/core';
 import { RouterLink } from '@angular/router';
-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 config from 'src/config';
 import { posAboutNamedRoutes } from '../../modules/about/constants';
 import { posConfigNamedRoutes } from '../../modules/configs/constants';
@@ -21,7 +19,7 @@ import { PosInfoStore } from '../../store';
 })
 export class PosMainMenuSidebarComponent extends AbstractDialog {
   private readonly posInfoStore = inject(PosInfoStore);
-  private readonly swUpdate = inject(SwUpdate);
+  // private readonly swUpdate = inject(SwUpdate);
   private readonly toastService = inject(ToastService);
 
   readonly posInfo = computed(() => this.posInfoStore.entity());
@@ -65,7 +63,7 @@ export class PosMainMenuSidebarComponent extends AbstractDialog {
   ];
 
   ngOnInit() {
-    this.isPwaBuild = this.swUpdate.isEnabled;
+    // this.isPwaBuild = this.swUpdate.isEnabled;
 
     if (!this.isPwaBuild) return;
 
@@ -79,13 +77,13 @@ export class PosMainMenuSidebarComponent extends AbstractDialog {
         console.log('err', err);
       });
 
-    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.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(() => {});
+    // this.swUpdate.checkForUpdate().catch(() => {});
   }
 }

src/app/domains/pos/modules/about/views/root.component.html

@@ -34,7 +34,7 @@
       </article>
     </div>
 
-    <div class="mx-4 mb-4 rounded-xl border border-surface-200 bg-surface-50 p-4 md:mx-6">
+    <!-- <div class="mx-4 mb-4 rounded-xl border border-surface-200 bg-surface-50 p-4 md:mx-6">
       <div class="flex flex-wrap items-center justify-between gap-3">
         <div class="text-sm text-surface-700">
           نسخه برنامه:
@@ -50,7 +50,7 @@
           {{ updateCtaLabel() }}
         </button>
       </div>
-    </div>
+    </div> -->
 
     <div class="border-t border-surface-200 bg-surface-50 px-4 py-4 md:px-6">
       <p class="text-xs leading-6 text-surface-600 md:text-sm">

src/app/domains/pos/modules/about/views/root.component.ts

@@ -1,8 +1,6 @@
 import { brandingConfig } from '@/branding/branding.config';
-import { Component, computed, inject, signal } from '@angular/core';
-import { SwUpdate, VersionReadyEvent } from '@angular/service-worker';
+import { Component, computed, signal } from '@angular/core';
 import { ButtonDirective } from 'primeng/button';
-import { filter } from 'rxjs';
 
 @Component({
   selector: 'pos-about-page',
@@ -10,17 +8,17 @@ import { filter } from 'rxjs';
   imports: [ButtonDirective],
 })
 export class PosAboutPageComponent {
-  private readonly swUpdate = inject(SwUpdate);
+  // private readonly swUpdate = inject(SwUpdate);
 
   brandingInfo = brandingConfig;
   appVersion = signal('0.0.0');
-  isPwaBuild = this.swUpdate.isEnabled;
+  // isPwaBuild = this.swUpdate.isEnabled;
   isCheckingUpdate = signal(false);
   hasUpdate = signal(false);
   isUpdated = signal(false);
 
   updateCtaLabel = computed(() => {
-    if (!this.isPwaBuild) return 'به روزرسانی فقط در نسخه PWA';
+    // if (!this.isPwaBuild) return 'به روزرسانی فقط در نسخه PWA';
     if (this.isUpdated()) return 'به روز است';
     if (this.hasUpdate()) return 'به روزرسانی برنامه';
     if (this.isCheckingUpdate()) return 'در حال بررسی...';
@@ -28,21 +26,21 @@ export class PosAboutPageComponent {
   });
 
   ngOnInit() {
-    if (!this.isPwaBuild) return;
+    // if (!this.isPwaBuild) return;
 
     this.loadVersion();
-    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.set(appData?.appVersion || this.appVersion());
-        this.hasUpdate.set(true);
-        this.isUpdated.set(false);
-      });
+    // 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.set(appData?.appVersion || this.appVersion());
+    //     this.hasUpdate.set(true);
+    //     this.isUpdated.set(false);
+    //   });
   }
 
   async onUpdateCtaClick() {
-    if (!this.isPwaBuild || this.isCheckingUpdate()) return;
+    // if (!this.isPwaBuild || this.isCheckingUpdate()) return;
 
     if (this.hasUpdate()) {
       await this.applyUpdate();
@@ -56,9 +54,9 @@ export class PosAboutPageComponent {
     this.isCheckingUpdate.set(true);
     this.isUpdated.set(false);
     try {
-      const hasUpdate = await this.swUpdate.checkForUpdate();
-      this.hasUpdate.set(hasUpdate);
-      this.isUpdated.set(!hasUpdate);
+      // const hasUpdate = await this.swUpdate.checkForUpdate();
+      // this.hasUpdate.set(hasUpdate);
+      // this.isUpdated.set(!hasUpdate);
     } finally {
       this.isCheckingUpdate.set(false);
     }
@@ -67,7 +65,7 @@ export class PosAboutPageComponent {
   private async applyUpdate() {
     this.isCheckingUpdate.set(true);
     try {
-      await this.swUpdate.activateUpdate();
+      // await this.swUpdate.activateUpdate();
       this.isUpdated.set(true);
       this.hasUpdate.set(false);
       window.location.reload();

src/app/domains/pos/modules/landing/components/grid-view.component.html

@@ -7,21 +7,21 @@
     }
   } @else {
     @for (good of visibleGoods(); track good.id) {
-      <div class="flex-1 bg-surface-card rounded-lg p-1 shadow-xs" (click)="addProduct(good)">
+      <div class="flex-1 bg-surface-card rounded-lg p-1 shadow-xs flex flex-col" (click)="addProduct(good)">
         <img
           [src]="good.image_url || goodPlaceholder"
           loading="lazy"
           decoding="async"
-          class="w-full aspect-[1.3] object-cover rounded-md"
+          class="w-full aspect-[1.3] object-cover rounded-md shrink-0"
         />
-        <div class="mt-2 text-center">
-          <span class="text-lg font-bold text-center">
+        <div class="mt-2 text-center grow flex flex-col justify-between">
+          <span class="text-lg font-bold text-center grow flex items-center justify-center w-full">
             {{ good.name }}
             @if (!good.is_default_guild_good) {
               <small class="text-xs text-muted-color">*</small>
             }
           </span>
-          <div class="flex items-center justify-between mt-1 w-full px-2 my-2">
+          <div class="flex items-center justify-between mt-1 w-full px-2 my-2 shrink-0">
             <!-- <span [appPriceMask]="good.salePrice" class="text-base font-bold"></span> -->
             <button pButton type="button" icon="pi pi-plus" class="w-full!">انتخاب</button>
           </div>