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

Pull request #257: Base listings

Browse Source 
Merge in RED/ui from base-listings to master

* commit '43b87780f41db7fd83362e04bbe2c812d338b14e':
  chore(release)
  fix rebase
  fix status sorter
  Stuff
  rename sortingOptionChanged$ to sortingOption$
  fix sorting icons not showing
  Dossier overview base listing
This commit is contained in:
Dan Percic 2021-08-05 18:02:53 +02:00
commit d5c998ec39
9 changed files with 57 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.html
View File

@ -9,8 +9,7 @@
[selectionEnabled]="true"
[tableColConfigs]="tableColConfigs"
[tableHeaderLabel]="tableHeaderLabel"
>
</redaction-table-header>
></redaction-table-header>
<redaction-empty-state
*ngIf="screenStateService.noData$ | async"

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

@ -36,61 +36,12 @@
<div class="red-content-inner">
<div [class.extended]="collapsedDetails" class="content-container">
<div class="header-item">
<iqser-round-checkbox
(click)="toggleSelectAll()"
[active]="screenStateService.areAllEntitiesSelected$ | async"
[indeterminate]="screenStateService.notAllEntitiesSelected$ | async"
></iqser-round-checkbox>
<span class="all-caps-label">
{{ 'dossier-overview.table-header.title' | translate: { length: (screenStateService.displayedLength$ | async) || 0 } }}
</span>
<redaction-dossier-overview-bulk-actions (reload)="bulkActionPerformed()"></redaction-dossier-overview-bulk-actions>
<redaction-quick-filters></redaction-quick-filters>
</div>
<div [class.no-data]="screenStateService.noData$ | async" class="table-header" redactionSyncWidth="table-item">
<!-- Table column names-->
<div class="select-oval-placeholder"></div>
<redaction-table-col-name
[label]="'dossier-overview.table-col-names.name' | translate"
[withSort]="true"
column="filename"
></redaction-table-col-name>
<redaction-table-col-name
[label]="'dossier-overview.table-col-names.added-on' | translate"
[withSort]="true"
column="added"
></redaction-table-col-name>
<redaction-table-col-name [label]="'dossier-overview.table-col-names.needs-work' | translate"></redaction-table-col-name>
<redaction-table-col-name
[label]="'dossier-overview.table-col-names.assigned-to' | translate"
[withSort]="true"
class="user-column"
column="reviewerName"
></redaction-table-col-name>
<redaction-table-col-name
[label]="'dossier-overview.table-col-names.pages' | translate"
[withSort]="true"
column="pages"
></redaction-table-col-name>
<redaction-table-col-name
[label]="'dossier-overview.table-col-names.status' | translate"
[withSort]="true"
class="flex-end"
column="statusSort"
></redaction-table-col-name>
<div class="scrollbar-placeholder"></div>
</div>
<redaction-table-header
[bulkActions]="bulkActions"
[selectionEnabled]="true"
[tableColConfigs]="tableColConfigs"
[tableHeaderLabel]="tableHeaderLabel"
></redaction-table-header>
<redaction-empty-state
(action)="fileInput.click()"
@ -236,3 +187,7 @@
</ng-template>
<input #fileInput (change)="uploadFiles($event.target['files'])" class="file-upload-input" multiple="true" type="file" />
<ng-template #bulkActions>
<redaction-dossier-overview-bulk-actions (reload)="bulkActionPerformed()"></redaction-dossier-overview-bulk-actions>
</ng-template>

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

@ -36,6 +36,7 @@ import { workloadTranslations } from '../../translations/workload-translations';
import { fileStatusTranslations } from '../../translations/file-status-translations';
import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
import { CircleButtonTypes } from '@iqser/common-ui';
import { TableColConfig } from '@shared/components/table-col-name/table-col-name.component';
@Component({
templateUrl: './dossier-overview-screen.component.html',
@ -49,15 +50,47 @@ export class DossierOverviewScreenComponent
private readonly _lastOpenedFileKey = 'Dossier-Recent-' + this.activeDossier.dossierId;
protected readonly _primaryKey = 'filename';
readonly circleButtonTypes = CircleButtonTypes;
protected readonly _tableHeaderLabel = _('dossier-overview.table-header.title');
readonly itemSize = 80;
collapsedDetails = false;
actionConfigs: ActionConfig[];
dossierAttributes: DossierAttributeWithValue[] = [];
tableColConfigs: TableColConfig[] = [
{
label: _('dossier-overview.table-col-names.name'),
withSort: true,
column: 'filename'
},
{
label: _('dossier-overview.table-col-names.added-on'),
withSort: true,
column: 'added'
},
{
label: _('dossier-overview.table-col-names.needs-work')
},
{
label: _('dossier-overview.table-col-names.assigned-to'),
withSort: true,
class: 'user-column',
column: 'reviewerName'
},
{
label: _('dossier-overview.table-col-names.pages'),
withSort: true,
column: 'pages'
},
{
label: _('dossier-overview.table-col-names.status'),
withSort: true,
class: 'flex-end',
column: 'statusSort'
}
];
@ViewChild(DossierDetailsComponent, { static: false })
private readonly _dossierDetailsComponent: DossierDetailsComponent;
private _lastScrollPosition: number;
@ViewChild('needsWorkTemplate', { read: TemplateRef, static: true })
private readonly _needsWorkTemplate: TemplateRef<any>;
@ViewChild('fileInput') private _fileInput: ElementRef;

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

@ -50,7 +50,7 @@ export abstract class BaseListingComponent<T> extends AutoUnsubscribeComponent i
}
private get _sortedDisplayedEntities$(): Observable<T[]> {
return this.sortingService.sortingOptionChanged$.pipe(
return this.sortingService.sortingOption$.pipe(
switchMap(() => this.screenStateService.displayedEntities$.pipe(map(entities => this.sortingService.defaultSort(entities))))
);
}

13
apps/red-ui/src/app/modules/shared/components/table-col-name/table-col-name.component.html
View File

@ -2,12 +2,11 @@
<mat-icon *ngIf="!!leftIcon" [svgIcon]="leftIcon"></mat-icon>
<span class="all-caps-label">{{ label }}</span>
<mat-icon *ngIf="!!rightIcon" [matTooltip]="rightIconTooltip" [svgIcon]="rightIcon" matTooltipPosition="above"></mat-icon>
<div
*ngIf="withSort && sortingService"
[class.force-display]="sortingService.sortingOption?.column === column"
class="sort-arrows-container"
>
<mat-icon *ngIf="sortingService.sortingOption?.order === 'asc'" svgIcon="red:sort-asc"></mat-icon>
<mat-icon *ngIf="sortingService.sortingOption?.order === 'desc'" svgIcon="red:sort-desc"></mat-icon>
<ng-container *ngIf="sortingService?.sortingOption$ | async as sortingOption">
<div *ngIf="withSort" [class.force-display]="sortingOption.column === column" class="sort-arrows-container">
<mat-icon *ngIf="sortingOption.order === 'asc'" svgIcon="red:sort-asc"></mat-icon>
<mat-icon *ngIf="sortingOption.order === 'desc'" svgIcon="red:sort-desc"></mat-icon>
</div>
</ng-container>
</div>

2
apps/red-ui/src/app/modules/shared/components/table-header/table-header.component.html
View File

@ -10,7 +10,7 @@
{{ tableHeaderLabel | translate: { length: (screenStateService.displayedLength$ | async) } }}
</span>
<ng-container *ngIf="bulkActions" [ngTemplateOutlet]="bulkActions"></ng-container>
<ng-container [ngTemplateOutlet]="bulkActions"></ng-container>
<redaction-quick-filters></redaction-quick-filters>
</div>

2
apps/red-ui/src/app/services/sorting.service.ts
View File

@ -19,7 +19,7 @@ export interface SortingOption {
})
export class SortingService {
private readonly _sortingOption$ = new BehaviorSubject<SortingOption>(null);
readonly sortingOptionChanged$ = this._sortingOption$.asObservable();
readonly sortingOption$ = this._sortingOption$.asObservable();
get sortingOption(): SortingOption {
return this._sortingOption$.getValue();

2
apps/red-ui/src/app/utils/sorters/status-sorter.ts
View File

@ -5,7 +5,7 @@ const byStatus = (a: StatusSorterItem, b: StatusSorterItem) => {
const x = typeof a === 'string' ? a : a.key;
const y = typeof b === 'string' ? b : b.key;
return (StatusSorter[x] = StatusSorter[y]);
return StatusSorter[x] - StatusSorter[y];
};
export const StatusSorter = {

2
libs/common-ui

@ -1 +1 @@
Subproject commit 3625e295161fddd62c6f8f45623279773bbb8a16
Subproject commit 4004c4c8f9a31d0c8dd548e5a1fad62f1f472daa