From 62ba9365cd3381332e54a1b9e9da667249b31230 Mon Sep 17 00:00:00 2001 From: panabonic Date: Wed, 13 Dec 2023 13:48:56 +0300 Subject: [PATCH] administrate users tab added --- .../administration/administration.module.ts | 24 ++++--- .../page/administration-page.component.html | 1 + .../page/administration-page.component.ts | 2 +- .../users/administrate-users.component.html | 2 + .../users/administrate-users.component.scss | 0 .../users/administrate-users.component.ts | 19 ++++++ .../list/item/users-list-item.component.html | 16 +++++ .../list/item/users-list-item.component.scss | 66 +++++++++++++++++++ .../list/item/users-list-item.component.ts | 37 +++++++++++ .../users/list/users-list.component.html | 5 ++ .../users/list/users-list.component.scss | 25 +++++++ .../users/list/users-list.component.ts | 49 ++++++++++++++ src/app/_modules/users/users.module.ts | 9 ++- src/app/_services/users.service.ts | 17 ++++- src/environments/environment.ts | 2 +- 15 files changed, 257 insertions(+), 17 deletions(-) create mode 100644 src/app/_modules/administration/users/administrate-users.component.html create mode 100644 src/app/_modules/administration/users/administrate-users.component.scss create mode 100644 src/app/_modules/administration/users/administrate-users.component.ts create mode 100644 src/app/_modules/users/list/item/users-list-item.component.html create mode 100644 src/app/_modules/users/list/item/users-list-item.component.scss create mode 100644 src/app/_modules/users/list/item/users-list-item.component.ts create mode 100644 src/app/_modules/users/list/users-list.component.html create mode 100644 src/app/_modules/users/list/users-list.component.scss create mode 100644 src/app/_modules/users/list/users-list.component.ts diff --git a/src/app/_modules/administration/administration.module.ts b/src/app/_modules/administration/administration.module.ts index edcdc1b..b38f845 100644 --- a/src/app/_modules/administration/administration.module.ts +++ b/src/app/_modules/administration/administration.module.ts @@ -12,6 +12,8 @@ import {AdministrateSitePagesComponent} from "@app/_modules/administration/site- import {PagesModule} from "@app/_modules/pages/pages.module"; import {WidjetModule} from "@app/_modules/widjet/widjet.module"; import {AdministrateLicenceComponent} from "@app/_modules/administration/licence/administrate-licence.component"; +import {AdministrateUsersComponent} from "@app/_modules/administration/users/administrate-users.component"; +import {UsersModule} from "@app/_modules/users/users.module"; type PathMatch = "full" | "prefix" | undefined; const routes = [ @@ -20,21 +22,23 @@ const routes = [ ]; @NgModule({ - imports: [ - BrowserModule, - CommonModule, - RouterModule.forRoot(routes), - AdvisoriesModule, - CompaniesModule, - PagesModule, - WidjetModule, - ], + imports: [ + BrowserModule, + CommonModule, + RouterModule.forRoot(routes), + AdvisoriesModule, + CompaniesModule, + PagesModule, + WidjetModule, + UsersModule, + ], declarations: [ AdministrationPageComponent, AdministrateCompanyComponent, AdministrateCommitteeComponent, AdministrateSitePagesComponent, - AdministrateLicenceComponent + AdministrateLicenceComponent, + AdministrateUsersComponent ], exports: [ RouterModule diff --git a/src/app/_modules/administration/page/administration-page.component.html b/src/app/_modules/administration/page/administration-page.component.html index c5f5f1e..fd7deb7 100644 --- a/src/app/_modules/administration/page/administration-page.component.html +++ b/src/app/_modules/administration/page/administration-page.component.html @@ -11,6 +11,7 @@ +

Страница не найдена

diff --git a/src/app/_modules/administration/page/administration-page.component.ts b/src/app/_modules/administration/page/administration-page.component.ts index dd0689d..4004156 100644 --- a/src/app/_modules/administration/page/administration-page.component.ts +++ b/src/app/_modules/administration/page/administration-page.component.ts @@ -35,7 +35,7 @@ export class AdministrationPageComponent { makeTabs() { //this.tabs = [{name: 'company', title: 'Структура ФАУ «ФЦС»'}, {name: 'committee', title: 'Структура ТК 465'}]; //if (this.authService.isSuperAdmin) this.tabs.push({name: 'site-pages', title: 'Структура сайта'}); - this.tabs = [{name: 'site-pages', title: 'Структура сайта'}, {name: 'licence', title: 'Данные о лицензии'}]; + this.tabs = [{name: 'site-pages', title: 'Структура сайта'}, {name: 'users', title: 'Пользователи'}, {name: 'licence', title: 'Данные о лицензии'}]; this.switchTab(this.route.snapshot.paramMap.get('tab')); } diff --git a/src/app/_modules/administration/users/administrate-users.component.html b/src/app/_modules/administration/users/administrate-users.component.html new file mode 100644 index 0000000..ea8279e --- /dev/null +++ b/src/app/_modules/administration/users/administrate-users.component.html @@ -0,0 +1,2 @@ + +

У вас нет прав на просмотр этого раздела

diff --git a/src/app/_modules/administration/users/administrate-users.component.scss b/src/app/_modules/administration/users/administrate-users.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/_modules/administration/users/administrate-users.component.ts b/src/app/_modules/administration/users/administrate-users.component.ts new file mode 100644 index 0000000..cdc3fa8 --- /dev/null +++ b/src/app/_modules/administration/users/administrate-users.component.ts @@ -0,0 +1,19 @@ +import {Component} from '@angular/core'; +import {AuthenticationService} from "@app/_services"; + +@Component({ + selector: 'administrate-users', + templateUrl: 'administrate-users.component.html', + styleUrls: ['administrate-users.component.scss'] +}) +export class AdministrateUsersComponent { + constructor(private authService: AuthenticationService) { + } + + get isAdmin() { + return this.authService.isAdmin; + } + + ngOnInit() { + } +} diff --git a/src/app/_modules/users/list/item/users-list-item.component.html b/src/app/_modules/users/list/item/users-list-item.component.html new file mode 100644 index 0000000..0a422fb --- /dev/null +++ b/src/app/_modules/users/list/item/users-list-item.component.html @@ -0,0 +1,16 @@ +
+
+
+ + {{user.initials}} +
+
+
+
{{user.name}} • {{role.title}}
+
{{user.position}}
+
+
+ + +
+
diff --git a/src/app/_modules/users/list/item/users-list-item.component.scss b/src/app/_modules/users/list/item/users-list-item.component.scss new file mode 100644 index 0000000..29f01a0 --- /dev/null +++ b/src/app/_modules/users/list/item/users-list-item.component.scss @@ -0,0 +1,66 @@ +.item { + display: flex; + flex-direction: row; + align-items: center; + + .left { + margin-right: 8px; + flex-shrink: 0; + .avatar { + display: flex; + width: 40px; + height: 40px; + border-radius: 100px; + background-color: #167ABF; + overflow: hidden; + + img { + display: block; + width: 100%; + height: 100%; + object-fit: cover; + } + + .initials { + margin: auto; + color: #ffffff; + text-align: center; + } + } + } + + .middle { + flex-grow: 1; + .name { + + } + .role { + &.User {color: #20802D;} + &.Editor {color: #999926;} + &.Administrator {color: #D91519;} + } + .position { + color: #666666; + } + } + + .right { + display: flex; + flex-direction: row; + align-items: center; + justify-content: flex-end; + gap: 24px; + margin-left: 24px; + } +} + + +@media screen and (max-width: 600px) { + .item { + .right { + gap: 12px; + margin-left: 12px; + } + } +} + diff --git a/src/app/_modules/users/list/item/users-list-item.component.ts b/src/app/_modules/users/list/item/users-list-item.component.ts new file mode 100644 index 0000000..997c64c --- /dev/null +++ b/src/app/_modules/users/list/item/users-list-item.component.ts @@ -0,0 +1,37 @@ +import {Component, Input} from '@angular/core'; +import {FormsService, ListsService, UsersService} from "@app/_services"; + +@Component({ + selector: 'users-list-item', + templateUrl: 'users-list-item.component.html', + styleUrls: ['users-list-item.component.scss'] +}) +export class UsersListItemComponent { + @Input() user: any; + @Input() listId: string; + + constructor(private usersService: UsersService, private formsService: FormsService, private listsService: ListsService) { + } + + get role() { + return this.user.roles?.data[0]; + } + get avatar() { + return this.user.avatar?.data; + } + + ngOnInit() { + } + + + edit() { + this.formsService.editModel('user', this.user.id, null, this.listId); + } + + delete() { + if (confirm(`Удалить пользователя ${this.user.name}?`)) this.usersService.delete(this.user.id).subscribe(res => { + this.listsService.refresh(this.listId, true); + }); + } + +} diff --git a/src/app/_modules/users/list/users-list.component.html b/src/app/_modules/users/list/users-list.component.html new file mode 100644 index 0000000..0d46b0d --- /dev/null +++ b/src/app/_modules/users/list/users-list.component.html @@ -0,0 +1,5 @@ +
+
Список сотрудников
+
+
+ diff --git a/src/app/_modules/users/list/users-list.component.scss b/src/app/_modules/users/list/users-list.component.scss new file mode 100644 index 0000000..51f5648 --- /dev/null +++ b/src/app/_modules/users/list/users-list.component.scss @@ -0,0 +1,25 @@ +.bar { + display: flex; + flex-direction: row; + align-items: stretch; + padding: 12px 0; + border-top: #E0E0E0 solid 1px; + border-bottom: #E0E0E0 solid 1px; + .title { + flex-grow: 1; + font-weight: bold; + } + .buttons { + display: flex; + flex-direction: row; + align-items: center; + gap: 24px; + flex-shrink: 0; + } +} + +users-list-item { + display: block; + padding: 12px 0; + border-bottom: #E0E0E0 solid 1px; +} diff --git a/src/app/_modules/users/list/users-list.component.ts b/src/app/_modules/users/list/users-list.component.ts new file mode 100644 index 0000000..0b4c242 --- /dev/null +++ b/src/app/_modules/users/list/users-list.component.ts @@ -0,0 +1,49 @@ +import {Component} from '@angular/core'; +import {AuthenticationService, FormsService, ListsService, UsersService} from "@app/_services"; +import {Subscription} from "rxjs"; + +@Component({ + selector: 'users-list', + templateUrl: 'users-list.component.html', + styleUrls: ['users-list.component.scss'] +}) +export class UsersListComponent { + controlsSubscription: Subscription; + + constructor(private usersService: UsersService, private listsService: ListsService, private formsService: FormsService, private authService: AuthenticationService) { + } + + get listId(): string { + return 'users-list'; + } + + get users() { + return this.listsService.result(this.listId).value?.data; + } + + + ngOnInit() { + this.controlsSubscription = this.listsService.controls(this.listId).subscribe(data => { + this.fetch(); + }); + } + + ngOnDestroy() { + this.controlsSubscription?.unsubscribe(); + } + + + fetch() { + let include = ['avatar', 'roles']; + this.usersService.list({include: include.join(',')}).subscribe(res => { + this.listsService.result(this.listId).next(res); + this.authService.getCurrentUser(); + }); + } + + + add() { + this.formsService.createModel('user', null, this.listId); + } + +} diff --git a/src/app/_modules/users/users.module.ts b/src/app/_modules/users/users.module.ts index 7416160..6693423 100644 --- a/src/app/_modules/users/users.module.ts +++ b/src/app/_modules/users/users.module.ts @@ -3,6 +3,8 @@ import {CommonModule} from '@angular/common'; import {RouterModule} from "@angular/router"; import {AuthGuard} from "@app/_helpers"; import {UserProfileComponent} from "@app/_modules/users/profile/user-profile.component"; +import {UsersListComponent} from "@app/_modules/users/list/users-list.component"; +import {UsersListItemComponent} from "@app/_modules/users/list/item/users-list-item.component"; const routes = [ {path: 'profile', component: UserProfileComponent, canActivate: [AuthGuard]} @@ -14,10 +16,13 @@ const routes = [ RouterModule.forRoot(routes) ], declarations: [ - UserProfileComponent + UserProfileComponent, + UsersListComponent, + UsersListItemComponent ], exports: [ - RouterModule + RouterModule, + UsersListComponent ] }) export class UsersModule {} diff --git a/src/app/_services/users.service.ts b/src/app/_services/users.service.ts index b813bd7..efb02b7 100644 --- a/src/app/_services/users.service.ts +++ b/src/app/_services/users.service.ts @@ -8,9 +8,20 @@ export class UsersService { constructor(private http: HttpClient) { } - me(params: any): Observable { - if (!params) params = {include: 'avatar,membership.company,roles,privileges'}; - return this.http.get(`${environment.apiUrl}/api/me`, {params: params}); + list(params?: any): Observable { + return this.http.get(`${environment.apiUrl}/api/users`, {params: params}); } + show(id: string, params?: any): Observable { + return this.http.get(`${environment.apiUrl}/api/users/${id}`, {params: params}); + } + + me(params?: any): Observable { + if (!params) params = {include: 'avatar,membership.company,roles,privileges'}; + return this.http.get(`${environment.apiUrl}/api/me`, {params: params}); + } + + delete(id: string): Observable { + return this.http.delete(`${environment.apiUrl}/api/users/${id}`); + } } diff --git a/src/environments/environment.ts b/src/environments/environment.ts index 02a509c..4d81dc1 100644 --- a/src/environments/environment.ts +++ b/src/environments/environment.ts @@ -6,7 +6,7 @@ export const environment = { production: false, apiUrl: 'http://api.nircms.lc', clientId: 2, - clientSecret: 'E4BoAclC9X3gre4Wr4XXmU3Y7sXTEtFSk3iCSkIm', + clientSecret: 'SSLFpp0u4fAgqSTNamgQdqUsb2mNzj921Ak3DVRI', project: null, licence: 'POUFLO4YW7SU', defaultLocale: 'ru'