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

add label-input connection to base descriptiont template editor fields + user editor, add pointer to user editor drag handle, rename appFormFocus to appFor

This commit is contained in:
mchouliara 2024-09-30 11:48:44 +03:00
parent 3d124f4d44
commit b6368cdd9b
8 changed files with 35 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/app/ui/admin/description-template/editor/components/section/description-template-editor-section.component.html
View File

@ -9,7 +9,7 @@
<mat-error *ngIf="form.get('title').hasError('backendError')">{{form.get('title').getError('backendError').message}}</mat-error>
<mat-error *ngIf="form.get('title').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
<label class="heading col-12" [appFormFocus]="'sectionDescription'">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.SECTION-INFO.SECTION-DESCRIPTION' | translate}} </label>
<label class="heading col-12" [appFor]="'sectionDescription'">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.SECTION-INFO.SECTION-DESCRIPTION' | translate}} </label>
<div class="hint col-12">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.SECTION-INFO.SECTION-DESCRIPTION-HINT' | translate}}</div>
<div class="col-12">
<rich-text-editor-component [form]="form.get('description')"

4
frontend/src/app/ui/admin/description-template/editor/description-template-editor.component.html
View File

@ -58,7 +58,7 @@
</mat-form-field>
</div>
<div class="col-12">
<label class="heading" [appFormFocus]="'descriptionInput'">1.3 {{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-DESCRIPTION'| translate}}
<label class="heading" [appFor]="'descriptionInput'">1.3 {{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-DESCRIPTION'| translate}}
&nbsp;*<small class="required-text">{{'GENERAL.VALIDATION.REQUIRED' | translate }}</small>
</label>
<div class="hint">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-DESCRIPTION-HINT'| translate}}</div>
@ -86,7 +86,7 @@
</mat-form-field>
</div>
<div class="col-12">
<label class="heading" [appFormFocus]="'languageInput'">1.5 {{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-LANGUAGE'| translate}}
<label class="heading" [appFor]="'languageInput'">1.5 {{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-LANGUAGE'| translate}}
&nbsp;*<small class="required-text">{{'GENERAL.VALIDATION.REQUIRED' | translate }}</small>
</label>
<div class="hint">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-LANGUAGE-HINT'| translate}}</div>

2
frontend/src/app/ui/description/editor/description-form/components/form-field-set/field-set-title/field-set-title.component.html
View File

@ -1,7 +1,7 @@
<div *ngIf="!hideTitle" class="row">
<div class="col-12">
<div class="row title">
<label [appFormFocus]="path" *ngIf="fieldSet.title && !isChild" class="col-auto field-set toc-field-set-header" [id]="fieldSet.id" [ngClass]="{'focused': isAnchor}">
<label [appFor]="path" *ngIf="fieldSet.title && !isChild" class="col-auto field-set toc-field-set-header" [id]="fieldSet.id" [ngClass]="{'focused': isAnchor}">
{{path}}
{{fieldSet.title}}
</label>

8
frontend/src/app/ui/plan/plan-editor-blueprint/plan-editor.component.html
View File

@ -92,7 +92,7 @@
</div>
</div>
<div class="row">
<label [appFormFocus]="'descriptionInput'" class="heading2 col-12">{{'PLAN-EDITOR.FIELDS.DESCRIPTION' | translate}}</label>
<label [appFor]="'descriptionInput'" class="heading2 col-12">{{'PLAN-EDITOR.FIELDS.DESCRIPTION' | translate}}</label>
<div class="col-12">
<rich-text-editor-component id="descriptionInput" [form]="formGroup.get('description')" placeholder="{{'PLAN-EDITOR.PLACEHOLDER.DESCRIPTION' | translate}}" [required]="false">
</rich-text-editor-component>
@ -207,13 +207,13 @@
<div *ngFor="let field of section.fields; let j=index">
<div class="heading-wrapper row align-items-start" [id]="field.id">
<div class="col-auto">
<label [appFormFocus]="(i + 1)+'.'+(j + 1)" class="heading" *ngIf="!field.label && field.category === planBlueprintSectionFieldCategoryEnum.System">{{i + 1}}.{{j + 1}} {{enumUtils.toPlanBlueprintSystemFieldTypeString(field.systemFieldType)}}
<label [appFor]="(i + 1)+'.'+(j + 1)" class="heading" *ngIf="!field.label && field.category === planBlueprintSectionFieldCategoryEnum.System">{{i + 1}}.{{j + 1}} {{enumUtils.toPlanBlueprintSystemFieldTypeString(field.systemFieldType)}}
<span *ngIf="field.required">&nbsp;*<small class="required-text">{{'GENERAL.VALIDATION.REQUIRED' | translate }}</small></span>
</label>
<label [appFormFocus]="(i + 1)+'.'+(j + 1)" class="heading" *ngIf="!field.label && field.category === planBlueprintSectionFieldCategoryEnum.ReferenceType">{{i + 1}}.{{j + 1}} {{field.referenceType.name}}
<label [appFor]="(i + 1)+'.'+(j + 1)" class="heading" *ngIf="!field.label && field.category === planBlueprintSectionFieldCategoryEnum.ReferenceType">{{i + 1}}.{{j + 1}} {{field.referenceType.name}}
<span *ngIf="field.required">&nbsp;*<small class="required-text">{{'GENERAL.VALIDATION.REQUIRED' | translate }}</small></span>
</label>
<label [appFormFocus]="(i + 1)+'.'+(j + 1)" class="heading" *ngIf="field.label">{{i + 1}}.{{j + 1}} {{field.label}}
<label [appFor]="(i + 1)+'.'+(j + 1)" class="heading" *ngIf="field.label">{{i + 1}}.{{j + 1}} {{field.label}}
<span *ngIf="field.required">&nbsp;*<small class="required-text">{{'GENERAL.VALIDATION.REQUIRED' | translate }}</small></span>
</label>
</div>

35
frontend/src/app/ui/user-profile/user-profile.component.html
View File

@ -40,17 +40,16 @@
<div class="row mb-5">
<div class="col">
<div class="row">
<div class="col-auto mb-1 field-title">{{'USER-PROFILE.SETTINGS.NAME' | translate}}
<label class="col-auto mb-1 field-title" for="nameInput">{{'USER-PROFILE.SETTINGS.NAME' | translate}}
&nbsp;*<small class="required-text">{{'GENERAL.VALIDATION.REQUIRED' | translate }}</small>
</div>
</label>
</div>
<div class="row">
<div class="col name-form">
<mat-form-field>
<input matInput type="text" name="name" placeholder="{{'USER-PROFILE.SETTINGS.NAME' | translate}}" [formControl]="formGroup.get('name')">
<input id="nameInput" matInput type="text" name="name" placeholder="{{'USER-PROFILE.SETTINGS.NAME' | translate}}" [formControl]="formGroup.get('name')" required>
<mat-error *ngIf="formGroup.get('name').hasError('backendError')">{{formGroup.get('name').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('name').hasError('required')">{{'COMMONS.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
</div>
@ -95,12 +94,12 @@
<div class="row mb-5">
<div class="col-12 col-lg-6">
<div class="row">
<div class="col-auto mb-1 field-title">{{'USER-PROFILE.SETTINGS.ORGANIZATION' | translate}}</div>
<label for="organizationInput" class="col-auto mb-1 field-title">{{'USER-PROFILE.SETTINGS.ORGANIZATION' | translate}}</label>
</div>
<div class="row">
<div class="col organization-form">
<mat-form-field class="w-100">
<app-single-auto-complete placeholder="{{'PLAN-EDITOR.PLACEHOLDER.ORGANIZATION' | translate}}" [formControl]="this.formGroup.get('additionalInfo').get('organization')" [configuration]="organisationsSingleAutoCompleteConfiguration"></app-single-auto-complete>
<app-single-auto-complete [id]="'organizationInput'" placeholder="{{'PLAN-EDITOR.PLACEHOLDER.ORGANIZATION' | translate}}" [formControl]="this.formGroup.get('additionalInfo').get('organization')" [configuration]="organisationsSingleAutoCompleteConfiguration"></app-single-auto-complete>
</mat-form-field>
</div>
</div>
@ -108,12 +107,12 @@
<!-- Role -->
<div class="col-12 col-lg-6">
<div class="row">
<div class="col-auto mb-1 field-title">{{'USER-PROFILE.SETTINGS.ROLE' | translate}}</div>
<label [appFor]="'roleInput'" class="col-auto mb-1 field-title">{{'USER-PROFILE.SETTINGS.ROLE' | translate}}</label>
</div>
<div class="row">
<div class="col role-form">
<mat-form-field class="w-100">
<mat-select placeholder="{{'USER-PROFILE.SETTINGS.SELECT-ROLE' | translate}}" [formControl]="this.formGroup.get('additionalInfo').get('roleOrganization')">
<mat-select id="roleInput" placeholder="{{'USER-PROFILE.SETTINGS.SELECT-ROLE' | translate}}" [formControl]="this.formGroup.get('additionalInfo').get('roleOrganization')">
<mat-option [value]="roleOrganizationEnum.Faculty">{{enumUtils.toRoleOrganizationString(roleOrganizationEnum.Faculty)}}</mat-option>
<mat-option [value]="roleOrganizationEnum.Librarian">{{enumUtils.toRoleOrganizationString(roleOrganizationEnum.Librarian)}}</mat-option>
<mat-option [value]="roleOrganizationEnum.Researcher">{{enumUtils.toRoleOrganizationString(roleOrganizationEnum.Researcher)}}</mat-option>
@ -138,16 +137,16 @@
<div class="row mb-5">
<div class="col-12 col-lg-4">
<div class="row">
<div class="col-auto mb-1 field-title">{{'USER-PROFILE.SETTINGS.TIMEZONE' | translate}}
<label for="timeZoneInput" class="col-auto mb-1 field-title">{{'USER-PROFILE.SETTINGS.TIMEZONE' | translate}}
&nbsp;*<small class="required-text">{{'GENERAL.VALIDATION.REQUIRED' | translate }}</small>
</div>
</label>
</div>
<div class="row">
<div class="col timezone-form">
<mat-form-field class="w-100">
<input matInput autocomplete="off" placeholder="{{'USER-PROFILE.SETTINGS.TIMEZONE' | translate}}" [matAutocomplete]="timezoneAuto" type="text" name="timezone" [formControl]="formGroup.get('additionalInfo').get('timezone')">
<input id="timeZoneInput" matInput autocomplete="off" placeholder="{{'USER-PROFILE.SETTINGS.TIMEZONE' | translate}}" [matAutocomplete]="timezoneAuto" type="text" name="timezone" [formControl]="formGroup.get('additionalInfo').get('timezone')" required>
<mat-error *ngIf="formGroup.get('additionalInfo').get('timezone').hasError('backendError')">{{formGroup.get('additionalInfo').get('timezone').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('additionalInfo').get('timezone').hasError('backendError')">{{formGroup.get('additionalInfo').get('timezone').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('additionalInfo').get('timezone').hasError('required')">{{'COMMONS.VALIDATION.REQUIRED' | translate}}</mat-error>
<mat-autocomplete autoActiveFirstOption #timezoneAuto="matAutocomplete">
<mat-option *ngFor="let timezone of filteredTimezones" [value]="timezone">{{timezone | timezoneInfoDisplay}}</mat-option>
</mat-autocomplete>
@ -158,14 +157,14 @@
<!-- Culture -->
<div class="col-12 col-lg-4">
<div class="row">
<div class="col-auto mb-1 field-title">{{'USER-PROFILE.SETTINGS.CULTURE' | translate}}
<label for="cultureInput" class="col-auto mb-1 field-title">{{'USER-PROFILE.SETTINGS.CULTURE' | translate}}
&nbsp;*<small class="required-text">{{'GENERAL.VALIDATION.REQUIRED' | translate }}</small>
</div>
</label>
</div>
<div class="row">
<div class="col culture-form">
<mat-form-field class="w-100">
<input matInput autocomplete="off" placeholder="{{'USER-PROFILE.SETTINGS.CULTURE' | translate}}" [matAutocomplete]="cultureAuto" type="text" name="culture" [formControl]="formGroup.get('additionalInfo').get('culture')">
<input id="cultureInput" matInput autocomplete="off" placeholder="{{'USER-PROFILE.SETTINGS.CULTURE' | translate}}" [matAutocomplete]="cultureAuto" type="text" name="culture" [formControl]="formGroup.get('additionalInfo').get('culture')" required>
<mat-error *ngIf="formGroup.get('additionalInfo').get('culture').hasError('backendError')">{{formGroup.get('additionalInfo').get('culture').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('additionalInfo').get('culture').hasError('required')">{{'COMMONS.VALIDATION.REQUIRED' | translate}}</mat-error>
<mat-autocomplete autoActiveFirstOption #cultureAuto="matAutocomplete" [displayWith]="displayCultureFn.bind(this)">
@ -178,15 +177,15 @@
<!-- Language -->
<div class="col-12 col-lg-4">
<div class="row">
<div class="col-auto mb-1 field-title">{{'USER-PROFILE.SETTINGS.LANGUAGE' | translate}}
<label [appFor]="'languageInput'" class="col-auto mb-1 field-title">{{'USER-PROFILE.SETTINGS.LANGUAGE' | translate}}
&nbsp;*<small class="required-text">{{'GENERAL.VALIDATION.REQUIRED' | translate }}</small>
</div>
</label>
</div>
<div class="row">
<div class="col language-form">
<mat-form-field class="w-100">
<mat-select [formControl]="this.formGroup.get('additionalInfo').get('language')" name="language">
<mat-select id="languageInput" [formControl]="this.formGroup.get('additionalInfo').get('language')" name="language">
<mat-option *ngFor="let language of languages" [value]="language">
{{ "GENERAL.LANGUAGES."+ language | translate }}
</mat-option>

4
frontend/src/app/ui/user-profile/user-profile.module.ts
View File

@ -8,6 +8,7 @@ import { AddAccountDialogModule } from './add-account/add-account-dialog.module'
import { UserProfileComponent } from './user-profile.component';
import { UserProfileRoutingModule } from './user-profile.routing';
import { UserProfileNotifierListModule } from '@notification-service/ui/user-profile/notifier-list/user-profile-notifier-list-editor.module';
import { FormFocusDirective } from '@common/forms/form-focus.directive';
@NgModule({
imports: [
@ -18,7 +19,8 @@ import { UserProfileNotifierListModule } from '@notification-service/ui/user-pro
AutoCompleteModule,
AddAccountDialogModule,
FormValidationErrorsDialogModule,
UserProfileNotifierListModule
UserProfileNotifierListModule,
FormFocusDirective
],
declarations: [
UserProfileComponent

12
frontend/src/common/forms/form-focus.directive.ts
View File

@ -1,17 +1,17 @@
import { Directive, HostListener, Input } from '@angular/core';
@Directive({
selector: '[appFormFocus]',
selector: '[appFor]',
standalone: true
})
export class FormFocusDirective { //todo it doesn't work on rich-text-editor inputs
@Input() appFormFocus: string;
@Input() appFor: string;
constructor() { }
@HostListener('click') onLabelClick(){
if(this.appFormFocus) {
document.getElementById(this.appFormFocus)?.focus();
(document.getElementById(this.appFormFocus)?.querySelector(".angular-editor-textarea") as HTMLElement)?.focus(); //for rich-text-editor
document.getElementById(`${this.appFormFocus}-input`)?.focus(); //for any mat component that nests the <input>
if(this.appFor) {
document.getElementById(this.appFor)?.focus();
(document.getElementById(this.appFor)?.querySelector(".angular-editor-textarea") as HTMLElement)?.focus(); //for rich-text-editor
document.getElementById(`${this.appFor}-input`)?.focus(); //for any mat component that nests the <input>
}
}
}

2
frontend/src/notification-service/ui/user-profile/notifier-list/user-profile-notifier-list-editor.component.html
View File

@ -6,7 +6,7 @@
<h3 mat-subheader>{{notificationServiceEnumUtils.toNotificationTypeString(notificationType)}}</h3>
<mat-list-item *ngFor="let contactType of availableNotifiers[notificationType]" cdkDrag>
<div class="d-flex align-items-center">
<mat-icon matListIcon cdkDragHandle>unfold_more</mat-icon>
<mat-icon matListIcon cdkDragHandle class="pointer">unfold_more</mat-icon>
{{notificationServiceEnumUtils.toContactTypeString(contactType)}}
</div>
</mat-list-item>