feat: add application update management

package.json

@@ -16,6 +16,7 @@
     "joi": "17.4.0",
     "langtag-utils": "2.0.2",
     "quasar": "1.15.10",
+    "semver": "7.3.5",
     "vue-i18n": "8.24.3",
     "vuedraggable": "2.24.3",
     "vuex-persistedstate": "3.2.0"

src/components/DialogWelcome.vue

@@ -0,0 +1,82 @@
+<template>
+  <q-dialog persistent ref="dialog" @hide="hideDialog">
+    <q-card class="q-dialog-plugin">
+      <q-card-section>
+        <div>{{ $t('welcome') }}</div>
+        <div class="text-half">{{ $t('welcome_message') }}</div>
+      </q-card-section>
+      <q-card-section v-if="haveVersion">
+        <q-scroll-area style="height: 22vh" visible>
+          <div v-for="(releaseNote, index) in releaseNotes" :key="index">
+            <div class="text-half text-underline">{{ releaseNote.version }}</div>
+            <ul>
+              <li v-for="(message, index) in releaseNote.messages" :key="index" class="text-half">{{ message }}</li>
+            </ul>
+          </div>
+        </q-scroll-area>
+      </q-card-section>
+      <q-card-actions align="right">
+        <q-btn color="primary" data-autofocus="true" flat :label="$t('ok')" :ripple="false" rounded @click="submitDialog" />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script>
+import semver from 'semver'
+
+export default {
+  name: 'DialogWelcome',
+  computed: {
+    haveVersion: function () {
+      return this.$store.state.application.version !== null
+    },
+    releaseNotes: function () {
+      let versions = semver.rsort(this.versions)
+
+      if (this.$store.state.application.version !== null) {
+        versions = versions.filter(version => semver.gt(version, this.$store.state.application.version))
+      }
+
+      const releaseNotes = versions.reduce((accumulator, version) => {
+        const key = `release_notes.${version.replaceAll('.', '_')}`
+
+        if (this.$te(key)) {
+          accumulator.push({ version, messages: this.$t(key) })
+        }
+
+        return accumulator
+      }, [])
+
+      return releaseNotes
+    },
+    versions: function () {
+      return [
+        '1.0.0',
+        '1.0.1',
+        '1.0.2',
+        '1.1.0',
+        '1.2.0'
+      ]
+    }
+  },
+  methods: {
+    cancelDialog: function () {
+      this.hide()
+    },
+    hide: function () {
+      this.$refs.dialog.hide()
+    },
+    hideDialog: function () {
+      this.$emit('hide')
+    },
+    show: function () {
+      this.$refs.dialog.show()
+    },
+    submitDialog: function () {
+      this.$emit('ok')
+      this.hide()
+    }
+  }
+}
+</script>

src/css/app.sass

@@ -111,11 +111,11 @@ body
   border-radius: 1vh // default: 3px
 
 .q-icon-picker__icon .q-btn__wrapper
-  min-height: 11vh // default: 2.572em (36px)
+  min-height: 14vh // default: 2.572em (36px)
   padding: 0 // default: 4px 16px
 
 .q-icon-picker__icon .q-icon
-  font-size: 11vh
+  font-size: 14vh
 
 .q-item
   min-height: 10vh // default: 48px
@@ -125,8 +125,8 @@ body
   min-width: 6vh // default: 56px
 
 .q-item__section--main .q-icon
-  height: 11vh
-  width: 11vh
+  height: 14vh
+  width: 14vh
 
 .q-item__section--main ~ .q-item__section--side
   padding-left: 2vh // default: 16px
@@ -140,6 +140,9 @@ body
 .q-page
   padding: 2vh 4vh 4vh 4vh
 
+.q-scrollarea > div > div
+  padding-right: 3vh
+
 .q-scrollarea__bar--v, .q-scrollarea__thumb--v
   width: 1vh // default: 10px
 
@@ -169,3 +172,11 @@ body
 
 .text-half
   font-size: 2vh
+
+.text-underline
+  text-decoration: underline
+
+ul
+  margin-block-start: 1vh // default: 1em
+  margin-block-end: 1vh // default: 1em
+  padding-inline-start: 4vh // default: 40px

src/i18n/en-us/index.js

@@ -58,11 +58,21 @@ export default {
     to_rest: 'To rest',
     to_take_care_of_myself: 'To take care of myself'
   },
+  ok: 'OK',
   openmoji_icons: 'OpenMoji icons',
   original_concept: 'Original concept:',
   privacy_policy: 'Privacy policy',
   publisher: 'Publisher:',
   quasar_framework: 'Quasar framework',
+  release_notes: {
+    '1_1_0': [
+      'Added buttons to reset my needs and my actions'
+    ],
+    '1_2_0': [
+      'Added the configuration of my emotions',
+      'Added new icons for my emotions'
+    ]
+  },
   remove: 'Remove',
   remove_this_action: 'Remove this action?',
   remove_this_emotion: 'Remove this emotion?',
@@ -78,5 +88,7 @@ export default {
       empty: 'Must not be empty'
     }
   },
-  version: 'Version:'
+  version: 'Version:',
+  welcome: 'Welcome',
+  welcome_message: 'My wheel of emotions, a wheel to identify one\'s emotions, needs and solutions to get better.'
 }

src/i18n/fr/index.js

@@ -58,11 +58,21 @@ export default {
     to_rest: 'De me reposer',
     to_take_care_of_myself: 'De prendre soin de moi'
   },
+  ok: 'OK',
   openmoji_icons: 'Icônes OpenMoji',
   original_concept: 'Concept original :',
   privacy_policy: 'Politique de confidentialité',
   publisher: 'Éditeur :',
   quasar_framework: 'Cadriciel Quasar',
+  release_notes: {
+    '1_1_0': [
+      'Ajout de boutons pour réinitialiser mes besoins et mes actions'
+    ],
+    '1_2_0': [
+      'Ajout de la configuration de mes émotions',
+      'Ajout de nouveaux icônes pour mes émotions'
+    ]
+  },
   remove: 'Supprimer',
   remove_this_action: 'Supprimer cette action ?',
   remove_this_emotion: 'Supprimer cette émotion ?',
@@ -78,5 +88,7 @@ export default {
       empty: 'Ne doit pas être vide'
     }
   },
-  version: 'Version :'
+  version: 'Version :',
+  welcome: 'Bienvenue',
+  welcome_message: 'Ma roue des émotions, une roue pour identifier ses émotions, ses besoins et les solutions pour aller mieux.'
 }

src/pages/Home.vue

@@ -1,7 +1,7 @@
 <template>
   <q-page class="bg-yellow-4 column justify-between">
     <carousel height="32vh" :title="$t('i_feel')">
-      <carousel-slide-icon-text v-for="(emotion, index) in emotions" :icon="emotion.icon" :key="index" :name="index.toString()" :text="emotion.text" />
+      <carousel-slide-icon-text v-for="(emotion, index) in emotions" :key="index" :icon="emotion.icon" :name="index.toString()" :text="emotion.text" />
     </carousel>
     <carousel height="16vh" :title="$t('i_need')">
       <carousel-slide-text v-for="(need, index) in needs" :key="index" :name="index.toString()" :text="need" />
@@ -13,6 +13,10 @@
 </template>
 
 <script>
+import semver from 'semver'
+import { version } from '../../package.json'
+import DialogWelcome from 'components/DialogWelcome'
+
 export default {
   name: 'Home',
   components: {
@@ -30,6 +34,16 @@ export default {
     actions: function () {
       return this.$store.state.configuration.actions
     }
+  },
+  mounted: function () {
+    if (this.$store.state.application.version === null || semver.lt(this.$store.state.application.version, version)) {
+      this.$q.dialog({
+        component: DialogWelcome,
+        parent: this
+      }).onOk(() => {
+        this.$store.commit('application/setVersion', { version })
+      })
+    }
   }
 }
 </script>

src/store/application.js

@@ -0,0 +1,25 @@
+export default {
+  namespaced: true,
+  state () {
+    return {
+      schema: '1.0.0',
+      version: null
+    }
+  },
+  mutations: {
+    setSchema: function (state, payload) {
+      state.schema = payload.schema
+    },
+    setVersion: function (state, payload) {
+      state.version = payload.version
+    }
+  },
+  actions: {
+    setSchema: function (context, payload) {
+      context.commit('setSchema', payload)
+    },
+    setVersion: function (context, payload) {
+      context.commit('setVersion', payload)
+    }
+  }
+}

src/store/index.js

@@ -2,7 +2,9 @@ import Vue from 'vue'
 import Vuex from 'vuex'
 import createPersistedState from 'vuex-persistedstate'
 
+import application from './application'
 import configuration from './configuration'
+import migratePersistedState from './migratePersistedState'
 
 Vue.use(Vuex)
 
@@ -18,10 +20,11 @@ Vue.use(Vuex)
 export default function (/* { ssrContext } */) {
   const Store = new Vuex.Store({
     modules: {
+      application,
       configuration
     },
     plugins: [
-      createPersistedState()
+      createPersistedState({ assertStorage: migratePersistedState })
     ],
 
     // enable strict mode (adds overhead!)

src/store/migratePersistedState.js

@@ -0,0 +1,25 @@
+export default function (storage) {
+  storage.setItem('@@', 1)
+  storage.removeItem('@@')
+
+  const item = storage.getItem('vuex')
+
+  if (item !== null) {
+    let state = JSON.parse(item)
+
+    if (state.application === undefined) {
+      const newState = {}
+
+      newState.application = {
+        schema: '1.0.0',
+        version: '1.0.0'
+      }
+
+      newState.configuration = state.configuration
+
+      state = newState
+    }
+
+    storage.setItem('vuex', JSON.stringify(state))
+  }
+}