WIP - vuex store not injecting into children

config/docs.config.js

@@ -212,4 +212,5 @@ module.exports = {
   //     res.redirect(req.params.file)
   //   })
   // },
+  vuex: "../src/store/index",
 }

config/index.js

@@ -32,6 +32,7 @@ module.exports = {
     // `npm run build --report`
     // Set to `true` or `false` to always turn it on or off
     bundleAnalyzerReport: process.env.npm_config_report,
+    vuex: "../src/store/index",
   },
   system: {
     // Webpack mode
@@ -71,6 +72,7 @@ module.exports = {
     // `npm run build --report`
     // Set to `true` or `false` to always turn it on or off
     bundleAnalyzerReport: process.env.npm_config_report,
+    vuex: "../src/store/index",
   },
   dev: {
     // Webpack mode
@@ -106,5 +108,6 @@ module.exports = {
 
     // Source map
     cssSourceMap: true,
+    vuex: "../src/store/index",
   },
 }

src/elements/VuexCounterButton.vue

@@ -0,0 +1,60 @@
+<template>
+<div class="VuexCounterButton">
+	<button class="button"
+		@click.prevent="increment">
+		{{count}}
+	</button>
+</div>
+</template>
+
+<script>
+/**
+ * Button that counts how many times it was pressed. State management is handled
+ * by Vuex, so the corresponding Vuex module (_counterModule_) must be loaded
+ * into the application store.
+ */
+
+// Loading the store allows access via `store.getters.count`
+//import store from '../store'
+
+// But store is not getting injected ala this.$store so mapState is also not working
+import { mapState, mapGetters } from "vuex"
+
+export default {
+  name: "VuexCounterButton",
+  status: "prototype",
+  release: "1.0.0",
+  type: "Element",
+  computed: {
+    count() {
+      return this.$store.getters.count
+    },
+  },
+  methods: {
+    /**
+     * Increments the counter. This method is not marked @public and is not visible in the styleguide.
+     */
+    increment() {
+      this.$store.commit("increment")
+      /**
+       * After increment event
+       * @event after
+       * @type {number}
+       */
+      this.$emit("after", this.value)
+    },
+  },
+  created() {
+    // the logged component instance should have a $store property, which it does not
+    console.log(this)
+  },
+}
+</script>
+<docs>
+<br/>
+Don't forget that you can debug it with [vue-devtools](https://github.com/vuejs/vue-devtools)
+
+```js
+    <vuex-counter-button></vuex-counter-button>
+```
+</docs>

src/main.js

@@ -1,22 +1,42 @@
 // Vue Design System: The Vue build version to load with the `import` command
 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 import Vue from "vue"
-import App from "@/App"
 import router from "@/router"
 import WebFontLoader from "@/utils/webFontLoader" // eslint-disable-line no-unused-vars
 import Meta from "vue-meta"
+import Vuex from "vuex"
+import App from "@/App"
 
 // Vue Design System: Auto importing components globally
 import DesignSystem from "@/system"
 
 Vue.use(DesignSystem)
 Vue.use(Meta)
+Vue.use(Vuex)
 
 Vue.config.productionTip = false
+Vue.config.devtools = true
+
+let store = new Vuex.Store({
+  state: { count: 10 },
+
+  mutations: {
+    increment(state) {
+      state.count++
+    },
+  },
+
+  getters: {
+    count: state => {
+      return state.count
+    },
+  },
+})
 
 /* eslint-disable no-new */
 new Vue({
   el: "#app",
+  store,
   router,
   template: "<App/>",
   components: { App },

src/store/gallery/index.js

@@ -0,0 +1,32 @@
+export const galleryState = {
+  items: [],
+  selected: [],
+  cut: [],
+  changeList: [],
+  ogItems: [],
+}
+
+export const galleryMutations = {
+  CUT(state, itemArray) {
+    state.cut = [...itemArray]
+  },
+  PASTE(state, itemArray) {
+    state.items = [...itemArray]
+  },
+  SELECT(state, itemArray) {
+    state.selected = [...itemArray]
+  },
+  SET_GALLERY(state, items) {
+    state.items = items
+    state.ogItems = items
+  },
+  SORT_ITEMS(state, value) {
+    state.items = [...value]
+  },
+  UPDATE_CHANGES(state, changeList) {
+    state.changeList = [...changeList]
+  },
+  UPDATE_ITEMS(state, items) {
+    state.items = [...items]
+  },
+}

src/store/index.js

@@ -0,0 +1,13 @@
+import Vue from "vue"
+import Vuex from "vuex"
+import { counterModule, galleryModule, resourceModule } from "./modules"
+
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+  modules: {
+    counter: counterModule,
+    ordermanager: resourceModule,
+    gallery: galleryModule,
+  },
+})

src/store/modules.js

@@ -0,0 +1,39 @@
+import { galleryState, galleryMutations } from "./gallery/index"
+import { resourceState, resourceMutations, resourceGetters } from "./resource/index"
+
+export const counterModule = {
+  state: { count: 10 },
+
+  mutations: {
+    increment(state) {
+      // `state` is the local module state
+      state.count++
+    },
+  },
+
+  getters: {
+    count: state => {
+      return state.count
+    },
+  },
+}
+
+export const galleryModule = {
+  // namespaced: true,
+  state: galleryState,
+  mutations: galleryMutations,
+}
+
+export const resourceModule = {
+  // namespaced: true,
+  // actions: any async actions are should be handled by the host app
+  state: resourceState,
+  mutations: resourceMutations,
+  getters: resourceGetters,
+  modules: {
+    gallery: galleryModule,
+  },
+}
+
+let modules
+export default (modules = { counterModule, galleryModule, resourceModule })

src/store/resource/index.js

@@ -0,0 +1,110 @@
+export const resourceState = {
+  resource: {
+    id: "",
+    resourceClassName: "",
+    bibId: "",
+    label: "Resource not available.",
+    thumbnail: "",
+    startCanvas: "",
+    isMultiVolume: false,
+    viewingHint: null,
+    viewingDirection: null,
+    members: [],
+    loadState: "NOT_LOADED",
+    saveState: "NOT_SAVED",
+    ogState: {},
+  },
+}
+
+export const resourceMutations = {
+  APPLY_STATE(state) {
+    state.gallery.ogItems = state.gallery.items
+    state.gallery.changeList = []
+    state.resource.ogState = {
+      startCanvas: resource.startPage,
+      thumbnail: resource.thumbnail,
+      viewingHint: resource.viewingHint,
+      viewingDirection: resource.viewingDirection,
+    }
+    state.resource.saveState = "NOT_SAVED"
+  },
+  CHANGE_RESOURCE_LOAD_STATE(state, loadState) {
+    state.resource.loadState = loadState
+  },
+  SAVED_STATE(state, saveStatus) {
+    state.resource.saveState = saveStatus
+  },
+  SET_RESOURCE(state, resource) {
+    state.resource.id = resource.id
+    state.resource.resourceClassName = resource.__typename
+    state.resource.label = resource.label
+    state.resource.startCanvas = resource.startPage
+    state.resource.viewingHint = resource.viewingHint
+    state.resource.viewingDirection = resource.viewingDirection
+    state.resource.thumbnail = resource.thumbnail != null ? resource.thumbnail.id : null
+    state.resource.members = resource.members
+    const items = resource.members.map(member => ({
+      id: member.id,
+      viewingHint: member.viewingHint != null ? member.viewingHint : "single",
+      caption: member.label, // member.__typename + " : " + member.id,
+      service:
+        typeof member.thumbnail.iiifServiceUrl != "undefined"
+          ? member.thumbnail.iiifServiceUrl
+          : "https://picsum.photos/600/300/?random",
+      mediaUrl:
+        typeof member.thumbnail.iiifServiceUrl != "undefined"
+          ? member.thumbnail.iiifServiceUrl + "/full/300,/0/default.jpg"
+          : "https://picsum.photos/600/300/?random",
+    }))
+    state.gallery.items = items
+    state.gallery.ogItems = items
+    state.resource.loadState = "LOADED"
+    state.resource.ogState = {
+      startCanvas: resource.startPage,
+      thumbnail: resource.thumbnail != null ? resource.thumbnail.id : null,
+      viewingHint: resource.viewingHint,
+      viewingDirection: resource.viewingDirection,
+    }
+  },
+  UPDATE_STARTCANVAS(state, startCanvas) {
+    state.resource.startCanvas = startCanvas
+  },
+  UPDATE_THUMBNAIL(state, thumbnail) {
+    state.resource.thumbnail = thumbnail
+  },
+  UPDATE_VIEWDIR(state, viewDir) {
+    state.resource.viewingDirection = viewDir
+  },
+  UPDATE_VIEWHINT(state, viewHint) {
+    state.resource.viewingHint = viewHint
+  },
+}
+
+export const resourceGetters = {
+  getMemberCount: state => {
+    return state.resource.members.length
+  },
+  isMultiVolume: state => {
+    const volumes = state.resource.members.filter(member => member.__typename === "ScannedResource")
+    return volumes.length > 0 ? true : false
+  },
+  orderChanged: state => {
+    let ogOrder = JSON.stringify(state.gallery.ogItems.map(item => item.id))
+    let imgOrder = JSON.stringify(state.gallery.items.map(item => item.id))
+    return ogOrder !== imgOrder
+  },
+  stateChanged: (state, getters) => {
+    var propsChanged = []
+    propsChanged.push(state.resource.ogState.thumbnail !== state.resource.thumbnail)
+    propsChanged.push(state.resource.ogState.startCanvas !== state.resource.startCanvas)
+    propsChanged.push(state.resource.ogState.viewingHint !== state.resource.viewingHint)
+    propsChanged.push(state.resource.ogState.viewingDirection !== state.resource.viewingDirection)
+    propsChanged.push(state.gallery.changeList.length > 0)
+    propsChanged.push(getters.orderChanged)
+    if (propsChanged.indexOf(true) > -1) {
+      return true
+    } else {
+      return false
+    }
+  },
+}