Merge pull request #1901 from bcgov/develop

Deployment PR - 1337

.gitignore

@@ -15,4 +15,4 @@ playwright-report/
 playwright/.cache/
 .~lock.*
 
-/ora2pg_data
+/ora2pg_data

alcs-frontend/src/app/features/admin/admin.component.ts

@@ -10,6 +10,7 @@ import { HolidayComponent } from './holiday/holiday.component';
 import { LocalGovernmentComponent } from './local-government/local-government.component';
 import { NoiSubtypeComponent } from './noi-subtype/noi-subtype.component';
 import { UnarchiveComponent } from './unarchive/unarchive.component';
+import { TagContainerComponent } from './tag/tag-container.component';
 
 export const childRoutes = [
   {
@@ -72,6 +73,12 @@ export const childRoutes = [
     icon: 'settings_applications',
     component: ConfigurationComponent,
   },
+  {
+    path: 'tag',
+    menuTitle: 'Tags/Categories',
+    icon: 'sell',
+    component: TagContainerComponent,
+  },
 ];
 
 @Component({

alcs-frontend/src/app/features/admin/admin.module.ts

@@ -3,6 +3,7 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { MatChipsModule } from '@angular/material/chips';
 import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatTabsModule } from '@angular/material/tabs';
 import { RouterModule, Routes } from '@angular/router';
 import { SharedModule } from '../../shared/shared.module';
 import { AdminComponent, childRoutes } from './admin.component';
@@ -25,6 +26,11 @@ import { LocalGovernmentComponent } from './local-government/local-government.co
 import { NoiSubtypeDialogComponent } from './noi-subtype/noi-subtype-dialog/noi-subtype-dialog.component';
 import { NoiSubtypeComponent } from './noi-subtype/noi-subtype.component';
 import { UnarchiveComponent } from './unarchive/unarchive.component';
+import { TagCategoryComponent } from './tag/tag-category/tag-category.component';
+import { TagCategoryDialogComponent } from './tag/tag-category/tag-category-dialog/tag-category-dialog.component';
+import { TagComponent } from './tag/tag.component';
+import { TagDialogComponent } from './tag/tag-dialog/tag-dialog.component';
+import { TagContainerComponent } from './tag/tag-container.component';
 
 const routes: Routes = [
   {
@@ -56,6 +62,11 @@ const routes: Routes = [
     BoardManagementDialogComponent,
     ConfigurationComponent,
     MaintenanceBannerConfirmationDialogComponent,
+    TagCategoryComponent,
+    TagCategoryDialogComponent,
+    TagComponent,
+    TagDialogComponent,
+    TagContainerComponent,
   ],
   imports: [
     CommonModule,
@@ -64,6 +75,7 @@ const routes: Routes = [
     MatPaginatorModule,
     DragDropModule,
     MatChipsModule,
+    MatTabsModule,
   ],
 })
 export class AdminModule {}

alcs-frontend/src/app/features/admin/tag/tag-category/tag-category-dialog/tag-category-dialog.component.html

@@ -0,0 +1,36 @@
+<div mat-dialog-title>
+  <h4>{{ isEdit ? 'Edit' : 'Create New' }} Category</h4>
+</div>
+<div mat-dialog-content class="dialog">
+  <form (ngSubmit)="onSubmit()" #form="ngForm">
+
+    <div class="full-width">
+      <mat-form-field class="description" appearance="outline">
+        <mat-label>Name</mat-label>
+        <input required matInput id="name" [(ngModel)]="name" name="name" (ngModelChange)="onChange()" [formControl]="nameControl" />
+      </mat-form-field>
+      <div class="warning-section">
+        <div class="warning" *ngIf="showNameWarning">
+          <mat-icon>info</mat-icon> <b>Warning: </b>&nbsp; Category already exists. Choose a different category name.
+        </div>
+      </div>
+    </div>
+
+  </form>
+
+  <mat-dialog-actions align="end">
+    <div class="button-container">
+      <button mat-stroked-button color="primary" mat-dialog-close="false">Close</button>
+      <button
+        [loading]="isLoading"
+        (click)="onSubmit()"
+        mat-flat-button
+        color="primary"
+        type="submit"
+        [disabled]="!form.form.valid"
+      >
+        Save
+      </button>
+    </div>
+  </mat-dialog-actions>
+</div>

alcs-frontend/src/app/features/admin/tag/tag-category/tag-category-dialog/tag-category-dialog.component.scss

@@ -0,0 +1,55 @@
+@use '../../../../../../styles/colors';
+
+mat-dialog-title {
+  margin-bottom: 24px;
+}
+
+.warning-banner {
+  margin-top: 8px;
+  background-color: green;
+  padding: 16px;
+
+  .display-none {
+    display: none !important;
+  }
+}
+
+.warning {
+  padding: 16px;
+  font-size: 14px;
+  background-color: rgba(colors.$field-warning-bg-color, 0.5);
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  color: colors.$dark-contrast-text;
+  margin-top: 8px;
+
+  mat-icon {
+    color: colors.$dark-contrast-text;
+    margin-right: 16px;
+  }
+}
+
+.dialog {
+  padding: 24px;
+
+  form {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    row-gap: 24px;
+    column-gap: 24px;
+    margin-bottom: 12px;
+
+    .description {
+      margin-top: 20px;    
+    }
+
+    .full-width {
+      grid-column: 1/3;
+    }
+
+    .mat-mdc-form-field {
+      width: 100%;
+    }
+  }
+}

alcs-frontend/src/app/features/admin/tag/tag-category/tag-category-dialog/tag-category-dialog.component.spec.ts

@@ -0,0 +1,36 @@
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { TagCategoryService } from '../../../../../services/tag/tag-category/tag-category.service';
+
+import { TagCategoryDialogComponent } from './tag-category-dialog.component';
+
+describe('TagCategoryDialogComponent', () => {
+  let component: TagCategoryDialogComponent;
+  let fixture: ComponentFixture<TagCategoryDialogComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ReactiveFormsModule, FormsModule],
+      declarations: [TagCategoryDialogComponent],
+      providers: [
+        { provide: MAT_DIALOG_DATA, useValue: undefined },
+        { provide: MatDialogRef, useValue: {} },
+        {
+          provide: TagCategoryService,
+          useValue: {},
+        },
+      ],
+      schemas: [NO_ERRORS_SCHEMA],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(TagCategoryDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

alcs-frontend/src/app/features/admin/tag/tag-category/tag-category-dialog/tag-category-dialog.component.ts

@@ -0,0 +1,70 @@
+import { Component, Inject } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { TagCategoryDto } from '../../../../../services/tag/tag-category/tag-category.dto';
+import { TagCategoryService } from '../../../../../services/tag/tag-category/tag-category.service';
+import { FormControl } from '@angular/forms';
+
+@Component({
+  selector: 'app-tag-category-dialog',
+  templateUrl: './tag-category-dialog.component.html',
+  styleUrls: ['./tag-category-dialog.component.scss'],
+})
+export class TagCategoryDialogComponent {
+  name = '';
+  uuid = '';
+
+  isLoading = false;
+  isEdit = false;
+  showNameWarning = false;
+  nameControl = new FormControl();
+
+  constructor(
+    @Inject(MAT_DIALOG_DATA) public data: TagCategoryDto | undefined,
+    private dialogRef: MatDialogRef<TagCategoryDialogComponent>,
+    private tagCategoryService: TagCategoryService,
+  ) {
+    if (data) {
+      this.uuid = data.uuid;
+      this.name = data.name;
+    }
+    this.isEdit = !!data;
+  }
+
+  async onSubmit() {
+    this.isLoading = true;
+
+    const dto: TagCategoryDto = {
+      uuid: this.uuid,
+      name: this.name,
+    };
+
+    if (this.isEdit) {
+      try {
+        await this.tagCategoryService.update(this.uuid, dto);
+      } catch (e) {
+        this.showWarning();
+        this.isLoading = false;
+        return;
+      }
+    } else {
+      try {
+        await this.tagCategoryService.create(dto);
+      } catch (e) {
+        this.showWarning();
+        this.isLoading = false;
+        return;
+      }
+    }
+    this.isLoading = false;
+    this.dialogRef.close(true);
+  }
+
+  onChange() {
+    this.showNameWarning = false;
+  }
+
+  private showWarning() {
+    this.showNameWarning = true;
+    this.nameControl.setErrors({"invalid": true});
+  }
+}

alcs-frontend/src/app/features/admin/tag/tag-category/tag-category.component.html

@@ -0,0 +1,58 @@
+<div class="container">
+  <div class="actions-bar">
+    <div>
+      <div class="search-control">
+        <mat-form-field>
+          <mat-label>Enter category</mat-label>
+          <input matInput placeholder="Category Name" type="text" [(ngModel)]="search" [matAutocomplete]="auto" (ngModelChange)='updateFilter($event)'>
+          <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete">
+            <mat-option *ngFor="let option of filteredOptions" [value]="option">
+              {{option}}
+            </mat-option>
+          </mat-autocomplete>
+        </mat-form-field>
+      </div>
+      <div class="search-control">
+        <button mat-flat-button color="primary" (click)="fetch()">Search</button>
+      </div>
+    </div>
+    <div class="right">
+      <button mat-flat-button color="primary" (click)="onCreate()">Create</button>
+    </div>
+  </div>
+
+  <table mat-table [dataSource]="categories">
+    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+
+    <ng-container matColumnDef="number">
+      <th mat-header-cell *matHeaderCellDef>Number</th>
+      <td mat-cell *matCellDef="let row">{{ row.number }}</td>
+    </ng-container>
+
+    <ng-container matColumnDef="name">
+      <th mat-header-cell *matHeaderCellDef>Name</th>
+      <td mat-cell *matCellDef="let row">{{ row.name }}</td>
+    </ng-container>
+
+    <ng-container matColumnDef="actions">
+      <th mat-header-cell *matHeaderCellDef>Actions</th>
+      <td mat-cell *matCellDef="let row">
+        <button class="edit-btn" mat-flat-button (click)="onEdit(row)">
+          <mat-icon>edit</mat-icon>
+        </button>
+        <button class="delete-btn" mat-flat-button (click)="onDelete(row)">
+          <mat-icon>delete</mat-icon>
+        </button>
+      </td>
+    </ng-container>
+  </table>
+
+  <mat-paginator
+    [length]="total"
+    [pageSize]="20"
+    [pageSizeOptions]="[20, 50, 100]"
+    (page)="onPageChange($event)"
+    aria-label="Select page of categories"
+  ></mat-paginator>
+</div>

alcs-frontend/src/app/features/admin/tag/tag-category/tag-category.component.scss

@@ -0,0 +1,48 @@
+@use '../../../../../styles/colors';
+
+.container {
+  .actions-bar {
+    margin-top: 30px;
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .search-control {
+    margin-right: 30px;
+    display: inline-block;
+  }
+
+  table {
+    margin: 35px 2px 30px 2px;
+    box-shadow: 2px 2px 8px 2px #00000040;
+  }
+
+  .mdc-data-table__table {
+    min-width: unset!important;
+    width: 99%;
+  }
+
+  .delete-btn {
+    color: colors.$error-color;
+    width: 48px!important;
+    min-width: unset!important;
+  }
+
+  .mat-icon {
+    margin-right: 1px;
+  }
+
+  .edit-btn {
+    color: colors.$primary-color-dark;
+    width: 48px!important;
+    min-width: unset!important;
+  }
+
+  .mat-column-name {
+    width: 70%;
+  }
+
+  .mat-column-actions {
+    width: 30%;
+  }
+}