Lots of toasts for user interactions

src/app/app.component.css

@@ -38,6 +38,7 @@
   height: 100vh;
 }
 
+
 @keyframes gradient {
   0% {
     background-position: 0 50%;

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);

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;
 }

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>

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 }>();

src/app/components/body/variables/data/table-menu/table-menu.component.html

@@ -1,4 +1,27 @@
 <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"

src/app/components/body/variables/data/table-menu/table-menu.component.ts

@@ -34,6 +34,8 @@ export class TableMenuComponent {
   allGroupsArray = computed(() => {
     return Object.keys(this.allGroups());
   });
+  saved: boolean = false;
+  error: boolean = false;
 
   constructor() {
     effect(() => {
@@ -57,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;
   }
+
 }

src/app/components/body/variables/data/table/bulk-edit-modal/bulk-edit-modal.component.html

@@ -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>

src/app/components/body/variables/data/table/bulk-edit-modal/bulk-edit-modal.component.ts

@@ -14,7 +14,7 @@ import { XmlManipulationActions } from '../../../../../../new.state/xml/xml.acti
 export class BulkEditModalComponent {
   @ViewChild('bulkEdit') bulkEditModalElement?: ElementRef;
   selectedVariables = input.required<string[]>();
-
+  saved: boolean = false;
   // @Input() selected!: Variable[];
   variableForm = new FormGroup({
     label: new FormControl(''),
@@ -53,6 +53,20 @@ export class BulkEditModalComponent {
       variableIDs: this.selectedVariables(),
       newVariableValue
     }));
+
+    setTimeout(() => {
+      this.handleCancel();
+      this.saved = true;
+      setTimeout(() => {
+        this.closeLoadedToast();
+      }, 3000);
+    }, 500);
+
+
+  }
+
+  closeLoadedToast() {
+    this.saved = false;
   }
 
   handleCancel() {

src/app/components/body/variables/data/table/modal/edit/edit.component.ts

@@ -54,6 +54,8 @@ export class EditComponent {
     isWeight: new FormControl(false),
     assignedWeight: new FormControl('')
   });
+  saved: boolean = false;
+  emitToast = output();
 
   constructor() {
     effect(() => {
@@ -93,5 +95,10 @@ export class EditComponent {
       groups: this.variableGroupsPlaceholder,
       newVariableValue
     }));
+    this.emitToast.emit();
+  }
+
+  closeLoadedToast() {
+    this.saved = false;
   }
 }

src/app/components/body/variables/data/table/modal/modal.component.html

@@ -3,6 +3,16 @@
   class="modal modal-bottom sm:modal-middle"
   id="variableModal"
 >
+  <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 class="modal-box">
     <dct-modal-header
       (closeVariableModal)="close()"
@@ -30,6 +40,7 @@
         ></dct-chart>
       } @else if (modalMode() === 'edit') {
         <dct-edit
+          (emitToast)="showToast()"
           [weights]="allWeights()"
           [form]="variableFormData()"
           [variableID]="variableID()"
@@ -43,4 +54,4 @@
       class="flex flex-col w-full pt-2"
     ></dct-modal-footer>
   </div>
-</dialog>
+</dialog>

src/app/components/body/variables/data/table/modal/modal.component.ts

@@ -58,6 +58,7 @@ export class ModalComponent {
   chart = this.store.selectSignal(selectOpenVariableChart);
   chartTable = this.store.selectSignal(selectOpenVariableChartTable);
   sumStats = this.store.selectSignal(selectOpenVariableSummaryStatistics);
+  saved: boolean = false;
 
   open() {
     const modal = this.variableModal?.nativeElement as HTMLDialogElement;
@@ -70,6 +71,17 @@ export class ModalComponent {
     // this.store.dispatch(closeVariableModal());
   }
 
+  closeLoadedToast() {
+    this.saved = false;
+  }
+
+  showToast() {
+    this.saved = true;
+    setTimeout(() => {
+      this.closeLoadedToast();
+    }, 3000);
+  }
+
   // Listen for escape and dispatch close action
   @HostListener('document:keydown.escape', ['$event'])
   onKeyDownHandler(event: KeyboardEvent) {

src/app/components/body/variables/data/table/table.component.ts

@@ -16,7 +16,7 @@ import { TableMenuComponent } from '../table-menu/table-menu.component';
   templateUrl: './table.component.html',
   styleUrls: ['./table.component.css'],
   standalone: true,
-  changeDetection: ChangeDetectionStrategy.OnPush,
+  //changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
     VariableOptionsButtonComponent,
     KeyValuePipe,

src/app/components/header/header.component.css

@@ -1,6 +0,0 @@
-.hide-toast {
-  @apply scale-50 opacity-0 duration-200 invisible;
-}
-.show-toast {
-  @apply scale-100 opacity-100 duration-200 visible;
-}

src/app/components/import/file-upload-button/file-upload-button.component.html

@@ -1,5 +1,5 @@
 <label class="">
-  <span class="flex pb-5">
+  <span class="flex pb-5 text-base">
     <svg
       xmlns="http://www.w3.org/2000/svg"
       fill="none"