mirror of
https://dev.azure.com/hugendubel/ISA/_git/ISA-Frontend
synced 2025-12-31 09:37:15 +01:00
Merged in bugfix/sprint-16-alex (pull request #1255)
Bugfix/sprint 16 alex
This commit is contained in:
@@ -1,25 +1,45 @@
|
||||
<div class="remission-filter-item" #filterItem>
|
||||
<div class="filter" (click)="toggle()">
|
||||
<div id="filter" class="filter-title" [ngClass]="{ expanded: expanded }">
|
||||
<div class="remission-filter-item"
|
||||
#filterItem>
|
||||
<div class="filter"
|
||||
(click)="toggle()">
|
||||
<div id="filter"
|
||||
class="filter-title"
|
||||
[ngClass]="{ expanded: expanded }">
|
||||
<span>{{ filter.name }}</span>
|
||||
<lib-icon class="icon" [rotateBackwards]="expanded" transition="all 0.2s linear" width="17px" name="Arrow_Down_2_branch"></lib-icon>
|
||||
<lib-icon class="icon"
|
||||
[rotateBackwards]="expanded"
|
||||
transition="all 0.2s linear"
|
||||
width="17px"
|
||||
name="Arrow_Down_2_branch"></lib-icon>
|
||||
</div>
|
||||
</div>
|
||||
<ng-container *ngIf="expanded">
|
||||
<div id="options" class="options" [@fadeIn]="expanded" #filterList>
|
||||
<div id="options"
|
||||
class="options"
|
||||
[@fadeIn]="expanded"
|
||||
#filterList>
|
||||
<div class="options__container">
|
||||
<ng-container *ngFor="let option of filter.options">
|
||||
<div class="option" [ngClass]="{ selected: isFirstLevelItemSelected(option) }">
|
||||
<span class="check-icon" (click)="toggleFirstLevelItem(option)">
|
||||
<div class="option"
|
||||
[ngClass]="{ selected: isFirstLevelItemSelected(option) }">
|
||||
<span class="check-icon"
|
||||
(click)="toggleFirstLevelItem(option)">
|
||||
<div class="check-box-wrapper">
|
||||
<lib-icon class="check-box" height="22px" name="Check_box_b"></lib-icon>
|
||||
<lib-icon class="check-box"
|
||||
height="22px"
|
||||
name="Check_box_b"></lib-icon>
|
||||
</div>
|
||||
<div class="check-mark-wrapper">
|
||||
<lib-icon class="check-mark" name="Check_f_b" *ngIf="isFirstLevelItemSelected(option)"></lib-icon>
|
||||
<lib-icon class="check-mark"
|
||||
name="Check_f_b"
|
||||
*ngIf="isFirstLevelItemSelected(option)"></lib-icon>
|
||||
</div>
|
||||
</span>
|
||||
<div class="option-name" (click)="toggleFirstLevelItem(option)">{{ option.name }}</div>
|
||||
<span *ngIf="hasGrouping && !hideSubFilters" class="grouping-arrow" (click)="toggleExpandedGrouping(option)">
|
||||
<div class="option-name"
|
||||
(click)="toggleFirstLevelItem(option)">{{ option.name }}</div>
|
||||
<span *ngIf="hasGrouping && !hideSubFilters"
|
||||
class="grouping-arrow"
|
||||
(click)="toggleExpandedGrouping(option)">
|
||||
<lib-icon
|
||||
[rotateBackwards]="isGroupExpanded(option)"
|
||||
transition="all 0.2s linear"
|
||||
@@ -29,16 +49,23 @@
|
||||
</span>
|
||||
</div>
|
||||
<ng-container *ngIf="hasGrouping && option.options && isGroupExpanded(option)">
|
||||
<div class="sub-items-wrapper" @growShrink>
|
||||
<hr class="branch" />
|
||||
<div class="sub-items-wrapper"
|
||||
@growShrink>
|
||||
<hr class="branch"/>
|
||||
<ng-container *ngFor="let subOption of option.options">
|
||||
<div class="option" [ngClass]="{ selected: isOptionsSelected(subOption) }" (click)="toggleOption(subOption, true, option)">
|
||||
<div class="option"
|
||||
[ngClass]="{ selected: isOptionsSelected(subOption) }"
|
||||
(click)="toggleOption(subOption, true, option)">
|
||||
<span class="check-icon">
|
||||
<div class="check-box-wrapper">
|
||||
<lib-icon class="check-box" height="22px" name="Check_box_b"></lib-icon>
|
||||
<lib-icon class="check-box"
|
||||
height="22px"
|
||||
name="Check_box_b"></lib-icon>
|
||||
</div>
|
||||
<div class="check-mark-wrapper">
|
||||
<lib-icon class="check-mark" name="Check_f_b" *ngIf="isOptionsSelected(subOption)"></lib-icon>
|
||||
<lib-icon class="check-mark"
|
||||
name="Check_f_b"
|
||||
*ngIf="isOptionsSelected(subOption)"></lib-icon>
|
||||
</div>
|
||||
</span>
|
||||
<div class="option-name">{{ subOption.name }}</div>
|
||||
@@ -46,11 +73,14 @@
|
||||
</ng-container>
|
||||
</div>
|
||||
</ng-container>
|
||||
<hr class="branch" />
|
||||
<hr class="branch"/>
|
||||
</ng-container>
|
||||
</div>
|
||||
<div class="action">
|
||||
<app-button primary="true" [disabled]="updateInactive" (action)="updateFilters()">Filtern</app-button>
|
||||
<app-button primary="true"
|
||||
[disabled]="updateInactive"
|
||||
(action)="updateFilters()">Filtern
|
||||
</app-button>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
@@ -42,6 +42,7 @@ $tablet-height: 283px;
|
||||
flex-direction: column;
|
||||
|
||||
&__container {
|
||||
position: relative;
|
||||
flex-grow: 1;
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
<div class="filters-wrapper">
|
||||
<ng-container *ngIf="loadItems">
|
||||
<div class="filter-group">
|
||||
<div class="filter" *ngFor="let filter of filters">
|
||||
<div class="filter" *ngFor="let filter of filters; let i = index">
|
||||
<app-remission-filter-item
|
||||
[remissionResourceType]="remissionResourceType"
|
||||
(closeOtherFilters)="closeOtherFilters($event)"
|
||||
[filter]="filter"
|
||||
(toggleChange)="toggleChange.emit($event)"
|
||||
(toggleChange)="toggleChangeEmit($event, i)"
|
||||
#filterItem
|
||||
></app-remission-filter-item>
|
||||
</div>
|
||||
|
||||
@@ -42,6 +42,8 @@ export class RemissionFiltersComponent implements OnInit, OnDestroy {
|
||||
destroy$ = new Subject();
|
||||
loadItems = true;
|
||||
private _remissionResourceType: RemissionResourceType;
|
||||
private _filtersEpanded: boolean[] = [];
|
||||
|
||||
constructor(private cdr: ChangeDetectorRef, private remissionService: RemissionService) {}
|
||||
|
||||
ngOnInit() {
|
||||
@@ -74,4 +76,10 @@ export class RemissionFiltersComponent implements OnInit, OnDestroy {
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
toggleChangeEmit(value: boolean, index: number) {
|
||||
this._filtersEpanded[index] = value;
|
||||
const emit = !!this._filtersEpanded.find(v => v);
|
||||
this.toggleChange.emit(!!emit);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,8 +2,9 @@
|
||||
#remissionListContainer
|
||||
id="remission-list-container"
|
||||
class="remission-list-container"
|
||||
(scroll)="onScroll()"
|
||||
>
|
||||
[perfectScrollbar]="{minScrollbarLength: 20}"
|
||||
[disabled]="filtersExpanded"
|
||||
(scroll)="onScroll()">
|
||||
<div class="headers" *ngIf="resourceTypeSwitch">
|
||||
<div class="header-item resource-type">
|
||||
<lib-double-choice-switch
|
||||
@@ -71,6 +72,7 @@
|
||||
*ngIf="remissionProcess"
|
||||
[remissionProcessId]="remissionProcess.id"
|
||||
[remissionResourceType]="selectedRemissionResourceType"
|
||||
(toggleChange)="filtersExpanded = $event"
|
||||
></app-remission-filters>
|
||||
</div>
|
||||
<div
|
||||
|
||||
@@ -122,8 +122,9 @@ export class RemissionListCreateComponent implements OnInit, OnDestroy {
|
||||
isNative = false;
|
||||
searchedRemissionProduct: RemissionProduct;
|
||||
showOverflowInitialMessage = true;
|
||||
lastScrollTop = 0;
|
||||
filtersExpanded = false;
|
||||
private resetFilters = false;
|
||||
|
||||
constructor(
|
||||
private remissionService: RemissionService,
|
||||
private store: Store,
|
||||
|
||||
@@ -25,9 +25,10 @@
|
||||
id="remission-list-container"
|
||||
#remissionListContainer
|
||||
class="remission-list-container"
|
||||
[perfectScrollbar]="{minScrollbarLength: 20}"
|
||||
[disabled]="filtersExpanded"
|
||||
(scroll)="scrollHandler($event)"
|
||||
*ngIf="!shippingDocumentCreationPage && loaded"
|
||||
>
|
||||
*ngIf="!shippingDocumentCreationPage && loaded">
|
||||
<div id="top-marker"></div>
|
||||
<div class="headers" *ngIf="resourceTypeSwitch">
|
||||
<div class="header-item resource-type">
|
||||
@@ -87,6 +88,7 @@
|
||||
*ngIf="remissionProcess"
|
||||
[remissionProcessId]="remissionProcess.id"
|
||||
[remissionResourceType]="selectedRemissionResourceType"
|
||||
(toggleChange)="filtersExpanded = $event"
|
||||
></app-remission-filters>
|
||||
</div>
|
||||
<div
|
||||
|
||||
@@ -106,7 +106,6 @@ export class RemissionListStartedComponent implements OnInit, OnDestroy {
|
||||
rightSupplier: RemissionSupplier;
|
||||
};
|
||||
remissionProcess: RemissionProcess;
|
||||
searchedRemissionProcess: RemissionProcess;
|
||||
resourceTypeSwitch = RESOURCE_TYPE_SWITCH;
|
||||
remissionProcessStatuses: RemissionProcessStatuses;
|
||||
processNeedsToBeRestoredFromCache = false;
|
||||
@@ -128,6 +127,7 @@ export class RemissionListStartedComponent implements OnInit, OnDestroy {
|
||||
fetchLastProducts$ = new Subject<void>();
|
||||
// Feature Flag: Indicates whether to load entire remission list on navigate to bottom
|
||||
loadAllProductsOnNavigateToBottom = false;
|
||||
filtersExpanded = false;
|
||||
|
||||
constructor(
|
||||
private remissionService: RemissionService,
|
||||
|
||||
@@ -67,6 +67,7 @@ import { RemissionsOverviewCardContentComponent } from './components/remissions-
|
||||
import { RemissionDetailsComponent } from './pages/remission-details/remission-details.component';
|
||||
import { RemissionDetailsProductComponent } from './components/remission-details-product/remission-details-product.component';
|
||||
import { RemissionDetailsPrimaryCtaComponent } from './components/remission-details-primary-cta/remission-details-primary-cta.component';
|
||||
import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
@@ -109,6 +110,7 @@ import { RemissionDetailsPrimaryCtaComponent } from './components/remission-deta
|
||||
RemissionClientRoutingModule,
|
||||
DoubleChoiceSwitchModule,
|
||||
ProgressBarModule,
|
||||
PerfectScrollbarModule,
|
||||
SmallDoubleChoiceSwitchModule,
|
||||
IconModule,
|
||||
ButtonModule,
|
||||
|
||||
Reference in New Issue
Block a user