diff --git a/eform-client/src/app/plugins/modules/customers-pn/components/customer-pn-add/customer-pn-add.component.html b/eform-client/src/app/plugins/modules/customers-pn/components/customer-pn-add/customer-pn-add.component.html index 38cb1790..97181ad7 100644 --- a/eform-client/src/app/plugins/modules/customers-pn/components/customer-pn-add/customer-pn-add.component.html +++ b/eform-client/src/app/plugins/modules/customers-pn/components/customer-pn-add/customer-pn-add.component.html @@ -1,236 +1,206 @@ -
-
-
-
-

{{ 'New Customer' | translate }}

- +

{{ 'New Customer' | translate }}

+
+
+
+
+
+ + {{'CreatedBy' | translate}} + + +
+
+ + {{'CustomerNo' | translate}} + + +
+
+ + {{'ContactPerson' | translate}} + + +
+
+
+
+ + {{'CompanyName' | translate}} + + +
+
+ + {{'CompanyAddress' | translate}} + + +
+
+ + {{'CompanyAddress2' | translate}} + + +
+
+
+
+ + {{'ZipCode' | translate}} + + +
+
+ + {{'CityName' | translate}} + + +
+
+ + {{'Phone' | translate}} + + +
+
+
+
+ + {{'Email' | translate}} + + +
+
+ + {{'EanCode' | translate}} + + +
+
+ + {{'VatNumber' | translate}} + + +
-
-
- -
-
-
- - -
-
-
-
- - -
-
-
-
- - -
-
-
-
-
-
- - -
-
-
-
- - -
-
-
-
- - -
-
-
-
-
-
- - -
-
-
-
- - -
-
-
-
- - -
-
-
-
-
-
- - -
-
-
-
- - -
-
-
-
- - -
-
-
-
-
-
- - -
-
-
-
- - -
-
-
-
- - -
-
-
-
-
-
- - -
-
-
-
- - -
-
-
-
- - -
-
-
-
-
-
- - -
-
-
-
-
- -
- -
-
-
- +
+
+ + {{'CountryCode' | translate}} + + +
+
+ + {{'CadastralNumber' | translate}} + + +
+
+ + {{'CrmId' | translate}} + + +
+
+
+
+ + {{'PropertyNumber' | translate}} + + +
+
+ + {{'ApartmentNumber' | translate}} + + +
+
+ + {{'CompletionYear' | translate}} + + +
+
+
+
+ + {{'FloorsWithLivingSpace' | translate}} + + +
+
+
+
+ +
+ +
+
-
-
- - -
+
+
+ +
diff --git a/eform-client/src/app/plugins/modules/customers-pn/components/customer-pn-add/customer-pn-add.component.ts b/eform-client/src/app/plugins/modules/customers-pn/components/customer-pn-add/customer-pn-add.component.ts index bbad5404..f02acd67 100644 --- a/eform-client/src/app/plugins/modules/customers-pn/components/customer-pn-add/customer-pn-add.component.ts +++ b/eform-client/src/app/plugins/modules/customers-pn/components/customer-pn-add/customer-pn-add.component.ts @@ -1,33 +1,40 @@ -import {Component, EventEmitter, Input, OnInit, Output, ViewChild} from '@angular/core'; +import {Component, EventEmitter, Inject, OnInit} from '@angular/core'; import {CustomerPnFieldsEnum, CustomersPnFieldStatusEnum} from '../../enums'; import {FieldsPnUpdateModel, CustomerPnFullModel} from '../../models'; import {CustomersPnService} from '../../services'; +import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog'; @Component({ selector: 'app-customer-pn-add', templateUrl: './customer-pn-add.component.html', - styleUrls: ['./customer-pn-add.component.scss'] + styleUrls: ['./customer-pn-add.component.scss'], + standalone: false }) export class CustomerPnAddComponent implements OnInit { - @ViewChild('frame', {static: false}) frame; - @Output() onCustomerCreated: EventEmitter = new EventEmitter(); - @Input() fieldsModel = new FieldsPnUpdateModel(); + customerCreated: EventEmitter = new EventEmitter(); + fieldsModel = new FieldsPnUpdateModel(); get fieldsEnum() { return CustomerPnFieldsEnum; } newCustomerModel: CustomerPnFullModel = new CustomerPnFullModel(); - constructor(private customersService: CustomersPnService) { } + constructor( + private customersService: CustomersPnService, + public dialogRef: MatDialogRef, + @Inject(MAT_DIALOG_DATA) public data: {customerId?: number, fields: FieldsPnUpdateModel} + ) { + if (data && data.fields) { + this.fieldsModel = data.fields; + } + } ngOnInit() { + if (this.data && this.data.customerId) { + this.getSingleCustomer(this.data.customerId); + } } - show() { - this.newCustomerModel = new CustomerPnFullModel(); - this.frame.show(); - } - showCopy(customerId: number) { + hide() { + this.dialogRef.close(); this.newCustomerModel = new CustomerPnFullModel(); - this.getSingleCustomer(customerId); - this.frame.show(); } getSingleCustomer(customerId: number) { @@ -44,8 +51,8 @@ export class CustomerPnAddComponent implements OnInit { this.customersService.createCustomer(this.newCustomerModel).subscribe(((data) => { if (data && data.success) { this.newCustomerModel = new CustomerPnFullModel(); - this.onCustomerCreated.emit(); - this.frame.hide(); + this.customerCreated.emit(); + this.dialogRef.close(true); } })); } diff --git a/eform-client/src/app/plugins/modules/customers-pn/components/customer-pn-delete/customer-pn-delete.component.html b/eform-client/src/app/plugins/modules/customers-pn/components/customer-pn-delete/customer-pn-delete.component.html index 208f09c4..a00cd222 100644 --- a/eform-client/src/app/plugins/modules/customers-pn/components/customer-pn-delete/customer-pn-delete.component.html +++ b/eform-client/src/app/plugins/modules/customers-pn/components/customer-pn-delete/customer-pn-delete.component.html @@ -1,55 +1,47 @@ -
-
-
-
-

{{'Are you sure you want to delete' | translate}}?

- -
-
-
-
- {{'Name:' | translate }} {{selectedCustomer.contactPerson}} -
-
- {{'Number: ' | translate }} {{selectedCustomer.customerNo}} -
-
- {{'Address: ' | translate }} {{selectedCustomer.companyAddress}} -
-
- {{'Address 2: ' | translate }} {{selectedCustomer.companyAddress2}} -
-
-
-
- {{'Zip Code: ' | translate }} {{selectedCustomer.zipCode}} -
-
- {{'Created By: ' | translate }} {{selectedCustomer.createdBy}} -
-
- {{'City Name: ' | translate}} {{selectedCustomer.cityName }} -
-
- {{'Phone: ' | translate}} {{selectedCustomer.phone }} -
-
-
-
- {{'Email: ' | translate}} {{selectedCustomer.email }} -
-
- {{'EAN Code: ' | translate}} {{selectedCustomer.eanCode }} -
-
- {{'Vat Number: ' | translate}} {{selectedCustomer.vatNumber }} -
-
- {{'Country Code: ' | translate}} {{selectedCustomer.countryCode }} -
-
+

{{'Are you sure you want to delete' | translate}}?

+
+
+
+ {{'Name:' | translate }} {{selectedCustomer.contactPerson}} +
+
+ {{'Number: ' | translate }} {{selectedCustomer.customerNo}} +
+
+ {{'Address: ' | translate }} {{selectedCustomer.companyAddress}} +
+
+ {{'Address 2: ' | translate }} {{selectedCustomer.companyAddress2}} +
+
+
+
+ {{'Zip Code: ' | translate }} {{selectedCustomer.zipCode}} +
+
+ {{'Created By: ' | translate }} {{selectedCustomer.createdBy}} +
+
+ {{'City Name: ' | translate}} {{selectedCustomer.cityName }} +
+
+ {{'Phone: ' | translate}} {{selectedCustomer.phone }} +
+
+
+
+ {{'Email: ' | translate}} {{selectedCustomer.email }} +
+
+ {{'EAN Code: ' | translate}} {{selectedCustomer.eanCode }} +
+
+ {{'Vat Number: ' | translate}} {{selectedCustomer.vatNumber }} +
+
+ {{'Country Code: ' | translate}} {{selectedCustomer.countryCode }} +
+
@@ -73,11 +65,8 @@

{{'Are you sure you want to delete' | translate}}?

-
-
- - -
-
-
+
+
+ +
diff --git a/eform-client/src/app/plugins/modules/customers-pn/components/customer-pn-delete/customer-pn-delete.component.ts b/eform-client/src/app/plugins/modules/customers-pn/components/customer-pn-delete/customer-pn-delete.component.ts index 0456f70a..187a0a4b 100644 --- a/eform-client/src/app/plugins/modules/customers-pn/components/customer-pn-delete/customer-pn-delete.component.ts +++ b/eform-client/src/app/plugins/modules/customers-pn/components/customer-pn-delete/customer-pn-delete.component.ts @@ -1,37 +1,47 @@ -import {Component, EventEmitter, Input, OnInit, Output, ViewChild} from '@angular/core'; +import {Component, EventEmitter, Inject, OnInit} from '@angular/core'; import {CustomerPnFieldsEnum} from 'src/app/plugins/modules/customers-pn/enums'; import {CustomerPnModel} from 'src/app/plugins/modules/customers-pn/models/customer'; import {FieldsPnUpdateModel} from 'src/app/plugins/modules/customers-pn/models/field'; import {CustomersPnService} from '../../services'; +import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog'; @Component({ selector: 'app-customer-pn-delete', templateUrl: './customer-pn-delete.component.html', - styleUrls: ['./customer-pn-delete.component.scss'] + styleUrls: ['./customer-pn-delete.component.scss'], + standalone: false }) export class CustomerPnDeleteComponent implements OnInit { - @ViewChild('frame', {static: false}) frame; - @Output() onCustomerDeleted: EventEmitter = new EventEmitter(); + customerDeleted: EventEmitter = new EventEmitter(); selectedCustomer: CustomerPnModel = new CustomerPnModel(); - @Input() fields: FieldsPnUpdateModel = new FieldsPnUpdateModel(); + fields: FieldsPnUpdateModel = new FieldsPnUpdateModel(); get fieldsEnum() { return CustomerPnFieldsEnum; } - - constructor(private customersService: CustomersPnService) { } + constructor( + private customersService: CustomersPnService, + public dialogRef: MatDialogRef, + @Inject(MAT_DIALOG_DATA) public data: {customer: CustomerPnModel, fields: FieldsPnUpdateModel} + ) { + if (data) { + this.selectedCustomer = data.customer; + if (data.fields) { + this.fields = data.fields; + } + } + } ngOnInit() { } - show(customer: CustomerPnModel) { - this.selectedCustomer = customer; - this.frame.show(); + hide() { + this.dialogRef.close(); } deleteCustomer() { this.customersService.deleteCustomer(this.selectedCustomer.id).subscribe(((data) => { if (data && data.success) { - this.onCustomerDeleted.emit(); - this.frame.hide(); + this.customerDeleted.emit(); + this.dialogRef.close(true); } })); } diff --git a/eform-client/src/app/plugins/modules/customers-pn/components/customer-pn-edit/customer-pn-edit.component.html b/eform-client/src/app/plugins/modules/customers-pn/components/customer-pn-edit/customer-pn-edit.component.html index c46f9950..74a5ce97 100644 --- a/eform-client/src/app/plugins/modules/customers-pn/components/customer-pn-edit/customer-pn-edit.component.html +++ b/eform-client/src/app/plugins/modules/customers-pn/components/customer-pn-edit/customer-pn-edit.component.html @@ -1,236 +1,206 @@ -
-
-
-
-

{{ 'Edit customer' | translate }}

- +

{{ 'Edit customer' | translate }}

+
+
+
+
+
+ + {{'CreatedBy' | translate}} + + +
+
+ + {{'CustomerNo' | translate}} + + +
+
+ + {{'ContactPerson' | translate}} + + +
-
-
- -
-
-
- - -
-
-
-
- - -
-
-
-
- - -
-
-
-
-
-
- - -
-
-
-
- - -
-
-
-
- - -
-
-
-
-
-
- - -
-
-
-
- - -
-
-
-
- - -
-
-
-
-
-
- - -
-
-
-
- - -
-
-
-
- - -
-
-
-
-
-
- - -
-
-
-
- - -
-
-
-
- - -
-
-
-
-
-
- - -
-
-
-
- - -
-
-
-
- - -
-
-
-
-
-
- - -
-
-
-
-
- -
- -
-
-
- +
+
+ + {{'CompanyName' | translate}} + + +
+
+ + {{'CompanyAddress' | translate}} + + +
+
+ + {{'CompanyAddress2' | translate}} + +
-
- - +
+
+ + {{'ZipCode' | translate}} + + +
+
+ + {{'CityName' | translate}} + + +
+
+ + {{'Phone' | translate}} + + +
+
+
+
+ + {{'Email' | translate}} + + +
+
+ + {{'EanCode' | translate}} + + +
+
+ + {{'VatNumber' | translate}} + + +
-
+
+
+ + {{'CountryCode' | translate}} + + +
+
+ + {{'CadastralNumber' | translate}} + + +
+
+ + {{'CrmId' | translate}} + + +
+
+
+
+ + {{'PropertyNumber' | translate}} + + +
+
+ + {{'ApartmentNumber' | translate}} + + +
+
+ + {{'CompletionYear' | translate}} + + +
+
+
+
+ + {{'FloorsWithLivingSpace' | translate}} + + +
+
+
+
+ +
+ +
+
+
+
+
+ + +
diff --git a/eform-client/src/app/plugins/modules/customers-pn/components/customer-pn-edit/customer-pn-edit.component.ts b/eform-client/src/app/plugins/modules/customers-pn/components/customer-pn-edit/customer-pn-edit.component.ts index 8484f6bd..52c14bb0 100644 --- a/eform-client/src/app/plugins/modules/customers-pn/components/customer-pn-edit/customer-pn-edit.component.ts +++ b/eform-client/src/app/plugins/modules/customers-pn/components/customer-pn-edit/customer-pn-edit.component.ts @@ -1,32 +1,42 @@ -import {Component, EventEmitter, Input, OnInit, Output, ViewChild} from '@angular/core'; +import {Component, EventEmitter, Inject, OnInit} from '@angular/core'; import {CustomerPnFieldsEnum, CustomersPnFieldStatusEnum} from '../../enums'; import {FieldsPnUpdateModel, CustomerPnFullModel} from '../../models'; import {CustomersPnService} from '../../services'; +import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog'; @Component({ selector: 'app-customer-pn-edit', templateUrl: './customer-pn-edit.component.html', - styleUrls: ['./customer-pn-edit.component.scss'] + styleUrls: ['./customer-pn-edit.component.scss'], + standalone: false }) export class CustomerPnEditComponent implements OnInit { - @ViewChild('frame', {static: false}) frame; - @Input() fieldsModel = new FieldsPnUpdateModel(); - @Output() onCustomerUpdated: EventEmitter = new EventEmitter(); + fieldsModel = new FieldsPnUpdateModel(); + customerUpdate: EventEmitter = new EventEmitter(); get fieldsEnum() { return CustomerPnFieldsEnum; } selectedCustomerModel = new CustomerPnFullModel(); - constructor(private customersService: CustomersPnService) { + constructor( + private customersService: CustomersPnService, + public dialogRef: MatDialogRef, + @Inject(MAT_DIALOG_DATA) public data: {customerId: number, fields: FieldsPnUpdateModel} + ) { + if (data && data.fields) { + this.fieldsModel = data.fields; + } } ngOnInit() { + if (this.data && this.data.customerId) { + this.getSingleCustomer(this.data.customerId); + } } - show(customerId: number) { + hide() { + this.dialogRef.close(); this.selectedCustomerModel = new CustomerPnFullModel(); - this.getSingleCustomer(customerId); - this.frame.show(); } getSingleCustomer(customerId: number) { @@ -42,8 +52,8 @@ export class CustomerPnEditComponent implements OnInit { this.customersService.updateCustomer(this.selectedCustomerModel).subscribe(((data) => { if (data && data.success) { this.selectedCustomerModel = new CustomerPnFullModel(); - this.onCustomerUpdated.emit(); - this.frame.hide(); + this.customerUpdate.emit(); + this.dialogRef.close(true); } })); diff --git a/eform-client/src/app/plugins/modules/customers-pn/components/customer-pn-import/customer-pn-import.component.html b/eform-client/src/app/plugins/modules/customers-pn/components/customer-pn-import/customer-pn-import.component.html index 0ed7964c..8fff4e32 100644 --- a/eform-client/src/app/plugins/modules/customers-pn/components/customer-pn-import/customer-pn-import.component.html +++ b/eform-client/src/app/plugins/modules/customers-pn/components/customer-pn-import/customer-pn-import.component.html @@ -107,7 +107,7 @@ class="btn-danger btn-small-height" routerLink="/plugins/customers-pn" id="cancelImportBtn" - mdbTooltip="{{ 'Cancel' | translate }}" + matTooltip="{{ 'Cancel' | translate }}" > {{ 'Cancel' | translate }} @@ -117,7 +117,7 @@ (click)="importCustomer()" routerLink="/plugins/customers-pn" id="continueImportBtn" - mdbTooltip="{{ 'Import the customer' | translate }}" + matTooltip="{{ 'Import the customer' | translate }}" > Continue Import diff --git a/eform-client/src/app/plugins/modules/customers-pn/components/customer-pn-import/customer-pn-import.component.ts b/eform-client/src/app/plugins/modules/customers-pn/components/customer-pn-import/customer-pn-import.component.ts index 9dea4099..fa2ebe6d 100644 --- a/eform-client/src/app/plugins/modules/customers-pn/components/customer-pn-import/customer-pn-import.component.ts +++ b/eform-client/src/app/plugins/modules/customers-pn/components/customer-pn-import/customer-pn-import.component.ts @@ -12,6 +12,7 @@ const URL = ''; selector: 'app-customer-pn-import', templateUrl: './customer-pn-import.component.html', styleUrls: ['./customer-pn-import.component.scss'], + standalone: false }) export class CustomerPnImportComponent implements OnInit { public data: any = []; diff --git a/eform-client/src/app/plugins/modules/customers-pn/components/customers-pn-fields/customers-pn-fields.component.ts b/eform-client/src/app/plugins/modules/customers-pn/components/customers-pn-fields/customers-pn-fields.component.ts index 8be56e9b..3e982d5c 100644 --- a/eform-client/src/app/plugins/modules/customers-pn/components/customers-pn-fields/customers-pn-fields.component.ts +++ b/eform-client/src/app/plugins/modules/customers-pn/components/customers-pn-fields/customers-pn-fields.component.ts @@ -16,6 +16,7 @@ import { selector: 'app-customers-pn-fields', templateUrl: './customers-pn-fields.component.html', styleUrls: ['./customers-pn-fields.component.scss'], + standalone: false }) export class CustomersPnFieldsComponent implements OnInit { isChecked = false; diff --git a/eform-client/src/app/plugins/modules/customers-pn/components/customers-pn-page/customers-pn-page.component.html b/eform-client/src/app/plugins/modules/customers-pn/components/customers-pn-page/customers-pn-page.component.html index f23e8e1f..9ab0aca2 100644 --- a/eform-client/src/app/plugins/modules/customers-pn/components/customers-pn-page/customers-pn-page.component.html +++ b/eform-client/src/app/plugins/modules/customers-pn/components/customers-pn-page/customers-pn-page.component.html @@ -3,7 +3,7 @@
- - - - diff --git a/eform-client/src/app/plugins/modules/customers-pn/components/customers-pn-page/customers-pn-page.component.ts b/eform-client/src/app/plugins/modules/customers-pn/components/customers-pn-page/customers-pn-page.component.ts index 10e9c8b5..abe13336 100644 --- a/eform-client/src/app/plugins/modules/customers-pn/components/customers-pn-page/customers-pn-page.component.ts +++ b/eform-client/src/app/plugins/modules/customers-pn/components/customers-pn-page/customers-pn-page.component.ts @@ -3,8 +3,8 @@ import { EventEmitter, OnInit, Output, - ViewChild, } from '@angular/core'; +import { MatDialog } from '@angular/material/dialog'; import { TableHeaderElementModel } from 'src/app/common/models'; import { CustomersPnFieldStatusEnum } from '../../enums'; import { @@ -15,16 +15,19 @@ import { } from '../../models'; import { CustomersPnFieldsService, CustomersPnService } from '../../services'; import { CustomersStateService } from '../store'; +import { CustomerPnAddComponent } from '../customer-pn-add/customer-pn-add.component'; +import { CustomerPnEditComponent } from '../customer-pn-edit/customer-pn-edit.component'; +import { CustomerPnDeleteComponent } from '../customer-pn-delete/customer-pn-delete.component'; +import { dialogConfigHelper } from 'src/app/common/helpers'; +import { Overlay } from '@angular/cdk/overlay'; @Component({ selector: 'app-customers-pn-page', templateUrl: './customers-pn-page.component.html', styleUrls: ['./customers-pn-page.component.scss'], + standalone: false }) export class CustomersPnPageComponent implements OnInit { - @ViewChild('createCustomerModal', { static: false }) createCustomerModal; - @ViewChild('editCustomerModal', { static: false }) editCustomerModal; - @ViewChild('deleteCustomerModal', { static: false }) deleteCustomerModal; @Output() onCustomerDuplicated: EventEmitter = new EventEmitter(); get fieldStatusEnum() { return CustomersPnFieldStatusEnum; @@ -39,7 +42,9 @@ export class CustomersPnPageComponent implements OnInit { constructor( private customersService: CustomersPnService, private customersFieldsService: CustomersPnFieldsService, - public customersStateService: CustomersStateService + public customersStateService: CustomersStateService, + private dialog: MatDialog, + private overlay: Overlay ) {} checkFieldStatus(numField: number) { @@ -100,19 +105,42 @@ export class CustomersPnPageComponent implements OnInit { } showCreateCustomerModal() { - this.createCustomerModal.show(); + const modal = this.dialog.open(CustomerPnAddComponent, { + ...dialogConfigHelper(this.overlay, { fields: this.fieldsModel }), + minWidth: 600 + }); + modal.componentInstance.customerCreated.subscribe(() => { + this.getAllCustomers(); + }); } showCopyCustomerModal(model: CustomerPnModel) { - this.createCustomerModal.showCopy(model.id); + const modal = this.dialog.open(CustomerPnAddComponent, { + ...dialogConfigHelper(this.overlay, { customerId: model.id, fields: this.fieldsModel }), + minWidth: 600 + }); + modal.componentInstance.customerCreated.subscribe(() => { + this.getAllCustomers(); + }); } showEditCustomerModal(model: CustomerPnModel) { - this.editCustomerModal.show(model.id); + const modal = this.dialog.open(CustomerPnEditComponent, { + ...dialogConfigHelper(this.overlay, { customerId: model.id, fields: this.fieldsModel }), + minWidth: 600 + }); + modal.componentInstance.customerUpdate.subscribe(() => { + this.getAllCustomers(); + }); } showDeleteCustomerModal(model: CustomerPnModel) { - this.deleteCustomerModal.show(model); + const modal = this.dialog.open(CustomerPnDeleteComponent, { + ...dialogConfigHelper(this.overlay, { customer: model, fields: this.fieldsModel }) + }); + modal.componentInstance.customerDeleted.subscribe(() => { + this.onCustomerDeleted(); + }); } onSearchInputChanged(value: string) { diff --git a/eform-client/src/app/plugins/modules/customers-pn/components/store/customers-state.service.ts b/eform-client/src/app/plugins/modules/customers-pn/components/store/customers-state.service.ts index 2ad069d2..49b02e30 100644 --- a/eform-client/src/app/plugins/modules/customers-pn/components/store/customers-state.service.ts +++ b/eform-client/src/app/plugins/modules/customers-pn/components/store/customers-state.service.ts @@ -1,127 +1,122 @@ -import { Injectable } from '@angular/core'; -import { Observable } from 'rxjs'; +import {Injectable} from '@angular/core'; +import {Observable, tap} from 'rxjs'; import { + CommonPaginationState, OperationDataResult, PaginationModel, SortModel, } from 'src/app/common/models'; -import { updateTableSort, getOffset } from 'src/app/common/helpers'; -import { map } from 'rxjs/operators'; -import { CustomersQuery, CustomersStore } from './'; -import { CustomersPnService } from '../../services'; -import { CustomersPnModel } from '../../models'; +import {updateTableSort, getOffset} from 'src/app/common/helpers'; +import {CustomersPnService} from '../../services'; +import {Store} from '@ngrx/store'; +import { + selectCustomersFilters, + selectCustomersPagination, + customersUpdateTotalCustomers, + customersUpdateFilters, + customersUpdatePagination, + CustomersFiltrationModel, + selectCustomersPaginationPageSize, + selectCustomersNameFilters, + selectCustomersTotal, +} from '../../state'; +import {CustomersPnModel} from '../../models'; +import {map} from 'rxjs/operators'; -@Injectable() +@Injectable({providedIn: 'root'}) export class CustomersStateService { + private selectCustomersFilters$ = this.store.select(selectCustomersFilters); + private selectCustomersPagination$ = this.store.select(selectCustomersPagination); + currentPagination: CommonPaginationState; + currentFilters: CustomersFiltrationModel; + constructor( - private store: CustomersStore, + private store: Store, private service: CustomersPnService, - private query: CustomersQuery - ) {} + ) { + this.selectCustomersPagination$.subscribe(x => this.currentPagination = x); + this.selectCustomersFilters$.subscribe(x => this.currentFilters = x); + } getAllCustomers(): Observable> { return this.service .getAllCustomers({ - ...this.query.pageSetting.pagination, - ...this.query.pageSetting.filters, - sortColumnName: this.query.pageSetting.pagination.sort, - name: this.query.pageSetting.filters.nameFilter, + ...this.currentFilters, + ...this.currentPagination, + sortColumnName: this.currentPagination.sort, + name: this.currentFilters.nameFilter, }) .pipe( - map((response) => { + tap((response) => { if (response && response.success && response.model) { - this.store.update(() => ({ - total: response.model.total, - })); + this.store.dispatch(customersUpdateTotalCustomers(response.model.total)); } - return response; }) ); } updateNameFilter(nameFilter: string) { - this.store.update((state) => ({ - filters: { - ...state.filters, - nameFilter: nameFilter, - }, - pagination: { - ...state.pagination, - offset: 0, - }, - })); + this.store.dispatch(customersUpdateFilters({nameFilter: nameFilter})); + this.store.dispatch(customersUpdatePagination({...this.currentPagination, offset: 0})); } updatePageSize(pageSize: number) { - this.store.update((state) => ({ - pagination: { - ...state.pagination, - pageSize: pageSize, - }, - })); + this.store.dispatch(customersUpdatePagination({...this.currentPagination, pageSize: pageSize})); this.checkOffset(); } getPageSize(): Observable { - return this.query.selectPageSize$; + return this.store.select(selectCustomersPaginationPageSize); } getSort(): Observable { - return this.query.selectSort$; + return this.selectCustomersPagination$.pipe( + map(pagination => new SortModel(pagination.sort, pagination.isSortDsc)) + ); } getNameFilter(): Observable { - return this.query.selectNameFilter$; + return this.store.select(selectCustomersNameFilters); } changePage(offset: number) { - this.store.update((state) => ({ - pagination: { - ...state.pagination, - offset: offset, - }, - })); + this.store.dispatch(customersUpdatePagination({...this.currentPagination, offset: offset})); } onDelete() { - this.store.update((state) => ({ - total: state.total - 1, - })); + const currentTotal = this.currentPagination.total || 0; + this.store.dispatch(customersUpdateTotalCustomers(currentTotal - 1)); this.checkOffset(); } onSortTable(sort: string) { const localPageSettings = updateTableSort( sort, - this.query.pageSetting.pagination.sort, - this.query.pageSetting.pagination.isSortDsc + this.currentPagination.sort, + this.currentPagination.isSortDsc ); - this.store.update((state) => ({ - pagination: { - ...state.pagination, - isSortDsc: localPageSettings.isSortDsc, - sort: localPageSettings.sort, - }, - })); + this.store.dispatch(customersUpdatePagination({...this.currentPagination, ...localPageSettings})); } checkOffset() { + const currentTotal = this.currentPagination.total || 0; const newOffset = getOffset( - this.query.pageSetting.pagination.pageSize, - this.query.pageSetting.pagination.offset, - this.query.pageSetting.total + this.currentPagination.pageSize, + this.currentPagination.offset, + currentTotal ); - if (newOffset !== this.query.pageSetting.pagination.offset) { - this.store.update((state) => ({ - pagination: { - ...state.pagination, - offset: newOffset, - }, - })); + if (newOffset !== this.currentPagination.offset) { + this.store.dispatch(customersUpdatePagination({...this.currentPagination, offset: newOffset})); } } getPagination(): Observable { - return this.query.selectPagination$; + return this.store.select(selectCustomersTotal).pipe( + map(total => new PaginationModel( + total, + this.currentPagination.pageSize, + this.currentPagination.offset + )) + ); } } diff --git a/eform-client/src/app/plugins/modules/customers-pn/components/store/customers.query.ts b/eform-client/src/app/plugins/modules/customers-pn/components/store/customers.query.ts index ea0ba413..dbcedf81 100644 --- a/eform-client/src/app/plugins/modules/customers-pn/components/store/customers.query.ts +++ b/eform-client/src/app/plugins/modules/customers-pn/components/store/customers.query.ts @@ -1,30 +1,30 @@ -import { Injectable } from '@angular/core'; -import { Query } from '@datorama/akita'; -import { CustomersState, CustomersStore } from './'; -import { PaginationModel, SortModel } from 'src/app/common/models'; - -@Injectable({ providedIn: 'root' }) -export class CustomersQuery extends Query { - constructor(protected store: CustomersStore) { - super(store); - } - - get pageSetting() { - return this.getValue(); - } - - selectNameFilter$ = this.select((state) => state.filters.nameFilter); - selectPageSize$ = this.select((state) => state.pagination.pageSize); - selectPagination$ = this.select( - (state) => - new PaginationModel( - state.total, - state.pagination.pageSize, - state.pagination.offset - ) - ); - - selectSort$ = this.select( - (state) => new SortModel(state.pagination.sort, state.pagination.isSortDsc) - ); -} +// import { Injectable } from '@angular/core'; +// import { Query } from '@datorama/akita'; +// import { CustomersState, CustomersStore } from './'; +// import { PaginationModel, SortModel } from 'src/app/common/models'; +// +// @Injectable({ providedIn: 'root' }) +// export class CustomersQuery extends Query { +// constructor(protected store: CustomersStore) { +// super(store); +// } +// +// get pageSetting() { +// return this.getValue(); +// } +// +// selectNameFilter$ = this.select((state) => state.filters.nameFilter); +// selectPageSize$ = this.select((state) => state.pagination.pageSize); +// selectPagination$ = this.select( +// (state) => +// new PaginationModel( +// state.total, +// state.pagination.pageSize, +// state.pagination.offset +// ) +// ); +// +// selectSort$ = this.select( +// (state) => new SortModel(state.pagination.sort, state.pagination.isSortDsc) +// ); +// } diff --git a/eform-client/src/app/plugins/modules/customers-pn/components/store/customers.store.ts b/eform-client/src/app/plugins/modules/customers-pn/components/store/customers.store.ts index b93c37eb..8edcb8d0 100644 --- a/eform-client/src/app/plugins/modules/customers-pn/components/store/customers.store.ts +++ b/eform-client/src/app/plugins/modules/customers-pn/components/store/customers.store.ts @@ -1,52 +1,52 @@ -import { Injectable } from '@angular/core'; -import { persistState, Store, StoreConfig } from '@datorama/akita'; -import { - FiltrationStateModel, - CommonPaginationState, -} from 'src/app/common/models'; - -export interface CustomersState { - pagination: CommonPaginationState; - filters: FiltrationStateModel; - total: number; -} - -export function createInitialState(): CustomersState { - return { - pagination: { - pageSize: 10, - sort: 'Id', - isSortDsc: false, - offset: 0, - }, - filters: { - nameFilter: '', - }, - total: 0, - }; -} - -const customersPersistStorage = persistState({ - include: ['customers'], - key: 'customersPn', - preStorageUpdate(storeName, state) { - return { - pagination: state.pagination, - filters: state.filters, - }; - }, -}); - -@Injectable({ providedIn: 'root' }) -@StoreConfig({ name: 'customers', resettable: true }) -export class CustomersStore extends Store { - constructor() { - super(createInitialState()); - } -} - -export const customersPersistProvider = { - provide: 'persistStorage', - useValue: customersPersistStorage, - multi: true, -}; +// import { Injectable } from '@angular/core'; +// import { persistState, Store, StoreConfig } from '@datorama/akita'; +// import { +// FiltrationStateModel, +// CommonPaginationState, +// } from 'src/app/common/models'; +// +// export interface CustomersState { +// pagination: CommonPaginationState; +// filters: FiltrationStateModel; +// total: number; +// } +// +// export function createInitialState(): CustomersState { +// return { +// pagination: { +// pageSize: 10, +// sort: 'Id', +// isSortDsc: false, +// offset: 0, +// }, +// filters: { +// nameFilter: '', +// }, +// total: 0, +// }; +// } +// +// const customersPersistStorage = persistState({ +// include: ['customers'], +// key: 'customersPn', +// preStorageUpdate(storeName, state) { +// return { +// pagination: state.pagination, +// filters: state.filters, +// }; +// }, +// }); +// +// @Injectable({ providedIn: 'root' }) +// @StoreConfig({ name: 'customers', resettable: true }) +// export class CustomersStore extends Store { +// constructor() { +// super(createInitialState()); +// } +// } +// +// export const customersPersistProvider = { +// provide: 'persistStorage', +// useValue: customersPersistStorage, +// multi: true, +// }; diff --git a/eform-client/src/app/plugins/modules/customers-pn/components/store/index.ts b/eform-client/src/app/plugins/modules/customers-pn/components/store/index.ts index 1f2bd656..9e7b2009 100644 --- a/eform-client/src/app/plugins/modules/customers-pn/components/store/index.ts +++ b/eform-client/src/app/plugins/modules/customers-pn/components/store/index.ts @@ -1,3 +1,3 @@ -export * from './customers.query'; -export * from './customers.store'; +// export * from './customers.query'; +// export * from './customers.store'; export * from './customers-state.service'; diff --git a/eform-client/src/app/plugins/modules/customers-pn/customers-pn.module.ts b/eform-client/src/app/plugins/modules/customers-pn/customers-pn.module.ts index ce7337b0..17c038ca 100644 --- a/eform-client/src/app/plugins/modules/customers-pn/customers-pn.module.ts +++ b/eform-client/src/app/plugins/modules/customers-pn/customers-pn.module.ts @@ -3,7 +3,13 @@ import { CommonModule } from '@angular/common'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { NgSelectModule } from '@ng-select/ng-select'; import { TranslateModule } from '@ngx-translate/core'; -import { MDBRootModule } from 'angular-bootstrap-md'; +import { RouterModule } from '@angular/router'; +import { StoreModule } from '@ngrx/store'; +import { MatDialogModule } from '@angular/material/dialog'; +import { MatButtonModule } from '@angular/material/button'; +import { MatInputModule } from '@angular/material/input'; +import { MatFormFieldModule } from '@angular/material/form-field'; +import { MatTooltipModule } from '@angular/material/tooltip'; import { CustomerPnLayoutComponent } from './layouts'; import { CustomersPnFieldsService, @@ -20,9 +26,9 @@ import { CustomersPnFieldsComponent, CustomersPnPageComponent, } from './components'; -import { FontAwesomeModule } from '@fortawesome/angular-fontawesome'; import { EformSharedModule } from 'src/app/common/modules/eform-shared/eform-shared.module'; -import { customersPersistProvider, CustomersStateService} from './components/store'; +import { CustomersStateService } from './components/store'; +import { customersReducer } from './state'; @NgModule({ imports: [ @@ -32,10 +38,17 @@ import { customersPersistProvider, CustomersStateService} from './components/sto SharedPnModule, CustomersPnRouting, TranslateModule, - MDBRootModule, NgSelectModule, - FontAwesomeModule, EformSharedModule, + RouterModule, + MatDialogModule, + MatButtonModule, + MatInputModule, + MatFormFieldModule, + MatTooltipModule, + StoreModule.forFeature('customersPn', { + customersState: customersReducer, + }), ], declarations: [ CustomerPnLayoutComponent, @@ -51,7 +64,6 @@ import { customersPersistProvider, CustomersStateService} from './components/sto CustomersPnFieldsService, CustomersPnSettingsService, CustomersStateService, - customersPersistProvider, ], }) export class CustomersPnModule {} diff --git a/eform-client/src/app/plugins/modules/customers-pn/layouts/customer-pn-layout.component.ts b/eform-client/src/app/plugins/modules/customers-pn/layouts/customer-pn-layout.component.ts index 01093b08..fed3c482 100644 --- a/eform-client/src/app/plugins/modules/customers-pn/layouts/customer-pn-layout.component.ts +++ b/eform-client/src/app/plugins/modules/customers-pn/layouts/customer-pn-layout.component.ts @@ -1,23 +1,38 @@ import { AfterContentInit, Component, OnInit } from '@angular/core'; import { TranslateService } from '@ngx-translate/core'; -import { AuthStateService } from 'src/app/common/store'; +import { Store } from '@ngrx/store'; +import { addPluginToVisited, selectPluginsVisitedPlugins } from 'src/app/state'; +import { take } from 'rxjs'; import { translates } from './../i18n/translates'; @Component({ selector: 'app-customers-pn-layout', template: ``, + standalone: false }) export class CustomerPnLayoutComponent implements AfterContentInit, OnInit { + private pluginName = 'customers-pn'; + constructor( private translateService: TranslateService, - private authStateService: AuthStateService - ) {} + store: Store + ) { + store.select(selectPluginsVisitedPlugins) + .pipe(take(1)) + .subscribe(x => { + // check current plugin in activated plugin + if (x.findIndex(y => y === this.pluginName) === -1) { + // add all plugin translates one time + Object.keys(translates).forEach(locale => { + this.translateService.setTranslation(locale, translates[locale], true); + }); + // add plugin to visited plugins + store.dispatch(addPluginToVisited(this.pluginName)); + } + }); + } ngOnInit() {} - ngAfterContentInit() { - const lang = this.authStateService.currentUserLocale; - const i18n = translates[lang]; - this.translateService.setTranslation(lang, i18n, true); - } + ngAfterContentInit() {} } diff --git a/eform-client/src/app/plugins/modules/customers-pn/state/customers-pn.state.ts b/eform-client/src/app/plugins/modules/customers-pn/state/customers-pn.state.ts new file mode 100644 index 00000000..20484402 --- /dev/null +++ b/eform-client/src/app/plugins/modules/customers-pn/state/customers-pn.state.ts @@ -0,0 +1,7 @@ +import { + CustomersState, +} from './'; + +export interface CustomersPnState { + customersState: CustomersState; +} diff --git a/eform-client/src/app/plugins/modules/customers-pn/state/customers/customers.actions.ts b/eform-client/src/app/plugins/modules/customers-pn/state/customers/customers.actions.ts new file mode 100644 index 00000000..15dde6ba --- /dev/null +++ b/eform-client/src/app/plugins/modules/customers-pn/state/customers/customers.actions.ts @@ -0,0 +1,18 @@ +import {createAction} from '@ngrx/store'; +import {CommonPaginationState} from 'src/app/common/models'; +import {CustomersFiltrationModel} from './'; + +export const customersUpdateFilters = createAction( + '[Customers] Update Filters', + (payload: CustomersFiltrationModel) => ({payload}) +); + +export const customersUpdatePagination = createAction( + '[Customers] Update Pagination', + (payload: CommonPaginationState) => ({payload}) +); + +export const customersUpdateTotalCustomers = createAction( + '[Customers] Update Total Customers', + (payload: number) => ({payload}) +); diff --git a/eform-client/src/app/plugins/modules/customers-pn/state/customers/customers.reducer.ts b/eform-client/src/app/plugins/modules/customers-pn/state/customers/customers.reducer.ts new file mode 100644 index 00000000..065e1deb --- /dev/null +++ b/eform-client/src/app/plugins/modules/customers-pn/state/customers/customers.reducer.ts @@ -0,0 +1,60 @@ +import {CommonPaginationState} from 'src/app/common/models'; +import {Action, createReducer, on} from '@ngrx/store'; +import { + customersUpdateFilters, + customersUpdatePagination, + customersUpdateTotalCustomers +} from './customers.actions'; + +export interface CustomersFiltrationModel { + nameFilter: string; +} + +export interface CustomersState { + pagination: CommonPaginationState; + filters: CustomersFiltrationModel; + total: number; +} + +export const customersInitialState: CustomersState = { + pagination: { + pageSize: 10, + sort: 'Id', + isSortDsc: false, + offset: 0, + pageIndex: 0, + total: 0, + }, + filters: { + nameFilter: '', + }, + total: 0, +}; + +export const _customersReducer = createReducer( + customersInitialState, + on(customersUpdateFilters, (state, {payload}) => ({ + ...state, + filters: { + ...state.filters, + ...payload, + }, + })), + on(customersUpdatePagination, (state, {payload}) => ({ + ...state, + pagination: { ...state, ...payload, }, + })), + on(customersUpdateTotalCustomers, (state, {payload}) => ({ + ...state, + pagination: { + ...state.pagination, + total: payload, + }, + total: payload, + } + )), +); + +export function customersReducer(state: CustomersState | undefined, action: Action) { + return _customersReducer(state, action); +} diff --git a/eform-client/src/app/plugins/modules/customers-pn/state/customers/customers.selector.ts b/eform-client/src/app/plugins/modules/customers-pn/state/customers/customers.selector.ts new file mode 100644 index 00000000..16d36945 --- /dev/null +++ b/eform-client/src/app/plugins/modules/customers-pn/state/customers/customers.selector.ts @@ -0,0 +1,23 @@ +import { + CustomersPnState, +} from '../'; +import {createSelector} from '@ngrx/store'; + +const selectCustomersPn = + (state: {customersPn: CustomersPnState}) => state.customersPn; +export const selectCustomers = + createSelector(selectCustomersPn, (state) => state.customersState); +export const selectCustomersFilters = + createSelector(selectCustomers, (state) => state.filters); +export const selectCustomersPagination = + createSelector(selectCustomers, (state) => state.pagination); +export const selectCustomersPaginationSort = + createSelector(selectCustomers, (state) => state.pagination.sort); +export const selectCustomersPaginationIsSortDsc = + createSelector(selectCustomers, (state) => state.pagination.isSortDsc ? 'desc' : 'asc'); +export const selectCustomersNameFilters = + createSelector(selectCustomers, (state) => state.filters.nameFilter); +export const selectCustomersPaginationPageSize = + createSelector(selectCustomers, (state) => state.pagination.pageSize); +export const selectCustomersTotal = + createSelector(selectCustomers, (state) => state.total); diff --git a/eform-client/src/app/plugins/modules/customers-pn/state/customers/index.ts b/eform-client/src/app/plugins/modules/customers-pn/state/customers/index.ts new file mode 100644 index 00000000..f7aa0b2e --- /dev/null +++ b/eform-client/src/app/plugins/modules/customers-pn/state/customers/index.ts @@ -0,0 +1,3 @@ +export * from './customers.actions'; +export * from './customers.reducer'; +export * from './customers.selector'; diff --git a/eform-client/src/app/plugins/modules/customers-pn/state/index.ts b/eform-client/src/app/plugins/modules/customers-pn/state/index.ts new file mode 100644 index 00000000..14c28e7d --- /dev/null +++ b/eform-client/src/app/plugins/modules/customers-pn/state/index.ts @@ -0,0 +1,2 @@ +export * from './customers'; +export * from './customers-pn.state';