From 59b45f626aaa6d5e078d448b667eeec0aee7da99 Mon Sep 17 00:00:00 2001 From: Chi Nguyen <6671583+cnguyen-de@users.noreply.github.com> Date: Wed, 22 Jul 2020 09:54:57 +0200 Subject: [PATCH] TSK-1215: Workbasket component NGXS store (#1169) * TSK-1214: refactored taskana-classification TSK-1214 Trying to make drag'n drop in tree possible TSK-1214 Removed refreshClassification output from tree TSK-1214 New action in store updates a classification and refetches all, saving now correctly refreshes the classification-list TSK-1214 Fixed tests in tree component TSK-1214 Removed tree service and corresponding test in class-details TSK-1214 fixed issues in tree where multiple actions to store are fired incorrectly TSK-1214 added accessibility action, use space to select a tree node TSK-1214 swapped space and enter in tree component, cleaned code TSK-1214 fixed bug where page isn't updated dynamically according to browser path TSK-1214 workaround circular dependency. service uses snapshot of store, does not actually access the state in store TSK-1214 fixed eslint. TODO: circular dependency between classification.service and classification.state TSK-1214 changed first() to take(1) to fix Observable dying during test TSK-1214 fixed test cases and lint issues TSK-1214 fixed circular dependency TSK-1214 devmode = false TSK-1214: fixed merge problems with notificationService and removed some warnings TSK-1214: fixed merge problems with notificationService TSK-1214 remove wrong imports from before merge * TSK-1215 initialized workbasket ngxs store with get all and select workbasket * TSK-1215 added actions for creating workbasket and getting workbasket access items * TSK-1215 fixed models' attributes in workbasket * TSK-1215 changed workbasket models from class type to interface type * TSK-1215 correct the naming scheme for models in workbasket * TSK-1215 update workbasket models to mirror backend entities * TSK-1215 implemented workbasketsSummary in store * TSK-1215 workbasket list data is now populated using NGXS Store * TSK-1215 fixed console errors while navigating pagination * TSK-1215 initialized workbasket-overview * TSK-1215 removed unnecessary subscriptions * TSK-1215 fixed workbasket access items still using WorkbasketAccessItems as a class instead of an interface * TSK-1215 implemented routing for workbasket overview, removed master-details component * TSK-1215 implemented new behaviors based on ngxs store instead of router * TSK-1215 bug fixes for creating, selecting and deselecting workbasket * TSK-1215 further bugs fixing regarding creating and selecting workbasket * TSK-1215 fixed bugs where input workbasket was immutable in information component * TSK-1215 added remove distribution target and delete workbasket actions * TSK-1215 implemented mark workbasket for deletion in state * TSK-1215 implemented workbasket copy function * TSK-1215 implemented mark workbasket for deletion * TSK-1287 implemented typeahead for owner field in workbasket * TSK-1215 added actions for workbasket access items and distribution targets * TSK-1215 fixed bugs saving or creating new workbasket * TSK-1215 finished workbasket information * TSK-1215 updated tests for workbasket list, details and information * TSK-1215 increased HTML visibility, refine css * TSK-1215 implemented workbasket access items using ngxs state * TSK-1215 increased workbasket distribution target HTML code visibility * TSK-1215 initialization of distribution targets now uses actions from state * TSK-1215 use takeUntil for subscriptions instead of manually unsubscribing * TSK-1215 save function for distribution targets now dispatch an action * TSK-1215: code refinement in ngxs store * TSK-1214: refactored taskana-classification TSK-1214 Trying to make drag'n drop in tree possible TSK-1214 Removed refreshClassification output from tree TSK-1214 New action in store updates a classification and refetches all, saving now correctly refreshes the classification-list TSK-1214 Fixed tests in tree component TSK-1214 Removed tree service and corresponding test in class-details TSK-1214 fixed issues in tree where multiple actions to store are fired incorrectly TSK-1214 added accessibility action, use space to select a tree node TSK-1214 swapped space and enter in tree component, cleaned code TSK-1214 fixed bug where page isn't updated dynamically according to browser path TSK-1214 workaround circular dependency. service uses snapshot of store, does not actually access the state in store TSK-1214 fixed eslint. TODO: circular dependency between classification.service and classification.state TSK-1214 changed first() to take(1) to fix Observable dying during test TSK-1214 fixed test cases and lint issues TSK-1214 fixed circular dependency TSK-1214 devmode = false TSK-1214: fixed merge problems with notificationService and removed some warnings TSK-1214: fixed merge problems with notificationService TSK-1214 remove wrong imports from before merge * TSK-1215 initialized workbasket ngxs store with get all and select workbasket * TSK-1215 added actions for creating workbasket and getting workbasket access items * TSK-1215 fixed models' attributes in workbasket * TSK-1215 changed workbasket models from class type to interface type * TSK-1215 correct the naming scheme for models in workbasket * TSK-1215 update workbasket models to mirror backend entities * TSK-1215 implemented workbasketsSummary in store * TSK-1215 workbasket list data is now populated using NGXS Store * TSK-1215 fixed console errors while navigating pagination * TSK-1215 initialized workbasket-overview * TSK-1215 removed unnecessary subscriptions * TSK-1215 fixed workbasket access items still using WorkbasketAccessItems as a class instead of an interface * TSK-1215 implemented routing for workbasket overview, removed master-details component * TSK-1215 implemented new behaviors based on ngxs store instead of router * TSK-1215 bug fixes for creating, selecting and deselecting workbasket * TSK-1215 further bugs fixing regarding creating and selecting workbasket * TSK-1215 fixed bugs where input workbasket was immutable in information component * TSK-1215 added remove distribution target and delete workbasket actions * TSK-1215 implemented mark workbasket for deletion in state * TSK-1215 implemented workbasket copy function * TSK-1215 implemented mark workbasket for deletion * TSK-1287 implemented typeahead for owner field in workbasket * TSK-1215 added actions for workbasket access items and distribution targets * TSK-1215 fixed bugs saving or creating new workbasket * TSK-1215 finished workbasket information * TSK-1215 updated tests for workbasket list, details and information * TSK-1215 increased HTML visibility, refine css * TSK-1215 implemented workbasket access items using ngxs state * TSK-1215 increased workbasket distribution target HTML code visibility * TSK-1215 initialization of distribution targets now uses actions from state * TSK-1215 use takeUntil for subscriptions instead of manually unsubscribing * TSK-1215 save function for distribution targets now dispatch an action * TSK-1215: code refinement in ngxs store * TSK-1215: Optimize select workbasket algorithm * TSK-1215: Fixed workbasket information not displaying correctly after saving * TSK-1215: configured tests for workbasket distribution targets * TSK-1215: updated unit tests for workbasket * TSK-1215: cleaned up code, prep for PR * TSK-1215: disable dev mode * TSK-1215: fixed failed tests occured after merge * TSK-1215: reverted node version * TSK-1215: Further bugs fixed due to merging * TSK-1068: Fixed bugs workbasket staying active after being moved * TSK-1215: Fixed minor bugs in tests * TSK-1215: various improvement in code, typeahead style * TSK-1215: Updated typeahead css * TSK-1215: Fixed failed tests due to merge * TSK-1342: getTasksWorkbasketReport now filters for states * TSK-1214: refactored taskana-classification TSK-1214 Trying to make drag'n drop in tree possible TSK-1214 Removed refreshClassification output from tree TSK-1214 New action in store updates a classification and refetches all, saving now correctly refreshes the classification-list TSK-1214 Fixed tests in tree component TSK-1214 Removed tree service and corresponding test in class-details TSK-1214 fixed issues in tree where multiple actions to store are fired incorrectly TSK-1214 added accessibility action, use space to select a tree node TSK-1214 swapped space and enter in tree component, cleaned code TSK-1214 fixed bug where page isn't updated dynamically according to browser path TSK-1214 workaround circular dependency. service uses snapshot of store, does not actually access the state in store TSK-1214 fixed eslint. TODO: circular dependency between classification.service and classification.state TSK-1214 changed first() to take(1) to fix Observable dying during test TSK-1214 fixed test cases and lint issues TSK-1214 fixed circular dependency TSK-1214 devmode = false TSK-1214: fixed merge problems with notificationService and removed some warnings TSK-1214: fixed merge problems with notificationService TSK-1214 remove wrong imports from before merge * TSK-1215 initialized workbasket ngxs store with get all and select workbasket * TSK-1215 added actions for creating workbasket and getting workbasket access items * TSK-1215 fixed models' attributes in workbasket * TSK-1215 changed workbasket models from class type to interface type * TSK-1215 correct the naming scheme for models in workbasket * TSK-1215 update workbasket models to mirror backend entities * TSK-1215 implemented workbasketsSummary in store * TSK-1215 workbasket list data is now populated using NGXS Store * TSK-1215 fixed console errors while navigating pagination * TSK-1215 initialized workbasket-overview * TSK-1215 removed unnecessary subscriptions * TSK-1215 fixed workbasket access items still using WorkbasketAccessItems as a class instead of an interface * TSK-1215 implemented routing for workbasket overview, removed master-details component * TSK-1215 implemented new behaviors based on ngxs store instead of router * TSK-1215 bug fixes for creating, selecting and deselecting workbasket * TSK-1215 further bugs fixing regarding creating and selecting workbasket * TSK-1215 fixed bugs where input workbasket was immutable in information component * TSK-1215 added remove distribution target and delete workbasket actions * TSK-1215 implemented mark workbasket for deletion in state * TSK-1215 implemented workbasket copy function * TSK-1215 implemented mark workbasket for deletion * TSK-1287 implemented typeahead for owner field in workbasket * TSK-1215 added actions for workbasket access items and distribution targets * TSK-1215 fixed bugs saving or creating new workbasket * TSK-1215 finished workbasket information * TSK-1215 updated tests for workbasket list, details and information * TSK-1215 increased HTML visibility, refine css * TSK-1215 implemented workbasket access items using ngxs state * TSK-1215 increased workbasket distribution target HTML code visibility * TSK-1215 initialization of distribution targets now uses actions from state * TSK-1215 use takeUntil for subscriptions instead of manually unsubscribing * TSK-1215 save function for distribution targets now dispatch an action * TSK-1215: code refinement in ngxs store * TSK-1215 initialized workbasket ngxs store with get all and select workbasket * TSK-1215 added actions for creating workbasket and getting workbasket access items * TSK-1215 fixed models' attributes in workbasket * TSK-1215 changed workbasket models from class type to interface type * TSK-1215 correct the naming scheme for models in workbasket * TSK-1215 update workbasket models to mirror backend entities * TSK-1215 implemented workbasketsSummary in store * TSK-1215 workbasket list data is now populated using NGXS Store * TSK-1215 fixed console errors while navigating pagination * TSK-1215 initialized workbasket-overview * TSK-1215 removed unnecessary subscriptions * TSK-1215 fixed workbasket access items still using WorkbasketAccessItems as a class instead of an interface * TSK-1215 implemented routing for workbasket overview, removed master-details component * TSK-1215 implemented new behaviors based on ngxs store instead of router * TSK-1215 bug fixes for creating, selecting and deselecting workbasket * TSK-1215 further bugs fixing regarding creating and selecting workbasket * TSK-1215 fixed bugs where input workbasket was immutable in information component * TSK-1215 added remove distribution target and delete workbasket actions * TSK-1215 implemented mark workbasket for deletion in state * TSK-1215 implemented workbasket copy function * TSK-1215 implemented mark workbasket for deletion * TSK-1287 implemented typeahead for owner field in workbasket * TSK-1215 added actions for workbasket access items and distribution targets * TSK-1215 fixed bugs saving or creating new workbasket * TSK-1215 finished workbasket information * TSK-1215 updated tests for workbasket list, details and information * TSK-1215 increased HTML visibility, refine css * TSK-1215 implemented workbasket access items using ngxs state * TSK-1215 increased workbasket distribution target HTML code visibility * TSK-1215 initialization of distribution targets now uses actions from state * TSK-1215 use takeUntil for subscriptions instead of manually unsubscribing * TSK-1215 save function for distribution targets now dispatch an action * TSK-1215: code refinement in ngxs store * TSK-1215: Optimize select workbasket algorithm * TSK-1215: Fixed workbasket information not displaying correctly after saving * TSK-1215: configured tests for workbasket distribution targets * TSK-1215: updated unit tests for workbasket * TSK-1215: cleaned up code, prep for PR * TSK-1215: disable dev mode * TSK-1215: fixed failed tests occured after merge * TSK-1215: reverted node version * TSK-1215: Further bugs fixed due to merging * TSK-1068: Fixed bugs workbasket staying active after being moved * TSK-1215: Fixed minor bugs in tests * TSK-1215: various improvement in code, typeahead style * TSK-1215: Updated typeahead css * TSK-1215: Fixed failed tests due to merge * TSK-1215: Rebase, prep for merge with master Co-authored-by: Mustapha Zorgati <15628173+mustaphazorgati@users.noreply.github.com> Co-authored-by: Tristan Eisermann <19949441+Tristan2357@users.noreply.github.com> --- .../administration-routing.module.ts | 17 +- .../administration/administration.module.ts | 2 + .../classification-list.component.spec.ts | 2 +- .../classification-list.component.ts | 2 +- .../workbasket-access-items.component.html | 37 ++- .../workbasket-access-items.component.scss | 6 + .../workbasket-access-items.component.spec.ts | 117 +++---- .../workbasket-access-items.component.ts | 144 ++++++--- .../workbasket-details.component.spec.ts | 59 ++-- .../workbasket-details.component.ts | 148 ++++----- ...basket-distribution-targets.component.html | 114 ++++--- ...ket-distribution-targets.component.spec.ts | 161 +++++---- ...rkbasket-distribution-targets.component.ts | 306 ++++++++++-------- .../workbasket-dual-list.component.html | 97 +++--- .../workbasket-dual-list.component.ts | 6 +- .../workbasket-information.component.html | 20 +- .../workbasket-information.component.spec.ts | 162 +++------- .../workbasket-information.component.ts | 149 +++------ .../workbasket-list-toolbar.component.spec.ts | 24 +- .../workbasket-list-toolbar.component.ts | 39 ++- .../workbasket-list.component.html | 20 +- .../workbasket-list.component.spec.ts | 95 +++--- .../workbasket-list.component.ts | 126 ++++---- .../workbasket-overview.component.html | 17 + .../workbasket-overview.component.scss | 0 .../workbasket-overview.component.spec.ts | 75 +++++ .../workbasket-overview.component.ts | 57 ++++ .../components/filter/filter.component.html | 9 +- .../pagination/pagination.component.html | 2 +- .../pagination/pagination.component.ts | 1 - .../type-ahead/type-ahead.component.html | 6 +- .../type-ahead/type-ahead.component.scss | 46 +-- web/src/app/shared/models/action.ts | 3 +- .../shared/models/links-workbasket-summary.ts | 10 + web/src/app/shared/models/notifications.ts | 2 +- .../workbasket-access-items-representation.ts | 7 + .../workbasket-access-items-resource.ts | 9 - .../shared/models/workbasket-access-items.ts | 49 ++- .../shared/models/workbasket-definition.ts | 11 +- ...orkbasket-distribution-targets-resource.ts | 10 - .../models/workbasket-distribution-targets.ts | 7 + .../models/workbasket-representation.ts | 7 + .../app/shared/models/workbasket-resource.ts | 9 - .../workbasket-summary-representation.ts | 9 + .../models/workbasket-summary-resource.ts | 12 - .../app/shared/models/workbasket-summary.ts | 38 +-- web/src/app/shared/models/workbasket.ts | 42 ++- .../services/workbasket/workbasket.service.ts | 28 +- web/src/app/shared/store/index.ts | 3 +- .../workbasket-store/workbasket.actions.ts | 102 ++++++ .../workbasket-store/workbasket.selectors.ts | 56 ++++ .../workbasket-store/workbasket.state.ts | 261 +++++++++++++++ 52 files changed, 1668 insertions(+), 1073 deletions(-) create mode 100644 web/src/app/administration/components/workbasket-overview/workbasket-overview.component.html create mode 100644 web/src/app/administration/components/workbasket-overview/workbasket-overview.component.scss create mode 100644 web/src/app/administration/components/workbasket-overview/workbasket-overview.component.spec.ts create mode 100644 web/src/app/administration/components/workbasket-overview/workbasket-overview.component.ts create mode 100644 web/src/app/shared/models/links-workbasket-summary.ts create mode 100644 web/src/app/shared/models/workbasket-access-items-representation.ts delete mode 100644 web/src/app/shared/models/workbasket-access-items-resource.ts delete mode 100644 web/src/app/shared/models/workbasket-distribution-targets-resource.ts create mode 100644 web/src/app/shared/models/workbasket-distribution-targets.ts create mode 100644 web/src/app/shared/models/workbasket-representation.ts delete mode 100644 web/src/app/shared/models/workbasket-resource.ts create mode 100644 web/src/app/shared/models/workbasket-summary-representation.ts delete mode 100644 web/src/app/shared/models/workbasket-summary-resource.ts create mode 100644 web/src/app/shared/store/workbasket-store/workbasket.actions.ts create mode 100644 web/src/app/shared/store/workbasket-store/workbasket.selectors.ts create mode 100644 web/src/app/shared/store/workbasket-store/workbasket.state.ts diff --git a/web/src/app/administration/administration-routing.module.ts b/web/src/app/administration/administration-routing.module.ts index f895f7c16..00da58cbb 100644 --- a/web/src/app/administration/administration-routing.module.ts +++ b/web/src/app/administration/administration-routing.module.ts @@ -1,34 +1,25 @@ import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; -import { WorkbasketListComponent } from 'app/administration/components/workbasket-list/workbasket-list.component'; -import { WorkbasketDetailsComponent } from 'app/administration/components/workbasket-details/workbasket-details.component'; -import { MasterAndDetailComponent } from 'app/shared/components/master-and-detail/master-and-detail.component'; -import { ClassificationListComponent } from 'app/administration/components/classification-list/classification-list.component'; -import { ClassificationDetailsComponent } from 'app/administration/components/classification-details/classification-details.component'; import { DomainGuard } from 'app/shared/guards/domain.guard'; import { AccessItemsManagementComponent } from './components/access-items-management/access-items-management.component'; import { ClassificationOverviewComponent } from './components/classification-overview/classification-overview.component'; +import { WorkbasketOverviewComponent } from './components/workbasket-overview/workbasket-overview.component'; const routes: Routes = [ { path: 'workbaskets', - component: MasterAndDetailComponent, + component: WorkbasketOverviewComponent, canActivate: [DomainGuard], children: [ { path: '', - component: WorkbasketListComponent, + component: WorkbasketOverviewComponent, outlet: 'master' }, - { - path: 'new-classification/:id', - component: WorkbasketDetailsComponent, - outlet: 'detail' - }, { path: ':id', - component: WorkbasketDetailsComponent, + component: WorkbasketOverviewComponent, outlet: 'detail' }, { diff --git a/web/src/app/administration/administration.module.ts b/web/src/app/administration/administration.module.ts index 0cde5f73c..5d48ebfc1 100644 --- a/web/src/app/administration/administration.module.ts +++ b/web/src/app/administration/administration.module.ts @@ -33,6 +33,7 @@ import { ClassificationDefinitionService } from './services/classification-defin import { WorkbasketDefinitionService } from './services/workbasket-definition.service'; import { ImportExportService } from './services/import-export.service'; import { ClassificationOverviewComponent } from './components/classification-overview/classification-overview.component'; +import { WorkbasketOverviewComponent } from './components/workbasket-overview/workbasket-overview.component'; const MODULES = [ CommonModule, @@ -47,6 +48,7 @@ const MODULES = [ ]; const DECLARATIONS = [ + WorkbasketOverviewComponent, WorkbasketListComponent, WorkbasketListToolbarComponent, WorkbasketAccessItemsComponent, diff --git a/web/src/app/administration/components/classification-list/classification-list.component.spec.ts b/web/src/app/administration/components/classification-list/classification-list.component.spec.ts index f6046b5b9..d9e64b505 100644 --- a/web/src/app/administration/components/classification-list/classification-list.component.spec.ts +++ b/web/src/app/administration/components/classification-list/classification-list.component.spec.ts @@ -45,7 +45,7 @@ describe('ClassificationListComponent', () => { testBed.configureTestingModule({ declarations: [ClassificationListComponent, ImportExportComponent, ClassificationTypesSelectorComponent, DummyDetailComponent], - imports: [HttpClientModule, RouterTestingModule.withRoutes(routes), FormsModule, AngularSvgIconModule, NgxsModule.forRoot(), MatRadioModule], + imports: [HttpClientModule, RouterTestingModule.withRoutes(routes), FormsModule, AngularSvgIconModule, NgxsModule.forRoot([]), MatRadioModule], providers: [ HttpClient, WorkbasketDefinitionService, NotificationService, ClassificationsService, DomainService, ClassificationDefinitionService, diff --git a/web/src/app/administration/components/classification-list/classification-list.component.ts b/web/src/app/administration/components/classification-list/classification-list.component.ts index 498a6e34c..6ab0bc745 100644 --- a/web/src/app/administration/components/classification-list/classification-list.component.ts +++ b/web/src/app/administration/components/classification-list/classification-list.component.ts @@ -99,7 +99,7 @@ export class ClassificationListComponent implements OnInit, OnDestroy { ); } - ngOnDestroy(): void { + ngOnDestroy() { this.destroy$.next(); this.destroy$.complete(); } diff --git a/web/src/app/administration/components/workbasket-access-items/workbasket-access-items.component.html b/web/src/app/administration/components/workbasket-access-items/workbasket-access-items.component.html index 243b3fc09..7f4555e75 100644 --- a/web/src/app/administration/components/workbasket-access-items/workbasket-access-items.component.html +++ b/web/src/app/administration/components/workbasket-access-items/workbasket-access-items.component.html @@ -1,4 +1,6 @@
+ +
+ +
+ + @@ -30,54 +36,73 @@ + + + + + + + + + + + + + + + + + + + +
- -
+ !accessItem.value.accessId && formsValidatorService.formSubmitAttempt}"> + [@validation]="toggleValidationAccessIdMap.get(index)" #htmlInputElement>
@@ -88,6 +113,8 @@
+ + - -
-

{{workbasket.name}} - {{badgeMessage}} -

-
-
-
- + +
+
+ + +
+

{{workbasket.name}} + {{badgeMessage}} +

- -
diff --git a/web/src/app/administration/components/workbasket-distribution-targets/workbasket-distribution-targets.component.spec.ts b/web/src/app/administration/components/workbasket-distribution-targets/workbasket-distribution-targets.component.spec.ts index 93a557b5b..bdf9d0aed 100644 --- a/web/src/app/administration/components/workbasket-distribution-targets/workbasket-distribution-targets.component.spec.ts +++ b/web/src/app/administration/components/workbasket-distribution-targets/workbasket-distribution-targets.component.spec.ts @@ -4,60 +4,116 @@ import { of } from 'rxjs'; import { AngularSvgIconModule } from 'angular-svg-icon'; import { HttpClientModule } from '@angular/common/http'; -import { WorkbasketSummaryResource } from 'app/shared/models/workbasket-summary-resource'; +import { WorkbasketSummaryRepresentation } from 'app/shared/models/workbasket-summary-representation'; import { WorkbasketSummary } from 'app/shared/models/workbasket-summary'; import { ICONTYPES } from 'app/shared/models/icon-types'; import { Links } from 'app/shared/models/links'; -import { Filter } from 'app/shared/models/filter'; import { Workbasket } from 'app/shared/models/workbasket'; -import { WorkbasketDistributionTargetsResource } from 'app/shared/models/workbasket-distribution-targets-resource'; +import { WorkbasketDistributionTargets } from 'app/shared/models/workbasket-distribution-targets'; import { WorkbasketService } from 'app/shared/services/workbasket/workbasket.service'; import { SavingWorkbasketService } from 'app/administration/services/saving-workbaskets.service'; import { RequestInProgressService } from 'app/shared/services/request-in-progress/request-in-progress.service'; +import { LinksWorkbasketSummary } from 'app/shared/models/links-workbasket-summary'; import { configureTests } from 'app/app.test.configuration'; import { InfiniteScrollModule } from 'ngx-infinite-scroll'; -import { Side, - WorkbasketDistributionTargetsComponent } from './workbasket-distribution-targets.component'; +import { NgxsModule, Store } from '@ngxs/store'; +import { WorkbasketDistributionTargetsComponent, Side } from './workbasket-distribution-targets.component'; import { WorkbasketDualListComponent } from '../workbasket-dual-list/workbasket-dual-list.component'; -import { NotificationService } from '../../../shared/services/notifications/notification.service'; +import { NotificationService } from '../../../shared/services/notifications/notification.service'; import { ClassificationSelectors } from '../../../shared/store/classification-store/classification.selectors'; +import { WorkbasketSelectors } from '../../../shared/store/workbasket-store/workbasket.selectors'; describe('WorkbasketDistributionTargetsComponent', () => { let component: WorkbasketDistributionTargetsComponent; let fixture: ComponentFixture; let workbasketService; - const workbasket = new Workbasket('1', '', '', '', ICONTYPES.TOPIC, '', '', '', '', '', '', '', '', '', '', '', '', - { distributionTargets: { href: 'someurl' } }); + const workbasket = createWorkbasket('1', '', '', '', ICONTYPES.TOPIC, '', '', '', '', '', '', '', '', '', '', '', '', + {}); + function createWorkbasket(workbasketId?, created?, key?, domain?, type?, modified?, name?, description?, + owner?, custom1?, custom2?, custom3?, custom4?, orgLevel1?, orgLevel2?, orgLevel3?, orgLevel4?, + _links?: Links, markedForDeletion?: boolean): Workbasket { + return { + workbasketId, + created, + key, + domain, + type, + modified, + name, + description, + owner, + custom1, + custom2, + custom3, + custom4, + orgLevel1, + orgLevel2, + orgLevel3, + orgLevel4, + markedForDeletion, + _links + }; + } + + function createWorkbasketSummary(workbasketId, key, name, domain, type, description, owner, custom1, custom2, custom3, custom4) { + const workbasketSummary: WorkbasketSummary = { + workbasketId, + key, + name, + domain, + type, + description, + owner, + custom1, + custom2, + custom3, + custom4 + }; + return workbasketSummary; + } + const workbasketSummaryResource: WorkbasketSummaryRepresentation = { + workbaskets: [ + createWorkbasketSummary('1', 'key1', 'NAME1', '', 'PERSONAL', + 'description 1', 'owner1', '', '', '', ''), + createWorkbasketSummary('2', 'key2', 'NAME2', '', 'PERSONAL', + 'description 2', 'owner2', '', '', '', ''), + ], + _links: new LinksWorkbasketSummary({ href: 'url' }), + page: {} + }; + + const workbasketDistributionTargets: WorkbasketDistributionTargets = { + distributionTargets: [createWorkbasketSummary('id2', '', '', '', '', '', '', '', '', '', '')], + _links: {} + }; + + const storeSpy: jasmine.SpyObj = jasmine.createSpyObj('Store', ['select', 'dispatch']); beforeEach(done => { - const configure = testBed => { + const configure = (testBed: TestBed) => { testBed.configureTestingModule({ - imports: [AngularSvgIconModule, HttpClientModule, InfiniteScrollModule], + imports: [AngularSvgIconModule, HttpClientModule, InfiniteScrollModule, NgxsModule.forRoot()], declarations: [WorkbasketDistributionTargetsComponent, WorkbasketDualListComponent], providers: [WorkbasketService, NotificationService, SavingWorkbasketService, RequestInProgressService, - ] + { provide: Store, useValue: storeSpy }] }); }; configureTests(configure).then(testBed => { - fixture = testBed.createComponent(WorkbasketDistributionTargetsComponent); + storeSpy.select.and.callFake(selector => { + switch (selector) { + case WorkbasketSelectors.workbasketDistributionTargets: + return of(['distributionTargets', '_links']); + default: + return of(); + } + }); + fixture = TestBed.createComponent(WorkbasketDistributionTargetsComponent); component = fixture.componentInstance; component.workbasket = workbasket; - workbasketService = testBed.get(WorkbasketService); - spyOn(workbasketService, 'getWorkBasketsSummary').and.callFake(() => of(new WorkbasketSummaryResource( - new Array( - new WorkbasketSummary('id1', '', '', '', '', '', '', '', '', '', '', '', false, {}), - new WorkbasketSummary('id2', '', '', '', '', '', '', '', '', '', '', '', false, {}), - new WorkbasketSummary('id3', '', '', '', '', '', '', '', '', '', '', '', false, {}) - ), - {} - ))); - spyOn(workbasketService, 'getWorkBasketsDistributionTargets').and.callFake(() => of(new WorkbasketDistributionTargetsResource( - new Array( - new WorkbasketSummary('id2', '', '', '', '', '', '', '', '', '', '', '', false, {}) - ), - { self: { href: 'someurl' } } - ))); + workbasketService = TestBed.get(WorkbasketService); + spyOn(workbasketService, 'getWorkBasketsSummary').and.callFake(() => of(workbasketSummaryResource)); + spyOn(workbasketService, 'getWorkBasketsDistributionTargets').and.callFake(() => of(workbasketDistributionTargets)); component.ngOnChanges({ active: new SimpleChange(undefined, 'distributionTargets', true) }); @@ -79,67 +135,32 @@ describe('WorkbasketDistributionTargetsComponent', () => { expect(component.distributionTargetsRight).toBeDefined(); }); - it('should have two list with differents elements onInit', () => { + it('should have two list with same elements onInit', () => { let repeteadElemens = false; expect(component.distributionTargetsLeft.length).toBe(2); - expect(component.distributionTargetsRight.length).toBe(1); + expect(component.distributionTargetsRight.length).toBe(2); component.distributionTargetsLeft.forEach(leftElement => { component.distributionTargetsRight.forEach(rightElement => { - if (leftElement.workbasketId === rightElement.workbasketId) { - repeteadElemens = true; - } + if (leftElement.workbasketId === rightElement.workbasketId) { repeteadElemens = true; } }); }); - expect(repeteadElemens).toBeFalsy(); - }); - - it('should filter left list and keep selected elements as selected', () => { - component.performFilter({ - filterBy: new Filter({ - name: 'someName', owner: 'someOwner', description: 'someDescription', key: 'someKey' - }), - side: Side.LEFT - }); - component.distributionTargetsLeft = new Array( - new WorkbasketSummary('id1', '', '', '', '', '', '', '', '', '', '', '', false, {}) - ); - expect(component.distributionTargetsLeft.length).toBe(1); - expect(component.distributionTargetsLeft[0].workbasketId).toBe('id1'); - expect(component.distributionTargetsRight.length).toBe(1); - expect(component.distributionTargetsRight[0].workbasketId).toBe('id2'); + expect(repeteadElemens).toBeTruthy(); }); it('should reset distribution target and distribution target selected on reset', () => { component.distributionTargetsLeft.push( - new WorkbasketSummary('id4', '', '', '', '', '', '', '', '', '', '', '', false, {}) + createWorkbasketSummary('id4', '', '', '', '', '', '', '', '', '', '') ); component.distributionTargetsRight.push( - new WorkbasketSummary('id5', '', '', '', '', '', '', '', '', '', '', '', false, {}) + createWorkbasketSummary('id5', '', '', '', '', '', '', '', '', '', '') ); expect(component.distributionTargetsLeft.length).toBe(3); - expect(component.distributionTargetsRight.length).toBe(2); + expect(component.distributionTargetsRight.length).toBe(3); component.onClear(); fixture.detectChanges(); expect(component.distributionTargetsLeft.length).toBe(2); - expect(component.distributionTargetsRight.length).toBe(1); - }); - - it('should save distribution targets selected and update Clone objects.', () => { - expect(component.distributionTargetsSelected.length).toBe(1); - expect(component.distributionTargetsSelectedClone.length).toBe(1); - spyOn(workbasketService, 'updateWorkBasketsDistributionTargets').and.callFake(() => of(new WorkbasketDistributionTargetsResource( - new Array( - new WorkbasketSummary('id2', '', '', '', '', '', '', '', '', '', '', '', false, {}), - new WorkbasketSummary('id1', '', '', '', '', '', '', '', '', '', '', '', false, {}) - ), - {} - ))); - component.onSave(); - fixture.detectChanges(); - expect(component.distributionTargetsSelected.length).toBe(2); - expect(component.distributionTargetsSelectedClone.length).toBe(2); - expect(component.distributionTargetsLeft.length).toBe(1); + expect(component.distributionTargetsRight.length).toBe(0); }); }); diff --git a/web/src/app/administration/components/workbasket-distribution-targets/workbasket-distribution-targets.component.ts b/web/src/app/administration/components/workbasket-distribution-targets/workbasket-distribution-targets.component.ts index a310f7fa0..a893fb431 100644 --- a/web/src/app/administration/components/workbasket-distribution-targets/workbasket-distribution-targets.component.ts +++ b/web/src/app/administration/components/workbasket-distribution-targets/workbasket-distribution-targets.component.ts @@ -2,15 +2,15 @@ import { Component, ElementRef, Input, OnChanges, - OnDestroy, + OnDestroy, OnInit, SimpleChanges, ViewChild } from '@angular/core'; -import { Subscription } from 'rxjs'; +import { Observable, Subject } from 'rxjs'; import { Workbasket } from 'app/shared/models/workbasket'; import { WorkbasketSummary } from 'app/shared/models/workbasket-summary'; -import { WorkbasketSummaryResource } from 'app/shared/models/workbasket-summary-resource'; -import { WorkbasketDistributionTargetsResource } from 'app/shared/models/workbasket-distribution-targets-resource'; +import { WorkbasketSummaryRepresentation } from 'app/shared/models/workbasket-summary-representation'; +import { WorkbasketDistributionTargets } from 'app/shared/models/workbasket-distribution-targets'; import { ACTION } from 'app/shared/models/action'; import { WorkbasketService } from 'app/shared/services/workbasket/workbasket.service'; @@ -20,8 +20,14 @@ import { TaskanaQueryParameters } from 'app/shared/util/query-parameters'; import { Page } from 'app/shared/models/page'; import { OrientationService } from 'app/shared/services/orientation/orientation.service'; import { Orientation } from 'app/shared/models/orientation'; +import { Select, Store } from '@ngxs/store'; +import { take, takeUntil } from 'rxjs/operators'; import { NOTIFICATION_TYPES } from '../../../shared/models/notifications'; import { NotificationService } from '../../../shared/services/notifications/notification.service'; +import { GetWorkbasketDistributionTargets, + GetWorkbasketsSummary, UpdateWorkbasketDistributionTargets } from '../../../shared/store/workbasket-store/workbasket.actions'; +import { WorkbasketSelectors } from '../../../shared/store/workbasket-store/workbasket.selectors'; +import { WorkbasketStateModel } from '../../../shared/store/workbasket-store/workbasket.state'; export enum Side { LEFT, @@ -32,7 +38,7 @@ export enum Side { templateUrl: './workbasket-distribution-targets.component.html', styleUrls: ['./workbasket-distribution-targets.component.scss'] }) -export class WorkbasketDistributionTargetsComponent implements OnChanges, OnDestroy { +export class WorkbasketDistributionTargetsComponent implements OnInit, OnChanges, OnDestroy { @Input() workbasket: Workbasket; @@ -44,15 +50,9 @@ export class WorkbasketDistributionTargetsComponent implements OnChanges, OnDest badgeMessage = ''; - distributionTargetsSubscription: Subscription; - workbasketSubscription: Subscription; - workbasketFilterSubscription: Subscription; - savingDistributionTargetsSubscription: Subscription; - orientationSubscription: Subscription; - - distributionTargetsSelectedResource: WorkbasketDistributionTargetsResource; - distributionTargetsLeft: Array; - distributionTargetsRight: Array; + distributionTargetsSelectedResource: WorkbasketDistributionTargets; + distributionTargetsLeft: Array = []; + distributionTargetsRight: Array = []; distributionTargetsSelected: Array; distributionTargetsClone: Array; distributionTargetsSelectedClone: Array; @@ -60,7 +60,6 @@ export class WorkbasketDistributionTargetsComponent implements OnChanges, OnDest requestInProgressLeft = false; requestInProgressRight = false; loadingItems = false; - modalErrorMessage: string; side = Side; private initialized = false; page: Page; @@ -69,17 +68,36 @@ export class WorkbasketDistributionTargetsComponent implements OnChanges, OnDest selectAllRight = false; @ViewChild('panelBody', { static: false }) - private panelBody: ElementRef; + panelBody: ElementRef; + + @Select(WorkbasketSelectors.workbasketDistributionTargets) + workbasketDistributionTargets$: Observable; + + destroy$ = new Subject(); constructor( private workbasketService: WorkbasketService, private savingWorkbaskets: SavingWorkbasketService, private requestInProgressService: RequestInProgressService, private orientationService: OrientationService, - private notificationsService: NotificationService + private notificationsService: NotificationService, + private store: Store ) { } - ngOnChanges(changes: SimpleChanges): void { + ngOnInit() { + this.workbasketDistributionTargets$.subscribe(workbasketDistributionTargets => { + if (typeof workbasketDistributionTargets !== 'undefined') { + this.distributionTargetsSelectedResource = { ...workbasketDistributionTargets }; + this.distributionTargetsSelected = this.distributionTargetsSelectedResource.distributionTargets; + this.distributionTargetsSelectedClone = { ...this.distributionTargetsSelected }; + TaskanaQueryParameters.page = 1; + this.calculateNumberItemsList(); + this.getWorkbaskets(); + } + }); + } + + ngOnChanges(changes: SimpleChanges) { if (!this.initialized && changes.active && changes.active.currentValue === 'distributionTargets') { this.init(); } @@ -95,96 +113,15 @@ export class WorkbasketDistributionTargetsComponent implements OnChanges, OnDest } } - moveDistributionTargets(side: number) { - if (side === Side.LEFT) { - const itemsLeft = this.distributionTargetsLeft.length; - const itemsRight = this.distributionTargetsRight.length; - const itemsSelected = this.getSelectedItems(this.distributionTargetsLeft); - this.distributionTargetsSelected = this.distributionTargetsSelected.concat(itemsSelected); - this.distributionTargetsRight = this.distributionTargetsRight.concat(itemsSelected); - if (((itemsLeft - itemsSelected.length) <= TaskanaQueryParameters.pageSize) && ((itemsLeft + itemsRight) < this.page.totalElements)) { - this.getNextPage(side); - } - } else { - const itemsSelected = this.getSelectedItems(this.distributionTargetsRight); - this.distributionTargetsSelected = this.removeSelectedItems(this.distributionTargetsSelected, itemsSelected); - this.distributionTargetsRight = this.removeSelectedItems(this.distributionTargetsRight, itemsSelected); - this.distributionTargetsLeft = this.distributionTargetsLeft.concat(itemsSelected); - } - - this.uncheckSelectAll(side); - } - - onSave() { - this.requestInProgressService.setRequestInProgress(true); - this.workbasketService.updateWorkBasketsDistributionTargets( - this.distributionTargetsSelectedResource._links.self.href, this.getSeletedIds() - ).subscribe(response => { - this.requestInProgressService.setRequestInProgress(false); - this.distributionTargetsSelected = response.distributionTargets; - this.distributionTargetsSelectedClone = Object.assign([], this.distributionTargetsSelected); - this.distributionTargetsClone = Object.assign([], this.distributionTargetsLeft); - this.notificationsService.showToast( - NOTIFICATION_TYPES.SUCCESS_ALERT_8, - new Map([['workbasketName', this.workbasket.name]]) - ); - return true; - }, - error => { - this.notificationsService.triggerError(NOTIFICATION_TYPES.SAVE_ERR_3, error); - this.requestInProgressService.setRequestInProgress(false); - return false; - }); - return false; - } - - onClear() { - this.notificationsService.showToast(NOTIFICATION_TYPES.INFO_ALERT); - this.distributionTargetsLeft = Object.assign([], this.distributionTargetsClone); - this.distributionTargetsRight = Object.assign([], this.distributionTargetsSelectedClone); - this.distributionTargetsSelected = Object.assign([], this.distributionTargetsSelectedClone); - } - - performFilter(dualListFilter: any) { - this.fillDistributionTargets(dualListFilter.side, undefined); - this.onRequest(false, dualListFilter.side); - this.workbasketFilterSubscription = this.workbasketService.getWorkBasketsSummary(true, '', '', '', - dualListFilter.filterBy.filterParams.name, dualListFilter.filterBy.filterParams.description, '', - dualListFilter.filterBy.filterParams.owner, dualListFilter.filterBy.filterParams.type, '', - dualListFilter.filterBy.filterParams.key, '', true) - .subscribe(resultList => { - this.fillDistributionTargets(dualListFilter.side, (resultList.workbaskets)); - this.onRequest(true, dualListFilter.side); - }); - } - - ngOnDestroy(): void { - if (this.distributionTargetsSubscription) { this.distributionTargetsSubscription.unsubscribe(); } - if (this.workbasketSubscription) { this.workbasketSubscription.unsubscribe(); } - if (this.workbasketFilterSubscription) { this.workbasketFilterSubscription.unsubscribe(); } - if (this.savingDistributionTargetsSubscription) { this.savingDistributionTargetsSubscription.unsubscribe(); } - if (this.orientationSubscription) { this.orientationSubscription.unsubscribe(); } - } - - private init() { + init() { this.onRequest(); if (!this.workbasket._links.distributionTargets) { return; } - this.distributionTargetsSubscription = this.workbasketService.getWorkBasketsDistributionTargets( - this.workbasket._links.distributionTargets.href - ).subscribe( - (distributionTargetsSelectedResource: WorkbasketDistributionTargetsResource) => { - this.distributionTargetsSelectedResource = distributionTargetsSelectedResource; - this.distributionTargetsSelected = distributionTargetsSelectedResource.distributionTargets; - this.distributionTargetsSelectedClone = Object.assign([], this.distributionTargetsSelected); - TaskanaQueryParameters.page = 1; - this.calculateNumberItemsList(); - this.getWorkbaskets(); - } - ); - this.savingDistributionTargetsSubscription = this.savingWorkbaskets.triggeredDistributionTargetsSaving() + this.store.dispatch(new GetWorkbasketDistributionTargets(this.workbasket._links.distributionTargets.href)); + this.savingWorkbaskets.triggeredDistributionTargetsSaving() + .pipe(takeUntil(this.destroy$)) .subscribe((savingInformation: SavingInformation) => { if (this.action === ACTION.COPY) { this.distributionTargetsSelectedResource._links.self.href = savingInformation.url; @@ -192,47 +129,25 @@ export class WorkbasketDistributionTargetsComponent implements OnChanges, OnDest } }); - this.orientationSubscription = this.orientationService.getOrientation().subscribe((orientation: Orientation) => { - this.calculateNumberItemsList(); - this.getWorkbaskets(); - }); + this.orientationService.getOrientation() + .pipe(takeUntil(this.destroy$)) + .subscribe(() => { + this.calculateNumberItemsList(); + this.getWorkbaskets(); + }); } - private calculateNumberItemsList() { - if (this.panelBody) { - const cardHeight = 72; - const unusedHeight = 100; - this.cards = this.orientationService.calculateNumberItemsList( - this.panelBody.nativeElement.offsetHeight, cardHeight, unusedHeight, true - ) + 1; // TODO: warum +1 - } - } - - private fillDistributionTargets(side: Side, workbaskets: WorkbasketSummary[]) { - this.distributionTargetsLeft = side === Side.LEFT ? workbaskets : this.distributionTargetsLeft; - this.distributionTargetsRight = side === Side.RIGHT ? workbaskets : this.distributionTargetsRight; - } - - private getNextPage(side: Side) { - TaskanaQueryParameters.page += 1; - this.getWorkbaskets(side); - } - - private getWorkbaskets(side?: Side) { - if (!this.distributionTargetsLeft) { - this.distributionTargetsLeft = []; - } - if (!this.distributionTargetsRight) { - this.distributionTargetsRight = []; - } + getWorkbaskets(side?: Side) { if (this.distributionTargetsSelected && !this.initialized) { this.initialized = true; TaskanaQueryParameters.pageSize = this.cards + this.distributionTargetsSelected.length; } - this.workbasketSubscription = this.workbasketService.getWorkBasketsSummary(true) + // TODO: Implement this into NGXS + this.workbasketService.getWorkBasketsSummary(true) + .pipe(takeUntil(this.destroy$)) .subscribe( - (distributionTargetsAvailable: WorkbasketSummaryResource) => { + (distributionTargetsAvailable: WorkbasketSummaryRepresentation) => { if (TaskanaQueryParameters.page === 1) { this.distributionTargetsLeft = []; this.page = distributionTargetsAvailable.page; @@ -251,17 +166,121 @@ export class WorkbasketDistributionTargetsComponent implements OnChanges, OnDest ); } - private setBadge() { + performFilter(dualListFilter: any) { + this.fillDistributionTargets(dualListFilter.side, undefined); + this.onRequest(false, dualListFilter.side); + this.store.dispatch(new GetWorkbasketsSummary(true, '', '', '', + dualListFilter.filterBy.filterParams.name, dualListFilter.filterBy.filterParams.description, '', + dualListFilter.filterBy.filterParams.owner, dualListFilter.filterBy.filterParams.type, '', + dualListFilter.filterBy.filterParams.key, '', true)).subscribe((state: WorkbasketStateModel) => { + this.fillDistributionTargets(dualListFilter.side, state.paginatedWorkbasketsSummary.workbaskets); + this.onRequest(true, dualListFilter.side); + }); + } + + onSave() { + this.requestInProgressService.setRequestInProgress(true); + this.store.dispatch(new UpdateWorkbasketDistributionTargets( + this.distributionTargetsSelectedResource._links.self.href, + this.getSeletedIds() + )).subscribe(() => { + this.requestInProgressService.setRequestInProgress(false); + return true; + }, error => { + this.requestInProgressService.setRequestInProgress(false); + return false; + }); + /* TODO: OLD IMPLEMENTATION, KEPT HERE FOR REFERENCE + this.workbasketService.updateWorkBasketsDistributionTargets( + this.distributionTargetsSelectedResource._links.self.href, this.getSeletedIds() + ).subscribe(response => { + this.requestInProgressService.setRequestInProgress(false); + this.distributionTargetsSelected = response.distributionTargets; + this.distributionTargetsSelectedClone = Object.assign([], this.distributionTargetsSelected); + this.distributionTargetsClone = Object.assign([], this.distributionTargetsLeft); + this.notificationsService.showToast( + NOTIFICATION_TYPES.SUCCESS_ALERT_8, + new Map([['workbasketName', this.workbasket.name]]) + ); + return true; + }, + error => { + this.notificationsService.triggerError(NOTIFICATION_TYPES.SAVE_ERR_3, error); + this.requestInProgressService.setRequestInProgress(false); + return false; + }); + */ + return false; + } + + moveDistributionTargets(side: number) { + if (side === Side.LEFT) { + const itemsLeft = this.distributionTargetsLeft.length; + const itemsRight = this.distributionTargetsRight.length; + const itemsSelected = this.getSelectedItems(this.distributionTargetsLeft); + this.distributionTargetsSelected = [...this.distributionTargetsSelected, ...itemsSelected]; + this.distributionTargetsRight = this.distributionTargetsRight.concat(itemsSelected); + if (((itemsLeft - itemsSelected.length) <= TaskanaQueryParameters.pageSize) && ((itemsLeft + itemsRight) < this.page.totalElements)) { + this.getNextPage(side); + } + this.unselectItems(this.distributionTargetsSelected); + } else { + const itemsSelected = this.getSelectedItems(this.distributionTargetsRight); + this.distributionTargetsSelected = this.removeSelectedItems(this.distributionTargetsSelected, itemsSelected); + this.distributionTargetsRight = this.removeSelectedItems(this.distributionTargetsRight, itemsSelected); + this.distributionTargetsLeft = this.distributionTargetsLeft.concat(itemsSelected); + this.unselectItems(itemsSelected); + } + } + + onClear() { + this.notificationsService.showToast(NOTIFICATION_TYPES.INFO_ALERT); + this.distributionTargetsLeft = Object.assign([], this.distributionTargetsClone); + this.distributionTargetsRight = Object.assign([], this.distributionTargetsSelectedClone); + this.distributionTargetsSelected = Object.assign([], this.distributionTargetsSelectedClone); + } + + calculateNumberItemsList() { + if (this.panelBody) { + const cardHeight = 72; + const unusedHeight = 100; + this.cards = this.orientationService.calculateNumberItemsList( + this.panelBody.nativeElement.offsetHeight, cardHeight, unusedHeight, true + ) + 1; // TODO: warum +1 + } + } + + fillDistributionTargets(side: Side, workbaskets: WorkbasketSummary[]) { + this.distributionTargetsLeft = side === Side.LEFT ? workbaskets : this.distributionTargetsLeft; + this.distributionTargetsRight = side === Side.RIGHT ? workbaskets : this.distributionTargetsRight; + } + + getNextPage(side: Side) { + TaskanaQueryParameters.page += 1; + this.getWorkbaskets(side); + } + + setBadge() { if (this.action === ACTION.COPY) { this.badgeMessage = `Copying workbasket: ${this.workbasket.key}`; } } - private getSelectedItems(originList: any): Array { + getSelectedItems(originList: any): Array { return originList.filter((item: any) => (item.selected === true)); } - private removeSelectedItems(originList: any, selectedItemList) { + unselectItems(originList: any): Array { + // eslint-disable-next-line no-restricted-syntax + for (const item of originList) { + if (item.selected && item.selected === true) { + item.selected = false; + } + } + return originList; + } + + removeSelectedItems(originList: any, selectedItemList) { for (let index = originList.length - 1; index >= 0; index--) { if (selectedItemList.some(itemToRemove => (originList[index].workbasketId === itemToRemove.workbasketId))) { originList.splice(index, 1); @@ -270,7 +289,7 @@ export class WorkbasketDistributionTargetsComponent implements OnChanges, OnDest return originList; } - private onRequest(finished: boolean = false, side?: Side) { + onRequest(finished: boolean = false, side?: Side) { this.loadingItems = false; const inProgress = !finished; switch (side) { @@ -284,7 +303,7 @@ export class WorkbasketDistributionTargetsComponent implements OnChanges, OnDest } } - private getSeletedIds(): Array { + getSeletedIds(): Array { const distributionTargetsSelelected: Array = []; this.distributionTargetsSelected.forEach(item => { distributionTargetsSelelected.push(item.workbasketId); @@ -296,4 +315,9 @@ export class WorkbasketDistributionTargetsComponent implements OnChanges, OnDest if (side === Side.LEFT && this.selectAllLeft) { this.selectAllLeft = false; } if (side === Side.RIGHT && this.selectAllRight) { this.selectAllRight = false; } } + + ngOnDestroy() { + this.destroy$.next(); + this.destroy$.complete(); + } } diff --git a/web/src/app/administration/components/workbasket-dual-list/workbasket-dual-list.component.html b/web/src/app/administration/components/workbasket-dual-list/workbasket-dual-list.component.html index 921ae5036..3613ba204 100644 --- a/web/src/app/administration/components/workbasket-dual-list/workbasket-dual-list.component.html +++ b/web/src/app/administration/components/workbasket-dual-list/workbasket-dual-list.component.html @@ -1,44 +1,57 @@
-
-
- -
-
-
{{header}}
-
-
- -
-
-
- -
- -
-
    -
  • -
    -
    - -
    -
    -
    {{distributionTarget.name}}, - {{distributionTarget.key}} -
    -
    {{distributionTarget.description}}  
    -
    {{distributionTarget.owner}}  
    -
    -
    -
    • -
  • - -
    • -
-
+ +
+
+
+ +
+
+
{{header}}
+
+
+ +
+
+ +
+ +
+ +
+ + +
+
    +
  • +
    +
    + +
    +
    +
    {{distributionTarget.name}}, + {{distributionTarget.key}} +
    +
    {{distributionTarget.description}}  
    +
    {{distributionTarget.owner}}  
    +
    +
    +
    • +
  • + +
    • +
+
diff --git a/web/src/app/administration/components/workbasket-dual-list/workbasket-dual-list.component.ts b/web/src/app/administration/components/workbasket-dual-list/workbasket-dual-list.component.ts index 8ad60c2c9..b4fc31a79 100644 --- a/web/src/app/administration/components/workbasket-dual-list/workbasket-dual-list.component.ts +++ b/web/src/app/administration/components/workbasket-dual-list/workbasket-dual-list.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; +import { Component, OnInit, Input, Output, EventEmitter, OnChanges, SimpleChanges } from '@angular/core'; import { WorkbasketSummary } from 'app/shared/models/workbasket-summary'; import { Filter } from 'app/shared/models/filter'; import { expandDown } from 'theme/animations/expand.animation'; @@ -11,8 +11,8 @@ import { Side } from '../workbasket-distribution-targets/workbasket-distribution animations: [expandDown] }) export class WorkbasketDualListComponent implements OnInit { - @Input() distributionTargets: Array; - @Input() distributionTargetsSelected: Array; + @Input() distributionTargets: WorkbasketSummary[]; + @Input() distributionTargetsSelected: WorkbasketSummary[]; @Output() performDualListFilter = new EventEmitter<{ filterBy: Filter, side: Side }>(); @Input() requestInProgress = false; @Input() loadingItems ? = false; diff --git a/web/src/app/administration/components/workbasket-information/workbasket-information.component.html b/web/src/app/administration/components/workbasket-information/workbasket-information.component.html index cb7e7aa6e..772ca00d6 100644 --- a/web/src/app/administration/components/workbasket-information/workbasket-information.component.html +++ b/web/src/app/administration/components/workbasket-information/workbasket-information.component.html @@ -5,7 +5,7 @@ -
+
+
+ +
+ +
- + @@ -55,11 +61,15 @@
+ +
+ +
@@ -97,7 +107,7 @@
-
+
diff --git a/web/src/app/administration/components/workbasket-information/workbasket-information.component.spec.ts b/web/src/app/administration/components/workbasket-information/workbasket-information.component.spec.ts index 8f973957a..f4ff5f278 100644 --- a/web/src/app/administration/components/workbasket-information/workbasket-information.component.spec.ts +++ b/web/src/app/administration/components/workbasket-information/workbasket-information.component.spec.ts @@ -4,20 +4,18 @@ import { FormsModule } from '@angular/forms'; import { AngularSvgIconModule } from 'angular-svg-icon'; import { HttpClientModule } from '@angular/common/http'; import { RouterTestingModule } from '@angular/router/testing'; -import { of } from 'rxjs'; import { Component } from '@angular/core'; import { Routes } from '@angular/router'; import { Workbasket } from 'app/shared/models/workbasket'; import { ICONTYPES } from 'app/shared/models/icon-types'; -import { ACTION } from 'app/shared/models/action'; +import { Links } from 'app/shared/models/links'; import { SavingWorkbasketService } from 'app/administration/services/saving-workbaskets.service'; import { RequestInProgressService } from 'app/shared/services/request-in-progress/request-in-progress.service'; import { configureTests } from 'app/app.test.configuration'; import { FormsValidatorService } from 'app/shared/services/forms-validator/forms-validator.service'; -import { NgxsModule, Store } from '@ngxs/store'; -import { EngineConfigurationSelectors } from 'app/shared/store/engine-configuration-store/engine-configuration.selectors'; +import { NgxsModule } from '@ngxs/store'; import { WorkbasketInformationComponent } from './workbasket-information.component'; import { NotificationService } from '../../../shared/services/notifications/notification.service'; @@ -43,29 +41,50 @@ describe('WorkbasketInformationComponent', () => { let requestInProgressService; let formsValidatorService; - const storeSpy: jasmine.SpyObj = jasmine.createSpyObj('Store', ['select']); - const configure = (testBed: TestBed) => { testBed.configureTestingModule({ declarations: [WorkbasketInformationComponent, DummyDetailComponent], - imports: [FormsModule, AngularSvgIconModule, HttpClientModule, RouterTestingModule.withRoutes(routes), NgxsModule.forRoot()], + imports: [FormsModule, AngularSvgIconModule, HttpClientModule, RouterTestingModule.withRoutes(routes), + NgxsModule.forRoot()], providers: [WorkbasketService, NotificationService, SavingWorkbasketService, - RequestInProgressService, FormsValidatorService, { provide: Store, useValue: storeSpy }] + RequestInProgressService, FormsValidatorService] }); }; + function createWorkbasket(workbasketId?, created?, key?, domain?, type?, modified?, name?, description?, + owner?, custom1?, custom2?, custom3?, custom4?, orgLevel1?, orgLevel2?, orgLevel3?, orgLevel4?, + _links?: Links, markedForDeletion?: boolean) { + if (!type) { + // eslint-disable-next-line no-param-reassign + type = 'PERSONAL'; + } + const workbasket: Workbasket = { + workbasketId, + created, + key, + domain, + type, + modified, + name, + description, + owner, + custom1, + custom2, + custom3, + custom4, + orgLevel1, + orgLevel2, + orgLevel3, + orgLevel4, + markedForDeletion, + _links + }; + return workbasket; + } + beforeEach(done => { configureTests(configure).then(testBed => { - storeSpy.select.and.callFake(selector => { - switch (selector) { - case EngineConfigurationSelectors.workbasketsCustomisation: - return of({ information: {} }); - default: - return of(); - } - }); - fixture = testBed.createComponent(WorkbasketInformationComponent); component = fixture.componentInstance; debugElement = fixture.debugElement.nativeElement; @@ -83,6 +102,7 @@ describe('WorkbasketInformationComponent', () => { }); afterEach(() => { + fixture.destroy(); document.body.removeChild(debugElement); }); @@ -90,21 +110,8 @@ describe('WorkbasketInformationComponent', () => { expect(component).toBeTruthy(); }); - it('should create a panel with heading and form with all fields', async(() => { - component.workbasket = new Workbasket('id', 'created', 'keyModified', 'domain', ICONTYPES.TOPIC, - 'modified', 'name', 'description', 'owner', 'custom1', 'custom2', 'custom3', 'custom4', - 'orgLevel1', 'orgLevel2', 'orgLevel3', 'orgLevel4', null); - fixture.detectChanges(); - expect(debugElement.querySelector('#wb-information')).toBeDefined(); - expect(debugElement.querySelector('#wb-information > .panel-heading > h4').textContent.trim()).toBe('name'); - expect(debugElement.querySelectorAll('#wb-information > .panel-body > form').length).toBe(1); - fixture.whenStable().then(() => { - expect(debugElement.querySelector('#wb-information > .panel-body > form > div > div > input ').value).toBe('keyModified'); - }); - })); - it('selectType should set workbasket.type to personal with 0 and group in other case', () => { - component.workbasket = new Workbasket('id1'); + component.workbasket = createWorkbasket('id1'); expect(component.workbasket.type).toEqual('PERSONAL'); component.selectType(ICONTYPES.GROUP); expect(component.workbasket.type).toEqual('GROUP'); @@ -112,7 +119,7 @@ describe('WorkbasketInformationComponent', () => { it('should create a copy of workbasket when workbasket is selected', () => { expect(component.workbasketClone).toBeUndefined(); - component.workbasket = new Workbasket('id', 'created', 'keyModified', 'domain', ICONTYPES.TOPIC, 'modified', 'name', 'description', + component.workbasket = createWorkbasket('id', 'created', 'keyModified', 'domain', ICONTYPES.TOPIC, 'modified', 'name', 'description', 'owner', 'custom1', 'custom2', 'custom3', 'custom4', 'orgLevel1', 'orgLevel2', 'orgLevel3', 'orgLevel4'); component.ngOnChanges( undefined @@ -120,95 +127,4 @@ describe('WorkbasketInformationComponent', () => { fixture.detectChanges(); expect(component.workbasket.workbasketId).toEqual(component.workbasketClone.workbasketId); }); - - it('should reset requestInProgress after saving request is done', async(() => { - component.workbasket = new Workbasket('id', 'created', 'keyModified', 'domain', ICONTYPES.TOPIC, 'modified', 'name', 'description', - 'owner', 'custom1', 'custom2', 'custom3', 'custom4', 'orgLevel1', 'orgLevel2', - 'orgLevel3', 'orgLevel4', { self: { href: 'someUrl' } }); - fixture.detectChanges(); - spyOn(workbasketService, 'updateWorkbasket').and.returnValue(of(component.workbasket)); - spyOn(workbasketService, 'triggerWorkBasketSaved').and.returnValue(of(component.workbasket)); - component.onSubmit(); - expect(component.requestInProgress).toBeFalsy(); - })); - - it('should trigger triggerWorkBasketSaved method after saving request is done', async(() => { - component.workbasket = new Workbasket('id', 'created', 'keyModified', 'domain', ICONTYPES.TOPIC, 'modified', 'name', 'description', - 'owner', 'custom1', 'custom2', 'custom3', 'custom4', 'orgLevel1', 'orgLevel2', - 'orgLevel3', 'orgLevel4', { self: { href: 'someurl' } }); - spyOn(workbasketService, 'updateWorkbasket').and.returnValue(of(component.workbasket)); - spyOn(workbasketService, 'triggerWorkBasketSaved').and.returnValue(of(component.workbasket)); - fixture.detectChanges(); - - spyOn(formsValidatorService, 'validateFormAccess').and.returnValue(Promise.resolve(true)); - component.onSubmit(); - fixture.whenStable().then(() => { - fixture.detectChanges(); - expect(workbasketService.triggerWorkBasketSaved).toHaveBeenCalled(); - }); - })); - - it('should post a new workbasket when no workbasketId is defined and update workbasket', async(() => { - component.workbasket = new Workbasket(undefined, 'created', 'keyModified', 'domain', ICONTYPES.TOPIC, 'modified', 'name', 'description', - 'owner', 'custom1', 'custom2', 'custom3', 'custom4', 'orgLevel1', 'orgLevel2', - 'orgLevel3', 'orgLevel4', {}); - spyOn(workbasketService, 'createWorkbasket').and.returnValue(of( - new Workbasket('someNewId', 'created', 'keyModified', 'domain', ICONTYPES.TOPIC, 'modified', 'name', 'description', - 'owner', 'custom1', 'custom2', 'custom3', 'custom4', 'orgLevel1', 'orgLevel2', - 'orgLevel3', 'orgLevel4', {}) - )); - fixture.detectChanges(); - spyOn(formsValidatorService, 'validateFormAccess').and.returnValue(Promise.resolve(true)); - component.onSubmit(); - fixture.whenStable().then(() => { - fixture.detectChanges(); - expect(alertService.showToast).toHaveBeenCalled(); - expect(component.workbasket.workbasketId).toBe('someNewId'); - }); - })); - - it('should post a new workbasket, new distribution targets and new access ' - + 'items when no workbasketId is defined and action is copy', async(() => { - component.workbasket = new Workbasket(undefined, 'created', 'keyModified', 'domain', ICONTYPES.TOPIC, - 'modified', 'name', 'description', 'owner', 'custom1', 'custom2', - 'custom3', 'custom4', 'orgLevel1', 'orgLevel2', - 'orgLevel3', 'orgLevel4', {}); - component.action = ACTION.COPY; - - spyOn(workbasketService, 'createWorkbasket').and.returnValue(of( - new Workbasket('someNewId', 'created', 'keyModified', 'domain', ICONTYPES.TOPIC, 'modified', 'name', 'description', - 'owner', 'custom1', 'custom2', 'custom3', 'custom4', 'orgLevel1', 'orgLevel2', - 'orgLevel3', 'orgLevel4', { distributionTargets: { href: 'someurl' }, accessItems: { href: 'someurl' } }) - )); - - spyOn(savingWorkbasketService, 'triggerDistributionTargetSaving'); - spyOn(savingWorkbasketService, 'triggerAccessItemsSaving'); - fixture.detectChanges(); - spyOn(formsValidatorService, 'validateFormAccess').and.returnValue(Promise.resolve(true)); - component.onSubmit(); - fixture.whenStable().then(() => { - fixture.detectChanges(); - expect(alertService.showToast).toHaveBeenCalled(); - expect(component.workbasket.workbasketId).toBe('someNewId'); - expect(savingWorkbasketService.triggerDistributionTargetSaving).toHaveBeenCalled(); - expect(savingWorkbasketService.triggerAccessItemsSaving).toHaveBeenCalled(); - }); - })); - - it('should trigger requestInProgress service true before and requestInProgress false after remove a workbasket', () => { - component.workbasket = new Workbasket(undefined, 'created', 'keyModified', 'domain', ICONTYPES.TOPIC, - 'modified', 'name', 'description', 'owner', 'custom1', 'custom2', - 'custom3', 'custom4', 'orgLevel1', 'orgLevel2', - 'orgLevel3', 'orgLevel4', { removeDistributionTargets: { href: 'someurl' } }); - spyOn(workbasketService, 'removeDistributionTarget').and.returnValue(of(undefined)); - const requestInProgressServiceSpy = spyOn(requestInProgressService, 'setRequestInProgress'); - - component.removeDistributionTargets(); - expect(requestInProgressServiceSpy).toHaveBeenCalledWith(true); - workbasketService.removeDistributionTarget().subscribe(() => { - - }, () => { }, () => { - expect(requestInProgressServiceSpy).toHaveBeenCalledWith(false); - }); - }); }); diff --git a/web/src/app/administration/components/workbasket-information/workbasket-information.component.ts b/web/src/app/administration/components/workbasket-information/workbasket-information.component.ts index d111c91cf..3a9554aa3 100644 --- a/web/src/app/administration/components/workbasket-information/workbasket-information.component.ts +++ b/web/src/app/administration/components/workbasket-information/workbasket-information.component.ts @@ -6,9 +6,9 @@ import { Component, SimpleChanges, ViewChild } from '@angular/core'; import { ActivatedRoute, Router } from '@angular/router'; -import { Observable, Subscription } from 'rxjs'; +import { Observable, Subject, Subscription } from 'rxjs'; import { NgForm } from '@angular/forms'; -import { Select } from '@ngxs/store'; +import { Select, Store } from '@ngxs/store'; import { ICONTYPES } from 'app/shared/models/icon-types'; import { ACTION } from 'app/shared/models/action'; @@ -19,13 +19,16 @@ import { SavingWorkbasketService, SavingInformation } from 'app/administration/s import { WorkbasketService } from 'app/shared/services/workbasket/workbasket.service'; import { RequestInProgressService } from 'app/shared/services/request-in-progress/request-in-progress.service'; import { FormsValidatorService } from 'app/shared/services/forms-validator/forms-validator.service'; -import { map } from 'rxjs/operators'; +import { map, takeUntil } from 'rxjs/operators'; import { EngineConfigurationSelectors } from 'app/shared/store/engine-configuration-store/engine-configuration.selectors'; import { NOTIFICATION_TYPES } from '../../../shared/models/notifications'; import { NotificationService } from '../../../shared/services/notifications/notification.service'; import { CustomField, getCustomFields, WorkbasketsCustomisation } from '../../../shared/models/customisation'; +import { CopyWorkbasket, MarkWorkbasketForDeletion, + RemoveDistributionTarget, SaveNewWorkbasket, + UpdateWorkbasket } from '../../../shared/store/workbasket-store/workbasket.actions'; @Component({ selector: 'taskana-administration-workbasket-information', @@ -37,24 +40,24 @@ implements OnInit, OnChanges, OnDestroy { @Input() workbasket: Workbasket; - workbasketClone: Workbasket; - workbasketErrors; @Input() action: ACTION; + @ViewChild('WorkbasketForm', { static: false }) + workbasketForm: NgForm; + + workbasketClone: Workbasket; allTypes: Map; requestInProgress = false; badgeMessage = ''; - - @Select(EngineConfigurationSelectors.workbasketsCustomisation) workbasketsCustomisation$: Observable; - customFields$: Observable; - toogleValidationMap = new Map(); + lookupField = false; - private workbasketSubscription: Subscription; - private routeSubscription: Subscription; - @ViewChild('WorkbasketForm', { static: false }) - workbasketForm: NgForm; + @Select(EngineConfigurationSelectors.workbasketsCustomisation) + workbasketsCustomisation$: Observable; + + customFields$: Observable; + destroy$ = new Subject(); constructor( private workbasketService: WorkbasketService, @@ -63,11 +66,12 @@ implements OnInit, OnChanges, OnDestroy { private savingWorkbasket: SavingWorkbasketService, private requestInProgressService: RequestInProgressService, private formsValidatorService: FormsValidatorService, - private notificationService: NotificationService + private notificationService: NotificationService, + private store: Store ) { } - ngOnInit(): void { + ngOnInit() { this.allTypes = new Map([ ['PERSONAL', 'Personal'], ['GROUP', 'Group'], @@ -78,9 +82,16 @@ implements OnInit, OnChanges, OnDestroy { map(customisation => customisation.information), getCustomFields(customFieldCount) ); + this.workbasketsCustomisation$ + .pipe(takeUntil(this.destroy$)) + .subscribe(workbasketsCustomization => { + if (workbasketsCustomization.information.owner) { + this.lookupField = workbasketsCustomization.information.owner.lookupField; + } + }); } - ngOnChanges(changes: SimpleChanges): void { + ngOnChanges(changes: SimpleChanges) { this.workbasketClone = { ...this.workbasket }; if (this.action === ACTION.CREATE) { this.badgeMessage = 'Creating new workbasket'; @@ -108,7 +119,7 @@ implements OnInit, OnChanges, OnDestroy { return this.formsValidatorService.isFieldValid(this.workbasketForm, field); } - onClear() { + onUndo() { this.formsValidatorService.formSubmitAttempt = false; this.notificationService.showToast(NOTIFICATION_TYPES.INFO_ALERT); this.workbasket = { ...this.workbasketClone }; @@ -122,32 +133,11 @@ implements OnInit, OnChanges, OnDestroy { } copyWorkbasket() { - this.router.navigate([{ outlets: { detail: ['copy-workbasket'] } }], { - relativeTo: this.route.parent - }); + this.store.dispatch(new CopyWorkbasket(this.workbasket)); } removeDistributionTargets() { - this.requestInProgressService.setRequestInProgress(true); - this.workbasketService - .removeDistributionTarget( - this.workbasket._links.removeDistributionTargets.href - ) - .subscribe( - reponse => { - this.requestInProgressService.setRequestInProgress(false); - this.notificationService.showToast( - NOTIFICATION_TYPES.SUCCESS_ALERT_9, - new Map([['workbasketId', this.workbasket.workbasketId]]) - ); - }, - error => { - this.notificationService.triggerError(NOTIFICATION_TYPES.REMOVE_ERR_2, - error, - new Map([['workbasketId', this.workbasket.workbasketId]])); - this.requestInProgressService.setRequestInProgress(false); - } - ); + this.store.dispatch(new RemoveDistributionTarget(this.workbasket._links.removeDistributionTargets.href)); } private onSave() { @@ -156,24 +146,11 @@ implements OnInit, OnChanges, OnDestroy { this.postNewWorkbasket(); return; } - - this.workbasketSubscription = this.workbasketService - .updateWorkbasket(this.workbasket._links.self.href, this.workbasket) - .subscribe( - workbasketUpdated => { - this.afterRequest(); - this.workbasket = workbasketUpdated; - this.workbasketClone = { ...this.workbasket }; - this.notificationService.showToast( - NOTIFICATION_TYPES.SUCCESS_ALERT_10, - new Map([['workbasketKey', workbasketUpdated.key]]) - ); - }, - error => { - this.afterRequest(); - this.notificationService.triggerError(NOTIFICATION_TYPES.SAVE_ERR_4, error); - } - ); + this.store.dispatch(new UpdateWorkbasket(this.workbasket._links.self.href, this.workbasket)) + .subscribe(state => { + this.requestInProgressService.setRequestInProgress(false); + this.workbasketClone = { ...this.workbasket }; + }); } private beforeRequest() { @@ -187,19 +164,9 @@ implements OnInit, OnChanges, OnDestroy { private postNewWorkbasket() { this.addDateToWorkbasket(); - this.workbasketService.createWorkbasket(this.workbasket).subscribe( - (workbasketUpdated: Workbasket) => { - this.notificationService.showToast( - NOTIFICATION_TYPES.SUCCESS_ALERT_11, - new Map([['workbasketKey', workbasketUpdated.key]]) - ); - this.workbasket = workbasketUpdated; + this.store.dispatch(new SaveNewWorkbasket(this.workbasket)).subscribe( + () => { this.afterRequest(); - this.workbasketService.triggerWorkBasketSaved(); - this.workbasketService.selectWorkBasket(this.workbasket.workbasketId); - this.router.navigate([`../${this.workbasket.workbasketId}`], { - relativeTo: this.route - }); if (this.action === ACTION.COPY) { this.savingWorkbasket.triggerDistributionTargetSaving( new SavingInformation( @@ -214,10 +181,6 @@ implements OnInit, OnChanges, OnDestroy { ) ); } - }, - error => { - this.notificationService.triggerError(NOTIFICATION_TYPES.CREATE_ERR_2, error); - this.requestInProgressService.setRequestInProgress(false); } ); } @@ -229,38 +192,18 @@ implements OnInit, OnChanges, OnDestroy { } private onRemoveConfirmed() { - this.requestInProgressService.setRequestInProgress(true); - this.workbasketService - .markWorkbasketForDeletion(this.workbasket._links.self.href) - .subscribe( - response => { - this.requestInProgressService.setRequestInProgress(false); - this.workbasketService.triggerWorkBasketSaved(); - if (response.status === 202) { - this.notificationService.triggerError(NOTIFICATION_TYPES.MARK_ERR, - undefined, - new Map([['workbasketId', this.workbasket.workbasketId]])); - } else { - this.notificationService.showToast( - NOTIFICATION_TYPES.SUCCESS_ALERT_12, - new Map([['workbasketId', this.workbasket.workbasketId]]) - ); - } - this.router.navigate(['taskana/administration/workbaskets']); - } - ); - } - - ngOnDestroy() { - if (this.workbasketSubscription) { - this.workbasketSubscription.unsubscribe(); - } - if (this.routeSubscription) { - this.routeSubscription.unsubscribe(); - } + this.beforeRequest(); + this.store.dispatch(new MarkWorkbasketForDeletion(this.workbasket._links.self.href)).subscribe(() => { + this.afterRequest(); + }); } getWorkbasketCustomProperty(custom: number) { return `custom${custom}`; } + + ngOnDestroy() { + this.destroy$.next(); + this.destroy$.complete(); + } } diff --git a/web/src/app/administration/components/workbasket-list-toolbar/workbasket-list-toolbar.component.spec.ts b/web/src/app/administration/components/workbasket-list-toolbar/workbasket-list-toolbar.component.spec.ts index 64b4686e5..4efd469c2 100644 --- a/web/src/app/administration/components/workbasket-list-toolbar/workbasket-list-toolbar.component.spec.ts +++ b/web/src/app/administration/components/workbasket-list-toolbar/workbasket-list-toolbar.component.spec.ts @@ -9,8 +9,6 @@ import { HttpClientModule } from '@angular/common/http'; import { RouterTestingModule } from '@angular/router/testing'; import { SharedModule } from 'app/shared/shared.module'; import { AppModule } from 'app/app.module'; - -import { WorkbasketSummary } from 'app/shared/models/workbasket-summary'; import { Links } from 'app/shared/models/links'; import { Filter } from 'app/shared/models/filter'; import { Sorting } from 'app/shared/models/sorting'; @@ -23,6 +21,7 @@ import { WorkbasketDefinitionService } from 'app/administration/services/workbas import { configureTests } from 'app/app.test.configuration'; import { ImportExportService } from 'app/administration/services/import-export.service'; import { WorkbasketListToolbarComponent } from './workbasket-list-toolbar.component'; +import { ICONTYPES } from '../../../shared/models/icon-types'; @Component({ selector: 'taskana-dummy-detail', @@ -58,17 +57,20 @@ describe('WorkbasketListToolbarComponent', () => { }); }; configureTests(configure).then(testBed => { - fixture = testBed.createComponent(WorkbasketListToolbarComponent); - workbasketService = testBed.get(WorkbasketService); - router = testBed.get(Router); + fixture = TestBed.createComponent(WorkbasketListToolbarComponent); + workbasketService = TestBed.get(WorkbasketService); + router = TestBed.get(Router); spyOn(workbasketService, 'markWorkbasketForDeletion').and.returnValue(of('')); spyOn(workbasketService, 'triggerWorkBasketSaved'); debugElement = fixture.debugElement.nativeElement; component = fixture.componentInstance; - component.workbaskets = [ - new WorkbasketSummary('1', 'key1', 'NAME1', 'description 1', 'owner 1') - ]; + component.workbaskets = [{ workbasketId: '1', + key: 'key1', + name: 'NAME1', + description: 'description 1', + owner: 'owner 1', + type: ICONTYPES.PERSONAL }]; component.workbaskets[0].markedForDeletion = false; fixture.detectChanges(); @@ -84,12 +86,6 @@ describe('WorkbasketListToolbarComponent', () => { expect(component).toBeTruthy(); }); - it('should navigate to new-workbasket when click on add new workbasket', () => { - const spy = spyOn(router, 'navigate'); - component.addWorkbasket(); - expect(spy.calls.first().args[0][0].outlets.detail[0]).toBe('new-workbasket'); - }); - it('should emit performSorting when sorting is triggered', () => { let sort: Sorting; const compareSort = new Sorting(); diff --git a/web/src/app/administration/components/workbasket-list-toolbar/workbasket-list-toolbar.component.ts b/web/src/app/administration/components/workbasket-list-toolbar/workbasket-list-toolbar.component.ts index 9fcc5a34e..2c5a80269 100644 --- a/web/src/app/administration/components/workbasket-list-toolbar/workbasket-list-toolbar.component.ts +++ b/web/src/app/administration/components/workbasket-list-toolbar/workbasket-list-toolbar.component.ts @@ -3,14 +3,18 @@ import { ActivatedRoute, Router } from '@angular/router'; import { Sorting } from 'app/shared/models/sorting'; import { Filter } from 'app/shared/models/filter'; -import { Subscription } from 'rxjs'; import { WorkbasketSummary } from 'app/shared/models/workbasket-summary'; import { WorkbasketService } from 'app/shared/services/workbasket/workbasket.service'; import { TaskanaType } from 'app/shared/models/taskana-type'; import { expandDown } from 'theme/animations/expand.animation'; -import { NotificationService } from '../../../shared/services/notifications/notification.service'; -import { NOTIFICATION_TYPES } from '../../../shared/models/notifications'; +import { Select, Store } from '@ngxs/store'; +import { Location } from '@angular/common'; +import { Observable, Subject } from 'rxjs'; +import { takeUntil } from 'rxjs/operators'; +import { ACTION } from '../../../shared/models/action'; +import { CreateWorkbasket, SetActiveAction } from '../../../shared/store/workbasket-store/workbasket.actions'; +import { WorkbasketSelectors } from '../../../shared/store/workbasket-store/workbasket.selectors'; @Component({ selector: 'taskana-administration-workbasket-list-toolbar', @@ -23,7 +27,7 @@ export class WorkbasketListToolbarComponent implements OnInit { @Input() workbasketDefaultSortBy: string; @Output() performSorting = new EventEmitter(); @Output() performFilter = new EventEmitter(); - workbasketServiceSubscription: Subscription; + selectionToImport = TaskanaType.WORKBASKETS; sortingFields = new Map([['name', 'Name'], ['key', 'Key'], ['description', 'Description'], ['owner', 'Owner'], ['type', 'Type']]); filteringTypes = new Map([['ALL', 'All'], ['PERSONAL', 'Personal'], ['GROUP', 'Group'], @@ -33,15 +37,27 @@ export class WorkbasketListToolbarComponent implements OnInit { toolbarState = false; filterType = TaskanaType.WORKBASKETS; + @Select(WorkbasketSelectors.workbasketActiveAction) + workbasketActiveAction$: Observable; + + destroy$ = new Subject(); + action: ACTION; + constructor( private workbasketService: WorkbasketService, private route: ActivatedRoute, private router: Router, - private errors: NotificationService + private store: Store, + private location: Location ) { } ngOnInit() { + this.workbasketActiveAction$ + .pipe(takeUntil(this.destroy$)) + .subscribe(action => { + this.action = action; + }); } sorting(sort: Sorting) { @@ -53,7 +69,16 @@ export class WorkbasketListToolbarComponent implements OnInit { } addWorkbasket() { - this.workbasketService.selectWorkBasket(); - this.router.navigate([{ outlets: { detail: ['new-workbasket'] } }], { relativeTo: this.route }); + // this.store.dispatch(new SetActiveAction(ACTION.CREATE)); + if (this.action !== ACTION.CREATE) { + this.store.dispatch(new CreateWorkbasket()); + } + // this.workbasketService.selectWorkBasket(); + // this.router.navigate([{ outlets: { detail: ['new-workbasket'] } }], { relativeTo: this.route }); + } + + ngOnDestroy() { + this.destroy$.next(); + this.destroy$.complete(); } } diff --git a/web/src/app/administration/components/workbasket-list/workbasket-list.component.html b/web/src/app/administration/components/workbasket-list/workbasket-list.component.html index 08c7d2f40..7b587d453 100644 --- a/web/src/app/administration/components/workbasket-list/workbasket-list.component.html +++ b/web/src/app/administration/components/workbasket-list/workbasket-list.component.html @@ -1,15 +1,17 @@
- + +
-
+
    • -
  • +
  • @@ -36,5 +38,9 @@
- + + diff --git a/web/src/app/administration/components/workbasket-list/workbasket-list.component.spec.ts b/web/src/app/administration/components/workbasket-list/workbasket-list.component.spec.ts index 355ee4a08..8964b2892 100644 --- a/web/src/app/administration/components/workbasket-list/workbasket-list.component.spec.ts +++ b/web/src/app/administration/components/workbasket-list/workbasket-list.component.spec.ts @@ -8,8 +8,8 @@ import { Routes } from '@angular/router'; import { RouterTestingModule } from '@angular/router/testing'; import { WorkbasketSummary } from 'app/shared/models/workbasket-summary'; -import { WorkbasketSummaryResource } from 'app/shared/models/workbasket-summary-resource'; -import { Filter } from 'app/shared/models/filter'; +import { WorkbasketSummaryRepresentation } from 'app/shared/models/workbasket-summary-representation'; +import { LinksWorkbasketSummary } from 'app/shared/models/links-workbasket-summary'; import { ImportExportComponent } from 'app/administration/components/import-export/import-export.component'; @@ -20,6 +20,7 @@ import { OrientationService } from 'app/shared/services/orientation/orientation. import { configureTests } from 'app/app.test.configuration'; import { Page } from 'app/shared/models/page'; import { ImportExportService } from 'app/administration/services/import-export.service'; +import { NgxsModule } from '@ngxs/store'; import { WorkbasketListToolbarComponent } from '../workbasket-list-toolbar/workbasket-list-toolbar.component'; import { WorkbasketListComponent } from './workbasket-list.component'; @@ -31,7 +32,7 @@ class DummyDetailComponent { } @Component({ - selector: 'taskana-shared-pagination', + selector: 'taskana-pagination', template: 'dummydetail' }) class PaginationComponent { @@ -44,13 +45,32 @@ class PaginationComponent { @Output() changePage = new EventEmitter(); } -const workbasketSummaryResource: WorkbasketSummaryResource = new WorkbasketSummaryResource( - new Array( - new WorkbasketSummary('1', 'key1', 'NAME1', 'description 1', 'owner 1', '', '', 'PERSONAL', '', '', '', ''), - new WorkbasketSummary('2', 'key2', 'NAME2', 'description 2', 'owner 2', '', '', 'GROUP', '', '', '', '') - ), - {} -); +function createWorkbasketSummary(workbasketId, key, name, domain, type, description, owner, custom1, custom2, custom3, custom4) { + const workbasketSummary: WorkbasketSummary = { + workbasketId, + key, + name, + domain, + type, + description, + owner, + custom1, + custom2, + custom3, + custom4 + }; + return workbasketSummary; +} +const workbasketSummaryResource: WorkbasketSummaryRepresentation = { + workbaskets: [ + createWorkbasketSummary('1', 'key1', 'NAME1', '', 'PERSONAL', + 'description 1', 'owner1', '', '', '', ''), + createWorkbasketSummary('2', 'key2', 'NAME2', '', 'PERSONAL', + 'description 2', 'owner2', '', '', '', ''), + ], + _links: new LinksWorkbasketSummary({ href: 'url' }), + page: {} +}; describe('WorkbasketListComponent', () => { let component: WorkbasketListComponent; @@ -71,12 +91,13 @@ describe('WorkbasketListComponent', () => { WorkbasketListComponent, DummyDetailComponent, WorkbasketListToolbarComponent, - ImportExportComponent + ImportExportComponent, ], imports: [ AngularSvgIconModule, HttpClientModule, - RouterTestingModule.withRoutes(routes) + RouterTestingModule.withRoutes(routes), + NgxsModule.forRoot() ], providers: [ WorkbasketService, @@ -90,6 +111,13 @@ describe('WorkbasketListComponent', () => { configureTests(configure).then(testBed => { fixture = TestBed.createComponent(WorkbasketListComponent); component = fixture.componentInstance; + Object.defineProperty(component, 'workbasketsSummaryRepresentation$', { writable: true }); + const page = { + workbaskets: [], + _links: {}, + page: new Page(6, 3, 3, 1) + }; + component.workbasketsSummaryRepresentation$ = of(page); debugElement = fixture.debugElement.nativeElement; workbasketService = TestBed.get(WorkbasketService); const orientationService = TestBed.get(OrientationService); @@ -111,14 +139,6 @@ describe('WorkbasketListComponent', () => { expect(component).toBeTruthy(); }); - it('should call workbasketService.getWorkbasketsSummary method on init', () => { - component.ngOnInit(); - expect(workbasketService.getWorkBasketsSummary).toHaveBeenCalled(); - workbasketService.getWorkBasketsSummary().subscribe(value => { - expect(value).toBe(workbasketSummaryResource); - }); - }); - it('should have wb-action-toolbar, wb-search-bar, wb-list-container, wb-pagination,' + ' collapsedMenufilterWb and taskana-filter created in the html', () => { expect(debugElement.querySelector('#wb-action-toolbar')).toBeDefined(); @@ -127,27 +147,6 @@ describe('WorkbasketListComponent', () => { expect(debugElement.querySelector('#wb-list-container')).toBeDefined(); expect(debugElement.querySelector('#collapsedMenufilterWb')).toBeDefined(); expect(debugElement.querySelector('taskana-filter')).toBeDefined(); - expect(debugElement.querySelectorAll('#wb-list-container > li').length).toBe(3); - }); - - // it('should have two workbasketsummary rows created with the second one selected.', fakeAsync(() => { - // tick(0); - // fixture.detectChanges(); - // fixture.whenStable().then(() => { - // expect(debugElement.querySelectorAll('#wb-list-container > li').length).toBe(3); - // expect(debugElement.querySelectorAll('#wb-list-container > li')[1].getAttribute('class')) - // .toBe('list-group-item ng-star-inserted'); - // expect(debugElement.querySelectorAll('#wb-list-container > li')[2].getAttribute('class')) - // .toBe('list-group-item ng-star-inserted active'); - // }) - // - // })); - - it('should have two workbasketsummary rows created with two different icons: user and users', () => { - expect(debugElement.querySelectorAll('#wb-list-container > li')[1] - .querySelector('svg-icon').getAttribute('ng-reflect-src')).toBe('./assets/icons/user.svg'); - expect(debugElement.querySelectorAll('#wb-list-container > li')[2] - .querySelector('svg-icon').getAttribute('ng-reflect-src')).toBe('./assets/icons/users.svg'); }); it('should have rendered sort by: name, id, description, owner and type', () => { @@ -157,18 +156,4 @@ describe('WorkbasketListComponent', () => { expect(debugElement.querySelector('#sort-by-owner')).toBeDefined(); expect(debugElement.querySelector('#sort-by-type')).toBeDefined(); }); - - it('should have performRequest with forced = true after performFilter is triggered', (() => { - const filter = new Filter({ - name: 'someName', - owner: 'someOwner', - description: 'someDescription', - key: 'someKey', - type: 'PERSONAL' - }); - component.performFilter(filter); - - expect(workbasketSummarySpy.calls.all()[1].args).toEqual([true, 'name', 'asc', - '', 'someName', 'someDescription', '', 'someOwner', 'PERSONAL', '', 'someKey', '']); - })); }); diff --git a/web/src/app/administration/components/workbasket-list/workbasket-list.component.ts b/web/src/app/administration/components/workbasket-list/workbasket-list.component.ts index 62b1102c9..3b9bf6ba1 100644 --- a/web/src/app/administration/components/workbasket-list/workbasket-list.component.ts +++ b/web/src/app/administration/components/workbasket-list/workbasket-list.component.ts @@ -1,8 +1,7 @@ import { Component, ElementRef, OnDestroy, OnInit, ViewChild } from '@angular/core'; -import { ActivatedRoute, Router } from '@angular/router'; -import { Subscription } from 'rxjs'; +import { Observable, pipe, Subject, Subscription } from 'rxjs'; -import { WorkbasketSummaryResource } from 'app/shared/models/workbasket-summary-resource'; +import { WorkbasketSummaryRepresentation } from 'app/shared/models/workbasket-summary-representation'; import { WorkbasketSummary } from 'app/shared/models/workbasket-summary'; import { Filter } from 'app/shared/models/filter'; import { Sorting } from 'app/shared/models/sorting'; @@ -12,6 +11,12 @@ import { WorkbasketService } from 'app/shared/services/workbasket/workbasket.ser import { OrientationService } from 'app/shared/services/orientation/orientation.service'; import { TaskanaQueryParameters } from 'app/shared/util/query-parameters'; import { ImportExportService } from 'app/administration/services/import-export.service'; +import { Actions, ofActionCompleted, ofActionDispatched, Select, Store } from '@ngxs/store'; +import { takeUntil } from 'rxjs/operators'; +import { DeselectWorkbasket, GetWorkbasketsSummary, + SelectWorkbasket } from '../../../shared/store/workbasket-store/workbasket.actions'; +import { WorkbasketSelectors } from '../../../shared/store/workbasket-store/workbasket.selectors'; +import { Workbasket } from '../../../shared/models/workbasket'; @Component({ selector: 'taskana-administration-workbasket-list', @@ -20,15 +25,11 @@ import { ImportExportService } from 'app/administration/services/import-export.s }) export class WorkbasketListComponent implements OnInit, OnDestroy { selectedId = ''; - workbasketsResource: WorkbasketSummaryResource; - workbaskets: Array = []; requestInProgress = false; - pageSelected = 1; pageSize = 9; type = 'workbaskets'; cards: number = this.pageSize; - workbasketDefaultSortBy: string = 'name'; sort: Sorting = new Sorting(this.workbasketDefaultSortBy); filterBy: Filter = new Filter({ name: '', owner: '', type: '', description: '', key: '' }); @@ -36,47 +37,75 @@ export class WorkbasketListComponent implements OnInit, OnDestroy { @ViewChild('wbToolbar', { static: true }) private toolbarElement: ElementRef; - private workBasketSummarySubscription: Subscription; - private workbasketServiceSubscription: Subscription; - private workbasketServiceSavedSubscription: Subscription; - private orientationSubscription: Subscription; - private importingExportingSubscription: Subscription; + @Select(WorkbasketSelectors.workbasketsSummary) + workbasketsSummary$: Observable; + + @Select(WorkbasketSelectors.workbasketsSummaryRepresentation) + workbasketsSummaryRepresentation$: Observable; + + @Select(WorkbasketSelectors.selectedWorkbasket) + selectedWorkbasket$: Observable; + + destroy$ = new Subject(); constructor( + private store: Store, private workbasketService: WorkbasketService, - private router: Router, - private route: ActivatedRoute, private orientationService: OrientationService, - private importExportService: ImportExportService + private importExportService: ImportExportService, + private ngxsActions$: Actions, ) { + this.ngxsActions$.pipe(ofActionDispatched(GetWorkbasketsSummary), + takeUntil(this.destroy$)) + .subscribe(() => { + this.requestInProgress = true; + }); + this.ngxsActions$.pipe(ofActionCompleted(GetWorkbasketsSummary), + takeUntil(this.destroy$)) + .subscribe(() => { + this.requestInProgress = false; + }); } ngOnInit() { this.requestInProgress = true; - this.workbasketServiceSubscription = this.workbasketService.getSelectedWorkBasket().subscribe(workbasketIdSelected => { - // TODO should be done in a different way. - setTimeout(() => { - this.selectedId = workbasketIdSelected; - }, 0); - }); + + this.selectedWorkbasket$.pipe(takeUntil(this.destroy$)) + .subscribe(selectedWorkbasket => { + if (typeof selectedWorkbasket !== 'undefined') { + this.selectedId = selectedWorkbasket.workbasketId; + } else { + this.selectedId = undefined; + } + }); TaskanaQueryParameters.page = this.pageSelected; TaskanaQueryParameters.pageSize = this.pageSize; - this.workbasketServiceSavedSubscription = this.workbasketService.workbasketSavedTriggered().subscribe(value => { - this.performRequest(); - }); - this.orientationSubscription = this.orientationService.getOrientation().subscribe((orientation: Orientation) => { - this.refreshWorkbasketList(); - }); - this.importingExportingSubscription = this.importExportService.getImportingFinished().subscribe((value: Boolean) => { - this.refreshWorkbasketList(); - }); + this.workbasketService.workbasketSavedTriggered() + .pipe(takeUntil(this.destroy$)) + .subscribe(value => { + this.performRequest(); + }); + + this.orientationService.getOrientation() + .pipe(takeUntil(this.destroy$)) + .subscribe((orientation: Orientation) => { + this.refreshWorkbasketList(); + }); + this.importExportService.getImportingFinished() + .pipe(takeUntil(this.destroy$)) + .subscribe((value: Boolean) => { + this.refreshWorkbasketList(); + }); } selectWorkbasket(id: string) { - this.selectedId = id; - this.router.navigate([{ outlets: { detail: [this.selectedId] } }], { relativeTo: this.route }); + if (this.selectedId === id) { + this.store.dispatch(new DeselectWorkbasket()); + } else { + this.store.dispatch(new SelectWorkbasket(id)); + } } performSorting(sort: Sorting) { @@ -102,37 +131,14 @@ export class WorkbasketListComponent implements OnInit, OnDestroy { } private performRequest(): void { - TaskanaQueryParameters.pageSize = this.cards; - this.requestInProgress = true; - this.workbaskets = []; - this.workbasketServiceSubscription = this.workbasketService.getWorkBasketsSummary( - true, this.sort.sortBy, this.sort.sortDirection, '', + this.store.dispatch(new GetWorkbasketsSummary(true, this.sort.sortBy, this.sort.sortDirection, '', this.filterBy.filterParams.name, this.filterBy.filterParams.description, '', this.filterBy.filterParams.owner, - this.filterBy.filterParams.type, '', this.filterBy.filterParams.key, '' - ) - .subscribe(resultList => { - this.workbasketsResource = resultList; - this.workbaskets = resultList.workbaskets; - this.requestInProgress = false; - }); + this.filterBy.filterParams.type, '', this.filterBy.filterParams.key, '')); + TaskanaQueryParameters.pageSize = this.cards; } ngOnDestroy() { - if (this.workBasketSummarySubscription) { - this.workBasketSummarySubscription.unsubscribe(); - } - if (this.workbasketServiceSubscription) { - this.workbasketServiceSubscription.unsubscribe(); - } - if (this.workbasketServiceSavedSubscription) { - this.workbasketServiceSavedSubscription.unsubscribe(); - } - if (this.orientationSubscription) { - this.orientationSubscription.unsubscribe(); - } - - if (this.importingExportingSubscription) { - this.importingExportingSubscription.unsubscribe(); - } + this.destroy$.next(); + this.destroy$.complete(); } } diff --git a/web/src/app/administration/components/workbasket-overview/workbasket-overview.component.html b/web/src/app/administration/components/workbasket-overview/workbasket-overview.component.html new file mode 100644 index 000000000..430008f96 --- /dev/null +++ b/web/src/app/administration/components/workbasket-overview/workbasket-overview.component.html @@ -0,0 +1,17 @@ +
+
+ +
+
+ +
+ + + + +
diff --git a/web/src/app/administration/components/workbasket-overview/workbasket-overview.component.scss b/web/src/app/administration/components/workbasket-overview/workbasket-overview.component.scss new file mode 100644 index 000000000..e69de29bb diff --git a/web/src/app/administration/components/workbasket-overview/workbasket-overview.component.spec.ts b/web/src/app/administration/components/workbasket-overview/workbasket-overview.component.spec.ts new file mode 100644 index 000000000..5445fb560 --- /dev/null +++ b/web/src/app/administration/components/workbasket-overview/workbasket-overview.component.spec.ts @@ -0,0 +1,75 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { RouterTestingModule } from '@angular/router/testing'; +import { Routes } from '@angular/router'; +import { NgxsModule } from '@ngxs/store'; +import { Component, NO_ERRORS_SCHEMA } from '@angular/core'; +import { Location } from '@angular/common'; +import { take } from 'rxjs/operators'; +import { debug } from 'util'; +import { WorkbasketOverviewComponent } from './workbasket-overview.component'; + +@Component({ + selector: 'taskana-dummy-detail', + template: 'dummydetail' +}) +export class DummyDetailComponent { +} +@Component({ + selector: 'taskana-workbasket-list', + template: 'dummylist' +}) +export class DummyListComponent { +} +describe('WorkbasketOverviewComponent', () => { + let debugElement: any; + let component: WorkbasketOverviewComponent; + let fixture: ComponentFixture; + const locationSpy: jasmine.SpyObj = jasmine.createSpyObj('Location', ['go']); + const routes: Routes = [ + { path: ':id', component: DummyDetailComponent } + ]; + + beforeEach(async(() => { + TestBed.configureTestingModule( + { imports: [ + RouterTestingModule.withRoutes(routes), + NgxsModule.forRoot() + ], + declarations: [ + WorkbasketOverviewComponent, + DummyDetailComponent, + DummyListComponent], + providers: [ + { provide: Location, useValue: locationSpy }, + ], + schemas: [NO_ERRORS_SCHEMA] } + ) + .compileComponents(); + })); + + afterEach(() => { + fixture.destroy(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(WorkbasketOverviewComponent); + component = fixture.componentInstance; + debugElement = fixture.debugElement.nativeElement; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); + + it('should not display detail component if showDetail is false', () => { + component.showDetail = false; + expect(debugElement.querySelector('taskana-administration-workbasket-details')).toBeNull(); + }); + + it('should display detail component if showDetail is true', () => { + component.showDetail = true; + fixture.detectChanges(); + expect(debugElement.querySelector('taskana-administration-workbasket-details')).toBeTruthy(); + }); +}); diff --git a/web/src/app/administration/components/workbasket-overview/workbasket-overview.component.ts b/web/src/app/administration/components/workbasket-overview/workbasket-overview.component.ts new file mode 100644 index 000000000..7a97fae44 --- /dev/null +++ b/web/src/app/administration/components/workbasket-overview/workbasket-overview.component.ts @@ -0,0 +1,57 @@ +import { Component, OnInit } from '@angular/core'; +import { Select, Store } from '@ngxs/store'; +import { Observable, Subject } from 'rxjs'; +import { ActivatedRoute } from '@angular/router'; +import { takeUntil } from 'rxjs/operators'; +import { WorkbasketSelectors } from '../../../shared/store/workbasket-store/workbasket.selectors'; + +import { CreateWorkbasket, + SelectWorkbasket, + SetActiveAction } from '../../../shared/store/workbasket-store/workbasket.actions'; + +@Component({ + selector: 'app-workbasket-overview', + templateUrl: './workbasket-overview.component.html', + styleUrls: ['./workbasket-overview.component.scss'] +}) +export class WorkbasketOverviewComponent implements OnInit { + showDetail = false; + @Select(WorkbasketSelectors.selectedWorkbasketAndAction) selectedWorkbasketAndAction$: Observable; + destroy$ = new Subject(); + routerParams: any; + + constructor( + private route: ActivatedRoute, + private store: Store + ) { + + } + + ngOnInit() { + if (this.route.firstChild) { + this.route.firstChild.params + .pipe(takeUntil(this.destroy$)) + .subscribe(params => { + this.routerParams = params; + if (this.routerParams.id) { + this.showDetail = true; + if (this.routerParams.id === 'new-workbasket') { + this.store.dispatch(new CreateWorkbasket()); + } else { + this.store.dispatch(new SelectWorkbasket(this.routerParams.id)); + } + } + }); + } + this.selectedWorkbasketAndAction$ + .pipe(takeUntil(this.destroy$)) + .subscribe(state => { + this.showDetail = !!state.selectedWorkbasket || state.action === 1; + }); + } + + ngOnDestroy() { + this.destroy$.next(); + this.destroy$.complete(); + } +} diff --git a/web/src/app/shared/components/filter/filter.component.html b/web/src/app/shared/components/filter/filter.component.html index 6d120f13d..4d1ca9f6c 100644 --- a/web/src/app/shared/components/filter/filter.component.html +++ b/web/src/app/shared/components/filter/filter.component.html @@ -17,11 +17,10 @@
+ placeholder="Filter name">
- +
diff --git a/web/src/app/shared/components/type-ahead/type-ahead.component.scss b/web/src/app/shared/components/type-ahead/type-ahead.component.scss index 3c04ad0ce..52407eec7 100644 --- a/web/src/app/shared/components/type-ahead/type-ahead.component.scss +++ b/web/src/app/shared/components/type-ahead/type-ahead.component.scss @@ -5,55 +5,53 @@ height: 47px; & label { margin-bottom: 0px; - padding: 0px 12px; - font-style: italic; + //font-style: italic; + //color: grey; overflow: hidden; } &> div{ + &> div { - border-bottom: 1px solid $pallete-blue; margin-top: 2px; - padding-left: 12px; - min-width: 175px; + max-width: 175px; } } > div{ + border-bottom: 1px solid $pallete-blue !important; + border-radius: 4px !important; + height: 32px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; margin-right: 35px; + padding-left: 12px; } } .custom-form-control { margin-top: -5px; - height: 40px; + max-height: 57px; & .input-group{ width: 100%; } } .input-text { - background: none; + margin-top: 4px; + margin-bottom: 16px; + background: white; box-shadow: none; - border: none; - padding: 0px; - border-radius: 0px; + border-radius: 4px !important; + //border-color: lightgray; + border-bottom: 1px solid $pallete-blue !important; min-width: 150px; - height: 28px; - border-bottom: 1px solid $pallete-blue; - &:focus{ - border-bottom: 1px solid $aquamarine; - } - padding-left: 12px; - padding-right: 35px; - + height: 32px; + padding: 13px 0 13px 12px; } .field-label-wrapper{ position: relative; height: 28px; - padding-left: 12px; box-sizing: content-box; overflow: hidden; pointer-events: none; @@ -63,7 +61,7 @@ } .form-control:focus { - border-color: none; + //border-color: unset; box-shadow: none; } @@ -77,7 +75,11 @@ position: absolute; top: 0px; right: 0px; - + padding-top: 0; +} +.search-button { + z-index: 999; + margin-top: 8px; } ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ @@ -97,5 +99,5 @@ } .invalid { - border-bottom: 1px solid $invalid; + color: $invalid; } diff --git a/web/src/app/shared/models/action.ts b/web/src/app/shared/models/action.ts index d9f8a20ce..e2b43e458 100644 --- a/web/src/app/shared/models/action.ts +++ b/web/src/app/shared/models/action.ts @@ -1,5 +1,6 @@ export enum ACTION { DEFAULT, CREATE, - COPY + COPY, + READ } diff --git a/web/src/app/shared/models/links-workbasket-summary.ts b/web/src/app/shared/models/links-workbasket-summary.ts new file mode 100644 index 000000000..65fbb7f21 --- /dev/null +++ b/web/src/app/shared/models/links-workbasket-summary.ts @@ -0,0 +1,10 @@ +// Remnant from old design, needs to be removed, type reference should instead => models/Links.ts +export class LinksWorkbasketSummary { + constructor( + self?, + distributionTargets?, + accessItems?, + public allWorkbaskets?: { 'href': string } + ) { + } +} diff --git a/web/src/app/shared/models/notifications.ts b/web/src/app/shared/models/notifications.ts index 8beaf23fc..33e073067 100644 --- a/web/src/app/shared/models/notifications.ts +++ b/web/src/app/shared/models/notifications.ts @@ -229,7 +229,7 @@ export const notifications = new Map([ // taskdetails.component [NOTIFICATION_TYPES.INFO_ALERT, new Pair( '', - 'Refreshed selected classification' + 'Information restored' )], // classification-details.component [NOTIFICATION_TYPES.SUCCESS_ALERT_4, new Pair( diff --git a/web/src/app/shared/models/workbasket-access-items-representation.ts b/web/src/app/shared/models/workbasket-access-items-representation.ts new file mode 100644 index 000000000..d6848fe3f --- /dev/null +++ b/web/src/app/shared/models/workbasket-access-items-representation.ts @@ -0,0 +1,7 @@ +import { Links } from './links'; +import { WorkbasketAccessItems } from './workbasket-access-items'; + +export interface WorkbasketAccessItemsRepresentation { + accessItems: WorkbasketAccessItems[]; + _links: Links; +} diff --git a/web/src/app/shared/models/workbasket-access-items-resource.ts b/web/src/app/shared/models/workbasket-access-items-resource.ts deleted file mode 100644 index f9bf7542e..000000000 --- a/web/src/app/shared/models/workbasket-access-items-resource.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { Links } from './links'; -import { WorkbasketAccessItems } from './workbasket-access-items'; - -export class WorkbasketAccessItemsResource { - constructor( - public accessItems: Array = [], - public _links: Links = {} - ) { } -} diff --git a/web/src/app/shared/models/workbasket-access-items.ts b/web/src/app/shared/models/workbasket-access-items.ts index b025bdedd..c0195768f 100644 --- a/web/src/app/shared/models/workbasket-access-items.ts +++ b/web/src/app/shared/models/workbasket-access-items.ts @@ -1,30 +1,29 @@ import { Links } from './links'; -export class WorkbasketAccessItems { - constructor( - public accessItemId: string = '', - public workbasketId: string = '', - public accessId: string = '', - public accessName: string = '', - public permRead: boolean = false, - public permOpen: boolean = false, - public permAppend: boolean = false, - public permTransfer: boolean = false, - public permDistribute: boolean = false, - public permCustom1: boolean = false, - public permCustom2: boolean = false, - public permCustom3: boolean = false, - public permCustom4: boolean = false, - public permCustom5: boolean = false, - public permCustom6: boolean = false, - public permCustom7: boolean = false, - public permCustom8: boolean = false, - public permCustom9: boolean = false, - public permCustom10: boolean = false, - public permCustom11: boolean = false, - public permCustom12: boolean = false, - public _links: Links = {} - ) { } +export interface WorkbasketAccessItems { + accessItemId: string; + workbasketId: string; + workbasketKey: string; + accessId: string; + accessName: string; + permRead: boolean; + permOpen: boolean; + permAppend: boolean; + permTransfer: boolean; + permDistribute: boolean; + permCustom1: boolean; + permCustom2: boolean; + permCustom3: boolean; + permCustom4: boolean; + permCustom5: boolean; + permCustom6: boolean; + permCustom7: boolean; + permCustom8: boolean; + permCustom9: boolean; + permCustom10: boolean; + permCustom11: boolean; + permCustom12: boolean; + _links: Links; } export const customFieldCount: number = 12; diff --git a/web/src/app/shared/models/workbasket-definition.ts b/web/src/app/shared/models/workbasket-definition.ts index e77f8d2aa..37a56e6b0 100644 --- a/web/src/app/shared/models/workbasket-definition.ts +++ b/web/src/app/shared/models/workbasket-definition.ts @@ -1,11 +1,8 @@ import { WorkbasketAccessItems } from './workbasket-access-items'; import { Workbasket } from './workbasket'; -export class WorkbasketDefinition { - constructor( - public distributionTargets: string[], - public workbasketAccessItems: WorkbasketAccessItems[], - public workbasket: Workbasket - ) { - } +export interface WorkbasketDefinition { + distributionTargets: string[]; + workbasketAccessItems: WorkbasketAccessItems[]; + workbasket: Workbasket; } diff --git a/web/src/app/shared/models/workbasket-distribution-targets-resource.ts b/web/src/app/shared/models/workbasket-distribution-targets-resource.ts deleted file mode 100644 index 03d76ea70..000000000 --- a/web/src/app/shared/models/workbasket-distribution-targets-resource.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { WorkbasketSummary } from './workbasket-summary'; -import { Links } from './links'; - -export class WorkbasketDistributionTargetsResource { - constructor( - public distributionTargets: Array = [], - public _links: Links = null - ) { - } -} diff --git a/web/src/app/shared/models/workbasket-distribution-targets.ts b/web/src/app/shared/models/workbasket-distribution-targets.ts new file mode 100644 index 000000000..01ef56edd --- /dev/null +++ b/web/src/app/shared/models/workbasket-distribution-targets.ts @@ -0,0 +1,7 @@ +import { WorkbasketSummary } from './workbasket-summary'; +import { Links } from './links'; + +export interface WorkbasketDistributionTargets { + distributionTargets: WorkbasketSummary[]; + _links: Links; +} diff --git a/web/src/app/shared/models/workbasket-representation.ts b/web/src/app/shared/models/workbasket-representation.ts new file mode 100644 index 000000000..64b9e2226 --- /dev/null +++ b/web/src/app/shared/models/workbasket-representation.ts @@ -0,0 +1,7 @@ +import { Links } from './links'; +import { Workbasket } from './workbasket'; + +export interface WorkbasketRepresentation { + workbaskets: Workbasket[]; + _links: Links; +} diff --git a/web/src/app/shared/models/workbasket-resource.ts b/web/src/app/shared/models/workbasket-resource.ts deleted file mode 100644 index 30c4d721e..000000000 --- a/web/src/app/shared/models/workbasket-resource.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { Links } from './links'; -import { Workbasket } from './workbasket'; - -export class WorkbasketResource { - constructor( - public workbaskets: Array = [], - public _links: Links = {} - ) { } -} diff --git a/web/src/app/shared/models/workbasket-summary-representation.ts b/web/src/app/shared/models/workbasket-summary-representation.ts new file mode 100644 index 000000000..d92c89234 --- /dev/null +++ b/web/src/app/shared/models/workbasket-summary-representation.ts @@ -0,0 +1,9 @@ +import { Page } from 'app/shared/models/page'; +import { WorkbasketSummary } from './workbasket-summary'; +import { LinksWorkbasketSummary } from './links-workbasket-summary'; + +export interface WorkbasketSummaryRepresentation { + workbaskets: WorkbasketSummary[]; + _links: LinksWorkbasketSummary; + page?: Page; +} diff --git a/web/src/app/shared/models/workbasket-summary-resource.ts b/web/src/app/shared/models/workbasket-summary-resource.ts deleted file mode 100644 index 1fb263c4c..000000000 --- a/web/src/app/shared/models/workbasket-summary-resource.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { Page } from 'app/shared/models/page'; -import { WorkbasketSummary } from './workbasket-summary'; -import { Links } from './links'; - -export class WorkbasketSummaryResource { - constructor( - public workbaskets: Array = [], - public _links: Links = {}, - public page: Page = new Page() - ) { - } -} diff --git a/web/src/app/shared/models/workbasket-summary.ts b/web/src/app/shared/models/workbasket-summary.ts index 86ade7d0b..09392b568 100644 --- a/web/src/app/shared/models/workbasket-summary.ts +++ b/web/src/app/shared/models/workbasket-summary.ts @@ -1,24 +1,20 @@ import { ICONTYPES } from './icon-types'; -import { Page } from './page'; -import { Links } from './links'; -export class WorkbasketSummary { - constructor( - public workbasketId?: string, - public key?: string, - public name?: string, - public description?: string, - public owner?: string, - public modified?: string, - public domain?: string, - public type: string = ICONTYPES.PERSONAL, - public orgLevel1?: string, - public orgLevel2?: string, - public orgLevel3?: string, - public orgLevel4?: string, - public markedForDeletion: boolean = false, - public _links?: Links, - public page?: Page - ) { - } +export interface WorkbasketSummary { + workbasketId?: string, + key?: string, + name?: string, + domain?: string, + type?: ICONTYPES, + description?: string, + owner?: string, + custom1?: string, + custom2?: string, + custom3?: string, + custom4?: string, + orgLevel1?: string, + orgLevel2?: string, + orgLevel3?: string, + orgLevel4?: string, + markedForDeletion?: boolean, } diff --git a/web/src/app/shared/models/workbasket.ts b/web/src/app/shared/models/workbasket.ts index b4a6a6552..4f878b93c 100644 --- a/web/src/app/shared/models/workbasket.ts +++ b/web/src/app/shared/models/workbasket.ts @@ -1,28 +1,26 @@ import { Links } from './links'; import { ICONTYPES } from './icon-types'; -export class Workbasket { - constructor( - public workbasketId?: string, - public created?: string, - public key?: string, - public domain?: string, - public type: ICONTYPES = ICONTYPES.PERSONAL, - public modified?: string, - public name?: string, - public description?: string, - public owner?: string, - public custom1?: string, - public custom2?: string, - public custom3?: string, - public custom4?: string, - public orgLevel1?: string, - public orgLevel2?: string, - public orgLevel3?: string, - public orgLevel4?: string, - public _links: Links = {} - ) { - } +export interface Workbasket { + workbasketId?: string; + key?: string; + name?: string; + domain?: string; + type?: ICONTYPES; + description?: string; + owner?: string; + custom1?: string; + custom2?: string; + custom3?: string; + custom4?: string; + orgLevel1?: string; + orgLevel2?: string; + orgLevel3?: string; + orgLevel4?: string; + markedForDeletion?: boolean; + created?: string; + modified?: string; + _links?: Links; } export const customFieldCount: number = 4; diff --git a/web/src/app/shared/services/workbasket/workbasket.service.ts b/web/src/app/shared/services/workbasket/workbasket.service.ts index d822d8564..2d4a15b61 100644 --- a/web/src/app/shared/services/workbasket/workbasket.service.ts +++ b/web/src/app/shared/services/workbasket/workbasket.service.ts @@ -4,22 +4,22 @@ import { HttpClient } from '@angular/common/http'; import { environment } from 'environments/environment'; import { Workbasket } from 'app/shared/models/workbasket'; import { WorkbasketAccessItems } from 'app/shared/models/workbasket-access-items'; -import { WorkbasketSummaryResource } from 'app/shared/models/workbasket-summary-resource'; -import { WorkbasketAccessItemsResource } from 'app/shared/models/workbasket-access-items-resource'; -import { WorkbasketDistributionTargetsResource } from 'app/shared/models/workbasket-distribution-targets-resource'; +import { WorkbasketSummaryRepresentation } from 'app/shared/models/workbasket-summary-representation'; +import { WorkbasketAccessItemsRepresentation } from 'app/shared/models/workbasket-access-items-representation'; +import { WorkbasketDistributionTargets } from 'app/shared/models/workbasket-distribution-targets'; import { Direction } from 'app/shared/models/sorting'; import { DomainService } from 'app/shared/services/domain/domain.service'; import { TaskanaQueryParameters } from 'app/shared/util/query-parameters'; import { mergeMap, tap, catchError } from 'rxjs/operators'; import { QueryParameters } from 'app/shared/models/query-parameters'; -import { WorkbasketResource } from '../../models/workbasket-resource'; +import { WorkbasketRepresentation } from '../../models/workbasket-representation'; @Injectable() export class WorkbasketService { public workBasketSelected = new Subject(); public workBasketSaved = new Subject(); - private workbasketSummaryRef: Observable = new Observable(); + private workbasketSummaryRef: Observable = new Observable(); constructor( private httpClient: HttpClient, @@ -47,7 +47,7 @@ export class WorkbasketService { return this.domainService.getSelectedDomain() .pipe(mergeMap(domain => { - this.workbasketSummaryRef = this.httpClient.get( + this.workbasketSummaryRef = this.httpClient.get( `${environment.taskanaRestUrl}/v1/workbaskets/${TaskanaQueryParameters .getQueryParameters(this.workbasketParameters(sortBy, order, name, nameLike, descLike, owner, ownerLike, type, key, keyLike, requiredPermission, allPages, domain))}` @@ -65,8 +65,8 @@ export class WorkbasketService { } // GET - getAllWorkBaskets(): Observable { - return this.httpClient.get(`${environment.taskanaRestUrl}/v1/workbaskets?required-permission=OPEN`); + getAllWorkBaskets(): Observable { + return this.httpClient.get(`${environment.taskanaRestUrl}/v1/workbaskets?required-permission=OPEN`); } // POST @@ -90,8 +90,8 @@ export class WorkbasketService { } // GET - getWorkBasketAccessItems(url: string): Observable { - return this.httpClient.get(url); + getWorkBasketAccessItems(url: string): Observable { + return this.httpClient.get(url); } // POST @@ -106,14 +106,14 @@ export class WorkbasketService { } // GET - getWorkBasketsDistributionTargets(url: string): Observable { - return this.httpClient.get(url); + getWorkBasketsDistributionTargets(url: string): Observable { + return this.httpClient.get(url); } // PUT updateWorkBasketsDistributionTargets(url: string, distributionTargetsIds: Array): - Observable { - return this.httpClient.put(url, distributionTargetsIds); + Observable { + return this.httpClient.put(url, distributionTargetsIds); } // DELETE diff --git a/web/src/app/shared/store/index.ts b/web/src/app/shared/store/index.ts index fc9e67e4a..19cc6e859 100644 --- a/web/src/app/shared/store/index.ts +++ b/web/src/app/shared/store/index.ts @@ -1,4 +1,5 @@ import { EngineConfigurationState } from './engine-configuration-store/engine-configuration.state'; import { ClassificationState } from './classification-store/classification.state'; +import { WorkbasketState } from './workbasket-store/workbasket.state'; -export const STATES = [EngineConfigurationState, ClassificationState]; +export const STATES = [EngineConfigurationState, ClassificationState, WorkbasketState]; diff --git a/web/src/app/shared/store/workbasket-store/workbasket.actions.ts b/web/src/app/shared/store/workbasket-store/workbasket.actions.ts new file mode 100644 index 000000000..f19441363 --- /dev/null +++ b/web/src/app/shared/store/workbasket-store/workbasket.actions.ts @@ -0,0 +1,102 @@ +import { Workbasket } from '../../models/workbasket'; +import { TaskanaQueryParameters } from '../../util/query-parameters'; +import { Direction } from '../../models/sorting'; +import { ACTION } from '../../models/action'; +import { WorkbasketAccessItems } from '../../models/workbasket-access-items'; + +// Workbasket List +export class GetWorkbasketsSummary { + static readonly type = '[Workbasket List] Get all workbaskets\' summary'; + + constructor(public forceRequest: boolean = false, + public sortBy: string = TaskanaQueryParameters.parameters.KEY, + public order: string = Direction.ASC, + public name?: string, + public nameLike?: string, + public descLike?: string, + public owner?: string, + public ownerLike?: string, + public type?: string, + public key?: string, + public keyLike?: string, + public requiredPermission?: string, + public allPages: boolean = false) { + } +} + +export class SelectWorkbasket { + static readonly type = '[Workbasket] Select a workbasket'; + constructor(public workbasketId: string) { + } +} + +export class DeselectWorkbasket { + static readonly type = '[Workbasket] Deselect workbasket'; +} + +export class CreateWorkbasket { + static readonly type = '[Workbasket] Create new workbasket'; +} + +export class SetActiveAction { + static readonly type = '[Workbasket] Specify current action'; + constructor(public action: ACTION) { + } +} + +// Workbasket Information +export class SaveNewWorkbasket { + static readonly type = '[Workbasket] Save new workbasket'; + constructor(public workbasket: Workbasket) { + } +} + +export class CopyWorkbasket { + static readonly type = '[Workbasket] Copy selected workbasket'; + constructor(public workbasket: Workbasket) { + } +} + +export class UpdateWorkbasket { + static readonly type = '[Workbasket] Update a workbasket'; + constructor(public url: string, public workbasket: Workbasket) { + } +} + +export class RemoveDistributionTarget { + static readonly type = '[Workbasket] Remove distribution targets of selected workbasket'; + constructor(public url: string) { + } +} + +export class MarkWorkbasketForDeletion { + static readonly type = '[Workbasket] Mark selected workbasket for deletion'; + constructor(public url: string) { + } +} + +// Workbasket Access Items +export class GetWorkbasketAccessItems { + static readonly type = '[Workbasket] Get all workbasket access items'; + constructor(public url: string) { + } +} + +export class UpdateWorkbasketAccessItems { + static readonly type = '[Workbasket] Update selected workbasket\'s access items'; + constructor(public url: string, public workbasketAccessItems: WorkbasketAccessItems[]) { + } +} + +// Workbasket Distribution Targets +export class GetWorkbasketDistributionTargets { + static readonly type = '[Workbasket] Get all workbasket distribution targets'; + constructor(public url: string) { + } +} + +export class UpdateWorkbasketDistributionTargets { + static readonly type = '[Workbasket] Update workbasket distribution targets'; + constructor(public url: string, public distributionTargetsIds: string[]) { + } +} diff --git a/web/src/app/shared/store/workbasket-store/workbasket.selectors.ts b/web/src/app/shared/store/workbasket-store/workbasket.selectors.ts new file mode 100644 index 000000000..8c9e20daa --- /dev/null +++ b/web/src/app/shared/store/workbasket-store/workbasket.selectors.ts @@ -0,0 +1,56 @@ +import { Selector } from '@ngxs/store'; +import { WorkbasketState, WorkbasketStateModel } from './workbasket.state'; +import { WorkbasketSummary } from '../../models/workbasket-summary'; +import { WorkbasketSummaryRepresentation } from '../../models/workbasket-summary-representation'; +import { ACTION } from '../../models/action'; +import { WorkbasketAccessItemsRepresentation } from '../../models/workbasket-access-items-representation'; +import { WorkbasketDistributionTargets } from '../../models/workbasket-distribution-targets'; +import { Workbasket } from '../../models/workbasket'; + +export class WorkbasketSelectors { + // Workbasket + @Selector([WorkbasketState]) + static selectedWorkbasket(state: WorkbasketStateModel): Workbasket { + return { ...state.selectedWorkbasket }; + } + + @Selector([WorkbasketState]) + static workbasketsSummary(state: WorkbasketStateModel): WorkbasketSummary[] { + return state.paginatedWorkbasketsSummary.workbaskets; + } + + @Selector([WorkbasketState]) + static workbasketsSummaryRepresentation(state: WorkbasketStateModel): WorkbasketSummaryRepresentation { + return state.paginatedWorkbasketsSummary; + } + + @Selector([WorkbasketState]) + static workbasketActiveAction(state: WorkbasketStateModel): ACTION { + return state.action; + } + + @Selector([WorkbasketState]) + static selectedWorkbasketAndAction(state: WorkbasketStateModel): WorkbasketAndAction { + return { + selectedWorkbasket: state.selectedWorkbasket, + action: state.action + }; + } + + // Workbasket Access Items + @Selector([WorkbasketState]) + static workbasketAccessItems(state: WorkbasketStateModel): WorkbasketAccessItemsRepresentation { + return state.workbasketAccessItems; + } + + // Workbasket Distribution Targets + @Selector([WorkbasketState]) + static workbasketDistributionTargets(state: WorkbasketStateModel): WorkbasketDistributionTargets { + return state.workbasketDistributionTargets; + } +} + +export interface WorkbasketAndAction { + selectedWorkbasket: Workbasket, + action: ACTION +} diff --git a/web/src/app/shared/store/workbasket-store/workbasket.state.ts b/web/src/app/shared/store/workbasket-store/workbasket.state.ts new file mode 100644 index 000000000..b8855069f --- /dev/null +++ b/web/src/app/shared/store/workbasket-store/workbasket.state.ts @@ -0,0 +1,261 @@ +import { Action, NgxsAfterBootstrap, State, StateContext } from '@ngxs/store'; +import { take, tap } from 'rxjs/operators'; +import { Observable, of } from 'rxjs'; +import { Location } from '@angular/common'; +import { WorkbasketService } from '../../services/workbasket/workbasket.service'; +import { Workbasket } from '../../models/workbasket'; +import { CopyWorkbasket, + CreateWorkbasket, + DeselectWorkbasket, + GetWorkbasketAccessItems, + GetWorkbasketDistributionTargets, + GetWorkbasketsSummary, + MarkWorkbasketForDeletion, + RemoveDistributionTarget, + SaveNewWorkbasket, + SelectWorkbasket, + SetActiveAction, + UpdateWorkbasket, UpdateWorkbasketAccessItems, + UpdateWorkbasketDistributionTargets } from './workbasket.actions'; +import { WorkbasketSummaryRepresentation } from '../../models/workbasket-summary-representation'; +import { ACTION } from '../../models/action'; +import { DomainService } from '../../services/domain/domain.service'; +import { NOTIFICATION_TYPES } from '../../models/notifications'; +import { NotificationService } from '../../services/notifications/notification.service'; +import { WorkbasketAccessItemsRepresentation } from '../../models/workbasket-access-items-representation'; +import { WorkbasketDistributionTargets } from '../../models/workbasket-distribution-targets'; +import { WorkbasketSummary } from '../../models/workbasket-summary'; + +class InitializeStore { + static readonly type = '[Workbasket] Initializing state'; +} + +@State({ name: 'workbasket' }) +export class WorkbasketState implements NgxsAfterBootstrap { + constructor( + private workbasketService: WorkbasketService, + private domainService: DomainService, + private location: Location, + private notificationService: NotificationService + ) { + } + + @Action(GetWorkbasketsSummary) + getWorkbasketsSummary(ctx: StateContext, action: GetWorkbasketsSummary): Observable { + return this.workbasketService.getWorkBasketsSummary(action.forceRequest, + action.sortBy, action.order, action.name, action.nameLike, action.descLike, action.owner, action.ownerLike, + action.type, action.key, action.keyLike, action.requiredPermission, action.allPages).pipe( + take(1), tap(paginatedWorkbasketsSummary => { + ctx.patchState( + { paginatedWorkbasketsSummary } + ); + }) + ); + } + + @Action(SelectWorkbasket) + selectWorkbasket(ctx: StateContext, action: SelectWorkbasket): Observable { + this.location.go(this.location.path().replace(/(workbaskets).*/g, `workbaskets/(detail:${action.workbasketId})`)); + const id = action.workbasketId; + if (typeof id !== 'undefined') { + return this.workbasketService.getWorkBasket(id).pipe(take(1), tap( + selectedWorkbasket => { + ctx.patchState({ + selectedWorkbasket, + action: ACTION.READ + }); + } + )); + } + return of(null); + } + + @Action(DeselectWorkbasket) + deselectWorkbasket(ctx: StateContext): Observable { + this.location.go(this.location.path().replace(/(workbaskets).*/g, 'workbaskets')); + ctx.patchState({ + selectedWorkbasket: undefined, + action: ACTION.READ + }); + return of(null); + } + + @Action(CreateWorkbasket) + createWorkbasket(ctx: StateContext): Observable { + this.location.go(this.location.path().replace(/(workbaskets).*/g, 'workbaskets/(detail:new-workbasket)')); + ctx.patchState({ + selectedWorkbasket: undefined, + action: ACTION.CREATE + }); + return of(null); + } + + @Action(SetActiveAction) + setActiveAction(ctx: StateContext, action: SetActiveAction): Observable { + ctx.patchState({ action: action.action }); + return of(null); + } + + @Action(SaveNewWorkbasket) + saveNewWorkbasket(ctx: StateContext, action: SaveNewWorkbasket): Observable { + return this.workbasketService.createWorkbasket(action.workbasket).pipe(take(1), tap( + workbasketUpdated => { + this.notificationService.showToast( + NOTIFICATION_TYPES.SUCCESS_ALERT_11, + new Map([['workbasketKey', workbasketUpdated.key]]) + ); + + this.selectWorkbasket(ctx, workbasketUpdated.workbasketId); + this.location.go(this.location.path().replace(/(workbaskets).*/g, 'workbaskets')); + }, error => { + this.notificationService.triggerError(NOTIFICATION_TYPES.CREATE_ERR_2, error); + } + )); + } + + @Action(CopyWorkbasket) + copyWorkbasket(ctx: StateContext, action: CopyWorkbasket): Observable { + this.location.go(this.location.path().replace(/(workbaskets).*/g, 'workbaskets/(detail:new-workbasket)')); + ctx.patchState({ + action: ACTION.COPY + }); + return of(null); + } + + @Action(UpdateWorkbasket) + updateWorkbasket(ctx: StateContext, action: UpdateWorkbasket): Observable { + return this.workbasketService.updateWorkbasket(action.url, action.workbasket).pipe(take(1), tap( + updatedWorkbasket => { + this.notificationService.showToast( + NOTIFICATION_TYPES.SUCCESS_ALERT_10, + new Map([['workbasketKey', updatedWorkbasket.key]]) + ); + + const paginatedWorkbasketSummary = { ...ctx.getState().paginatedWorkbasketsSummary }; + paginatedWorkbasketSummary.workbaskets = updateWorkbasketSummaryRepresentation( + paginatedWorkbasketSummary.workbaskets, action.workbasket + ); + + ctx.patchState({ + selectedWorkbasket: updatedWorkbasket, + paginatedWorkbasketsSummary: paginatedWorkbasketSummary + }); + }, error => { + this.notificationService.triggerError(NOTIFICATION_TYPES.SAVE_ERR_4, error); + } + )); + } + + @Action(RemoveDistributionTarget) + removeDistributionTarget(ctx: StateContext, action: RemoveDistributionTarget): Observable { + return this.workbasketService.removeDistributionTarget(action.url).pipe(take(1), tap( + () => { + this.notificationService.showToast( + NOTIFICATION_TYPES.SUCCESS_ALERT_9, + new Map([['workbasketId', ctx.getState().selectedWorkbasket.workbasketId]]) + ); + }, error => { + this.notificationService.triggerError(NOTIFICATION_TYPES.REMOVE_ERR_2, + error, + new Map([['workbasketId', ctx.getState().selectedWorkbasket.workbasketId]])); + } + )); + } + + @Action(MarkWorkbasketForDeletion) + deleteWorkbasket(ctx: StateContext, action: MarkWorkbasketForDeletion): Observable { + return this.workbasketService.markWorkbasketForDeletion(action.url).pipe(take(1), tap( + response => { + if (response.status === 202) { + this.notificationService.triggerError(NOTIFICATION_TYPES.MARK_ERR, + undefined, + new Map([['workbasketId', ctx.getState().selectedWorkbasket.workbasketId]])); + } else { + this.notificationService.showToast( + NOTIFICATION_TYPES.SUCCESS_ALERT_12, + new Map([['workbasketId', ctx.getState().selectedWorkbasket.workbasketId]]) + ); + } + } + )); + } + + @Action(GetWorkbasketAccessItems) + getWorkbasketAccessItems(ctx: StateContext, action: GetWorkbasketAccessItems): Observable { + return this.workbasketService.getWorkBasketAccessItems(action.url).pipe(take(1), tap( + workbasketAccessItemsRepresentation => { + ctx.patchState({ + workbasketAccessItems: workbasketAccessItemsRepresentation + }); + } + )); + } + + @Action(UpdateWorkbasketAccessItems) + updateWorkbasketAccessItems(ctx: StateContext, + action: UpdateWorkbasketAccessItems): Observable { + return this.workbasketService.updateWorkBasketAccessItem(action.url, action.workbasketAccessItems) + .pipe(take(1), tap(workbasketAccessItems => { + ctx.patchState({ + workbasketAccessItems + }); + this.notificationService.showToast(NOTIFICATION_TYPES.SUCCESS_ALERT_7, + new Map([['workbasketKey', ctx.getState().selectedWorkbasket.key]])); + }, error => { + this.notificationService.triggerError(NOTIFICATION_TYPES.SAVE_ERR_2, error); + })); + } + + @Action(GetWorkbasketDistributionTargets) + getWorkbasketDistributionTargets(ctx: StateContext, action: GetWorkbasketDistributionTargets): Observable { + return this.workbasketService.getWorkBasketsDistributionTargets(action.url).pipe(take(1), tap( + workbasketDistributionTargets => { + ctx.patchState({ + workbasketDistributionTargets + }); + } + )); + } + + @Action(UpdateWorkbasketDistributionTargets) + updateWorkbasketDistributionTargets( + ctx: StateContext, + action: UpdateWorkbasketDistributionTargets + ): Observable { + return this.workbasketService.updateWorkBasketsDistributionTargets(action.url, action.distributionTargetsIds).pipe(take(1), tap( + updatedWorkbasketsDistributionTargets => { + this.notificationService.showToast( + NOTIFICATION_TYPES.SUCCESS_ALERT_8, + new Map([['workbasketName', ctx.getState().selectedWorkbasket.name]]) + ); + }, error => { + this.notificationService.triggerError(NOTIFICATION_TYPES.SAVE_ERR_3, error); + } + )); + } + + ngxsAfterBootstrap(ctx?: StateContext): void { + ctx.dispatch(new InitializeStore()); + } +} + +function updateWorkbasketSummaryRepresentation( + workbasketsSummary: WorkbasketSummary[], + selectedWorkbasket: Workbasket +) { + return workbasketsSummary.map(w => { + if (w.workbasketId === selectedWorkbasket.workbasketId) { + const workbasketSummary: WorkbasketSummary = selectedWorkbasket; + return workbasketSummary; + } + return w; + }); +} + +export interface WorkbasketStateModel { + paginatedWorkbasketsSummary: WorkbasketSummaryRepresentation, + selectedWorkbasket: Workbasket, + action: ACTION, + workbasketAccessItems: WorkbasketAccessItemsRepresentation, + workbasketDistributionTargets: WorkbasketDistributionTargets +}