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

Update UI on delete rule set (and some checks in other places)

Browse Source
This commit is contained in:
Adina Țeudan 2021-01-18 16:37:15 +02:00
parent 89c0f32fe6
commit 0afa1b1419
10 changed files with 116 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
apps/red-ui/src/app/components/admin-page-header/admin-breadcrumbs.component.html
View File

@ -5,7 +5,7 @@
[routerLinkActiveOptions]="{ exact: true }"
routerLinkActive="active"
translate="project-templates"
*ngIf="root || !!appStateService.activeRuleSetId"
*ngIf="root || !!appStateService.activeRuleSet"
></a>
<a
@ -17,7 +17,7 @@
*ngIf="root && userPreferenceService.areDevFeaturesEnabled"
></a>
<ng-container *ngIf="appStateService.activeRuleSetId">
<ng-container *ngIf="appStateService.activeRuleSet">
<mat-icon svgIcon="red:arrow-right"></mat-icon>
<a
class="breadcrumb ml-0"
@ -28,7 +28,7 @@
</a>
</ng-container>
<ng-container *ngIf="appStateService.activeDictionaryType">
<ng-container *ngIf="appStateService.activeDictionary">
<mat-icon svgIcon="red:arrow-right"></mat-icon>
<a
class="breadcrumb ml-0"

5
apps/red-ui/src/app/components/rule-set-actions/rule-set-actions.component.ts
View File

@ -3,6 +3,7 @@ import { DialogService } from '../../dialogs/dialog.service';
import { PermissionsService } from '../../common/service/permissions.service';
import { RuleSetModel } from '@redaction/red-ui-http';
import { AppStateService } from '../../state/app-state.service';
import { Router } from '@angular/router';
@Component({
selector: 'redaction-rule-set-actions',
@ -16,6 +17,7 @@ export class RuleSetActionsComponent implements OnInit {
constructor(
private readonly _dialogService: DialogService,
private readonly _appStateService: AppStateService,
private readonly _router: Router,
public readonly permissionsService: PermissionsService
) {
if (!this.ruleSet) {
@ -36,6 +38,9 @@ export class RuleSetActionsComponent implements OnInit {
openDeleteRuleSetDialog($event: any, ruleSet: RuleSetModel) {
this._dialogService.openDeleteRuleSetDialog($event, ruleSet, async () => {
await this._appStateService.loadAllRuleSets();
await this._appStateService.loadDictionaryData();
await this._router.navigate(['ui', 'admin']);
this.loadRuleSetsData.emit();
});
}

21
apps/red-ui/src/app/dialogs/dialog.service.ts
View File

@ -57,17 +57,15 @@ export class DialogService {
})
});
ref.afterClosed().subscribe((result) => {
ref.afterClosed().subscribe(async (result) => {
if (result) {
const deleteFilesPromise = this._fileManagementControllerService.deleteFiles(fileIds, projectId).toPromise();
deleteFilesPromise
.then(async () => {
await this._appStateService.reloadActiveProjectFiles();
if (cb) cb();
})
.catch(() => {
this._notificationService.showToastNotification(this._translateService.instant('delete-files-error'), null, NotificationType.ERROR);
});
try {
await this._fileManagementControllerService.deleteFiles(fileIds, projectId).toPromise();
await this._appStateService.reloadActiveProjectFiles();
if (cb) cb();
} catch (e) {
this._notificationService.showToastNotification(this._translateService.instant('delete-files-error'), null, NotificationType.ERROR);
}
}
});
@ -190,8 +188,7 @@ export class DialogService {
ref.afterClosed().subscribe(async (result) => {
if (result) {
await this._ruleSetControllerService.getAllRuleSets(ruleSet.ruleSetId).toPromise();
await this._appStateService.loadAllRuleSets();
if (cb) cb();
if (cb) await cb();
}
});
return ref;

1
apps/red-ui/src/app/screens/admin/rule-sets-listing-screen/add-edit-rule-set-dialog/add-edit-rule-set-dialog.component.ts
View File

@ -56,6 +56,7 @@ export class AddEditRuleSetDialogComponent {
};
await this._ruleSetController.createOrUpdateRuleSet(ruleSet).toPromise();
await this._appStateService.loadAllRuleSets();
await this._appStateService.loadDictionaryData();
this.dialogRef.close({ ruleSet });
}
}

2
apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html
View File

@ -1,4 +1,4 @@
<section>
<section *ngIf="appStateService.activeFile">
<div class="page-header">
<div class="flex-1">
<div

11
apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.ts
View File

@ -522,17 +522,16 @@ export class FilePreviewScreenComponent implements OnInit, OnDestroy {
switch (action) {
case 'delete':
await this._router.navigate([`/ui/projects/${this.projectId}`]);
break;
return;
case 'reanalyse':
this.viewReady = false;
this.loadingMessage = 'file-preview.reanalyse-file';
break;
await this._loadFileData().toPromise();
this._updateCanPerformActions();
await this.appStateService.reloadActiveProjectFiles();
return;
}
await this._loadFileData().toPromise();
this._updateCanPerformActions();
await this.appStateService.reloadActiveProjectFiles();
}
get displayData() {

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

@ -1,92 +1,96 @@
<div class="collapsed-wrapper mt-8">
<redaction-circle-button
(action)="toggleCollapse.emit()"
icon="red:expand"
tooltip="project-details.expand"
tooltipPosition="before"
></redaction-circle-button>
<div class="all-caps-label" translate="project-details.title"></div>
</div>
<ng-container *ngIf="appStateService.activeProject"
><div class="collapsed-wrapper mt-8">
<redaction-circle-button
(action)="toggleCollapse.emit()"
icon="red:expand"
tooltip="project-details.expand"
tooltipPosition="before"
></redaction-circle-button>
<div class="all-caps-label" translate="project-details.title"></div>
</div>
<div class="header-wrapper mt-8">
<div class="heading-xl flex-1">{{ appStateService.activeProject.project.projectName }}</div>
<redaction-circle-button
(action)="toggleCollapse.emit()"
icon="red:collapse"
tooltip="project-details.collapse"
tooltipPosition="before"
></redaction-circle-button>
</div>
<div class="header-wrapper mt-8">
<div class="heading-xl flex-1">{{ appStateService.activeProject.project.projectName }}</div>
<redaction-circle-button
(action)="toggleCollapse.emit()"
icon="red:collapse"
tooltip="project-details.collapse"
tooltipPosition="before"
></redaction-circle-button>
</div>
<div class="mt-24">
<div class="all-caps-label" translate="project-details.owner"></div>
<div class="mt-12">
<redaction-initials-avatar
[userId]="appStateService.activeProject.project.ownerId"
[withName]="true"
size="large"
color="gray"
></redaction-initials-avatar>
<div class="mt-24">
<div class="all-caps-label" translate="project-details.owner"></div>
<div class="mt-12">
<redaction-initials-avatar
[userId]="appStateService.activeProject.project.ownerId"
[withName]="true"
size="large"
color="gray"
></redaction-initials-avatar>
</div>
</div>
</div>
<div class="mt-16">
<div class="all-caps-label" translate="project-details.members"></div>
<redaction-team-members [memberIds]="memberIds" (openAssignProjectMembersDialog)="openAssignProjectMembersDialog.emit()"></redaction-team-members>
</div>
<div class="mt-16">
<div class="all-caps-label" translate="project-details.members"></div>
<redaction-team-members [memberIds]="memberIds" (openAssignProjectMembersDialog)="openAssignProjectMembersDialog.emit()"></redaction-team-members>
</div>
<div *ngIf="hasFiles" class="mt-24">
<redaction-simple-doughnut-chart
(toggleFilter)="toggleFilter('statusFilters', $event)"
[config]="documentsChartData"
[filter]="filters.statusFilters"
[radius]="63"
[strokeWidth]="15"
[subtitle]="'project-overview.project-details.charts.documents-in-project'"
direction="row"
></redaction-simple-doughnut-chart>
</div>
<div *ngIf="hasFiles" class="mt-24">
<redaction-simple-doughnut-chart
(toggleFilter)="toggleFilter('statusFilters', $event)"
[config]="documentsChartData"
[filter]="filters.statusFilters"
[radius]="63"
[strokeWidth]="15"
[subtitle]="'project-overview.project-details.charts.documents-in-project'"
direction="row"
></redaction-simple-doughnut-chart>
</div>
<div *ngIf="hasFiles" class="mt-24 legend pb-32">
<div (click)="toggleFilter('needsWorkFilters', filter.key)" *ngFor="let filter of filters.needsWorkFilters" [class.active]="filter.checked">
<redaction-type-filter [filter]="filter"></redaction-type-filter>
<div *ngIf="hasFiles" class="mt-24 legend pb-32">
<div (click)="toggleFilter('needsWorkFilters', filter.key)" *ngFor="let filter of filters.needsWorkFilters" [class.active]="filter.checked">
<redaction-type-filter [filter]="filter"></redaction-type-filter>
</div>
</div>
</div>
<div class="pb-32 small-label stats-subtitle">
<div>
<mat-icon svgIcon="red:document"></mat-icon>
<span>{{ 'project-overview.project-details.stats.documents' | translate: { count: appStateService.activeProject.files.length } }}</span>
<div class="pb-32 small-label stats-subtitle">
<div>
<mat-icon svgIcon="red:document"></mat-icon>
<span>{{ 'project-overview.project-details.stats.documents' | translate: { count: appStateService.activeProject.files.length } }}</span>
</div>
<div>
<mat-icon svgIcon="red:user"></mat-icon>
<span>{{ 'project-overview.project-details.stats.people' | translate: { count: appStateService.activeProject.memberCount } }}</span>
</div>
<div>
<mat-icon svgIcon="red:pages"></mat-icon>
<span>{{
'project-overview.project-details.stats.analysed-pages' | translate: { count: appStateService.activeProject.totalNumberOfPages | number }
}}</span>
</div>
<div>
<mat-icon svgIcon="red:calendar"></mat-icon>
<span
>{{
'project-overview.project-details.stats.created-on' | translate: { date: appStateService.activeProject.project.date | date: 'd MMM. yyyy' }
}}
</span>
</div>
<div *ngIf="appStateService.activeProject.project.dueDate">
<mat-icon svgIcon="red:lightning"></mat-icon>
<span>{{
'project-overview.project-details.stats.due-date' | translate: { date: appStateService.activeProject.project.dueDate | date: 'd MMM. yyyy' }
}}</span>
</div>
<div>
<mat-icon svgIcon="red:template"></mat-icon>
<span>{{ appStateService.getRuleSetById(appStateService.activeProject.ruleSetId)?.name }} </span>
</div>
</div>
<div>
<mat-icon svgIcon="red:user"></mat-icon>
<span>{{ 'project-overview.project-details.stats.people' | translate: { count: appStateService.activeProject.memberCount } }}</span>
</div>
<div>
<mat-icon svgIcon="red:pages"></mat-icon>
<span>{{
'project-overview.project-details.stats.analysed-pages' | translate: { count: appStateService.activeProject.totalNumberOfPages | number }
}}</span>
</div>
<div>
<mat-icon svgIcon="red:calendar"></mat-icon>
<span
>{{ 'project-overview.project-details.stats.created-on' | translate: { date: appStateService.activeProject.project.date | date: 'd MMM. yyyy' } }}
</span>
</div>
<div *ngIf="appStateService.activeProject.project.dueDate">
<mat-icon svgIcon="red:lightning"></mat-icon>
<span>{{
'project-overview.project-details.stats.due-date' | translate: { date: appStateService.activeProject.project.dueDate | date: 'd MMM. yyyy' }
}}</span>
</div>
<div>
<mat-icon svgIcon="red:template"></mat-icon>
<span>{{ appStateService.getRuleSetById(appStateService.activeProject.ruleSetId)?.name }} </span>
</div>
</div>
<div class="pb-32" *ngIf="!!appStateService.activeProject.project.description">
<div class="heading" translate="project-overview.project-details.description"></div>
<div class="mt-8">{{ appStateService.activeProject.project.description }}</div>
</div>
<div class="pb-32" *ngIf="!!appStateService.activeProject.project.description">
<div class="heading" translate="project-overview.project-details.description"></div>
<div class="mt-8">{{ appStateService.activeProject.project.description }}</div>
</div>
</ng-container>

3
apps/red-ui/src/app/state/app-state.service.ts
View File

@ -146,7 +146,7 @@ export class AppStateService {
}
get activeDictionary(): TypeValue {
return this.dictionaryData[this.activeRuleSetId][this.activeDictionaryType];
return this.activeRuleSetId && this.dictionaryData[this.activeRuleSetId] ? this.dictionaryData[this.activeRuleSetId][this.activeDictionaryType] : null;
}
getDictionaryTypeValue(key: string, ruleSetId?: string) {
@ -228,6 +228,7 @@ export class AppStateService {
}
async reloadActiveFile() {
if (!this.activeFile) return null;
const oldProcessedDate = this.activeFile.lastProcessed;
const activeFile = await this._statusControllerService.getFileStatus(this.activeProjectId, this.activeFileId).toPromise();

4
apps/red-ui/src/app/upload-download/upload-status-overlay/upload-status-overlay.component.html
View File

@ -1,6 +1,8 @@
<section class="red-upload-download-overlay mat-elevation-z4">
<div (click)="collapsed = !collapsed" class="red-upload-download-header">
<div class="title" translate="upload-status.dialog.title"></div>
<div class="title">
{{ 'upload-status.dialog.title' | translate: { len: uploadService.files.length } }}
</div>
<div *ngIf="!collapsed" class="collapse-icon">
<mat-icon svgIcon="red:arrow-down"></mat-icon>
</div>

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

@ -14,7 +14,7 @@
"generic": "Failed to upload file... "
},
"dialog": {
"title": "File Upload",
"title": "File Uploads ({{len}})",
"actions": {
"re-upload": "Retry Upload",
"cancel": "Cancel Upload"