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

add id input to select components, focus function to text editor

This commit is contained in:
mchouliara 2024-09-17 16:07:21 +03:00
parent d73965cb0a
commit 39a9afe1d5
6 changed files with 17 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -19,7 +19,7 @@
</mat-chip-grid> </mat-chip-grid>
</div> </div>
<div class="col-12"> <div class="col-12">
<input matInput #autocompleteInput [name]="id" autocomplete="nope" #autocompleteTrigger="matAutocompleteTrigger" autocomplete="off" [placeholder]="placeholder" [matAutocomplete]="autocomplete" [value]="inputValue" (keyup)="onKeyUp($event)" [disabled]="disabled" (focus)="_onInputFocus()" (blur)="onBlur($event)" [matChipInputFor]="chipList" [matChipInputSeparatorKeyCodes]="separatorKeysCodes" [matChipInputAddOnBlur]="autoSelectFirstOptionOnBlur" (matChipInputTokenEnd)="_addItem($event)"> <input matInput #autocompleteInput [id]="id" [name]="id" autocomplete="nope" #autocompleteTrigger="matAutocompleteTrigger" autocomplete="off" [placeholder]="placeholder" [matAutocomplete]="autocomplete" [value]="inputValue" (keyup)="onKeyUp($event)" [disabled]="disabled" (focus)="_onInputFocus()" (blur)="onBlur($event)" [matChipInputFor]="chipList" [matChipInputSeparatorKeyCodes]="separatorKeysCodes" [matChipInputAddOnBlur]="autoSelectFirstOptionOnBlur" (matChipInputTokenEnd)="_addItem($event)">
</div> </div>
<mat-autocomplete #autocomplete="matAutocomplete" [displayWith]="_displayFn.bind(this)" (optionSelected)="_optionSelected($event)" [classList]="['myClass']"> <mat-autocomplete #autocomplete="matAutocomplete" [displayWith]="_displayFn.bind(this)" (optionSelected)="_optionSelected($event)" [classList]="['myClass']">
<div (mouseover)="isMouseOverPanel=true" (mouseout)="isMouseOverPanel=false"> <div (mouseover)="isMouseOverPanel=true" (mouseout)="isMouseOverPanel=false">

2
frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.ts
View File

@ -54,6 +54,7 @@ export class MultipleAutoCompleteComponent extends _CustomComponentMixinBase imp
@Input() @Input()
separatorKeysCodes = []; separatorKeysCodes = [];
@Input({required: false}) id: string = `multiple-autocomplete-${MultipleAutoCompleteComponent.nextId++}`;
// Selected Option Event // Selected Option Event
@Output() optionSelected: EventEmitter<any> = new EventEmitter(); @Output() optionSelected: EventEmitter<any> = new EventEmitter();
@ -62,7 +63,6 @@ export class MultipleAutoCompleteComponent extends _CustomComponentMixinBase imp
@Output() optionActionClicked: EventEmitter<any> = new EventEmitter(); @Output() optionActionClicked: EventEmitter<any> = new EventEmitter();
id = `multiple-autocomplete-${MultipleAutoCompleteComponent.nextId++}`;
stateChanges = new Subject<void>(); stateChanges = new Subject<void>();
valueOnBlur = new BehaviorSubject<any>(null); valueOnBlur = new BehaviorSubject<any>(null);

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

@ -1,5 +1,5 @@
<div class="row auto-complete"> <div class="row auto-complete">
<input matInput #autocompleteInput class="col-12" [name]="id" autocomplete="off" #autocompleteTrigger="matAutocompleteTrigger" [placeholder]="placeholder" [matAutocomplete]="autocomplete" [value]="inputValue" (keyup)="onKeyUp($event)" [disabled]="disabled" (focus)="_onInputFocus()" (blur)="onBlur($event)"> <input matInput #autocompleteInput class="col-12" [id]="id" [name]="id" autocomplete="off" #autocompleteTrigger="matAutocompleteTrigger" [placeholder]="placeholder" [matAutocomplete]="autocomplete" [value]="inputValue" (keyup)="onKeyUp($event)" [disabled]="disabled" (focus)="_onInputFocus()" (blur)="onBlur($event)">
<!-- The attribute autocomplete="nope", set by downshift, is ignored in Chrome 67 and Opera 54 (latest at the time of writing) <!-- The attribute autocomplete="nope", set by downshift, is ignored in Chrome 67 and Opera 54 (latest at the time of writing)
<input matInput #autocompleteInput class="col-12" [name]="id" autocomplete="nope" #autocompleteTrigger="matAutocompleteTrigger" [placeholder]="placeholder" [matAutocomplete]="autocomplete" [value]="inputValue" (keyup)="onKeyUp($event)" [disabled]="disabled" (focus)="_onInputFocus()" (blur)="onBlur($event)"> --> <input matInput #autocompleteInput class="col-12" [name]="id" autocomplete="nope" #autocompleteTrigger="matAutocompleteTrigger" [placeholder]="placeholder" [matAutocomplete]="autocomplete" [value]="inputValue" (keyup)="onKeyUp($event)" [disabled]="disabled" (focus)="_onInputFocus()" (blur)="onBlur($event)"> -->
<mat-icon *ngIf="!disabled" class="align-arrow-right" matSuffix>arrow_drop_down</mat-icon> <mat-icon *ngIf="!disabled" class="align-arrow-right" matSuffix>arrow_drop_down</mat-icon>

3
frontend/src/app/library/auto-complete/single/single-auto-complete.component.ts
View File

@ -40,6 +40,8 @@ export class SingleAutoCompleteComponent extends _CustomComponentMixinBase imple
@ViewChild('autocompleteInput', { static: true }) autocompleteInput: ElementRef; @ViewChild('autocompleteInput', { static: true }) autocompleteInput: ElementRef;
@Input() initialSelectedData: any; @Input() initialSelectedData: any;
@Input({required: false}) id: string = `single-autocomplete-${SingleAutoCompleteComponent.nextId++}`;
@Input() @Input()
get configuration(): SingleAutoCompleteConfiguration { return this._configuration; } get configuration(): SingleAutoCompleteConfiguration { return this._configuration; }
set configuration(configuration: SingleAutoCompleteConfiguration) { set configuration(configuration: SingleAutoCompleteConfiguration) {
@ -55,7 +57,6 @@ export class SingleAutoCompleteComponent extends _CustomComponentMixinBase imple
@Output() optionSelected: EventEmitter<any> = new EventEmitter(); @Output() optionSelected: EventEmitter<any> = new EventEmitter();
@Output() optionActionClicked: EventEmitter<any> = new EventEmitter(); @Output() optionActionClicked: EventEmitter<any> = new EventEmitter();
id = `single-autocomplete-${SingleAutoCompleteComponent.nextId++}`;
stateChanges = new Subject<void>(); stateChanges = new Subject<void>();
focused = false; focused = false;
controlType = 'single-autocomplete'; controlType = 'single-autocomplete';

10
frontend/src/app/library/rich-text-editor/rich-text-editor.component.ts
View File

@ -1,6 +1,6 @@
import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from "@angular/core"; import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, ViewChild } from "@angular/core";
import { FormControl } from "@angular/forms"; import { FormControl } from "@angular/forms";
import { AngularEditorConfig } from "@kolkov/angular-editor"; import { AngularEditorComponent, AngularEditorConfig } from "@kolkov/angular-editor";
import { Subscription } from "rxjs"; import { Subscription } from "rxjs";
@Component({ @Component({
@ -20,6 +20,8 @@ import { Subscription } from "rxjs";
}) })
export class RichTextEditorComponent implements OnInit, OnChanges, OnDestroy { export class RichTextEditorComponent implements OnInit, OnChanges, OnDestroy {
@ViewChild(AngularEditorComponent) editor: AngularEditorComponent
@Input() form: FormControl; @Input() form: FormControl;
@Input() id: string = "editor1"; @Input() id: string = "editor1";
@Input() placeholder: string = "Enter text"; @Input() placeholder: string = "Enter text";
@ -104,6 +106,10 @@ export class RichTextEditorComponent implements OnInit, OnChanges, OnDestroy {
window.document.execCommand("insertText", false, text); window.document.execCommand("insertText", false, text);
} }
focus(){
this.editor?.focus();
}
private observeFormStatus(): void { private observeFormStatus(): void {
this.formTouchSubscription = this.formTouchEvent this.formTouchSubscription = this.formTouchEvent
.subscribe( .subscribe(

6
frontend/src/app/ui/navbar/navbar.component.html
View File

@ -6,7 +6,9 @@
<div class="icon-bar2"></div> <div class="icon-bar2"></div>
<div class="icon-bar3"></div> <div class="icon-bar3"></div>
</button> </button>
<a class="logo mr-auto" [routerLink]="routerUtils.generateUrl(['home'])"><img class="logo-image" alt="website logo" [src]="'../../../assets/images/nav-logo' + configurationService.navLogoExtension"></a> <a class="logo mr-auto" [routerLink]="routerUtils.generateUrl(['home'])">
<img class="logo-image" alt="go to homepage" [src]="'../../../assets/images/nav-logo' + configurationService.navLogoExtension">
</a>
@if(extraImageURL){ @if(extraImageURL){
<a class="extra-logo" [routerLink]="routerUtils.generateUrl(['home'])" aria-label="home"> <a class="extra-logo" [routerLink]="routerUtils.generateUrl(['home'])" aria-label="home">
<img alt="logo image" class="extra-logo-image" [src]="extraImageURL"> <img alt="logo image" class="extra-logo-image" [src]="extraImageURL">
@ -57,7 +59,7 @@
<li class="pl-2"> <li class="pl-2">
@if(this.isAuthenticated()) { @if(this.isAuthenticated()) {
<button (click)="openProfile()" [matTooltip]="userName" style="border: none; background-color: transparent;" aria-label="user profile"> <button (click)="openProfile()" [matTooltip]="userName" style="border: none; background-color: transparent;" aria-label="user profile">
<img alt="round user avatar image" mat-card-avatar class="my-mat-card-avatar" [src]="getPrincipalAvatar() ?? getDefaultAvatar()" (error)="this.applyFallbackAvatar($event)"> <img alt="user avatar image" mat-card-avatar class="my-mat-card-avatar" [src]="getPrincipalAvatar() ?? getDefaultAvatar()" (error)="this.applyFallbackAvatar($event)">
</button> </button>
}@else { }@else {
<ng-container *ngTemplateOutlet="loginOptionTemplate"/> <ng-container *ngTemplateOutlet="loginOptionTemplate"/>