Added component search for users

2026-09-09 18:03:21 +00:00 · 2016-11-03 14:36:48 +00:00
parent 0bd05a2d4c
commit 7b0e8e1016
3 changed files with 116 additions and 0 deletions
@@ -0,0 +1,18 @@
+:host {
+    width: 100%;
+}
+
+.activiti-label {
+    font-weight: bolder;
+}
+
+.material-icons:hover {
+    color: rgb(255, 152, 0);
+}
+
+.fix-element-user-list{
+    padding-top: 0px;
+    padding-right: 0px;
+    padding-bottom: 0px;
+    padding-left: 0px;
+}
@@ -0,0 +1,17 @@
+<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+    <input class="mdl-textfield__input" type="text" id="userSearchText"
+           [formControl]="searchUser"/>
+    <label class="mdl-textfield__label" for="userSearchText">Search user</label>
+</div>
+<ul class='mdl-list'>
+    <li class="mdl-list__item fix-element-user-list" *ngFor="let user of userList">
+        <span class="mdl-list__item-primary-content mdl-button mdl-js-button mdl-js-ripple-effect"
+              (click)="onRowClick(user)">
+            <i class="material-icons md-light">face</i>
+            {{ user.firstName }} - {{ user.lastName }}
+        </span>
+    </li>
+    <div *ngIf="userList?.length === 0">
+        No user found to involve
+    </div>
+</ul>
@@ -0,0 +1,81 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * 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, Input, Output, EventEmitter, OnInit, AfterViewInit } from '@angular/core';
+import { FormControl } from '@angular/forms';
+import { User } from '../models/user.model';
+import { Observable } from 'rxjs/Observable';
+
+declare let componentHandler: any;
+
+@Component({
+    selector: 'activiti-people-search',
+    moduleId: module.id,
+    templateUrl: './activiti-people-search.component.html',
+    styleUrls: ['./activiti-people-search.component.css']
+})
+
+export class ActivitiPeopleSearch implements OnInit, AfterViewInit {
+
+    @Input()
+    results: Observable<User[]>;
+
+    @Output()
+    onSearch: EventEmitter<any> = new EventEmitter();
+
+    @Output()
+    onModalRowClicked: EventEmitter<any> = new EventEmitter();
+
+    private searchUser: FormControl = new FormControl();
+
+    userList: User[] = [];
+
+    constructor() {
+        this.searchUser
+            .valueChanges
+            .debounceTime(200)
+            .subscribe((event) => {
+                this.onSearch.emit(event);
+            });
+    }
+
+    ngOnInit() {
+        this.results.subscribe((list) => {
+            this.userList = list;
+        });
+    }
+
+    ngAfterViewInit() {
+        this.setupMaterialComponents(componentHandler);
+    }
+
+    setupMaterialComponents(handler?: any): boolean {
+        // workaround for MDL issues with dynamic components
+        if (handler) {
+            handler.upgradeAllRegistered();
+            return true;
+        }
+        return false;
+    }
+
+    onRowClick(userClicked: User) {
+        this.onModalRowClicked.emit(userClicked);
+        this.userList = this.userList.filter((user) => {
+            return user.id !== userClicked.id;
+        });
+    }
+}