Noded/frontend
3
0
Fork 0
Code Issues 47 Pull Requests Releases Wiki Activity

Add offline caching for code editor contents
All checks were successful
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone Build is passing
Details

Browse Source
This commit is contained in:
Garrett Mills
2020-10-21 21:12:04 -05:00
parent 5737dd23ca
commit 8de9db08a6
8 changed files with 321 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/app/components/editor/code/code.component.html
View File

@@ -1,4 +1,4 @@
<div class="code-wrapper" style="width: 100%; height: 600px; margin-top: 10px;">
<div class="code-wrapper" style="width: 100%; height: 600px; margin-top: 10px;" *ngIf="!notAvailableOffline">
<ion-toolbar>
<ion-item>
<ion-label position="floating">Language</ion-label>
@@ -16,3 +16,6 @@
></ngx-monaco-editor>
</div>
</div>
<div class="code-wrapper not-offline" style="width: 100%; height: 600px; margin-top: 10px;" *ngIf="notAvailableOffline">
Sorry, this code editor is not available offline yet.
</div>

6
src/app/components/editor/code/code.component.scss
View File

@@ -1,4 +1,10 @@
div.code-wrapper {
border: 2px solid #8c8c8c;
border-radius: 3px;
&.not-offline {
text-align: center;
padding-top: 100px;
color: #595959;
}
}

86
src/app/components/editor/code/code.component.ts
View File

@@ -1,6 +1,6 @@
import {Component, Input, OnInit} from '@angular/core';
import {v4} from 'uuid';
import {ApiService} from '../../../service/api.service';
import {ApiService, ResourceNotAvailableOfflineError} from '../../../service/api.service';
import {EditorNodeContract} from '../../nodes/EditorNode.contract';
import {EditorService} from '../../../service/editor.service';
@@ -14,6 +14,7 @@ export class CodeComponent extends EditorNodeContract implements OnInit {
public dirty = false;
protected dbRecord: any = {};
protected codeRefId!: string;
public notAvailableOffline = false;
public editorOptions = {
language: 'javascript',
@@ -123,34 +124,36 @@ export class CodeComponent extends EditorNodeContract implements OnInit {
}
if ( !this.node.Value.Value && this.editorService.canEdit() ) {
this.api.post(`/code/${this.page.UUID}/${this.node.UUID}/create`).subscribe({
next: result => {
this.dbRecord = result.data;
this.node.Value.Mode = 'code';
this.node.Value.Value = result.data.UUID;
this.node.value = result.data.UUID;
this.codeRefId = result.data.UUID;
this.editorOptions.readOnly = this.readonly;
this.onSelectChange(false);
this.hadLoad = true;
res();
},
error: rej,
});
this.api.createCodium(this.page.UUID, this.node.UUID).then(data => {
this.dbRecord = data;
this.node.Value.Mode = 'code';
this.node.Value.Value = data.UUID;
this.node.value = data.UUID;
this.codeRefId = data.UUID;
this.editorOptions.readOnly = this.readonly;
this.onSelectChange(false);
this.hadLoad = true;
this.notAvailableOffline = false;
res();
}).catch(rej);
} else {
this.api.get(`/code/${this.page.UUID}/${this.node.UUID}/get/${this.node.Value.Value}`).subscribe({
next: result => {
this.dbRecord = result.data;
this.initialValue = this.dbRecord.code;
this.editorValue = this.dbRecord.code;
this.editorOptions.language = this.dbRecord.Language;
this.codeRefId = this.node.Value.Value;
this.editorOptions.readOnly = this.readonly;
this.onSelectChange(false);
this.hadLoad = true;
res();
},
error: rej,
this.api.getCodium(this.page.UUID, this.node.UUID, this.node.Value.Value).then(data => {
this.dbRecord = data;
this.initialValue = this.dbRecord.code;
this.editorValue = this.dbRecord.code;
this.editorOptions.language = this.dbRecord.Language;
this.codeRefId = this.node.Value.Value;
this.editorOptions.readOnly = this.readonly;
this.onSelectChange(false);
this.hadLoad = true;
this.notAvailableOffline = false;
res();
}).catch(e => {
if ( e instanceof ResourceNotAvailableOfflineError ) {
this.notAvailableOffline = true;
} else {
rej(e);
}
});
}
});
@@ -165,29 +168,18 @@ export class CodeComponent extends EditorNodeContract implements OnInit {
this.dbRecord.code = this.editorValue;
this.dbRecord.Language = this.editorOptions.language;
this.api.post(`/code/${this.page.UUID}/${this.node.UUID}/set/${this.node.Value.Value}`, this.dbRecord)
.subscribe({
next: result => {
this.dbRecord = result.data;
this.editorOptions.language = this.dbRecord.Language;
this.editorValue = this.dbRecord.code;
this.dirty = false;
res();
},
error: rej,
});
this.api.saveCodium(this.page.UUID, this.node.UUID, this.node.Value.Value, this.dbRecord).then(data => {
this.dbRecord = data;
this.editorOptions.language = this.dbRecord.Language;
this.editorValue = this.dbRecord.code;
this.dirty = false;
res();
}).catch(rej);
});
}
public performDelete(): void | Promise<void> {
return new Promise((res, rej) => {
this.api.post(`/code/${this.page.UUID}/${this.node.UUID}/delete/${this.node.Value.Value}`).subscribe({
next: result => {
res();
},
error: rej,
});
});
return this.api.deleteCodium(this.page.UUID, this.node.UUID, this.node.Value.Value);
}
ngOnInit() {