#79 :: Filter With Overlay.

ui/projects/spline-common/main/src/common/component/date-range-filter/spline-date-range-filter.component.html

@@ -16,7 +16,8 @@
 
 <ng-container *ngIf="state$ | async as state">
 
-    <spline-inline-filter [icon]="icon" [matMenuTriggerFor]="popover"
+    <spline-inline-filter [icon]="icon"
+                          [matMenuTriggerFor]="popover"
                           [label]="label">
         {{ state.valueString?.length ? state.valueString : (emptyValueString | translate) }}
     </spline-inline-filter>

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 @@
+<!--
+  ~ 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.
+  -->
+
+
+<spline-inline-filter [icon]="icon"
+                      [matMenuTriggerFor]="overlay"
+                      [label]="label">
+    {{ filterStringValues }}
+</spline-inline-filter>
+
+<mat-menu #overlay="matMenu" class="spline-inline-filter-overlay">
+    <ng-template matMenuContent>
+        <div (click)="$event.stopPropagation()">
+        <div class="spline-inline-filter-overlay__content-wrapper">
+            <!-- VALUE CONTROL -->
+            <ng-content></ng-content>
+            <!-- VALUE CONTROL -->
+        </div>
+
+        <!-- ACTIONS -->
+        <div class="spline-inline-filter-overlay__footer-wrapper">
+            <div class="spline-inline-filter-overlay__actions">
+
+                <div class="spline-inline-filter-overlay__actions-left">
+                    <!-- CLEAR -->
+                    <button mat-button
+                            size="md"
+                            (click)="onClearBtnClicked()">
+                        {{ 'COMMON.CLEAR' | translate }}
+                    </button>
+                    <!-- ./CLEAR -->
+                </div>
+                <div class="spline-inline-filter-overlay__actions-right">
+                    <!-- CANCEL -->
+                    <button mat-button
+                            mat-raised-button
+                            size="md"
+                            (click)="onCancelBtnClicked($event)">
+                        {{ 'COMMON.CANCEL' | translate }}
+                    </button>
+                    <!-- ./CANCEL -->
+
+                    <!-- APPLY -->
+                    <button mat-button
+                            mat-raised-button
+                            color="primary"
+                            size="md"
+                            [disabled]="applyBtnDisabled"
+                            (click)="onApplyBtnClicked($event)">
+                        {{ 'COMMON.APPLY' | translate }}
+                    </button>
+                    <!-- ./APPLY -->
+                </div>
+            </div>
+        </div>
+        <!-- ./ACTIONS -->
+        </div>
+    </ng-template>
+</mat-menu>

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<void>()
+    @Output() cancel$ = new EventEmitter<void>()
+    @Output() reset$ = new EventEmitter<void>()
+    @Output() panelClosed$ = new EventEmitter<void>()
+    @Output() panelOpened$ = new EventEmitter<void>()
+
+    @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()
+    }
+
+}

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 {}
+    }
+}

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
+]

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'

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'

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 {

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';

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;
+            }
+        }
+    }
+}
+

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';

ui/src/modules/events/pages/events-list/events-list.page.component.html

@@ -23,6 +23,8 @@ <h1 class="page-title">
                                  [dataMap]="dataMap"
                                  [dataSource]="dataSource">
 
+        <div class="d-flex">
+
         <spline-date-filter *ngIf="!!state.dateRangeFilter?.bounds"
                             label="Executed At"
                             [showIcon]="false"
@@ -33,6 +35,14 @@ <h1 class="page-title">
 
         </spline-date-filter>
 
+        <spline-inline-filter-with-overlay
+                label="Write Mode"
+                [icon]="'save'"
+                [filterStringValues]="'All'">
+            Some filter will be here.
+        </spline-inline-filter-with-overlay>
+
+        </div>
 
     </spline-search-dynamic-table>
 </div>