Commit 8e439c26 authored by Alexander Philipp Nowosad's avatar Alexander Philipp Nowosad
Browse files

Add list wrapper to canvas definitions

parent aa3b4951
......@@ -4,11 +4,15 @@ import PouchDB from 'pouchdb-browser';
import { CanvasDefinition } from './canvas-definition';
import { CanvasDefinitionCell } from './canvas-definition-cell';
import { getId } from '../model/utils';
import { ElementService } from '../database/element-service';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root',
})
export class CanvasDefinitionService {
export class CanvasDefinitionService
implements ElementService<CanvasDefinition>
{
constructor(private pouchdbService: PouchdbService) {}
add(canvasDefinition: Partial<CanvasDefinition>) {
......@@ -28,6 +32,10 @@ export class CanvasDefinitionService {
.then((definition) => new CanvasDefinition(definition));
}
getChangesFeed(id: string): Observable<any> {
return this.pouchdbService.getChangesFeed(id);
}
updateRows(
canvasDefinition: CanvasDefinition,
newRows: CanvasDefinitionCell[][]
......
......@@ -16,16 +16,14 @@
business model canvas and value proposition canvas.
</div>
<div class="my-3 p-3 bg-white rounded shadow-sm">
<h6 class="border-bottom border-gray pb-2">Canvas Definitions</h6>
<div *ngIf="!canvasDefinitions">Loading...</div>
<div *ngIf="canvasDefinitions && canvasDefinitions.length === 0">
No canvas definitions available.
</div>
<ul
class="list-group"
*ngIf="canvasDefinitions && canvasDefinitions.length > 0"
>
<app-list-wrapper
listTitle="Canvas Definitions"
[reloading]="reloading"
[loading]="loading"
[noResults]="noResults"
>
<div noResults>No canvas definitions available.</div>
<ul results class="list-group">
<li
class="
d-flex
......@@ -46,7 +44,7 @@
>View</a
>
<button
(click)="openDeleteCanvasDefinitionModal(canvasDefinition._id)"
(click)="openDeleteCanvasDefinitionModal(canvasDefinition)"
type="button"
class="btn btn-danger btn-xs"
>
......@@ -55,7 +53,7 @@
</div>
</li>
</ul>
</div>
</app-list-wrapper>
<div class="my-3 p-3 bg-white rounded shadow-sm">
<h6 class="border-bottom border-gray pb-2">Add Canvas Definition</h6>
......
import { Component, OnInit, ViewChild } from '@angular/core';
import { Component, ViewChild } from '@angular/core';
import { CanvasDefinition } from '../../../canvas-meta-model/canvas-definition';
import { CanvasDefinitionService } from '../../../canvas-meta-model/canvas-definition.service';
import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { ELEMENT_SERVICE, ListService } from '../../../shared/list.service';
@Component({
selector: 'app-canvas-definitions',
templateUrl: './canvas-definitions.component.html',
styleUrls: ['./canvas-definitions.component.css'],
providers: [
ListService,
{ provide: ELEMENT_SERVICE, useExisting: CanvasDefinitionService },
],
})
export class CanvasDefinitionsComponent implements OnInit {
canvasDefinitions: CanvasDefinition[];
addCanvasDefinitionForm: FormGroup;
export class CanvasDefinitionsComponent {
addCanvasDefinitionForm: FormGroup = this.fb.group({
name: ['', Validators.required],
});
modalCanvas: CanvasDefinition;
private modalReference: NgbModalRef;
......@@ -21,32 +26,18 @@ export class CanvasDefinitionsComponent implements OnInit {
deleteCanvasDefinitionModal: any;
constructor(
private canvasDefinitionService: CanvasDefinitionService,
private fb: FormBuilder,
private listService: ListService<CanvasDefinition>,
private modalService: NgbModal
) {}
ngOnInit() {
this.loadCanvasDefinitions().then();
this.initForm();
}
initForm() {
this.addCanvasDefinitionForm = this.fb.group({
name: ['', Validators.required],
});
}
async addCanvasDefinition() {
await this.canvasDefinitionService.add({ name: this.nameControl.value });
this.initForm();
await this.loadCanvasDefinitions();
await this.listService.add({ name: this.nameControl.value });
this.addCanvasDefinitionForm.reset();
}
async openDeleteCanvasDefinitionModal(canvasDefinitionId: string) {
this.modalCanvas = await this.canvasDefinitionService.get(
canvasDefinitionId
);
openDeleteCanvasDefinitionModal(canvasDefinition: CanvasDefinition) {
this.modalCanvas = canvasDefinition;
this.modalReference = this.modalService.open(
this.deleteCanvasDefinitionModal,
{ size: 'lg' }
......@@ -54,17 +45,26 @@ export class CanvasDefinitionsComponent implements OnInit {
}
async deleteCanvasDefinition(canvasDefinitionId: string) {
await this.canvasDefinitionService.delete(canvasDefinitionId);
await this.loadCanvasDefinitions();
}
async loadCanvasDefinitions() {
this.canvasDefinitions = (
await this.canvasDefinitionService.getList()
).docs;
await this.listService.delete(canvasDefinitionId);
}
get nameControl() {
return this.addCanvasDefinitionForm.get('name');
}
get canvasDefinitions(): CanvasDefinition[] {
return this.listService.elements;
}
get noResults(): boolean {
return this.listService.noResults;
}
get loading(): boolean {
return this.listService.loading;
}
get reloading(): boolean {
return this.listService.reloading;
}
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment