SapphireDb logo SapphireDb

Demos - Editor

\f:(typescript:editor.component.ts) export class EditorComponent implements OnInit {\n \tcollection: DefaultCollection<Document>;\n\n \tname: string;\n \tname$ = new ReplaySubject<string>();\n\n \tdocument$: Observable<Document>;\n\n \tconstructor(private db: SapphireDb) { }\n\n \tngOnInit() {\n \t\tthis.collection = this.db.collection<Document>('demo.documents');\n\n \t\tthis.document$ = this.name$.pipe(\n \t\t\tdebounceTime(200),\n \t\t\tfilter(v => !!v),\n \t\t\tswitchMap((name: string) => {\n \t\t\t\tconst documents$: Observable<Document[]> = this.collection\n \t\t\t\t\t.where(['name', '==', name])\n \t\t\t\t\t.values();\n\n \t\t\t\treturn documents$.pipe(\n \t\t\t\t\tswitchMap((documents: Document[]) => {\n \t\t\t\t\t\tconst document = documents[0];\n\n \t\t\t\t\t\tif (!!document) {\n \t\t\t\t\t\t\treturn of(document);\n \t\t\t\t\t\t}\n\n \t\t\t\t\t\treturn this.collection.add({\n \t\t\t\t\t\t\t\tname: name,\n \t\t\t\t\t\t\t\tcontent: ''\n \t\t\t\t\t\t}).pipe(\n \t\t\t\t\t\t\tmap((result) => result.value)\n \t\t\t\t\t\t);\n \t\t\t\t\t})\n \t\t\t\t);\n \t\t\t})\n \t\t);\n \t}\n\n \tupdateDocument(document: Document, content: string) {\n \t\tthis.collection.update({\n \t\t\t...document,\n \t\t\tcontent: content\n \t\t});\n \t}\n } \f:(html:editor.component.html) <div class="row">\n \t<div class="cell-md-12">\n \t\t<m4-input [(ngModel)]="name" (ngModelChange)="name$.next($event)" prepend="Document"></m4-input>\n \t</div>\n \t<div class="cell-md-12" *ngIf="document$ | async; let document">\n \t\t<m4-textarea cls-textarea="h-vh-50" [ngModel]="document.content" (ngModelChange)="updateDocument(document, $event)" prepend="Content"></m4-textarea>\n \t</div>\n </div> \f:(csharp:Document.cs) public class Document\n {\n \t[Key]\n \tpublic int Id { get; set; }\n\n \tpublic string Name { get; set; }\n\n \t[Updatable]\n \tpublic string Content { get; set; }\n }

This website uses Google Analytics. If you want to disable it just unselect the option: