update(web):resolve blockers and update product-category batch upload…

… feature

stocky-web/src/app/app.module.ts

@@ -2,7 +2,7 @@ import {registerLocaleData} from '@angular/common';
 import {HTTP_INTERCEPTORS, HttpClientModule} from '@angular/common/http';
 
 import {default as ngLang} from '@angular/common/locales/en';
-import {APP_INITIALIZER, ErrorHandler, LOCALE_ID, NgModule, Type} from '@angular/core';
+import {APP_INITIALIZER, ErrorHandler, LOCALE_ID, NgModule} from '@angular/core';
 import {BrowserModule} from '@angular/platform-browser';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {IconDefinition} from '@ant-design/icons-angular';
@@ -59,13 +59,11 @@ let INTERCEPTOR_PROVIDES: any[] = [
     {provide: HTTP_INTERCEPTORS, useClass: HttpErrorInterceptor, multi: true}
 ];
 
-const GLOBAL_THIRD_MODULES: Array<Type<void>> = [];
-
 export function StartupServiceFactory(startupService: StartupService): () => Observable<void> {
     return () => startupService.load();
 }
 
-const APPINIT_PROVIDES = [
+const APP_INIT_PROVIDES = [
     StartupService,
     {
         provide: APP_INITIALIZER,
@@ -83,7 +81,9 @@ const icons: IconDefinition[] = [
 ];
 
 @NgModule({
-    declarations: [AppComponent],
+    declarations: [
+        AppComponent
+    ],
     imports: [
         BrowserModule,
         BrowserAnimationsModule,
@@ -99,13 +99,11 @@ const icons: IconDefinition[] = [
         NzIconModule.forChild(icons),
         DelonACLModule.forRoot(),
         ...FORM_MODULES,
-        ...GLOBAL_THIRD_MODULES
     ],
     providers: [
         ...LANG_PROVIDES,
         ...INTERCEPTOR_PROVIDES,
-        // ...I18NSERVICE_PROVIDES,
-        ...APPINIT_PROVIDES
+        ...APP_INIT_PROVIDES
     ],
     bootstrap: [AppComponent]
 })

stocky-web/src/app/data/payload/common.enum.ts

@@ -75,8 +75,8 @@ export enum FileType {
 }
 
 export enum FileTemplate {
-    PRODUCT_UPLOAD_TEMPLATE = 'ProductTemplate.xlsx',
-    PRODUCT_CATEGORY_UPLOAD_TEMPLATE = 'ProductCategoryTemplate.xlsx',
+    PRODUCT_UPLOAD_TEMPLATE = 'ProductUploadTemplate.xlsx',
+    PRODUCT_CATEGORY_UPLOAD_TEMPLATE = 'ProductCategoryUploadTemplate.xlsx',
     TRANSACTION_RECEIPT = 'Receipt.pdf',
 }
 

stocky-web/src/app/layout/basic/widgets/user.component.ts

@@ -12,8 +12,10 @@ import {PassportUsecase} from '../../../routes/passport/authentication/_usecase/
             nz-dropdown
             [nzDropdownMenu]="userMenu"
         >
-            <nz-avatar [nzSrc]="user.avatar" nzSize="small" class="mr-sm"></nz-avatar>
-            {{ user.name }}
+            <span class="mr1">
+                {{loggedInUser() | titlecase }}
+            </span>
+            <nz-avatar [nzSrc]="user.avatar ?? ''" nzSize="small" class="mr-sm"></nz-avatar>
         </div>
 
         <nz-dropdown-menu #userMenu="nzDropdownMenu">
@@ -47,7 +49,8 @@ export class HeaderUserComponent {
     constructor(
         private settings: SettingsService,
         private passportUsecase: PassportUsecase
-    ) {}
+    ) {
+    }
 
     get user(): User {
         return this.settings.user;
@@ -56,4 +59,14 @@ export class HeaderUserComponent {
     logout(): void {
         this.passportUsecase.logout();
     }
+
+    loggedInUser() {
+        const user = this.passportUsecase.getLoggedInUser();
+        const username = user?.username ?? '';
+
+        if (username.length > 10) {
+            return username.slice(0, 10);
+        }
+        return username;
+    }
 }

stocky-web/src/app/routes/company/_components/company-expense-add-btn/company-expense-add-btn.component.html

@@ -7,7 +7,7 @@
         [nzFooter]="contentFooterBtnTmpl"
         [nzMaskClosable]="false"
         [nzVisible]="showDrawer"
-        [nzWidth]="720"
+        [nzWidth]="drawerSize"
         nzTitle="Add Expenses"
     >
         <div *nzDrawerContent>
@@ -104,10 +104,10 @@
                 </nz-form-control>
             </nz-form-item>
 
-            <nz-form-item>
-                <nz-form-label>Attach File</nz-form-label>
-                <app-upload-file></app-upload-file>
-            </nz-form-item>
+            <!-- <nz-form-item>
+                 <nz-form-label>Attach File</nz-form-label>
+                 <app-upload-file></app-upload-file>
+             </nz-form-item>-->
         </div>
     </form>
 </ng-template>

stocky-web/src/app/routes/company/_components/company-expense-add-btn/company-expense-add-btn.component.ts

@@ -1,23 +1,25 @@
 import {HttpResponse} from '@angular/common/http';
-import {Component, Input} from '@angular/core';
+import {Component, Input, OnInit} from '@angular/core';
 import {FormBuilder, FormGroup, Validators} from '@angular/forms';
 import {NzNotificationService} from 'ng-zorro-antd/notification';
 import {ModalOrDrawer} from '../../../../data/payload/common.enum';
 import {CommonAddProps, PopupViewProps} from '../../../../data/payload/common.types';
 import {UtilService} from '../../../../shared/utils/util.service';
 import {ExpensesPayload} from '../../_data/company.payload';
 import {ExpensesUsecase} from '../../_usecase/company-expenses/expenses.usecase';
+import {ResponsiveService} from "../../../../shared/utils/responsive.service";
 
 @Component({
     selector: 'app-company-expense-add-btn',
     templateUrl: './company-expense-add-btn.component.html',
     styles: []
 })
-export class CompanyExpenseAddBtnComponent {
+export class CompanyExpenseAddBtnComponent implements OnInit {
     public showDrawer = false;
     public isLoading = false;
     public showModal = false;
     public categoryForm: FormGroup = this.formBuild;
+    public drawerSize = 350;
 
     @Input()
     public props: CommonAddProps = {};
@@ -32,11 +34,18 @@ export class CompanyExpenseAddBtnComponent {
         private fb: FormBuilder,
         private usecase: ExpensesUsecase,
         private notification: NzNotificationService,
-        private util: UtilService
+        private util: UtilService,
+        private responsiveService: ResponsiveService
     ) {
         this.defaultDate = this.util.getDateString();
     }
 
+    ngOnInit() {
+        this.responsiveService.screenWidth$.subscribe(value => {
+            this.drawerSize = this.responsiveService.calculateDrawerWidth(value);
+        })
+    }
+
     public get formBuild() {
         return this.fb.group({
             category: [null, [Validators.required]],

stocky-web/src/app/routes/company/_components/company-people/people-supplier/company-people-supplier-add-btn/company-people-supplier-add-btn.component.html

@@ -8,7 +8,7 @@
         [nzMaskClosable]="false"
         [nzTitle]="pageTitle"
         [nzVisible]="showDrawer"
-        [nzWidth]="720"
+        [nzWidth]="drawerSize"
     >
         <div *nzDrawerContent>
             <ng-container [ngTemplateOutlet]="contentFormTmpl"></ng-container>

stocky-web/src/app/routes/company/_components/company-people/people-supplier/company-people-supplier-add-btn/company-people-supplier-add-btn.component.ts

@@ -1,5 +1,5 @@
 import {HttpResponse} from '@angular/common/http';
-import {Component, Input} from '@angular/core';
+import {Component, Input, OnInit} from '@angular/core';
 import {FormBuilder, FormGroup, Validators} from '@angular/forms';
 import {NzNotificationService} from 'ng-zorro-antd/notification';
 import {CommonAddProps, PopupViewProps} from 'src/app/data/payload/common.types';
@@ -8,14 +8,15 @@ import {ModalOrDrawer, TableButtonEnum} from '../../../../../../data/payload/com
 import {UtilService} from '../../../../../../shared/utils/util.service';
 import {SupplierPayload} from '../../../../_data/company.payload';
 import {PeopleSupplierUsecase} from '../../../../_usecase/people-supplier.usecase';
+import {ResponsiveService} from "../../../../../../shared/utils/responsive.service";
 
 
 @Component({
     selector: 'app-company-people-supplier-add-btn',
     templateUrl: './company-people-supplier-add-btn.component.html',
     styles: []
 })
-export class CompanyPeopleSupplierAddBtnComponent {
+export class CompanyPeopleSupplierAddBtnComponent implements OnInit {
     public pageTitle = 'Add New Supplier';
     public isLoading = false;
 
@@ -33,13 +34,21 @@ export class CompanyPeopleSupplierAddBtnComponent {
     protected readonly ModalOrDrawer = ModalOrDrawer;
     protected readonly getNzFormControlValidStatus = this.util.getNzFormControlValidStatus;
     protected readonly PRODUCT_ROUTES = ProductRoutes;
+    public drawerSize = 350;
 
     constructor(
         private fb: FormBuilder,
         private usecase: PeopleSupplierUsecase,
         private notification: NzNotificationService,
-        private util: UtilService
-    ) {}
+        private util: UtilService,
+        private responsiveService: ResponsiveService) {
+    }
+
+    ngOnInit() {
+        this.responsiveService.screenWidth$.subscribe(value => {
+            this.drawerSize = this.responsiveService.calculateDrawerWidth(value);
+        })
+    }
 
     private get buildForm() {
         return this.fb.group({

stocky-web/src/app/routes/company/_components/company-role/company-role-add-btn/company-role-add-btn.component.html

@@ -14,7 +14,7 @@
         [nzFooter]="contentFooterBtnTmpl"
         [nzMaskClosable]="false"
         [nzVisible]="showDrawer"
-        [nzWidth]="720"
+        [nzWidth]="drawerSize"
         nzTitle="Create Role"
     >
         <div *nzDrawerContent>

stocky-web/src/app/routes/company/_components/company-role/company-role-add-btn/company-role-add-btn.component.ts

@@ -1,22 +1,25 @@
 import {HttpResponse} from '@angular/common/http';
-import {Component, Input, OnChanges, SimpleChanges, ViewChild} from '@angular/core';
+import {Component, Input, OnChanges, OnInit, SimpleChanges, ViewChild} from '@angular/core';
 import {ModalOrDrawer} from '../../../../../data/payload/common.enum';
 import {CommonInputProps, PopupViewProps} from '../../../../../data/payload/common.types';
 import {UtilService} from '../../../../../shared/utils/util.service';
 import {RolePayload} from '../../../_data/company.payload';
 import {CompanyRoleFormComponent} from '../company-role-form/company-role-form.component';
+import {ResponsiveService} from "../../../../../shared/utils/responsive.service";
 
 @Component({
     selector: 'app-company-role-add-btn',
     templateUrl: './company-role-add-btn.component.html',
     styles: [`.space-t {
-      margin-top: -10px;
+        margin-top: -10px;
     }`]
 })
-export class CompanyRoleAddBtnComponent implements OnChanges {
+export class CompanyRoleAddBtnComponent implements OnChanges, OnInit {
     public showDrawer = false;
     public showModal = false;
     public isSaving = false;
+    public drawerSize = 350;
+
 
     @ViewChild('roleFormComponent')
     public roleFormComponent?: CompanyRoleFormComponent;
@@ -38,12 +41,22 @@ export class CompanyRoleAddBtnComponent implements OnChanges {
 
     protected readonly ModalOrDrawer = ModalOrDrawer;
 
-    constructor(private util: UtilService) {}
+    constructor(
+        private util: UtilService,
+        private responsiveService: ResponsiveService
+    ) {
+    }
 
     get isDrawer() {
         return this.popup.display == ModalOrDrawer.DRAWER;
     }
 
+    ngOnInit() {
+        this.responsiveService.screenWidth$.subscribe(value => {
+            this.drawerSize = this.responsiveService.calculateDrawerWidth(value);
+        })
+    }
+
     public ngOnChanges(changes: SimpleChanges) {
         let currentRoleValue = changes['role'].currentValue;
         if (currentRoleValue) {

stocky-web/src/app/routes/company/company-expenses-setup/company-expenses-setup.component.ts

@@ -15,11 +15,11 @@ import {ExpensesUsecase} from '../_usecase/company-expenses/expenses.usecase';
     templateUrl: './company-expenses-setup.component.html',
     styles: [
         `
-          @media (min-width: 320px) and (max-width: 460px) {
-            .re-user {
-              padding: 30px 4px 0px;
+            @media (min-width: 320px) and (max-width: 460px) {
+                .re-user {
+                    padding: 30px 4px 0px;
+                }
             }
-          }
 
         `
     ]
@@ -53,7 +53,8 @@ export class CompanyExpensesSetupComponent {
         private usecase: ExpensesUsecase,
         private notification: NzNotificationService,
         private util: UtilService
-    ) {}
+    ) {
+    }
 
     public onSearch = async (): Promise<void> => {
         this.isLoading = true;

stocky-web/src/app/routes/dashboard/dashboard.component.html

@@ -1,4 +1,5 @@
 <page-header></page-header>
 <nz-card>
-    <!--    <app-coming-soon-text text="Reports"></app-coming-soon-text>-->
+    <h3>Welcome back</h3>
+    <h4>{{getFullName() | uppercase}}</h4>
 </nz-card>

stocky-web/src/app/routes/dashboard/dashboard.component.ts

@@ -1,8 +1,17 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import {ChangeDetectionStrategy, Component} from '@angular/core';
+import {PassportUsecase} from "../passport/authentication/_usecase/passport.usecase";
 
 @Component({
     selector: 'app-dashboard',
     templateUrl: './dashboard.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class DashboardComponent {}
+export class DashboardComponent {
+    constructor(private passportUsecase: PassportUsecase) {
+    }
+
+    getFullName() {
+        return this.passportUsecase.getLoggedInUser()?.username;
+    }
+
+}

stocky-web/src/app/routes/products/_usecase/product-category.usecase.ts

@@ -1,4 +1,4 @@
-import {HttpClient} from '@angular/common/http';
+import {HttpClient, HttpHeaders, HttpResponse} from '@angular/common/http';
 import {Injectable} from '@angular/core';
 import {environment} from '@env/environment';
 import {BehaviorSubject, Observable} from 'rxjs';
@@ -10,7 +10,8 @@ export class ProductCategoryUsecase {
     public trigger$: Observable<boolean> = this.trigger.asObservable();
     private url = environment.api.baseUrl + '/product/category';
 
-    constructor(private http: HttpClient) {}
+    constructor(private http: HttpClient) {
+    }
 
     public setTrigger(value: boolean) {
         this.trigger.next(value);
@@ -49,13 +50,22 @@ export class ProductCategoryUsecase {
     }
 
     public getProductCategoryUploadURL() {
-        return `${this.url}/import-file`;
+        return `${this.url}/upload`;
     }
-    
+
     public downloadTemplate(): Observable<Blob> {
         return this.http.get(`${this.url}/download-template`, {
             responseType: 'blob'
         });
     }
 
+    public uploadDataFile(form: FormData): Observable<HttpResponse<Blob>> {
+        const headers = new HttpHeaders({'Accept': 'application/octet-stream'});
+        return this.http.post<Blob>(`${this.url}/upload`, form, {
+            headers,
+            observe: 'response',
+            responseType: 'blob' as 'json'
+        });
+    }
+
 }