mirror of
https://dev.azure.com/hugendubel/ISA/_git/ISA-Frontend
synced 2025-12-28 22:42:11 +01:00
[HIMA-947] finished implementing add product to remission list
This commit is contained in:
@@ -22,7 +22,7 @@ import { ReloadGoodsIn } from '../actions/goods-in.actions';
|
||||
import { ReloadBranchProcess } from '../actions/branch-process.actions';
|
||||
import { ReloadRemission } from '../actions/remission.actions';
|
||||
|
||||
export const SYNC_DATA_VERSION = 109;
|
||||
export const SYNC_DATA_VERSION = 110;
|
||||
|
||||
export class AppStateModel {
|
||||
currentProcesssId: number;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<app-modal id="remission-add-product-to-remission-modal">
|
||||
<app-modal id="remission-add-product-to-remission-modal" branch="true">
|
||||
<div class="modal-wrapper">
|
||||
<div class="header">
|
||||
<lib-icon (click)="closeDialog()" height="21px" class="close-icon" name="close-branch" alt="close"></lib-icon>
|
||||
@@ -18,9 +18,31 @@
|
||||
</div>
|
||||
<div class="group-quantity">
|
||||
<div class="group">
|
||||
<span>{{ product.productGroupName }}</span>
|
||||
<div class="number">
|
||||
<span>{{ product.productGroup }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>:</span>
|
||||
</div>
|
||||
<div class="name">
|
||||
<span>{{ product.productGroupName }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="quantity">
|
||||
<app-dropdown
|
||||
boldSelected="true"
|
||||
(valueChanges)="quantityUpdated($event)"
|
||||
[options]="quantityRange"
|
||||
[selected]="quantity"
|
||||
[showClosingArrow]="true"
|
||||
[leftAligned]="true"
|
||||
mode="branch"
|
||||
boldSelected="true"
|
||||
boldDdSelectedValue="true"
|
||||
fitContent="true"
|
||||
scrollable="true"
|
||||
></app-dropdown>
|
||||
</div>
|
||||
<div class="quantity"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -49,8 +71,8 @@
|
||||
<lib-icon (click)="closeTooltip()" height="11px" name="Delete-white"></lib-icon>
|
||||
</div>
|
||||
<div class="feature-tooltip-arrow-down" [style.marginLeft.px]="tooltipArrowMl" *ngIf="toolTipOpened"></div>
|
||||
<div class="features">
|
||||
<span *ngFor="let feature of product.features; let index = index" (click)="openTooltip(feature.name, index)">{{
|
||||
<div class="features item" *ngIf="isArray(product.features)">
|
||||
<span *ngFor="let feature of product.features; let index = index" (click)="openTooltip(feature.value, index)">{{
|
||||
feature.key
|
||||
}}</span>
|
||||
</div>
|
||||
@@ -62,14 +84,26 @@
|
||||
(valueChanges)="reasonUpdated($event)"
|
||||
[options]="reasons"
|
||||
[selected]="reason"
|
||||
[showClosingArrow]="true"
|
||||
[leftAligned]="true"
|
||||
mode="branch"
|
||||
boldSelected="true"
|
||||
boldDdSelectedValue="true"
|
||||
></app-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data" *ngIf="reasonError">
|
||||
<div class="reason-error">
|
||||
{{ reasonErrorMsg }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="spacer branch" />
|
||||
<div class="actions">
|
||||
<app-button primary="true" (action)="addProdcutToList()">Hinzufügen</app-button>
|
||||
</div>
|
||||
</div>
|
||||
</app-modal>
|
||||
|
||||
@@ -1,10 +1,11 @@
|
||||
@import '../../../../../assets/scss/variables';
|
||||
|
||||
.modal-wrapper {
|
||||
font-family: 'Open Sans';
|
||||
line-height: 21px;
|
||||
margin: 16px 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 383px;
|
||||
|
||||
.header {
|
||||
.close-icon {
|
||||
@@ -70,12 +71,22 @@
|
||||
flex-direction: row;
|
||||
|
||||
.group {
|
||||
span {
|
||||
font-family: 'Open Sans';
|
||||
font-size: 16px;
|
||||
color: #596470;
|
||||
font-size: 16px;
|
||||
color: #596470;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
.name {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
.quantity {
|
||||
padding-left: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -141,6 +152,17 @@
|
||||
border-top: 10px solid #5a728a;
|
||||
margin-top: -15px;
|
||||
}
|
||||
|
||||
.reason-error {
|
||||
font-family: 'Open Sans';
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
color: $hima-error-msg-color;
|
||||
}
|
||||
|
||||
.dd-width {
|
||||
width: fit-content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -155,4 +177,13 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
margin-top: 28px;
|
||||
margin-right: 20px;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,6 +3,8 @@ import { RemissionProduct, RemissionService } from '@isa/remission';
|
||||
import { ModalService } from '@libs/ui';
|
||||
import { filter, take } from 'rxjs/operators';
|
||||
import { isNullOrUndefined } from 'util';
|
||||
import { NO_RESMISSION_REASON_SELECTED } from '../../constants/remission.constants';
|
||||
import { RemissionHelperService } from '../../services/remission-helper.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-add-product-to-remission-dialog',
|
||||
@@ -20,7 +22,15 @@ export class AddProductToRemissionDialogComponent implements OnInit, OnDestroy {
|
||||
tooltipArrowMl = 5;
|
||||
reasons: string[];
|
||||
reason: string;
|
||||
constructor(private modalService: ModalService, private remissionService: RemissionService) {}
|
||||
quantityRange = new Array(100).fill(0).map((_, index) => index + 1);
|
||||
quantity = 1;
|
||||
reasonError = false;
|
||||
reasonErrorMsg = 'Wählen Sie einen Remi-Grund aus';
|
||||
constructor(
|
||||
private modalService: ModalService,
|
||||
private remissionService: RemissionService,
|
||||
private remissionHelper: RemissionHelperService
|
||||
) {}
|
||||
|
||||
ngOnInit() {
|
||||
console.log(this.product);
|
||||
@@ -38,7 +48,7 @@ export class AddProductToRemissionDialogComponent implements OnInit, OnDestroy {
|
||||
)
|
||||
.subscribe(reasons => {
|
||||
this.reasons = reasons;
|
||||
this.reason = reasons[0];
|
||||
this.reason = NO_RESMISSION_REASON_SELECTED;
|
||||
});
|
||||
}
|
||||
|
||||
@@ -73,4 +83,34 @@ export class AddProductToRemissionDialogComponent implements OnInit, OnDestroy {
|
||||
closeTooltip() {
|
||||
this.toolTipOpened = false;
|
||||
}
|
||||
|
||||
quantityUpdated(quantity: number) {
|
||||
this.quantity = quantity;
|
||||
}
|
||||
|
||||
reasonUpdated(reason: string) {
|
||||
this.reason = reason;
|
||||
this.reasonError = false;
|
||||
}
|
||||
|
||||
isArray(obj) {
|
||||
return Array.isArray(obj);
|
||||
}
|
||||
|
||||
addProdcutToList() {
|
||||
if (this.reason === NO_RESMISSION_REASON_SELECTED) {
|
||||
this.reasonError = true;
|
||||
return;
|
||||
}
|
||||
|
||||
this.remissionService
|
||||
.addProductToRemit({ product: this.product, remissionReason: this.reason, remissionQuantity: this.quantity })
|
||||
.pipe(take(1))
|
||||
.subscribe(response => {
|
||||
console.log('add product to remit response:', response);
|
||||
this.reasonError = false;
|
||||
this.remissionHelper.addRemissionListItem(response);
|
||||
this.closeDialog();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@@ -30,3 +30,5 @@ export const RESOURCE_TYPE_SWITCH = <DoubleChoiceSwitch>{
|
||||
};
|
||||
|
||||
export const SUPPLIER_PLACEHOLDER = '${supplier}';
|
||||
|
||||
export const NO_RESMISSION_REASON_SELECTED = 'Auswählen';
|
||||
|
||||
@@ -42,7 +42,7 @@
|
||||
</div>
|
||||
<div class="actions" *ngIf="listLoaded && remissionListHits > 0">
|
||||
<div class="start-remission">
|
||||
<app-button [primary]="true" (action)="openStartRemissionDialog()">Remission starten</app-button>
|
||||
<app-button [primary]="true" [disabled]="!isIPad" (action)="openStartRemissionDialog()">Remission starten</app-button>
|
||||
</div>
|
||||
<div class="add-article">
|
||||
<app-button *ngIf="!isIPad" (action)="openAddProductToRemission()">Artikel hinzufügen</app-button>
|
||||
|
||||
@@ -111,9 +111,13 @@ export class RemissionListStartedComponent implements OnInit, OnDestroy {
|
||||
.subscribe(hits => {
|
||||
if (hits === 0) {
|
||||
this.listLoaded = false;
|
||||
this.toTopToBottomActions.showTopAction(false);
|
||||
if (this.toTopToBottomActions) {
|
||||
this.toTopToBottomActions.showTopAction(false);
|
||||
}
|
||||
} else {
|
||||
this.toTopToBottomActions.showTopAction(true);
|
||||
if (this.toTopToBottomActions) {
|
||||
this.toTopToBottomActions.showTopAction(true);
|
||||
}
|
||||
this.listLoaded = true;
|
||||
}
|
||||
this.remissionListHits = hits;
|
||||
|
||||
@@ -35,10 +35,16 @@
|
||||
[style.top]="top + 'px'"
|
||||
#container
|
||||
>
|
||||
<ul *ngIf="!isKeyValue" [ngClass]="{ scrollable: scrollable === true }">
|
||||
<ul *ngIf="!isKeyValue" [ngClass]="{ scrollable: scrollable, 'fit-content': fitContent }">
|
||||
<li
|
||||
*ngFor="let item of options; let first = first; let last = last"
|
||||
[ngClass]="{ selected: item === selected, branch: mode === 'branch', first: first, last: last }"
|
||||
[ngClass]="{
|
||||
selected: item === selected,
|
||||
branch: mode === 'branch',
|
||||
first: first,
|
||||
last: last,
|
||||
'selected-bold': boldDdSelectedValue
|
||||
}"
|
||||
(click)="onChange(item, $event)"
|
||||
>
|
||||
{{ item }}
|
||||
@@ -48,10 +54,16 @@
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
<ul *ngIf="isKeyValue" [ngClass]="{ scrollable: scrollable === true }">
|
||||
<ul *ngIf="isKeyValue" [ngClass]="{ scrollable: scrollable, 'fit-content': fitContent }">
|
||||
<li
|
||||
*ngFor="let item of options; let first = first; let last = last"
|
||||
[ngClass]="{ selected: item.value === selected, branch: mode === 'branch', first: first, last: last }"
|
||||
[ngClass]="{
|
||||
selected: item.value === selected,
|
||||
branch: mode === 'branch',
|
||||
first: first,
|
||||
last: last,
|
||||
'selected-bold': boldDdSelectedValue
|
||||
}"
|
||||
(click)="onChange(item, $event)"
|
||||
>
|
||||
{{ item.value }}
|
||||
|
||||
@@ -97,6 +97,10 @@
|
||||
min-width: 160px;
|
||||
display: inline-block;
|
||||
|
||||
&.fit-content {
|
||||
min-width: fit-content;
|
||||
}
|
||||
|
||||
li {
|
||||
&.first {
|
||||
border-top-left-radius: 5px;
|
||||
@@ -121,6 +125,10 @@
|
||||
&.selected {
|
||||
background-color: #dce2e9;
|
||||
|
||||
&.selected-bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&.branch {
|
||||
background-color: #cfd4d8;
|
||||
}
|
||||
@@ -149,6 +157,10 @@
|
||||
min-width: 70px;
|
||||
display: inline-block;
|
||||
|
||||
&.fit-content {
|
||||
min-width: fit-content;
|
||||
}
|
||||
|
||||
li {
|
||||
padding: 7px 15px;
|
||||
font-weight: 300;
|
||||
|
||||
@@ -34,7 +34,9 @@ export class DropdownComponent {
|
||||
@Input() showClosingArrow = false;
|
||||
@Input() optionsUnder = false;
|
||||
@Input() boldSelected = false;
|
||||
@Input() boldDdSelectedValue = false;
|
||||
@Input() mode = 'customer';
|
||||
@Input() fitContent = false;
|
||||
@Output() valueChanges: EventEmitter<any> = new EventEmitter();
|
||||
isOpen = false;
|
||||
absolute = false;
|
||||
|
||||
6
package-lock.json
generated
6
package-lock.json
generated
@@ -1095,9 +1095,9 @@
|
||||
}
|
||||
},
|
||||
"@isa/remission": {
|
||||
"version": "0.1.14",
|
||||
"resolved": "https://pkgs.dev.azure.com/hugendubel/_packaging/hugendubel/npm/registry/@isa/remission/-/remission-0.1.14.tgz",
|
||||
"integrity": "sha1-WcIikUxBtaaqZ5LYPVLnanARBYw=",
|
||||
"version": "0.1.15",
|
||||
"resolved": "https://pkgs.dev.azure.com/hugendubel/_packaging/hugendubel/npm/registry/@isa/remission/-/remission-0.1.15.tgz",
|
||||
"integrity": "sha1-/uhceVTx4ShgkyQWtQBxO26BhNg=",
|
||||
"requires": {
|
||||
"tslib": "^1.9.0"
|
||||
}
|
||||
|
||||
@@ -38,7 +38,7 @@
|
||||
"@isa/catsearch-api": "^0.0.25",
|
||||
"@isa/print-api": "^0.0.25",
|
||||
"@isa/remi-api": "^0.0.25",
|
||||
"@isa/remission": "^0.1.14",
|
||||
"@isa/remission": "^0.1.15",
|
||||
"@ngxs/store": "^3.4.1",
|
||||
"@types/faker": "^4.1.5",
|
||||
"@zxing/ngx-scanner": "^1.3.0",
|
||||
|
||||
Reference in New Issue
Block a user