From e37d0db517d00acf6c8c4e527585bc7970de66f1 Mon Sep 17 00:00:00 2001 From: koehr Date: Tue, 30 Jun 2020 20:50:39 +0200 Subject: [PATCH] adds indexedDB storage using dexie --- package.json | 1 + src/lib/card.ts | 8 +++----- src/lib/deck.ts | 7 +++---- src/state.ts | 15 ++++++++++++-- src/storage.ts | 52 +++++++++++++++++++++++++++++++++++++++++++++++++ src/types.ts | 23 +++++++++++----------- yarn.lock | 5 +++++ 7 files changed, 88 insertions(+), 23 deletions(-) create mode 100644 src/storage.ts diff --git a/package.json b/package.json index 0b694de..e62d8e1 100644 --- a/package.json +++ b/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", diff --git a/src/lib/card.ts b/src/lib/card.ts index 5e260f3..d1c5984 100644 --- a/src/lib/card.ts +++ b/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: { diff --git a/src/lib/deck.ts b/src/lib/deck.ts index 049b5e7..687d662 100644 --- a/src/lib/deck.ts +++ b/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: '', diff --git a/src/state.ts b/src/state.ts index 5760d0c..bafcdf2 100644 --- a/src/state.ts +++ b/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) diff --git a/src/storage.ts b/src/storage.ts new file mode 100644 index 0000000..1783591 --- /dev/null +++ b/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 + public cards: Dexie.Table + public tags: Dexie.Table + + 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) + } + } +} diff --git a/src/types.ts b/src/types.ts index a6c977e..b554c17 100644 --- a/src/types.ts +++ b/src/types.ts @@ -28,35 +28,34 @@ export interface KV { [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; - decks: Ref; + decks: Ref; notifications: Ref; } diff --git a/yarn.lock b/yarn.lock index 4e7632c..211d423 100644 --- a/yarn.lock +++ b/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"