MaDgiK-CITE
/
argos
13
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

truncate option-text on autocomplete

This commit is contained in:
Sofia Papacharalampous 2024-05-22 12:39:14 +03:00
parent b4857b403e
commit 158a3356a4
7 changed files with 53 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
dmp-frontend/src/app/core/formatting.module.ts
View File

@ -12,6 +12,7 @@ import {FieldValuePipe} from "@app/core/pipes/field-value.pipe";
import {ColumnClassPipe} from "@app/core/pipes/column-class.pipe"; import {ColumnClassPipe} from "@app/core/pipes/column-class.pipe";
import { PipeService } from '@common/formatting/pipe.service'; import { PipeService } from '@common/formatting/pipe.service';
import { AppTitleCaseFormatPipe } from '@common/formatting/pipes/app-title-case-format.pipe'; import { AppTitleCaseFormatPipe } from '@common/formatting/pipes/app-title-case-format.pipe';
import { RemoveHtmlTagsPipe } from './pipes/remove-html-tags.pipe';
// //
// //
@ -24,6 +25,7 @@ import { AppTitleCaseFormatPipe } from '@common/formatting/pipes/app-title-case-
AppTitleCaseFormatPipe, AppTitleCaseFormatPipe,
NgForLimitPipe, NgForLimitPipe,
SumarizeTextPipe, SumarizeTextPipe,
RemoveHtmlTagsPipe,
TimezoneInfoDisplayPipe, TimezoneInfoDisplayPipe,
DateFormatPipe, DateFormatPipe,
DateTimeFormatPipe, DateTimeFormatPipe,
@ -36,6 +38,7 @@ import { AppTitleCaseFormatPipe } from '@common/formatting/pipes/app-title-case-
AppTitleCaseFormatPipe, AppTitleCaseFormatPipe,
NgForLimitPipe, NgForLimitPipe,
SumarizeTextPipe, SumarizeTextPipe,
RemoveHtmlTagsPipe,
TimezoneInfoDisplayPipe, TimezoneInfoDisplayPipe,
DateFormatPipe, DateFormatPipe,
DateTimeFormatPipe, DateTimeFormatPipe,
@ -51,6 +54,7 @@ import { AppTitleCaseFormatPipe } from '@common/formatting/pipes/app-title-case-
AppTitleCaseFormatPipe, AppTitleCaseFormatPipe,
NgForLimitPipe, NgForLimitPipe,
SumarizeTextPipe, SumarizeTextPipe,
RemoveHtmlTagsPipe,
TimezoneInfoDisplayPipe, TimezoneInfoDisplayPipe,
DateFormatPipe, DateFormatPipe,
DateTimeFormatPipe, DateTimeFormatPipe,

11
dmp-frontend/src/app/core/pipes/remove-html-tags.pipe.ts Normal file
View File

@ -0,0 +1,11 @@
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({ name: 'removeHtmlTags' })
export class RemoveHtmlTagsPipe implements PipeTransform {
transform(value: string) {
const transformedText = value.replace(/(<([^>]+)>)/ig, '');
return transformedText;
}
}

10
dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.html
View File

@ -34,11 +34,11 @@
item: item item: item
}"></ng-template> }"></ng-template>
<div *ngIf="!_optionTemplate(item)" class="row mt-2 mb-2"> <div *ngIf="!_optionTemplate(item)" class="row mt-2 mb-2">
<div class="col"> <div class="col option-text-container">
<div class="title-subtitle-fn"> <div class="title-subtitle-fn">
<div class="title-fn"> <div class="title-fn">
<div class="title-fn-inner"> <div class="title-fn-inner">
<span *ngIf="!_optionTemplate(item)" class="title-text">{{_titleFn(item)}}</span> <span *ngIf="!_optionTemplate(item)" class="title-text truncate-option-text">{{_titleFn(item)}}</span>
</div> </div>
</div> </div>
<div *ngIf="_subtitleFn(item)" class="subtitle-fn"> <div *ngIf="_subtitleFn(item)" class="subtitle-fn">
@ -67,10 +67,10 @@
item: item item: item
}"></ng-template> }"></ng-template>
<div *ngIf="!_optionTemplate(item) && !_optionComponent(item)" class="row mt-2 mb-2"> <div *ngIf="!_optionTemplate(item) && !_optionComponent(item)" class="row mt-2 mb-2">
<div class="col"> <div class="col option-text-container">
<span class="title-text">{{_titleFn(item)}}</span> <span class="title-text truncate-option-text">{{_titleFn(item)}}</span>
<br *ngIf="_subtitleFn(item)"> <br *ngIf="_subtitleFn(item)">
<small *ngIf="_subtitleFn(item)" class="subtitle-text">{{_subtitleFn(item)}}</small> <small *ngIf="_subtitleFn(item)" class="subtitle-text truncate-option-text">{{_subtitleFn(item) | removeHtmlTags}}</small>
</div> </div>
<div class="col-auto align-self-center"> <div class="col-auto align-self-center">
<span *ngIf="popupItemActionIcon" class="option-icon" (click)="_optionActionClick(item, $event)"><mat-icon>{{popupItemActionIcon}}</mat-icon></span> <span *ngIf="popupItemActionIcon" class="option-icon" (click)="_optionActionClick(item, $event)"><mat-icon>{{popupItemActionIcon}}</mat-icon></span>

12
dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.scss
View File

@ -134,6 +134,10 @@
} }
} }
.option-text-container {
min-width: 0;
}
.title-text { .title-text {
font-weight: 300; font-weight: 300;
line-height: 1.2em; line-height: 1.2em;
@ -146,3 +150,11 @@
font-size: 14px; font-size: 14px;
line-height: 1.2em; line-height: 1.2em;
} }
.truncate-option-text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
display: inline-block;
}

14
dmp-frontend/src/app/library/auto-complete/single/single-auto-complete.component.html
View File

@ -13,10 +13,10 @@
item: item item: item
}"></ng-template> }"></ng-template>
<div *ngIf="!_optionTemplate(item)" class="row mt-2 mb-2"> <div *ngIf="!_optionTemplate(item)" class="row mt-2 mb-2">
<div class="col"> <div class="col option-text-container">
<span class="title-text">{{_titleFn(item)}}</span> <span class="title-text truncate-option-text">{{_titleFn(item)}}</span>
<br *ngIf="_subtitleFn(item)"> <br *ngIf="_subtitleFn(item)">
<small *ngIf="_subtitleFn(item)" class="subtitle-text">{{_subtitleFn(item)}}</small> <small *ngIf="_subtitleFn(item)" class="subtitle-text truncate-option-text">{{_subtitleFn(item) | removeHtmlTags}}</small>
</div> </div>
<div class="col-auto"> <div class="col-auto">
<span *ngIf="popupItemActionIcon" class="option-icon" (click)="_optionActionClick(item, $event)"><mat-icon>{{popupItemActionIcon}}</mat-icon></span> <span *ngIf="popupItemActionIcon" class="option-icon" (click)="_optionActionClick(item, $event)"><mat-icon>{{popupItemActionIcon}}</mat-icon></span>
@ -34,12 +34,12 @@
item: item item: item
}"></ng-template> }"></ng-template>
<div *ngIf="!_optionTemplate(item)" class="row mt-2 mb-2"> <div *ngIf="!_optionTemplate(item)" class="row mt-2 mb-2">
<div class="col"> <div class="col option-text-container">
<span *ngIf="!_optionTemplate(item)" class="title-text">{{_titleFn(item)}}</span> <span *ngIf="!_optionTemplate(item)" class="title-text truncate-option-text">{{_titleFn(item)}}</span>
<br *ngIf="_subtitleFn(item)"> <br *ngIf="_subtitleFn(item)">
<small *ngIf="_subtitleFn(item)" class="subtitle-text">{{_subtitleFn(item)}}</small> <small *ngIf="_subtitleFn(item)" class="subtitle-text truncate-option-text">{{_subtitleFn(item) | removeHtmlTags}}</small>
</div> </div>
<div class="col-auto align-self-center"> <div class="col-auto align-self-center">
<span *ngIf="popupItemActionIcon" class="option-icon" (click)="_optionActionClick(item, $event)"><mat-icon>{{popupItemActionIcon}}</mat-icon></span> <span *ngIf="popupItemActionIcon" class="option-icon" (click)="_optionActionClick(item, $event)"><mat-icon>{{popupItemActionIcon}}</mat-icon></span>
</div> </div>
</div> </div>

12
dmp-frontend/src/app/library/auto-complete/single/single-auto-complete.component.scss
View File

@ -75,6 +75,18 @@
// cursor: pointer; // cursor: pointer;
// } // }
.option-text-container {
min-width: 0;
}
.truncate-option-text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
display: inline-block;
}
.title-text { .title-text {
font-weight: 300; font-weight: 300;
line-height: 1.2em; line-height: 1.2em;

4
dmp-frontend/src/app/ui/admin/dmp-blueprint/editor/dmp-blueprint-editor.component.html
View File

@ -254,7 +254,7 @@
<div class="col"> <div class="col">
<div class="row"> <div class="row">
<div class="col-12 col-lg-6 col-xl"> <div class="col-12 col-lg-6 col-xl-4">
<mat-form-field class="w-100 mt-3"> <mat-form-field class="w-100 mt-3">
<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.DESCRIPTION-TEMPLATE' | translate}}</mat-label> <mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.DESCRIPTION-TEMPLATE' | translate}}</mat-label>
<app-single-auto-complete [formControl]="descriptionTemplate.get('descriptionTemplateGroupId')" [configuration]="descriptionTempalteGroupSingleAutocompleteConfiguration" (optionActionClicked)="onPreviewDescriptionTemplate($event, sectionIndex, descriptionTemplateIndex)"></app-single-auto-complete> <app-single-auto-complete [formControl]="descriptionTemplate.get('descriptionTemplateGroupId')" [configuration]="descriptionTempalteGroupSingleAutocompleteConfiguration" (optionActionClicked)="onPreviewDescriptionTemplate($event, sectionIndex, descriptionTemplateIndex)"></app-single-auto-complete>
@ -262,7 +262,7 @@
<mat-error *ngIf="descriptionTemplate.get('descriptionTemplateGroupId').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> <mat-error *ngIf="descriptionTemplate.get('descriptionTemplateGroupId').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
<div class="col-12 col-lg-6 col-xl-2"> <div class="col-12 col-lg-6 col-xl-4">
<mat-form-field class="w-100 mt-3"> <mat-form-field class="w-100 mt-3">
<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.DESCRIPTION-TEMPLATE-LABEL' | translate}}</mat-label> <mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.DESCRIPTION-TEMPLATE-LABEL' | translate}}</mat-label>
<input matInput type="text" name="label" [formControl]="descriptionTemplate.get('label')"> <input matInput type="text" name="label" [formControl]="descriptionTemplate.get('label')">