From 8285b3e655214e7f7bf7090136ec20d52a6b9f17 Mon Sep 17 00:00:00 2001 From: Tiger Li <22798884+tigerpway@users.noreply.github.com> Date: Thu, 13 Aug 2020 17:26:02 -0400 Subject: [PATCH] filter --- src/app/app-routing.module.ts | 7 ++ .../alert-filters.component.html | 2 + .../alert-filters.component.scss | 0 .../alert-filters.component.spec.ts | 25 +++++ .../alert-filters/alert-filters.component.ts | 52 +++++++++++ .../alert-filters/alert-filters.module.ts | 15 +++ .../alert-item/alert-item.component.html | 44 +++++++++ .../alert-item/alert-item.component.scss | 0 .../alert-item/alert-item.component.spec.ts | 25 +++++ .../alerts/alert-item/alert-item.component.ts | 31 +++++++ .../alerts/alert-item/alert-item.module.ts | 14 +++ .../alert-service/alert-service.module.ts | 11 +++ .../cms/alerts/alert-service/alert.data.ts | 37 ++++++++ .../cms/alerts/alert-service/alert.model.ts | 14 +++ .../alert-service/alert.service.spec.ts | 12 +++ .../cms/alerts/alert-service/alert.service.ts | 91 +++++++++++++++++++ src/app/cms/alerts/alerts-routing.module.ts | 16 ++++ src/app/cms/alerts/alerts.component.html | 57 ++++++++++++ src/app/cms/alerts/alerts.component.scss | 0 src/app/cms/alerts/alerts.component.spec.ts | 25 +++++ src/app/cms/alerts/alerts.component.ts | 57 ++++++++++++ src/app/cms/alerts/alerts.module.ts | 44 +++++++++ src/app/cms/alerts/navigation.data.ts | 10 ++ 23 files changed, 589 insertions(+) create mode 100644 src/app/cms/alerts/alert-filters/alert-filters.component.html create mode 100644 src/app/cms/alerts/alert-filters/alert-filters.component.scss create mode 100644 src/app/cms/alerts/alert-filters/alert-filters.component.spec.ts create mode 100644 src/app/cms/alerts/alert-filters/alert-filters.component.ts create mode 100644 src/app/cms/alerts/alert-filters/alert-filters.module.ts create mode 100644 src/app/cms/alerts/alert-item/alert-item.component.html create mode 100644 src/app/cms/alerts/alert-item/alert-item.component.scss create mode 100644 src/app/cms/alerts/alert-item/alert-item.component.spec.ts create mode 100644 src/app/cms/alerts/alert-item/alert-item.component.ts create mode 100644 src/app/cms/alerts/alert-item/alert-item.module.ts create mode 100644 src/app/cms/alerts/alert-service/alert-service.module.ts create mode 100644 src/app/cms/alerts/alert-service/alert.data.ts create mode 100644 src/app/cms/alerts/alert-service/alert.model.ts create mode 100644 src/app/cms/alerts/alert-service/alert.service.spec.ts create mode 100644 src/app/cms/alerts/alert-service/alert.service.ts create mode 100644 src/app/cms/alerts/alerts-routing.module.ts create mode 100644 src/app/cms/alerts/alerts.component.html create mode 100644 src/app/cms/alerts/alerts.component.scss create mode 100644 src/app/cms/alerts/alerts.component.spec.ts create mode 100644 src/app/cms/alerts/alerts.component.ts create mode 100644 src/app/cms/alerts/alerts.module.ts create mode 100644 src/app/cms/alerts/navigation.data.ts diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index fce8beaa..91e89d66 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -104,6 +104,13 @@ const routes: Routes = [ id: "help" } }, + { + path: 'cms/alerts', + loadChildren: './cms/alerts/alerts.module#AlertsModule', + data: { + id: "alerts" + } + }, { path: '*', redirectTo: '/', diff --git a/src/app/cms/alerts/alert-filters/alert-filters.component.html b/src/app/cms/alerts/alert-filters/alert-filters.component.html new file mode 100644 index 00000000..e1c547e6 --- /dev/null +++ b/src/app/cms/alerts/alert-filters/alert-filters.component.html @@ -0,0 +1,2 @@ + + diff --git a/src/app/cms/alerts/alert-filters/alert-filters.component.scss b/src/app/cms/alerts/alert-filters/alert-filters.component.scss new file mode 100644 index 00000000..e69de29b diff --git a/src/app/cms/alerts/alert-filters/alert-filters.component.spec.ts b/src/app/cms/alerts/alert-filters/alert-filters.component.spec.ts new file mode 100644 index 00000000..2314eea0 --- /dev/null +++ b/src/app/cms/alerts/alert-filters/alert-filters.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { AlertFiltersComponent } from './alert-filters.component'; + +describe('AlertFiltersComponent', () => { + let component: AlertFiltersComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ AlertFiltersComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(AlertFiltersComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/cms/alerts/alert-filters/alert-filters.component.ts b/src/app/cms/alerts/alert-filters/alert-filters.component.ts new file mode 100644 index 00000000..cc2427b3 --- /dev/null +++ b/src/app/cms/alerts/alert-filters/alert-filters.component.ts @@ -0,0 +1,52 @@ +import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core'; +import { BehaviorSubject } from 'rxjs'; +import { FormGroup } from '@angular/forms'; +import { FormlyFieldConfig } from '@ngx-formly/core'; + + +@Component({ + selector: 'alert-filters', + templateUrl: './alert-filters.component.html', + styleUrls: ['./alert-filters.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush +}) +export class AlertFiltersComponent implements OnInit { + + constructor() { } + public model = {}; + + config: FormlyFieldConfig[] = [ + { + key: 'keyword', + type: 'input', + templateOptions: { + label: 'Keyword', + } + }, + { + key: 'status', + type: 'multicheckbox', + templateOptions: { + label: 'Status', + group: 'panel', + options: [ + { + key: 'active', + value: 'Active' + }, + { + key: 'inactive', + value: 'Inactive' + } + ] + } + } + ]; + + form = new FormGroup({}); + public filterChange$ = new BehaviorSubject(null); + + ngOnInit() { + } + +} diff --git a/src/app/cms/alerts/alert-filters/alert-filters.module.ts b/src/app/cms/alerts/alert-filters/alert-filters.module.ts new file mode 100644 index 00000000..0500ebcb --- /dev/null +++ b/src/app/cms/alerts/alert-filters/alert-filters.module.ts @@ -0,0 +1,15 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { AlertFiltersComponent } from './alert-filters.component'; +import { SdsFiltersModule } from '@gsa-sam/sam-formly'; + + +@NgModule({ + declarations: [AlertFiltersComponent], + imports: [ + CommonModule, + SdsFiltersModule + ], + exports: [AlertFiltersComponent] +}) +export class AlertFiltersModule { } diff --git a/src/app/cms/alerts/alert-item/alert-item.component.html b/src/app/cms/alerts/alert-item/alert-item.component.html new file mode 100644 index 00000000..627113c2 --- /dev/null +++ b/src/app/cms/alerts/alert-item/alert-item.component.html @@ -0,0 +1,44 @@ +
+
+

+ + {{model.type}} for {{model.requestedBy}} + +

+

+ {{model.description}} +

+
+
+ + +
+ + +
+
+
+
Status
+
+
+ + {{getLabel(model.status)}} +
+
+
+ + +
+
+
+
Received Date
+
+
+ {{ model.date | date }} +
+
+
+
+
+
+ diff --git a/src/app/cms/alerts/alert-item/alert-item.component.scss b/src/app/cms/alerts/alert-item/alert-item.component.scss new file mode 100644 index 00000000..e69de29b diff --git a/src/app/cms/alerts/alert-item/alert-item.component.spec.ts b/src/app/cms/alerts/alert-item/alert-item.component.spec.ts new file mode 100644 index 00000000..2b49a011 --- /dev/null +++ b/src/app/cms/alerts/alert-item/alert-item.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { AlertItemComponent } from './alert-item.component'; + +describe('AlertItemComponent', () => { + let component: AlertItemComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ AlertItemComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(AlertItemComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/cms/alerts/alert-item/alert-item.component.ts b/src/app/cms/alerts/alert-item/alert-item.component.ts new file mode 100644 index 00000000..751ddf63 --- /dev/null +++ b/src/app/cms/alerts/alert-item/alert-item.component.ts @@ -0,0 +1,31 @@ +import { Component, OnInit, ChangeDetectionStrategy, Input } from '@angular/core'; +import { AlertData, AlertStatus } from '../alert-service/alert.model'; + +@Component({ + selector: 'alert-item', + templateUrl: './alert-item.component.html', + styleUrls: ['./alert-item.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush +}) +export class AlertItemComponent implements OnInit { + + @Input() model: AlertData + + constructor() { } + + ngOnInit() { + } + + getLabel(type: AlertStatus): string { + switch(type) { + case AlertStatus.Active: { + return "Active"; + } + case AlertStatus.Inactive: { + return "Inactive"; + } + return "None"; + } + } + +} diff --git a/src/app/cms/alerts/alert-item/alert-item.module.ts b/src/app/cms/alerts/alert-item/alert-item.module.ts new file mode 100644 index 00000000..cc88a4c8 --- /dev/null +++ b/src/app/cms/alerts/alert-item/alert-item.module.ts @@ -0,0 +1,14 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { RouterModule } from '@angular/router'; +import { AlertItemComponent } from './alert-item.component'; + +@NgModule({ + declarations: [AlertItemComponent], + imports: [ + CommonModule, + RouterModule + ], + exports: [AlertItemComponent] +}) +export class AlertItemModule { } diff --git a/src/app/cms/alerts/alert-service/alert-service.module.ts b/src/app/cms/alerts/alert-service/alert-service.module.ts new file mode 100644 index 00000000..4c016520 --- /dev/null +++ b/src/app/cms/alerts/alert-service/alert-service.module.ts @@ -0,0 +1,11 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; + +@NgModule({ + declarations: [], + imports: [ + CommonModule + ], + exports: [] +}) +export class AlertServiceModule { } diff --git a/src/app/cms/alerts/alert-service/alert.data.ts b/src/app/cms/alerts/alert-service/alert.data.ts new file mode 100644 index 00000000..1919a8e2 --- /dev/null +++ b/src/app/cms/alerts/alert-service/alert.data.ts @@ -0,0 +1,37 @@ +import { AlertData, AlertStatus } from './alert.model'; + +export let Alerts: AlertData[] = [ + { + "id" : "0000001", + "type" : "Assign Role", + "description" : "Entity Registration, Compliance Reporting Viewer for Tardegrade, LLC", + "date" : "Jun 12, 2019", + "requestedBy": "Amy Martinez", + "status" : AlertStatus.Active + }, + { + "id" : "0000002", + "type" : "Assign Role", + "description" : "Entity Registration Data Entry for Tardegrade, LLC", + "date" : "Jun 12, 2019", + "requestedBy": "Amy Martinez", + "status" : AlertStatus.Inactive + }, + { + "id" : "0000003", + "type" : "Assign Role", + "description" : "Viewer for Tardegrade, LLC", + "date" : "Jun 12, 2019", + "requestedBy" : "Amy Martinez", + "status" : AlertStatus.Active + }, + { + "id" : "0000004", + "type" : "Assign Role", + "description" : "Viewer for Tardegrade, LLC", + "date" : "Jun 12, 2019", + "requestedBy" : "Amy Martinez", + "status" : AlertStatus.Inactive + } + +]; \ No newline at end of file diff --git a/src/app/cms/alerts/alert-service/alert.model.ts b/src/app/cms/alerts/alert-service/alert.model.ts new file mode 100644 index 00000000..5d53796e --- /dev/null +++ b/src/app/cms/alerts/alert-service/alert.model.ts @@ -0,0 +1,14 @@ + +export enum AlertStatus { + Active, + Inactive +} + +export interface AlertData { + id: string; + type: string; + description: string; + date: string; + requestedBy: string; + status: AlertStatus; +} \ No newline at end of file diff --git a/src/app/cms/alerts/alert-service/alert.service.spec.ts b/src/app/cms/alerts/alert-service/alert.service.spec.ts new file mode 100644 index 00000000..679f77ac --- /dev/null +++ b/src/app/cms/alerts/alert-service/alert.service.spec.ts @@ -0,0 +1,12 @@ +import { TestBed } from '@angular/core/testing'; + +import { AlertService } from './alert.service'; + +describe('AlertService', () => { + beforeEach(() => TestBed.configureTestingModule({})); + + it('should be created', () => { + const service: AlertService = TestBed.get(AlertService); + expect(service).toBeTruthy(); + }); +}); diff --git a/src/app/cms/alerts/alert-service/alert.service.ts b/src/app/cms/alerts/alert-service/alert.service.ts new file mode 100644 index 00000000..0f8c9d8c --- /dev/null +++ b/src/app/cms/alerts/alert-service/alert.service.ts @@ -0,0 +1,91 @@ +import { Injectable } from '@angular/core'; +import { SearchParameters, SearchListInterface, SearchResult, SearchListConfiguration } from '@gsa-sam/layouts'; +import { AlertServiceModule } from './alert-service.module'; +import { Alerts } from './alert.data'; +import { Observable, of } from 'rxjs'; +import { AlertData, AlertStatus } from './alert.model'; + + +@Injectable({ + providedIn: AlertServiceModule +}) +export class AlertService implements SearchListInterface { + + configuration: SearchListConfiguration = { + defaultSortValue: 'dateDescending', pageSize: 25, + sortList: + [{ text: 'Received Date Descending', value: 'dateDescending' }, + { text: 'Received Date Ascending', value: 'dateAscending' }] + }; + + constructor() { } + + getData(search: SearchParameters): Observable { + let itemList = Alerts; + let toReturn = []; + + const start = search.page.pageNumber * search.page.pageSize - search.page.pageSize; + const end = start + search.page.pageSize; + this.sortEntityItem(itemList, search); + + toReturn = itemList.filter(function (item) { + if (search.filter && search.filter.keyword) { + return JSON.stringify(item).toUpperCase().includes(search.filter.keyword.toUpperCase()) + } + else { + return true; + } + }).filter(function (item) { + if (search.filter && search.filter.status) { + if (!search.filter.status.active && !search.filter.status.inactive) { + return true; + } + return (search.filter.status.active && item.status === AlertStatus.Active) || (search.filter.status.inactive && item.status === AlertStatus.Inactive); + } + else { + return true; + } + }) + + + return of({ + items: toReturn.slice(start, end), + totalItems: toReturn.length + }); + } + + private sortEntityItem(itemList: AlertData[], search: SearchParameters) { + let valueA = ''; + let valueB = ''; + let lessValueExpress = -1; + let moreValueExpress = 1; + itemList.sort((a, b) => { + switch (search.sortField) { + case 'dateDescending': + lessValueExpress = -1; + moreValueExpress = 1; + valueA = a.date; + valueB = b.date; + break; + case 'dateAscending': + lessValueExpress = 1; + moreValueExpress = -1; + valueA = a.date; + valueB = b.date; + break; + default: + break; + } + if (valueA < valueB) { + return lessValueExpress; + } + else if (valueA > valueB) { + return moreValueExpress; + } + else { + return 0; + } + }); + } + +} diff --git a/src/app/cms/alerts/alerts-routing.module.ts b/src/app/cms/alerts/alerts-routing.module.ts new file mode 100644 index 00000000..ce373aa9 --- /dev/null +++ b/src/app/cms/alerts/alerts-routing.module.ts @@ -0,0 +1,16 @@ +import { NgModule } from '@angular/core'; +import { Routes, RouterModule } from '@angular/router'; +import { AlertsComponent } from './alerts.component'; + +const routes: Routes = [ + { + path: '', + component: AlertsComponent + } +]; + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule] +}) +export class AlertsRoutingModule { } diff --git a/src/app/cms/alerts/alerts.component.html b/src/app/cms/alerts/alerts.component.html new file mode 100644 index 00000000..44aa3b55 --- /dev/null +++ b/src/app/cms/alerts/alerts.component.html @@ -0,0 +1,57 @@ + + + + + +

+ Help +

+ + + + + + + + + + + + + + + + + + Select Domain
+ {{domainLabel}} + + + + + Filter By + + + + +
+ + +
+ +
+ + +
+ + + diff --git a/src/app/cms/alerts/alerts.component.scss b/src/app/cms/alerts/alerts.component.scss new file mode 100644 index 00000000..e69de29b diff --git a/src/app/cms/alerts/alerts.component.spec.ts b/src/app/cms/alerts/alerts.component.spec.ts new file mode 100644 index 00000000..db644c66 --- /dev/null +++ b/src/app/cms/alerts/alerts.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { AlertsComponent } from './alerts.component'; + +describe('AlertsComponent', () => { + let component: AlertsComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ AlertsComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(AlertsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/cms/alerts/alerts.component.ts b/src/app/cms/alerts/alerts.component.ts new file mode 100644 index 00000000..54cf1688 --- /dev/null +++ b/src/app/cms/alerts/alerts.component.ts @@ -0,0 +1,57 @@ +import { Component, OnInit, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { ActivatedRoute } from '@angular/router'; +import { SideNavigationModel, NavigationMode } from '@gsa-sam/components'; +import { SamModelService } from '../../model/sam-model.service'; +import { AlertService } from './alert-service/alert.service'; +import { cmsSideNav} from './navigation.data'; + + +@Component({ + selector: 'app-alerts', + templateUrl: './alerts.component.html', + styleUrls: ['./alerts.component.scss'], + //changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AlertsComponent implements OnInit { + + domain: string; + + public subheader = { + actions: [ + { id: 'downloadAction', icon: 'downloadAction', text: 'Download' }, + { id: 'saveAction', icon: 'downloadAction', text: 'Save' } + ] + }; + + // sideNavModel = cmsSideNav; + + + constructor(private route: ActivatedRoute, public service: AlertService, public model: SamModelService, private change: ChangeDetectorRef,) { + } + + ngOnInit() { + this.domain = this.route.snapshot.queryParamMap.get('domain'); + this.route.queryParamMap.subscribe(queryParams => { + this.domain = queryParams.get('domain'); + if(!this.domain) { + this.domain = 'all'; + } + }); +} + +ngAfterViewInit() { + this.change.detectChanges(); +} + +public sideNavModel: SideNavigationModel = cmsSideNav; + +log(value) { + console.log(`%cLog: ${value}`, 'color: blue; font-weight: bold'); +} + + // subheaderActionClicked(action) { + // console.log(`%cLog: Action Clicked `+action, 'color: blue; font-weight: bold'); + // } + +} diff --git a/src/app/cms/alerts/alerts.module.ts b/src/app/cms/alerts/alerts.module.ts new file mode 100644 index 00000000..a5887e74 --- /dev/null +++ b/src/app/cms/alerts/alerts.module.ts @@ -0,0 +1,44 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { FontAwesomeModule } from '@fortawesome/angular-fontawesome'; +import { SdsSubheaderModule, SearchListServiceModule } from '@gsa-sam/layouts'; +import { + SdsToolbarModule, + SdsAccordionModule, + SdsPageModule, + SdsSearchModule, + SdsSideNavigationModule, +} from '@gsa-sam/components'; + +import { SdsFiltersModule } from '@gsa-sam/sam-formly'; +import { AlertsRoutingModule } from './alerts-routing.module'; +import { AlertsComponent } from './alerts.component'; +import { AlertFiltersModule } from './alert-filters/alert-filters.module'; +import { HelpItemModule } from '../../help/help-item/help-item.module'; +import { AlertItemComponent } from './alert-item/alert-item.component'; +import { AlertService } from './alert-service/alert.service'; +import { AlertServiceModule } from './alert-service/alert-service.module'; +import { SDSFormlyUpdateComunicationService } from '@gsa-sam/sam-formly'; + +@NgModule({ + declarations: [AlertsComponent, AlertItemComponent], + imports: [ + CommonModule, + AlertsRoutingModule, + FontAwesomeModule, + AlertFiltersModule, + SdsSubheaderModule, + SdsSearchModule, + SdsToolbarModule, + SdsAccordionModule, + SdsPageModule, + SdsSideNavigationModule, + SdsFiltersModule, + SearchListServiceModule, + HelpItemModule, + AlertServiceModule + ], + exports: [AlertsComponent, AlertItemComponent], + providers: [AlertService, SDSFormlyUpdateComunicationService] +}) +export class AlertsModule { } diff --git a/src/app/cms/alerts/navigation.data.ts b/src/app/cms/alerts/navigation.data.ts new file mode 100644 index 00000000..7b357180 --- /dev/null +++ b/src/app/cms/alerts/navigation.data.ts @@ -0,0 +1,10 @@ +import { SideNavigationModel, NavigationMode } from '@gsa-sam/components'; + +export let cmsSideNav: SideNavigationModel = { + navigationLinks: [ + { id: 'alerts', text: 'Alerts', mode: NavigationMode.INTERNAL, route: '/cms/alerts' }, + { id: 'news', text: 'News', mode: NavigationMode.INTERNAL, route: '/news' }, + { id: 'release-notes', text: 'Release Notes', mode: NavigationMode.INTERNAL, route: '/about/release-notes' } + + ] +}; \ No newline at end of file