feat: updated store and added color picker

Author: lokesh-coder

package-lock.json

@@ -34,6 +34,7 @@
     "keypress.js": "^2.1.5",
     "nedb": "^1.8.0",
     "ngx-clipboard": "^11.0.0",
+    "ngx-color": "^1.3.1",
     "ngx-smart-modal": "^6.0.0",
     "ngx-toastr": "^8.5.1",
     "pouchdb-adapter-http": "^6.4.3",

package.json

@@ -1 +1,7 @@
-<inkapp-ink></inkapp-ink>
+<h3>{{bucketData.name}}</h3>
+<button class="btn primary-outline" (click)="addNewInk()">Add new color</button>
+<div class="d-flex">
+  <ng-container *ngFor="let color of ink|async">
+    <inkapp-ink [inkData]="color"></inkapp-ink>
+  </ng-container>
+</div>

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

@@ -1,15 +1,25 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Input } from '@angular/core';
+import { Store } from '@ngxs/store';
+import { InkBucket, Ink, InkBucketMeta } from '../../ink.model';
+import { Observable } from 'rxjs';
+import { filter, tap, map } from 'rxjs/operators';
+import { AddNewInk } from '../../store/actions/ink.action';
 
 @Component({
   selector: 'inkapp-bucket',
   templateUrl: './bucket.component.html',
   styles: []
 })
 export class BucketComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit() {
+  @Input() collectionId: number;
+  @Input() bucketData: InkBucketMeta;
+  ink: Observable<Ink>;
+  constructor(private store: Store) {
+    this.ink = this.store.select(s => s.ink).pipe(map(x => x.filter(y => y.bucketId === this.bucketData.id)));
   }
 
+  ngOnInit() {}
+  addNewInk() {
+    this.store.dispatch(new AddNewInk({ bucketId: this.bucketData.id, value: '#fff', meta: {} }));
+  }
 }

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

@@ -1 +1,6 @@
-<inkapp-bucket></inkapp-bucket>
+<ng-container *ngIf="collection as coll">
+  <h4>{{coll.name}}</h4>
+  <ng-container *ngFor="let b of bucket|async">
+    <inkapp-bucket [bucketData]="b"></inkapp-bucket>
+  </ng-container>
+</ng-container>

src/app/components/collection/collection.component.html

@@ -1,15 +1,28 @@
 import { Component, OnInit } from '@angular/core';
+import { Store, Select } from '@ngxs/store';
+import { InkBucket, InkCollection } from '../../ink.model';
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
 
 @Component({
   selector: 'inkapp-collection',
   templateUrl: './collection.component.html',
   styles: []
 })
 export class CollectionComponent implements OnInit {
-
-  constructor() { }
+  bucket: Observable<InkBucket>;
+  collection: InkCollection;
+  constructor(private store: Store) {
+    this.store
+      .select(s => s.collection)
+      .pipe(map(x => x[0]))
+      .subscribe(r => {
+        console.log('CColl', r);
+        this.collection = r;
+      });
+  }
 
   ngOnInit() {
+    this.bucket = this.store.select(s => s.bucket).pipe(map(x => x.filter(y => y.collectionId === this.collection.id)));
   }
-
 }

src/app/components/collection/collection.component.ts

@@ -1,3 +1,7 @@
-<p>
-  ink works!
-</p>
+<div class="comp-ink">
+  <div class="color" [style.backgroundColor]="inkData.value" (click)="openColorPicker()"></div>
+  <div class="data">
+    {{inkData.value}}
+  </div>
+  <color-chrome (onChange)="colorChanged(inkData.id,$event)"></color-chrome>
+</div>

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

@@ -1,12 +1,22 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Input } from '@angular/core';
+import { Store } from '@ngxs/store';
+import { InkColor } from '../../ink.model';
+import { UpdateInkColor } from '../../store/actions/ink.action';
 
 @Component({
   selector: 'inkapp-ink',
   templateUrl: './ink.component.html',
   styles: []
 })
 export class InkComponent implements OnInit {
-  constructor() {}
+  @Input() inkData: InkColor;
+  @Input() bucketId: number;
+  constructor(private store: Store) {}
 
   ngOnInit() {}
+  openColorPicker() {}
+  colorChanged(id, c) {
+    console.log('c', c);
+    this.store.dispatch(new UpdateInkColor({ bucketId: this.bucketId, value: c.color.hex, meta: c.color, id }));
+  }
 }

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

@@ -9,9 +9,7 @@
     <div class="collapse navbar-collapse" id="navbarSupportedContent">
       <ul class="navbar-nav ml-auto">
         <li class="nav-item active">
-          <a class="btn btn-primary" href="#">Home
-            <span class="sr-only">(current)</span>
-          </a>
+          <a class="btn btn-primary" href="#" (click)="newBucket()">New bucket </a>
         </li>
         <li class="nav-item">
           <a class="nav-link" href="#">Settings</a>

src/app/components/navbar/navbar.component.html

@@ -1,15 +1,18 @@
 import { Component, OnInit } from '@angular/core';
+import { Store } from '@ngxs/store';
+import { CreateBucket } from '../../store/actions/bucket.action';
 
 @Component({
   selector: 'inkapp-navbar',
   templateUrl: './navbar.component.html',
   styles: []
 })
 export class NavbarComponent implements OnInit {
+  constructor(private store: Store) {}
 
-  constructor() { }
+  ngOnInit() {}
 
-  ngOnInit() {
+  newBucket() {
+    this.store.dispatch(new CreateBucket({ collectionId: 1, id: 1, name: 'Hello-123' }));
   }
-
 }

src/app/components/navbar/navbar.component.ts

@@ -4,18 +4,32 @@ export enum InkColorType {
   HSL
 }
 
+export interface InkBucketMeta {
+  id: number;
+  name: string;
+  collectionId: number;
+}
+
+export type InkBucket = InkBucketMeta[];
+
 export interface InkColor {
+  id?: string;
   name?: string;
   value: string;
-  type: InkColorType;
-  belongsTo: string;
+  meta: any;
+  bucketId: number;
 }
 
-export interface InkCollection {
+export type Ink = InkColor[];
+
+export interface InkCollectionMeta {
+  id: number;
   name: string;
-  colors: InkColor[];
   created: Date;
 }
+
+export type InkCollection = InkCollectionMeta[];
+
 export enum InkAppView {
   ROUND,
   RECT,

src/app/ink.model.ts

@@ -15,9 +15,15 @@ import { InkApp } from './ink.component';
 import { RoutingModule } from './ink.routing';
 import { HomePage } from './pages/home/home.component';
 import { SettingsPage } from './pages/settings/settings.component';
-import { SettingsState } from './store/states/settings.state';
+import { SettingsState, BucketState, CollectionState, InkState } from './store/states';
+import { ColorModule } from './modules/color/color.module';
 
-export const MODULES = [RoutingModule, NgxsModule.forRoot([SettingsState]), NgxsReduxDevtoolsPluginModule.forRoot()];
+export const MODULES = [
+  RoutingModule,
+  NgxsModule.forRoot([SettingsState, BucketState, CollectionState, InkState]),
+  NgxsReduxDevtoolsPluginModule.forRoot(),
+  ColorModule
+];
 export const COMPONENTS = [
   InkApp,
   NavbarComponent,

src/app/ink.module.ts

@@ -0,0 +1,24 @@
+import { NgModule } from '@angular/core';
+import { ColorAlphaModule } from 'ngx-color/alpha'; // <color-alpha-picker></color-alpha-picker>
+import { ColorBlockModule } from 'ngx-color/block'; // <color-block></color-block>
+import { ColorChromeModule } from 'ngx-color/chrome'; // <color-chrome></color-chrome>
+import { ColorCircleModule } from 'ngx-color/circle'; // <color-circle></color-circle>
+import { ColorCompactModule } from 'ngx-color/compact'; // <color-compact></color-compact>
+import { ColorGithubModule } from 'ngx-color/github'; // <color-github></color-github>
+import { ColorHueModule } from 'ngx-color/hue'; // <color-hue-picker></color-hue-picker>
+import { ColorMaterialModule } from 'ngx-color/material'; // <color-material></color-material>
+import { ColorPhotoshopModule } from 'ngx-color/photoshop'; // <color-photoshop></color-photoshop>
+import { ColorSketchModule } from 'ngx-color/sketch'; // <color-sketch></color-sketch>
+import { ColorSliderModule } from 'ngx-color/slider'; // <color-slider></color-slider>
+import { ColorSwatchesModule } from 'ngx-color/swatches'; // <color-swatches></color-swatches>
+import { ColorTwitterModule } from 'ngx-color/twitter'; // <color-twitter></color-twitter>
+
+import { CommonModule } from '@angular/common';
+
+@NgModule({
+  imports: [CommonModule, ColorChromeModule],
+  exports: [ColorChromeModule],
+  declarations: [],
+  providers: []
+})
+export class ColorModule {}

src/app/modules/color/color.module.ts

@@ -0,0 +1,6 @@
+import { InkBucket, InkBucketMeta } from '../../ink.model';
+
+export class CreateBucket {
+  static readonly type = '[Bucket] Create new bucket';
+  constructor(public bucketData: InkBucketMeta) {}
+}

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

@@ -0,0 +1,6 @@
+import { InkAppView, InkCollection } from '../../ink.model';
+
+export class CreateCollection {
+  static readonly type = '[Collection] Create new collection';
+  constructor(public collectionData: InkCollection) {}
+}

src/app/store/actions/collection.actions.ts

@@ -0,0 +1,11 @@
+import { InkColor } from '../../ink.model';
+
+export class AddNewInk {
+  static readonly type = '[Ink] Add new ink';
+  constructor(public inkData: InkColor) {}
+}
+
+export class UpdateInkColor {
+  static readonly type = '[Ink] Update color';
+  constructor(public inkData: InkColor) {}
+}

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

@@ -0,0 +1,16 @@
+import { State, Action, StateContext } from '@ngxs/store';
+import { InkAppSettings, InkBucket } from '../../ink.model';
+import { CreateBucket } from '../actions/bucket.action';
+
+@State<InkBucket>({
+  name: 'bucket',
+  defaults: []
+})
+export class BucketState {
+  @Action(CreateBucket)
+  createBucket(ctx: StateContext<InkBucket>, action: CreateBucket) {
+    const state = ctx.getState();
+    state.push(action.bucketData);
+    ctx.setState([...state]);
+  }
+}

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

@@ -0,0 +1,14 @@
+import { State, Action, StateContext } from '@ngxs/store';
+import { InkCollection } from '../../ink.model';
+
+@State<InkCollection>({
+  name: 'collection',
+  defaults: [
+    {
+      id: 1,
+      created: new Date(),
+      name: 'Default'
+    }
+  ]
+})
+export class CollectionState {}

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

@@ -0,0 +1,4 @@
+export { BucketState } from './bucket.state';
+export { CollectionState } from './collection.state';
+export { SettingsState } from './settings.state';
+export { InkState } from './ink.state';

src/app/store/states/index.ts

@@ -0,0 +1,40 @@
+import { State, Action, StateContext } from '@ngxs/store';
+import { Ink } from '../../ink.model';
+import { AddNewInk, UpdateInkColor } from '../actions/ink.action';
+
+@State<Ink>({
+  name: 'ink',
+  defaults: []
+})
+export class InkState {
+  @Action(AddNewInk)
+  createBucket(ctx: StateContext<Ink>, action: AddNewInk) {
+    const state = ctx.getState();
+    state.push({ ...action.inkData, id: this.getID() });
+    ctx.setState([...state]);
+  }
+
+  @Action(UpdateInkColor)
+  updateInkColor(ctx: StateContext<Ink>, action: UpdateInkColor) {
+    let state: any = ctx.getState();
+    console.log('state', state);
+    state = state.map((a: any) => {
+      if (a.id === action.inkData.id) {
+        a.value = action.inkData.value;
+      }
+      return a;
+    });
+    ctx.setState([...state]);
+  }
+
+  private getID() {
+    return (
+      Math.random()
+        .toString(36)
+        .substring(2, 5) +
+      Math.random()
+        .toString(36)
+        .substring(2, 5)
+    );
+  }
+}

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

@@ -1 +1,2 @@
 @import './basic-input';
+@import './ink';