Add offline cachine for file group elements and contents (not files, though)

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

@@ -1,4 +1,4 @@
-<div class="database-wrapper">
+<div class="database-wrapper" *ngIf="!notAvailableOffline">
   <ion-toolbar>
     <ion-input
             [readonly]="readonly"
@@ -25,3 +25,7 @@
     ></ag-grid-angular>
   </div>
 </div>
+
+<div class="database-wrapper not-available" *ngIf="notAvailableOffline">
+  Sorry, this database is not available offline yet.
+</div>

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

@@ -1,4 +1,11 @@
 div.database-wrapper {
   border: 2px solid #8c8c8c;
   border-radius: 3px;
+
+  &.not-available {
+    height: 600px;
+    text-align: center;
+    padding-top: 100px;
+    color: #494949;
+  }
 }

src/app/components/editor/files/files.component.html

@@ -1,4 +1,4 @@
-<div class="files-wrapper">
+<div class="files-wrapper" *ngIf="!notAvailableOffline">
     <div class="new-uploads" style="margin: 20px;" *ngIf="!readonly">
         <form #uploadForm [action]="getApiSubmit()" enctype="multipart/form-data" method="post">
             <input style="margin-top: 10px;" type="file" id="file" name="uploaded_file">
@@ -21,3 +21,6 @@
         </ion-grid>
     </div>
 </div>
+<div class="files-wrapper not-available" *ngIf="notAvailableOffline">
+    Sorry, this file group is not available offline yet.
+</div>

src/app/components/editor/files/files.component.scss

@@ -2,4 +2,11 @@ div.files-wrapper {
   border: 2px solid #8c8c8c;
   border-radius: 3px;
   margin-top: 15px;
+
+  &.not-available {
+    height: 150px;
+    text-align: center;
+    padding-top: 40px;
+    color: #494949;
+  }
 }

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

@@ -1,8 +1,6 @@
-import {Component, ElementRef, EventEmitter, Inject, Input, OnInit, Output, ViewChild} from '@angular/core';
-import HostRecord from '../../../structures/HostRecord';
-import {ApiService} from '../../../service/api.service';
+import {Component, ElementRef, Inject, Input, OnInit, ViewChild} from '@angular/core';
+import {ApiService, ResourceNotAvailableOfflineError} from '../../../service/api.service';
 import {AlertController} from '@ionic/angular';
-import {Observable} from 'rxjs';
 import { APP_BASE_HREF } from '@angular/common';
 import {EditorService} from '../../../service/editor.service';
 import {EditorNodeContract} from '../../nodes/EditorNode.contract';
@@ -15,16 +13,12 @@ import {EditorNodeContract} from '../../nodes/EditorNode.contract';
 export class FilesComponent extends EditorNodeContract implements OnInit {
   @Input() nodeId: string;
   @ViewChild('uploadForm') uploadForm: ElementRef;
-  // @Input() readonly = false;
-  // @Input() hostRecord: HostRecord;
-  // @Output() hostRecordChange = new EventEmitter<HostRecord>();
-  // @Output() requestParentSave = new EventEmitter<FilesComponent>();
-  // @Output() requestParentDelete = new EventEmitter<FilesComponent>();
 
   public fileRecords: Array<any> = [];
   public pendingSetup = true;
   public dbRecord: any = {};
   public dirty = false;
+  public notAvailableOffline = false;
 
   public get readonly() {
     return !this.node || !this.editorService.canEdit();
@@ -32,7 +26,6 @@ export class FilesComponent extends EditorNodeContract implements OnInit {
 
   constructor(
       protected api: ApiService,
-      protected alerts: AlertController,
       public readonly editorService: EditorService,
       @Inject(APP_BASE_HREF) private baseHref: string
   ) { super(); }
@@ -55,45 +48,31 @@ export class FilesComponent extends EditorNodeContract implements OnInit {
     }
 
     if ( !this.node.Value.Value && !this.readonly ) {
-      await new Promise((res, rej) => {
-        this.api.post(`/files/${this.page.UUID}/${this.node.UUID}/create`).subscribe({
-          next: result => {
-            this.dbRecord = result.data;
-            this.fileRecords = result.data.files;
-            this.node.Value.Mode = 'files';
-            this.node.Value.Value = result.data.UUID;
-            this.node.value = result.data.UUID;
-            this.dirty = true;
-            res();
-          },
-          error: rej,
-        });
-      });
+      this.dbRecord = await this.api.createFileGroup(this.page.UUID, this.node.UUID);
+      this.fileRecords = this.dbRecord.files;
+      this.node.Value.Mode = 'files';
+      this.node.Value.Value = this.dbRecord.UUID;
+      this.node.value = this.dbRecord.UUID;
+      this.dirty = true;
     } else {
-      await new Promise((res, rej) => {
-        this.api.get(`/files/${this.page.UUID}/${this.node.UUID}/get/${this.node.Value.Value}`).subscribe({
-          next: result => {
-            this.dbRecord = result.data;
-            this.fileRecords = result.data.files;
-            res();
-          },
-          error: rej,
-        });
-      });
+      try {
+        this.dbRecord = await this.api.getFileGroup(this.page.UUID, this.node.UUID, this.node.Value.Value);
+        this.fileRecords = this.dbRecord.files;
+        this.notAvailableOffline = false;
+      } catch (e) {
+        if ( e instanceof ResourceNotAvailableOfflineError ) {
+          this.notAvailableOffline = true;
+        } else {
+          throw e;
+        }
+      }
     }
 
     this.pendingSetup = false;
   }
 
   public async performDelete(): Promise<void> {
-    await new Promise((res, rej) => {
-      this.api.post(`/files/${this.page.UUID}/${this.node.UUID}/delete/${this.node.Value.Value}`).subscribe({
-        next: result => {
-          res();
-        },
-        error: rej,
-      });
-    });
+    await this.api.deleteFileGroup(this.page.UUID, this.node.UUID, this.node.Value.Value);
   }
 
   ngOnInit() {

src/app/components/option-picker/option-picker.component.ts

@@ -2,6 +2,7 @@ import {Component, Input, OnInit} from '@angular/core';
 import {Router} from '@angular/router';
 import {ApiService} from '../../service/api.service';
 import {PopoverController} from '@ionic/angular';
+import {DatabaseService} from "../../service/db/database.service";
 
 @Component({
   selector: 'app-option-picker',
@@ -17,14 +18,16 @@ export class OptionPickerComponent implements OnInit {
       protected api: ApiService,
       protected router: Router,
       protected popover: PopoverController,
+      protected db: DatabaseService,
   ) { }
 
   ngOnInit() {}
 
-  onSelect(key) {
+  async onSelect(key) {
     if ( key === 'html_export' ) {
       window.open(this.api._build_url('/data/export/html'), '_blank');
     } else if ( key === 'logout' ) {
+      await this.db.purge();
       window.location.href = '/auth/logout';
     } else if ( key === 'toggle_darkmode' ) {
       this.toggleDark();