Merge pull request #64 from bcgov/oleksandrbohuslavskyi

Design review fixes
bcgov · Mar 28, 2024 · ae75cea · ae75cea
2 parents 64893be + 4a3c2e6
commit ae75cea
Show file tree

Hide file tree

Showing 11 changed files with 142 additions and 62 deletions.
diff --git a/frontend/src/app/features/components/access-request/access-request.component.html b/frontend/src/app/features/components/access-request/access-request.component.html
@@ -18,9 +18,9 @@
                 <label for="organizationType">What role best describes you?</label>
             </div>
             <div class="form-group-row-col">
-                <p-dropdown [options]="roles" formControlName="organizationType" [showClear]="true"
-                    placeholder="Please Select..." id="organizationType" name="organizationType"
-                    [ngClass]="'full-width-text-field'" [required]="true"></p-dropdown>
+                <p-dropdown [options]="roles" formControlName="organizationType" placeholder="Please Select..."
+                    id="organizationType" name="organizationType" [ngClass]="'full-width-text-field'"
+                    [required]="true"></p-dropdown>
             </div>
         </div>
 

diff --git a/frontend/src/app/features/components/access-request/access-request.component.scss b/frontend/src/app/features/components/access-request/access-request.component.scss
@@ -3,6 +3,7 @@
     justify-content: center;
     align-items: center;
     width: 100%;
+    padding: 0 10%;
 
     .message-icon-block {
         align-self: start;

diff --git a/frontend/src/app/features/components/compliance-notice/compliance-notice.component.html b/frontend/src/app/features/components/compliance-notice/compliance-notice.component.html
@@ -8,8 +8,8 @@
             <label for="platformId">Select Platform recipient</label>
         </div>
         <div class="form-group-row-col">
-            <p-dropdown [options]="platformOptions" formControlName="platformId" [showClear]="true"
-                placeholder="Please Select..." id="platformId" name="platformId" [required]="true"></p-dropdown>
+            <p-dropdown [options]="platformOptions" formControlName="platformId" placeholder="Please Select..."
+                id="platformId" name="platformId" [required]="true"></p-dropdown>
         </div>
         <div class="form-group-row-col validation-errors"
             *ngIf="!platformIdControl.pristine && platformIdControl.errors">
@@ -82,8 +82,8 @@
             <label for="reasonId">Select Reason for request</label>
         </div>
         <div class="form-group-row-col">
-            <p-dropdown [options]="reasonOptions" formControlName="reasonId" [showClear]="true"
-                placeholder="Please Select..." id="reasonId" name="reasonId" [required]="true"></p-dropdown>
+            <p-dropdown [options]="reasonOptions" formControlName="reasonId" placeholder="Please Select..."
+                id="reasonId" name="reasonId" [required]="true"></p-dropdown>
         </div>
         <div class="form-group-row-col validation-errors" *ngIf="!reasonIdControl.pristine && reasonIdControl.errors">
             <small id="requiredReasonId" *ngIf="reasonIdControl.errors?.['required']">Reason for request is
@@ -171,29 +171,27 @@
         </div>
     </div>
 
-    <button type="submit" id="form-preview-btn" pButton pRipple [disabled]="!myForm.valid" label="Review"
-        class="p-button-success"></button>
+    <p-button type="submit" label="Review" id="form-preview-btn" [disabled]="!myForm.valid"></p-button>
 </form>
 
-<p-dialog [modal]="true" id="preview-dialog" [closable]="false" header="Preview" [(visible)]="isPreviewVisible"
-    [style]="{width: '50vw'}">
+<p-dialog [modal]="true" id="preview-dialog" [closable]="false" header="Notice of Takedown"
+    [(visible)]="isPreviewVisible" [style]="{width: '50vw'}">
     <p [innerText]="previewText"> </p>
-    <hr>
+    <div class="spacer-hr"></div>
     <div class="comment-section">
         <div class="form-group-row">
             <div class="form-group-row-col">
-                <label for="comment">Additional comments (Optional)</label>
+                <label for="comment">Add Additional Comments to Email (Optional)</label>
             </div>
             <div class="form-group-row-col">
                 <textarea #textarea rows="5" cols="30" class="full-width-text-field" pInputTextarea id="comment"
-                    name="comment"></textarea>
+                    name="comment" placeholder="Enter Additional Comment Here..."></textarea>
             </div>
         </div>
     </div>
-    <hr>
     <div class="actions">
-        <p-button label="Cancel" id="cancel-dialog-btn" [outlined]="true" (click)="onPreviewClose()"></p-button>
         <p-button label="Submit" id="submit-dialog-btn" (click)="onSubmit(textarea.value,textarea)"></p-button>
+        <p-button label="Cancel" id="cancel-dialog-btn" [outlined]="true" (click)="onPreviewClose()"></p-button>
     </div>
 </p-dialog>
 <p-button *ngIf="hideForm" label="Return Home" id="return-home-btn" (click)="onReturnHome()"></p-button>
diff --git a/frontend/src/app/features/components/compliance-notice/compliance-notice.component.scss b/frontend/src/app/features/components/compliance-notice/compliance-notice.component.scss
@@ -76,4 +76,13 @@
             }
         }
     }
+
+    .actions {
+        display: flex;
+        justify-content: end;
+
+        p-button:last-of-type {
+            margin-left: 8px;
+        }
+    }
 }
diff --git a/frontend/src/app/features/components/delisting-request/delisting-request.component.html b/frontend/src/app/features/components/delisting-request/delisting-request.component.html
@@ -8,7 +8,7 @@
             <label for="lgId">Request Initiated by</label>
         </div>
         <div class="form-group-row-col">
-            <p-dropdown [options]="initiatorsOptions" formControlName="lgId" [showClear]="true"
+            <p-dropdown [options]="initiatorsOptions" formControlName="lgId"
                 placeholder="Please Select Your Municipality..." id="lgId" name="lgId" [required]="true"></p-dropdown>
         </div>
         <div class="form-group-row-col validation-errors" *ngIf="!lgIdControl.pristine && lgIdControl.errors">
@@ -22,8 +22,8 @@
             <label for="platformId">Select Platform recipient</label>
         </div>
         <div class="form-group-row-col">
-            <p-dropdown [options]="platformOptions" formControlName="platformId" [showClear]="true"
-                placeholder="Please Select..." id="platformId" name="platformId" [required]="true"></p-dropdown>
+            <p-dropdown [options]="platformOptions" formControlName="platformId" placeholder="Please Select..."
+                id="platformId" name="platformId" [required]="true"></p-dropdown>
         </div>
         <div class="form-group-row-col validation-errors"
             *ngIf="!platformIdControl.pristine && platformIdControl.errors">
@@ -85,17 +85,16 @@
         </div>
     </div>
 
-    <button type="submit" id="form-preview-btn" pButton pRipple [disabled]="!myForm.valid" label="Review"
-        class="p-button-success"></button>
+    <p-button type="submit" label="Review" id="form-preview-btn" [disabled]="!myForm.valid"></p-button>
 </form>
 
-<p-dialog [modal]="true" id="preview-dialog" [closable]="false" header="Preview" [(visible)]="isPreviewVisible"
+<p-dialog [modal]="true" id="preview-dialog" [closable]="false" header="Takedown Request" [(visible)]="isPreviewVisible"
     [style]="{width: '50vw'}">
     <p [innerText]="previewText">
     </p>
     <div class="actions">
-        <p-button label="Cancel" id="cancel-dialog-btn" [outlined]="true" (click)="onPreviewClose()"></p-button>
         <p-button label="Submit" id="submit-dialog-btn" (click)="onSubmit()"></p-button>
+        <p-button label="Cancel" id="cancel-dialog-btn" [outlined]="true" (click)="onPreviewClose()"></p-button>
     </div>
 </p-dialog>
 <p-button *ngIf="hideForm" label="Return Home" id="return-home-btn" (click)="onReturnHome()"></p-button>
diff --git a/frontend/src/app/features/components/delisting-request/delisting-request.component.scss b/frontend/src/app/features/components/delisting-request/delisting-request.component.scss
@@ -76,4 +76,13 @@
             }
         }
     }
+
+    .actions {
+        display: flex;
+        justify-content: end;
+
+        p-button:last-of-type {
+            margin-left: 8px;
+        }
+    }
 }
diff --git a/frontend/src/app/features/components/delisting-request/delisting-request.component.ts b/frontend/src/app/features/components/delisting-request/delisting-request.component.ts
@@ -128,7 +128,7 @@ export class DelistingRequestComponent implements OnInit {
   }
 
   private prepareFormModel(form: FormGroup): DelistingRequest {
-    const model: DelistingRequest = form.value;
+    const model: DelistingRequest = Object.assign({}, form.value);
     model.ccList = form.value['ccList'].prototype === Array
       ? form.value
       : (form.value['ccList'] as string).split(',').filter(x => !!x).map(x => x.trim())

diff --git a/frontend/src/app/features/components/user-management/user-management.component.html b/frontend/src/app/features/components/user-management/user-management.component.html
@@ -1,12 +1,34 @@
 <div class="title extra-space-bottom">User Management</div>
 <div class="table-card-container">
-    <div class="form-group-row extra-space-bottom">
-        <div class="form-group-row-col">
-            <label for="platformId">Status</label>
+    <div class="search-filter-container extra-space-bottom">
+        <div class="form-row">
+            <div class="form-group-row-col">
+                <label for="platformId">Status</label>
+            </div>
+            <div class="form-group-row-col">
+                <p-dropdown [options]="statuses" [(ngModel)]="searchParams.searchStatus"
+                    (ngModelChange)="onSearchModelChanged()" placeholder="All" id="statusSearchId"
+                    name="statusSearchId"></p-dropdown>
+            </div>
+        </div>
+        <div class="form-row">
+            <div class="form-group-row-col">
+                <label for="platformId">Organization</label>
+            </div>
+            <div class="form-group-row-col">
+                <p-dropdown [options]="organizations" [(ngModel)]="searchParams.searchOrganization"
+                    (ngModelChange)="onSearchModelChanged()" placeholder="All" id="organizationSearchId"
+                    name="organizationSearchId"></p-dropdown>
+            </div>
         </div>
-        <div class="form-group-row-col">
-            <p-dropdown [options]="statuses" [(ngModel)]="currentStatus" (onChange)="onFilterChanged($event)"
-                placeholder="All" [showClear]="true" id="statusId" name="statusId"></p-dropdown>
+        <div class="form-row">
+            <div class="form-group-row-col">
+                <label for="platformId">Search</label>
+            </div>
+            <div class="form-group-row-col">
+                <input type="text" pInputText [(ngModel)]="searchParams.searchTerm" id="searchTerm" name="searchTerm"
+                    (ngModelChange)="onSearchModelChanged()" placeholder="Search.." />
+            </div>
         </div>
     </div>
     <div class="table-container">
@@ -38,9 +60,9 @@
                     <td>{{ accessRequest.organizationNm }}</td>
                     <td>
                         <p-button label="Approve" (click)="onApprovePopup(accessRequest)" class="table-small-btn"
-                            [outlined]="true" id="form-approve-btn"></p-button>
-                        <p-button label="Reject" (click)="onRejectPopup(accessRequest)" class="table-small-btn"
-                            id="form-reject-btn"></p-button>
+                            id="form-approve-btn"></p-button>
+                        <p-button label="Deny" [outlined]="true" (click)="onRejectPopup(accessRequest)"
+                            class="table-small-btn" id="form-reject-btn"></p-button>
                     </td>
                     <td>
                         <span
@@ -72,7 +94,7 @@
             </div>
             <div class="form-group-row-col">
                 <p-dropdown [options]="organizationTypes" appendTo="body" formControlName="userIdentityId"
-                    [showClear]="true" placeholder="Please Select..." id="userIdentityId" name="userIdentityId"
+                    placeholder="Please Select..." id="userIdentityId" name="userIdentityId"
                     [ngClass]="'full-width-text-field'" [required]="true"></p-dropdown>
             </div>
         </div>
@@ -82,9 +104,8 @@
             </div>
             <div class="form-group-row-col">
                 <p-dropdown [options]="organizations" appendTo="body" formControlName="representedByOrganizationId"
-                    [showClear]="true" placeholder="Please Select..." id="representedByOrganizationId"
-                    name="representedByOrganizationId" [ngClass]="'full-width-text-field'"
-                    [required]="true"></p-dropdown>
+                    placeholder="Please Select..." id="representedByOrganizationId" name="representedByOrganizationId"
+                    [ngClass]="'full-width-text-field'" [required]="true"></p-dropdown>
             </div>
         </div>
     </form>

diff --git a/frontend/src/app/features/components/user-management/user-management.component.scss b/frontend/src/app/features/components/user-management/user-management.component.scss
@@ -23,36 +23,45 @@
         border-radius: 4px;
         box-shadow: 0px 1px 5px 0px #00000033;
 
-        .form-group-row {
+        .search-filter-container {
             width: 100%;
+            display: flex;
+            justify-content: space-between;
+        }
+    }
 
-            label {
-                line-height: 26px;
-            }
+    .form-group-row {
+        width: 100%;
 
-            &.form-spacer {
-                padding-top: 0;
-                margin-top: -14px;
-            }
+        label {
+            line-height: 26px;
+        }
 
-            &.inline-block {
-                width: 50%;
-                display: inline-block;
+        &.form-spacer {
+            padding-top: 0;
+            margin-top: -14px;
+        }
 
-                &.left-block {
-                    padding-right: 12px;
-                }
+        &.inline-auto-size {
+            display: inline-block;
+        }
 
-                &.right-block {
-                    padding-left: 12px;
-                }
+        &.inline-block {
+            width: 50%;
+            display: inline-block;
 
+            &.left-block {
+                padding-right: 12px;
+            }
 
-                &:last-of-type {
-                    margin-right: 0;
-                }
+            &.right-block {
+                padding-left: 12px;
             }
 
+
+            &:last-of-type {
+                margin-right: 0;
+            }
         }
     }
 

diff --git a/frontend/src/app/features/components/user-management/user-management.component.ts b/frontend/src/app/features/components/user-management/user-management.component.ts
@@ -15,6 +15,7 @@ import { InputSwitchModule } from 'primeng/inputswitch';
 import { ConfirmDialogModule } from 'primeng/confirmdialog';
 import { ConfirmationService, MessageService } from 'primeng/api';
 import { UserDataService } from '../../../common/services/user-data.service';
+import { InputTextModule } from 'primeng/inputtext';
 
 @Component({
   selector: 'app-user-management',
@@ -30,6 +31,7 @@ import { UserDataService } from '../../../common/services/user-data.service';
     DateFormatPipe,
     InputSwitchModule,
     ConfirmDialogModule,
+    InputTextModule,
   ],
   providers: [ConfirmationService, MessageService],
   templateUrl: './user-management.component.html',
@@ -42,7 +44,12 @@ export class UserManagementComponent implements OnInit {
 
   accessRequests = new Array<AccessRequestTableItem>();
   currentPage!: PagingResponsePageInfo;
-  currentStatus = '';
+
+  searchParams = {
+    searchStatus: '',
+    searchOrganization: '',
+    searchTerm: '',
+  }
 
   showApprovePopup = false;
   showRejectPopup = false;
@@ -60,9 +67,8 @@ export class UserManagementComponent implements OnInit {
     this.initForm();
     this.initData();
   }
+  onSearchModelChanged(): void {
 
-  onFilterChanged(statusId: any): void {
-    console.log('statusId', statusId);
   }
 
   onApprovePopup(accessRequest: AccessRequestTableItem): void {