feat: application updates

src/app/_shared/EnvironmentHelper.ts

@@ -1,6 +1,10 @@
 import {environment} from '../../environments/environment';
 
 export class EnvironmentHelper {
+  public static get() {
+    return environment;
+  }
+
   public static getAPIUrl(): string {
     return environment.apiUrl;
   }

src/app/_shared/services/system-info.service.ts

@@ -8,6 +8,8 @@ import {connect} from 'ngxtension/connect';
 
 import {b_fromStorage, st_set} from 'dfts-helper';
 
+
+
 import {AdminInfoResponse, JsonInfoResponse} from '../waiterrobot-backend';
 import {AuthService} from './auth/auth.service';
 

src/app/app.component.ts

@@ -15,7 +15,7 @@ import {SystemInfoComponent} from './system-info.component';
         <div class="loader"></div>
       </div>
 
-      <app-logo-with-text hideLogo />
+      <app-logo-with-text hideLogo class="mt-2" />
     </div>
 
     <app-system-info />

src/app/home/_shared/components/color/color-picker.component.ts

@@ -33,16 +33,14 @@ import {AppIsLightColorPipe} from './app-is-light-color.pipe';
         {{ 'COLOR_PICKER' | tr }}
       </button>
 
-      <div ngbTooltip="{{ 'RESET' | tr }}">
-        <button
-          class="btn btn-outline-secondary"
-          (click)="color = undefined; colorChange.emit(undefined)"
-          [disabled]="disabled"
-          type="button"
-        >
-          <bi name="x-circle-fill" />
-        </button>
-      </div>
+      <button
+        class="btn btn-outline-secondary"
+        (click)="color = undefined; colorChange.emit(undefined)"
+        [disabled]="disabled"
+        type="button"
+      >
+        <bi name="x-circle-fill" [ngbTooltip]="'RESET' | tr" />
+      </button>
     </div>
 
     <ng-template #popContent>

src/app/home/_shared/services/filter.ts

@@ -56,7 +56,7 @@ export function injectFilter<
   );
 
   // Subscribe to form to set params on change
-  valueChanges.pipe(takeUntilDestroyed(), distinctUntilChanged()).subscribe((queryParams) => {
+  form.valueChanges.pipe(takeUntilDestroyed(), distinctUntilChanged()).subscribe((queryParams) => {
     lumber.info('filterFormValueChanges', 'Set query params', queryParams);
     void router.navigate([], {
       relativeTo: route,

src/app/home/bills/bills.routes.ts

@@ -6,11 +6,11 @@ export const ROUTES: Routes = [
     loadComponent: () => import('./bills.layout').then((c) => c.BillsLayout),
     children: [
       {path: 'all', loadComponent: () => import('./bills.component').then((c) => c.BillsComponent)},
-      {path: ':id', loadComponent: () => import('./bill-info.component').then((c) => c.BillInfoComponent)},
       {
         path: 'reasons',
         children: [{path: 'all', loadComponent: () => import('./all-unpaid-reasons.component').then((c) => c.AllUnpaidReasonsComponent)}],
       },
+      {path: ':id', loadComponent: () => import('./bill-info.component').then((c) => c.BillInfoComponent)},
       {path: '', pathMatch: 'full', redirectTo: 'all'},
     ],
   },

src/app/home/home.layout.html

@@ -5,7 +5,7 @@
 
       @if (isMobile()) { @if (showEnvironmentType && environmentType === 'dev') {
       <div (click)="showEnvironmentType = !showEnvironmentType" class="badge bg-warning text-dark ms-3 me-1 not-selectable">
-        <span>DEV</span>
+        <span>LOCAL</span>
       </div>
       } @if (myUserService.user()?.isAdmin) {
       <div style="font-size: 12px" class="badge bg-danger text-dark ms-3 me-1 not-selectable">
@@ -35,7 +35,7 @@
             <li class="nav-item d-flex align-items-center">
               @if (showEnvironmentType && environmentType === 'dev') {
               <div (click)="showEnvironmentType = !showEnvironmentType" class="badge bg-warning text-dark ms-1 me-1 not-selectable">
-                <span>DEV</span>
+                <span>LOCAL</span>
               </div>
               } @if (myUserService.user()?.isAdmin) {
               <div style="font-size: 12px" class="badge bg-danger text-dark ms-1 me-1 not-selectable">

src/app/home/printers/printer-edit/printer-edit.component.ts

@@ -1,13 +1,16 @@
-import {ChangeDetectionStrategy, Component, inject} from '@angular/core';
+import {ChangeDetectionStrategy, Component, computed, inject} from '@angular/core';
 import {toSignal} from '@angular/core/rxjs-interop';
 
-import {injectOnSubmit} from '../../../_shared/form';
-import {GetPrinterResponse} from '../../../_shared/waiterrobot-backend';
-import {AbstractModelEditComponent} from '../../_shared/form/abstract-model-edit.component';
-import {AppContinuesCreationSwitchComponent} from '../../_shared/form/app-continues-creation-switch.component';
-import {AppEntityEditModule} from '../../_shared/form/app-entity-edit.module';
-import {injectContinuousCreation, injectOnDelete} from '../../_shared/form/edit';
+import {AbstractModelEditComponent} from '@home-shared/form/abstract-model-edit.component';
+import {AppContinuesCreationSwitchComponent} from '@home-shared/form/app-continues-creation-switch.component';
+import {AppEntityEditModule} from '@home-shared/form/app-entity-edit.module';
+import {injectContinuousCreation, injectOnDelete, injectTabControls} from '@home-shared/form/edit';
+import {NgbNavModule} from '@ng-bootstrap/ng-bootstrap';
+import {injectOnSubmit} from '@shared/form';
+import {GetPrinterResponse} from '@shared/waiterrobot-backend';
+
 import {SelectedEventService} from '../../events/_services/selected-event.service';
+import {OrganisationEditUsersComponent} from '../../organisations/organisation-edit/organisation-edit-users.component';
 import {PrintersService} from '../_services/printers.service';
 import {AppPrinterEditForm} from './printer-edit-form.component';
 import {PrinterEditProductsComponent} from './printer-edit-products.component';
@@ -37,18 +40,37 @@ import {PrinterEditProductsComponent} from './printer-edit-products.component';
         </scrollable-toolbar>
 
         <hr />
-        <app-printer-edit-form
-          #form
-          (submitUpdate)="onSubmit('UPDATE', $event)"
-          (submitCreate)="onSubmit('CREATE', $event)"
-          [selectedEventId]="selectedEvent()"
-          [availableFonts]="fonts()"
-          [printer]="entity"
-        />
 
-        <h2 class="mt-5" *isEditing="entity">{{ 'HOME_PROD_ALL' | tr }}</h2>
+        <ul
+          ngbNav
+          #nav="ngbNav"
+          [activeId]="tabControls.activeTab()"
+          class="nav-tabs"
+          (navChange)="tabControls.navigateToTab($event.nextId)"
+        >
+          <li [ngbNavItem]="'DATA'" [destroyOnHide]="false">
+            <a ngbNavLink>{{ 'DATA' | tr }}</a>
+            <ng-template ngbNavContent>
+              <app-printer-edit-form
+                #form
+                (submitUpdate)="onSubmit('UPDATE', $event)"
+                (submitCreate)="onSubmit('CREATE', $event)"
+                [selectedEventId]="selectedEvent()"
+                [availableFonts]="fonts()"
+                [printer]="entity"
+              />
+            </ng-template>
+          </li>
+
+          <li [ngbNavItem]="'PRODUCTS'" *isEditing="entity" [destroyOnHide]="true">
+            <a ngbNavLink>{{ 'HOME_PROD_ALL' | tr }}</a>
+            <ng-template ngbNavContent>
+              <app-printer-edit-products *isEditing="entity" [products]="entity.products" />
+            </ng-template>
+          </li>
+        </ul>
 
-        <app-printer-edit-products *isEditing="entity" [products]="entity.products" />
+        <div [ngbNavOutlet]="nav"></div>
       </div>
     } @else {
       <app-edit-placeholder />
@@ -57,7 +79,14 @@ import {PrinterEditProductsComponent} from './printer-edit-products.component';
   selector: 'app-printer-edit',
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [AppEntityEditModule, AppPrinterEditForm, AppContinuesCreationSwitchComponent, PrinterEditProductsComponent],
+  imports: [
+    AppEntityEditModule,
+    AppPrinterEditForm,
+    AppContinuesCreationSwitchComponent,
+    PrinterEditProductsComponent,
+    NgbNavModule,
+    OrganisationEditUsersComponent,
+  ],
 })
 export class PrinterEditComponent extends AbstractModelEditComponent<GetPrinterResponse> {
   onDelete = injectOnDelete((it: number) => this.printersService.delete$(it).subscribe());
@@ -73,6 +102,12 @@ export class PrinterEditComponent extends AbstractModelEditComponent<GetPrinterR
     },
   });
 
+  tabControls = injectTabControls<'DATA' | 'PRODUCTS'>({
+    onlyEditingTabs: ['PRODUCTS'],
+    defaultTab: 'DATA',
+    isCreating: computed(() => this.entity() === 'CREATE'),
+  });
+
   selectedEvent = inject(SelectedEventService).selectedId;
 
   fonts = toSignal(this.printersService.getAllFonts$(), {initialValue: []});

src/app/home/products/product-edit/product-edit-form.component.ts

@@ -7,10 +7,10 @@ import {a_pluck, HasNumberIDAndName, n_from, s_from} from 'dfts-helper';
 import {BiComponent} from 'dfx-bootstrap-icons';
 import {DfxTr} from 'dfx-translate';
 
-import {AbstractModelEditFormComponent} from '../../_shared/form/abstract-model-edit-form.component';
-import {AppModelEditSaveBtn} from '../../_shared/form/app-model-edit-save-btn.component';
 import {injectIsValid} from '../../../_shared/form';
 import {CreateProductDto, GetProductMaxResponse, UpdateProductDto} from '../../../_shared/waiterrobot-backend';
+import {AbstractModelEditFormComponent} from '../../_shared/form/abstract-model-edit-form.component';
+import {AppModelEditSaveBtn} from '../../_shared/form/app-model-edit-save-btn.component';
 import {allowedCharacterSet} from '../../_shared/regex';
 
 @Component({
@@ -88,7 +88,7 @@ import {allowedCharacterSet} from '../../_shared/regex';
           <label for="selectPrinter">{{ 'NAV_PRINTERS' | tr }}</label>
           <div class="input-group">
             <span class="input-group-text" id="selectPrinter-addon">
-              <bi name="diagram-3" />
+              <bi name="printer" />
             </span>
             <select class="form-select" id="selectPrinter" formControlName="printerId">
               <option [value]="-1" disabled>{{ 'HOME_PROD_PRINTER_SELECT_DEFAULT' | tr }}</option>

src/app/home/products/product-edit/product-edit.component.ts

@@ -6,6 +6,7 @@ import {filter, map} from 'rxjs';
 
 import {n_from, n_isNumeric} from 'dfts-helper';
 
+
 import {injectOnSubmit} from '../../../_shared/form';
 import {GetProductMaxResponse} from '../../../_shared/waiterrobot-backend';
 import {AbstractModelEditComponent} from '../../_shared/form/abstract-model-edit.component';
@@ -39,28 +40,27 @@ import {AppProductEditFormComponent} from './product-edit-form.component';
             </div>
 
             <div>
-              <button class="btn btn-sm btn-primary" routerLink="../groups/products/{{ entity.group.id }}">
+              <a class="btn btn-sm btn-primary" routerLink="../groups/products/{{ entity.group.id }}">
                 <bi name="diagram-3" />
                 {{ 'HOME_PROD_GO_TO_GROUP' | tr }}
-              </button>
+              </a>
+            </div>
+
+            <div>
+              <a class="btn btn-sm btn-secondary" routerLink="../../printers/{{ entity.printer.id }}">
+                <bi name="printer" />
+                {{ 'NAV_PRINTERS' | tr }} {{ 'OPEN_2' | tr }}
+              </a>
             </div>
 
             <div>
-              <a
-                class="btn btn-sm btn-outline-secondary text-body-emphasis"
-                routerLink="../../orders"
-                [queryParams]="{productIds: entity.id}"
-              >
+              <a class="btn btn-sm btn-secondary" routerLink="../../orders" [queryParams]="{productIds: entity.id}">
                 <bi name="stack" />
                 {{ 'NAV_ORDERS' | tr }}
               </a>
             </div>
             <div>
-              <a
-                class="btn btn-sm btn-outline-secondary text-body-emphasis"
-                routerLink="../../bills"
-                [queryParams]="{productIds: entity.id}"
-              >
+              <a class="btn btn-sm btn-secondary" routerLink="../../bills" [queryParams]="{productIds: entity.id}">
                 <bi name="cash-coin" />
                 {{ 'NAV_BILLS' | tr }}
               </a>

src/app/home/products/product-group-edit/product-group-edit-form.component.ts

@@ -7,11 +7,11 @@ import {HasNumberIDAndName} from 'dfts-helper';
 import {BiComponent} from 'dfx-bootstrap-icons';
 import {DfxTr} from 'dfx-translate';
 
+import {injectIsValid} from '../../../_shared/form';
+import {CreateProductGroupDto, GetProductGroupResponse, UpdateProductGroupDto} from '../../../_shared/waiterrobot-backend';
 import {AppColorPicker} from '../../_shared/components/color/color-picker.component';
 import {AbstractModelEditFormComponent} from '../../_shared/form/abstract-model-edit-form.component';
 import {AppModelEditSaveBtn} from '../../_shared/form/app-model-edit-save-btn.component';
-import {injectIsValid} from '../../../_shared/form';
-import {CreateProductGroupDto, GetProductGroupResponse, UpdateProductGroupDto} from '../../../_shared/waiterrobot-backend';
 import {allowedCharacterSet} from '../../_shared/regex';
 
 @Component({
@@ -44,12 +44,12 @@ import {allowedCharacterSet} from '../../_shared/regex';
           </div>
         </div>
 
-        @if (isCreating()) {
+        @if (!isCreating()) {
           <div class="col">
             <div class="form-group mb-2">
               <label for="selectPrinter">{{ 'NAV_PRINTERS' | tr }}</label>
               <div class="input-group">
-                <span class="input-group-text" id="selectPrinter-addon"><bi name="diagram-3" /></span>
+                <span class="input-group-text" id="selectPrinter-addon"><bi name="printer" /></span>
                 <select class="form-select" id="selectPrinter" formControlName="printerId">
                   <option [ngValue]="-1">{{ 'HOME_PROD_PRINTER_SELECT_DEFAULT' | tr }}</option>
                   @for (printer of this.printers; track printer.id) {

src/app/home/products/product-group-edit/product-group-edit.component.ts

@@ -42,21 +42,13 @@ import {ProductGroupEditFormComponent} from './product-group-edit-form.component
             </div>
 
             <div>
-              <a
-                class="btn btn-sm btn-outline-secondary text-body-emphasis"
-                routerLink="../../../orders"
-                [queryParams]="{productGroupIds: entity.id}"
-              >
+              <a class="btn btn-sm btn-secondary" routerLink="../../../orders" [queryParams]="{productGroupIds: entity.id}">
                 <bi name="stack" />
                 {{ 'NAV_ORDERS' | tr }}
               </a>
             </div>
             <div>
-              <a
-                class="btn btn-sm btn-outline-secondary text-body-emphasis"
-                routerLink="../../../bills"
-                [queryParams]="{productGroupIds: entity.id}"
-              >
+              <a class="btn btn-sm btn-secondary" routerLink="../../../bills" [queryParams]="{productGroupIds: entity.id}">
                 <bi name="cash-coin" />
                 {{ 'NAV_BILLS' | tr }}
               </a>

src/app/home/tables/table-edit/table-edit.component.ts

@@ -16,6 +16,7 @@ import {GetTableWithGroupResponse} from '@shared/waiterrobot-backend';
 
 import {n_from, n_isNumeric} from 'dfts-helper';
 
+
 import {SelectedEventService} from '../../events/_services/selected-event.service';
 import {TableGroupsService} from '../_services/table-groups.service';
 import {TablesService} from '../_services/tables.service';
@@ -56,17 +57,13 @@ import {TableEditFormComponent} from './table-edit-form.component';
             </div>
 
             <div>
-              <a
-                class="btn btn-sm btn-outline-secondary text-body-emphasis"
-                routerLink="../../orders"
-                [queryParams]="{tableIds: entity.id}"
-              >
+              <a class="btn btn-sm btn-secondary" routerLink="../../orders" [queryParams]="{tableIds: entity.id}">
                 <bi name="stack" />
                 {{ 'NAV_ORDERS' | tr }}
               </a>
             </div>
             <div>
-              <a class="btn btn-sm btn-outline-secondary text-body-emphasis" routerLink="../../bills" [queryParams]="{tableIds: entity.id}">
+              <a class="btn btn-sm btn-secondary" routerLink="../../bills" [queryParams]="{tableIds: entity.id}">
                 <bi name="cash-coin" />
                 {{ 'NAV_BILLS' | tr }}
               </a>

src/app/home/tables/table-group-edit/table-group-edit.component.ts

@@ -40,21 +40,13 @@ import {TableGroupEditFormComponent} from './table-group-edit-form.component';
             </div>
 
             <div>
-              <a
-                class="btn btn-sm btn-outline-secondary text-body-emphasis"
-                routerLink="../../../orders"
-                [queryParams]="{tableGroupIds: entity.id}"
-              >
+              <a class="btn btn-sm btn-secondary" routerLink="../../../orders" [queryParams]="{tableGroupIds: entity.id}">
                 <bi name="stack" />
                 {{ 'NAV_ORDERS' | tr }}
               </a>
             </div>
             <div>
-              <a
-                class="btn btn-sm btn-outline-secondary text-body-emphasis"
-                routerLink="../../../bills"
-                [queryParams]="{tableGroupIds: entity.id}"
-              >
+              <a class="btn btn-sm btn-secondary" routerLink="../../../bills" [queryParams]="{tableGroupIds: entity.id}">
                 <bi name="cash-coin" />
                 {{ 'NAV_BILLS' | tr }}
               </a>