adds indexedDB storage using dexie

package.json

@@ -18,6 +18,7 @@
     "@vue/compiler-sfc": "3.0.0-beta.15",
     "copy-webpack-plugin": "^6.0.2",
     "css-loader": "^3.6.0",
+    "dexie": "^3.0.1",
     "favicons-webpack-plugin": "^3.0.1",
     "file-loader": "^6.0.0",
     "html-webpack-plugin": "^4.3.0",

src/lib/card.ts

@@ -1,11 +1,9 @@
-import randomId from './randomId'
-import { Card, CardSize } from '../types'
+import { ICard, CardSize } from '../types'
 
-export function defaultCard (): Card {
+export function defaultCard (): ICard {
   return {
-    id: `c${randomId()}`,
+    id: 0,
     name: 'no title yet',
-    count: 1,
     tags: [],
     icon: 'robe',
     content: {

src/lib/deck.ts

@@ -1,9 +1,8 @@
-import randomId from './randomId'
-import { Deck, CardSize, PageSize, Arrangement } from '../types'
+import { IDeck, CardSize, PageSize, Arrangement } from '../types'
 
-export function defaultDeck (): Deck {
+export function defaultDeck (): IDeck {
   return {
-    id: randomId(),
+    id: 0,
     icon: 'robe',
     name: 'the nameless',
     description: '',

src/state.ts

@@ -1,6 +1,7 @@
 import { reactive, ref, Ref } from 'vue'
-import { State, Notification, Deck } from './types'
+import { State, Notification, IDeck } from './types'
 import { defaultDeck } from './lib/deck'
+import { DeckDB } from './storage'
 
 interface Payload {
   [key: string]: any;
@@ -27,7 +28,7 @@ export const stateActions = {
     notification.dismissed = true
     notifications.value = notifications.value.filter(note => !note.dismissed)
   },
-  'decks/new' (): Deck {
+  'decks/new' (): IDeck {
     return defaultDeck()
   }
 }
@@ -45,4 +46,14 @@ export function useState (field: string): { [key: string]: any } {
   return { collection, actions }
 }
 
+const deckDB = new DeckDB()
+console.log('deck db', deckDB)
+deckDB.putDeck(defaultDeck()).then(() => {
+  return deckDB.decks.toArray()
+}).then(decks => {
+  console.log('Created Decks DB', decks)
+}).catch(error => {
+  console.error('Cannot use in-browser database. This happens for example in Firefox when used in private mode. Unfortunately there is no fix. Please use this app outside of private mode. You can read more about the issue here: https://bugzilla.mozilla.org/show_bug.cgi?id=781982 and here: https://bugzilla.mozilla.org/show_bug.cgi?id=1639542', error)
+})
+
 export default reactive(state)

src/storage.ts

@@ -0,0 +1,52 @@
+import Dexie from 'dexie'
+import { IDeck, ICard } from './types'
+
+interface IDeckTable {
+  id?: number;
+  name: string;
+  description: string;
+  color: string;
+  icon: string;
+  cards: number[]; // array of card IDs
+  cardSize: string;
+  arrangement: string;
+  pageSize: string;
+  roundedCorners: boolean;
+}
+
+export class DeckDB extends Dexie {
+  public decks: Dexie.Table<IDeckTable, number>
+  public cards: Dexie.Table<ICard, number>
+  public tags: Dexie.Table<string>
+
+  public constructor () {
+    super('DeckDB')
+    console.log('initializing deck db')
+
+    this.version(1).stores({
+      decks: '++id,name',
+      cards: '++id,name,*tags',
+      tags: '&tag'
+    })
+
+    this.decks = this.table('decks')
+    this.cards = this.table('cards')
+    this.tags = this.table('tags')
+    console.log('deck db initialized', this)
+  }
+
+  public async putDeck (deck: IDeck) {
+    const cards = await this.cards.bulkPut(deck.cards, { allKeys: true })
+    await this.decks.put({ ...deck, cards })
+  }
+
+  public async putCard (card: ICard, deckId: number) {
+    const cardId = await this.cards.put(card)
+    const deck = await this.decks.get(deckId)
+
+    if (deck && deck.cards.indexOf(cardId) < 0) {
+      deck.cards.push(cardId)
+      await this.decks.put(deck)
+    }
+  }
+}

src/types.ts

@@ -28,35 +28,34 @@ export interface KV<V> {
   [key: string]: V;
 }
 
-export interface ContentBlock {
+export interface IContentBlock {
   type: string;
   data: object;
 }
 
-export interface CardContent {
+export interface ICardContent {
   time: number;
-  blocks: ContentBlock[];
+  blocks: IContentBlock[];
   version: string;
 }
 
-export interface Card {
-  id: string;
+export interface ICard {
+  id: number;
   name: string;
-  count: number;
   tags: string[];
   icon: string;
-  content: CardContent;
+  content: ICardContent;
   backIcon?: string;
   color?: string;
 }
 
-export interface Deck {
-  id: string;
+export interface IDeck {
+  id: number;
   name: string;
   description: string;
   color: string;
   icon: string;
-  cards: Card[];
+  cards: ICard[];
   cardSize: CardSize;
   arrangement: Arrangement;
   pageSize: PageSize;
@@ -68,7 +67,7 @@ export interface Settings {
 }
 
 export interface StoredSettings {
-  decks: Deck[];
+  decks: IDeck[];
   defaults: Settings;
 }
 
@@ -81,6 +80,6 @@ export interface Notification {
 
 export interface State {
   settings: Ref<Settings>;
-  decks: Ref<Deck[]>;
+  decks: Ref<IDeck[]>;
   notifications: Ref<Notification[]>;
 }

yarn.lock

@@ -1976,6 +1976,11 @@ detect-node@^2.0.4:
   resolved "https://registry.yarnpkg.com/detect-node/-/detect-node-2.0.4.tgz#014ee8f8f669c5c58023da64b8179c083a28c46c"
   integrity sha512-ZIzRpLJrOj7jjP2miAtgqIfmzbxa4ZOr5jJc601zklsfEx9oTzmmj2nVpIPRpNlRTIh8lc1kyViIY7BWSGNmKw==
 
+dexie@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/dexie/-/dexie-3.0.1.tgz#faafeb94be0d5e18b25d700546a2c05725511cfc"
+  integrity sha512-/s4KzlaerQnCad/uY1ZNdFckTrbdMVhLlziYQzz62Ff9Ick1lHGomvTXNfwh4ApEZATyXRyVk5F6/y8UU84B0w==
+
 diffie-hellman@^5.0.0:
   version "5.0.3"
   resolved "https://registry.yarnpkg.com/diffie-hellman/-/diffie-hellman-5.0.3.tgz#40e8ee98f55a2149607146921c63e1ae5f3d2875"