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

RED-3800: Update common-ui

Browse Source
This commit is contained in:
Adina Țeudan 2023-08-02 15:58:36 +03:00
parent a2c4d68b80
commit fb43fb17d6
15 changed files with 52 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
apps/red-ui/src/app/components/base-screen/base-screen.component.html
View File

@ -11,10 +11,7 @@
<a [matTooltip]="'top-bar.navigation-items.back-to-dashboard' | translate" [routerLink]="['/'] | tenant" class="logo">
<div [attr.help-mode-key]="'home'" class="actions">
<iqser-logo
(iqserHiddenAction)="userPreferenceService.toggleDevFeatures()"
[icon]="config.IS_DOCUMINE ? 'red:documine-logo' : 'red:logo'"
></iqser-logo>
<iqser-logo (iqserHiddenAction)="userPreferenceService.toggleDevFeatures()" icon="iqser:logo"></iqser-logo>
<div class="app-name">{{ titleService.getTitle() }}</div>
</div>
</a>

35
apps/red-ui/src/app/components/base-screen/base-screen.component.ts
View File

@ -6,7 +6,7 @@ import { Title } from '@angular/platform-browser';
import { TranslateService } from '@ngx-translate/core';
import { SpotlightSearchAction } from '@components/spotlight-search/spotlight-search-action';
import { filter, map, startWith } from 'rxjs/operators';
import { getConfig, IqserPermissionsService } from '@iqser/common-ui';
import { IqserPermissionsService } from '@iqser/common-ui';
import { BreadcrumbsService } from '@services/breadcrumbs.service';
import { FeaturesService } from '@services/features.service';
import { ARCHIVE_ROUTE, DOSSIERS_ARCHIVE, DOSSIERS_ROUTE } from '@red/domain';
@ -24,16 +24,9 @@ const isSearchScreen: (url: string) => boolean = url => url.includes('/search');
styleUrls: ['./base-screen.component.scss'],
})
export class BaseScreenComponent {
readonly #navigationStart$ = this._router.events.pipe(
filter(isNavigationStart),
map(event => event.url),
startWith(this._router.url),
shareDistinctLast(),
);
readonly roles = Roles;
readonly documentViewer = inject(REDDocumentViewer);
readonly currentUser = this.userService.currentUser;
readonly config = getConfig();
readonly searchActions: List<SpotlightSearchAction> = [
{
text: this._translateService.instant('search.this-dossier'),
@ -53,8 +46,24 @@ export class BaseScreenComponent {
action: (query): void => this.#search(query, []),
},
];
readonly #navigationStart$ = this._router.events.pipe(
filter(isNavigationStart),
map(event => event.url),
startWith(this._router.url),
shareDistinctLast(),
);
readonly isSearchScreen$ = this.#navigationStart$.pipe(map(isSearchScreen));
get #hideSearchThisDossier() {
const routerLink = this.breadcrumbsService.breadcrumbs[1]?.options?.routerLink;
if (!routerLink) {
return true;
}
const isDossierOverview = (routerLink.includes(DOSSIERS_ROUTE) || routerLink.includes(ARCHIVE_ROUTE)) && routerLink.length === 3;
return !isDossierOverview;
}
constructor(
private readonly _router: Router,
activatedRoute: ActivatedRoute,
@ -71,16 +80,6 @@ export class BaseScreenComponent {
activatedRoute.queryParamMap.pipe(takeUntilDestroyed()).subscribe(queryParams => this.#navigate(queryParams));
}
get #hideSearchThisDossier() {
const routerLink = this.breadcrumbsService.breadcrumbs[1]?.options?.routerLink;
if (!routerLink) {
return true;
}
const isDossierOverview = (routerLink.includes(DOSSIERS_ROUTE) || routerLink.includes(ARCHIVE_ROUTE)) && routerLink.length === 3;
return !isDossierOverview;
}
#navigate(queryParams: ParamMap) {
if (queryParams.has('username')) {
return this._router.navigate([], {

2
apps/red-ui/src/app/components/skeleton/skeleton-top-bar/skeleton-top-bar.component.html
View File

@ -4,7 +4,7 @@
</div>
<a class="logo">
<div class="actions">
<iqser-logo [icon]="config.IS_DOCUMINE ? 'red:documine-logo' : 'red:logo'"></iqser-logo>
<iqser-logo icon="iqser:logo"></iqser-logo>
<div class="app-name">{{ titleService.getTitle() }}</div>
</div>
</a>

3
apps/red-ui/src/app/components/skeleton/skeleton-top-bar/skeleton-top-bar.component.ts
View File

@ -1,6 +1,5 @@
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { Title } from '@angular/platform-browser';
import { getConfig } from '@iqser/common-ui';
@Component({
selector: 'redaction-skeleton-top-bar',
@ -9,7 +8,5 @@ import { getConfig } from '@iqser/common-ui';
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class SkeletonTopBarComponent {
readonly config = getConfig();
constructor(readonly titleService: Title) {}
}

4
apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-template-dialog/add-edit-clone-dossier-template-dialog.component.html
View File

@ -45,7 +45,7 @@
placeholder="dd/mm/yy"
/>
<mat-datepicker-toggle [for]="fromPicker" matSuffix>
<mat-icon matDatepickerToggleIcon svgIcon="red:calendar"></mat-icon>
<mat-icon matDatepickerToggleIcon svgIcon="iqser:calendar"></mat-icon>
</mat-datepicker-toggle>
<mat-datepicker #fromPicker></mat-datepicker>
</ng-container>
@ -60,7 +60,7 @@
placeholder="dd/mm/yy"
/>
<mat-datepicker-toggle [for]="toPicker" matSuffix>
<mat-icon matDatepickerToggleIcon svgIcon="red:calendar"></mat-icon>
<mat-icon matDatepickerToggleIcon svgIcon="iqser:calendar"></mat-icon>
</mat-datepicker-toggle>
<mat-datepicker #toPicker></mat-datepicker>
</ng-container>

12
apps/red-ui/src/app/modules/admin/screens/audit/audit-screen.component.html
View File

@ -30,8 +30,8 @@
<mat-select (selectionChange)="filterChange()" formControlName="category" id="select-category">
<mat-option
*ngFor="let category of categories"
[value]="category"
[id]="'select-category-' + category.toLocaleLowerCase()"
[value]="category"
>
{{ (translations[category] | translate) || category }}
</mat-option>
@ -52,7 +52,7 @@
<div *ngIf="form.get('userId').value === ALL_USERS" [translate]="ALL_USERS"></div>
</mat-select-trigger>
<mat-option *ngFor="let userId of userIds" [value]="userId" [id]="'select-user-' + userId">
<mat-option *ngFor="let userId of userIds" [id]="'select-user-' + userId" [value]="userId">
<iqser-initials-avatar *ngIf="userId !== ALL_USERS" [user]="userId" [withName]="true"></iqser-initials-avatar>
<div *ngIf="userId === ALL_USERS" [translate]="ALL_USERS"></div>
@ -65,14 +65,14 @@
<div class="iqser-input-group datepicker-wrapper mr-20">
<input
id="start-date-input"
(dateChange)="filterChange()"
[matDatepicker]="fromPicker"
formControlName="from"
id="start-date-input"
placeholder="dd/mm/yy"
/>
<mat-datepicker-toggle [for]="fromPicker" matSuffix>
<mat-icon matDatepickerToggleIcon svgIcon="red:calendar"></mat-icon>
<mat-icon matDatepickerToggleIcon svgIcon="iqser:calendar"></mat-icon>
</mat-datepicker-toggle>
<mat-datepicker #fromPicker></mat-datepicker>
</div>
@ -81,14 +81,14 @@
<div class="iqser-input-group datepicker-wrapper">
<input
id="end-date-input"
(dateChange)="filterChange()"
[matDatepicker]="toPicker"
formControlName="to"
id="end-date-input"
placeholder="dd/mm/yy"
/>
<mat-datepicker-toggle [for]="toPicker" matSuffix>
<mat-icon matDatepickerToggleIcon svgIcon="red:calendar"></mat-icon>
<mat-icon matDatepickerToggleIcon svgIcon="iqser:calendar"></mat-icon>
</mat-datepicker-toggle>
<mat-datepicker #toPicker></mat-datepicker>
</div>

8
apps/red-ui/src/app/modules/admin/screens/info/info-screen/dossier-template-info-screen.component.html
View File

@ -17,12 +17,12 @@
</div>
<div *ngIf="ctx.dossierTemplate.validTo && ctx.dossierTemplate.validFrom | date : 'd MMM yyyy' as validFrom">
<mat-icon svgIcon="red:calendar"></mat-icon>
<mat-icon svgIcon="iqser:calendar"></mat-icon>
<span [innerHTML]="'dossier-template-info-screen.valid-from' | translate : { date: validFrom }"></span>
</div>
<div *ngIf="ctx.dossierTemplate.dateAdded | date : 'd MMM yyyy' as createdOn">
<mat-icon svgIcon="red:calendar"></mat-icon>
<mat-icon svgIcon="iqser:calendar"></mat-icon>
<span [innerHTML]="'dossier-template-info-screen.created-on' | translate : { date: createdOn }"></span>
</div>
@ -32,12 +32,12 @@
</div>
<div *ngIf="ctx.dossierTemplate.validFrom && ctx.dossierTemplate.validTo | date : 'd MMM yyyy' as validTo">
<mat-icon svgIcon="red:calendar"></mat-icon>
<mat-icon svgIcon="iqser:calendar"></mat-icon>
<span [innerHTML]="'dossier-template-info-screen.valid-to' | translate : { date: validTo }"></span>
</div>
<div *ngIf="ctx.dossierTemplate.dateModified | date : 'd MMM yyyy' as dateModified">
<mat-icon svgIcon="red:calendar"></mat-icon>
<mat-icon svgIcon="iqser:calendar"></mat-icon>
<span [innerHTML]="'dossier-template-info-screen.modified-on' | translate : { date: dateModified }"></span>
</div>
</div>

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

@ -22,7 +22,7 @@
</div>
<div *ngIf="dossier.date | date : 'd MMM yyyy' as date">
<mat-icon svgIcon="red:calendar"></mat-icon>
<mat-icon svgIcon="iqser:calendar"></mat-icon>
<span [innerHTML]="'dossier-overview.dossier-details.stats.created-on' | translate : { date }"></span>
</div>
@ -37,8 +37,8 @@
</div>
<div
*ngIf="!isDocumine"
(click)="openEditDossierDialog('dossierDictionary')"
*ngIf="!isDocumine"
[attr.help-mode-key]="'edit_dossier_dossier_dictionary'"
class="link-property"
>

2
apps/red-ui/src/app/modules/file-preview/components/document-info/document-info.component.html
View File

@ -41,7 +41,7 @@
</div>
<div *ngIf="_state.file().added | date : 'mediumDate' as added">
<mat-icon svgIcon="red:calendar"></mat-icon>
<mat-icon svgIcon="iqser:calendar"></mat-icon>
<span [innerHTML]="'file-preview.tabs.document-info.details.created-on' | translate : { date: added }"></span>
</div>

14
apps/red-ui/src/app/modules/icons/icons.module.ts
View File

@ -2,6 +2,7 @@ import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatIconModule, MatIconRegistry } from '@angular/material/icon';
import { DomSanitizer } from '@angular/platform-browser';
import { getConfig } from '@common-ui/services';
@NgModule({
imports: [CommonModule, MatIconModule],
@ -9,6 +10,8 @@ import { DomSanitizer } from '@angular/platform-browser';
exports: [MatIconModule],
})
export class IconsModule {
readonly config = getConfig();
constructor(private readonly _iconRegistry: MatIconRegistry, private readonly _sanitizer: DomSanitizer) {
const icons = [
'ai',
@ -26,7 +29,6 @@ export class IconsModule {
'assign',
'assign-me',
'attribute',
'calendar',
'case-sensitive',
'color-picker',
'comment',
@ -36,7 +38,6 @@ export class IconsModule {
'dictionary',
'denied',
'disable-analysis',
'documine-logo',
'double-chevron-right',
'enable-analysis',
'enter',
@ -51,7 +52,6 @@ export class IconsModule {
'info',
'import_redactions',
'lightning',
'logo',
'nav-first',
'nav-last',
'nav-next',
@ -100,5 +100,13 @@ export class IconsModule {
_sanitizer.bypassSecurityTrustResourceUrl(`/assets/icons/general/${icon}.svg`),
);
}
const logo = this.config.IS_DOCUMINE ? 'documine-logo' : 'logo';
_iconRegistry.addSvgIconInNamespace(
'iqser',
'logo',
_sanitizer.bypassSecurityTrustResourceUrl(`/assets/icons/general/${logo}.svg`),
);
}
}

6
apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.html
View File

@ -69,7 +69,7 @@
<div *ngIf="hasDueDate" class="iqser-input-group datepicker-wrapper">
<input [matDatepicker]="picker" formControlName="dueDate" placeholder="dd/mm/yy" />
<mat-datepicker-toggle [for]="picker" matSuffix>
<mat-icon matDatepickerToggleIcon svgIcon="red:calendar"></mat-icon>
<mat-icon matDatepickerToggleIcon svgIcon="iqser:calendar"></mat-icon>
</mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</div>
@ -81,20 +81,20 @@
<iqser-icon-button
(action)="deleteDossier()"
*ngIf="permissionsService.canDeleteDossier(dossier)"
[attr.help-mode-key]="'edit_dossier_delete_dossier_DIALOG'"
[buttonId]="'deleteDossier'"
[icon]="'iqser:trash'"
[label]="'dossier-listing.delete.action' | translate"
[type]="iconButtonTypes.dark"
[attr.help-mode-key]="'edit_dossier_delete_dossier_DIALOG'"
></iqser-icon-button>
<iqser-icon-button
(action)="archiveDossier()"
*ngIf="permissionsService.canArchiveDossier(dossier)"
[attr.help-mode-key]="'edit_dossier_archive_dossier_DIALOG'"
[icon]="'red:archive'"
[label]="'dossier-listing.archive.action' | translate"
[type]="iconButtonTypes.dark"
[attr.help-mode-key]="'edit_dossier_archive_dossier_DIALOG'"
></iqser-icon-button>
</div>
</form>

4
apps/red-ui/src/app/modules/shared/components/dossier-name-column/dossier-name-column.component.html
View File

@ -1,4 +1,4 @@
<div [matTooltip]="dossier.dossierName" class="table-item-title heading mb-6" matTooltipPosition="above" [attr.help-mode-key]="'dossier'">
<div [attr.help-mode-key]="'dossier'" [matTooltip]="dossier.dossierName" class="table-item-title heading mb-6" matTooltipPosition="above">
{{ dossier.dossierName }}
</div>
@ -26,7 +26,7 @@
</div>
<div class="small-label">
<mat-icon svgIcon="red:calendar"></mat-icon>
<mat-icon svgIcon="iqser:calendar"></mat-icon>
{{ dossier.date | date : 'mediumDate' }}
</div>

2
apps/red-ui/src/app/modules/shared/dialogs/add-dossier-dialog/add-dossier-dialog.component.html
View File

@ -71,7 +71,7 @@
<div *ngIf="hasDueDate" class="iqser-input-group datepicker-wrapper">
<input [matDatepicker]="picker" formControlName="dueDate" placeholder="dd/mm/yy" />
<mat-datepicker-toggle [for]="picker" matSuffix>
<mat-icon matDatepickerToggleIcon svgIcon="red:calendar"></mat-icon>
<mat-icon matDatepickerToggleIcon svgIcon="iqser:calendar"></mat-icon>
</mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</div>

15
apps/red-ui/src/assets/icons/general/calendar.svg
View File

@ -1,15 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg height="100px" version="1.1" viewBox="0 0 100 100" width="100px"
xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd" id="calendar" stroke="none" stroke-width="1">
<path
d="M35,70 L35,80 L25,80 L25,70 L35,70 Z M55,70 L55,80 L45,80 L45,70 L55,70 Z M35,55 L35,65 L25,65 L25,55 L35,55 Z M55,55 L55,65 L45,65 L45,55 L55,55 Z M75,55 L75,65 L65,65 L65,55 L75,55 Z M55,40 L55,50 L45,50 L45,40 L55,40 Z M75,40 L75,50 L65,50 L65,40 L75,40 Z"
fill="currentColor" fill-rule="nonzero" id="Combined-Shape"></path>
<path
d="M90,0 L10,0 C4.5,0 0,4.5 0,10 L0,90 C0,95.5 4.5,100 10,100 L90,100 C95.5,100 100,95.5 100,90 L100,10 C100,4.5 95.5,0 90,0 Z M10,90 L10,10 L90,10 L90,90 L10,90 Z"
fill="currentColor" fill-rule="nonzero" id="Shape"></path>
<path
d="M90,20 L10,20 C4.5,20 0,24.5 0,30 L0,90 C0,95.5 4.5,100 10,100 L90,100 C95.5,100 100,95.5 100,90 L100,30 C100,24.5 95.5,20 90,20 Z M10,90 L10,30 L90,30 L90,90 L10,90 Z"
fill="currentColor" fill-rule="nonzero" id="Shape"></path>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.1 KiB

2
libs/common-ui

@ -1 +1 @@
Subproject commit 3b84e73f8060f648e91b61f7df6827778d73917c
Subproject commit 5d40f20a32fbcbd99faaaf42688b19b6601a8f1f