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

Empty project

Browse Source
This commit is contained in:
Adina Țeudan 2020-12-14 22:24:27 +02:00
parent c81363777f
commit b7c9d37ef2
13 changed files with 181 additions and 186 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -68,7 +68,6 @@ import { TableColNameComponent } from './components/table-col-name/table-col-nam
import { ProjectDetailsComponent } from './screens/project-overview-screen/project-details/project-details.component';
import { PageIndicatorComponent } from './screens/file/page-indicator/page-indicator.component';
import { NeedsWorkBadgeComponent } from './components/needs-work-badge/needs-work-badge.component';
import { ProjectOverviewEmptyComponent } from './screens/empty-states/project-overview-empty/project-overview-empty.component';
import { ProjectListingEmptyComponent } from './screens/empty-states/project-listing-empty/project-listing-empty.component';
import { AnnotationActionsComponent } from './screens/file/annotation-actions/annotation-actions.component';
import { ProjectListingDetailsComponent } from './screens/project-listing-screen/project-listing-details/project-listing-details.component';
@ -264,7 +263,6 @@ const matImports = [
ProjectDetailsComponent,
PageIndicatorComponent,
NeedsWorkBadgeComponent,
ProjectOverviewEmptyComponent,
ProjectListingEmptyComponent,
AnnotationActionsComponent,
ProjectListingEmptyComponent,

9
apps/red-ui/src/app/components/buttons/icon-button/icon-button.component.html
View File

@ -1,4 +1,11 @@
<button mat-button [class.overlay]="showDot" [class.primary]="primary" (click)="action.emit($event)" [class.show-bg]="type === 'show-bg'" [disabled]="disabled">
<button
mat-button
[class.overlay]="showDot"
[class.primary]="type === 'primary'"
(click)="action.emit($event)"
[class.show-bg]="type === 'show-bg'"
[disabled]="disabled"
>
<mat-icon [svgIcon]="icon" *ngIf="icon"></mat-icon>
<span [translate]="text"></span>
</button>

3
apps/red-ui/src/app/components/buttons/icon-button/icon-button.component.ts
View File

@ -9,9 +9,8 @@ export class IconButtonComponent implements OnInit {
@Input() icon: string;
@Input() text: string;
@Input() showDot = false;
@Input() primary = false;
@Input() disabled = false;
@Input() type: 'default' | 'show-bg' = 'default';
@Input() type: 'default' | 'show-bg' | 'primary' = 'default';
@Output() action = new EventEmitter<any>();
constructor() {}

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

@ -15,7 +15,7 @@
icon="red:plus"
(action)="openAddEditDictionaryDialog()"
text="dictionary-listing.add-new"
[primary]="true"
type="primary"
></redaction-icon-button>
<redaction-circle-button

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

@ -97,7 +97,7 @@
icon="red:check"
(action)="saveEntries()"
text="dictionary-overview.save-changes"
[primary]="true"
type="primary"
></redaction-icon-button>
<div class="all-caps-label cancel" *ngIf="permissionsService.isAdmin()" (click)="revert()" translate="dictionary-overview.revert-changes"></div>
</div>

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

@ -52,7 +52,7 @@
icon="red:check"
(action)="save()"
text="rules-screen.save-changes"
[primary]="true"
type="primary"
></redaction-icon-button>
<div *ngIf="permissionsService.isAdmin()" (click)="revert()" translate="rules-screen.revert-changes" class="all-caps-label cancel"></div>
</div>

21
apps/red-ui/src/app/screens/empty-states/project-overview-empty/project-overview-empty.component.html
View File

@ -1,21 +0,0 @@
<div class="empty-state-container">
<div
*ngIf="!appStateService.activeProject"
[innerHTML]="'project-overview.no-project' | translate: { projectId: appStateService.activeProjectId }"
class="heading-xl"
></div>
<div *ngIf="appStateService.activeProject" class="heading-xl" translate="project-overview.no-files"></div>
<div *ngIf="appStateService.activeProject">
<button (click)="fileInput.click()" color="primary" mat-flat-button>
<mat-icon svgIcon="red:upload"></mat-icon>
<span translate="project-overview.upload-files-btn"></span>
</button>
<input #fileInput (change)="handleFileUploadEvent($event)" class="file-upload-input" multiple="true" type="file" accept="application/pdf" />
<button [routerLink]="['/ui/projects/']" mat-icon-button class="close-btn">
<mat-icon svgIcon="red:close"></mat-icon>
</button>
</div>
</div>

9
apps/red-ui/src/app/screens/empty-states/project-overview-empty/project-overview-empty.component.scss
View File

@ -1,9 +0,0 @@
.file-upload-input {
display: none;
}
.close-btn {
position: absolute;
top: 10px;
right: 14px;
}

17
apps/red-ui/src/app/screens/empty-states/project-overview-empty/project-overview-empty.component.ts
View File

@ -1,17 +0,0 @@
import { Component, EventEmitter, Output } from '@angular/core';
import { AppStateService } from '../../../state/app-state.service';
@Component({
selector: 'redaction-project-overview-empty',
templateUrl: './project-overview-empty.component.html',
styleUrls: ['./project-overview-empty.component.scss']
})
export class ProjectOverviewEmptyComponent {
@Output() uploadFiles = new EventEmitter();
constructor(public appStateService: AppStateService) {}
handleFileUploadEvent($event: Event) {
this.uploadFiles.emit(($event.target as HTMLInputElement).files);
}
}

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

@ -33,7 +33,7 @@
icon="red:plus"
(action)="openAddProjectDialog()"
text="project-listing.add-new"
[primary]="true"
type="primary"
></redaction-icon-button>
</div>

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

@ -1,5 +1,4 @@
<redaction-project-overview-empty (uploadFiles)="uploadFiles($event)" *ngIf="!appStateService.activeProject?.hasFiles"></redaction-project-overview-empty>
<section *ngIf="appStateService.activeProject?.hasFiles">
<section>
<div *ngIf="appStateService.activeProject" class="page-header">
<div class="filters">
<div translate="filters.filter-by"></div>
@ -97,154 +96,147 @@
tooltipPosition="before"
icon="red:close"
></redaction-circle-button>
<input #fileInput (change)="uploadFiles($event.target['files'])" class="file-upload-input" multiple="true" type="file" />
</div>
</div>
<div class="red-content-inner">
<div class="left-container" [class.extended]="collapsedDetails">
<div class="header-item">
<div class="select-all-container">
<div
(click)="toggleSelectAll()"
[class.active]="areAllFilesSelected"
class="select-oval always-visible"
*ngIf="!areAllFilesSelected && !areSomeFilesSelected"
></div>
<mat-icon *ngIf="areAllFilesSelected" (click)="toggleSelectAll()" class="selection-icon active" svgIcon="red:radio-selected"></mat-icon>
<mat-icon
*ngIf="areSomeFilesSelected && !areAllFilesSelected"
(click)="toggleSelectAll()"
class="selection-icon"
svgIcon="red:radio-indeterminate"
></mat-icon>
<div *ngIf="!appStateService.activeProject?.hasFiles" class="no-data">
<mat-icon svgIcon="red:document"></mat-icon>
<div class="heading-l" translate="project-overview.no-data.title"></div>
<redaction-icon-button (action)="fileInput.click()" icon="red:upload" text="project-overview.no-data.action" type="primary">
</redaction-icon-button>
</div>
<ng-container *ngIf="appStateService.activeProject?.hasFiles">
<div class="header-item">
<div class="select-all-container">
<div
(click)="toggleSelectAll()"
[class.active]="areAllFilesSelected"
class="select-oval always-visible"
*ngIf="!areAllFilesSelected && !areSomeFilesSelected"
></div>
<mat-icon *ngIf="areAllFilesSelected" (click)="toggleSelectAll()" class="selection-icon active" svgIcon="red:radio-selected"></mat-icon>
<mat-icon
*ngIf="areSomeFilesSelected && !areAllFilesSelected"
(click)="toggleSelectAll()"
class="selection-icon"
svgIcon="red:radio-indeterminate"
></mat-icon>
</div>
<span class="all-caps-label">
{{ 'project-overview.table-header.title' | translate: { length: displayedFiles.length || 0 } }}
</span>
<redaction-bulk-actions [selectedFileIds]="selectedFileIds" (reload)="bulkActionPerformed()"></redaction-bulk-actions>
</div>
<span class="all-caps-label">
{{ 'project-overview.table-header.title' | translate: { length: displayedFiles.length || 0 } }}
</span>
<div class="table-header" redactionSyncWidth="table-item" [class.no-data]="noData">
<!-- Table column names-->
<div class="select-oval-placeholder placeholder-bottom-border"></div>
<redaction-bulk-actions [selectedFileIds]="selectedFileIds" (reload)="bulkActionPerformed()"></redaction-bulk-actions>
</div>
<redaction-table-col-name
(toggleSort)="toggleSort($event)"
[activeSortingOption]="sortingOption"
[withSort]="true"
column="filename"
label="project-overview.table-col-names.name"
></redaction-table-col-name>
<div class="table-header" redactionSyncWidth="table-item" [class.no-data]="noData">
<!-- Table column names-->
<div class="select-oval-placeholder placeholder-bottom-border"></div>
<redaction-table-col-name
(toggleSort)="toggleSort($event)"
[activeSortingOption]="sortingOption"
[withSort]="true"
column="added"
label="project-overview.table-col-names.added-on"
></redaction-table-col-name>
<redaction-table-col-name
(toggleSort)="toggleSort($event)"
[activeSortingOption]="sortingOption"
[withSort]="true"
column="filename"
label="project-overview.table-col-names.name"
></redaction-table-col-name>
<redaction-table-col-name label="project-overview.table-col-names.needs-work"></redaction-table-col-name>
<redaction-table-col-name
(toggleSort)="toggleSort($event)"
[activeSortingOption]="sortingOption"
[withSort]="true"
column="added"
label="project-overview.table-col-names.added-on"
></redaction-table-col-name>
<redaction-table-col-name
(toggleSort)="toggleSort($event)"
[activeSortingOption]="sortingOption"
[withSort]="true"
column="reviewerName"
label="project-overview.table-col-names.assigned-to"
></redaction-table-col-name>
<redaction-table-col-name label="project-overview.table-col-names.needs-work"></redaction-table-col-name>
<redaction-table-col-name
(toggleSort)="toggleSort($event)"
[activeSortingOption]="sortingOption"
[withSort]="true"
column="pages"
label="project-overview.table-col-names.pages"
></redaction-table-col-name>
<redaction-table-col-name
(toggleSort)="toggleSort($event)"
[activeSortingOption]="sortingOption"
[withSort]="true"
column="reviewerName"
label="project-overview.table-col-names.assigned-to"
></redaction-table-col-name>
<redaction-table-col-name
(toggleSort)="toggleSort($event)"
[activeSortingOption]="sortingOption"
[withSort]="true"
class="flex-end"
column="statusSort"
label="project-overview.table-col-names.status"
></redaction-table-col-name>
<div class="scrollbar-placeholder"></div>
</div>
<redaction-table-col-name
(toggleSort)="toggleSort($event)"
[activeSortingOption]="sortingOption"
[withSort]="true"
column="pages"
label="project-overview.table-col-names.pages"
></redaction-table-col-name>
<div *ngIf="noData" class="no-data heading-l" translate="project-overview.no-files-match"></div>
<redaction-table-col-name
(toggleSort)="toggleSort($event)"
[activeSortingOption]="sortingOption"
[withSort]="true"
class="flex-end"
column="statusSort"
label="project-overview.table-col-names.status"
></redaction-table-col-name>
<div class="scrollbar-placeholder"></div>
</div>
<div class="grid-container">
<div
*ngFor="let fileStatus of displayedFiles | sortBy: sortingOption.order:sortingOption.column"
[class.pointer]="permissionsService.canOpenFile(fileStatus)"
[routerLink]="fileLink(fileStatus)"
class="table-item"
>
<div class="pr-0" (click)="toggleFileSelected($event, fileStatus)">
<div *ngIf="!isFileSelected(fileStatus)" class="select-oval"></div>
<mat-icon class="selection-icon active" *ngIf="isFileSelected(fileStatus)" svgIcon="red:radio-selected"></mat-icon>
</div>
<div *ngIf="noData" class="no-data heading-l" translate="project-overview.no-files-match"></div>
<div class="grid-container">
<div
*ngFor="let fileStatus of displayedFiles | sortBy: sortingOption.order:sortingOption.column"
[class.pointer]="permissionsService.canOpenFile(fileStatus)"
[routerLink]="fileLink(fileStatus)"
class="table-item"
>
<div class="pr-0" (click)="toggleFileSelected($event, fileStatus)">
<div *ngIf="!isFileSelected(fileStatus)" class="select-oval"></div>
<mat-icon class="selection-icon active" *ngIf="isFileSelected(fileStatus)" svgIcon="red:radio-selected"></mat-icon>
</div>
<div [title]="'[' + fileStatus.status + '] ' + fileStatus.filename">
<div class="filename-wrapper">
<div [class.disabled]="fileStatus.isPending || fileStatus.isProcessing" [class.error]="fileStatus.isError" class="table-item-title">
{{ fileStatus.filename }}
<div [title]="'[' + fileStatus.status + '] ' + fileStatus.filename">
<div class="filename-wrapper">
<div
[class.disabled]="fileStatus.isPending || fileStatus.isProcessing"
[class.error]="fileStatus.isError"
class="table-item-title"
>
{{ fileStatus.filename }}
</div>
<!-- <span *ngIf="permissionsService.fileRequiresReanalysis(fileStatus)" class="pill" translate="project-overview.new-rule.label"></span>-->
</div>
<!-- <span *ngIf="permissionsService.fileRequiresReanalysis(fileStatus)" class="pill" translate="project-overview.new-rule.label"></span>-->
</div>
</div>
<div>
<div [class.error]="fileStatus.isError" class="small-label">
{{ fileStatus.added | date: 'd MMM. yyyy, hh:mm a' }}
<div>
<div [class.error]="fileStatus.isError" class="small-label">
{{ fileStatus.added | date: 'd MMM. yyyy, hh:mm a' }}
</div>
</div>
</div>
<!-- always show A for error-->
<div *ngIf="fileStatus.isError">
<redaction-annotation-icon type="square" label="A" color="#dd4d50"></redaction-annotation-icon>
</div>
<div *ngIf="!fileStatus.isError">
<redaction-needs-work-badge [needsWorkInput]="fileStatus"></redaction-needs-work-badge>
</div>
<div *ngIf="!fileStatus.isError" class="assigned-to">
<redaction-initials-avatar [userId]="fileStatus.currentReviewer" [withName]="true"></redaction-initials-avatar>
</div>
<div *ngIf="!fileStatus.isError">
<div class="pages">
<mat-icon svgIcon="red:pages"></mat-icon>
{{ fileStatus.numberOfPages }}
<!-- always show A for error-->
<div *ngIf="fileStatus.isError">
<redaction-annotation-icon type="square" label="A" color="#dd4d50"></redaction-annotation-icon>
</div>
</div>
<div [class.extend-cols]="fileStatus.isError" class="status-container">
<div *ngIf="fileStatus.isError" class="small-label error" translate="project-overview.file-listing.file-entry.file-error"></div>
<div *ngIf="fileStatus.isPending" class="small-label" translate="project-overview.file-listing.file-entry.file-pending"></div>
<div *ngIf="fileStatus.isProcessing" class="small-label" translate="project-overview.file-listing.file-entry.file-processing"></div>
<redaction-status-bar
*ngIf="fileStatus.isWorkable"
[config]="[
{
color: fileStatus.status,
length: 1
}
]"
></redaction-status-bar>
<div *ngIf="!fileStatus.isError">
<redaction-needs-work-badge [needsWorkInput]="fileStatus"></redaction-needs-work-badge>
</div>
<div *ngIf="!fileStatus.isError" class="assigned-to">
<redaction-initials-avatar [userId]="fileStatus.currentReviewer" [withName]="true"></redaction-initials-avatar>
</div>
<div class="action-buttons">
<redaction-file-actions
[fileStatus]="fileStatus"
(actionPerformed)="calculateData()"
*ngIf="!fileStatus.isProcessing"
class="mr-4"
></redaction-file-actions>
<div *ngIf="!fileStatus.isError">
<div class="pages">
<mat-icon svgIcon="red:pages"></mat-icon>
{{ fileStatus.numberOfPages }}
</div>
</div>
<div [class.extend-cols]="fileStatus.isError" class="status-container">
<div *ngIf="fileStatus.isError" class="small-label error" translate="project-overview.file-listing.file-entry.file-error"></div>
<div *ngIf="fileStatus.isPending" class="small-label" translate="project-overview.file-listing.file-entry.file-pending"></div>
<div *ngIf="fileStatus.isProcessing" class="small-label" translate="project-overview.file-listing.file-entry.file-processing"></div>
<redaction-status-bar
*ngIf="fileStatus.isWorkable"
[config]="[
@ -254,11 +246,29 @@
}
]"
></redaction-status-bar>
<div class="action-buttons">
<redaction-file-actions
[fileStatus]="fileStatus"
(actionPerformed)="calculateData()"
*ngIf="!fileStatus.isProcessing"
class="mr-4"
></redaction-file-actions>
<redaction-status-bar
*ngIf="fileStatus.isWorkable"
[config]="[
{
color: fileStatus.status,
length: 1
}
]"
></redaction-status-bar>
</div>
</div>
<div class="scrollbar-placeholder"></div>
</div>
<div class="scrollbar-placeholder"></div>
</div>
</div>
</ng-container>
</div>
<div class="right-container" [class.collapsed]="collapsedDetails">
@ -276,3 +286,5 @@
<ng-template #needsWorkTemplate let-filter="filter">
<redaction-type-filter [filter]="filter"></redaction-type-filter>
</ng-template>
<input #fileInput (change)="uploadFiles($event.target['files'])" class="file-upload-input" multiple="true" type="file" />

5
apps/red-ui/src/assets/i18n/en.json
View File

@ -159,6 +159,10 @@
"collapse": "Hide Details"
},
"project-overview": {
"no-data": {
"title": "There are no documents yet.",
"action": "Upload Document"
},
"search": "Document name...",
"header-actions": {
"edit": "Edit",
@ -172,7 +176,6 @@
"under-approval": "For Approval",
"approve": "Approve",
"under-review": "Under Review",
"no-files": "Project is empty!",
"no-files-match": "No File match your current filters",
"upload-files": "Drop files anywhere for upload!",
"upload-files-btn": "Upload Files",

23
apps/red-ui/src/assets/styles/red-page-layout.scss
View File

@ -81,6 +81,29 @@ body {
width: 100%;
height: 4px;
}
.no-data {
display: flex;
flex-direction: column;
align-items: center;
padding-top: 120px;
@include inset-shadow;
> mat-icon {
height: 60px;
width: 60px;
opacity: 0.1;
}
.heading-l {
color: $grey-7;
}
> mat-icon,
.heading-l {
margin-bottom: 24px;
}
}
}
.right-container {