people filter

.editorconfig

@@ -4,7 +4,6 @@ root = true
 [*]
 charset = utf-8
 indent_style = space
-indent_size = 2
 insert_final_newline = true
 trim_trailing_whitespace = true
 

api/controllers/SettingsController.php

@@ -3,8 +3,10 @@
 namespace app\controllers;
 
 use app\models\Settings;
-use yii\web\BadRequestHttpException;
 use app\helpers\Access;
+use yii\web\BadRequestHttpException;
+use yii\web\UnprocessableEntityHttpException;
+use app\enums\SettingSection;
 
 class SettingsController extends MHController
 {
@@ -15,7 +17,7 @@ public function behaviors()
             'class' => \yii\filters\AccessControl::className(),
             'rules' => [
                 [
-                    'actions' => ['list','upsert', 'upsert-people-filter'],
+                    'actions' => ['list','upsert', 'upsert-people-filter', 'delete-people-filter'],
                     'allow' => true,
                     'roles' => ['@'],
                 ],
@@ -29,10 +31,10 @@ public function behaviors()
      */
     public function beforeAction($action)
     {
-        if ($action->id == 'update-or-create') {
+        $allowed = ['upsert-people-filter', 'delete-people-filter'];
+        if (in_array($action->id, $allowed)) {
             $this->enableCsrfValidation = false;
         }
-
         return parent::beforeAction($action);
     }
 
@@ -45,8 +47,7 @@ public function actionList()
             ->all();
         foreach ($settings as $setting) {
             if ($setting->key == 'filter') {
-                $ret[$setting->section]['filter']['filters'][] = json_decode($setting->value);
-                // $ret[$setting->section]['filter']['current'] = '';
+                $ret[$setting->section]['filter']['saved'][] = json_decode($setting->value);
             } else {
                 $ret[$setting->section][$setting->key] = json_decode($setting->value);
             }
@@ -56,14 +57,55 @@ public function actionList()
 
     public function actionUpsertPeopleFilter()
     {
-        $ret = [];
         $post = \Yii::$app->request->post();
-        $settings = $setting = Settings::findOne([
-            'section'=>'people',
-            'key'=>'filter',
-            'personId'=>Access::userId()]);
-        var_dump($post);
-        return $ret;
+        if (!isset($post['term'])) {
+            throw new BadRequestHttpException('Missing parameter "term"');
+        }
+        $term = trim($post['term']);
+        $setting = null;
+
+        try {
+            $settings = $setting = Settings::findOne([
+                'section'=>SettingSection::PEOPLE,
+                'key'=>'filter',
+                'value'=>json_encode($term),
+                'personId'=>Access::userId()]);
+            if (!$settings) {
+                $setting = new Settings();
+                $setting->section = SettingSection::PEOPLE;
+                $setting->personId = Access::userId();
+                $setting->key = 'filter';
+                $setting->value = json_encode($term);
+                $setting->save();
+            }
+        } catch (\Throwable $e) {
+            throw new UnprocessableEntityHttpException(json_encode($e->getMessage()));
+        }
+        return $setting->toResponseArray();
+    }
+
+    public function actionDeletePeopleFilter()
+    {
+        $post = \Yii::$app->request->post();
+        if (!isset($post['term'])) {
+            throw new BadRequestHttpException('Missing parameter "term"');
+        }
+        $term = trim($post['term']);
+        $setting = null;
+
+        try {
+            $settings = $setting = Settings::findOne([
+                'section'=>SettingSection::PEOPLE,
+                'key'=>'filter',
+                'value'=>json_encode($term),
+                'personId'=>Access::userId()]);
+            if ($settings) {
+                $setting->delete();
+            }
+        } catch (\Throwable $e) {
+            throw new UnprocessableEntityHttpException(json_encode($e->getMessage()));
+        }
+        return $term;
     }
 
     public function actionUpsert()

api/enums/SettingSection.php

@@ -0,0 +1,10 @@
+<?php
+namespace app\enums;
+
+class SettingSection extends Enum
+{
+    const PEOPLE = 'people';
+    const LAYOUT = 'layout';
+    const SYSTEM = 'system';
+    const DASHBOARD = 'dashboard';
+}

api/models/Settings.php

@@ -33,6 +33,7 @@ public function rules()
             [['value'], 'string'],
             [['personId'], 'integer'],
             [['key'], 'string', 'max' => 255],
+            ['section', 'in', 'range'=>\app\enums\SettingSection::getValidValues()],
             [['personId'], 'exist', 'skipOnError' => true, 'targetClass' => Person::className(), 'targetAttribute' => ['personId' => 'id']],
         ];
     }

apps/web/src/app/common/auth-guard.service.ts

@@ -25,7 +25,7 @@ export class AuthGuard implements CanActivate {
       isExpired = this._authSrv.isTokenExpired();
       if (authenticated && isExpired) {
         this._dialogSrv.login('Your session expired').subscribe((confirmed: any) => {
-          console.log(confirmed);
+          // console.log(confirmed);
         });
       } else if (!authenticated) {
         this._router.navigate(['/login']);

apps/web/src/app/common/components/filter/filter.component.html

@@ -21,7 +21,7 @@
                 </mat-form-field>
                 <button mat-icon-button [matMenuTriggerFor]="saveMenu"><mat-icon>more_vert</mat-icon></button>
                 <mat-menu #saveMenu="matMenu">
-                    <button mat-menu-item (click)="saveFilter()">
+                    <button mat-menu-item (click)="saveFilter()" [disabled]="isSaveable()">
                         <span i18n="@@btn.save.filter">Save Filter</span>
                     </button>
                     <button mat-menu-item disabled>
@@ -33,9 +33,16 @@
                 </mat-menu>
             </div>
             <div fxLayout="column" fxLayoutGap="10px">
-                <h5 fxFlex>Saved Filters</h5>
+                <h5 fxFlex i18n="@@filter.saved">Saved Filters</h5>
                 <mat-chip-list>
-                    <mat-chip *ngFor="let filter of savedFilters">{{filter}}</mat-chip>
+                    <mat-chip *ngFor="let filter of savedFilters"
+                              (click)="setFilter(filter, $event)"
+                              (remove)="deleteFilter(filter)"
+                              [color]="highlightSelected(filter)"
+                              [selected]="isSelectedFilter(filter)">
+                        {{filter}}
+                        <mat-icon matChipRemove>cancel</mat-icon>
+                    </mat-chip>
                 </mat-chip-list>
             </div>
         </form>

apps/web/src/app/common/components/filter/filter.component.ts

@@ -1,14 +1,25 @@
-import { Component, EventEmitter, Output } from '@angular/core';
+import { ChangeDetectionStrategy, Component, EventEmitter, Output } from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
-import { AppState, getPeopleFilterSettings, SavePeopleFilterAction, PersistPeopleFilterAction } from '@memberhivex/core';
+import { MatChipSelectionChange } from '@angular/material';
+import {
+  AppState,
+  getPeopleFilterSettings,
+  SavePeopleFilterAction,
+  PersistPeopleFilterAction,
+  DeletePeopleFilterAction,
+  Filter
+} from '@memberhivex/core';
 import { Store } from '@ngrx/store';
 
 @Component({
   selector: 'mh-filter',
   templateUrl: './filter.component.html',
-  styleUrls: ['./filter.component.scss']
+  styleUrls: ['./filter.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class FilterComponent {
+  private _deleteFilter: boolean = false;
+
   @Output() filters: EventEmitter<any> = new EventEmitter<any>();
 
   form: FormGroup;
@@ -20,30 +31,68 @@ export class FilterComponent {
       filter: ['']
     });
     this._store.select(getPeopleFilterSettings).subscribe((filter: any) => {
-      console.log(filter);
-      if (filter.hasOwnProperty('filters') && filter.filters.length > 0) {
-        this.savedFilters = filter.filters;
+      if (filter && filter.hasOwnProperty('saved') && filter.saved.length > 0) {
+        this.savedFilters = filter.saved;
       }
-      // this.form.get('filter').patchValue(filter);
-      // this.hasFilter = !!filter;
     });
   }
 
   filtering(): void {
-    this.filters.emit(this.form.get('filter').value);
+    this.filters.emit(this.activeFilter());
     setTimeout(() => {
-        this._store.dispatch(new PersistPeopleFilterAction(this.form.get('filter').value));
+        this._store.dispatch(new PersistPeopleFilterAction(this.activeFilter()));
     }, 500)
   }
 
-  // persists the filter in memory
+  // persists the filter in memory accross pages
   persistFilter(): void {
-    this.filters.emit(this.form.get('filter').value);
-    this._store.dispatch(new PersistPeopleFilterAction(this.form.get('filter').value));
+    this.filters.emit(this.activeFilter());
+    this._store.dispatch(new PersistPeopleFilterAction(this.activeFilter()));
   }
 
   // saves the filter to the Db as a personal filter
   saveFilter(): void {
-    this._store.dispatch(new SavePeopleFilterAction(this.form.get('filter').value));
+    this._store.dispatch(new SavePeopleFilterAction(this.filterPayload()));
+  }
+
+  setFilter(filter: any, $event: any): void {
+    const filterValue: string = this.activeFilter() !== filter ? filter : '';
+    if ($event.srcElement.tagName === 'MAT-CHIP') {
+      this.form.get('filter').patchValue(filterValue);
+      this.filters.emit(filterValue);
+      this._store.dispatch(new PersistPeopleFilterAction(filterValue));
+    }
+  }
+
+  deleteFilter(filter: any): void {
+    this._store.dispatch(new DeletePeopleFilterAction(filter));
+    if (this.activeFilter() === filter) {
+        this.form.get('filter').patchValue('');
+    }
+  }
+
+  activeFilter(): string {
+    return this.form.get('filter').value;
+  }
+
+  highlightSelected(filter: string): string {
+    return this.isSelectedFilter(filter) ? 'accent' : 'default';
+  }
+
+  isSelectedFilter(filter: string): boolean {
+    return this.activeFilter() === filter;
+  }
+
+  isSaveable(): boolean {
+    return this.activeFilter()
+        ? this.savedFilters.some((term: string) => term === this.activeFilter())
+        : false;
+  }
+
+  private filterPayload(): Filter {
+    return {
+      term: this.activeFilter(),
+      saved: this.savedFilters
+    }
   }
 }

libs/core/src/common/common.model.ts

@@ -40,8 +40,8 @@ export interface FilterSet {
 }
 
 export interface Filter {
-  current?: string;
-  filters?: string[];
+  term?: string;
+  saved?: string[];
 }
 
 export enum FormStatus {

libs/core/src/modules/auth/auth.reducer.ts

@@ -69,7 +69,6 @@ export function authReducer(state: AuthState = initialAuthState, action: actions
       });
 
     case actions.SIGN_OUT_SUCCESS: {
-      console.log('sign out success');
       return Object.assign({}, state, initialAuthState);
     }
 

libs/core/src/modules/auth/auth.service.ts

@@ -102,6 +102,6 @@ export class AuthService {
   retryFailedRequests(): void {
     // retry the requests. this method can
     // be called after the token is refreshed
-    console.log(this._cachedRequests);
+    // console.log(this._cachedRequests);
   }
 }

libs/core/src/modules/settings/settings.actions.ts

@@ -1,6 +1,7 @@
 import { Action } from '@ngrx/store';
 import { ContextButton, SettingsPayload } from './settings.model';
 import { SettingsState } from './settings.reducer';
+import { Filter } from '../../common/common.model';
 
 export enum SettingsActionTypes {
   LIST_SETTINGS = '[Settings] List',
@@ -15,7 +16,10 @@ export enum SettingsActionTypes {
   CLEAR_SETTINGS_MESSAGE = '[Settings] Clear Message',
   SET_CONTEXT_BUTTONS = '[Settings:Context Buttons] Set Context Buttons',
   SAVE_PEOPLE_FILTER = '[Settings:Filter] Save people filter',
-  PERSIST_PEOPLE_FILTER = '[Settings:Filter] Persist people filter'
+  SAVE_PEOPLE_FILTER_SUCCESS = '[Settings:Filter] Save people filter success',
+  PERSIST_PEOPLE_FILTER = '[Settings:Filter] Persist people filter',
+  DELETE_PEOPLE_FILTER = '[Settings:Filter] Delete people filter',
+  DELETE_PEOPLE_FILTER_SUCCESS = '[Settings:Filter] Delete people filter success'
 }
 
 export class ListSettingAction implements Action {
@@ -78,7 +82,22 @@ export class PersistPeopleFilterAction implements Action {
 
 export class SavePeopleFilterAction implements Action {
   readonly type = SettingsActionTypes.SAVE_PEOPLE_FILTER;
-  constructor(public payload: string) {}
+  constructor(public payload: Filter) {}
+}
+
+export class DeletePeopleFilterAction implements Action {
+    readonly type = SettingsActionTypes.DELETE_PEOPLE_FILTER;
+    constructor(public payload: string) {}
+}
+
+export class DeletePeopleFilterSuccessAction implements Action {
+    readonly type = SettingsActionTypes.DELETE_PEOPLE_FILTER_SUCCESS;
+    constructor(public payload: string) {}
+}
+
+export class SavePeopleFilterSuccessAction implements Action {
+    readonly type = SettingsActionTypes.SAVE_PEOPLE_FILTER_SUCCESS;
+    constructor(public payload: string) {}
 }
 
 export type SettingsActions =
@@ -95,4 +114,7 @@ export type SettingsActions =
   | SetContextButtonsAction
   | SavePeopleFilterAction
   | PersistPeopleFilterAction
-  | UpdatePersonalSettingAction;
+  | UpdatePersonalSettingAction
+  | DeletePeopleFilterAction
+  | DeletePeopleFilterSuccessAction
+  | SavePeopleFilterSuccessAction;