Igor Kulikov
3 years ago
20 changed files with 889 additions and 266 deletions
@ -0,0 +1,33 @@ |
|||
<!-- |
|||
|
|||
Copyright © 2016-2023 The Thingsboard Authors |
|||
|
|||
Licensed under the Apache License, Version 2.0 (the "License"); |
|||
you may not use this file except in compliance with the License. |
|||
You may obtain a copy of the License at |
|||
|
|||
http://www.apache.org/licenses/LICENSE-2.0 |
|||
|
|||
Unless required by applicable law or agreed to in writing, software |
|||
distributed under the License is distributed on an "AS IS" BASIS, |
|||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
|||
See the License for the specific language governing permissions and |
|||
limitations under the License. |
|||
|
|||
--> |
|||
<form class="tb-add-quick-link-dialog" [formGroup]="addQuickLinkFormGroup"> |
|||
<mat-toolbar style="background: transparent;"> |
|||
<h2 translate>widgets.quick-links.add-link-title</h2> |
|||
<span fxFlex></span> |
|||
<button mat-icon-button |
|||
(click)="cancel()" |
|||
type="button"> |
|||
<mat-icon class="material-icons">close</mat-icon> |
|||
</button> |
|||
</mat-toolbar> |
|||
<div mat-dialog-content> |
|||
<tb-quick-link formControlName="link" [addOnly]="true" |
|||
(quickLinkAdded)="add($event)"> |
|||
</tb-quick-link> |
|||
</div> |
|||
</form> |
|||
@ -0,0 +1,29 @@ |
|||
/** |
|||
* Copyright © 2016-2023 The Thingsboard Authors |
|||
* |
|||
* Licensed under the Apache License, Version 2.0 (the "License"); |
|||
* you may not use this file except in compliance with the License. |
|||
* You may obtain a copy of the License at |
|||
* |
|||
* http://www.apache.org/licenses/LICENSE-2.0 |
|||
* |
|||
* Unless required by applicable law or agreed to in writing, software |
|||
* distributed under the License is distributed on an "AS IS" BASIS, |
|||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
|||
* See the License for the specific language governing permissions and |
|||
* limitations under the License. |
|||
*/ |
|||
:host { |
|||
.tb-add-quick-link-dialog { |
|||
width: 480px; |
|||
.mat-toolbar-single-row { |
|||
padding: 0 24px; |
|||
} |
|||
h2 { |
|||
color: rgba(0, 0, 0, 0.76); |
|||
} |
|||
.mat-icon { |
|||
color: rgba(0, 0, 0, 0.54); |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,57 @@ |
|||
///
|
|||
/// Copyright © 2016-2023 The Thingsboard Authors
|
|||
///
|
|||
/// Licensed under the Apache License, Version 2.0 (the "License");
|
|||
/// you may not use this file except in compliance with the License.
|
|||
/// You may obtain a copy of the License at
|
|||
///
|
|||
/// http://www.apache.org/licenses/LICENSE-2.0
|
|||
///
|
|||
/// Unless required by applicable law or agreed to in writing, software
|
|||
/// distributed under the License is distributed on an "AS IS" BASIS,
|
|||
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|||
/// See the License for the specific language governing permissions and
|
|||
/// limitations under the License.
|
|||
///
|
|||
|
|||
import { Component, OnInit, SkipSelf } from '@angular/core'; |
|||
import { ErrorStateMatcher } from '@angular/material/core'; |
|||
import { MatDialogRef } from '@angular/material/dialog'; |
|||
import { Store } from '@ngrx/store'; |
|||
import { AppState } from '@core/core.state'; |
|||
import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms'; |
|||
import { DialogComponent } from '@shared/components/dialog.component'; |
|||
import { Router } from '@angular/router'; |
|||
|
|||
@Component({ |
|||
selector: 'tb-add-quick-link-dialog', |
|||
templateUrl: './add-quick-link-dialog.component.html', |
|||
styleUrls: ['./add-quick-link-dialog.component.scss'] |
|||
}) |
|||
export class AddQuickLinkDialogComponent extends |
|||
DialogComponent<AddQuickLinkDialogComponent, string> implements OnInit { |
|||
|
|||
addQuickLinkFormGroup: UntypedFormGroup; |
|||
|
|||
constructor(protected store: Store<AppState>, |
|||
protected router: Router, |
|||
@SkipSelf() private errorStateMatcher: ErrorStateMatcher, |
|||
public dialogRef: MatDialogRef<AddQuickLinkDialogComponent, string>, |
|||
public fb: UntypedFormBuilder) { |
|||
super(store, router, dialogRef); |
|||
} |
|||
|
|||
ngOnInit(): void { |
|||
this.addQuickLinkFormGroup = this.fb.group({ |
|||
link: [null, [Validators.required]] |
|||
}); |
|||
} |
|||
|
|||
cancel(): void { |
|||
this.dialogRef.close(null); |
|||
} |
|||
|
|||
add(link: string): void { |
|||
this.dialogRef.close(link); |
|||
} |
|||
} |
|||
@ -1,63 +0,0 @@ |
|||
<!-- |
|||
|
|||
Copyright © 2016-2023 The Thingsboard Authors |
|||
|
|||
Licensed under the Apache License, Version 2.0 (the "License"); |
|||
you may not use this file except in compliance with the License. |
|||
You may obtain a copy of the License at |
|||
|
|||
http://www.apache.org/licenses/LICENSE-2.0 |
|||
|
|||
Unless required by applicable law or agreed to in writing, software |
|||
distributed under the License is distributed on an "AS IS" BASIS, |
|||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
|||
See the License for the specific language governing permissions and |
|||
limitations under the License. |
|||
|
|||
--> |
|||
<form class="tb-edit-doc-links-dialog" [formGroup]="editDocLinksFormGroup"> |
|||
<mat-toolbar style="background: transparent;"> |
|||
<h2 translate>widgets.documentation.title</h2> |
|||
<span fxFlex></span> |
|||
<button mat-icon-button |
|||
(click)="close()" |
|||
type="button"> |
|||
<mat-icon class="material-icons">close</mat-icon> |
|||
</button> |
|||
</mat-toolbar> |
|||
<div mat-dialog-content> |
|||
<div class="tb-drop-list" cdkDropList cdkDropListOrientation="vertical" |
|||
(cdkDropListDropped)="docLinkDrop($event)" [cdkDropListDisabled]="editMode || addMode"> |
|||
<div cdkDrag class="tb-draggable" *ngFor="let docLinkControl of docLinksFormArray().controls; trackBy: trackByDocLink; |
|||
let $index = index; last as isLast;" |
|||
fxLayout="row" fxLayoutAlign="start center" [ngStyle]="!isLast ? {paddingBottom: '8px'} : {}"> |
|||
<tb-doc-link fxFlex #docLinkComponent [formControl]="docLinkControl" |
|||
[disableEdit]="editMode || addMode" |
|||
(editModeChanged)="editMode = $event" |
|||
(docLinkUpdated)="update()" |
|||
(docLinkDeleted)="deleteLink($index)"> |
|||
</tb-doc-link> |
|||
<div *ngIf="!docLinkComponent.isEditing()" |
|||
cdkDragHandle |
|||
matTooltip="{{ 'action.drag' | translate }}" |
|||
matTooltipPosition="above" |
|||
class="tb-drag-handle"> |
|||
<mat-icon>drag_indicator</mat-icon> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div mat-dialog-actions> |
|||
<div *ngIf="!editMode && !addMode" fxFlex class="tb-add-doc-button" |
|||
matTooltip="{{ 'widgets.documentation.add-link' | translate }}" |
|||
matTooltipPosition="above" |
|||
(click)="addLink()"> |
|||
<mat-icon class="tb-add-icon">add</mat-icon> |
|||
</div> |
|||
<tb-doc-link *ngIf="addMode" fxFlex [(ngModel)]="addingDocLink" |
|||
[ngModelOptions]="{standalone: true}" |
|||
(docLinkAdded)="linkAdded($event)" |
|||
(docLinkAddCanceled)="addMode = false"> |
|||
</tb-doc-link> |
|||
</div> |
|||
</form> |
|||
@ -1,114 +0,0 @@ |
|||
///
|
|||
/// Copyright © 2016-2023 The Thingsboard Authors
|
|||
///
|
|||
/// Licensed under the Apache License, Version 2.0 (the "License");
|
|||
/// you may not use this file except in compliance with the License.
|
|||
/// You may obtain a copy of the License at
|
|||
///
|
|||
/// http://www.apache.org/licenses/LICENSE-2.0
|
|||
///
|
|||
/// Unless required by applicable law or agreed to in writing, software
|
|||
/// distributed under the License is distributed on an "AS IS" BASIS,
|
|||
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|||
/// See the License for the specific language governing permissions and
|
|||
/// limitations under the License.
|
|||
///
|
|||
|
|||
import { Component, Inject, OnInit } from '@angular/core'; |
|||
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; |
|||
import { Store } from '@ngrx/store'; |
|||
import { AppState } from '@core/core.state'; |
|||
import { AbstractControl, UntypedFormArray, UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms'; |
|||
import { DialogComponent } from '@shared/components/dialog.component'; |
|||
import { Router } from '@angular/router'; |
|||
import { DocumentationLink, DocumentationLinks } from '@shared/models/user-settings.models'; |
|||
import { CdkDragDrop } from '@angular/cdk/drag-drop'; |
|||
import { UserSettingsService } from '@core/http/user-settings.service'; |
|||
|
|||
export interface EditDocLinksDialogData { |
|||
docLinks: DocumentationLinks; |
|||
} |
|||
|
|||
@Component({ |
|||
selector: 'tb-edit-doc-links-dialog', |
|||
templateUrl: './edit-doc-links-dialog.component.html', |
|||
styleUrls: ['./edit-doc-links-dialog.component.scss'] |
|||
}) |
|||
export class EditDocLinksDialogComponent extends |
|||
DialogComponent<EditDocLinksDialogComponent, boolean> implements OnInit { |
|||
|
|||
updated = false; |
|||
addMode = false; |
|||
editMode = false; |
|||
|
|||
docLinks = this.data.docLinks; |
|||
addingDocLink: Partial<DocumentationLink>; |
|||
|
|||
editDocLinksFormGroup: UntypedFormGroup; |
|||
|
|||
constructor(protected store: Store<AppState>, |
|||
protected router: Router, |
|||
@Inject(MAT_DIALOG_DATA) public data: EditDocLinksDialogData, |
|||
public dialogRef: MatDialogRef<EditDocLinksDialogComponent, boolean>, |
|||
public fb: UntypedFormBuilder, |
|||
private userSettingsService: UserSettingsService) { |
|||
super(store, router, dialogRef); |
|||
} |
|||
|
|||
ngOnInit(): void { |
|||
const docLinksControls: Array<AbstractControl> = []; |
|||
for (const docLink of this.docLinks.links) { |
|||
docLinksControls.push(this.fb.control(docLink, [Validators.required])); |
|||
} |
|||
this.editDocLinksFormGroup = this.fb.group({ |
|||
links: this.fb.array(docLinksControls) |
|||
}); |
|||
} |
|||
|
|||
docLinksFormArray(): UntypedFormArray { |
|||
return this.editDocLinksFormGroup.get('links') as UntypedFormArray; |
|||
} |
|||
|
|||
trackByDocLink(index: number, docLinkControl: AbstractControl): any { |
|||
return docLinkControl; |
|||
} |
|||
|
|||
docLinkDrop(event: CdkDragDrop<string[]>) { |
|||
const docLinksArray = this.editDocLinksFormGroup.get('links') as UntypedFormArray; |
|||
const docLink = docLinksArray.at(event.previousIndex); |
|||
docLinksArray.removeAt(event.previousIndex); |
|||
docLinksArray.insert(event.currentIndex, docLink); |
|||
this.update(); |
|||
} |
|||
|
|||
addLink() { |
|||
this.addingDocLink = { icon: 'notifications' }; |
|||
this.addMode = true; |
|||
} |
|||
|
|||
linkAdded(docLink: DocumentationLink) { |
|||
this.addMode = false; |
|||
const docLinksArray = this.editDocLinksFormGroup.get('links') as UntypedFormArray; |
|||
const docLinkControl = this.fb.control(docLink, [Validators.required]); |
|||
docLinksArray.push(docLinkControl); |
|||
this.update(); |
|||
} |
|||
|
|||
deleteLink(index: number) { |
|||
(this.editDocLinksFormGroup.get('links') as UntypedFormArray).removeAt(index); |
|||
this.update(); |
|||
} |
|||
|
|||
update() { |
|||
if (this.editDocLinksFormGroup.valid) { |
|||
const docLinks: DocumentationLinks = this.editDocLinksFormGroup.value; |
|||
this.userSettingsService.updateDocumentationLinks(docLinks).subscribe(() => { |
|||
this.updated = true; |
|||
}); |
|||
} |
|||
} |
|||
|
|||
close(): void { |
|||
this.dialogRef.close(this.updated); |
|||
} |
|||
} |
|||
@ -0,0 +1,95 @@ |
|||
<!-- |
|||
|
|||
Copyright © 2016-2023 The Thingsboard Authors |
|||
|
|||
Licensed under the Apache License, Version 2.0 (the "License"); |
|||
you may not use this file except in compliance with the License. |
|||
You may obtain a copy of the License at |
|||
|
|||
http://www.apache.org/licenses/LICENSE-2.0 |
|||
|
|||
Unless required by applicable law or agreed to in writing, software |
|||
distributed under the License is distributed on an "AS IS" BASIS, |
|||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
|||
See the License for the specific language governing permissions and |
|||
limitations under the License. |
|||
|
|||
--> |
|||
<form class="tb-edit-links-dialog" [formGroup]="editLinksFormGroup"> |
|||
<mat-toolbar style="background: transparent;"> |
|||
<h2>{{ (mode === 'docs' ? 'widgets.documentation.title' : 'widgets.quick-links.title') | translate }}</h2> |
|||
<span fxFlex></span> |
|||
<button mat-icon-button |
|||
(click)="close()" |
|||
type="button"> |
|||
<mat-icon class="material-icons">close</mat-icon> |
|||
</button> |
|||
</mat-toolbar> |
|||
<div mat-dialog-content> |
|||
<div class="tb-drop-list" cdkDropList cdkDropListOrientation="vertical" |
|||
(cdkDropListDropped)="linkDrop($event)" [cdkDropListDisabled]="editMode || addMode"> |
|||
<div cdkDrag class="tb-draggable" *ngFor="let linkControl of linksFormArray().controls; trackBy: trackByLink; |
|||
let $index = index; last as isLast;" |
|||
fxLayout="row" fxLayoutAlign="start center" [ngStyle]="!isLast ? {paddingBottom: '8px'} : {}"> |
|||
<ng-container [ngSwitch]="mode"> |
|||
<ng-template [ngSwitchCase]="'docs'"> |
|||
<tb-doc-link fxFlex #docLink [formControl]="linkControl" |
|||
[disableEdit]="editMode || addMode" |
|||
(editModeChanged)="editMode = $event" |
|||
(docLinkUpdated)="update()" |
|||
(docLinkDeleted)="deleteLink($index)"> |
|||
</tb-doc-link> |
|||
<ng-container *ngIf="!docLink.isEditing()"> |
|||
<ng-container *ngTemplateOutlet="dragHandle"></ng-container> |
|||
</ng-container> |
|||
</ng-template> |
|||
<ng-template [ngSwitchCase]="'quickLinks'"> |
|||
<tb-quick-link fxFlex #quickLink [formControl]="linkControl" |
|||
[disableEdit]="editMode || addMode" |
|||
(editModeChanged)="editMode = $event" |
|||
(quickLinkUpdated)="update()" |
|||
(quickLinkDeleted)="deleteLink($index)"> |
|||
</tb-quick-link> |
|||
<ng-container *ngIf="!quickLink.isEditing()"> |
|||
<ng-container *ngTemplateOutlet="dragHandle"></ng-container> |
|||
</ng-container> |
|||
</ng-template> |
|||
</ng-container> |
|||
<ng-template #dragHandle> |
|||
<div cdkDragHandle |
|||
matTooltip="{{ 'action.drag' | translate }}" |
|||
matTooltipPosition="above" |
|||
class="tb-drag-handle"> |
|||
<mat-icon>drag_indicator</mat-icon> |
|||
</div> |
|||
</ng-template> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div mat-dialog-actions> |
|||
<div *ngIf="!editMode && !addMode" fxFlex class="tb-add-link-button" |
|||
matTooltip="{{ (mode === 'docs' ? 'widgets.documentation.add-link' : 'widgets.quick-links.add-link') | translate }}" |
|||
matTooltipPosition="above" |
|||
(click)="addLink()"> |
|||
<mat-icon class="tb-add-icon">add</mat-icon> |
|||
</div> |
|||
<ng-container *ngIf="addMode"> |
|||
<ng-container [ngSwitch]="mode"> |
|||
<ng-template [ngSwitchCase]="'docs'"> |
|||
<tb-doc-link fxFlex [(ngModel)]="addingLink" |
|||
[ngModelOptions]="{standalone: true}" |
|||
(docLinkAdded)="linkAdded($event)" |
|||
(docLinkAddCanceled)="addMode = false"> |
|||
</tb-doc-link> |
|||
</ng-template> |
|||
<ng-template [ngSwitchCase]="'quickLinks'"> |
|||
<tb-quick-link fxFlex [(ngModel)]="addingLink" |
|||
[ngModelOptions]="{standalone: true}" |
|||
(quickLinkAdded)="linkAdded($event)" |
|||
(quickLinkAddCanceled)="addMode = false"> |
|||
</tb-quick-link> |
|||
</ng-template> |
|||
</ng-container> |
|||
</ng-container> |
|||
</div> |
|||
</form> |
|||
@ -0,0 +1,122 @@ |
|||
///
|
|||
/// Copyright © 2016-2023 The Thingsboard Authors
|
|||
///
|
|||
/// Licensed under the Apache License, Version 2.0 (the "License");
|
|||
/// you may not use this file except in compliance with the License.
|
|||
/// You may obtain a copy of the License at
|
|||
///
|
|||
/// http://www.apache.org/licenses/LICENSE-2.0
|
|||
///
|
|||
/// Unless required by applicable law or agreed to in writing, software
|
|||
/// distributed under the License is distributed on an "AS IS" BASIS,
|
|||
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|||
/// See the License for the specific language governing permissions and
|
|||
/// limitations under the License.
|
|||
///
|
|||
|
|||
import { Component, Inject, OnInit } from '@angular/core'; |
|||
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; |
|||
import { Store } from '@ngrx/store'; |
|||
import { AppState } from '@core/core.state'; |
|||
import { AbstractControl, UntypedFormArray, UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms'; |
|||
import { DialogComponent } from '@shared/components/dialog.component'; |
|||
import { Router } from '@angular/router'; |
|||
import { DocumentationLink, DocumentationLinks, QuickLinks } from '@shared/models/user-settings.models'; |
|||
import { CdkDragDrop } from '@angular/cdk/drag-drop'; |
|||
import { UserSettingsService } from '@core/http/user-settings.service'; |
|||
import { Observable } from 'rxjs'; |
|||
|
|||
export interface EditLinksDialogData { |
|||
mode: 'docs' | 'quickLinks'; |
|||
links: DocumentationLinks | QuickLinks; |
|||
} |
|||
|
|||
@Component({ |
|||
selector: 'tb-edit-links-dialog', |
|||
templateUrl: './edit-links-dialog.component.html', |
|||
styleUrls: ['./edit-links-dialog.component.scss'] |
|||
}) |
|||
export class EditLinksDialogComponent extends |
|||
DialogComponent<EditLinksDialogComponent, boolean> implements OnInit { |
|||
|
|||
updated = false; |
|||
addMode = false; |
|||
editMode = false; |
|||
|
|||
links = this.data.links; |
|||
mode = this.data.mode; |
|||
addingLink: Partial<DocumentationLink> | string; |
|||
|
|||
editLinksFormGroup: UntypedFormGroup; |
|||
|
|||
constructor(protected store: Store<AppState>, |
|||
protected router: Router, |
|||
@Inject(MAT_DIALOG_DATA) public data: EditLinksDialogData, |
|||
public dialogRef: MatDialogRef<EditLinksDialogComponent, boolean>, |
|||
public fb: UntypedFormBuilder, |
|||
private userSettingsService: UserSettingsService) { |
|||
super(store, router, dialogRef); |
|||
} |
|||
|
|||
ngOnInit(): void { |
|||
const linksControls: Array<AbstractControl> = []; |
|||
for (const link of this.links.links) { |
|||
linksControls.push(this.fb.control(link, [Validators.required])); |
|||
} |
|||
this.editLinksFormGroup = this.fb.group({ |
|||
links: this.fb.array(linksControls) |
|||
}); |
|||
} |
|||
|
|||
linksFormArray(): UntypedFormArray { |
|||
return this.editLinksFormGroup.get('links') as UntypedFormArray; |
|||
} |
|||
|
|||
trackByLink(index: number, linkControl: AbstractControl): any { |
|||
return linkControl; |
|||
} |
|||
|
|||
linkDrop(event: CdkDragDrop<string[]>) { |
|||
const linksArray = this.editLinksFormGroup.get('links') as UntypedFormArray; |
|||
const link = linksArray.at(event.previousIndex); |
|||
linksArray.removeAt(event.previousIndex); |
|||
linksArray.insert(event.currentIndex, link); |
|||
this.update(); |
|||
} |
|||
|
|||
addLink() { |
|||
this.addingLink = this.mode === 'docs' ? { icon: 'notifications' } : null; |
|||
this.addMode = true; |
|||
} |
|||
|
|||
linkAdded(link: DocumentationLink | string) { |
|||
this.addMode = false; |
|||
const linksArray = this.editLinksFormGroup.get('links') as UntypedFormArray; |
|||
const linkControl = this.fb.control(link, [Validators.required]); |
|||
linksArray.push(linkControl); |
|||
this.update(); |
|||
} |
|||
|
|||
deleteLink(index: number) { |
|||
(this.editLinksFormGroup.get('links') as UntypedFormArray).removeAt(index); |
|||
this.update(); |
|||
} |
|||
|
|||
update() { |
|||
if (this.editLinksFormGroup.valid) { |
|||
let updateObservable: Observable<void>; |
|||
if (this.mode === 'docs') { |
|||
updateObservable = this.userSettingsService.updateDocumentationLinks(this.editLinksFormGroup.value); |
|||
} else { |
|||
updateObservable = this.userSettingsService.updateQuickLinks(this.editLinksFormGroup.value); |
|||
} |
|||
updateObservable.subscribe(() => { |
|||
this.updated = true; |
|||
}); |
|||
} |
|||
} |
|||
|
|||
close(): void { |
|||
this.dialogRef.close(this.updated); |
|||
} |
|||
} |
|||
@ -0,0 +1,33 @@ |
|||
/** |
|||
* Copyright © 2016-2023 The Thingsboard Authors |
|||
* |
|||
* Licensed under the Apache License, Version 2.0 (the "License"); |
|||
* you may not use this file except in compliance with the License. |
|||
* You may obtain a copy of the License at |
|||
* |
|||
* http://www.apache.org/licenses/LICENSE-2.0 |
|||
* |
|||
* Unless required by applicable law or agreed to in writing, software |
|||
* distributed under the License is distributed on an "AS IS" BASIS, |
|||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
|||
* See the License for the specific language governing permissions and |
|||
* limitations under the License. |
|||
*/ |
|||
|
|||
.tb-autocomplete.tb-quick-links { |
|||
.mat-mdc-option { |
|||
border-bottom: none; |
|||
font-weight: 400; |
|||
font-size: 14px; |
|||
line-height: 20px; |
|||
letter-spacing: 0.2px; |
|||
color: rgba(0, 0, 0, 0.76); |
|||
.mat-icon { |
|||
margin-right: 10px; |
|||
color: rgba(0, 0, 0, 0.54); |
|||
font-size: 20px; |
|||
width: 20px; |
|||
height: 20px; |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,91 @@ |
|||
<!-- |
|||
|
|||
Copyright © 2016-2023 The Thingsboard Authors |
|||
|
|||
Licensed under the Apache License, Version 2.0 (the "License"); |
|||
you may not use this file except in compliance with the License. |
|||
You may obtain a copy of the License at |
|||
|
|||
http://www.apache.org/licenses/LICENSE-2.0 |
|||
|
|||
Unless required by applicable law or agreed to in writing, software |
|||
distributed under the License is distributed on an "AS IS" BASIS, |
|||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
|||
See the License for the specific language governing permissions and |
|||
limitations under the License. |
|||
|
|||
--> |
|||
<div fxLayout="row" *ngIf="addMode || editMode; else quickLinkTemplate"> |
|||
<div fxFlex class="tb-edit-link" [ngClass]="{'edit-mode': editMode}" [formGroup]="editQuickLinkFormGroup" fxLayout="column"> |
|||
<mat-form-field fxFlex class="mat-block"> |
|||
<mat-label translate>widgets.quick-links.quick-link</mat-label> |
|||
<input matInput type="text" |
|||
#linkInput |
|||
formControlName="link" |
|||
(focusin)="onFocus()" |
|||
required |
|||
[matAutocomplete]="linkAutocomplete"> |
|||
<mat-icon matPrefix *ngIf="quickLink && !quickLink.isMdiIcon" color="primary">{{ quickLink.icon }}</mat-icon> |
|||
<mat-icon matPrefix *ngIf="quickLink && quickLink.isMdiIcon" color="primary" [svgIcon]="quickLink.icon"></mat-icon> |
|||
<button *ngIf="editQuickLinkFormGroup.get('link').value && !disabled" |
|||
type="button" |
|||
matSuffix mat-icon-button aria-label="Clear" |
|||
(click)="clear()"> |
|||
<mat-icon class="material-icons">close</mat-icon> |
|||
</button> |
|||
<mat-autocomplete |
|||
class="tb-autocomplete tb-quick-links" |
|||
#linkAutocomplete="matAutocomplete" |
|||
[displayWith]="displayLinkFn"> |
|||
<mat-option *ngFor="let link of filteredLinks | async" [value]="link"> |
|||
<mat-icon *ngIf="!link.isMdiIcon">{{ link.icon }}</mat-icon> |
|||
<mat-icon *ngIf="link.isMdiIcon" [svgIcon]="link.icon"></mat-icon> |
|||
<span [innerHTML]="link.name | highlight:searchText"></span> |
|||
</mat-option> |
|||
<mat-option *ngIf="!(filteredLinks | async)?.length" [value]="null"> |
|||
<span> |
|||
{{ translate.get('widgets.quick-links.no-links-matching', {name: searchText}) | async }} |
|||
</span> |
|||
</mat-option> |
|||
</mat-autocomplete> |
|||
<mat-error *ngIf="editQuickLinkFormGroup.get('link').hasError('required')"> |
|||
{{ 'widgets.quick-links.quick-link-required' | translate }} |
|||
</mat-error> |
|||
</mat-form-field> |
|||
<div *ngIf="addMode" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="8px"> |
|||
<button *ngIf="!addOnly" mat-button color="primary" (click)="cancelAdd()">{{ 'action.cancel' | translate }}</button> |
|||
<button mat-raised-button color="primary" (click)="add()">{{ 'action.add' | translate }}</button> |
|||
</div> |
|||
</div> |
|||
<div *ngIf="editMode" fxLayout="row" class="tb-edit-buttons"> |
|||
<button mat-icon-button (click)="apply()"><mat-icon>check</mat-icon></button> |
|||
<button mat-icon-button (click)="cancelEdit()"><mat-icon>close</mat-icon></button> |
|||
</div> |
|||
</div> |
|||
<ng-template #quickLinkTemplate> |
|||
<div fxLayout="row"> |
|||
<div fxFlex class="tb-link"> |
|||
<div class="tb-link-container"> |
|||
<div class="tb-link-icon-container"> |
|||
<mat-icon *ngIf="!quickLink?.isMdiIcon" color="primary">{{ quickLink?.icon }}</mat-icon> |
|||
<mat-icon *ngIf="quickLink?.isMdiIcon" color="primary" [svgIcon]="quickLink?.icon"></mat-icon> |
|||
</div> |
|||
<div class="tb-link-text">{{ displayLinkFn(quickLink) }}</div> |
|||
</div> |
|||
</div> |
|||
<div fxLayout="row" fxLayoutAlign="start center" class="tb-edit-buttons"> |
|||
<button mat-icon-button |
|||
matTooltip="{{ 'action.edit' | translate }}" |
|||
matTooltipPosition="above" |
|||
(click)="switchToEditMode()"> |
|||
<mat-icon>edit</mat-icon> |
|||
</button> |
|||
<button mat-icon-button |
|||
matTooltip="{{ 'action.delete' | translate }}" |
|||
matTooltipPosition="above" |
|||
(click)="delete()"> |
|||
<mat-icon>delete</mat-icon> |
|||
</button> |
|||
</div> |
|||
</div> |
|||
</ng-template> |
|||
@ -0,0 +1,318 @@ |
|||
///
|
|||
/// Copyright © 2016-2023 The Thingsboard Authors
|
|||
///
|
|||
/// Licensed under the Apache License, Version 2.0 (the "License");
|
|||
/// you may not use this file except in compliance with the License.
|
|||
/// You may obtain a copy of the License at
|
|||
///
|
|||
/// http://www.apache.org/licenses/LICENSE-2.0
|
|||
///
|
|||
/// Unless required by applicable law or agreed to in writing, software
|
|||
/// distributed under the License is distributed on an "AS IS" BASIS,
|
|||
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|||
/// See the License for the specific language governing permissions and
|
|||
/// limitations under the License.
|
|||
///
|
|||
|
|||
import { |
|||
Component, |
|||
ElementRef, |
|||
EventEmitter, |
|||
forwardRef, |
|||
Input, |
|||
OnInit, |
|||
Output, |
|||
SkipSelf, |
|||
ViewChild |
|||
} from '@angular/core'; |
|||
import { |
|||
AbstractControl, |
|||
ControlValueAccessor, |
|||
FormGroupDirective, |
|||
NG_VALUE_ACCESSOR, |
|||
NgForm, |
|||
UntypedFormBuilder, |
|||
UntypedFormControl, |
|||
UntypedFormGroup, |
|||
ValidationErrors |
|||
} from '@angular/forms'; |
|||
import { PageComponent } from '@shared/components/page.component'; |
|||
import { Store } from '@ngrx/store'; |
|||
import { AppState } from '@core/core.state'; |
|||
import { ErrorStateMatcher } from '@angular/material/core'; |
|||
import { MenuService } from '@core/services/menu.service'; |
|||
import { Observable, of } from 'rxjs'; |
|||
import { MenuSection } from '@core/services/menu.models'; |
|||
import { TranslateService } from '@ngx-translate/core'; |
|||
import { catchError, distinctUntilChanged, map, publishReplay, refCount, share, switchMap, tap } from 'rxjs/operators'; |
|||
import { PageLink } from '@shared/models/page/page-link'; |
|||
import { Direction } from '@shared/models/page/sort-order'; |
|||
import { emptyPageData, PageData } from '@shared/models/page/page-data'; |
|||
import { deepClone } from '@core/utils'; |
|||
|
|||
@Component({ |
|||
selector: 'tb-quick-link', |
|||
templateUrl: './quick-link.component.html', |
|||
styleUrls: ['./link.component.scss'], |
|||
providers: [ |
|||
{ |
|||
provide: NG_VALUE_ACCESSOR, |
|||
useExisting: forwardRef(() => QuickLinkComponent), |
|||
multi: true |
|||
}, |
|||
{provide: ErrorStateMatcher, useExisting: QuickLinkComponent} |
|||
] |
|||
}) |
|||
export class QuickLinkComponent extends PageComponent implements OnInit, ControlValueAccessor, ErrorStateMatcher { |
|||
|
|||
@Input() |
|||
disabled: boolean; |
|||
|
|||
@Input() |
|||
addOnly = false; |
|||
|
|||
@Input() |
|||
disableEdit = false; |
|||
|
|||
@Output() |
|||
quickLinkAdded = new EventEmitter<string>(); |
|||
|
|||
@Output() |
|||
quickLinkAddCanceled = new EventEmitter<void>(); |
|||
|
|||
@Output() |
|||
quickLinkUpdated = new EventEmitter<string>(); |
|||
|
|||
@Output() |
|||
quickLinkDeleted = new EventEmitter<void>(); |
|||
|
|||
@Output() |
|||
editModeChanged = new EventEmitter<boolean>(); |
|||
|
|||
@ViewChild('linkInput', {static: false}) linkInput: ElementRef; |
|||
|
|||
filteredLinks: Observable<Array<MenuSection>>; |
|||
|
|||
private allLinksObservable$: Observable<Array<MenuSection>> = null; |
|||
|
|||
searchText = ''; |
|||
|
|||
editMode = false; |
|||
addMode = false; |
|||
|
|||
quickLink: MenuSection; |
|||
|
|||
private propagateChange = null; |
|||
|
|||
public editQuickLinkFormGroup: UntypedFormGroup; |
|||
|
|||
private submitted = false; |
|||
|
|||
private dirty = false; |
|||
|
|||
constructor(protected store: Store<AppState>, |
|||
private fb: UntypedFormBuilder, |
|||
private menuService: MenuService, |
|||
public translate: TranslateService, |
|||
@SkipSelf() private errorStateMatcher: ErrorStateMatcher) { |
|||
super(store); |
|||
} |
|||
|
|||
ngOnInit(): void { |
|||
this.addMode = this.addOnly; |
|||
this.editQuickLinkFormGroup = this.fb.group({ |
|||
link: [null, [this.requiredLinkValidator]] |
|||
}); |
|||
this.filteredLinks = this.editQuickLinkFormGroup.get('link').valueChanges |
|||
.pipe( |
|||
tap(value => { |
|||
let modelValue; |
|||
if (typeof value === 'string' || !value) { |
|||
modelValue = null; |
|||
} else { |
|||
modelValue = value; |
|||
} |
|||
this.updateView(modelValue); |
|||
}), |
|||
map(value => value ? (typeof value === 'string' ? value : |
|||
((value as any).translated ? value.name : this.translate.instant(value.name))) : ''), |
|||
distinctUntilChanged(), |
|||
switchMap(name => this.fetchLinks(name) ), |
|||
share() |
|||
); |
|||
} |
|||
|
|||
requiredLinkValidator(control: AbstractControl): ValidationErrors | null { |
|||
const value = control.value; |
|||
if (!value || typeof value === 'string') { |
|||
return {required: true}; |
|||
} |
|||
return null; |
|||
} |
|||
|
|||
isErrorState(control: UntypedFormControl | null, form: FormGroupDirective | NgForm | null): boolean { |
|||
const originalErrorState = this.errorStateMatcher.isErrorState(control, form); |
|||
const customErrorState = !!(control && control.invalid && this.submitted); |
|||
return originalErrorState || customErrorState; |
|||
} |
|||
|
|||
registerOnChange(fn: any): void { |
|||
this.propagateChange = fn; |
|||
} |
|||
|
|||
registerOnTouched(fn: any): void { |
|||
} |
|||
|
|||
setDisabledState(isDisabled: boolean): void { |
|||
this.disabled = isDisabled; |
|||
if (isDisabled) { |
|||
this.editQuickLinkFormGroup.disable({emitEvent: false}); |
|||
} else { |
|||
this.editQuickLinkFormGroup.enable({emitEvent: false}); |
|||
} |
|||
} |
|||
|
|||
writeValue(value: string): void { |
|||
if (value) { |
|||
this.menuService.menuLinkById(value).subscribe( |
|||
(link) => { |
|||
this.quickLink = link; |
|||
this.editQuickLinkFormGroup.get('link').patchValue( |
|||
link, {emitEvent: false} |
|||
); |
|||
} |
|||
); |
|||
} else { |
|||
this.quickLink = null; |
|||
this.editQuickLinkFormGroup.get('link').patchValue( |
|||
value, {emitEvent: false} |
|||
); |
|||
if (!this.editQuickLinkFormGroup.valid) { |
|||
this.addMode = true; |
|||
this.editModeChanged.emit(true); |
|||
} |
|||
} |
|||
this.dirty = true; |
|||
} |
|||
|
|||
updateView(value: MenuSection | null) { |
|||
if (this.quickLink !== value) { |
|||
this.quickLink = value; |
|||
} |
|||
} |
|||
|
|||
displayLinkFn = (link?: MenuSection): string | undefined => |
|||
link ? ((link as any).translated ? link.name : this.translate.instant(link.name)) : undefined; |
|||
|
|||
fetchLinks(searchText?: string): Observable<Array<MenuSection>> { |
|||
this.searchText = searchText; |
|||
const pageLink = new PageLink(100, 0, searchText, { |
|||
property: 'name', |
|||
direction: Direction.ASC |
|||
}); |
|||
return this.getLinks(pageLink).pipe( |
|||
catchError(() => of(emptyPageData<MenuSection>())), |
|||
map(pageData => pageData.data) |
|||
); |
|||
} |
|||
|
|||
getLinks(pageLink: PageLink): Observable<PageData<MenuSection>> { |
|||
return this.allLinks().pipe( |
|||
map((links) => pageLink.filterData(links)) |
|||
); |
|||
} |
|||
|
|||
allLinks(): Observable<Array<MenuSection>> { |
|||
if (this.allLinksObservable$ === null) { |
|||
this.allLinksObservable$ = this.menuService.availableMenuLinks().pipe( |
|||
map((links) => { |
|||
const result = deepClone(links); |
|||
for (const link of result) { |
|||
link.name = this.translate.instant(link.name); |
|||
(link as any).translated = true; |
|||
} |
|||
return result; |
|||
}), |
|||
publishReplay(1), |
|||
refCount() |
|||
); |
|||
} |
|||
return this.allLinksObservable$; |
|||
} |
|||
|
|||
onFocus() { |
|||
if (this.dirty) { |
|||
this.editQuickLinkFormGroup.get('link').updateValueAndValidity({onlySelf: true}); |
|||
this.dirty = false; |
|||
} |
|||
} |
|||
|
|||
clear() { |
|||
this.editQuickLinkFormGroup.get('link').patchValue(''); |
|||
setTimeout(() => { |
|||
this.linkInput.nativeElement.blur(); |
|||
this.linkInput.nativeElement.focus(); |
|||
}, 0); |
|||
} |
|||
|
|||
switchToEditMode() { |
|||
if (!this.disableEdit && !this.editMode) { |
|||
this.submitted = false; |
|||
this.editQuickLinkFormGroup.get('link').patchValue( |
|||
this.quickLink, {emitEvent: false} |
|||
); |
|||
this.editMode = true; |
|||
this.editModeChanged.emit(true); |
|||
} |
|||
} |
|||
|
|||
apply() { |
|||
this.submitted = true; |
|||
this.updateModel(); |
|||
if (this.quickLink) { |
|||
this.editMode = false; |
|||
this.editModeChanged.emit(false); |
|||
this.quickLinkUpdated.next(this.quickLink.id); |
|||
} |
|||
} |
|||
|
|||
cancelEdit() { |
|||
this.submitted = false; |
|||
this.editMode = false; |
|||
this.editModeChanged.emit(false); |
|||
} |
|||
|
|||
add() { |
|||
this.submitted = true; |
|||
this.updateModel(); |
|||
if (this.quickLink) { |
|||
if (!this.addOnly) { |
|||
this.addMode = false; |
|||
this.editModeChanged.emit(false); |
|||
} |
|||
this.quickLinkAdded.next(this.quickLink.id); |
|||
} |
|||
} |
|||
|
|||
cancelAdd() { |
|||
this.editModeChanged.emit(false); |
|||
this.quickLinkAddCanceled.emit(); |
|||
} |
|||
|
|||
delete() { |
|||
this.quickLinkDeleted.emit(); |
|||
} |
|||
|
|||
isEditing() { |
|||
return this.editMode || this.addMode; |
|||
} |
|||
|
|||
private updateModel() { |
|||
if (this.quickLink) { |
|||
this.propagateChange(this.quickLink.id); |
|||
} else { |
|||
this.propagateChange(null); |
|||
} |
|||
} |
|||
|
|||
} |
|||
Loading…
Reference in new issue