feat(view): add ink color view basic settings and state

Author: lokesh-coder

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

@@ -1,7 +1,7 @@
 <inkapp-magic-title [title]="bucketData.name" (changed)="onTitleChange($event)">
   #{{index}}
 </inkapp-magic-title>
-<div class="d-flex flex-wrap">
+<div class="d-flex flex-wrap" [ngClass]="'ink-view-'+(settings|async)?.value">
   <ng-container *ngFor="let color of ink|async">
     <inkapp-ink [inkData]="color" [bucketId]="bucketData._id"></inkapp-ink>
   </ng-container>

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

@@ -1,6 +1,6 @@
 import { Component, OnInit, Input } from '@angular/core';
 import { Store } from '@ngxs/store';
-import { InkBucket, Ink, InkBucketMeta, InkColorMeta } from '../../models';
+import { InkBucket, Ink, InkBucketMeta, InkColorMeta, InkAppView, InkAppSettings } from '../../models';
 import { Observable } from 'rxjs';
 import { filter, tap, map } from 'rxjs/operators';
 import { AddInkColor, LoadInkColorsInBucket } from '../../store/actions/ink.action';
@@ -17,8 +17,11 @@ export class BucketComponent implements OnInit {
   @Input() index: number;
   @Input() bucketData: InkBucketMeta;
   ink: Observable<Ink>;
+  settings: Observable<InkAppSettings>;
+  view: InkAppView;
   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)));
+    this.settings = this._store.select(s => s.settings).pipe(map(s => s.filter(x => x.key === 'view')[0]));
   }
 
   ngOnInit() {

src/app/ink.component.ts

@@ -1,10 +1,12 @@
 import { Component, OnInit, NgZone } from '@angular/core';
 import { Store } from '@ngxs/store';
-import { ChangeView } from './store/actions/settings.action';
+import { ChangeView, LoadSettings } from './store/actions/settings.action';
 import { InkAppView, InkDb } from './models';
 import { DBService } from './services/db.service';
 import { tap } from 'rxjs/operators';
 import { RxCollection, RxDatabase } from 'rxdb';
+import { LocalDatabase } from './services/localdb.service';
+import { SettingsService } from './services/settings.service';
 
 @Component({
   selector: 'inkapp-root',
@@ -14,10 +16,12 @@ import { RxCollection, RxDatabase } from 'rxdb';
   `
 })
 export class InkApp implements OnInit {
-  constructor(private store: Store, private db: DBService) {
+  constructor(private _store: Store, private _settingsService: SettingsService) {
     // console.log('cons', this.db.conn);
   }
   ngOnInit() {
-    this.store.dispatch(new ChangeView(InkAppView.ROUND));
+    this._settingsService.setDefaultSettings().then((doc: any) => {
+      if (doc) { this._store.dispatch(new LoadSettings(doc)); }
+    });
   }
 }

src/app/models/ink.model.ts

@@ -28,8 +28,8 @@ export interface InkColorMeta {
 }
 export interface InkSettingsMeta {
   key: string;
-  _id?: string;
   value: string;
+  _id?: string;
 }
 
 export type InkBucket = InkBucketMeta[];
@@ -41,9 +41,11 @@ export enum InkAppView {
   RECT,
   STRIP
 }
-export interface InkAppSettings {
-  view: InkAppView;
-  sortBy: string;
+export type InkAppSettings = InkAppSettingsItem[];
+
+export interface InkAppSettingsItem {
+  key: string;
+  value: string;
 }
 
 /* doc methods */

src/app/pages/home/home.component.ts

@@ -4,6 +4,7 @@ import { Store } from '@ngxs/store';
 import { LoadBoard } from '../../store/actions/board.actions';
 import { filter, map } from 'rxjs/operators';
 import { InkBoard, InkBoardMeta } from '../../models';
+import { LocalDatabase } from '../../services/localdb.service';
 
 @Component({
   selector: 'inkapp-home-page',
@@ -12,7 +13,7 @@ import { InkBoard, InkBoardMeta } from '../../models';
 })
 export class HomePage implements OnInit {
   boards: InkBoardMeta[];
-  constructor(private _boardService: BoardService, private _store: Store) {}
+  constructor(private _boardService: BoardService, private _store: Store, private _localDatabase: LocalDatabase) {}
 
   async ngOnInit() {
     this._store.select(s => s.board).subscribe(b => {
@@ -21,5 +22,13 @@ export class HomePage implements OnInit {
     const boards = await this._boardService.getBoards();
     boards.map(b => ({ _id: b._id, name: b.name, description: b.description, createdAt: b.createdAt }));
     this._store.dispatch(new LoadBoard(boards));
+
+    const db = await this._localDatabase.getDatabase();
+    db.settings
+      .find()
+      .exec()
+      .then(col => {
+        console.log('got settings collection,', col);
+      });
   }
 }

src/app/pages/settings/settings.component.html

@@ -2,6 +2,18 @@
   <div class="col-md-8 mx-auto">
     <h3 class="ink-page-title mb-5">
       <i class="ink-icon icon-settings"></i> Settings</h3>
+    <inkapp-settings-item>
+      <div class="description">
+        <h5>Colors view</h5>
+        <p>Change the look of an ink color</p>
+      </div>
+      <div class="action">
+        <select name="" class="custom-select" (change)="onViewChange($event.target.value)">
+          <option value="default">Default</option>
+          <option value="thin">Thin</option>
+        </select>
+      </div>
+    </inkapp-settings-item>
     <inkapp-settings-item>
       <div class="description">
         <h5>Export database</h5>

src/app/pages/settings/settings.component.ts

@@ -1,16 +1,33 @@
 import { Component, OnInit } from '@angular/core';
 import { LocalDatabase } from '../../services/localdb.service';
+import { SettingsService } from '../../services/settings.service';
+import { Store } from '@ngxs/store';
+import { UpdateSettings, LoadSettings } from '../../store/actions/settings.action';
 
 @Component({
   selector: 'inkapp-settings-page',
   templateUrl: './settings.component.html',
   styles: []
 })
 export class SettingsPage implements OnInit {
-  constructor(private _localDatabase: LocalDatabase) {}
+  constructor(
+    private _store: Store,
+    private _localDatabase: LocalDatabase,
+    private _settingsService: SettingsService
+  ) {}
 
-  ngOnInit() {}
+  ngOnInit() {
+    this._settingsService.getAll().then(doc => {
+      this._store.dispatch(new LoadSettings(doc));
+    });
+  }
   deleteDatabase() {
     this._localDatabase.deleteDatabase();
   }
+
+  onViewChange(view) {
+    this._settingsService.update('view', view).then(doc => {
+      this._store.dispatch(new UpdateSettings('view', view));
+    });
+  }
 }

src/app/schema/settings.schema.ts

@@ -5,9 +5,12 @@ export const SettingsSchema = {
   type: 'object',
   uniqueItems: true,
   properties: {
-    view: {
+    key: {
+      type: 'string'
+    },
+    value: {
       type: 'string'
     }
   },
-  required: []
+  required: ['key', 'value']
 };

src/app/services/settings.service.ts

@@ -0,0 +1,33 @@
+import { Injectable } from '@angular/core';
+import { LocalDatabase } from './localdb.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class SettingsService {
+  constructor(private _localDatabase: LocalDatabase) {}
+  async setDefaultSettings() {
+    const db = await this._localDatabase.getDatabase();
+    const view = await db.settings.find({ key: 'view' }).exec();
+    if (view.length > 1) {
+      return db.settings.find().exec();
+    }
+    return db.settings.insert({ key: 'view', value: 'default' }).catch(error => {
+      console.log('Error while settings default settings', error);
+    });
+  }
+  async update(key, value) {
+    const db = await this._localDatabase.getDatabase();
+    return db.settings
+      .findOne({ key })
+      .update({ $set: { value } })
+      .catch(error => {
+        console.error('Error while updating settings!', error);
+      });
+  }
+
+  async getAll() {
+    const db = await this._localDatabase.getDatabase();
+    return db.settings.find().exec();
+  }
+}

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

@@ -1,6 +1,11 @@
-import { InkAppView } from '../../models';
+import { InkAppView, InkAppSettings } from '../../models';
 
-export class ChangeView {
-  static readonly type = '[Settings] change view';
-  constructor(public view: InkAppView) {}
+export class LoadSettings {
+  static readonly type = '[Settings] load all settings';
+  constructor(public settings: InkAppSettings) {}
+}
+
+export class UpdateSettings {
+  static readonly type = '[Settings] update';
+  constructor(public key: string, public value: string) {}
 }

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

@@ -1,18 +1,25 @@
 import { State, Action, StateContext } from '@ngxs/store';
 import { InkAppSettings } from '../../models';
-import { ChangeView } from '../actions/settings.action';
+import { UpdateSettings, LoadSettings } from '../actions/settings.action';
 
 @State<Partial<InkAppSettings>>({
   name: 'settings',
-  defaults: {}
+  defaults: []
 })
 export class SettingsState {
-  @Action(ChangeView)
-  changeView(ctx: StateContext<InkAppSettings>, action: ChangeView) {
+  @Action(UpdateSettings)
+  updateSettings(ctx: StateContext<InkAppSettings>, action: UpdateSettings) {
     const state = ctx.getState();
-    ctx.setState({
-      ...state,
-      view: action.view
+    const newState = state.map(s => {
+      if (s[action.key]) {
+        s[action.key] = action.value;
+      }
+      return s;
     });
+    ctx.setState([...newState]);
+  }
+  @Action(LoadSettings)
+  load(ctx: StateContext<InkAppSettings>, action: LoadSettings) {
+    ctx.setState(action.settings);
   }
 }

src/styles/vendors/_bootstrap.scss

@@ -48,7 +48,7 @@ $grid-breakpoints: $ink--grid-breakpoints;
 //@import '~bootstrap/scss/dropdown';
 //@import '~bootstrap/scss/button-group';
 @import '~bootstrap/scss/input-group';
-//@import '~bootstrap/scss/custom-forms';
+@import '~bootstrap/scss/custom-forms';
 @import '~bootstrap/scss/nav';
 @import '~bootstrap/scss/navbar';
 @import '~bootstrap/scss/card';