feat(wip): updated ink colors service

Author: lokesh-coder

src/app/components/bucket/bucket.component.html

@@ -3,7 +3,7 @@
 </inkapp-magic-title>
 <div class="d-flex flex-wrap">
   <ng-container *ngFor="let color of ink|async">
-    <inkapp-ink [inkData]="color"></inkapp-ink>
+    <inkapp-ink [inkData]="color" [bucketId]="bucketData._id"></inkapp-ink>
   </ng-container>
   <span class="ink-color-sticker -empty" (click)="addNewInk()">
     <div class="ink-color">

src/app/components/bucket/bucket.component.ts

@@ -1,12 +1,13 @@
 import { Component, OnInit, Input } from '@angular/core';
 import { Store } from '@ngxs/store';
-import { InkBucket, Ink, InkBucketMeta } from '../../models';
+import { InkBucket, Ink, InkBucketMeta, InkColorMeta } from '../../models';
 import { Observable } from 'rxjs';
 import { filter, tap, map } from 'rxjs/operators';
-import { AddNewInk } from '../../store/actions/ink.action';
+import { AddInkColor, LoadInkColorsInBucket } from '../../store/actions/ink.action';
 import { BucketService } from '../../services/bucket.service';
 import { ENETDOWN } from 'constants';
 import { RenameBucket } from '../../store/actions/bucket.action';
+import { InkColorService } from '../../services/ink.service';
 
 @Component({
   selector: 'inkapp-bucket',
@@ -17,13 +18,25 @@ export class BucketComponent implements OnInit {
   @Input() index: number;
   @Input() bucketData: InkBucketMeta;
   ink: Observable<Ink>;
-  constructor(private _store: Store, private _bucketService: BucketService) {
+  constructor(private _store: Store, private _bucketService: BucketService, private _inkColorService: InkColorService) {
     this.ink = this._store.select(s => s.ink).pipe(map(x => x.filter(y => y.bucketId === this.bucketData._id)));
   }
 
-  ngOnInit() {}
+  ngOnInit() {
+    this._inkColorService.getInkColorsInBuckets(this.bucketData._id).then(docs => {
+      this._store.dispatch(new LoadInkColorsInBucket(docs));
+    });
+  }
   addNewInk() {
-    this._store.dispatch(new AddNewInk({ bucketId: this.bucketData._id, value: '#fff', meta: {} }));
+    const data: InkColorMeta = {
+      bucketId: this.bucketData._id,
+      displayValue: 'white',
+      meta: {},
+      name: '#fff'
+    };
+    this._inkColorService.addInkColor(this.bucketData._id, data).then(doc => {
+      this._store.dispatch(new AddInkColor(this.bucketData._id, doc as any));
+    });
   }
   onTitleChange(newTitle) {
     this._bucketService.changeBucketName(this.bucketData._id, newTitle).then(bucket => {

src/app/components/ink/ink.component.html

@@ -1,7 +1,7 @@
 <div class="ink-color-sticker">
-  <div class="ink-color" [style.backgroundColor]="inkData.value" (click)="openColorPicker()"></div>
+  <div class="ink-color" [style.backgroundColor]="inkColor.displayValue" (click)="openColorPicker()"></div>
   <div class="ink-name">
-    {{inkData.value}}
+    {{inkColor.displayValue}}
   </div>
-  <!-- <color-chrome (onChange)="colorChanged(inkData.id,$event)"></color-chrome> -->
+  <!-- <color-chrome (onChange)="colorChanged(inkColor.id,$event)"></color-chrome> -->
 </div>

src/app/components/ink/ink.component.ts

@@ -1,24 +1,31 @@
 import { Component, OnInit, Input, OnDestroy, ComponentRef, ElementRef } from '@angular/core';
 import { Store } from '@ngxs/store';
-import { InkColor } from '../../models';
+import { InkColorMeta, InkDocMethods } from '../../models';
 import { UpdateInkColor } from '../../store/actions/ink.action';
 import { Overlay, OverlayRef, OverlayConfig } from '@angular/cdk/overlay';
 import { ComponentPortal } from '@angular/cdk/portal';
 import { ChromeComponent } from 'ngx-color/chrome';
 import { map, debounceTime } from 'rxjs/operators';
+import { InkColorService } from '../../services/ink.service';
 
 @Component({
   selector: 'inkapp-ink',
   templateUrl: './ink.component.html',
   styles: []
 })
 export class InkComponent implements OnInit, OnDestroy {
-  @Input() inkData: InkColor;
+  @Input() inkData: InkColorMeta;
   @Input() bucketId: string;
   overlayRef: OverlayRef;
   colorPanelPortal: ComponentPortal<ChromeComponent>;
   colorPickerRef: ComponentRef<ChromeComponent>;
-  constructor(private store: Store, private overlay: Overlay, private elRef: ElementRef) {}
+  inkColor: InkColorMeta = null;
+  constructor(
+    private _store: Store,
+    private overlay: Overlay,
+    private elRef: ElementRef,
+    private _inkColorService: InkColorService
+  ) {}
 
   ngOnInit() {
     const config = new OverlayConfig();
@@ -27,6 +34,7 @@ export class InkComponent implements OnInit, OnDestroy {
     config.positionStrategy = this.overlay
       .position()
       .connectedTo(this.elRef, { originX: 'start', originY: 'bottom' }, { overlayX: 'start', overlayY: 'top' });
+    this.inkColor = this.inkData;
 
     this.overlayRef = this.overlay.create(config);
     this.colorPanelPortal = new ComponentPortal(ChromeComponent);
@@ -40,19 +48,30 @@ export class InkComponent implements OnInit, OnDestroy {
       this.colorPickerRef.instance.color = this.inkData.meta.hsl;
     }
     this.colorPickerRef.instance.onChange.pipe(map(c => c.color)).subscribe(color => {
-      this.store.dispatch(
-        new UpdateInkColor({ bucketId: this.inkData.bucketId, value: color.hex, meta: color, id: this.inkData.id })
-      );
+      this.inkColor = {
+        name: color.hex,
+        displayValue: color.hex,
+        meta: color,
+        bucketId: this.bucketId,
+        _id: this.inkData._id
+      };
     });
     this.overlayRef.backdropClick().subscribe(b => {
-      console.log('backdrop clocked', b);
+      if (this.inkColor.name !== this.inkData.name) {
+        this.updateInkColor(this.inkColor);
+      }
       if (this.overlayRef && this.overlayRef.hasAttached()) {
         this.overlayRef.detach();
         this.colorPickerRef.destroy();
         return;
       }
     });
   }
+  updateInkColor(data: InkColorMeta) {
+    this._inkColorService.updateInkColor(this.inkData._id, data).then(doc => {
+      this._store.dispatch(new UpdateInkColor(this.inkData._id, data));
+    });
+  }
   ngOnDestroy() {
     if (this.overlayRef) {
       this.overlayRef.dispose();

src/app/schema/ink.schema.ts

@@ -5,11 +5,10 @@ export const InkSchema = {
   type: 'object',
   uniqueItems: true,
   properties: {
-    id: {
-      type: 'string',
-      primary: true
+    name: {
+      type: 'string'
     },
-    value: {
+    displayValue: {
       type: 'string'
     },
     meta: {
@@ -22,5 +21,5 @@ export const InkSchema = {
       type: 'string'
     }
   },
-  required: ['id', 'name', 'meta', 'bucketId']
+  required: ['displayValue', 'meta', 'bucketId']
 };

src/app/services/ink.service.ts

@@ -0,0 +1,36 @@
+import { Injectable } from '@angular/core';
+import { LocalDatabase } from './localdb.service';
+import { InkColorMeta } from '../models';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class InkColorService {
+  constructor(private _localDatabase: LocalDatabase) {}
+
+  async addInkColor(bucketId, inkData: InkColorMeta) {
+    const db = await this._localDatabase.getDatabase();
+    return db.ink.insert({ ...inkData, bucketId }).catch(error => {
+      console.error('Error while saving ink color!');
+    });
+  }
+
+  async updateInkColor(inkId, inkData: InkColorMeta) {
+    const db = await this._localDatabase.getDatabase();
+    return db.ink
+      .findOne(inkId)
+      .update({
+        $set: {
+          ...inkData
+        }
+      })
+      .catch(error => {
+        console.error('Error while updating ink color!', error);
+      });
+  }
+
+  async getInkColorsInBuckets(bucketId) {
+    const db = await this._localDatabase.getDatabase();
+    return db.ink.find({ bucketId }).exec();
+  }
+}

src/app/store/actions/ink.action.ts

@@ -1,11 +1,16 @@
-import { InkColor } from '../../models';
+import { InkColorMeta } from '../../models';
 
-export class AddNewInk {
+export class AddInkColor {
   static readonly type = '[Ink] Add new ink';
-  constructor(public inkData: InkColor) {}
+  constructor(public bucketId: string, public inkData: InkColorMeta) {}
 }
 
 export class UpdateInkColor {
   static readonly type = '[Ink] Update color';
-  constructor(public inkData: InkColor) {}
+  constructor(public id: string, public inkData: InkColorMeta) {}
+}
+
+export class LoadInkColorsInBucket {
+  static readonly type = '[Ink] get colors in bucket';
+  constructor(public colors: InkColorMeta[]) {}
 }

src/app/store/states/ink.state.ts

@@ -1,6 +1,6 @@
 import { State, Action, StateContext } from '@ngxs/store';
 import { Ink } from '../../models';
-import { AddNewInk, UpdateInkColor } from '../actions/ink.action';
+import { UpdateInkColor, AddInkColor, LoadInkColorsInBucket } from '../actions/ink.action';
 import { LoadInitialData } from '../actions/general.action';
 import { DBService } from '../../services/db.service';
 import { UtilService } from '../../services/util.service';
@@ -11,35 +11,27 @@ import { UtilService } from '../../services/util.service';
 })
 export class InkState {
   constructor(private db: DBService, private util: UtilService) {}
-  @Action(AddNewInk)
-  createBucket(ctx: StateContext<Ink>, action: AddNewInk) {
+  @Action(AddInkColor)
+  addInkColor(ctx: StateContext<Ink>, action: AddInkColor) {
     const state = ctx.getState();
-    state.push({ ...action.inkData, id: this.util.ID });
+    state.push(action.inkData);
     ctx.setState([...state]);
-    this.db.saveDocument('ink', state);
   }
 
   @Action(UpdateInkColor)
   updateInkColor(ctx: StateContext<Ink>, action: UpdateInkColor) {
-    let state: any = ctx.getState();
-    state = state.map((a: any) => {
-      if (a.id === action.inkData.id) {
-        a.value = action.inkData.value;
-        a.bucketId = action.inkData.bucketId;
-        a.meta = action.inkData.meta;
+    const state: any = ctx.getState();
+    const newState = state.map(c => {
+      if (c._id === action.id) {
+        return action.inkData;
       }
-      return a;
+      return c;
     });
-    ctx.setState([...state]);
-    this.db.updateDocument('ink', { id: action.inkData.id }, action.inkData);
+    ctx.setState([...newState]);
   }
-
-  @Action(LoadInitialData)
-  loadInkData(ctx: StateContext<Ink>, action: LoadInitialData) {
-    if (action.db !== 'ink') {
-      return;
-    }
-    ctx.setState(action.value);
-    this.db.saveDocument('ink', action.value);
+  @Action(LoadInkColorsInBucket)
+  loadInkColorsInBucket(ctx: StateContext<Ink>, action: LoadInkColorsInBucket) {
+    const state: any = ctx.getState();
+    ctx.setState([...state, ...action.colors]);
   }
 }