diff --git a/ui-ngx/angular.json b/ui-ngx/angular.json index c30640de2b..13dee55dbf 100644 --- a/ui-ngx/angular.json +++ b/ui-ngx/angular.json @@ -85,6 +85,7 @@ "node_modules/jstree-bootstrap-theme/dist/themes/proton/style.min.css", "node_modules/leaflet/dist/leaflet.css", "src/app/modules/home/components/widget/lib/maps/markers.scss", + "src/app/modules/home/components/widget/lib/home-page/home-page.scss", "node_modules/leaflet.markercluster/dist/MarkerCluster.css", "node_modules/leaflet.markercluster/dist/MarkerCluster.Default.css", "node_modules/@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css", diff --git a/ui-ngx/src/app/core/services/menu.service.ts b/ui-ngx/src/app/core/services/menu.service.ts index 99f4a557a7..fecff22f9c 100644 --- a/ui-ngx/src/app/core/services/menu.service.ts +++ b/ui-ngx/src/app/core/services/menu.service.ts @@ -107,7 +107,7 @@ export class MenuService { icon: 'supervisor_account' }, { - id: 'tenantProfiles', + id: 'tenant_profiles', name: 'tenant-profile.tenant-profiles', type: 'link', path: '/tenantProfiles', @@ -122,14 +122,14 @@ export class MenuService { icon: 'folder', pages: [ { - id: 'resourcesWidgetsBundles', + id: 'widget_library', name: 'widget.widget-library', type: 'link', path: '/resources/widgets-bundles', icon: 'now_widgets' }, { - id: 'resourcesResourcesLibrary', + id: 'resources_library', name: 'resource.resources-library', type: 'link', path: '/resources/resources-library', @@ -139,7 +139,7 @@ export class MenuService { ] }, { - id: 'notification', + id: 'notifications_center', name: 'notification.notification-center', type: 'link', path: '/notification', @@ -147,28 +147,28 @@ export class MenuService { isMdiIcon: true, pages: [ { - id: 'notificationInbox', + id: 'notification_inbox', name: 'notification.inbox', type: 'link', path: '/notification/inbox', icon: 'inbox' }, { - id: 'notificationSent', + id: 'notification_sent', name: 'notification.sent', type: 'link', path: '/notification/sent', icon: 'outbox' }, { - id: 'notificationRecipients', + id: 'notification_recipients', name: 'notification.recipients', type: 'link', path: '/notification/recipients', icon: 'contacts' }, { - id: 'notificationTemplates', + id: 'notification_templates', name: 'notification.templates', type: 'link', path: '/notification/templates', @@ -176,7 +176,7 @@ export class MenuService { isMdiIcon: true }, { - id: 'notificationRules', + id: 'notification_rules', name: 'notification.rules', type: 'link', path: '/notification/rules', @@ -193,21 +193,21 @@ export class MenuService { icon: 'settings', pages: [ { - id: 'settingsGeneral', + id: 'general', name: 'admin.general', type: 'link', path: '/settings/general', icon: 'settings_applications' }, { - id: 'settingsOutgoingMail', + id: 'mail_server', name: 'admin.outgoing-mail', type: 'link', path: '/settings/outgoing-mail', icon: 'mail' }, { - id: 'settingsNotifications', + id: 'notification_settings', name: 'admin.notifications', type: 'link', path: '/settings/notifications', @@ -215,7 +215,7 @@ export class MenuService { isMdiIcon: true }, { - id: 'settingsQueues', + id: 'queues', name: 'admin.queues', type: 'link', path: '/settings/queues', @@ -224,21 +224,21 @@ export class MenuService { ] }, { - id: 'securitySettings', + id: 'security_settings', name: 'security.security', type: 'toggle', path: '/security-settings', icon: 'security', pages: [ { - id: 'securitySettingsGeneral', + id: 'security_settings_general', name: 'admin.general', type: 'link', path: '/security-settings/general', icon: 'settings_applications' }, { - id: 'securitySettings2fa', + id: '2fa', name: 'admin.2fa.2fa', type: 'link', path: '/security-settings/2fa', @@ -246,7 +246,7 @@ export class MenuService { isMdiIcon: true }, { - id: 'securitySettingsOauth2', + id: 'oauth2', name: 'admin.oauth2.oauth2', type: 'link', path: '/security-settings/oauth2', @@ -370,21 +370,21 @@ export class MenuService { icon: 'category', pages: [ { - id: 'entitiesDevices', + id: 'devices', name: 'device.devices', type: 'link', path: '/entities/devices', icon: 'devices_other' }, { - id: 'entitiesAssets', + id: 'assets', name: 'asset.assets', type: 'link', path: '/entities/assets', icon: 'domain' }, { - id: 'entitiesEntityViews', + id: 'entity_views', name: 'entity-view.entity-views', type: 'link', path: '/entities/entityViews', @@ -400,7 +400,7 @@ export class MenuService { icon: 'badge', pages: [ { - id: 'profilesDeviceProfiles', + id: 'device_profiles', name: 'device-profile.device-profiles', type: 'link', path: '/profiles/deviceProfiles', @@ -408,7 +408,7 @@ export class MenuService { isMdiIcon: true }, { - id: 'profilesAssetProfiles', + id: 'asset_profiles', name: 'asset-profile.asset-profiles', type: 'link', path: '/profiles/assetProfiles', @@ -425,7 +425,7 @@ export class MenuService { icon: 'supervisor_account' }, { - id: 'ruleChains', + id: 'rule_chains', name: 'rulechain.rulechains', type: 'link', path: '/ruleChains', @@ -435,21 +435,21 @@ export class MenuService { if (authState.edgesSupportEnabled) { sections.push( { - id: 'edgeManagement', + id: 'edge_management', name: 'edge.management', type: 'toggle', path: '/edgeManagement', icon: 'settings_input_antenna', pages: [ { - id: 'edgeManagementInstances', + id: 'edges', name: 'edge.instances', type: 'link', path: '/edgeManagement/instances', icon: 'router' }, { - id: 'edgeManagementRuleChains', + id: 'rulechain_templates', name: 'edge.rulechain-templates', type: 'link', path: '/edgeManagement/ruleChains', @@ -468,14 +468,14 @@ export class MenuService { icon: 'construction', pages: [ { - id: 'featuresOtaUpdates', + id: 'otaUpdates', name: 'ota-update.ota-updates', type: 'link', path: '/features/otaUpdates', icon: 'memory' }, { - id: 'featuresVc', + id: 'version_control', name: 'version-control.version-control', type: 'link', path: '/features/vc', @@ -491,14 +491,14 @@ export class MenuService { icon: 'folder', pages: [ { - id: 'resourcesWidgetsBundles', + id: 'widget_library', name: 'widget.widget-library', type: 'link', path: '/resources/widgets-bundles', icon: 'now_widgets' }, { - id: 'resourcesResourcesLibrary', + id: 'resources_library', name: 'resource.resources-library', type: 'link', path: '/resources/resources-library', @@ -508,7 +508,7 @@ export class MenuService { ] }, { - id: 'notification', + id: 'notifications_center', name: 'notification.notification-center', type: 'link', path: '/notification', @@ -516,28 +516,28 @@ export class MenuService { isMdiIcon: true, pages: [ { - id: 'notificationInbox', + id: 'notification_inbox', name: 'notification.inbox', type: 'link', path: '/notification/inbox', icon: 'inbox' }, { - id: 'notificationSent', + id: 'notification_sent', name: 'notification.sent', type: 'link', path: '/notification/sent', icon: 'outbox' }, { - id: 'notificationRecipients', + id: 'notification_recipients', name: 'notification.recipients', type: 'link', path: '/notification/recipients', icon: 'contacts' }, { - id: 'notificationTemplates', + id: 'notification_templates', name: 'notification.templates', type: 'link', path: '/notification/templates', @@ -545,7 +545,7 @@ export class MenuService { isMdiIcon: true }, { - id: 'notificationRules', + id: 'notification_rules', name: 'notification.rules', type: 'link', path: '/notification/rules', @@ -555,7 +555,7 @@ export class MenuService { ] }, { - id: 'usage', + id: 'api_usage', name: 'api-usage.api-usage', type: 'link', path: '/usage', @@ -569,14 +569,14 @@ export class MenuService { icon: 'settings', pages: [ { - id: 'settingsHome', + id: 'home_settings', name: 'admin.home', type: 'link', path: '/settings/home', icon: 'settings_applications' }, { - id: 'settingsNotifications', + id: 'notification_settings', name: 'admin.notifications', type: 'link', path: '/settings/notifications', @@ -584,14 +584,14 @@ export class MenuService { isMdiIcon: true }, { - id: 'settingsRepository', + id: 'repository_settings', name: 'admin.repository', type: 'link', path: '/settings/repository', icon: 'manage_history' }, { - id: 'settingsAutoCommit', + id: 'auto_commit_settings', name: 'admin.auto-commit', type: 'link', path: '/settings/auto-commit', @@ -600,14 +600,14 @@ export class MenuService { ] }, { - id: 'securitySettings', + id: 'security_settings', name: 'security.security', type: 'toggle', path: '/security-settings', icon: 'security', pages: [ { - id: 'securitySettingsAuditLogs', + id: 'audit_log', name: 'audit-log.audit-logs', type: 'link', path: '/security-settings/auditLogs', @@ -811,21 +811,21 @@ export class MenuService { icon: 'category', pages: [ { - id: 'entitiesDevices', + id: 'devices', name: 'device.devices', type: 'link', path: '/entities/devices', icon: 'devices_other' }, { - id: 'entitiesAssets', + id: 'assets', name: 'asset.assets', type: 'link', path: '/entities/assets', icon: 'domain' }, { - id: 'entitiesEntityViews', + id: 'entity_views', name: 'entity-view.entity-views', type: 'link', path: '/entities/entityViews', @@ -837,7 +837,7 @@ export class MenuService { if (authState.edgesSupportEnabled) { sections.push( { - id: 'edgeManagementInstances', + id: 'edges', name: 'edge.edge-instances', type: 'link', path: '/edgeManagement/instances', @@ -847,7 +847,7 @@ export class MenuService { } sections.push( { - id: 'notification', + id: 'notifications_center', name: 'notification.notification-center', type: 'link', path: '/notification', @@ -855,7 +855,7 @@ export class MenuService { isMdiIcon: true, pages: [ { - id: 'notificationInbox', + id: 'notification_inbox', name: 'notification.inbox', type: 'link', path: '/notification/inbox', @@ -963,7 +963,11 @@ export class MenuService { public menuLinksByIds(ids: string[]): Observable> { return this.availableMenuLinks$.pipe( - map((links) => links.filter(link => ids.includes(link.id))) + map((links) => links.filter(link => ids.includes(link.id)).sort((a, b) => { + const i1 = ids.indexOf(a.id); + const i2 = ids.indexOf(b.id); + return i1 - i2; + })) ); } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/add-quick-link-dialog.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/add-quick-link-dialog.component.html new file mode 100644 index 0000000000..6eaf4ca205 --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/add-quick-link-dialog.component.html @@ -0,0 +1,33 @@ + +
+ +

widgets.quick-links.add-link-title

+ + + +
+ + +
+
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/add-quick-link-dialog.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/add-quick-link-dialog.component.scss new file mode 100644 index 0000000000..0a7cf8b418 --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/add-quick-link-dialog.component.scss @@ -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); + } + } +} diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/add-quick-link-dialog.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/add-quick-link-dialog.component.ts new file mode 100644 index 0000000000..ac9cb381d6 --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/add-quick-link-dialog.component.ts @@ -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 implements OnInit { + + addQuickLinkFormGroup: UntypedFormGroup; + + constructor(protected store: Store, + protected router: Router, + @SkipSelf() private errorStateMatcher: ErrorStateMatcher, + public dialogRef: MatDialogRef, + 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); + } +} diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/doc-link.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/doc-link.component.html index c64958a2ec..2d6ea9b3fa 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/doc-link.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/doc-link.component.html @@ -16,7 +16,7 @@ -->
-
+
widgets.documentation.name @@ -44,12 +44,12 @@
-
-
-
+
+
+
{{ docLink.icon }}
-
{{ docLink.name }}
+
{{ docLink.name }}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/doc-link.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/doc-link.component.ts index 488330cf0d..323d56ced4 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/doc-link.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/doc-link.component.ts @@ -31,7 +31,7 @@ import { ErrorStateMatcher } from '@angular/material/core'; @Component({ selector: 'tb-doc-link', templateUrl: './doc-link.component.html', - styleUrls: ['./doc-link.component.scss'], + styleUrls: ['./link.component.scss'], providers: [ { provide: NG_VALUE_ACCESSOR, diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/doc-links-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/doc-links-widget.component.ts index 6517b7dfbd..50325ca8fb 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/doc-links-widget.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/doc-links-widget.component.ts @@ -27,9 +27,9 @@ import { WidgetContext } from '@home/models/widget-component.models'; import { MatDialog } from '@angular/material/dialog'; import { AddDocLinkDialogComponent } from '@home/components/widget/lib/home-page/add-doc-link-dialog.component'; import { - EditDocLinksDialogComponent, - EditDocLinksDialogData -} from '@home/components/widget/lib/home-page/edit-doc-links-dialog.component'; + EditLinksDialogComponent, + EditLinksDialogData +} from '@home/components/widget/lib/home-page/edit-links-dialog.component'; import { BreakpointObserver, BreakpointState } from '@angular/cdk/layout'; import { MediaBreakpoints } from '@shared/models/constants'; @@ -168,12 +168,13 @@ export class DocLinksWidgetComponent extends PageComponent implements OnInit, On } edit() { - this.dialog.open(EditDocLinksDialogComponent, { + this.dialog.open(EditLinksDialogComponent, { disableClose: true, autoFocus: false, data: { - docLinks: this.documentationLinks + mode: 'docs', + links: this.documentationLinks }, panelClass: ['tb-dialog', 'tb-fullscreen-dialog'] }).afterClosed().subscribe( diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/edit-doc-links-dialog.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/edit-doc-links-dialog.component.html deleted file mode 100644 index 13cbf35539..0000000000 --- a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/edit-doc-links-dialog.component.html +++ /dev/null @@ -1,63 +0,0 @@ - -
- -

widgets.documentation.title

- - - -
-
-
- - -
- drag_indicator -
-
-
-
-
-
- add -
- - -
-
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/edit-doc-links-dialog.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/edit-doc-links-dialog.component.ts deleted file mode 100644 index eca41713c4..0000000000 --- a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/edit-doc-links-dialog.component.ts +++ /dev/null @@ -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 implements OnInit { - - updated = false; - addMode = false; - editMode = false; - - docLinks = this.data.docLinks; - addingDocLink: Partial; - - editDocLinksFormGroup: UntypedFormGroup; - - constructor(protected store: Store, - protected router: Router, - @Inject(MAT_DIALOG_DATA) public data: EditDocLinksDialogData, - public dialogRef: MatDialogRef, - public fb: UntypedFormBuilder, - private userSettingsService: UserSettingsService) { - super(store, router, dialogRef); - } - - ngOnInit(): void { - const docLinksControls: Array = []; - 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) { - 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); - } -} diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/edit-links-dialog.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/edit-links-dialog.component.html new file mode 100644 index 0000000000..e70e8cd5c2 --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/edit-links-dialog.component.html @@ -0,0 +1,95 @@ + +
+ +

{{ (mode === 'docs' ? 'widgets.documentation.title' : 'widgets.quick-links.title') | translate }}

+ + + +
+
+
+ + + + + + + + + + + + + + + + + +
+ drag_indicator +
+ +
+
+
+
+
+ add +
+ + + + + + + + + + + + +
+
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/edit-doc-links-dialog.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/edit-links-dialog.component.scss similarity index 96% rename from ui-ngx/src/app/modules/home/components/widget/lib/home-page/edit-doc-links-dialog.component.scss rename to ui-ngx/src/app/modules/home/components/widget/lib/home-page/edit-links-dialog.component.scss index 495c6f4037..0e914e93a6 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/edit-doc-links-dialog.component.scss +++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/edit-links-dialog.component.scss @@ -14,7 +14,7 @@ * limitations under the License. */ :host { - .tb-edit-doc-links-dialog { + .tb-edit-links-dialog { width: 480px; .mat-mdc-dialog-content { max-height: 50vh; @@ -42,7 +42,7 @@ color: rgba(0, 0, 0, 0.38); } } - .tb-add-doc-button { + .tb-add-link-button { height: 55px; cursor: pointer; display: flex; diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/edit-links-dialog.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/edit-links-dialog.component.ts new file mode 100644 index 0000000000..32415c6669 --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/edit-links-dialog.component.ts @@ -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 implements OnInit { + + updated = false; + addMode = false; + editMode = false; + + links = this.data.links; + mode = this.data.mode; + addingLink: Partial | string; + + editLinksFormGroup: UntypedFormGroup; + + constructor(protected store: Store, + protected router: Router, + @Inject(MAT_DIALOG_DATA) public data: EditLinksDialogData, + public dialogRef: MatDialogRef, + public fb: UntypedFormBuilder, + private userSettingsService: UserSettingsService) { + super(store, router, dialogRef); + } + + ngOnInit(): void { + const linksControls: Array = []; + 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) { + 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; + 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); + } +} diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/home-page-widgets.module.ts b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/home-page-widgets.module.ts index 948f1ebd81..6de881288a 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/home-page-widgets.module.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/home-page-widgets.module.ts @@ -23,7 +23,7 @@ import { VersionInfoComponent } from '@home/components/widget/lib/home-page/vers import { DocLinksWidgetComponent } from '@home/components/widget/lib/home-page/doc-links-widget.component'; import { DocLinkComponent } from '@home/components/widget/lib/home-page/doc-link.component'; import { AddDocLinkDialogComponent } from '@home/components/widget/lib/home-page/add-doc-link-dialog.component'; -import { EditDocLinksDialogComponent } from '@home/components/widget/lib/home-page/edit-doc-links-dialog.component'; +import { EditLinksDialogComponent } from '@home/components/widget/lib/home-page/edit-links-dialog.component'; import { GettingStartedWidgetComponent } from '@home/components/widget/lib/home-page/getting-started-widget.component'; import { GettingStartedCompletedDialogComponent @@ -31,6 +31,8 @@ import { import { ToggleHeaderComponent } from '@home/components/widget/lib/home-page/toggle-header.component'; import { UsageInfoWidgetComponent } from '@home/components/widget/lib/home-page/usage-info-widget.component'; import { QuickLinksWidgetComponent } from '@home/components/widget/lib/home-page/quick-links-widget.component'; +import { QuickLinkComponent } from '@home/components/widget/lib/home-page/quick-link.component'; +import { AddQuickLinkDialogComponent } from '@home/components/widget/lib/home-page/add-quick-link-dialog.component'; @NgModule({ declarations: @@ -41,12 +43,14 @@ import { QuickLinksWidgetComponent } from '@home/components/widget/lib/home-page DocLinksWidgetComponent, DocLinkComponent, AddDocLinkDialogComponent, - EditDocLinksDialogComponent, + EditLinksDialogComponent, GettingStartedWidgetComponent, GettingStartedCompletedDialogComponent, ToggleHeaderComponent, UsageInfoWidgetComponent, - QuickLinksWidgetComponent + QuickLinksWidgetComponent, + QuickLinkComponent, + AddQuickLinkDialogComponent ], imports: [ CommonModule, @@ -59,12 +63,14 @@ import { QuickLinksWidgetComponent } from '@home/components/widget/lib/home-page DocLinksWidgetComponent, DocLinkComponent, AddDocLinkDialogComponent, - EditDocLinksDialogComponent, + EditLinksDialogComponent, GettingStartedWidgetComponent, GettingStartedCompletedDialogComponent, ToggleHeaderComponent, UsageInfoWidgetComponent, - QuickLinksWidgetComponent + QuickLinksWidgetComponent, + QuickLinkComponent, + AddQuickLinkDialogComponent ] }) export class HomePageWidgetsModule { } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/home-page.scss b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/home-page.scss new file mode 100644 index 0000000000..a488d77c6e --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/home-page.scss @@ -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; + } + } +} diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/doc-link.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/link.component.scss similarity index 93% rename from ui-ngx/src/app/modules/home/components/widget/lib/home-page/doc-link.component.scss rename to ui-ngx/src/app/modules/home/components/widget/lib/home-page/link.component.scss index 1d9de4fc38..3b71124d4f 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/doc-link.component.scss +++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/link.component.scss @@ -14,7 +14,7 @@ * limitations under the License. */ :host { - .tb-edit-doc-link { + .tb-edit-link { padding: 16px; border: 1px solid rgba(0, 0, 0, 0.05); box-shadow: 0 5px 16px rgba(0, 0, 0, 0.04); @@ -23,7 +23,7 @@ border: 1px solid rgba(48, 86, 128, 0.32); } } - .tb-doc-link { + .tb-link { height: 55px; display: flex; flex-direction: column; @@ -33,18 +33,18 @@ 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 { + .tb-link-container { display: flex; flex-direction: row; align-items: center; - .tb-doc-icon-container { + .tb-link-icon-container { height: 40px; padding: 8px; background: #F3F6FA; border-radius: 6px; margin-right: 8px; } - .tb-doc-text { + .tb-link-text { font-weight: 400; font-size: 14px; line-height: 20px; diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/quick-link.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/quick-link.component.html new file mode 100644 index 0000000000..0dec41e71d --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/quick-link.component.html @@ -0,0 +1,91 @@ + +
+
+ + widgets.quick-links.quick-link + + {{ quickLink.icon }} + + + + + {{ link.icon }} + + + + + + {{ translate.get('widgets.quick-links.no-links-matching', {name: searchText}) | async }} + + + + + {{ 'widgets.quick-links.quick-link-required' | translate }} + + +
+ + +
+
+
+ + +
+
+ +
+
+
+
+ {{ quickLink?.icon }} + +
+
{{ displayLinkFn(quickLink) }}
+
+
+
+ + +
+
+ diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/quick-link.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/quick-link.component.ts new file mode 100644 index 0000000000..49994bc1d7 --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/quick-link.component.ts @@ -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(); + + @Output() + quickLinkAddCanceled = new EventEmitter(); + + @Output() + quickLinkUpdated = new EventEmitter(); + + @Output() + quickLinkDeleted = new EventEmitter(); + + @Output() + editModeChanged = new EventEmitter(); + + @ViewChild('linkInput', {static: false}) linkInput: ElementRef; + + filteredLinks: Observable>; + + private allLinksObservable$: Observable> = null; + + searchText = ''; + + editMode = false; + addMode = false; + + quickLink: MenuSection; + + private propagateChange = null; + + public editQuickLinkFormGroup: UntypedFormGroup; + + private submitted = false; + + private dirty = false; + + constructor(protected store: Store, + 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> { + this.searchText = searchText; + const pageLink = new PageLink(100, 0, searchText, { + property: 'name', + direction: Direction.ASC + }); + return this.getLinks(pageLink).pipe( + catchError(() => of(emptyPageData())), + map(pageData => pageData.data) + ); + } + + getLinks(pageLink: PageLink): Observable> { + return this.allLinks().pipe( + map((links) => pageLink.filterData(links)) + ); + } + + allLinks(): Observable> { + 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); + } + } + +} diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/quick-links-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/quick-links-widget.component.ts index 10f9a8057c..1b16601a7c 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/quick-links-widget.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/quick-links-widget.component.ts @@ -29,17 +29,22 @@ import { BreakpointObserver, BreakpointState } from '@angular/cdk/layout'; import { MediaBreakpoints } from '@shared/models/constants'; import { MenuService } from '@core/services/menu.service'; import { MenuSection } from '@core/services/menu.models'; +import { AddQuickLinkDialogComponent } from '@home/components/widget/lib/home-page/add-quick-link-dialog.component'; +import { + EditLinksDialogComponent, + EditLinksDialogData +} from '@home/components/widget/lib/home-page/edit-links-dialog.component'; const defaultQuickLinksMap = new Map( [ [Authority.SYS_ADMIN, { - links: ['tenants', 'tenantProfiles'] + links: ['tenants', 'tenant_profiles'] }], [Authority.TENANT_ADMIN, { - links: ['alarms', 'dashboards', 'entitiesDevices'] + links: ['alarms', 'dashboards', 'devices'] }], [Authority.CUSTOMER_USER, { - links: ['alarms', 'dashboards', 'entitiesDevices'] + links: ['alarms', 'dashboards', 'devices'] }] ] ); @@ -128,35 +133,36 @@ export class QuickLinksWidgetComponent extends PageComponent implements OnInit, } edit() { - /* this.dialog.open(EditDocLinksDialogComponent, { + this.dialog.open(EditLinksDialogComponent, { disableClose: true, autoFocus: false, data: { - docLinks: this.documentationLinks + mode: 'quickLinks', + links: this.quickLinks }, panelClass: ['tb-dialog', 'tb-fullscreen-dialog'] }).afterClosed().subscribe( (result) => { if (result) { - this.loadDocLinks(); + this.loadQuickLinks(); } - }); */ + }); } addLink() { - /* this.dialog.open(AddDocLinkDialogComponent, { + this.dialog.open(AddQuickLinkDialogComponent, { disableClose: true, autoFocus: false, panelClass: ['tb-dialog', 'tb-fullscreen-dialog'] }).afterClosed().subscribe( - (docLink) => { - if (docLink) { - this.documentationLinks.links.push(docLink); + (link) => { + if (link) { + this.quickLinks.links.push(link); this.cd.markForCheck(); - this.userSettingsService.updateDocumentationLinks(this.documentationLinks).subscribe(); + this.userSettingsService.updateQuickLinks(this.quickLinks).subscribe(); } - }); */ + }); } } diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json index 0961dd3121..28c097121f 100644 --- a/ui-ngx/src/assets/locale/locale.constant-en_US.json +++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json @@ -5146,6 +5146,10 @@ "quick-links": { "title": "Quick links", "add-link": "Add link", + "add-link-title": "Add quick link", + "quick-link": "Quick link", + "quick-link-required": "Quick link is required.", + "no-links-matching": "No links matching '{{name}}' were found.", "columns": "Columns" }, "configured-features": {