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

Fixed initials avatar logic

Browse Source
This commit is contained in:
Adina Țeudan 2021-06-30 16:12:44 +03:00
parent 5f0539a3cc
commit 2864075045
14 changed files with 40 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.ts
View File

@ -1,4 +1,4 @@
import { Component, Inject, Injector, ViewChild } from '@angular/core';
import { Component, Inject, Injector } from '@angular/core';
import { AbstractControl, FormGroup, ValidatorFn, Validators } from '@angular/forms';
import { AppStateService } from '@state/app-state.service';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
@ -8,7 +8,6 @@ import {
FileAttributesConfig,
FileAttributesControllerService
} from '@redaction/red-ui-http';
import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
import { Observable } from 'rxjs';
import { map, startWith } from 'rxjs/operators';
import { BaseListingComponent } from '@shared/base/base-listing.component';
@ -44,8 +43,6 @@ export class FileAttributesCsvImportDialogComponent extends BaseListingComponent
keepPreview = false;
columnSample = [];
initialParseConfig: { delimiter?: string; encoding?: string } = {};
@ViewChild(CdkVirtualScrollViewport, { static: false })
cdkVirtualScrollViewport: CdkVirtualScrollViewport;
protected readonly _searchKey = 'csvColumn';
constructor(

2
apps/red-ui/src/app/modules/admin/screens/dossier-template-listing/dossier-templates-listing-screen.component.html
View File

@ -113,7 +113,7 @@
type="no-match"
></redaction-empty-state>
<cdk-virtual-scroll-viewport [itemSize]="100" redactionHasScrollbar>
<cdk-virtual-scroll-viewport [itemSize]="80" redactionHasScrollbar>
<div
*cdkVirtualFor="
let dossierTemplate of displayedEntities

2
apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.html
View File

@ -109,7 +109,7 @@
<div>
<redaction-initials-avatar
[showYou]="true"
[user]="user"
[userId]="user.userId"
[withName]="true"
></redaction-initials-avatar>
</div>

12
apps/red-ui/src/app/modules/dossier/components/dossier-details/dossier-details.component.html
View File

@ -16,18 +16,18 @@
<div class="mt-12 d-flex">
<ng-container *ngIf="!editingOwner; else editOwner">
<redaction-initials-avatar
[user]="owner"
[userId]="owner.userId"
[withName]="true"
color="gray"
size="large"
></redaction-initials-avatar>
<redaction-circle-button
class="ml-14"
(action)="editingOwner = true"
*ngIf="permissionsService.isManager()"
tooltip="dossier-details.edit-owner"
class="ml-14"
icon="red:edit"
tooltip="dossier-details.edit-owner"
tooltipPosition="below"
></redaction-circle-button>
</ng-container>
@ -142,10 +142,10 @@
<ng-template #editOwner>
<redaction-assign-user-dropdown
[value]="owner"
[options]="managers"
(save)="editingOwner = false; assignOwner($event)"
(cancel)="editingOwner = false"
(save)="editingOwner = false; assignOwner($event)"
[options]="managers"
[value]="owner"
></redaction-assign-user-dropdown>
</ng-template>

4
apps/red-ui/src/app/modules/dossier/screens/dossier-listing-screen/dossier-listing-screen.component.html
View File

@ -124,8 +124,8 @@
>
<div class="filename">
<div
class="table-item-title heading"
[matTooltip]="dw.dossierName"
class="table-item-title heading"
matTooltipPosition="above"
>
{{ dw.dossierName }}
@ -182,7 +182,7 @@
<redaction-scroll-button
[itemSize]="itemSize"
[scrollViewport]="scrollBar"
[scrollViewport]="scrollViewport"
></redaction-scroll-button>
</div>

6
apps/red-ui/src/app/modules/dossier/screens/dossier-listing-screen/dossier-listing-screen.component.ts
View File

@ -14,7 +14,6 @@ import { RedactionFilterSorter } from '@utils/sorters/redaction-filter-sorter';
import { StatusSorter } from '@utils/sorters/status-sorter';
import { NavigationEnd, NavigationStart, Router } from '@angular/router';
import { DossiersDialogService } from '../../services/dossiers-dialog.service';
import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
import { BaseListingComponent } from '@shared/base/base-listing.component';
import { OnAttach, OnDetach } from '@utils/custom-route-reuse.strategy';
import { FilterModel } from '@shared/components/filters/popup-filter/model/filter.model';
@ -50,7 +49,6 @@ export class DossierListingScreenComponent
};
quickFilters: FilterModel[];
readonly itemSize = 85;
@ViewChild(CdkVirtualScrollViewport) scrollBar: CdkVirtualScrollViewport;
protected readonly _searchKey = 'name';
protected readonly _sortKey = 'dossier-listing';
@ViewChild(QuickFiltersComponent) protected _quickFiltersComponent: QuickFiltersComponent;
@ -153,7 +151,7 @@ export class DossierListingScreenComponent
)
.subscribe(event => {
if (event instanceof NavigationStart && event.url !== '/main/dossiers') {
this._lastScrollPosition = this.scrollBar.measureScrollOffset('top');
this._lastScrollPosition = this.scrollViewport.measureScrollOffset('top');
}
});
}
@ -162,7 +160,7 @@ export class DossierListingScreenComponent
this._appStateService.reset();
this._loadEntitiesFromState();
this.ngOnInit();
this.scrollBar.scrollTo({ top: this._lastScrollPosition });
this.scrollViewport.scrollTo({ top: this._lastScrollPosition });
}
ngOnDetach() {

2
apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.html
View File

@ -312,7 +312,7 @@
<redaction-scroll-button
[itemSize]="itemSize"
[scrollViewport]="scrollBar"
[scrollViewport]="scrollViewport"
></redaction-scroll-button>
</div>

6
apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.ts
View File

@ -27,7 +27,6 @@ import { RedactionFilterSorter } from '@utils/sorters/redaction-filter-sorter';
import { StatusSorter } from '@utils/sorters/status-sorter';
import { convertFiles, handleFileDrop } from '@utils/file-drop-utils';
import { DossiersDialogService } from '../../services/dossiers-dialog.service';
import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
import { BaseListingComponent } from '@shared/base/base-listing.component';
import { DossierWrapper } from '@state/model/dossier.wrapper';
import { OnAttach, OnDetach } from '@utils/custom-route-reuse.strategy';
@ -60,7 +59,6 @@ export class DossierOverviewScreenComponent
} = { needsWorkFilters: [], statusFilters: [] };
readonly itemSize = 80;
quickFilters: FilterModel[];
@ViewChild(CdkVirtualScrollViewport) scrollBar: CdkVirtualScrollViewport;
@ViewChild(QuickFiltersComponent) protected _quickFiltersComponent: QuickFiltersComponent;
protected readonly _searchKey = 'searchField';
protected readonly _selectionKey = 'fileId';
@ -183,7 +181,7 @@ export class DossierOverviewScreenComponent
.pipe(filter(events => events instanceof NavigationStart))
.subscribe((event: NavigationStart) => {
if (!event.url.endsWith(this._appStateService.activeDossierId)) {
this._lastScrollPosition = this.scrollBar.measureScrollOffset('top');
this._lastScrollPosition = this.scrollViewport.measureScrollOffset('top');
}
});
}
@ -198,7 +196,7 @@ export class DossierOverviewScreenComponent
ngOnAttach() {
this._loadEntitiesFromState();
this.ngOnInit();
this.scrollBar.scrollTo({ top: this._lastScrollPosition });
this.scrollViewport.scrollTo({ top: this._lastScrollPosition });
}
ngOnDetach() {

4
apps/red-ui/src/app/modules/shared/base/base-listing.component.ts
View File

@ -1,4 +1,4 @@
import { ChangeDetectorRef, Component, Injector } from '@angular/core';
import { ChangeDetectorRef, Component, Injector, ViewChild } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { debounce } from '@utils/debounce';
import { ScreenName, SortingOption, SortingService } from '@services/sorting.service';
@ -6,6 +6,7 @@ import { FilterModel } from '../components/filters/popup-filter/model/filter.mod
import { PopupFilterComponent } from '../components/filters/popup-filter/popup-filter.component';
import { getFilteredEntities } from '../components/filters/popup-filter/utils/filter-utils';
import { QuickFiltersComponent } from '../components/filters/quick-filters/quick-filters.component';
import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
// Functionalities: Filter, search, select, sort
@ -18,6 +19,7 @@ export abstract class BaseListingComponent<T = any> {
displayedEntities: T[] = [];
selectedEntitiesIds: string[] = [];
searchForm: FormGroup;
@ViewChild(CdkVirtualScrollViewport) scrollViewport: CdkVirtualScrollViewport;
protected readonly _formBuilder: FormBuilder;
protected readonly _changeDetectorRef: ChangeDetectorRef;

5
apps/red-ui/src/app/modules/shared/components/assign-user-dropdown/assign-user-dropdown.component.html
View File

@ -25,12 +25,11 @@
></redaction-circle-button>
</div>
<ng-template #avatar let-user="user" let-userId="userId">
<ng-template #avatar let-userId="userId">
<redaction-initials-avatar
[user]="user"
[userId]="userId"
[withName]="true"
color="gray"
size="large"
size="small"
></redaction-initials-avatar>
</ng-template>

8
apps/red-ui/src/app/modules/shared/components/assign-user-dropdown/assign-user-dropdown.component.scss
View File

@ -8,3 +8,11 @@
justify-content: center;
height: 40px;
}
redaction-circle-button {
margin-left: 2px;
&:first-of-type {
margin-left: 8px;
}
}

17
apps/red-ui/src/app/modules/shared/components/assign-user-dropdown/assign-user-dropdown.component.ts
View File

@ -9,12 +9,17 @@ import { UserService } from '@services/user.service';
changeDetection: ChangeDetectionStrategy.OnPush
})
export class AssignUserDropdownComponent {
private _currentUser: User | string;
oldUser: User | string;
@Input() options: (User | string)[];
@Output() save = new EventEmitter<User | string>();
@Output() cancel = new EventEmitter<never>();
private _currentUser: User | string;
constructor(private readonly _userService: UserService) {}
get value(): User | string {
return this._currentUser;
}
@Input()
set value(value: User | string) {
@ -22,13 +27,7 @@ export class AssignUserDropdownComponent {
this._currentUser = value;
}
get value(): User | string {
return this._currentUser;
}
constructor(private readonly _userService: UserService) {}
getContext(user: User | string) {
return typeof user === 'string' ? { userId: user } : { user: user };
return { userId: typeof user === 'string' ? user : user?.userId };
}
}

2
apps/red-ui/src/app/modules/shared/components/buttons/user-button/user-button.component.html
View File

@ -1,6 +1,6 @@
<button [class.overlay]="showDot" mat-button>
<redaction-initials-avatar
[user]="user"
[userId]="user.userId"
[withName]="true"
size="small"
></redaction-initials-avatar>

6
apps/red-ui/src/app/modules/shared/components/initials-avatar/initials-avatar.component.ts
View File

@ -10,7 +10,6 @@ import { TranslateService } from '@ngx-translate/core';
})
export class InitialsAvatarComponent implements OnChanges {
@Input() userId: string;
@Input() user: User;
@Input() color = 'lightgray';
@Input() size: 'small' | 'large' = 'small';
@Input() withName = false;
@ -20,6 +19,7 @@ export class InitialsAvatarComponent implements OnChanges {
displayName: string;
initials: string;
colorClass: string;
user: User;
constructor(
private readonly _userService: UserService,
@ -55,9 +55,7 @@ export class InitialsAvatarComponent implements OnChanges {
return;
}
if (this.userId) {
this.user = this._userService.getUserById(this.userId);
}
this.user = this._userService.getUserById(this.userId);
this.displayName = this._userService.getName(this.user);
if (this.showYou && this._isCurrentUser) {