From 1a29b2969fe87f3faa8ce4a4a0afc4b44a6d5fa9 Mon Sep 17 00:00:00 2001 From: Oleksandr Korchak Date: Wed, 19 May 2021 15:22:47 +0200 Subject: [PATCH] #79 :: Filter With Overlay. --- .../spline-date-range-filter.component.html | 3 +- ...-inline-filter-with-overlay.component.html | 72 +++++++++++++++++++ ...ne-inline-filter-with-overlay.component.ts | 66 +++++++++++++++++ ...pline-inline-filter-with-overlay.models.ts | 25 +++++++ .../inline-fitler/components/index.ts | 26 +++++++ .../spline-inline-filter.component.html | 0 .../spline-inline-filter.component.ts | 0 .../inline-fitler/components/public-api.ts | 20 ++++++ .../component/inline-fitler/public-api.ts | 2 +- .../spline-inline-filter.module.ts | 11 ++- .../main/styles/components/index.scss | 2 +- ..._inline-filter-with-overlay.component.scss | 49 +++++++++++++ .../_inline-filter.component.scss | 0 .../components/inline-filter/index.scss | 18 +++++ .../events-list.page.component.html | 10 +++ 15 files changed, 298 insertions(+), 6 deletions(-) create mode 100644 ui/projects/spline-common/main/src/common/component/inline-fitler/components/filter-with-overlay/spline-inline-filter-with-overlay.component.html create mode 100644 ui/projects/spline-common/main/src/common/component/inline-fitler/components/filter-with-overlay/spline-inline-filter-with-overlay.component.ts create mode 100644 ui/projects/spline-common/main/src/common/component/inline-fitler/components/filter-with-overlay/spline-inline-filter-with-overlay.models.ts create mode 100644 ui/projects/spline-common/main/src/common/component/inline-fitler/components/index.ts rename ui/projects/spline-common/main/src/common/component/inline-fitler/{ => components/inline-filter}/spline-inline-filter.component.html (100%) rename ui/projects/spline-common/main/src/common/component/inline-fitler/{ => components/inline-filter}/spline-inline-filter.component.ts (100%) create mode 100644 ui/projects/spline-common/main/src/common/component/inline-fitler/components/public-api.ts create mode 100644 ui/projects/spline-common/main/styles/components/inline-filter/_inline-filter-with-overlay.component.scss rename ui/projects/spline-common/main/styles/components/{ => inline-filter}/_inline-filter.component.scss (100%) create mode 100644 ui/projects/spline-common/main/styles/components/inline-filter/index.scss diff --git a/ui/projects/spline-common/main/src/common/component/date-range-filter/spline-date-range-filter.component.html b/ui/projects/spline-common/main/src/common/component/date-range-filter/spline-date-range-filter.component.html index d1dc81cd..d585c687 100644 --- a/ui/projects/spline-common/main/src/common/component/date-range-filter/spline-date-range-filter.component.html +++ b/ui/projects/spline-common/main/src/common/component/date-range-filter/spline-date-range-filter.component.html @@ -16,7 +16,8 @@ - {{ state.valueString?.length ? state.valueString : (emptyValueString | translate) }} diff --git a/ui/projects/spline-common/main/src/common/component/inline-fitler/components/filter-with-overlay/spline-inline-filter-with-overlay.component.html b/ui/projects/spline-common/main/src/common/component/inline-fitler/components/filter-with-overlay/spline-inline-filter-with-overlay.component.html new file mode 100644 index 00000000..7d3984df --- /dev/null +++ b/ui/projects/spline-common/main/src/common/component/inline-fitler/components/filter-with-overlay/spline-inline-filter-with-overlay.component.html @@ -0,0 +1,72 @@ + + + + + {{ filterStringValues }} + + + + +
+
+ + + +
+ + +
+
+ +
+ + + +
+
+ + + + + + + +
+
+
+ +
+ + diff --git a/ui/projects/spline-common/main/src/common/component/inline-fitler/components/filter-with-overlay/spline-inline-filter-with-overlay.component.ts b/ui/projects/spline-common/main/src/common/component/inline-fitler/components/filter-with-overlay/spline-inline-filter-with-overlay.component.ts new file mode 100644 index 00000000..c49e0b59 --- /dev/null +++ b/ui/projects/spline-common/main/src/common/component/inline-fitler/components/filter-with-overlay/spline-inline-filter-with-overlay.component.ts @@ -0,0 +1,66 @@ +/* + * Copyright 2021 ABSA Group Limited + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + + +import { Component, EventEmitter, Input, Output, ViewChild } from '@angular/core' +import { MatMenuTrigger } from '@angular/material/menu' + +import { SplineInlineFilterWithOverlay } from './spline-inline-filter-with-overlay.models' + + +@Component({ + selector: 'spline-inline-filter-with-overlay', + templateUrl: './spline-inline-filter-with-overlay.component.html' +}) +export class SplineInlineFilterWithOverlayComponent { + + @Input() icon: string + @Input() label: string + @Input() filterStringValues: string[] = [] + + @Input() showActions = true + @Input() applyBtnDisabled = false + @Input() options: SplineInlineFilterWithOverlay.Options = SplineInlineFilterWithOverlay.getDefaultOptions() + + @Output() apply$ = new EventEmitter() + @Output() cancel$ = new EventEmitter() + @Output() reset$ = new EventEmitter() + @Output() panelClosed$ = new EventEmitter() + @Output() panelOpened$ = new EventEmitter() + + @ViewChild(MatMenuTrigger, { static: false }) matMenuTrigger: MatMenuTrigger + + + onClearBtnClicked(): void { + this.reset$.emit() + this.closePanel() + } + + onCancelBtnClicked($event: MouseEvent): void { + this.cancel$.emit() + this.closePanel() + } + + onApplyBtnClicked($event: MouseEvent): void { + this.apply$.emit() + this.closePanel() + } + + private closePanel(): void { + this.matMenuTrigger.closeMenu() + } + +} diff --git a/ui/projects/spline-common/main/src/common/component/inline-fitler/components/filter-with-overlay/spline-inline-filter-with-overlay.models.ts b/ui/projects/spline-common/main/src/common/component/inline-fitler/components/filter-with-overlay/spline-inline-filter-with-overlay.models.ts new file mode 100644 index 00000000..02665d67 --- /dev/null +++ b/ui/projects/spline-common/main/src/common/component/inline-fitler/components/filter-with-overlay/spline-inline-filter-with-overlay.models.ts @@ -0,0 +1,25 @@ +/* + * Copyright 2021 ABSA Group Limited + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + + +export namespace SplineInlineFilterWithOverlay { + + export type Options = {} + + export function getDefaultOptions(): Options { + return {} + } +} diff --git a/ui/projects/spline-common/main/src/common/component/inline-fitler/components/index.ts b/ui/projects/spline-common/main/src/common/component/inline-fitler/components/index.ts new file mode 100644 index 00000000..4013c198 --- /dev/null +++ b/ui/projects/spline-common/main/src/common/component/inline-fitler/components/index.ts @@ -0,0 +1,26 @@ +/* + * Copyright 2021 ABSA Group Limited + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { SplineInlineFilterWithOverlayComponent } from './filter-with-overlay/spline-inline-filter-with-overlay.component' +import { SplineInlineFilterComponent } from './inline-filter/spline-inline-filter.component' + + +export * from './public-api' + +export const splineInlineFiltersComponents = [ + SplineInlineFilterWithOverlayComponent, + SplineInlineFilterComponent +] diff --git a/ui/projects/spline-common/main/src/common/component/inline-fitler/spline-inline-filter.component.html b/ui/projects/spline-common/main/src/common/component/inline-fitler/components/inline-filter/spline-inline-filter.component.html similarity index 100% rename from ui/projects/spline-common/main/src/common/component/inline-fitler/spline-inline-filter.component.html rename to ui/projects/spline-common/main/src/common/component/inline-fitler/components/inline-filter/spline-inline-filter.component.html diff --git a/ui/projects/spline-common/main/src/common/component/inline-fitler/spline-inline-filter.component.ts b/ui/projects/spline-common/main/src/common/component/inline-fitler/components/inline-filter/spline-inline-filter.component.ts similarity index 100% rename from ui/projects/spline-common/main/src/common/component/inline-fitler/spline-inline-filter.component.ts rename to ui/projects/spline-common/main/src/common/component/inline-fitler/components/inline-filter/spline-inline-filter.component.ts diff --git a/ui/projects/spline-common/main/src/common/component/inline-fitler/components/public-api.ts b/ui/projects/spline-common/main/src/common/component/inline-fitler/components/public-api.ts new file mode 100644 index 00000000..4fc95ab5 --- /dev/null +++ b/ui/projects/spline-common/main/src/common/component/inline-fitler/components/public-api.ts @@ -0,0 +1,20 @@ +/* + * Copyright 2021 ABSA Group Limited + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +export * from './filter-with-overlay/spline-inline-filter-with-overlay.component' +export * from './filter-with-overlay/spline-inline-filter-with-overlay.models' + +export * from './inline-filter/spline-inline-filter.component' diff --git a/ui/projects/spline-common/main/src/common/component/inline-fitler/public-api.ts b/ui/projects/spline-common/main/src/common/component/inline-fitler/public-api.ts index 55eb7e12..83517815 100644 --- a/ui/projects/spline-common/main/src/common/component/inline-fitler/public-api.ts +++ b/ui/projects/spline-common/main/src/common/component/inline-fitler/public-api.ts @@ -14,5 +14,5 @@ * limitations under the License. */ -export * from './spline-inline-filter.component' +export * from './components/public-api' export * from './spline-inline-filter.module' diff --git a/ui/projects/spline-common/main/src/common/component/inline-fitler/spline-inline-filter.module.ts b/ui/projects/spline-common/main/src/common/component/inline-fitler/spline-inline-filter.module.ts index 6134e248..0f713bbf 100644 --- a/ui/projects/spline-common/main/src/common/component/inline-fitler/spline-inline-filter.module.ts +++ b/ui/projects/spline-common/main/src/common/component/inline-fitler/spline-inline-filter.module.ts @@ -18,24 +18,29 @@ import { CommonModule } from '@angular/common' import { NgModule } from '@angular/core' import { MatButtonModule } from '@angular/material/button' import { MatIconModule } from '@angular/material/icon' +import { MatMenuModule } from '@angular/material/menu' +import { SplineTranslateModule } from 'spline-utils/translate' import { SplineIconModule } from '../icon' -import { SplineInlineFilterComponent } from './spline-inline-filter.component' +import { splineInlineFiltersComponents } from './components' + @NgModule({ declarations: [ - SplineInlineFilterComponent, + ...splineInlineFiltersComponents, ], imports: [ CommonModule, MatIconModule, MatButtonModule, SplineIconModule, + MatMenuModule, + SplineTranslateModule, ], exports: [ - SplineInlineFilterComponent + ...splineInlineFiltersComponents ], }) export class SplineInlineFilterModule { diff --git a/ui/projects/spline-common/main/styles/components/index.scss b/ui/projects/spline-common/main/styles/components/index.scss index 90a75df5..342f0a9c 100644 --- a/ui/projects/spline-common/main/styles/components/index.scss +++ b/ui/projects/spline-common/main/styles/components/index.scss @@ -30,4 +30,4 @@ @import './sort-header.component'; @import './no-result.component'; @import './tabs-nav-bar'; -@import './inline-filter.component'; +@import './inline-filter/index'; diff --git a/ui/projects/spline-common/main/styles/components/inline-filter/_inline-filter-with-overlay.component.scss b/ui/projects/spline-common/main/styles/components/inline-filter/_inline-filter-with-overlay.component.scss new file mode 100644 index 00000000..b3830ae3 --- /dev/null +++ b/ui/projects/spline-common/main/styles/components/inline-filter/_inline-filter-with-overlay.component.scss @@ -0,0 +1,49 @@ +/*! + * Copyright 2021 ABSA Group Limited + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +@import 'vars'; +@import 'mixins'; + +$min-width: 280px; + + +.spline-inline-filter-overlay { + &__content-wrapper { + min-width: $min-width; + padding: 8px; + } + + &__footer-wrapper { + + } + + &__actions { + display: flex; + padding: 8px; + width: 100%; + + + &-right { + flex-grow: 1; + text-align: right; + + button { + margin-left: 8px; + } + } + } +} + diff --git a/ui/projects/spline-common/main/styles/components/_inline-filter.component.scss b/ui/projects/spline-common/main/styles/components/inline-filter/_inline-filter.component.scss similarity index 100% rename from ui/projects/spline-common/main/styles/components/_inline-filter.component.scss rename to ui/projects/spline-common/main/styles/components/inline-filter/_inline-filter.component.scss diff --git a/ui/projects/spline-common/main/styles/components/inline-filter/index.scss b/ui/projects/spline-common/main/styles/components/inline-filter/index.scss new file mode 100644 index 00000000..a7a7cfaa --- /dev/null +++ b/ui/projects/spline-common/main/styles/components/inline-filter/index.scss @@ -0,0 +1,18 @@ +/* + * Copyright 2021 ABSA Group Limited + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +@import './inline-filter.component'; +@import './inline-filter-with-overlay.component'; diff --git a/ui/src/modules/events/pages/events-list/events-list.page.component.html b/ui/src/modules/events/pages/events-list/events-list.page.component.html index d842646a..49a1a02e 100644 --- a/ui/src/modules/events/pages/events-list/events-list.page.component.html +++ b/ui/src/modules/events/pages/events-list/events-list.page.component.html @@ -23,6 +23,8 @@

[dataMap]="dataMap" [dataSource]="dataSource"> +
+ + + Some filter will be here. + + +