Merge pull request #92 from scholarsportal/nana-dev

Fix downloading of edited dataset
scholarsportal · Jul 30, 2024 · 75d7d33 · 75d7d33
2 parents 32c4fa0 + af113ca
commit 75d7d33
Show file tree

Hide file tree

Showing 21 changed files with 348 additions and 179 deletions.
diff --git a/src/app/app.component.css b/src/app/app.component.css
@@ -38,6 +38,7 @@
   height: 100vh;
 }
 
+
 @keyframes gradient {
   0% {
     background-position: 0 50%;

diff --git a/src/app/components/body/body.component.ts b/src/app/components/body/body.component.ts
@@ -34,7 +34,7 @@ import { TableComponent } from './variables/data/table/table.component';
   ],
   templateUrl: './body.component.html',
   styleUrl: './body.component.css',
-  changeDetection: ChangeDetectionStrategy.OnPush
+  //changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class BodyComponent {
   store = inject(Store);

diff --git a/src/app/components/body/cross-tabulation/cross-tabulation.component.css b/src/app/components/body/cross-tabulation/cross-tabulation.component.css
@@ -21,5 +21,5 @@
 }
 
 .preload-text {
-  @apply transition-all duration-75 mx-auto text-center animate-pulse;
+  @apply transition-all duration-75 mx-auto text-base animate-pulse;
 }
diff --git a/src/app/components/body/cross-tabulation/cross-tabulation.component.html b/src/app/components/body/cross-tabulation/cross-tabulation.component.html
@@ -1,4 +1,4 @@
-<div class="min-h-3/4">
+<div class="h-dvh">
 
   <dct-variable-selection class="" />
 
@@ -79,29 +79,33 @@
     }
   } @else {
     <div
-      class="h-full mx-auto my-auto"
+      class="h-full mx-5 md:mx-auto my-auto"
     >
 
       @if (!isFetching()) {
         @if (!hasData()) {
-          <h3 class="text-center mx-auto">
-            No Data! Start adding variables to generate your table
+          <h3 class="mx-auto text-base">
+            No Data! Start adding variables to generate your table.
           </h3>
+
         } @else if (hasData() && !hasRowOrColumn()) {
-          <h3 class="text-center mx-auto">
+          <h3 class="mx-auto text-base">
             One more step. Set your rows and/or columns.
           </h3>
+
         }
       } @else if (isFetching()) {
         @if (loadingStatus === 'init') {
           <h3 class="preload-text">
             Loading dataset ...
           </h3>
+
         } @else if (loadingStatus === 'delayed') {
           <h3 class="preload-text">
             Still loading ...
           </h3>
-          <h4 class="text-base mx-auto text-center">One moment please</h4>
+          <h4 class="text-base mx-auto">One moment please</h4>
+
         }
       }
     </div>

diff --git a/src/app/components/body/variables/data/data.component.ts b/src/app/components/body/variables/data/data.component.ts
@@ -16,7 +16,7 @@ import { TableComponent } from './table/table.component';
   ],
   templateUrl: './data.component.html',
   styleUrl: './data.component.css',
-  changeDetection: ChangeDetectionStrategy.OnPush
+  //changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DataComponent {
   groups = input.required<{ [variableID: string]: VariableGroup }>();

diff --git a/src/app/components/body/variables/data/table-menu/table-menu.component.html b/src/app/components/body/variables/data/table-menu/table-menu.component.html
@@ -1,5 +1,28 @@
-<div class="flex flex-row px-5">
-  <div class="w-5">
+<div class="flex w-full px-5">
+
+  <div [ngClass]="{'hide-toast': !saved, 'show-toast': saved}" class="toast toast-top toast-end">
+    <div class="alert rounded alert-success">
+      <span class="text-base-100">Changes applied!</span>
+      <button (click)="closeLoadedToast()">
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
+        </svg> 
+      </button>           
+    </div>
+  </div>
+
+  <div [ngClass]="{'hide-toast': !error, 'show-toast': error}" class="toast toast-top toast-end">
+    <div class="alert rounded alert-error">
+      <span class="text-base-100">No group or weight option selected</span>
+      <button (click)="closeLoadedToast()">
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
+        </svg> 
+      </button>           
+    </div>
+  </div>
+
+  <div class="flex-none w-5">
     <svg
       class="my-6"
       fill="none"
@@ -16,79 +39,83 @@
       />
     </svg>
   </div>
-  <label class="multiselect self-center ml-1" for="multiselect-nav">
-    <span class="sr-only">Add Variable to Group</span>
-    <p-multiSelect
-      (onChange)="changeGroup($event)"
-      [ngModelOptions]="{standalone: true}"
-      [ngModel]="selectedGroups"
-      [options]="allGroupsArray()"
-      filter="false"
-      id="multiselect-nav"
-      placeholder="Add Variable to Group"
-      showHeader="false"
-      styleClass="select select-bordered border-slate-300 max-w-64"
-    >
-      <ng-template let-value pTemplate="selectedItems">
-          <span *ngIf="selectedGroups.length > 0;
-            then allSelectedTemplate;
-            else elseTemplate"></span>
-        <ng-template #allSelectedTemplate>
-          @for (option of selectedGroups; track $index) {
-            <span *ngIf="$index == 0" class="">
-                {{ allGroups()[option].labl || 'no label' }}
-              </span>
-            <span *ngIf="$index > 0" class="-ml-1">
-                , {{ allGroups()[option].labl || 'no label' }}
-              </span>
-          }
-        </ng-template>
-        <ng-template #elseTemplate>
-          <ng-template [ngIfElse]="defaultTemplate" [ngIf]="value?.length ?? 0 > 0"
-          >{{ value?.length ?? 0 }} selected
+  <div  class="flex-none self-center">
+    <label class="multiselect ml-1" for="multiselect-nav">
+      <span class="sr-only">Add to group</span>
+      <p-multiSelect
+        (onChange)="changeGroup($event)"
+        [ngModelOptions]="{standalone: true}"
+        [ngModel]="selectedGroups"
+        [options]="allGroupsArray()"
+        filter="false"
+        id="multiselect-nav"
+        placeholder="Add Variable to Group"
+        showHeader="false"
+        styleClass="select select-bordered border-slate-300 max-w-64"
+      >
+        <ng-template let-value pTemplate="selectedItems">
+            <span *ngIf="selectedGroups.length > 0;
+              then allSelectedTemplate;
+              else elseTemplate"></span>
+          <ng-template #allSelectedTemplate>
+            @for (option of selectedGroups; track $index) {
+              <span *ngIf="$index == 0" class="">
+                  {{ allGroups()[option].labl || 'no label' }}
+                </span>
+              <span *ngIf="$index > 0" class="-ml-1">
+                  , {{ allGroups()[option].labl || 'no label' }}
+                </span>
+            }
+          </ng-template>
+          <ng-template #elseTemplate>
+            <ng-template [ngIfElse]="defaultTemplate" [ngIf]="value?.length ?? 0 > 0"
+            >{{ value?.length ?? 0 }} selected
+            </ng-template>
+            <ng-template #defaultTemplate>Add to Group</ng-template>
           </ng-template>
-          <ng-template #defaultTemplate>Add Variable to Group</ng-template>
         </ng-template>
-      </ng-template>
-      <ng-template let-value pTemplate="item">
-        <div class="">
-          <input *ngIf="!selectedGroups.includes(allGroups()[value]['@_ID'])" type="checkbox" />
-          <input *ngIf="selectedGroups.includes(allGroups()[value]['@_ID'])" checked type="checkbox" />
-          {{ allGroups()[value].labl || 'no label' }}
-        </div>
-      </ng-template>
-      <ng-template pTemplate="dropdownicon"></ng-template>
-    </p-multiSelect>
-  </label>
-
-  <label class="self-center ml-1">
-    <span class="sr-only">
-      Assign Weight
-    </span>
-    <select
-      (change)="onSelectedWeightChange($event.target)"
-      class="select select-bordered border-slate-300"
-      id="assign-weight"
-      name="assign-weight"
-    >
-      <option disabled hidden selected value="">Assign Weight</option>
-      <option [value]="'remove'">Remove Weight</option>
-      @for (weightValue of weights() | keyvalue; track $index) {
-        <option [value]="weightValue.key">
-          {{ weightValue.value }}
-        </option>
-      }
-    </select>
-  </label>
-  <button (click)="onApplyChanges()" class="ml-1 btn btn-primary self-center">
-    Apply
-  </button>
-
+        <ng-template let-value pTemplate="item">
+          <div class="">
+            <input *ngIf="!selectedGroups.includes(allGroups()[value]['@_ID'])" type="checkbox" />
+            <input *ngIf="selectedGroups.includes(allGroups()[value]['@_ID'])" checked type="checkbox" />
+            {{ allGroups()[value].labl || 'no label' }}
+          </div>
+        </ng-template>
+        <ng-template pTemplate="dropdownicon"></ng-template>
+      </p-multiSelect>
+    </label>
+  </div>
+  <div class="flex-none self-center">
+    <label class="self-center ml-1">
+      <span class="sr-only">
+        Assign Weight
+      </span>
+      <select
+        (change)="onSelectedWeightChange($event.target)"
+        class="select select-bordered border-slate-300"
+        id="assign-weight"
+        name="assign-weight"
+      >
+        <option disabled hidden selected value="">Assign Weight</option>
+        <option [value]="'remove'">Remove Weight</option>
+        @for (weightValue of weights() | keyvalue; track $index) {
+          <option [value]="weightValue.key">
+            {{ weightValue.value }}
+          </option>
+        }
+      </select>
+    </label>
+  </div>
+  <div class="flex-none self-center">
+    <button (click)="onApplyChanges()" class="ml-1 btn btn-primary self-center">
+      Apply
+    </button>
+  </div>
   @if (groupID() !== 'ALL'; ) {
-    <div class="border-l mx-4"></div>
+  <div class="flex-none self-center border-l mx-3">
     <button
       (click)="onRemoveFromGroup(groupID())"
-      class="btn btn-outline justify-end self-center"
+      class="btn btn-outline justify-end self-center mx-3"
     >
       <svg
         xmlns="http://www.w3.org/2000/svg"
@@ -104,7 +131,19 @@
           d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m6.75 12H9m1.5-12H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z"
         />
       </svg>
-      <span>Remove from group</span>
+      <span>Remove</span>
     </button>
+  </div>
   }
-</div>
+  <div class="self-center w-full">
+    @if (selectedVariables().length > 0) {
+    <dct-bulk-edit-modal
+        [selectedVariables]="selectedVariables()"
+        class="float-right"
+        ngClass="{{
+          selectedVariables().length > 1 ? 'inline-flex' : 'hidden'
+        }}"
+    />
+    }
+  </div>
+</div>
diff --git a/src/app/components/body/variables/data/table-menu/table-menu.component.ts b/src/app/components/body/variables/data/table-menu/table-menu.component.ts
@@ -9,6 +9,7 @@ import { MultiselectDropdownComponent } from '../table/multiselect-dropdown/mult
 import { FormsModule } from '@angular/forms';
 import { DropdownModule } from 'primeng/dropdown';
 import { XmlManipulationActions } from '../../../../../new.state/xml/xml.actions';
+import { BulkEditModalComponent } from '../table/bulk-edit-modal/bulk-edit-modal.component';
 // import { Variable, VariableGroup } from 'src/app/state/interface';
 // import {
 //   bulkChangeGroupsAndWeight,
@@ -18,7 +19,7 @@ import { XmlManipulationActions } from '../../../../../new.state/xml/xml.actions
 @Component({
   selector: 'dct-table-menu',
   standalone: true,
-  imports: [CommonModule, MultiselectDropdownComponent, MultiSelectModule, DropdownModule, ChipModule, FormsModule],
+  imports: [CommonModule, MultiselectDropdownComponent, MultiSelectModule, DropdownModule, ChipModule, FormsModule, BulkEditModalComponent],
   templateUrl: './table-menu.component.html',
   styleUrl: './table-menu.component.css'
 })
@@ -33,6 +34,8 @@ export class TableMenuComponent {
   allGroupsArray = computed(() => {
     return Object.keys(this.allGroups());
   });
+  saved: boolean = false;
+  error: boolean = false;
 
   constructor() {
     effect(() => {
@@ -56,12 +59,30 @@ export class TableMenuComponent {
       this.selectedGroups = change.value;
     }
   }
-
+    
   onApplyChanges() {
-    this.store.dispatch(XmlManipulationActions.bulkSaveVariableInfo({
-      variableIDs: this.selectedVariables(),
-      assignedWeight: this.selectedWeight,
-      groups: this.selectedGroups
-    }));
+    if (this.selectedGroups.length > 0 || this.selectedWeight) 
+      {
+        this.store.dispatch(XmlManipulationActions.bulkSaveVariableInfo({
+          variableIDs: this.selectedVariables(),
+          assignedWeight: this.selectedWeight,
+          groups: this.selectedGroups
+        }));
+        this.saved = true;
+        setTimeout(() => {
+          this.closeLoadedToast();
+        }, 3000);
+      } else {
+        this.error = true;
+        setTimeout(() => {
+          this.closeLoadedToast();
+        }, 3000);
+      }
+  }
+
+  closeLoadedToast() {
+    this.saved = false;
+    this.error = false;
   }
+
 }
diff --git a/src/app/components/body/variables/data/table/bulk-edit-modal/bulk-edit-modal.component.html b/src/app/components/body/variables/data/table/bulk-edit-modal/bulk-edit-modal.component.html
@@ -1,4 +1,4 @@
-<button (click)="openModal()" class="btn btn-primary float-right btn-sm">
+<button (click)="openModal()" class="btn border border-slate-300 bg-transparent">
   Bulk Edit
 </button>
 <dialog #bulkEdit class="modal modal-bottom sm:modal-middle font-normal">
@@ -137,3 +137,13 @@ <h2 class="text-2xl">Bulk Edit Variables</h2>
     </div>
   </div>
 </dialog>
+<div [ngClass]="{'hide-toast': !saved, 'show-toast': saved}" class="toast toast-top toast-end">
+  <div class="alert rounded alert-success">
+    <span class="text-base-100">Changes applied!</span>
+    <button (click)="closeLoadedToast()">
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
+      </svg> 
+    </button>           
+  </div>
+</div>
diff --git a/...pp/components/body/variables/data/table/bulk-edit-modal/bulk-edit-modal.component.spec.ts b/...pp/components/body/variables/data/table/bulk-edit-modal/bulk-edit-modal.component.spec.ts
@@ -1,5 +1,4 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-
 import { BulkEditModalComponent } from './bulk-edit-modal.component';
 import { MockStore, provideMockStore } from '@ngrx/store/testing';
 import { globalInitialState } from 'src/app/new.state/xml/xml.interface';
-Original file line number
+Diff line change
@@ Expand Up / @@ -38,6 +38,7 @@ @@
       height: 100vh;
     }
     @keyframes gradient {
 % {
         background-position: 0 50%;
@@ Expand Down @@