mirror of
https://dev.azure.com/hugendubel/ISA/_git/ISA-Frontend
synced 2025-12-31 09:37:15 +01:00
Outsource FIlterLoaderComponent & RemissionListActionsComponent
This commit is contained in:
Sebastian
4
apps/sales/src/app/components/content-header/index.ts
Normal file
4
apps/sales/src/app/components/content-header/index.ts
Normal file
@@ -0,0 +1,4 @@
|
||||
// start:ng42.barrel
|
||||
export * from './content-header.component';
|
||||
// end:ng42.barrel
|
||||
|
||||
@@ -517,7 +517,6 @@ export class RemissionState {
|
||||
setIsLoading(
|
||||
ctx: StateContext<RemissionStateModel>
|
||||
) {
|
||||
console.log('Handle Action RequestUpdateRemissionFilter')
|
||||
ctx.patchState({
|
||||
isLoading: true
|
||||
})
|
||||
|
||||
@@ -25,16 +25,15 @@ import {
|
||||
IconModule,
|
||||
DeleteDropdownModule
|
||||
} from '@libs/ui';
|
||||
import { ContentHeaderComponent } from '../components/content-header';
|
||||
import { LogOutComponent } from '../components/log-out/log-out.component';
|
||||
import { LogInComponent } from '../components/log-in/log-in.component';
|
||||
import { ErrorModule } from '../core/error/component/error.module';
|
||||
import { DoubleChoiceSwitchModule } from '@libs/ui/lib/double-choice-switch';
|
||||
import { RemissionLeaveDialogComponent } from './remission/components/remission-leave-dialog/remission-leave-dialog.component';
|
||||
import { RemissionReminderDialogComponent } from './remission/components/remission-reminder-dialog/remission-reminder-dialog.component';
|
||||
// tslint:disable-next-line: max-line-length
|
||||
import { RemissionStartedLeaveDialogComponent } from './remission/components/remission-started-leave-dialog/remission-started-leave-dialog.component';
|
||||
import { FilterButtonModule } from '@libs/ui/lib/filter-button';
|
||||
import { ContentHeaderComponent } from '../components/content-header/content-header.component';
|
||||
import { RemissionStartedLeaveDialogComponent } from './remission/components/remission-started-leave-dialog';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
@@ -72,7 +71,7 @@ import { ContentHeaderComponent } from '../components/content-header/content-hea
|
||||
IconModule,
|
||||
ErrorModule,
|
||||
DoubleChoiceSwitchModule,
|
||||
FilterButtonModule
|
||||
FilterButtonModule,
|
||||
],
|
||||
exports: [
|
||||
HeaderComponent,
|
||||
@@ -89,7 +88,7 @@ import { ContentHeaderComponent } from '../components/content-header/content-hea
|
||||
RemissionStartedLeaveDialogComponent,
|
||||
RemissionLeaveDialogComponent,
|
||||
RemissionReminderDialogComponent,
|
||||
FilterButtonModule
|
||||
FilterButtonModule,
|
||||
]
|
||||
})
|
||||
export class ComponentsModule {}
|
||||
|
||||
@@ -0,0 +1,4 @@
|
||||
// start:ng42.barrel
|
||||
export * from './remission-list-actions.component';
|
||||
// end:ng42.barrel
|
||||
|
||||
@@ -0,0 +1,21 @@
|
||||
<div class="actions" *ngIf="status === 'created'">
|
||||
<div class="secondary-actions">
|
||||
<div class="add-article">
|
||||
<app-button *ngIf="isSafari" (action)="addProduct.emit()"
|
||||
>Artikel hinzufügen</app-button
|
||||
>
|
||||
<lib-remission-product-scanner
|
||||
*ngIf="isNative"
|
||||
(scan)="scanProduct.emit($event)"
|
||||
></lib-remission-product-scanner>
|
||||
</div>
|
||||
<div class="open-remissions">
|
||||
<app-remission-open-shipping-documents-widget></app-remission-open-shipping-documents-widget>
|
||||
</div>
|
||||
</div>
|
||||
<div class="start-remission">
|
||||
<app-button [primary]="true" (action)="startRemission.emit()"
|
||||
>Remission starten</app-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,26 @@
|
||||
.actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
.start-remission,
|
||||
.add-article {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.start-remission {
|
||||
padding-top: 22px;
|
||||
}
|
||||
|
||||
.secondary-actions {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.add-article,
|
||||
.open-remissions {
|
||||
padding-top: 11px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
describe('RemissionListActionsComponent', () => {})
|
||||
@@ -0,0 +1,20 @@
|
||||
import { Component, ChangeDetectionStrategy, Input, Output, EventEmitter } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-remission-list-actions',
|
||||
templateUrl: './remission-list-actions.component.html',
|
||||
styleUrls: ['./remission-list-actions.component.scss'],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush
|
||||
})
|
||||
|
||||
export class RemissionListActionsComponent {
|
||||
@Input() status: 'created' | 'started' | 'completed' = 'created';
|
||||
@Input() isNative: boolean;
|
||||
@Input() isSafari: boolean;
|
||||
|
||||
@Output() startRemission = new EventEmitter<void>();
|
||||
@Output() addProduct = new EventEmitter<void>();
|
||||
@Output() scanProduct = new EventEmitter<string>()
|
||||
|
||||
constructor() { }
|
||||
}
|
||||
@@ -90,7 +90,6 @@ export class RemissionListComponent implements OnInit, OnDestroy {
|
||||
constructor(
|
||||
private remissionService: RemissionService,
|
||||
private remissionHelper: RemissionHelperService,
|
||||
private store: Store,
|
||||
private cdr: ChangeDetectorRef
|
||||
) {}
|
||||
|
||||
@@ -279,6 +278,7 @@ export class RemissionListComponent implements OnInit, OnDestroy {
|
||||
items: RemissionProduct[];
|
||||
completed: boolean;
|
||||
}) => {
|
||||
console.log('Subscribe [RemissionProducts]', result);
|
||||
this.totalHits = result.hits;
|
||||
|
||||
this.updateFullListLoaded({
|
||||
|
||||
@@ -0,0 +1,4 @@
|
||||
// start:ng42.barrel
|
||||
export * from './remission-started-leave-dialog.component';
|
||||
// end:ng42.barrel
|
||||
|
||||
@@ -2,48 +2,40 @@
|
||||
#remissionListContainer
|
||||
id="remission-list-container"
|
||||
class="remission-list-container"
|
||||
*ngIf="{
|
||||
remissionProcess: currentRemissionProcess$ | async,
|
||||
selectedSource: currentRemissionSource$ | async,
|
||||
suppliers: remissionSuppliers$ | async,
|
||||
showOverflowInitialMessage: showOverflowInitialMessage$ | async,
|
||||
remissionListHits: remissionListHits$ | async,
|
||||
isLoading: isLoading$ | async
|
||||
} as data"
|
||||
>
|
||||
<div class="headers" *ngIf="resourceTypeSwitch">
|
||||
<div class="header-item resource-type">
|
||||
<lib-double-choice-switch
|
||||
[animations]="true"
|
||||
[model]="resourceTypeSwitch"
|
||||
(change)="resourceTypeChange($event)"
|
||||
></lib-double-choice-switch>
|
||||
</div>
|
||||
<div class="headers">
|
||||
<div class="header-item title">
|
||||
{{ selectedResourceTypeSpecificModel.headerTitle }}
|
||||
Remission
|
||||
</div>
|
||||
<div class="header-item sub-title">
|
||||
<span
|
||||
class="align-center"
|
||||
[ngClass]="{ central: selectedRemissionResourceType === 'zentral' }"
|
||||
>{{ selectedResourceTypeSpecificModel.headerSubTitle }}</span
|
||||
[ngClass]="{ central: data.selectedSource === 'zentral' }"
|
||||
> Wählen Sie den Bereich aus dem Sie Artikel remittieren möchten.</span
|
||||
>
|
||||
</div>
|
||||
|
||||
<ng-container *ngIf="!(isLoading$ | async); else spinner">
|
||||
<ng-container>
|
||||
<div class="filters">
|
||||
<app-remission-tab-filters [suppliers$]="remissionSuppliers$" [sources$]="remissionSources$"></app-remission-tab-filters>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
<ng-template #spinner>
|
||||
<div class="content-container">
|
||||
<div class="first-row"></div>
|
||||
<div class="second-row"></div>
|
||||
<div class="third-row"></div>
|
||||
<div class="fourth-row"></div>
|
||||
</div>
|
||||
</ng-template>
|
||||
|
||||
<div
|
||||
*ngIf="
|
||||
selectedRemissionResourceType === 'ueberlauf';
|
||||
data.selectedSource === 'ueberlauf';
|
||||
else supplierAndFilter
|
||||
"
|
||||
>
|
||||
<ng-container *ngIf="capacities.length; else spinner">
|
||||
<ng-container *ngIf="capacities.length && !data.isLoading; else loading">
|
||||
<div class="progress-wrapper">
|
||||
<ng-container *ngFor="let item of capacities">
|
||||
<div>
|
||||
@@ -59,81 +51,42 @@
|
||||
</div>
|
||||
<ng-container *ngTemplateOutlet="supplierAndFilter"></ng-container
|
||||
></ng-container>
|
||||
<ng-template #spinner>
|
||||
<div class="content-container">
|
||||
<div class="first-row"></div>
|
||||
<div class="second-row"></div>
|
||||
<div class="third-row"></div>
|
||||
<div class="fourth-row"></div>
|
||||
</div>
|
||||
<ng-template #loading>
|
||||
<app-filter-loader></app-filter-loader>
|
||||
</ng-template>
|
||||
</div>
|
||||
|
||||
<ng-template #supplierAndFilter>
|
||||
<div class="supplier" *ngIf="suppliers">
|
||||
<div>
|
||||
<lib-small-double-choice-switch
|
||||
[leftValue]="suppliers.leftSupplier.name"
|
||||
[rightValue]="suppliers.rightSupplier.name"
|
||||
switchColor="#596470"
|
||||
defaultBgColor="#cfd4d8"
|
||||
(switch)="supplierUpdated($event)"
|
||||
[selectedSide]="selectedSupplier"
|
||||
></lib-small-double-choice-switch>
|
||||
</div>
|
||||
</div>
|
||||
<div class="filters">
|
||||
<app-remission-filters
|
||||
*ngIf="remissionProcess"
|
||||
[remissionProcessId]="remissionProcess.id"
|
||||
[remissionResourceType]="selectedRemissionResourceType"
|
||||
(toggleChange)="filterToggled($event)"
|
||||
></app-remission-filters>
|
||||
</div>
|
||||
<div
|
||||
class="note"
|
||||
*ngIf="
|
||||
(!listLoaded || hits === -1) &&
|
||||
remissionListHits === 0 &&
|
||||
selectedRemissionResourceType === 'ueberlauf' &&
|
||||
showOverflowInitialMessage
|
||||
data.selectedSource == 'ueberlauf' &&
|
||||
data.showOverflowInitialMessage
|
||||
"
|
||||
>
|
||||
<span class="align-center"
|
||||
>Wählen Sie die Abteilung aus, die Sie remittieren möchten.</span
|
||||
>
|
||||
</div>
|
||||
<div class="actions" *ngIf="listLoaded && remissionListHits > 0">
|
||||
<div class="start-remission">
|
||||
<app-button [primary]="true" (action)="openStartRemissionDialog()"
|
||||
>Remission starten</app-button
|
||||
>
|
||||
</div>
|
||||
<div class="secondary-actions">
|
||||
<div class="add-article">
|
||||
<app-button *ngIf="isSafari" (action)="openAddProductToRemission()"
|
||||
>Artikel hinzufügen</app-button
|
||||
>
|
||||
<lib-remission-product-scanner
|
||||
*ngIf="isNative"
|
||||
(scan)="searchProductScannedResult($event)"
|
||||
></lib-remission-product-scanner>
|
||||
</div>
|
||||
<div class="open-remissions">
|
||||
<app-remission-open-shipping-documents-widget></app-remission-open-shipping-documents-widget>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<app-remission-list-actions
|
||||
(startRemission)="openStartRemissionDialog()"
|
||||
(addProduct)="openAddProductToRemission()"
|
||||
(scanProduct)="searchProductScannedResult($event)"
|
||||
[isNative]="isNative"
|
||||
[isSafari]="isSafari"
|
||||
status="created"
|
||||
*ngIf="data.remissionListHits > 0"></app-remission-list-actions>
|
||||
</ng-template>
|
||||
</div>
|
||||
<div id="list" class="list">
|
||||
<div class="hits" *ngIf="remissionListHits">
|
||||
<span>{{ remissionListHits }} Titel</span>
|
||||
<div class="hits" *ngIf="!data.isLoading && data.remissionListHits >= 0">
|
||||
<span>{{ data.remissionListHits }} Titel</span>
|
||||
</div>
|
||||
<app-remission-list
|
||||
*ngIf="remissionProcess"
|
||||
[remissionProcess]="remissionProcess"
|
||||
[selectedRemissionResourceType]="selectedRemissionResourceType"
|
||||
[hits]="remissionListHits"
|
||||
*ngIf="data.remissionProcess"
|
||||
[remissionProcess]="data.remissionProcess"
|
||||
[selectedRemissionResourceType]="data.selectedSource"
|
||||
[hits]="data.remissionListHits"
|
||||
#remissionList
|
||||
></app-remission-list>
|
||||
<app-remission-to-top-to-bottom-actions
|
||||
|
||||
@@ -23,7 +23,7 @@
|
||||
}
|
||||
|
||||
.title {
|
||||
margin-top: 31px;
|
||||
margin-top: 12px;
|
||||
font-family: 'Open Sans';
|
||||
font-size: 26px;
|
||||
font-weight: bold;
|
||||
@@ -78,34 +78,7 @@
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
margin-top: 22px;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
.start-remission,
|
||||
.add-article {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.start-remission {
|
||||
padding-top: 22px;
|
||||
}
|
||||
|
||||
.secondary-actions {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.add-article,
|
||||
.open-remissions {
|
||||
padding-top: 11px;
|
||||
}
|
||||
}
|
||||
margin: 31px 0 20px;
|
||||
}
|
||||
|
||||
.note {
|
||||
@@ -159,46 +132,3 @@
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.content-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
opacity: 1;
|
||||
margin-top: 20px;
|
||||
animation: load 0.75s linear infinite;
|
||||
|
||||
.first-row {
|
||||
height: 20px;
|
||||
width: 135px;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.second-row {
|
||||
height: 20px;
|
||||
width: 150px;
|
||||
background-color: #ffffff;
|
||||
margin-top: 2px;
|
||||
}
|
||||
.third-row {
|
||||
height: 20px;
|
||||
width: 90px;
|
||||
background-color: #ffffff;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.fourth-row {
|
||||
height: 20px;
|
||||
width: 200px;
|
||||
background-color: #ffffff;
|
||||
margin-top: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes load {
|
||||
50% {
|
||||
opacity: 0.3;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -13,17 +13,14 @@ import {
|
||||
tap,
|
||||
switchMap,
|
||||
catchError,
|
||||
delay,
|
||||
combineAll
|
||||
combineAll,
|
||||
withLatestFrom,
|
||||
map
|
||||
} from 'rxjs/operators';
|
||||
import { DoubleChoiceSwitch } from '@libs/ui';
|
||||
import {
|
||||
RemissionResourceType,
|
||||
RemissionTargetType
|
||||
} from '../../models/remission-resource-type.model';
|
||||
import { ResourceTypeSpecificModel } from '../../models/resource-type-specific-model.model';
|
||||
import { CapacityTypeClientWrapper } from '../../models/capacity-type-client-wrapper.model';
|
||||
import { Side } from '@libs/ui/lib/small-double-choice-switch';
|
||||
import {
|
||||
RemissionSupplier,
|
||||
RemissionService,
|
||||
@@ -37,15 +34,12 @@ import { Select, Store } from '@ngxs/store';
|
||||
import { RemissionSelectors } from 'apps/sales/src/app/core/store/selectors/remission.selectors';
|
||||
import { RemissionProcessStatuses } from 'apps/sales/src/app/core/models/remission-process-statuses.model';
|
||||
import {
|
||||
RESOURCE_TYPE_SPECIFIC_MODEL_OPTIONS,
|
||||
RESOURCE_TYPE_SWITCH
|
||||
} from '../../constants/remission.constants';
|
||||
import { isNullOrUndefined } from 'util';
|
||||
import {
|
||||
SetRemissionProcess,
|
||||
SetRemissionCreated,
|
||||
SetRemissionSource,
|
||||
SetRemissionTarget,
|
||||
SetRemissionStarted,
|
||||
SetRemissionSearchedProduct,
|
||||
ActivateRemissionReminder,
|
||||
@@ -68,7 +62,6 @@ import { RemissionToTopToBottomActionsComponent } from '../../components/remissi
|
||||
// tslint:disable-next-line: max-line-length
|
||||
import { RemissionScanProductInvalidBarcodeComponent } from '../../components/remission-scan-product-invalid-barcode/remission-scan-product-invalid-barcode.component';
|
||||
import { NativeContainerService } from 'shared/lib/remission-container-scanner/native-container.service';
|
||||
import get from 'lodash/get';
|
||||
|
||||
@Component({
|
||||
selector: 'app-remission-list-create',
|
||||
@@ -78,18 +71,24 @@ import get from 'lodash/get';
|
||||
export class RemissionListCreateComponent implements OnInit, OnDestroy {
|
||||
@Select(RemissionSelectors.getRemissionProcessStatuses)
|
||||
remissionProcessStatuses$: Observable<RemissionProcessStatuses>;
|
||||
@Select(RemissionSelectors.getRemissionFilters)
|
||||
remissionFilters$: Observable<RemissionFilter>;
|
||||
@Select(RemissionSelectors.getRemissionProcess)
|
||||
currentRemissionProcess$: Observable<RemissionProcess>;
|
||||
@Select(RemissionSelectors.getRemissionSource)
|
||||
currentRemissionSource$: Observable<RemissionResourceType>;
|
||||
@Select(RemissionSelectors.getRemissiontarget)
|
||||
currentRemissionTarget$: Observable<RemissionTargetType>;
|
||||
currentRemissionTarget$: Observable<string>;
|
||||
@Select(RemissionSelectors.getIsLoading)
|
||||
isLoading$: Observable<boolean>;
|
||||
|
||||
remissionProcess$: Observable<RemissionProcess>;
|
||||
remissionSuppliers$ = this.remissionService.getRemissionTargets();
|
||||
remissionSources$ = this.remissionService.getRemissionSources();
|
||||
showOverflowInitialMessage$: Observable<boolean>;
|
||||
remissionListHits$: Observable<number>;
|
||||
listLoaded$: Observable<boolean>;
|
||||
|
||||
@ViewChild('toTopToBottomActions')
|
||||
toTopToBottomActions: RemissionToTopToBottomActionsComponent;
|
||||
@ViewChild('remissionList') remissionList: RemissionListComponent;
|
||||
@@ -101,29 +100,18 @@ export class RemissionListCreateComponent implements OnInit, OnDestroy {
|
||||
@ViewChild('invalidBarcodeDialog')
|
||||
invalidBarcodeDialog: RemissionScanProductInvalidBarcodeComponent;
|
||||
destroy$ = new Subject();
|
||||
selectedRemissionResourceType: RemissionResourceType =
|
||||
RemissionResourceType.Central;
|
||||
selectedResourceTypeSpecificModel: ResourceTypeSpecificModel =
|
||||
RESOURCE_TYPE_SPECIFIC_MODEL_OPTIONS[this.selectedRemissionResourceType];
|
||||
|
||||
capacities: CapacityTypeClientWrapper[] = [];
|
||||
selectedSupplier: Side = Side.LEFT;
|
||||
suppliers: {
|
||||
leftSupplier: RemissionSupplier;
|
||||
rightSupplier: RemissionSupplier;
|
||||
};
|
||||
remissionProcess: RemissionProcess;
|
||||
searchedRemissionProcess: RemissionProcess;
|
||||
resourceTypeSwitch = RESOURCE_TYPE_SWITCH;
|
||||
remissionProcessStatuses: RemissionProcessStatuses;
|
||||
processNeedsToBeRestoredFromCache = false;
|
||||
remissionListHits = 0;
|
||||
hits: number;
|
||||
listLoaded = false;
|
||||
isIPad = false;
|
||||
isSafari = false;
|
||||
isNative = false;
|
||||
searchedRemissionProduct: RemissionProduct;
|
||||
showOverflowInitialMessage = true;
|
||||
filtersExpanded = false;
|
||||
filtersActive = false;
|
||||
private resetFilters = false;
|
||||
@@ -185,68 +173,11 @@ export class RemissionListCreateComponent implements OnInit, OnDestroy {
|
||||
|
||||
subscriptions() {
|
||||
this.remissionSubsribtionInitialisation();
|
||||
|
||||
this.remissionHelper.remissionListHits$
|
||||
.pipe(
|
||||
delay(0),
|
||||
filter(data => !isNullOrUndefined(data)),
|
||||
takeUntil(this.destroy$)
|
||||
)
|
||||
.subscribe(hits => {
|
||||
this.hits = hits;
|
||||
this.listLoaded = hits !== 0;
|
||||
if (hits >= 0) {
|
||||
this.remissionListHits = hits;
|
||||
}
|
||||
});
|
||||
this.initShowOverflowMessage();
|
||||
this.initRemissionListHits();
|
||||
this.initFiltersSync();
|
||||
}
|
||||
|
||||
loadCurrentRemissionSource() {
|
||||
this.currentRemissionSource$
|
||||
.pipe(
|
||||
filter(data => !isNullOrUndefined(data)),
|
||||
take(1)
|
||||
)
|
||||
.subscribe(this.currentRemissionSourcesSubscriptionHandler);
|
||||
}
|
||||
|
||||
currentRemissionSourcesSubscriptionHandler = (
|
||||
source: RemissionResourceType
|
||||
) => {
|
||||
this.selectedRemissionResourceType = source;
|
||||
this.selectedResourceTypeSpecificModel =
|
||||
RESOURCE_TYPE_SPECIFIC_MODEL_OPTIONS[source];
|
||||
this.resourceTypeSwitch.isFirstSwitchedOn =
|
||||
source === RemissionResourceType.Central;
|
||||
this.remissionHelper.updateFilters({
|
||||
remissionProcessId: this.remissionProcess.id
|
||||
});
|
||||
};
|
||||
|
||||
loadCurrentRemissionTarget() {
|
||||
this.currentRemissionTarget$
|
||||
.pipe(
|
||||
filter(data => !isNullOrUndefined(data)),
|
||||
take(1)
|
||||
)
|
||||
.subscribe(this.currentRemissionTargetSubscriptionHandler);
|
||||
}
|
||||
|
||||
currentRemissionTargetSubscriptionHandler = (
|
||||
targetName: RemissionTargetType
|
||||
) => {
|
||||
const side = targetName === RemissionTargetType.BLANK ? 0 : 1;
|
||||
if (side !== this.selectedSupplier) {
|
||||
this.selectedSupplier = side;
|
||||
this.remissionHelper.updateFilters({
|
||||
target:
|
||||
side === Side.LEFT
|
||||
? this.suppliers.leftSupplier
|
||||
: this.suppliers.rightSupplier
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
remissionSubsribtionInitialisation() {
|
||||
this.loadCurrentRemissionProcessStatuses().then(
|
||||
remissionProcessStatuses => {
|
||||
@@ -263,7 +194,6 @@ export class RemissionListCreateComponent implements OnInit, OnDestroy {
|
||||
this.remissionProcess$
|
||||
.pipe(takeUntil(this.destroy$))
|
||||
.subscribe(remissionProcess => {
|
||||
this.remissionProcess = remissionProcess;
|
||||
this.store.dispatch(
|
||||
new SetRemissionProcess(remissionProcess, true)
|
||||
);
|
||||
@@ -280,7 +210,7 @@ export class RemissionListCreateComponent implements OnInit, OnDestroy {
|
||||
)
|
||||
.pipe(combineAll(), take(1), takeUntil(this.destroy$))
|
||||
.subscribe(([suppliers, process]: [any, any]) => {
|
||||
this.remissionSuppliersSubscriptionHandler(suppliers, process);
|
||||
this.remissionSuppliersSubscriptionHandler(process);
|
||||
});
|
||||
|
||||
this.loadUncompletedRemissions();
|
||||
@@ -291,7 +221,6 @@ export class RemissionListCreateComponent implements OnInit, OnDestroy {
|
||||
|
||||
remissionCreatedSuccesfullyHandler = (remissionProcess: RemissionProcess) => {
|
||||
if (remissionProcess) {
|
||||
this.remissionProcess = remissionProcess;
|
||||
this.store.dispatch(new SetRemissionCreated(true));
|
||||
this.store.dispatch(new SetRemissionProcess(remissionProcess));
|
||||
}
|
||||
@@ -370,48 +299,12 @@ export class RemissionListCreateComponent implements OnInit, OnDestroy {
|
||||
};
|
||||
|
||||
remissionSuppliersSubscriptionHandler = (
|
||||
remissionSuppliers: RemissionSupplier[],
|
||||
process
|
||||
) => {
|
||||
this.suppliers = {
|
||||
leftSupplier: remissionSuppliers[0],
|
||||
rightSupplier: remissionSuppliers[1]
|
||||
};
|
||||
this.remisionProcessSubscriptionHandler(process);
|
||||
};
|
||||
|
||||
remisionProcessSubscriptionHandler = (remissionProcess: RemissionProcess) => {
|
||||
this.remissionProcess = remissionProcess;
|
||||
this.processNeedsToBeRestoredFromCache.ifTrue(() => this.restoreProcess());
|
||||
this.selectedRemissionResourceType =
|
||||
remissionProcess.filter.source === 'zentral'
|
||||
? RemissionResourceType.Central
|
||||
: RemissionResourceType.Overflow;
|
||||
this.store.dispatch(
|
||||
new SetRemissionSource(this.selectedRemissionResourceType)
|
||||
);
|
||||
this.resourceTypeSwitch = {
|
||||
...this.resourceTypeSwitch,
|
||||
isFirstSwitchedOn:
|
||||
this.selectedRemissionResourceType === RemissionResourceType.Central
|
||||
};
|
||||
this.selectedResourceTypeSpecificModel =
|
||||
RESOURCE_TYPE_SPECIFIC_MODEL_OPTIONS[this.selectedRemissionResourceType];
|
||||
if (this.suppliers) {
|
||||
this.selectedSupplier =
|
||||
get(
|
||||
remissionProcess,
|
||||
'filter.target.name',
|
||||
this.suppliers.leftSupplier.name
|
||||
) === this.suppliers.leftSupplier.name
|
||||
? Side.LEFT
|
||||
: Side.RIGHT;
|
||||
}
|
||||
(
|
||||
this.selectedRemissionResourceType === RemissionResourceType.Overflow
|
||||
).ifTrue(() =>
|
||||
this.shouldShowOverflowInitialMessage(remissionProcess.filter)
|
||||
);
|
||||
this.store
|
||||
.dispatch(new SetRemissionProcess(remissionProcess))
|
||||
.toPromise()
|
||||
@@ -419,26 +312,6 @@ export class RemissionListCreateComponent implements OnInit, OnDestroy {
|
||||
this.store.dispatch(new ActivateRemissionReminder());
|
||||
});
|
||||
this.resetFilters = false;
|
||||
this.reinitializeFilters();
|
||||
};
|
||||
|
||||
shouldShowOverflowInitialMessage(remissionFilter: RemissionFilter) {
|
||||
setTimeout(() => {
|
||||
this.showOverflowInitialMessage = true;
|
||||
Object.keys(remissionFilter.filter).forEach(key => {
|
||||
const currentFilter = remissionFilter.filter[key];
|
||||
if (currentFilter.length > 0) {
|
||||
this.showOverflowInitialMessage = false;
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
restoreProcess = () => {
|
||||
this.processNeedsToBeRestoredFromCache = false;
|
||||
this.loadCurrentRemissionSource();
|
||||
this.loadCurrentRemissionTarget();
|
||||
this.remissionHelper.reApplyFilters(this.selectedRemissionResourceType);
|
||||
};
|
||||
|
||||
capacitiesBinder = (capacities: CapacityType[]) => {
|
||||
@@ -466,48 +339,19 @@ export class RemissionListCreateComponent implements OnInit, OnDestroy {
|
||||
});
|
||||
};
|
||||
|
||||
resourceTypeChange(model: DoubleChoiceSwitch) {
|
||||
this.listLoaded = false;
|
||||
this.remissionListHits = 0;
|
||||
this.resourceTypeSwitch = model;
|
||||
this.selectedRemissionResourceType = model.isFirstSwitchedOn
|
||||
? RemissionResourceType.Central
|
||||
: RemissionResourceType.Overflow;
|
||||
this.selectedResourceTypeSpecificModel =
|
||||
RESOURCE_TYPE_SPECIFIC_MODEL_OPTIONS[this.selectedRemissionResourceType];
|
||||
this.store.dispatch(
|
||||
new SetRemissionSource(this.selectedRemissionResourceType)
|
||||
);
|
||||
this.resetFilters = false;
|
||||
this.reinitializeFilters();
|
||||
this.loadCurrentRemissionTarget();
|
||||
}
|
||||
|
||||
supplierUpdated(side: Side) {
|
||||
this.selectedSupplier = side;
|
||||
this.store.dispatch(
|
||||
new SetRemissionTarget(
|
||||
side === Side.LEFT
|
||||
? this.suppliers.leftSupplier
|
||||
: this.suppliers.rightSupplier,
|
||||
this.selectedRemissionResourceType
|
||||
)
|
||||
);
|
||||
this.reinitializeFilters();
|
||||
}
|
||||
|
||||
startRemission() {
|
||||
this.remissionService
|
||||
.startRemission({ remissionProcessId: this.remissionProcess.id })
|
||||
.pipe(
|
||||
filter(data => !isNullOrUndefined(data)),
|
||||
take(1)
|
||||
)
|
||||
this.remissionProcess$.pipe(switchMap(remissionProcess =>
|
||||
this.remissionService
|
||||
.startRemission({ remissionProcessId: remissionProcess.id})
|
||||
.pipe(
|
||||
filter(data => !isNullOrUndefined(data)),
|
||||
take(1)
|
||||
)))
|
||||
.subscribe(remissionProcess => {
|
||||
this.store.dispatch(new SetRemissionStarted(true));
|
||||
this.store.dispatch(new SetRemissionProcess(remissionProcess));
|
||||
this.navigateToStartedRemission();
|
||||
});
|
||||
this.store.dispatch(new SetRemissionStarted(true));
|
||||
this.store.dispatch(new SetRemissionProcess(remissionProcess));
|
||||
this.navigateToStartedRemission();
|
||||
})
|
||||
}
|
||||
|
||||
openStartRemissionDialog() {
|
||||
@@ -588,12 +432,7 @@ export class RemissionListCreateComponent implements OnInit, OnDestroy {
|
||||
|
||||
addProductToRemissionList(remissionProduct: RemissionProduct) {
|
||||
this.searchedRemissionProduct = undefined;
|
||||
this.resourceTypeChange({
|
||||
...RESOURCE_TYPE_SWITCH,
|
||||
isFirstSwitchedOn: true
|
||||
});
|
||||
this.resetFilters = true;
|
||||
this.supplierUpdated(Side.LEFT);
|
||||
this.navigateRemissionCreateList();
|
||||
}
|
||||
|
||||
@@ -644,7 +483,6 @@ export class RemissionListCreateComponent implements OnInit, OnDestroy {
|
||||
}
|
||||
this.store.dispatch(new SetRemissionSearchedProduct(remissionProduct));
|
||||
this.searchedRemissionProduct = remissionProduct;
|
||||
this.resourceTypeChange(RESOURCE_TYPE_SWITCH);
|
||||
setTimeout(() => {
|
||||
this.addProductToRemissionDialog.openDialog();
|
||||
}, 40);
|
||||
@@ -654,20 +492,29 @@ export class RemissionListCreateComponent implements OnInit, OnDestroy {
|
||||
this.destroy$.next();
|
||||
}
|
||||
|
||||
private reinitializeFilters() {
|
||||
const resourceTarget =
|
||||
this.selectedSupplier === Side.LEFT
|
||||
? this.suppliers.leftSupplier
|
||||
: this.suppliers.rightSupplier;
|
||||
const filters = null;
|
||||
if (this.resetFilters) {
|
||||
this.remissionHelper.clearFilters();
|
||||
this.resetFilters = false;
|
||||
}
|
||||
this.remissionHelper.updateFilters({
|
||||
target: resourceTarget,
|
||||
source: this.selectedRemissionResourceType,
|
||||
...(filters && { filters })
|
||||
});
|
||||
private initShowOverflowMessage() {
|
||||
this.showOverflowInitialMessage$ = this.currentRemissionSource$.pipe(
|
||||
filter(source => source === 'ueberlauf'),
|
||||
map(a => a),
|
||||
withLatestFrom(this.remissionFilters$, this.currentRemissionTarget$),
|
||||
map(([source, filters, target]) => filters[source][target]),
|
||||
switchMap(_ => of(false)))
|
||||
}
|
||||
|
||||
private initRemissionListHits() {
|
||||
this.remissionListHits$ = this.remissionHelper.remissionListHits$.pipe(
|
||||
tap(s => console.log('initRemissionListHits', s)),
|
||||
filter(hits => !isNullOrUndefined(hits))
|
||||
)
|
||||
}
|
||||
|
||||
private initFiltersSync() {
|
||||
this.currentRemissionSource$.pipe(
|
||||
filter(data => !isNullOrUndefined(data)),
|
||||
withLatestFrom(this.currentRemissionProcess$.pipe(filter(process => !isNullOrUndefined(process)))),
|
||||
takeUntil(this.destroy$),
|
||||
).subscribe(([_, remissionProcess]) => this.remissionHelper.updateFilters({
|
||||
remissionProcessId: remissionProcess.id
|
||||
}))
|
||||
}
|
||||
}
|
||||
|
||||
@@ -72,6 +72,8 @@ import { RemissionListCardHeaderComponent } from './components/remission-list-ca
|
||||
import { RemissionScanConfirmationDialogComponent } from './components/remission-scan-confirmation-dialog';
|
||||
import { TabSelectionModule } from '@libs/ui/lib/tab-selection';
|
||||
import { RemissionTabsFilterComponent } from './components/remission-tab-filters';
|
||||
import { FilterLoaderModule } from '@libs/ui/lib/filter-loader';
|
||||
import { RemissionListActionsComponent } from './components/remission-list-actions';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
@@ -80,6 +82,7 @@ import { RemissionTabsFilterComponent } from './components/remission-tab-filters
|
||||
RemissionFilterItemComponent,
|
||||
RemissionSelectedFilterItemsComponent,
|
||||
RemissionListComponent,
|
||||
RemissionListActionsComponent,
|
||||
RemissionListCardComponent,
|
||||
RemissionListCardLoadingComponent,
|
||||
RemissionListStartedComponent,
|
||||
@@ -109,7 +112,7 @@ import { RemissionTabsFilterComponent } from './components/remission-tab-filters
|
||||
RemissionDetailsProductComponent,
|
||||
RemissionDetailsPrimaryCtaComponent,
|
||||
RemissionTabsFilterComponent,
|
||||
],
|
||||
],
|
||||
imports: [
|
||||
BarcodeSearchModule,
|
||||
CommonModule,
|
||||
@@ -131,7 +134,8 @@ import { RemissionTabsFilterComponent } from './components/remission-tab-filters
|
||||
InfiniteScrollModule,
|
||||
DeleteDropdownModule,
|
||||
SearchInputModule,
|
||||
TabSelectionModule
|
||||
TabSelectionModule,
|
||||
FilterLoaderModule
|
||||
]
|
||||
})
|
||||
export class RemissionClientModule {}
|
||||
|
||||
@@ -0,0 +1,6 @@
|
||||
<div class="content-container">
|
||||
<div class="first-row"></div>
|
||||
<div class="second-row"></div>
|
||||
<div class="third-row"></div>
|
||||
<div class="fourth-row"></div>
|
||||
</div>
|
||||
42
libs/ui/src/lib/filter-loader/filter-loader.component.scss
Normal file
42
libs/ui/src/lib/filter-loader/filter-loader.component.scss
Normal file
@@ -0,0 +1,42 @@
|
||||
.content-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
opacity: 1;
|
||||
margin-top: 20px;
|
||||
animation: load 0.75s linear infinite;
|
||||
|
||||
.first-row {
|
||||
height: 20px;
|
||||
width: 135px;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.second-row {
|
||||
height: 20px;
|
||||
width: 150px;
|
||||
background-color: #ffffff;
|
||||
margin-top: 2px;
|
||||
}
|
||||
.third-row {
|
||||
height: 20px;
|
||||
width: 90px;
|
||||
background-color: #ffffff;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.fourth-row {
|
||||
height: 20px;
|
||||
width: 200px;
|
||||
background-color: #ffffff;
|
||||
margin-top: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes load {
|
||||
50% {
|
||||
opacity: 0.3;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
12
libs/ui/src/lib/filter-loader/filter-loader.component.ts
Normal file
12
libs/ui/src/lib/filter-loader/filter-loader.component.ts
Normal file
@@ -0,0 +1,12 @@
|
||||
import { Component, ChangeDetectionStrategy } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-filter-loader',
|
||||
templateUrl: 'filter-loader.component.html',
|
||||
styleUrls: ['./filter-loader.component.scss'],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush
|
||||
})
|
||||
|
||||
export class FilterLoaderComponent {
|
||||
constructor() { }
|
||||
}
|
||||
11
libs/ui/src/lib/filter-loader/filter-loader.module.ts
Normal file
11
libs/ui/src/lib/filter-loader/filter-loader.module.ts
Normal file
@@ -0,0 +1,11 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FilterLoaderComponent } from './filter-loader.component';
|
||||
|
||||
|
||||
@NgModule({
|
||||
imports: [CommonModule],
|
||||
exports: [FilterLoaderComponent],
|
||||
declarations: [FilterLoaderComponent],
|
||||
})
|
||||
export class FilterLoaderModule { }
|
||||
5
libs/ui/src/lib/filter-loader/index.ts
Normal file
5
libs/ui/src/lib/filter-loader/index.ts
Normal file
@@ -0,0 +1,5 @@
|
||||
// start:ng42.barrel
|
||||
export * from './filter-loader.component';
|
||||
export * from './filter-loader.module';
|
||||
// end:ng42.barrel
|
||||
|
||||
Reference in New Issue
Block a user