debug and enhancements

angular.json

@@ -31,8 +31,8 @@
               "src/config"
             ],
             "styles": [
-              "src/styles.scss",
-              "@angular/material/prebuilt-themes/deeppurple-amber.css"
+              "src/styles/main.theme.scss",
+              "src/styles.scss"
             ],
             "scripts": []
           },

package.json

@@ -3,7 +3,7 @@
   "version": "0.0.0",
   "scripts": {
     "ng": "ng",
-    "start": "ng serve",
+    "start": "ng serve --host 0.0.0.0 --port 4220",
     "build": "ng build",
     "watch": "ng build --watch --configuration development",
     "test": "ng test"

src/app/app.component.html

@@ -71,7 +71,13 @@
 
 <!--menus-->
 <mat-menu #userMenu="matMenu">
+  <button mat-menu-item [matMenuTriggerFor]="themes">{{'themes'|tr:'Themes'}}</button>
   <button mat-menu-item (click)="loginService.logout()" [disabled]="!loginService.user">
     <mat-icon>logout</mat-icon>
     {{'logout'|tr:'Logout'}}</button>
 </mat-menu>
+
+<mat-menu #themes="matMenu">
+  <button mat-menu-item (click)="changeTheme('theme')">{{'light'|tr:'Light'}}</button>
+  <button mat-menu-item (click)="changeTheme('dark-theme')">{{'dark'|tr:'Dark'}}</button>
+</mat-menu>

src/app/app.component.ts

@@ -8,6 +8,7 @@ import { Subject, filter, map, repeat, takeUntil, timer } from 'rxjs';
 import { Title } from '@angular/platform-browser';
 import { LoginService } from 'angularlib/login/login.service';
 import { CommonModule } from '@angular/common';
+import { ChangeTheme } from 'angularlib/ui.state/ui.state.actions';
 
 @Component({
   selector: 'app-root',
@@ -39,6 +40,9 @@ export class AppComponent extends BaseComponent implements OnInit {
       repeat({delay:() => this.startTimeout$})
   );
 
+  /**current theme of application */
+  protected theme;
+
   constructor(
     private router: Router,
     private store: Store,
@@ -56,6 +60,8 @@ export class AppComponent extends BaseComponent implements OnInit {
   }
 
   ngOnInit(): void {
+    this.setDefaultTheme();
+
     this.router.events.pipe(untilDestroy(this),
     filter((event) => event instanceof RoutesRecognized),
     map((res:any) => {
@@ -74,4 +80,25 @@ export class AppComponent extends BaseComponent implements OnInit {
       }
     });
   }
+
+  protected setDefaultTheme() {
+    if (localStorage.getItem('theme')) {
+      this.theme = localStorage.getItem('theme') as string;
+      const body = document.getElementsByTagName('body')[0];
+      body.classList.add(this.theme);
+    }
+  }
+
+  /**
+   * change application theme
+   * @param {string} theme theme name 
+   */
+  protected changeTheme(theme: string) {
+    const body = document.getElementsByTagName('body')[0];
+    body.classList.remove(this.theme);
+    this.theme = theme;
+    body.classList.add(this.theme);
+    localStorage.setItem('theme',this.theme);
+    this.store.dispatch(new ChangeTheme(this.theme));
+  }
 }

src/app/dashboard/dashboard.component.html

@@ -72,13 +72,16 @@
               </linearGradient>
             </defs>
           </svg>
-          <h1>Welcome</h1>
+          <h1 [ngClass]="cs.theme">Welcome</h1>
         </div>
       </div>
       <div class="divider" role="separator" aria-label="Divider"></div>
       <div class="right-side">
         @if (!loginService.user?.token?.jwt) {
-          <login />
+          <div class="login">
+            <login/>
+
+          </div>
         } @else {
           <master-menu [menu]="{
             'leave':[
@@ -88,7 +91,7 @@
             ],
             'quotation':[
               {label:{key:'purchase_quotation',default:'Purchase Quotation'},route:'/quotation/purchase'},
-              {label:{key:'sales_quotation',default:'Sales Quotation'},route:'/quotation/sales'},
+              {label:{key:'sales_quotation',default:'Sales Quotation'},route:'/quotation',queryParams:{type:'sales'}},
               {label:{key:'tender_award',default:'Tender Awardment'},route:'/quotation/award'}
             ]
           }"/>

src/app/dashboard/dashboard.component.scss

@@ -97,6 +97,10 @@
     margin-inline: 0.5rem;
   }
 
+  .login {
+    max-width: 350px;
+  }
+
   .pill-group {
     display: flex;
     flex-direction: column;

src/app/dashboard/dashboard.component.ts

@@ -5,15 +5,19 @@ import { LoginModule } from 'angularlib/login';
 import { Store } from '@ngxs/store';
 import { LoginService } from 'angularlib/login/login.service';
 import { MasterMenuComponent } from 'angularlib/menu/master.menu/master.menu.component';
+import { CommonModule } from '@angular/common';
+import { ComponentService } from 'angularlib/component.service';
 
 @Component({
   selector: 'app-dashboard',
   standalone: true,
   imports: [
+    CommonModule,
     RouterModule,
     LoginModule,
     MasterMenuComponent
   ],
+  providers: [ComponentService],
   templateUrl: './dashboard.component.html',
   styleUrl: './dashboard.component.scss'
 })
@@ -21,6 +25,7 @@ export class DashboardComponent extends BaseComponent implements OnInit{
   constructor(
     private store: Store,
     protected loginService: LoginService,
+    protected cs: ComponentService
   ) {
     super(store);
   }

src/app/quotation/controllers/tree.controller.ts

@@ -28,7 +28,6 @@ export class QuotationTreeController extends Controller {
         let fields = new Fields([]);
         let tempColumns = {};
         documentSchema?.tree?.visibleFields?.forEach(key => {
-            console.debug(key,fieldColumns);
             if (fieldColumns[key]) {
                 let column = fieldColumns[key];
                 tempColumns = {

src/app/quotation/quotation.component.ts

@@ -29,6 +29,7 @@ import { Process } from 'fis-commons/process';
   styleUrls: ['./styles.scss']
 })
 export class QuotationComponent extends TMComponent implements OnInit {
+  protected sideNavOpened: boolean = true;
  
   shpFromFormMetadata = {};
   shpToFormMetadata = {};
@@ -144,23 +145,23 @@ export class QuotationComponent extends TMComponent implements OnInit {
    }
 
   protected onTreeItemSelected(event: Event) {
-    const docData = event.payload?.data?.payload;
+    const docData = event.payload;
     this.route.params.pipe(take(1)).subscribe(params => {
-      this.cs.navigate('quotation',{...params,docId: docData?.doc_id});
+      this.cs.navigate(`quotation`,{...params,docId: docData?.doc_id});
+    });
+    this.setActiveDocument({
+      docId: docData?.doc_id,
+      docRef: docData?.docRef,
+      allocatedToDocId: docData?.allocatedtodocid,
+      docStatus: docData?.tenderdisplaystatus?.toUpperCase(),
+      notEditable: () => {
+        return docData?.tenderdisplaystatus?.toUpperCase() === 'CLOSED' ||
+        docData?.tenderdisplaystatus?.toUpperCase() === 'SUBMITTED' ||
+        docData?.tenderdisplaystatus?.toUpperCase() === 'CANCELLED' ||
+        docData?.tenderdisplaystatus?.toUpperCase() === 'ACCEPTED' ||
+        docData?.tenderdisplaystatus?.toUpperCase() === 'REJECTED'
+      }
     });
-    // this.setActiveDocument({
-    //   docId: docData?.doc_id,
-    //   docRef: docData?.docRef,
-    //   allocatedToDocId: docData?.allocatedtodocid,
-    //   docStatus: docData?.tenderdisplaystatus?.toUpperCase(),
-    //   notEditable: () => {
-    //     return docData?.tenderdisplaystatus?.toUpperCase() === 'CLOSED' ||
-    //     docData?.tenderdisplaystatus?.toUpperCase() === 'SUBMITTED' ||
-    //     docData?.tenderdisplaystatus?.toUpperCase() === 'CANCELLED' ||
-    //     docData?.tenderdisplaystatus?.toUpperCase() === 'ACCEPTED' ||
-    //     docData?.tenderdisplaystatus?.toUpperCase() === 'REJECTED'
-    //   }
-    // });
   }
   
   

src/app/quotation/quotation.module.ts

@@ -12,7 +12,7 @@ import { CommonModule } from '@angular/common';
 import { LabelModule } from 'angularlib/labels/label.module';
 
 const routes: Routes = [
-  { path: 'sales', component: QuotationComponent, canActivate: [AuthGuard], data: {title: 'Sales Quotation',serviceId: ServiceID.Submission, type: 'sales'} },
+  { path: '', component: QuotationComponent, canActivate: [AuthGuard], data: {title: 'Sales Quotation',serviceId: ServiceID.Submission, type: 'sales'} },
 ]
 
 @NgModule({

src/app/quotation/styles.scss

@@ -21,6 +21,7 @@ mat-sidenav-container {
 }
 mat-sidenav {
     min-width: 160px;
+    max-width: 40%;
 }
 
 .flex-container {

src/app/quotation/template.html

@@ -1,10 +1,10 @@
-<mat-sidenav-container>
-    <mat-sidenav #sidenav [opened]="true" mode="push" [disableClose]="activeDocument === undefined">
+<mat-sidenav-container [ngClass]="cs.theme">
+    <mat-sidenav #sidenav [opened]="sideNavOpened" mode="push" [disableClose]="activeDocument === undefined">
         @if (documentOptionsLoaded) {
             <tree 
                 [treeData]="documentOptions"
                 [fields]="treeController?.fields"
-                [config]="{navigateOnNodeSelected:false}"
+                [config]="{mode:'TABLE',rowKey:'doc_id',sort:{id:'tenderclosingdate',start:'desc',disableClear:false}}"
                 [(activatedNode)]="activeDocNode"
                 (onChange)="onTreeItemSelected($event);sidenav.toggle()"></tree>
         } @else {
@@ -12,7 +12,7 @@
 
         }
     </mat-sidenav>
-    <mat-sidenav-content [ngClass]="cs.appSettings.theme">
+    <mat-sidenav-content>
         @if (process.hasActiveProcesses) {
             <mat-progress-bar mode="indeterminate"></mat-progress-bar>
         }
@@ -64,14 +64,11 @@
             <div class="success-message"><i>{{message}}</i></div>
         }
     }
-    <!--<tm-document *ngIf="activeDocument" 
-        [document]="activeDocument" [schema]="tmDocumentSchema" (onChange)="onChangeListener($event)">
-        <ng-container buttons>
-            <button mat-button class="button-bottom"
-                [disabled]="activeDocument?.listingController?.process?.hasActiveProcesses || activeDocument?.listingController?.document?.editState === 'VIEW' || activeDocument?.listingController?.submitted === true ||activeDocument?.notEditable()"
-                (click)="activeDocument?.listingController?.onSave()">
-                {{'save'|tr:'Save'}}</button>
-        </ng-container>
-    </tm-document>-->
+    @if (activeDocument?.listingController) {
+        <tree-table
+            [fields]="activeDocument?.listingController?.table?.fields"
+            [data]="activeDocument?.listingController?.table?.data"
+        />
+    }
 </ng-template>
 

src/index.html

@@ -13,7 +13,7 @@
   <meta content='yes' name='apple-mobile-web-app-capable'/>
   <meta content='yes' name='mobile-web-app-capable'/>
 </head>
-<body>
+<body class="mat-app-background">
   <app-root></app-root>
 </body>
 </html>

src/styles.scss

@@ -1,4 +1,5 @@
 /* You can add global styles to this file, and also import other style files */
 body {
     margin: 0;
+    font-family: Arial, Helvetica, sans-serif;
 }

src/styles/main.theme.scss

@@ -0,0 +1,50 @@
+@use '@angular/material' as mat;
+
+@include mat.core();
+
+$primary: mat.define-palette(mat.$indigo-palette, 500);
+$accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
+
+$theme: mat.define-light-theme((
+ color: (
+   primary: $primary,
+   accent: $accent,
+ ),
+ typography: mat.define-typography-config(),
+ density: 0,
+));
+
+// Define a dark theme
+$dark-theme: mat.define-dark-theme((
+ color: (
+   primary: mat.define-palette(mat.$pink-palette),
+   accent: mat.define-palette(mat.$blue-grey-palette),
+ ),
+  // Only include `typography` and `density` in the default dark theme.
+  typography: mat.define-typography-config(),
+  density: 0,
+));
+
+@include mat.core-theme($dark-theme);
+@include mat.button-theme($dark-theme);
+@include mat.all-component-themes($dark-theme);
+
+
+@media (prefers-color-scheme: light) {
+    // Use the `-color` mixins to only apply color styles without reapplying the same
+    // typography and density styles.
+    @include mat.core-color($theme);
+    @include mat.button-color($theme);
+}
+
+.theme {
+    @include mat.core-theme($theme);
+    @include mat.button-theme($theme);
+    @include mat.all-component-themes($theme);
+}
+
+.dark-theme {
+    @include mat.core-theme($dark-theme);
+    @include mat.button-theme($dark-theme);
+    @include mat.all-component-themes($dark-theme);
+}