Marmelator/red-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1.4k Wiki Activity

Team members separate component

Browse Source
This commit is contained in:
Adina Țeudan 2020-12-03 23:00:53 +02:00
parent b877a1888f
commit 31a1b8eaf3
8 changed files with 72 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
apps/red-ui/src/app/app.module.ts
View File

@ -88,6 +88,7 @@ import { AddEditDictionaryDialogComponent } from './screens/admin/dictionary-lis
import { DictionaryOverviewScreenComponent } from './screens/admin/dictionary-overview-screen/dictionary-overview-screen.component';
import { ColorPickerModule } from 'ngx-color-picker';
import { AceEditorModule } from 'ng2-ace-editor';
import { TeamMembersComponent } from './components/team-members/team-members.component';
export function HttpLoaderFactory(httpClient: HttpClient) {
return new TranslateHttpLoader(httpClient, '/assets/i18n/', '.json');
@ -142,7 +143,8 @@ export function HttpLoaderFactory(httpClient: HttpClient) {
DictionaryListingScreenComponent,
SyncWidthDirective,
AddEditDictionaryDialogComponent,
DictionaryOverviewScreenComponent
DictionaryOverviewScreenComponent,
TeamMembersComponent
],
imports: [
BrowserModule,

19
apps/red-ui/src/app/components/team-members/team-members.component.html Normal file
View File

@ -0,0 +1,19 @@
<div class="flex members-container">
<div *ngFor="let userId of displayedMembers" class="member">
<redaction-initials-avatar [userId]="userId" size="large" color="gray"></redaction-initials-avatar>
</div>
<div *ngIf="overflowCount && !expandedTeam" class="member pointer">
<div class="oval large white-dark" (click)="toggleExpandedTeam()">+{{ overflowCount }}</div>
</div>
<redaction-circle-button
class="member"
(action)="openAssignProjectMembersDialog.emit()"
icon="red:plus"
*ngIf="permissionsService.isManager()"
type="primary"
[small]="true"
tooltip="project-details.assign-members"
>
</redaction-circle-button>
</div>
<div class="all-caps-label see-less pointer" *ngIf="expandedTeam" translate="project-details.see-less" (click)="toggleExpandedTeam()"></div>

17
apps/red-ui/src/app/components/team-members/team-members.component.scss Normal file
View File

@ -0,0 +1,17 @@
@import '../../../assets/styles/red-variables';
.members-container {
flex-wrap: wrap;
margin-top: 4px;
.member {
margin-top: 4px;
margin-right: 2px;
}
}
.see-less {
opacity: 1;
color: $primary;
margin-top: 16px;
}

30
apps/red-ui/src/app/components/team-members/team-members.component.ts Normal file
View File

@ -0,0 +1,30 @@
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { PermissionsService } from '../../common/service/permissions.service';
@Component({
selector: 'redaction-team-members',
templateUrl: './team-members.component.html',
styleUrls: ['./team-members.component.scss']
})
export class TeamMembersComponent implements OnInit {
@Input() public memberIds: string[];
@Output() public openAssignProjectMembersDialog = new EventEmitter();
public expandedTeam = false;
constructor(public permissionsService: PermissionsService) {}
ngOnInit(): void {}
public get displayedMembers(): string[] {
return this.expandedTeam || !this.overflowCount ? this.memberIds : this.memberIds.slice(0, 7);
}
public toggleExpandedTeam() {
this.expandedTeam = !this.expandedTeam;
}
public get overflowCount() {
return this.memberIds.length > 8 ? this.memberIds.length - 7 : 0;
}
}

19
apps/red-ui/src/app/screens/project-overview-screen/project-details/project-details.component.html
View File

@ -32,24 +32,7 @@
<div class="mt-16">
<div class="all-caps-label" translate="project-details.members"></div>
<div class="flex members-container">
<div *ngFor="let userId of displayedMembers" class="member">
<redaction-initials-avatar [userId]="userId" size="large" color="gray"></redaction-initials-avatar>
</div>
<div *ngIf="overflowCount && !expandedTeam" class="member pointer">
<div class="oval large white-dark" (click)="toggleExpandedTeam()">+{{ overflowCount }}</div>
</div>
<redaction-circle-button
class="member"
(action)="openAssignProjectMembersDialog.emit()"
icon="red:plus"
*ngIf="permissionsService.isManager()"
type="primary"
tooltip="project-details.assign-members"
>
</redaction-circle-button>
</div>
<div class="all-caps-label see-less pointer" *ngIf="expandedTeam" translate="project-details.see-less" (click)="toggleExpandedTeam()"></div>
<redaction-team-members [memberIds]="memberIds" (openAssignProjectMembersDialog)="openAssignProjectMembersDialog.emit()"></redaction-team-members>
</div>
<div *ngIf="hasFiles" class="mt-24">

16
apps/red-ui/src/app/screens/project-overview-screen/project-details/project-details.component.scss
View File

@ -5,22 +5,6 @@
flex-direction: row;
}
.members-container {
flex-wrap: wrap;
margin-top: 4px;
.member {
margin-top: 4px;
margin-right: 2px;
}
}
.see-less {
opacity: 1;
color: $primary;
margin-top: 16px;
}
.legend {
display: flex;
flex-direction: column;

15
apps/red-ui/src/app/screens/project-overview-screen/project-details/project-details.component.ts
View File

@ -16,7 +16,6 @@ import { StatusSorter } from '../../../common/sorters/status-sorter';
})
export class ProjectDetailsComponent implements OnInit {
public documentsChartData: DoughnutChartConfig[] = [];
public expandedTeam = false;
@Input() public filters: { needsWorkFilters: FilterModel[]; statusFilters: FilterModel[] };
@Output() public filtersChanged = new EventEmitter();
@Output() public openAssignProjectMembersDialog = new EventEmitter();
@ -38,22 +37,10 @@ export class ProjectDetailsComponent implements OnInit {
});
}
private get _memberIds(): string[] {
public get memberIds(): string[] {
return this.appStateService.activeProject.project.memberIds;
}
public get displayedMembers(): string[] {
return this.expandedTeam || !this.overflowCount ? this._memberIds : this._memberIds.slice(0, 7);
}
public toggleExpandedTeam() {
this.expandedTeam = !this.expandedTeam;
}
public get overflowCount() {
return this._memberIds.length > 8 ? this._memberIds.length - 7 : 0;
}
public calculateChartConfig(): void {
if (this.appStateService.activeProject) {
const groups = groupBy(this.appStateService.activeProject?.files, 'status');

1
apps/red-ui/src/assets/styles/red-components.scss
View File

@ -14,6 +14,7 @@
text-align: center;
text-transform: uppercase;
border: none;
box-sizing: border-box;
&.large {
height: 32px;