Project page fixes and improvements

src/app/models/project.ts

@@ -1,11 +1,15 @@
+import { User } from './user';
+
 export class Project {
     id: Number;
     title: string;
     color: string;
+    members: User[];
 
-    public constructor(id=null, title=null, color=null) {
+    public constructor(id=null, title=null, color=null, members: User[]=null) {
         this.id = id;
         this.title = title;
         this.color = color;
+        this.members = members;
     }
 }

src/app/pages/activities/modal-activities-filter/modal-activities-filter.component.ts

@@ -23,7 +23,7 @@ export class ModalActivitiesFilterComponent implements OnInit {
     ) { }
 
     ngOnInit() {
-        const projectListNextObs = this.projectService.getProjects()
+        const projectListNextObs = this.projectService.getUserProjects()
             .subscribe(projects => {
                 this.projectService.announceProjectList(projects);
             });

src/app/pages/activities/modal-add-activity/modal-add-activity.component.ts

@@ -162,7 +162,7 @@ export class ModalAddActivityComponent implements OnInit {
     }
 
     getProjectSelectData() {
-        this.projectService.getProjects()
+        this.projectService.getUserProjects()
             .subscribe(
                 result => {
                     this.projects = result;

src/app/pages/projects/modal-add-project/form-add-project/form-add-project.component.html

@@ -1,31 +1,38 @@
-<ngb-tabset #tabsetAddProject="ngbTabset">
-    <ngb-tab id="tab-selectbyid1">
-        <ng-template ngbTabTitle><b>1. General</b></ng-template>
-        <ng-template ngbTabContent>
-            <form [formGroup]="createProjectForm">
-                <label>
-                    Project Title:
-                    <input
-                        formControlName="title"
-                        type="text"
-                    />
-                </label>
+<div class="create-project-form-container">
+    <form [formGroup]="projectForm">
+        <mat-form-field>
+            <input
+                matInput
+                formControlName="title"
+                type="text"
+                placeholder="Project Title"
+            />
+            <mat-error *ngIf="projectForm.controls.title.hasError('required')">
+                Project title is <strong>required</strong>
+            </mat-error>
+        </mat-form-field>
 
-                <input
-                    formControlName="color"
-                    ejs-colorpicker
-                    type="color"
-                    #colorPicker
-                    id="colorpicker"
-                />
-            </form>
-        </ng-template>
-    </ngb-tab>
-    <ngb-tab id="tab-selectbyid2">
-        <ng-template ngbTabTitle><b>2. Invite Members</b></ng-template>
-        <ng-template ngbTabContent>
-            <p>There you could add members to your project</p>
-            <projects-members-chips></projects-members-chips>
-        </ng-template>
-    </ngb-tab>
-</ngb-tabset>
+        <mat-form-field>
+            <input
+                matInput
+                type="text"
+                placeholder="Add member"
+                [matAutocomplete]="auto"
+                formControlName="members"
+            />
+            <mat-autocomplete (optionSelected)="addMember($event)"  #auto="matAutocomplete" [displayWith]="displayInputWith">
+                <mat-option *ngFor="let user of filteredUsers" [value]="user">
+                    {{
+                        user.firstName + " " + user.lastName + " (" + user.email + ")"
+                    }}
+                </mat-option>
+            </mat-autocomplete>
+        </mat-form-field>
+
+        <project-members
+            (removeMemberEvent)="removeMember($event)"
+            [selectedMembers]="selectedMembers"
+        >
+        </project-members>
+    </form>
+</div>

src/app/pages/projects/modal-add-project/form-add-project/form-add-project.component.scss

@@ -0,0 +1,21 @@
+::ng-deep .cdk-overlay-container {
+    z-index: 1051;
+}
+
+::ng-deep .modal-dialog {
+    max-width: 580px;
+}
+
+.create-project-form-container {
+    display: flex;
+    justify-content: center;
+}
+
+.create-project-form-container > form {
+    width: 90%;
+}
+
+mat-form-field {
+    display: block;
+    padding-bottom: 15px;
+}

src/app/pages/projects/modal-add-project/form-add-project/form-add-project.component.ts

@@ -1,31 +1,129 @@
-import { Component, OnInit } from '@angular/core';
-import { FormGroup, FormBuilder, FormControl } from '@angular/forms';
-import { Project } from '../../../../models/project';
-import { ProjectService } from '../../../../services/project.service';
+import { Component, OnInit, Input } from "@angular/core";
+import { FormGroup, FormBuilder, Validators } from "@angular/forms";
+import { Project } from "../../../../models/project";
+import { ProjectService } from "../../../../services/project.service";
+import { User } from "../../../../models/user";
+import { Subscription, Observable } from "rxjs";
+import { UserService } from "../../../../services/user.service";
+import { map } from 'rxjs/operators';
 
 @Component({
-    selector: 'form-add-project',
-    templateUrl: './form-add-project.component.html',
-    styleUrls: ['./form-add-project.component.scss']
+    selector: "form-add-project",
+    templateUrl: "./form-add-project.component.html",
+    styleUrls: ["./form-add-project.component.scss"]
 })
 export class FormAddProjectComponent implements OnInit {
-    createProjectForm: FormGroup;
+    @Input() editData: any
+    projectForm: FormGroup;
 
-    constructor(private formBuilder: FormBuilder, private projectService: ProjectService) {
-    }
+    protected users: User[] = [];
+    protected filteredUsers: User[] = [];
+    protected selectedMembers: User[] = [];
+
+    private sub: Subscription = new Subscription();
+
+    constructor(
+        private formBuilder: FormBuilder,
+        private projectService: ProjectService,
+        private userService: UserService,
+    ) {}
 
     ngOnInit() {
-        this.createProjectForm = this.formBuilder.group({
-            title: '',
-            color: ''
-        })
+        this.createProjectForm();
+        this.addSubscriptions();
     }
 
-    submitCreateProjectForm() {
-        const projectData: Project = this.createProjectForm.value as Project;
+    ngOnDestroy() {
+        if (this.sub) {
+            this.sub.unsubscribe();
+        }
+    }
 
-        this.projectService.createProject(projectData).subscribe(newProject => {
-            this.projectService.announceNewProject(newProject)
+    submitProjectForm() {
+        if (this.projectForm.valid) {
+            let projectData: Project = this.projectForm.value as Project;
+            projectData.members = this.selectedMembers;
+
+            if (this.editData) {
+                projectData.id = this.editData.id;
+
+                this.projectService.updateProject(projectData).subscribe(updatedProject => {
+                    this.projectService.announceNewProject(updatedProject);
+                });
+            }
+            else {
+                this.projectService.createProject(projectData).subscribe(newProject => {
+                    this.projectService.announceNewProject(newProject);
+                });
+            }
+        }
+        else {
+            this.projectForm.markAllAsTouched();
+        }
+    }
+
+    protected displayInputWith() {
+        return "";
+    }
+
+    protected addMember({ option: { value } }) {
+        this.selectedMembers.push(value);
+        this.users.splice(this.users.indexOf(value), 1);
+    }
+
+    protected removeMember(member) {
+        this.selectedMembers.splice(this.selectedMembers.indexOf(member), 1);
+        this.users.push(member);
+    }
+
+    private createProjectForm(): void {
+        this.projectForm = this.formBuilder.group({
+            title: ["", [Validators.required]],
+            color: [""],
+            members: [[]],
+        });
+
+        this.projectForm.controls.members.valueChanges.subscribe(
+            filterValue => {
+                if (typeof filterValue === "string") {
+                    filterValue = filterValue.toLowerCase();
+
+                    this.filteredUsers = this.users.filter(user =>
+                        user.firstName.toLowerCase().includes(filterValue)
+                    );
+                }
+            }
+        );
+
+        if (this.editData) {
+            this.patchValues();
+        }
+    }
+
+    private patchValues(): void {
+        this.projectForm.patchValue({
+            title: this.editData.title,
         });
+
+        this.selectedMembers = this.editData.members;
+    }
+
+    private addSubscriptions(): void{
+        const getUsersSub = this.userService.getAllUsers()
+            .pipe(
+                map(users => {
+                    if (this.editData) {
+                        users = users.filter(user => !this.editData.members.some(member => user.id === member.id))
+                    }
+
+                    return users
+                })
+            )
+            .subscribe(users => {
+                this.users = users;
+                this.filteredUsers = users;
+            })
+
+        this.sub.add(getUsersSub);
     }
 }

src/app/pages/projects/modal-add-project/form-add-project/project-members/project-members-view-cell.component.ts

@@ -0,0 +1,25 @@
+import { Component} from "@angular/core";
+import { ViewCell } from 'ng2-smart-table';
+import { MatDialog } from '@angular/material/dialog';
+import { ProjectMembersComponent } from './project-members.component';
+import { User } from '../../../../../models/user';
+
+@Component({
+    selector: "project-members-dialog",
+    template: `<span (click)="openDialog()">See members...</span>`,
+    styles: ['span { cursor: pointer; color: blue; text-decoration: underline; }']
+})
+export class ProjectMembersViewCell implements ViewCell {
+    value: any;
+    rowData: any;
+
+    constructor(private membersDialog: MatDialog) { }
+
+    openDialog() {
+        const dialogInstance = this.membersDialog.open(ProjectMembersComponent);
+        const componentInstance = dialogInstance.componentInstance;
+
+        componentInstance.viewMode = true;
+        componentInstance.selectedMembers = this.value as User[];
+    }
+}

src/app/pages/projects/modal-add-project/form-add-project/project-members/project-members.component.html

@@ -0,0 +1,13 @@
+<nb-card size="small">
+    <span class="no-members-message text-muted" *ngIf="!selectedMembers.length">No members selected</span>
+    <nb-list *ngIf="selectedMembers.length">
+        <nb-list-item *ngFor="let member of selectedMembers">
+            <nb-user
+                [name]="[member.firstName + ' ' + member.lastName + ' (' + member.email + ')']"
+                [picture]="member.photoUrl"
+            >
+            </nb-user>
+            <nb-icon *ngIf="!viewMode" (click)="removeMember(member)" icon="person-remove-outline"></nb-icon>
+        </nb-list-item>
+    </nb-list>
+</nb-card>