Igor Kulikov
3 years ago
11 changed files with 735 additions and 6 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-doc-link-dialog" [formGroup]="addDocLinkFormGroup"> |
|||
<mat-toolbar style="background: transparent;"> |
|||
<h2>Add documentation link</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-doc-link formControlName="docLink" [addOnly]="true" |
|||
(docLinkAdded)="add($event)"> |
|||
</tb-doc-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-doc-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,58 @@ |
|||
///
|
|||
/// 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'; |
|||
import { DocumentationLink } from '@shared/models/user-settings.models'; |
|||
|
|||
@Component({ |
|||
selector: 'tb-add-doc-link-dialog', |
|||
templateUrl: './add-doc-link-dialog.component.html', |
|||
styleUrls: ['./add-doc-link-dialog.component.scss'] |
|||
}) |
|||
export class AddDocLinkDialogComponent extends |
|||
DialogComponent<AddDocLinkDialogComponent, DocumentationLink> implements OnInit { |
|||
|
|||
addDocLinkFormGroup: UntypedFormGroup; |
|||
|
|||
constructor(protected store: Store<AppState>, |
|||
protected router: Router, |
|||
@SkipSelf() private errorStateMatcher: ErrorStateMatcher, |
|||
public dialogRef: MatDialogRef<AddDocLinkDialogComponent, DocumentationLink>, |
|||
public fb: UntypedFormBuilder) { |
|||
super(store, router, dialogRef); |
|||
} |
|||
|
|||
ngOnInit(): void { |
|||
this.addDocLinkFormGroup = this.fb.group({ |
|||
docLink: [{ icon: 'notifications' }, [Validators.required]] |
|||
}); |
|||
} |
|||
|
|||
cancel(): void { |
|||
this.dialogRef.close(null); |
|||
} |
|||
|
|||
add(docLink: DocumentationLink): void { |
|||
this.dialogRef.close(docLink); |
|||
} |
|||
} |
|||
@ -0,0 +1,70 @@ |
|||
<!-- |
|||
|
|||
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 docLinkTemplate"> |
|||
<div fxFlex class="tb-edit-doc-link" [ngClass]="{'edit-mode': editMode}" [formGroup]="editDocLinkFormGroup" fxLayout="column"> |
|||
<tb-material-icon-select required formControlName="icon"></tb-material-icon-select> |
|||
<mat-form-field fxFlex class="mat-block"> |
|||
<mat-label>Name</mat-label> |
|||
<input required matInput formControlName="name"> |
|||
<mat-error *ngIf="editDocLinkFormGroup.get('name').hasError('required')"> |
|||
Name is required. |
|||
</mat-error> |
|||
</mat-form-field> |
|||
<mat-form-field fxFlex class="mat-block"> |
|||
<mat-label>Link</mat-label> |
|||
<input required matInput formControlName="link"> |
|||
<mat-error *ngIf="editDocLinkFormGroup.get('link').hasError('required')"> |
|||
Link is required. |
|||
</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 #docLinkTemplate> |
|||
<div fxLayout="row"> |
|||
<div fxFlex class="tb-doc-link"> |
|||
<div class="tb-doc-container"> |
|||
<div class="tb-doc-icon-container"> |
|||
<mat-icon color="primary">{{ docLink.icon }}</mat-icon> |
|||
</div> |
|||
<div class="tb-doc-text">{{ docLink.name }}</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,61 @@ |
|||
/** |
|||
* 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-edit-doc-link { |
|||
padding: 16px; |
|||
border: 1px solid rgba(0, 0, 0, 0.05); |
|||
box-shadow: 0 5px 16px rgba(0, 0, 0, 0.04); |
|||
border-radius: 10px; |
|||
&.edit-mode { |
|||
border: 1px solid rgba(48, 86, 128, 0.32); |
|||
} |
|||
} |
|||
.tb-doc-link { |
|||
height: 52px; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
padding: 12px; |
|||
background: #FFFFFF; |
|||
border: 1px solid rgba(0, 0, 0, 0.05); |
|||
box-shadow: 0 5px 16px rgba(0, 0, 0, 0.04); |
|||
border-radius: 10px; |
|||
.tb-doc-container { |
|||
display: flex; |
|||
flex-direction: row; |
|||
align-items: center; |
|||
.tb-doc-icon-container { |
|||
height: 40px; |
|||
padding: 8px; |
|||
background: #F3F6FA; |
|||
border-radius: 6px; |
|||
margin-right: 8px; |
|||
} |
|||
.tb-doc-text { |
|||
font-weight: 400; |
|||
font-size: 14px; |
|||
line-height: 20px; |
|||
letter-spacing: 0.2px; |
|||
color: rgba(0, 0, 0, 0.87); |
|||
} |
|||
} |
|||
} |
|||
.tb-edit-buttons { |
|||
.mat-icon { |
|||
color: rgba(0, 0, 0, 0.38); |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,190 @@ |
|||
///
|
|||
/// 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, EventEmitter, forwardRef, Input, OnInit, Output, SkipSelf } from '@angular/core'; |
|||
import { |
|||
ControlValueAccessor, FormGroupDirective, |
|||
NG_VALUE_ACCESSOR, NgForm, |
|||
UntypedFormBuilder, UntypedFormControl, |
|||
UntypedFormGroup, |
|||
Validators |
|||
} from '@angular/forms'; |
|||
import { PageComponent } from '@shared/components/page.component'; |
|||
import { Store } from '@ngrx/store'; |
|||
import { AppState } from '@core/core.state'; |
|||
import { DocumentationLink } from '@shared/models/user-settings.models'; |
|||
import { ErrorStateMatcher } from '@angular/material/core'; |
|||
|
|||
@Component({ |
|||
selector: 'tb-doc-link', |
|||
templateUrl: './doc-link.component.html', |
|||
styleUrls: ['./doc-link.component.scss'], |
|||
providers: [ |
|||
{ |
|||
provide: NG_VALUE_ACCESSOR, |
|||
useExisting: forwardRef(() => DocLinkComponent), |
|||
multi: true |
|||
}, |
|||
{provide: ErrorStateMatcher, useExisting: DocLinkComponent} |
|||
] |
|||
}) |
|||
export class DocLinkComponent extends PageComponent implements OnInit, ControlValueAccessor, ErrorStateMatcher { |
|||
|
|||
@Input() |
|||
disabled: boolean; |
|||
|
|||
@Input() |
|||
addOnly = false; |
|||
|
|||
@Input() |
|||
disableEdit = false; |
|||
|
|||
@Output() |
|||
docLinkAdded = new EventEmitter<DocumentationLink>(); |
|||
|
|||
@Output() |
|||
docLinkAddCanceled = new EventEmitter<void>(); |
|||
|
|||
@Output() |
|||
docLinkUpdated = new EventEmitter<DocumentationLink>(); |
|||
|
|||
@Output() |
|||
docLinkDeleted = new EventEmitter<void>(); |
|||
|
|||
@Output() |
|||
editModeChanged = new EventEmitter<boolean>(); |
|||
|
|||
editMode = false; |
|||
addMode = false; |
|||
|
|||
docLink: DocumentationLink; |
|||
|
|||
private propagateChange = null; |
|||
|
|||
public editDocLinkFormGroup: UntypedFormGroup; |
|||
|
|||
private submitted = false; |
|||
|
|||
constructor(protected store: Store<AppState>, |
|||
private fb: UntypedFormBuilder, |
|||
@SkipSelf() private errorStateMatcher: ErrorStateMatcher) { |
|||
super(store); |
|||
} |
|||
|
|||
ngOnInit(): void { |
|||
this.addMode = this.addOnly; |
|||
this.editDocLinkFormGroup = this.fb.group({ |
|||
icon: [null, [Validators.required]], |
|||
name: [null, [Validators.required]], |
|||
link: [null, [Validators.required]] |
|||
}); |
|||
} |
|||
|
|||
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.editDocLinkFormGroup.disable({emitEvent: false}); |
|||
} else { |
|||
this.editDocLinkFormGroup.enable({emitEvent: false}); |
|||
} |
|||
} |
|||
|
|||
writeValue(value: DocumentationLink): void { |
|||
this.docLink = value; |
|||
this.editDocLinkFormGroup.patchValue( |
|||
value, {emitEvent: false} |
|||
); |
|||
if (!this.editDocLinkFormGroup.valid) { |
|||
this.addMode = true; |
|||
this.editModeChanged.emit(true); |
|||
} |
|||
} |
|||
|
|||
switchToEditMode() { |
|||
if (!this.disableEdit && !this.editMode) { |
|||
this.submitted = false; |
|||
this.editDocLinkFormGroup.patchValue( |
|||
this.docLink, {emitEvent: false} |
|||
); |
|||
this.editMode = true; |
|||
this.editModeChanged.emit(true); |
|||
} |
|||
} |
|||
|
|||
apply() { |
|||
this.submitted = true; |
|||
this.updateModel(); |
|||
if (this.editDocLinkFormGroup.valid) { |
|||
this.editMode = false; |
|||
this.editModeChanged.emit(false); |
|||
this.docLinkUpdated.next(this.editDocLinkFormGroup.value); |
|||
} |
|||
} |
|||
|
|||
cancelEdit() { |
|||
this.submitted = false; |
|||
this.editMode = false; |
|||
this.editModeChanged.emit(false); |
|||
} |
|||
|
|||
add() { |
|||
this.submitted = true; |
|||
this.updateModel(); |
|||
if (this.editDocLinkFormGroup.valid) { |
|||
if (!this.addOnly) { |
|||
this.addMode = false; |
|||
this.editModeChanged.emit(false); |
|||
} |
|||
this.docLinkAdded.next(this.editDocLinkFormGroup.value); |
|||
} |
|||
} |
|||
|
|||
cancelAdd() { |
|||
this.editModeChanged.emit(false); |
|||
this.docLinkAddCanceled.emit(); |
|||
} |
|||
|
|||
delete() { |
|||
this.docLinkDeleted.emit(); |
|||
} |
|||
|
|||
isEditing() { |
|||
return this.editMode || this.addMode; |
|||
} |
|||
|
|||
private updateModel() { |
|||
if (this.editDocLinkFormGroup.valid) { |
|||
this.docLink = this.editDocLinkFormGroup.value; |
|||
this.propagateChange(this.editDocLinkFormGroup.value); |
|||
} else { |
|||
this.propagateChange(null); |
|||
} |
|||
} |
|||
|
|||
} |
|||
@ -0,0 +1,63 @@ |
|||
<!-- |
|||
|
|||
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>Documentation</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="Add link" |
|||
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> |
|||
@ -0,0 +1,62 @@ |
|||
/** |
|||
* 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-edit-doc-links-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); |
|||
} |
|||
.mat-mdc-dialog-content { |
|||
padding: 24px 24px 8px 24px; |
|||
} |
|||
.mdc-dialog__actions { |
|||
padding: 0 24px 24px; |
|||
} |
|||
} |
|||
.tb-drag-handle { |
|||
height: 24px; |
|||
margin-left: 12px; |
|||
.mat-icon { |
|||
color: rgba(0, 0, 0, 0.38); |
|||
} |
|||
} |
|||
.tb-add-doc-button { |
|||
height: 52px; |
|||
cursor: pointer; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
align-items: center; |
|||
background: #FFFFFF; |
|||
padding: 12px; |
|||
border: 2px dashed rgba(0, 0, 0, 0.08); |
|||
border-radius: 10px; |
|||
.tb-add-icon { |
|||
color: rgba(0, 0, 0, 0.12); |
|||
} |
|||
&:hover { |
|||
.tb-add-icon { |
|||
color: rgba(0, 0, 0, 0.38); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,114 @@ |
|||
///
|
|||
/// 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); |
|||
} |
|||
} |
|||
Loading…
Reference in new issue