Merge pull request #75 from GSI-Xapiens-CSIRO/feat/xapiens-to-main

Feat/xapiens to main

webgui/webapp/src/app/app.component.html

@@ -72,7 +72,7 @@ <h1><a href="/login">DATA PORTAL</a></h1>
   </div>
 </div>
 <div class="bui-footer">
-  <p class="bui-byline text-white" style="color: white">
+  <p class="bui-byline font-bold text-primary-60" style="font-weight: 700">
     BGSi Data Portal &#64;2024 | Kementerian Kesehatan Indonesia
   </p>
 </div>

webgui/webapp/src/app/app.component.scss

@@ -5,7 +5,7 @@
 .bui-header-wrapper {
   overflow: hidden;
   background: url(/assets/images/header.png) no-repeat right top;
-  background-size: contain;
+  background-size: cover;
 
   @media (max-width: 1024px) {
     background-size: cover;
@@ -144,7 +144,8 @@
 .bui-footer {
   height: 10%;
   overflow: hidden;
-  background: #2f2f2f url(/assets/images/bg02.jpg) repeat;
+  // background: #2f2f2f url(/assets/images/bg02.jpg) repeat;
+  background-color: theme("colors.primary-10");
   padding: 50px 1px;
   text-align: center;
   color: #6f6f6f;
@@ -179,15 +180,13 @@
   text-transform: uppercase;
   font-weight: 400;
   font-size: 0.9em;
-  color: #6f6f6f;
 }
 
 .bui-byline {
   position: relative;
   top: -2em;
   font-weight: 500;
   font-size: 1em;
-  color: #8e8e8e;
   font: 16px Arial;
 }
 
@@ -206,6 +205,10 @@
   transition: transform 0.4s;
 }
 
+.bui-menu-items .active a {
+  color: theme("colors.warning-10");
+}
+
 .bui-menu-item.active {
   transform: scale(1.2);
   transition: transform 0.4s;

webgui/webapp/src/app/pages/admin-page/admin-page.component.ts

@@ -156,22 +156,23 @@ export class AdminPageComponent implements OnInit {
     });
   }
 
+  async openDialog(row: any, res: any) {}
+
   async userClick(row: any) {
     const { AdminUserClickDialogComponent } = await import(
       'src/app/pages/admin-page/components/admin-user-click-dialog/admin-user-click-dialog.component'
     );
+
     const dialog = this.dg.open(AdminUserClickDialogComponent, {
       data: {
+        sub: row.Sub,
         name: `${row['First name']} ${row['Last name']}`,
         email: row.Email,
         firstName: `${row['First name']}`,
         lastName: `${row['Last name']}`,
-        // TODO: Add more user attributes
-        sizeOfData: 0,
-        countOfQueries: 0,
-        costEstimation: 0,
       },
     });
+
     dialog.afterClosed().subscribe((data) => {
       if (_.get(data, 'reload', false)) {
         this.resetPagination();
@@ -256,6 +257,7 @@ export class AdminPageComponent implements OnInit {
           this.usersTableDataSource = _.map(
             _.get(response, 'users', []),
             (user: any) => ({
+              Sub: _.get(_.find(user.Attributes, { Name: 'sub' }), 'Value', ''),
               Email: _.get(
                 _.find(user.Attributes, { Name: 'email' }),
                 'Value',

webgui/webapp/src/app/pages/admin-page/components/admin-create-user-dialog/admin-create-user-dialog.component.html

@@ -43,13 +43,13 @@ <h1 mat-dialog-title>Create New User</h1>
           <div class="font-semibold text-lg">Quota</div>
           <mat-form-field>
             <mat-label>Size of Data</mat-label>
-            <input matInput type="number" formControlName="sizeOfData" />
+            <input matInput type="number" formControlName="quotaSize" />
             <span matTextSuffix>GB</span>
             <mat-error>Field is required</mat-error>
           </mat-form-field>
           <mat-form-field>
             <mat-label>Count of Queries</mat-label>
-            <input matInput type="number" formControlName="countOfQueries" />
+            <input matInput type="number" formControlName="quotaQueryCount" />
             <span matTextSuffix>Count</span>
             <mat-error>Field is required</mat-error>
           </mat-form-field>
@@ -106,7 +106,7 @@ <h1 mat-dialog-title>Create New User</h1>
         mat-raised-button
         color="primary"
         (click)="createUser()"
-        [disabled]="newUserForm.invalid"
+        [disabled]="newUserForm.invalid || !costEstimation"
       >
         Create User
       </button>

webgui/webapp/src/app/pages/admin-page/components/admin-create-user-dialog/admin-create-user-dialog.component.ts

@@ -31,6 +31,8 @@ import { MatInputModule } from '@angular/material/input';
 import { SpinnerService } from 'src/app/services/spinner.service';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { AwsService } from 'src/app/services/aws.service';
+import { gigabytesToBytes } from 'src/app/utils/file';
+import { UserQuotaService } from 'src/app/services/userquota.service';
 
 @Component({
   selector: 'app-admin-create-user-dialog',
@@ -69,15 +71,16 @@ export class AdminCreateUserComponent implements OnInit {
     private adminServ: AdminService,
     private sb: MatSnackBar,
     private aws: AwsService,
+    private uq: UserQuotaService,
   ) {
     this.newUserForm = this.fb.group({
       firstName: ['', Validators.required],
       lastName: ['', Validators.required],
       email: ['', [Validators.required, Validators.email]],
       administrators: [false],
       // Quota
-      sizeOfData: ['', [Validators.required, Validators.min(0)]],
-      countOfQueries: ['', [Validators.required, Validators.min(0)]],
+      quotaSize: ['', [Validators.required, Validators.min(0)]],
+      quotaQueryCount: ['', [Validators.required, Validators.min(0)]],
     });
   }
 
@@ -89,11 +92,11 @@ export class AdminCreateUserComponent implements OnInit {
     this.newUserForm.valueChanges
       .pipe(debounceTime(400), distinctUntilChanged())
       .subscribe((values) => {
-        if (values.countOfQueries && values.sizeOfData) {
+        if (values.quotaQueryCount && values.quotaSize) {
           this.aws
             .calculateQuotaEstimationPerMonth(
-              values.countOfQueries,
-              values.sizeOfData,
+              values.quotaQueryCount,
+              values.quotaSize,
             )
 
             .subscribe((res) => {
@@ -149,8 +152,9 @@ export class AdminCreateUserComponent implements OnInit {
       .subscribe((response) => {
         //api response always null
         this.ss.end();
-
         if (response) {
+          this.addUserQuota(response.uid);
+
           this.newUserForm.reset();
           this.sb.open('User created successfully!', 'Okay', {
             duration: 60000,
@@ -160,6 +164,17 @@ export class AdminCreateUserComponent implements OnInit {
       });
   }
 
+  addUserQuota(sub: string): void {
+    this.uq
+      .upsertUserQuota(sub, this.costEstimation, {
+        quotaSize: gigabytesToBytes(this.newUserForm.value.quotaSize),
+        quotaQueryCount: this.newUserForm.value.quotaQueryCount,
+        usageSize: 0,
+        usageCount: 0,
+      })
+      .pipe(catchError(() => of(null)));
+  }
+
   updateUserRole(email: string, isAdmin: boolean): void {
     this.as
       .updateUsersGroups(email, { administrators: isAdmin })

webgui/webapp/src/app/pages/admin-page/components/admin-user-click-dialog/admin-user-click-dialog.component.html

@@ -3,7 +3,7 @@ <h1 mat-dialog-title>Update {{ data.name }}</h1>
 
   <app-component-spinner [loading]="loading"></app-component-spinner>
   <div mat-dialog-content>
-    <div class="flex gap-5">
+    <div class="flex gap-5" [formGroup]="form">
       <div class="flex flex-col gap-2 w-1/2">
         <div class="font-semibold text-lg">User Info</div>
 
@@ -42,7 +42,7 @@ <h1 mat-dialog-title>Update {{ data.name }}</h1>
             <mat-error>Valid email is required</mat-error>
           </mat-form-field>
         </div>
-        <div class="flex flex-row gap-2" [formGroup]="form">
+        <div class="flex flex-row gap-2">
           <label for="Role Group">Role Access: </label>
           <div class="flex flex-1 flex-col">
             <mat-checkbox
@@ -73,27 +73,20 @@ <h1 mat-dialog-title>Update {{ data.name }}</h1>
         <div class="font-semibold text-lg">Quota</div>
         <mat-form-field>
           <mat-label>Size of Data</mat-label>
-          <input disabled matInput type="number" [value]="data.sizeOfData" />
+          <input matInput type="number" formControlName="quotaSize" />
           <span matTextSuffix>GB</span>
           <mat-error>Field is required</mat-error>
         </mat-form-field>
         <mat-form-field>
           <mat-label>Count of Queries</mat-label>
-          <input
-            disabled
-            matInput
-            type="number"
-            [value]="data.countOfQueries"
-          />
+          <input matInput type="number" formControlName="quotaQueryCount" />
           <span matTextSuffix>Count</span>
           <mat-error>Field is required</mat-error>
         </mat-form-field>
 
         <div class="flex space-x-2">
           <span>Estimated Cost* : </span>
-          <span class="font font-semibold"
-            >${{ data.costEstimation }} / Month</span
-          >
+          <span class="font font-semibold">${{ costEstimation }} / Month</span>
         </div>
 
         <div class="text-red-500 text-sm flex space-x-2">
@@ -129,6 +122,7 @@ <h1 mat-dialog-title>Update {{ data.name }}</h1>
         mat-raised-button
         color="primary"
         (click)="done()"
+        [disabled]="form.invalid || !costEstimation"
       >
         Update
       </button>