sxhundred/ISA-Frontend
1
0
Fork 0
mirror of https://dev.azure.com/hugendubel/ISA/_git/ISA-Frontend synced 2025-12-31 09:37:15 +01:00
Code Issues Packages Projects Releases Wiki Activity

HIMA-841 add animations and progress bar

Browse Source
This commit is contained in:
Adrian Toczydlowski
2020-01-21 15:03:04 +01:00
parent 58528fdbaa
commit 2b5407c0df
10 changed files with 176 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
apps/sales/src/app/modules/remission/components/remission-list/remission-list.component.scss
View File

@@ -44,25 +44,3 @@
cdk-virtual-scroll-viewport {
-webkit-overflow-scrolling: auto !important;
}
.spinner {
background-image: url('/assets/images/Icon_Loading_Grey.svg');
background-size: 30px 30px;
width: 30px;
height: 30px;
scale: 0.6;
background-repeat: no-repeat;
margin: auto;
margin-top: 25px;
animation: spin 1s infinite linear;
}
@keyframes spin {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}

29
apps/sales/src/app/modules/remission/pages/remission-list-create/remission-list-create.component.html
View File

@@ -1,7 +1,11 @@
<div #remissionListContainer id="remission-list-container" class="remission-list-container">
<div class="headers" *ngIf="resourceTypeSwitch">
<div class="header-item resource-type">
<lib-double-choice-switch [model]="resourceTypeSwitch" (change)="resourceTypeChange($event)"></lib-double-choice-switch>
<lib-double-choice-switch
[animations]="true"
[model]="resourceTypeSwitch"
(change)="resourceTypeChange($event)"
></lib-double-choice-switch>
</div>
<div class="header-item title">{{ selectedResourceTypeSpecificModel.headerTitle }}</div>
<div class="header-item sub-title">
@@ -9,15 +13,20 @@
selectedResourceTypeSpecificModel.headerSubTitle
}}</span>
</div>
<div class="progress-wrapper" *ngIf="selectedRemissionResourceType === 'ueberlauf'">
<ng-container *ngFor="let item of capacities">
<div>
<lib-progress-bar [progress]="item.percentage"></lib-progress-bar>
</div>
<div>
<span>{{ item.capacity.name }}: {{ item.capacity.utilized }} von {{ item.capacity.available }} {{ item.capacity.label }}</span>
</div>
</ng-container>
<div *ngIf="selectedRemissionResourceType === 'ueberlauf'">
<div class="progress-wrapper" *ngIf="capacities.length; else spinner">
<ng-container *ngFor="let item of capacities">
<div>
<lib-progress-bar [progress]="item.percentage"></lib-progress-bar>
</div>
<div>
<span>{{ item.capacity.name }}: {{ item.capacity.utilized }} von {{ item.capacity.available }} {{ item.capacity.label }}</span>
</div>
</ng-container>
</div>
<ng-template #spinner>
<div class="spinner"></div>
</ng-template>
</div>
<div class="supplier" *ngIf="suppliers">
<div>

22
apps/sales/src/app/modules/remission/pages/remission-list-create/remission-list-create.component.scss
View File

@@ -129,3 +129,25 @@
margin-top: 8px;
}
}
.spinner {
background-image: url('/assets/images/Icon_Loading_Grey.svg');
background-size: 30px 30px;
width: 30px;
height: 30px;
scale: 0.6;
background-repeat: no-repeat;
margin: auto;
margin-top: 25px;
animation: spin 1s infinite linear;
}
@keyframes spin {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}

13
apps/sales/src/app/modules/remission/pages/remission-list-create/remission-list-create.component.ts
View File

@@ -164,6 +164,7 @@ export class RemissionListCreateComponent implements OnInit, OnDestroy {
currentRemissionSourcesSubscriptionHandler = (source: RemissionResourceType) => {
this.selectedRemissionResourceType = source;
this.selectedResourceTypeSpecificModel = RESOURCE_TYPE_SPECIFIC_MODEL_OPTIONS[source];
console.log('source === RemissionResourceType.Central', source === RemissionResourceType.Central);
this.resourceTypeSwitch.isFirstSwitchedOn = source === RemissionResourceType.Central;
this.remissionHelper.updateFilters({ remissionProcessId: this.remissionProcess.id });
};
@@ -194,6 +195,12 @@ export class RemissionListCreateComponent implements OnInit, OnDestroy {
} else {
this.remissionProcessStatuses = remissionProcessStatuses;
this.remissionProcess$ = !this.remissionProcessStatuses.created ? this.createProcess() : this.continueProcess();
this.remissionProcess$
.pipe(takeUntil(this.destroy$))
.subscribe(remissionProcess =>
(!isNullOrUndefined(remissionProcess.capacities)).ifTrue(() => this.capacitiesBinder(remissionProcess.capacities))
);
of(this.remissionSuppliers$.pipe(filter(this.remissionSuppliersFilter)), this.remissionProcess$)
.pipe(combineAll(), take(1), takeUntil(this.destroy$))
.subscribe(([suppliers, process]: [any, any]) => {
@@ -263,12 +270,14 @@ export class RemissionListCreateComponent implements OnInit, OnDestroy {
remisionProcessSubscriptionHandler = (remissionProcess: RemissionProcess) => {
this.remissionProcess = remissionProcess;
this.cdrf.detectChanges();
(!isNullOrUndefined(remissionProcess.capacities)).ifTrue(() => this.capacitiesBinder(remissionProcess.capacities));
this.processNeedsToBeRestoredFromCache.ifTrue(() => this.restoreProcess());
this.selectedRemissionResourceType =
remissionProcess.filter.source === 'zentral' ? RemissionResourceType.Central : RemissionResourceType.Overflow;
this.store.dispatch(new SetRemissionSource(this.selectedRemissionResourceType));
this.resourceTypeSwitch.isFirstSwitchedOn = this.selectedRemissionResourceType === RemissionResourceType.Central;
this.resourceTypeSwitch = {
...this.resourceTypeSwitch,
isFirstSwitchedOn: this.selectedRemissionResourceType === RemissionResourceType.Central
};
this.selectedResourceTypeSpecificModel = RESOURCE_TYPE_SPECIFIC_MODEL_OPTIONS[this.selectedRemissionResourceType];
if (this.suppliers) {
setTimeout(() => {

25
apps/sales/src/app/modules/remission/pages/remission-list-started/remission-list-started.component.html
View File

@@ -25,7 +25,7 @@
<div id="top-marker"></div>
<div class="headers" *ngIf="resourceTypeSwitch">
<div class="header-item resource-type">
<lib-double-choice-switch [model]="resourceTypeSwitch" (change)="resourceTypeChange($event)"></lib-double-choice-switch>
<lib-double-choice-switch [animations]="true" [model]="resourceTypeSwitch" (change)="resourceTypeChange($event)"></lib-double-choice-switch>
</div>
<div class="header-item title">{{ selectedResourceTypeSpecificModel.headerTitle }}</div>
<div class="header-item sub-title">
@@ -33,15 +33,20 @@
selectedResourceTypeSpecificModel.headerSubTitle
}}</span>
</div>
<div class="progress-wrapper" *ngIf="selectedRemissionResourceType === 'ueberlauf'">
<ng-container *ngFor="let item of capacities">
<div>
<lib-progress-bar [progress]="item.percentage"></lib-progress-bar>
</div>
<div>
<span>{{ item.capacity.name }}: {{ item.capacity.utilized }} von {{ item.capacity.available }} {{ item.capacity.label }}</span>
</div>
</ng-container>
<div *ngIf="selectedRemissionResourceType === 'ueberlauf'">
<div class="progress-wrapper" *ngIf="capacities.length; else spinner">
<ng-container *ngFor="let item of capacities">
<div>
<lib-progress-bar [progress]="item.percentage"></lib-progress-bar>
</div>
<div>
<span>{{ item.capacity.name }}: {{ item.capacity.utilized }} von {{ item.capacity.available }} {{ item.capacity.label }}</span>
</div>
</ng-container>
</div>
<ng-template #spinner>
<div class="spinner"></div>
</ng-template>
</div>
<div class="supplier">
<span>{{ selectedSupplierName }}</span>

11
apps/sales/src/app/modules/remission/pages/remission-list-started/remission-list-started.component.ts
View File

@@ -192,6 +192,11 @@ export class RemissionListStartedComponent implements OnInit, OnDestroy {
this.loadCurrentRemissionProcessStatuses().then(remissionProcessStatuses => {
this.remissionProcessStatuses = remissionProcessStatuses;
this.remissionProcess$ = !this.remissionProcessStatuses.created ? this.createProcess() : this.continueProcess();
this.remissionProcess$
.pipe(takeUntil(this.destroy$))
.subscribe(remissionProcess =>
(!isNullOrUndefined(remissionProcess.capacities)).ifTrue(() => this.capacitiesBinder(remissionProcess.capacities))
);
of(this.remissionSuppliers$.pipe(filter(this.remissionSuppliersFilter)), this.remissionProcess$)
.pipe(combineAll(), take(1), takeUntil(this.destroy$))
.subscribe(([suppliers, process]: [any, any]) => {
@@ -262,12 +267,14 @@ export class RemissionListStartedComponent implements OnInit, OnDestroy {
this.remissionProcess = remissionProcess;
this.cdrf.detectChanges();
this.store.dispatch(new SetRemissionProcess(remissionProcess));
(!isNullOrUndefined(remissionProcess.capacities)).ifTrue(() => this.capacitiesBinder(remissionProcess.capacities));
this.processNeedsToBeRestoredFromCache.ifTrue(() => this.restoreProcess());
this.selectedRemissionResourceType =
remissionProcess.filter.source === 'zentral' ? RemissionResourceType.Central : RemissionResourceType.Overflow;
this.store.dispatch(new SetRemissionSource(this.selectedRemissionResourceType));
this.resourceTypeSwitch.isFirstSwitchedOn = this.selectedRemissionResourceType === RemissionResourceType.Central;
this.resourceTypeSwitch = {
...this.resourceTypeSwitch,
isFirstSwitchedOn: this.selectedRemissionResourceType === RemissionResourceType.Central
};
this.selectedResourceTypeSpecificModel = RESOURCE_TYPE_SPECIFIC_MODEL_OPTIONS[this.selectedRemissionResourceType];
(this.selectedRemissionResourceType === RemissionResourceType.Overflow).ifTrue(() =>
this.shouldShowOverflowInitialMessage(remissionProcess.filter)

44
apps/sales/src/styles.scss
View File

@@ -258,3 +258,47 @@ hr {
width: 737px;
}
}
.spinner {
background-image: url('/assets/images/Icon_Loading_Grey.svg');
background-size: 30px 30px;
width: 30px;
height: 30px;
scale: 0.6;
background-repeat: no-repeat;
margin: auto;
margin-top: 25px;
animation: spin 1s infinite linear;
}
@keyframes spin {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}
.spinner {
background-image: url('/assets/images/Icon_Loading_Grey.svg');
background-size: 30px 30px;
width: 30px;
height: 30px;
scale: 0.6;
background-repeat: no-repeat;
margin: auto;
margin-top: 25px;
animation: spin 1s infinite linear;
}
@keyframes spin {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}

11
libs/ui/src/lib/double-choice-switch/double-choice-switch.component.html
View File

@@ -7,10 +7,12 @@
}"
*ngIf="model"
>
<div *ngIf="animations" class="active" [@buttonState]="state"></div>
<div
class="first-wrapper"
[ngStyle]="{
'background-color': model.isFirstSwitchedOn ? model.firstChoiceColor.selectedBackground : model.firstChoiceColor.unSelectedbackground,
'background-color':
!animations && (model.isFirstSwitchedOn ? model.firstChoiceColor.selectedBackground : model.firstChoiceColor.unSelectedbackground),
color: model.isFirstSwitchedOn ? model.firstChoiceColor.selectedText : model.firstChoiceColor.unSelectedText
}"
[ngClass]="{ selected: model.isFirstSwitchedOn }"
@@ -18,12 +20,13 @@
>
<span>{{ model.firstChoice }}</span>
</div>
<div
class="second-wrapper"
[ngStyle]="{
'background-color': !model.isFirstSwitchedOn
? model.secondChoiceColor.selectedBackground
: model.secondChoiceColor.unSelectedbackground,
'background-color':
!animations &&
(!model.isFirstSwitchedOn ? model.secondChoiceColor.selectedBackground : model.secondChoiceColor.unSelectedbackground),
color: !model.isFirstSwitchedOn ? model.secondChoiceColor.selectedText : model.secondChoiceColor.unSelectedText
}"
[ngClass]="{ selected: !model.isFirstSwitchedOn }"

12
libs/ui/src/lib/double-choice-switch/double-choice-switch.component.scss
View File

@@ -2,22 +2,34 @@
display: flex;
flex-direction: row;
width: fit-content;
position: relative;
font-family: 'Open Sans';
font-size: 16px;
font-weight: bold;
border-radius: 30px;
.active {
position: absolute;
padding: 7px 20px 7px 20px;
border-radius: 30px;
height: 22px;
background-color: rgb(89, 100, 112);
cursor: default;
}
.first-wrapper {
padding: 7px 20px 7px 20px;
cursor: pointer;
border-radius: 30px;
z-index: 2;
}
.second-wrapper {
padding: 7px 20px 7px 20px;
cursor: pointer;
border-radius: 30px;
z-index: 2;
}
.selected {

38
libs/ui/src/lib/double-choice-switch/double-choice-switch.component.ts
View File

@@ -1,14 +1,47 @@
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { DoubleChoiceSwitch } from './model/double-choice-switch.model';
import { state, trigger, transition, animate, style } from '@angular/animations';
@Component({
selector: 'lib-double-choice-switch',
templateUrl: './double-choice-switch.component.html',
styleUrls: ['./double-choice-switch.component.scss'],
animations: [
trigger('buttonState', [
state(
'inactive',
style({
width: '160px',
left: 0
})
),
state(
'active',
style({
width: '71px',
left: '198px'
})
),
transition('inactive => active', animate('150ms')),
transition('active => inactive', animate('150ms'))
])
]
})
export class DoubleChoiceSwitchComponent implements OnInit {
@Input() model: DoubleChoiceSwitch;
@Input()
get model(): DoubleChoiceSwitch {
return this._model;
}
set model(value: DoubleChoiceSwitch) {
this._model = value;
if (value) {
this.state = this.model.isFirstSwitchedOn ? 'inactive' : 'active';
}
}
@Input() animations = false;
@Output() change = new EventEmitter<DoubleChoiceSwitch>();
state = 'inactive';
private _model: DoubleChoiceSwitch;
constructor() {}
ngOnInit() {}
@@ -28,11 +61,14 @@ export class DoubleChoiceSwitchComponent implements OnInit {
}
private viewChange(item: string) {
console.log('viewChange', item);
switch (item) {
case 'first':
this.state = 'inactive';
this.model.isFirstSwitchedOn = true;
break;
case 'second':
this.state = 'active';
this.model.isFirstSwitchedOn = false;
break;
}