[Service provider] add Користувачі tab. Desktop layout

src/app/shared/components/users-list/users-list.component.html

@@ -0,0 +1,39 @@
+<table mat-table [dataSource]="dataSource" matSort (matSortChange)="announceSortChange($event)"
+    class="mat-elevation-z8">
+
+  <!-- Name Column -->
+  <ng-container matColumnDef="name">
+    <th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription="Sort by name">
+      ПІБ
+    </th>
+    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
+  </ng-container>
+
+  <!-- Email Column -->
+  <ng-container matColumnDef="email">
+    <th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription="Sort by email">
+      Емейл
+    </th>
+    <td mat-cell *matCellDef="let element"> {{element.email}} </td>
+  </ng-container>
+
+  <!-- Phone Column -->
+  <ng-container matColumnDef="phone">
+    <th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription="Sort by phone">
+      Телефон
+    </th>
+    <td mat-cell *matCellDef="let element"> {{element.phone}} </td>
+  </ng-container>
+
+    <!-- Name Column -->
+    <ng-container matColumnDef="role">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription="Sort by role">
+        Тип користувача
+      </th>
+      <td mat-cell *matCellDef="let element"> {{element.role}} </td>
+    </ng-container>
+
+
+  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+</table>

src/app/shared/components/users-list/users-list.component.scss

@@ -0,0 +1,3 @@
+table {
+  width: 100%;
+}

src/app/shared/components/users-list/users-list.component.spec.ts

@@ -0,0 +1,27 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { MatTableModule } from '@angular/material/table';
+import { UsersListComponent } from './users-list.component';
+
+describe('UsersListComponent', () => {
+  let component: UsersListComponent;
+  let fixture: ComponentFixture<UsersListComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        MatTableModule],
+      declarations: [ UsersListComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(UsersListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/shared/components/users-list/users-list.component.ts

@@ -0,0 +1,56 @@
+import {LiveAnnouncer} from '@angular/cdk/a11y';
+import {AfterViewInit, Component, Input, OnInit, SimpleChanges, ViewChild} from '@angular/core';
+import {MatSort, Sort} from '@angular/material/sort';
+import {MatTableDataSource} from '@angular/material/table';
+
+/**
+ * @title Table with sorting
+ */
+@Component({
+  selector: 'app-users-list',
+  templateUrl: './users-list.component.html',
+  styleUrls: ['./users-list.component.scss']
+})
+export class UsersListComponent implements OnInit, AfterViewInit {
+
+  @Input() users: Array<object>;
+  @Input() filterValue: string;
+
+
+  displayedColumns: string[];
+  dataSource: MatTableDataSource<object> = new MatTableDataSource([{}]);
+
+  constructor(private _liveAnnouncer: LiveAnnouncer) {}
+
+  @ViewChild(MatSort) sort: MatSort;
+
+  ngOnInit(): void {
+      this.displayedColumns = ['name', 'email', 'phone', 'role'];
+      this.dataSource = new MatTableDataSource(this.users);
+  }
+
+  ngAfterViewInit() {
+    this.dataSource.sort = this.sort;
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+      if (changes.filterValue && changes.filterValue.currentValue) {
+        let filter = changes.filterValue.currentValue;
+        this.dataSource.filter = filter.trim().toLowerCase();
+      } else this.dataSource.filter = "";
+
+      if (changes.users && changes.users.currentValue) {
+        const users = changes.users.currentValue;
+        this.dataSource = new MatTableDataSource(users);
+      }
+  }
+
+  /** Announce the change in sort state for assistive technology. */
+  announceSortChange(sortState: Sort) {
+    if (sortState.direction) {
+      this._liveAnnouncer.announce(`Sorted ${sortState.direction}ending`);
+    } else {
+      this._liveAnnouncer.announce('Sorting cleared');
+    }
+  }
+}

src/app/shared/shared.module.ts

@@ -52,6 +52,8 @@ import { SidenavFiltersComponent } from './components/sidenav-filters/sidenav-fi
 import { RejectModalWindowComponent } from './components/reject-modal-window/reject-modal-window.component';
 import { ImageCarouselComponent } from './components/image-carousel/image-carousel.component';
 import { IvyCarouselModule } from 'angular-responsive-carousel';
+import { UsersListComponent } from './components/users-list/users-list.component';
+import { MatTableModule } from '@angular/material/table';
 
 @NgModule({
   declarations: [
@@ -100,6 +102,7 @@ import { IvyCarouselModule } from 'angular-responsive-carousel';
     SidenavFiltersComponent,
     RejectModalWindowComponent,
     ImageCarouselComponent,
+    UsersListComponent,
   ],
   imports: [
     MaterialModule,
@@ -110,7 +113,8 @@ import { IvyCarouselModule } from 'angular-responsive-carousel';
     FormsModule,
     NgxSliderModule,
     NgxMatTimepickerModule,
-    IvyCarouselModule
+    IvyCarouselModule,
+    MatTableModule
   ],
   exports: [
     FiltersListComponent,
@@ -157,7 +161,8 @@ import { IvyCarouselModule } from 'angular-responsive-carousel';
     WorkingHoursFormComponent,
     WorkshopCardDialog,
     SidenavFiltersComponent,
-    ImageCarouselComponent
+    ImageCarouselComponent,
+    UsersListComponent
   ]
 })
 export class SharedModule { }

src/app/shell/personal-cabinet/personal-cabinet-routing.module.ts

@@ -6,6 +6,7 @@ import { MessagesComponent } from './messages/messages.component';
 import { ParentGuard } from './parent/parent.guard';
 import { ProviderGuard } from './provider/provider.guard';
 import { WorkshopsComponent } from './workshops/workshops.component';
+import { UsersComponent } from './users/users.component';
 
 const routes: Routes = [
   {
@@ -33,7 +34,11 @@ const routes: Routes = [
     path: 'parent',
     loadChildren: () => import('./parent/parent.module').then(m => m.ParentModule),
     canLoad: [ParentGuard]
-  }
+  },
+  {
+    path: 'users',
+    component: UsersComponent,
+  },
 ];
 
 @NgModule({

src/app/shell/personal-cabinet/personal-cabinet.component.html

@@ -7,6 +7,7 @@ <h1 class="title">{{userRole === 'provider' ? 'КАБІНЕТ НАДАВАЧА'
       {{ roles[userRole] | uppercase }}</a>
     <a *ngIf="userRole !== Role.techAdmin" mat-tab-link [routerLinkActive]="['active']" [routerLink]="'./workshops'">{{ userRole === Role.parent ? 'МОЇ ГУРТКИ' : 'ГУРТКИ' }}</a>
     <a *ngIf="userRole !== Role.techAdmin" mat-tab-link [routerLinkActive]="['active']" [routerLink]="'./applications'">ЗАЯВИ</a>
+    <a *ngIf="userRole == Role.provider" mat-tab-link [routerLinkActive]="['active']" [routerLink]="'./users'">КОРИСТУВАЧІ</a>
     <a *ngIf="userRole === Role.parent" mat-tab-link [routerLinkActive]="['active']"
       [routerLink]="'./parent/favorite'">УЛЮБЛЕНЕ</a>
     <!-- <a mat-tab-link [routerLinkActive]="['active']" [routerLink]="'./messages'">ПОВІДОМЛЕННЯ</a>  TODO: second release -->

src/app/shell/personal-cabinet/personal-cabinet.module.ts

@@ -11,6 +11,7 @@ import { UserConfigComponent } from './user-config/user-config.component';
 import { UserConfigEditComponent } from './user-config/user-config-edit/user-config-edit.component';
 import { ApplicationCardComponent } from './applications/application-card/application-card.component';
 import { SharedModule } from 'src/app/shared/shared.module';
+import { UsersComponent } from './users/users.component';
 
 @NgModule({
   declarations: [
@@ -20,6 +21,7 @@ import { SharedModule } from 'src/app/shared/shared.module';
     WorkshopsComponent,
     UserConfigComponent,
     UserConfigEditComponent,
+    UsersComponent,
   ],
   imports: [
     CommonModule,

src/app/shell/personal-cabinet/users/users.component.html

@@ -0,0 +1,37 @@
+  <div class="users-wrapper">
+
+    <div class="search-area">
+      <div class="search-bar" fxLayout="row" fxLayoutAlign="flex-start center">      
+        <mat-icon class="search-icon" style="transform: rotate(90deg)" >search</mat-icon>
+        <mat-form-field floatLabel=never appearance="none">
+          <input matInput [formControl]="filter" type="text" class="search" placeholder="Пошук за ПІБ, емейлом, телефоном, містом чи статусом" #input>
+        </mat-form-field>
+      </div>
+    </div>
+
+    <div class="tab-wrapper">
+      <mat-tab-group mat-align-tabs="start" (selectedTabChange)="onTabChange($event)">
+        <mat-tab label="Усі">
+          <ng-container *ngTemplateOutlet="UsersListFull; context:{ $implicit: filterValue }">
+          </ng-container>
+        </mat-tab>
+        <mat-tab label="Заступник">
+          <ng-container *ngTemplateOutlet="UsersListFiltered; context:{ $implicit: filterValue }">
+          </ng-container>
+        </mat-tab>
+        <mat-tab label="Адміністратор">
+          <ng-container *ngTemplateOutlet="UsersListFiltered; context:{ $implicit: filterValue }">
+          </ng-container>
+        </mat-tab>
+      </mat-tab-group>
+    </div>
+
+  </div>
+
+
+<ng-template #UsersListFull let-filterValue>
+  <app-users-list [users]="providerAdmins" [filterValue]="filterValue"></app-users-list>
+</ng-template>
+<ng-template #UsersListFiltered let-filterValue>
+  <app-users-list [users]="filterProviderAdmins" [filterValue]="filterValue"></app-users-list>
+</ng-template>

src/app/shell/personal-cabinet/users/users.component.scss

@@ -0,0 +1,68 @@
+@import "src/app/shared/styles/navigation-tabs.scss";
+
+.users-wrapper {
+position: relative;
+}
+.tab-wrapper {
+  margin-bottom: 4rem;
+}
+.search-area {
+  display: flex;
+  justify-content: flex-end;
+  z-index: 1000;
+  position: absolute;
+  right: 12px
+}
+@media (max-width: 1070px) {
+  .tab-wrapper {
+    bottom: 0;
+  }
+  .search-area {
+    display: flex;
+    justify-content: flex-start;
+  }
+}
+.activeInfoBtn {
+  color: #3849f9;
+  font-size: 30px;
+}
+.inactiveInfoBtn {
+  font-size: 30px;
+}
+.status-info-icon {
+  cursor: pointer;
+  margin: auto 1rem;
+  z-index: 100;
+}
+.child-name {
+  color: #444444;
+  font-family: 'Innerspace';
+  font-weight: 700;
+  font-size: 18px;
+}
+.search-bar {
+  width: 26rem;
+  background: #FFFFFF;
+  border: 1px solid #FFFFFF;
+  box-sizing: border-box;
+  border-radius: 60px;
+  margin: 0.125rem 0;
+  box-shadow: 0px 6px 16px rgba(0, 0, 0, 0.08);
+  .mat-form-field {
+    width: 100%
+  }
+  }
+  button {
+    border: none;
+    height: 100%;
+  }
+  :host ::ng-deep .mat-form-field-wrapper {
+    padding: 0;
+  }
+  :host ::ng-deep .mat-form-field-infix {
+    border: none;
+  }
+  :host ::ng-deep .mat-stroked-button {
+    min-width: inherit;
+    padding: 0;
+  }

src/app/shell/personal-cabinet/users/users.component.spec.ts

@@ -0,0 +1,55 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { UsersComponent } from './users.component';
+import { MatTabsModule } from '@angular/material/tabs';
+import { NgxsModule} from '@ngxs/store';
+import { Component, Input } from '@angular/core';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatIconModule } from '@angular/material/icon';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { ReactiveFormsModule } from '@angular/forms';
+
+describe('UsersComponent', () => {
+  let component: UsersComponent;
+  let fixture: ComponentFixture<UsersComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        NgxsModule.forRoot([]),
+        MatTabsModule,
+        MatMenuModule,
+        MatIconModule,
+        MatFormFieldModule,
+        MatInputModule,
+        BrowserAnimationsModule,
+        ReactiveFormsModule
+
+      ],
+      declarations: [
+        UsersComponent,
+        MockUsersListComponent
+      ],
+    })
+      .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(UsersComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
+@Component({
+  selector: 'app-users-list',
+  template: ''
+})
+class MockUsersListComponent {
+  @Input() users: Array<object>;
+  @Input() filterValue: string;
+}