arbetsformedlingen/mina-sidor-fa-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(avrop): Implemented custom filters for avrop. (TV-344)

Browse Source 
Squashed commit of the following:

commit 4afa2445d552cb82ccc40a0e3ad706173ebc541f
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Thu Sep 16 16:55:46 2021 +0200

    Fixade bugg som gjorde att inte selekteringar nollställdes ifall man stängde utan att spara

commit ddda68558f3ba253e67a66b773f99ba781a3b46d
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Thu Sep 16 14:18:48 2021 +0200

    Fixed issue with unavailable options

commit 58bc4aa4f34ff7e2b13e8ea85182c31735df08a0
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Thu Sep 16 12:56:55 2021 +0200

    Added margin to unavailable selected items

commit 93e1b61bbbe1ec7a6e785ed468ba8648668f30c8
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Thu Sep 16 12:53:52 2021 +0200

    Fixed issue where selected filters are not selected

commit 582a89be65adb17811c6e14cedad327b6960b20c
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Thu Sep 16 11:54:17 2021 +0200

    refactor

commit ddc300d942b069d7440c0f24da8bcb917df65df7
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Thu Sep 16 11:52:58 2021 +0200

    replace ng-uuid package with util function

commit 976a78aa22a5abe587e0f33e4255f44521b5f5f6
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Thu Sep 16 11:47:53 2021 +0200

    fix propagate

commit dabe345243e0e5454ff9ef5af0ccff84b1fc4a09
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Thu Sep 16 11:22:58 2021 +0200

    .

commit e42c6e5588cd3cabd2cec3c10f363b193536ad7e
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Thu Sep 16 09:17:43 2021 +0200

    Implemented ControlValueAccessor

commit 045492202866de21dd0ed34803ab2f3bfc3bb8e3
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Tue Sep 14 13:26:24 2021 +0200

    refactor

commit 574a3bc505b455bdb100a2e064ad235176545536
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Tue Sep 14 13:21:53 2021 +0200

    refactor

commit 6ff07030584bb4d904a370f08817e246705af035
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Tue Sep 14 13:17:06 2021 +0200

    refactoring

commit 365fc080a49dc487423048ed0dea3744be8dd0c5
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Tue Sep 14 12:10:12 2021 +0200

    styling och tillgänglighet

commit f7e7f3ffa78c5328029513784114083a2a06cd9d
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Tue Sep 14 10:54:14 2021 +0200

    refactor multiselect

commit 91d0e832f6f79991b8577f5aaabd657a5f8bbba2
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Mon Sep 13 16:57:25 2021 +0200

    replace temporary filter with new module

commit 90829e451eebf98a63a5934066563028b80fbadb
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Mon Sep 13 16:33:14 2021 +0200

    Add styling from tree-node-selector

commit df84e3e75105ffe0c6459606c58684fab1411561
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Mon Sep 13 15:58:37 2021 +0200

    feature(General): Added a generic dropdown component (TV-344)

commit 9022427d59290dfd2b08c4a076d6b0690d44d926
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Mon Sep 13 13:25:05 2021 +0200

    Update mock-apis
This commit is contained in:
Erik Tiekstra
2021-09-17 15:28:44 +02:00
parent ed2e19a47d
commit 1feed30f6f
39 changed files with 818 additions and 182 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
apps/mina-sidor-fa/src/app/pages/administration/pages/employee-form/edit-employee-form/edit-employee-form.component.ts
View File

@@ -23,10 +23,10 @@ import { UtforandeVerksamhet } from '@msfa-models/utforande-verksamhet.model';
import { UtforandeVerksamheterService } from '@msfa-services/utforande-verksamheter/utforande-verksamheter.service';
import { ValidationErrorLink } from '@msfa-shared/components/error-list/error-list.component';
import { TreeNodesSelectorService } from '@msfa-shared/components/tree-nodes-selector/services/tree-nodes-selector.service';
import { uuid } from '@msfa-utils/uuid';
import { EmailValidator } from '@msfa-utils/validators/email.validator';
import { EmployeeValidator } from '@msfa-utils/validators/employee.validator';
import { RequiredValidator } from '@msfa-utils/validators/required.validator';
import { UUID } from 'angular2-uuid';
import { EmployeeFormService } from '../services/employee-form.service';
@Component({
@@ -58,7 +58,7 @@ export class EditEmployeeFormComponent implements OnInit, OnChanges {
readonly utforandeVerksamheterFormControlName = 'utforandeVerksamheter';
readonly selectAllUtforandeVerksamheterFormControlName = 'allaUtforandeVerksamheter';
readonly utforandeVerksamhetRequiredMessage = 'Välj minst en utförande verksamhet';
readonly formUuid = UUID.UUID();
readonly formUuid = uuid();
readonly emailElementId = `email-control-${this.formUuid}`;
readonly tjansterElementId = `tjanster-control-${this.formUuid}`;
readonly utforandeVerksamhetElementId = `utforande-verksamhet-control-${this.formUuid}`;

2
apps/mina-sidor-fa/src/app/pages/avrop/avrop.component.ts
View File

@@ -1,7 +1,7 @@
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { Avrop, AvropCompactData } from '@msfa-models/avrop.model';
import { Handledare } from '@msfa-models/handledare.model';
import { MultiselectFilterOption } from '@msfa-models/multiselect-filter-option';
import { MultiselectFilterOption } from '@msfa-shared/components/multiselect/multiselect-filter-option';
import { AvropService } from '@msfa-services/avrop.service';
import { Observable } from 'rxjs';

41
apps/mina-sidor-fa/src/app/pages/avrop/components/avrop-filters/avrop-filters.component.html
View File

@@ -1,29 +1,32 @@
<div style="display: flex">
<ng-container *ngIf="availableTjanster$ | async; let availableTjanster; else loadingRef">
<msfa-temporary-filter
[filterLabel]="'Tjänster'"
[filterOptions]="availableTjanster"
<div class="avrop-filters">
<div class="avrop-filters__filter-wrapper" *ngIf="availableTjanster$ | async; let availableTjanster; else loadingRef">
<msfa-multiselect
[multiselectTitle]="'Tjänster'"
[availableOptions]="availableTjanster"
confirmButtonText="Uppdatera filter"
[selectedOptions]="filteredTjanster$ | async"
(selectedOptionsChange)="updateSelectedTjanster($event)"
></msfa-temporary-filter>
</ng-container>
<ng-container *ngIf="availableUtforandeVerksamheter$ | async; let availableUtforandeVerksamheter; else loadingRef">
<msfa-temporary-filter
[filterLabel]="'Utförande verksamheter'"
[filterOptions]="availableUtforandeVerksamheter"
></msfa-multiselect>
</div>
<div class="avrop-filters__filter-wrapper" *ngIf="availableUtforandeVerksamheter$ | async; let availableUtforandeVerksamheter; else loadingRef">
<msfa-multiselect
[multiselectTitle]="'Utförande verksamheter'"
confirmButtonText="Uppdatera filter"
[availableOptions]="availableUtforandeVerksamheter"
[selectedOptions]="filteredUtforandeVerksamheter$ | async"
(selectedOptionsChange)="updateSelectedUtforandeVerksamheter($event)"
></msfa-temporary-filter>
</ng-container>
></msfa-multiselect>
</div>
<ng-container *ngIf="availableKommuner$ | async; let availableKommuner; else loadingRef">
<msfa-temporary-filter
[filterLabel]="'Kommuner'"
[filterOptions]="availableKommuner"
<div class="avrop-filters__filter-wrapper" *ngIf="availableKommuner$ | async; let availableKommuner; else loadingRef">
<msfa-multiselect
[multiselectTitle]="'Kommuner'"
[availableOptions]="availableKommuner"
[selectedOptions]="filteredKommuner$ | async"
confirmButtonText="Uppdatera filter"
(selectedOptionsChange)="updateSelectedKommuner($event)"
></msfa-temporary-filter>
</ng-container>
></msfa-multiselect>
</div>
</div>
<br /><br />
<div class="avrop-filters__tags">

10
apps/mina-sidor-fa/src/app/pages/avrop/components/avrop-filters/avrop-filters.component.scss
View File

@@ -1,6 +1,8 @@
@import 'variables/gutters';
.avrop-filters {
display: flex;
&__tags {
display: flex;
flex-wrap: wrap;
@@ -9,9 +11,13 @@
&__tag {
display: inline-block;
margin-right: $digi--layout--gutter--s;
margin-right: var(--digi--layout--gutter--s);
}
&__loading-spinner {
margin-right: $digi--layout--gutter;
margin-right: var(--digi--layout--gutter);
}
&__filter-wrapper {
margin-right: var(--digi--layout--gutter--s);
}
}

3
apps/mina-sidor-fa/src/app/pages/avrop/components/avrop-filters/avrop-filters.component.spec.ts
View File

@@ -4,7 +4,6 @@ import { ComponentFixture, discardPeriodicTasks, fakeAsync, TestBed, tick } from
import { By } from '@angular/platform-browser';
import { AvropService } from '@msfa-services/avrop.service';
import { of } from 'rxjs';
import { TemporaryFilterComponent } from '../temporary-filter/temporary-filter.component';
import { AvropFiltersComponent } from './avrop-filters.component';
describe('AvropFiltersComponent', () => {
@@ -15,7 +14,7 @@ describe('AvropFiltersComponent', () => {
await TestBed.configureTestingModule({
schemas: [CUSTOM_ELEMENTS_SCHEMA],
imports: [HttpClientTestingModule],
declarations: [AvropFiltersComponent, TemporaryFilterComponent],
declarations: [AvropFiltersComponent],
providers: [AvropService],
}).compileComponents();
});

2
apps/mina-sidor-fa/src/app/pages/avrop/components/avrop-filters/avrop-filters.component.ts
View File

@@ -1,5 +1,5 @@
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { MultiselectFilterOption } from '@msfa-models/multiselect-filter-option';
import { MultiselectFilterOption } from '@msfa-shared/components/multiselect/multiselect-filter-option';
import { AvropService } from '@msfa-services/avrop.service';
import { Observable } from 'rxjs';

4
apps/mina-sidor-fa/src/app/pages/avrop/components/avrop-filters/avrop-filters.module.ts
View File

@@ -1,12 +1,12 @@
import { CommonModule } from '@angular/common';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { TemporaryFilterModule } from '../temporary-filter/temporary-filter.module';
import { AvropFiltersComponent } from './avrop-filters.component';
import { MultiselectModule } from '@msfa-shared/components/multiselect/multiselect.module';
@NgModule({
schemas: [CUSTOM_ELEMENTS_SCHEMA],
declarations: [AvropFiltersComponent],
imports: [CommonModule, TemporaryFilterModule],
imports: [CommonModule, MultiselectModule],
exports: [AvropFiltersComponent],
})
export class AvropFiltersModule {}

12
apps/mina-sidor-fa/src/app/pages/avrop/components/temporary-filter/temporary-filter.component.html
View File

@@ -1,12 +0,0 @@
<div style="border: 2px solid #CCC; background: #EFEFEF; margin-right: 2rem; padding: 1rem;">
<strong>{{filterLabel}}</strong>
<digi-form-checkbox
*ngFor="let filterOption of filterOptions"
[afLabel]="filterOption.label + ' (' + (filterOption.count || 0) + ')'"
(change)="setOptionState(filterOption, $event.target.checked)"
[afChecked]="isSelected(filterOption)"
>
</digi-form-checkbox>
<digi-button (click)="emitSelectedOptions()" af-size="s">Spara</digi-button>
</div>

0
apps/mina-sidor-fa/src/app/pages/avrop/components/temporary-filter/temporary-filter.component.scss
View File

26
apps/mina-sidor-fa/src/app/pages/avrop/components/temporary-filter/temporary-filter.component.spec.ts
View File

@@ -1,26 +0,0 @@
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { TemporaryFilterComponent } from './temporary-filter.component';
describe('TemporaryFilterComponent', () => {
let component: TemporaryFilterComponent;
let fixture: ComponentFixture<TemporaryFilterComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [TemporaryFilterComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
}).compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(TemporaryFilterComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

57
apps/mina-sidor-fa/src/app/pages/avrop/components/temporary-filter/temporary-filter.component.ts
View File

@@ -1,57 +0,0 @@
import {
ChangeDetectionStrategy,
Component,
EventEmitter,
Input,
OnChanges,
OnInit,
Output,
SimpleChanges,
} from '@angular/core';
import { MultiselectFilterOption } from '@msfa-models/multiselect-filter-option';
import { BehaviorSubject, Observable } from 'rxjs';
@Component({
selector: 'msfa-temporary-filter',
templateUrl: './temporary-filter.component.html',
styleUrls: ['./temporary-filter.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class TemporaryFilterComponent implements OnInit, OnChanges {
private _selectedAvropFilterOption$ = new BehaviorSubject<MultiselectFilterOption[]>(null);
selectedAvropFilterOptionState$: Observable<MultiselectFilterOption[]>;
@Input() filterLabel: string;
@Input() filterOptions: MultiselectFilterOption[];
@Input() selectedOptions: MultiselectFilterOption[];
@Output() selectedOptionsChange = new EventEmitter<MultiselectFilterOption[]>();
// THIS SHOULD BE REPLACED BY DIGI COMPONENT
ngOnInit(): void {
this._selectedAvropFilterOption$ = new BehaviorSubject<MultiselectFilterOption[]>(this.selectedOptions);
this.selectedAvropFilterOptionState$ = this._selectedAvropFilterOption$.asObservable();
}
ngOnChanges(changes: SimpleChanges): void {
if (changes.selectedOptions?.currentValue) {
this._selectedAvropFilterOption$.next(changes.selectedOptions.currentValue);
}
}
isSelected(filterOption: MultiselectFilterOption): boolean {
return this.selectedOptions?.includes(filterOption) ?? false;
}
setOptionState(filterOption: MultiselectFilterOption, isSelected: boolean): void {
if (isSelected) {
return this._selectedAvropFilterOption$.next([...(this._selectedAvropFilterOption$.value ?? []), filterOption]);
}
return this._selectedAvropFilterOption$.next(
this._selectedAvropFilterOption$.value?.filter(item => item != filterOption) ?? []
);
}
emitSelectedOptions(): void {
this.selectedOptionsChange.emit(this._selectedAvropFilterOption$.value);
}
}

11
apps/mina-sidor-fa/src/app/pages/avrop/components/temporary-filter/temporary-filter.module.ts
View File

@@ -1,11 +0,0 @@
import { CommonModule } from '@angular/common';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { TemporaryFilterComponent } from './temporary-filter.component';
@NgModule({
schemas: [CUSTOM_ELEMENTS_SCHEMA],
declarations: [TemporaryFilterComponent],
imports: [CommonModule],
exports: [TemporaryFilterComponent],
})
export class TemporaryFilterModule {}