Adding the ability to manage the tags

Author: renemadsen

eform-client/src/app/plugins/modules/backend-configuration-pn/modules/property-workers/components/property-workers-page/property-workers-page.component.html

@@ -1,4 +1,12 @@
 <eform-new-subheader>
+  <button
+    class="btn-secondary btn-secondary--icon-rounded-border"
+    id="sitesManageTagsBtn"
+    (click)="openEditTagsModal()"
+    matTooltip="{{ 'Manage tags' | translate }}"
+  >
+    <mat-icon>discount</mat-icon>
+  </button>
   <button
     class="btn-primary btn-primary--icon-left"
     id="newDeviceUserBtn"
@@ -25,3 +33,10 @@
   [availableTags]="availableTags"
 >
 </app-property-worker-table>
+
+<app-eforms-tags
+  #modalTags
+  [availableTags]="availableTags"
+  (tagsChanged)="loadAllTags()"
+>
+</app-eforms-tags>

eform-client/src/app/plugins/modules/backend-configuration-pn/modules/property-workers/components/property-workers-page/property-workers-page.component.ts

@@ -1,5 +1,6 @@
-import {Component, OnDestroy, OnInit,
-  inject
+import {
+  Component, OnDestroy, OnInit,
+  inject, ViewChild
 } from '@angular/core';
 import {AutoUnsubscribe} from 'ngx-auto-unsubscribe';
 import {Subscription} from 'rxjs';
@@ -29,6 +30,7 @@ import {
   selectPropertyWorkersFilters
 } from '../../../../state/property-workers/property-workers.selector';
 import {EformTagService} from 'src/app/common/services';
+import {EformsTagsComponent} from "src/app/common/modules/eform-shared-tags/components";
 
 @AutoUnsubscribe()
 @Component({
@@ -43,6 +45,7 @@ export class PropertyWorkersPageComponent implements OnInit, OnDestroy {
   private dialog = inject(MatDialog);
   private overlay = inject(Overlay);
   private eFormTagService = inject(EformTagService);
+  @ViewChild('modalTags', {static: true}) modalSiteTags: EformsTagsComponent;
 
   sitesDto: Array<DeviceUserModel>;
   availableProperties: CommonDictionaryModel[];
@@ -149,6 +152,10 @@ export class PropertyWorkersPageComponent implements OnInit, OnDestroy {
       .afterClosed().subscribe(data => data ? this.updateTable() : undefined);
   }
 
+  openEditTagsModal() {
+    this.modalSiteTags.show();
+  }
+
   getPropertiesDictionary() {
     this.getPropertiesDictionary$ = this.propertiesService
       .getAllPropertiesDictionary()

eform-client/src/app/plugins/modules/backend-configuration-pn/modules/property-workers/property-workers.module.ts

@@ -26,32 +26,34 @@ import {
 import {MatChip} from "@angular/material/chips";
 import {MatDatepicker, MatDatepickerInput, MatDatepickerToggle} from "@angular/material/datepicker";
 import {MatTab, MatTabGroup} from "@angular/material/tabs";
+import {EformSharedTagsModule} from "src/app/common/modules/eform-shared-tags/eform-shared-tags.module";
 
 @NgModule({
-    imports: [
-        CommonModule,
-        PropertyWorkersRouting,
-        EformSharedModule,
-        TranslateModule,
-        FormsModule,
-        MatIconModule,
-        MatButtonModule,
-        MatTooltipModule,
-        MtxGridModule,
-        MatInputModule,
-        MatDialogModule,
-        MtxSelectModule,
-        MatSlideToggleModule,
-        MatCheckboxModule,
-        MatMenuModule,
-        ReactiveFormsModule,
-        MatChip,
-        MatDatepicker,
-        MatDatepickerInput,
-        MatDatepickerToggle,
-        MatTab,
-        MatTabGroup,
-    ],
+  imports: [
+    CommonModule,
+    PropertyWorkersRouting,
+    EformSharedModule,
+    TranslateModule,
+    FormsModule,
+    MatIconModule,
+    MatButtonModule,
+    MatTooltipModule,
+    MtxGridModule,
+    MatInputModule,
+    MatDialogModule,
+    MtxSelectModule,
+    MatSlideToggleModule,
+    MatCheckboxModule,
+    MatMenuModule,
+    ReactiveFormsModule,
+    MatChip,
+    MatDatepicker,
+    MatDatepickerInput,
+    MatDatepickerToggle,
+    MatTab,
+    MatTabGroup,
+    EformSharedTagsModule,
+  ],
   declarations: [
     PropertyWorkersPageComponent,
     PropertyWorkerOtpModalComponent,