Merge branch 'master' of https://dev.azure.com/HackKu/HackKu%202020/_git/frontend

src/app/components/editor/database/database.component.ts

@@ -2,7 +2,7 @@ import {Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild} f
 import HostRecord from '../../../structures/HostRecord';
 import {ApiService} from '../../../service/api.service';
 import {Observable} from 'rxjs';
-import {AlertController, ModalController} from '@ionic/angular';
+import {AlertController, LoadingController, ModalController} from '@ionic/angular';
 import {ColumnsComponent} from './columns/columns.component';
 import {AgGridAngular} from 'ag-grid-angular';
 
@@ -27,6 +27,7 @@ export class DatabaseComponent implements OnInit {
       protected api: ApiService,
       protected modals: ModalController,
       protected alerts: AlertController,
+      protected loader: LoadingController,
   ) { }
 
   title = 'app';
@@ -34,10 +35,14 @@ export class DatabaseComponent implements OnInit {
   rowData = [];
 
   ngOnInit() {
-    this.getInitObservable().subscribe(() => {
+    this.loader.create({message: 'Loading database...'}).then(loader => {
-      this.getColumnLoadObservable().subscribe(() => {
+      loader.present().then(() => {
-        this.getDataLoadObservable().subscribe(() => {
+        this.getInitObservable().subscribe(() => {
-
+          this.getColumnLoadObservable().subscribe(() => {
+            this.getDataLoadObservable().subscribe(() => {
+              loader.dismiss();
+            });
+          });
         });
       });
     });
@@ -86,6 +91,7 @@ export class DatabaseComponent implements OnInit {
   onInsertRow() {
     this.rowData.push({});
     this.agGridElement.api.setRowData(this.rowData);
+    this.dirty = true;
   }
 
   async onRemoveRow() {
@@ -107,6 +113,7 @@ export class DatabaseComponent implements OnInit {
             this.rowData = newRows;
             this.agGridElement.api.setRowData(this.rowData);
             this.lastClickRow = -1;
+            this.dirty = true;
           },
         }
       ],
@@ -153,11 +160,16 @@ export class DatabaseComponent implements OnInit {
   }
 
   onSyncRecords() {
-    this.api.post(`/db/${this.hostRecord.PageId}/${this.hostRecord.UUID}/set/${this.hostRecord.Value.Value}/data`, this.rowData)
+    this.loader.create({message: 'Syncing the database...'}).then(loader => {
-        .subscribe(res => {
+      loader.present().then(() => {
-      this.rowData = res.data.map(x => x.RowData);
+        this.api.post(`/db/${this.hostRecord.PageId}/${this.hostRecord.UUID}/set/${this.hostRecord.Value.Value}/data`, this.rowData)
-      this.agGridElement.api.setRowData(this.rowData);
+            .subscribe(res => {
-      this.dirty = false;
+          this.rowData = res.data.map(x => x.RowData);
+          this.agGridElement.api.setRowData(this.rowData);
+          this.dirty = false;
+          loader.dismiss();
+        });
+      });
     });
   }
 

src/app/pages/editor/editor.page.ts

@@ -3,7 +3,7 @@ import HostRecord from '../../structures/HostRecord';
 import PageRecord from '../../structures/PageRecord';
 import {PageService} from '../../service/page.service';
 import {ActivatedRoute, Router} from '@angular/router';
-import {PopoverController} from '@ionic/angular';
+import {LoadingController, PopoverController} from '@ionic/angular';
 import {NodePickerComponent} from '../../components/editor/node-picker/node-picker.component';
 
 @Component({
@@ -24,6 +24,7 @@ export class EditorPage implements OnInit {
     protected route: ActivatedRoute,
     protected router: Router,
     protected popover: PopoverController,
+    protected loader: LoadingController,
   ) {
     this.route.params.subscribe(params => {
       this.pageId = params.id;
@@ -174,15 +175,20 @@ export class EditorPage implements OnInit {
   }
 
   onSaveClick() {
-    this.pageRecord.Name = this.titleBar.el.innerText.trim();
+    this.loader.create({message: 'Saving changes...'}).then(loader => {
-
+      loader.present().then(() => {
-    // First, save the page record itself
+        this.pageRecord.Name = this.titleBar.el.innerText.trim();
-    this.pages.save(this.pageRecord).subscribe(pageRecord => {
+
-      this.pageRecord = pageRecord;
+        // First, save the page record itself
-
+        this.pages.save(this.pageRecord).subscribe(pageRecord => {
-      // Now, save the nodes
+          this.pageRecord = pageRecord;
-      this.pages.save_nodes(pageRecord, this.hostRecords).subscribe(result => {
+
-        this.hostRecords = result;
+          // Now, save the nodes
+          this.pages.save_nodes(pageRecord, this.hostRecords).subscribe(result => {
+            this.hostRecords = result;
+            loader.dismiss();
+          });
+        });
       });
     });
   }