fcad-core-dragon 2.0.0-beta.1 → 2.0.0-beta.3

package/src/plugins/i18n.js

@@ -1,31 +1,44 @@
-/**
- * Merge locales message in project.
- * @summary To merge the locales dictionnary of this library with the locales that user will create
- * @param {Object} i18n - vue-i18n internalization object.
- */
-export default function mergeLocales(i18n) {
-  const deep = require('lodash') // provide deep merge of Object cf: https://attacomsian.com/blog/javascript-merge-objects
-
-  /* I18n internal methods for mutating messages property
-   * mergeLocaleMessage: ƒ mergeLocaleMessage(locale, message)// will merge message with new message object. But does not do a deep merge of object
-   * setLocaleMessage: ƒ setLocaleMessage(locale, message)// set the message with new message object
-   */
-
-  // This library locales files
-  const thisLocales = require.context(
-    '../$locales',
-    true,
-    /[A-Za-z0-9-_,\s]+\.json$/i
-  )
-
-  thisLocales.keys().forEach((key) => {
-    const matched = key.match(/([A-Za-z0-9-_]+)\./i)
-    if (matched && matched.length > 1) {
-      const locale = matched[1]
-      // Using lodash to deeply merge objects
-      const mergedMessages = deep.merge(i18n.messages[locale], thisLocales(key))
-      // Since merLocalMessage will do a shallow merge of the object. We will use setLocalMessage to replace the message with new message object
-      i18n.setLocaleMessage(locale, mergedMessages)
-    }
-  })
-}
+import _ from 'lodash'
+/**
+ * Merge locales message in project.
+ * @summary To merge the locales dictionnary of this library with the locales that user will create
+ * @param {Object} i18n - vue-i18n internalization object.
+ */
+export default function mergeLocales(i18n) {
+  //const deep = import('lodash') // provide deep merge of Object cf: https://attacomsian.com/blog/javascript-merge-objects
+
+  /* I18n internal methods for mutating messages property
+   * mergeLocaleMessage: ƒ mergeLocaleMessage(locale, message)// will merge message with new message object. But does not do a deep merge of object
+   * setLocaleMessage: ƒ setLocaleMessage(locale, message)// set the message with new message object
+   */
+
+  // This library locales files
+  // const thisLocales = require.context(
+  //   '../$locales',
+  //   true,
+  //   /[A-Za-z0-9-_,\s]+\.json$/i
+  // )
+
+  const thisLocales = import.meta.glob('../$locales/*.json', { eager: true })
+  for (const path in thisLocales) {
+    const matched = path.match(/([A-Za-z0-9-_]+)\./i)
+    if (matched && matched.length > 1) {
+      const locale = matched[1]
+      // Using lodash to deeply merge objects
+      const messagesDeepCopy = JSON.parse(JSON.stringify(i18n.messages[locale]))
+      const mergedMessages = _.merge(messagesDeepCopy, thisLocales[path])
+      // Since merLocalMessage will do a shallow merge of the object. We will use setLocalMessage to replace the message with new message object
+      i18n.setLocaleMessage(locale, mergedMessages)
+    }
+  }
+  // thisLocales.keys().forEach((key) => {
+  //   const matched = key.match(/([A-Za-z0-9-_]+)\./i)
+  //   if (matched && matched.length > 1) {
+  //     const locale = matched[1]
+  //     // Using lodash to deeply merge objects
+  //     const mergedMessages = deep.merge(i18n.messages[locale], thisLocales(key))
+  //     // Since merLocalMessage will do a shallow merge of the object. We will use setLocalMessage to replace the message with new message object
+  //     i18n.setLocaleMessage(locale, mergedMessages)
+  //   }
+  // })
+}

package/src/plugins/idb.js

@@ -1,212 +1,219 @@
-/*
- * idb library by jakearchibald: https://github.com/jakearchibald/idb
- */
-import { openDB, deleteDB, wrap, unwrap } from 'idb'
-//import {*} from "idb";
-let dataBase = null
-let dbName = '$crsDataBase' //test
-let storeName = '$lessonsStore' //test
-openDB, deleteDB, wrap, unwrap
-//$_id
-export const $idb = {
-  install(Vue) {
-    Vue.prototype.$idb = {
-      /*
-       * @ Description: create a indexedDB database
-       *   Open a data base in indexedDB if does not exist and create a store for the lessons package
-       *@ return Promise
-       */
-      async openDB() {
-        try {
-          if (!window.indexedDB) {
-            console.log(
-              "Your browser doesn't support a stable version of IndexedDB. Saving feature of your progress will not be available."
-            )
-            return
-          } else {
-            const db = await openDB(dbName, 1, {
-              upgrade(db) {
-                // Create a store of objects
-                const store = db.createObjectStore(storeName, {
-                  keyPath: '_$id',
-                  autoIncrement: true
-                })
-                // Create an index  for the data
-                store.createIndex('$idb_id', '$idb_id', { unique: true })
-                // Create an index  for the data
-                store.createIndex('$record', '$record', { unique: false })
-
-                //Create an index that is not unique (two person can have the same age)
-                store.createIndex('$last_edit', '$last_edit', { unique: false })
-              }
-            })
-            dataBase = db
-            //return (dataBase = db);
-          }
-        } catch (err) {
-          console.log('==> Erro ', err)
-        }
-      },
-
-      /*
-       * @Description: wrapper to insert new data in the store (entry is entered if doesn't already exist in db)
-       * @Params storeName {String}: name of the store
-       * @Params data {object}: new value to enter
-       * @Return promise
-       */
-      async insertDataInDB(data) {
-        try {
-          //Index param
-          const searchIndex = '$idb_id'
-          //search by package Id index
-          const value = await dataBase.getFromIndex(
-            storeName,
-            searchIndex,
-            data[searchIndex]
-          )
-
-          //Add entry to database if does not exist
-          if (!value) {
-            const addedItem = await dataBase.add(storeName, data)
-
-            return addedItem
-          }
-        } catch (err) {
-          console.log('Error..', err)
-        }
-      },
-
-      /*@Description - Helper to get all data existing in the store
-        @Param storeName {String} - Name of the store
-         *@Return Promise {array} of all entries
-         */
-      async getAllFromDB() {
-        try {
-          //Get all from the storeName order by last edit
-          const entryList = await dataBase.getAllFromIndex(
-            storeName,
-            'lastEdit'
-          )
-          return entryList
-        } catch (err) {
-          console.log('error...', err)
-        }
-      },
-
-      /*
-       *@Description - Helper to get one entry from  the store
-       *@Param target {String} - id of the entry
-       *@Return Promise {array} of all entries
-       */
-      async getFromDB(target) {
-        try {
-          //Index param
-          const searchIndex = '$idb_id'
-          //search by package Id index
-          const entry = await dataBase.getFromIndex(
-            storeName,
-            searchIndex,
-            target
-          )
-          return entry
-        } catch (err) {
-          console.log('error...', err)
-        }
-      },
-
-      /*
-       *@Description - Helper to update data in a store
-       * @Params storeName {String} - name of the store
-       * @Params index {String} - name of the index
-       * @Params target {String| num} - id of the element to update
-       * @Params newValue {Object} - new value to enter
-       *@return Promise
-       */
-      async updateDataInDB(target, newValue) {
-        try {
-          //Index param
-          const searchIndex = '$idb_id'
-
-          //search by package Id index
-          const existingRecord = await dataBase.getFromIndex(
-            storeName,
-            searchIndex,
-            target
-          )
-          //If there is an existing record update the record with new data
-          if (existingRecord) {
-            existingRecord.$record = newValue
-            existingRecord.$last_edit = Date.now()
-            const updatedItem = await dataBase.put(storeName, existingRecord)
-            //await this.getAllFromDB(storeName)
-            return updatedItem
-          }
-        } catch (err) {
-          console.log('Error: ', err)
-        }
-      },
-      /*
-       * @Description - Heleper to delete entry from the store
-       * @Params storeName {String} - name of the store
-       * @Params index {String} - name of the index
-       * @Params target {String| num} - id of the element to remove
-       * @Return reference of deleted item
-       */
-      async deleteDataInDB(target) {
-        try {
-          //Index param
-          const searchIndex = '$idb_id'
-
-          //search by package Id index
-          const existingRecord = await dataBase.getFromIndex(
-            storeName,
-            searchIndex,
-            target
-          )
-          //If there is an existing delete it from the store
-          if (existingRecord) {
-            const deletedItem = await dataBase.delete(
-              storeName,
-              existingRecord._$id
-            )
-
-            return deletedItem
-          }
-        } catch (err) {
-          console.log('Error: ', err)
-        }
-      },
-      /**
-       * @description creating a small save plug-in to save store state in the localStorage
-       * the plugin listen for mutations made to the Vuex store and store them in the local browser storage.
-       * Since the The handler is called after every mutation we want to limite the saving of data to application storage only
-       * when the mutation is affecting the user interaction.
-       * This prevent resetting the store to initial state when the browser refreshes
-       * Note: the plugin is used in the store.js
-       * @param {Object} store vuex Store
-       * @param {String} item package $idb_id
-       */
-      saveState(store, item) {
-        store.subscribe(async (mutation, state) => {
-          // Watch only for user interaction related mutation to save the data
-          if (mutation.type === 'UPDATE_USER_METADATA') {
-            // Open DB with a store
-            const search = await this.getFromDB(item)
-            if (Object.entries(state.$appStore.userMetaData).length && search) {
-              // Update the db store
-              await this.updateDataInDB(item, state.$appStore.userMetaData)
-              //==================================================
-            } else {
-              //Add Entry to db store
-              await this.insertDataInDB({
-                $idb_id: item,
-                $record: state.$appStore.userMetaData,
-                $last_edit: Date.now()
-              })
-            }
-          }
-        })
-      }
-    }
-  }
-}
+/*
+ * idb library by jakearchibald: https://github.com/jakearchibald/idb
+ */
+import { openDB } from 'idb'
+import $_ from 'lodash'
+//import { createApp } from 'vue'
+//import {*} from "idb";
+let dataBase = null
+let dbName = '$crsDataBase' //test
+let storeName = '$lessonsStore' //test
+//openDB, deleteDB, wrap, unwrap
+//$_id
+//const app = createApp({})
+export const $idb = {
+  install(app) {
+    app.config.globalProperties.$idb = {
+      /*
+       * @ Description: create a indexedDB database
+       *   Open a data base in indexedDB if does not exist and create a store for the lessons package
+       *@ return Promise
+       */
+      async openDB() {
+        try {
+          if (!window.indexedDB) {
+            console.log(
+              "Your browser doesn't support a stable version of IndexedDB. Saving feature of your progress will not be available."
+            )
+            return
+          } else {
+            const db = await openDB(dbName, 1, {
+              upgrade(db) {
+                // Create a store of objects
+                const store = db.createObjectStore(storeName, {
+                  keyPath: '_$id',
+                  autoIncrement: true
+                })
+                // Create an index  for the data
+                store.createIndex('$idb_id', '$idb_id', { unique: true })
+                // Create an index  for the data
+                store.createIndex('$record', '$record', { unique: false })
+
+                //Create an index that is not unique (two person can have the same age)
+                store.createIndex('$last_edit', '$last_edit', { unique: false })
+              }
+            })
+            dataBase = db
+            //return (dataBase = db);
+          }
+        } catch (err) {
+          console.log('==> Erro ', err)
+        }
+      },
+
+      /*
+       * @Description: wrapper to insert new data in the store (entry is entered if doesn't already exist in db)
+       * @Params storeName {String}: name of the store
+       * @Params data {object}: new value to enter
+       * @Return promise
+       */
+      async insertDataInDB(data) {
+        try {
+          //Index param
+          const searchIndex = '$idb_id'
+          //search by package Id index
+          const value = await dataBase.getFromIndex(
+            storeName,
+            searchIndex,
+            data[searchIndex]
+          )
+
+          //Add entry to database if does not exist
+          if (!value) {
+            const addedItem = await dataBase.add(storeName, $_.cloneDeep(data))
+
+            return addedItem
+          }
+        } catch (err) {
+          console.log('Error..', err)
+        }
+      },
+
+      /*@Description - Helper to get all data existing in the store
+        @Param storeName {String} - Name of the store
+         *@Return Promise {array} of all entries
+         */
+      async getAllFromDB() {
+        try {
+          //Get all from the storeName order by last edit
+          const entryList = await dataBase.getAllFromIndex(
+            storeName,
+            'lastEdit'
+          )
+          return entryList
+        } catch (err) {
+          console.log('error...', err)
+        }
+      },
+
+      /*
+       *@Description - Helper to get one entry from  the store
+       *@Param target {String} - id of the entry
+       *@Return Promise {array} of all entries
+       */
+      async getFromDB(target) {
+        try {
+          //Index param
+          const searchIndex = '$idb_id'
+          //search by package Id index
+          const entry = await dataBase.getFromIndex(
+            storeName,
+            searchIndex,
+            target
+          )
+          return entry
+        } catch (err) {
+          console.log('error...', err)
+        }
+      },
+
+      /*
+       *@Description - Helper to update data in a store
+       * @Params storeName {String} - name of the store
+       * @Params index {String} - name of the index
+       * @Params target {String| num} - id of the element to update
+       * @Params newValue {Object} - new value to enter
+       *@return Promise
+       */
+      async updateDataInDB(target, newValue) {
+        try {
+          //Index param
+          const searchIndex = '$idb_id'
+
+          //search by package Id index
+          const existingRecord = await dataBase.getFromIndex(
+            storeName,
+            searchIndex,
+            target
+          )
+          //If there is an existing record update the record with new data
+          if (existingRecord) {
+            existingRecord.$record = newValue
+            existingRecord.$last_edit = Date.now()
+            const updatedItem = await dataBase.put(
+              storeName,
+              $_.cloneDeep(existingRecord)
+            )
+            //await this.getAllFromDB(storeName)
+            return updatedItem
+          }
+        } catch (err) {
+          console.log('Error: ', err)
+        }
+      },
+      /*
+       * @Description - Heleper to delete entry from the store
+       * @Params storeName {String} - name of the store
+       * @Params index {String} - name of the index
+       * @Params target {String| num} - id of the element to remove
+       * @Return reference of deleted item
+       */
+      async deleteDataInDB(target) {
+        try {
+          //Index param
+          const searchIndex = '$idb_id'
+
+          //search by package Id index
+          const existingRecord = await dataBase.getFromIndex(
+            storeName,
+            searchIndex,
+            target
+          )
+          //If there is an existing delete it from the store
+          if (existingRecord) {
+            const deletedItem = await dataBase.delete(
+              storeName,
+              existingRecord._$id
+            )
+
+            return deletedItem
+          }
+        } catch (err) {
+          console.log('Error: ', err)
+        }
+      },
+      /**
+       * @description creating a small save plug-in to save store state in the localStorage
+       * the plugin listen for changes made to the Pinia store store to store them in the browser storage.
+       * Since the The handler is called after every actions we want to limit the saving of data to storage only
+       * when the changes are affecting the user interaction.
+       * This prevent resetting the store to initial state when the browser refreshes
+       * @param {Object} store Pinia Store
+       * @param {String} item package $idb_id
+       */
+      async saveState(store, item) {
+        store.$onAction(async ({ name, store, args, after }) => {
+          //Should only track changes actions on userMetadata
+          if (!['updateUserMetaData', 'setUserMetaData'].includes(name)) return
+
+          //  Open DB with a store
+          const search = await this.getFromDB(item)
+
+          if (Object.entries(store.$state.userMetaData).length && search) {
+            // Update the db store
+            await this.updateDataInDB(item, store.$state.userMetaData)
+            //==================================================
+          } else {
+            //Add Entry to db store
+            await this.insertDataInDB({
+              $idb_id: item,
+              $record: store.$state.userMetaData,
+              $last_edit: Date.now()
+            })
+          }
+          //})
+        })
+      }
+    }
+  }
+}

package/src/plugins/save.js

@@ -1,37 +1,37 @@
-/* creating a small save plug-in to save store state in the localStorage
- * the plugin listen for mutations made to the Vuex store and store them in the local browser storage.
- * This prevent reseting the store to initial state when the browser refreshes
- * Note: the plugin is used in the store.js
- */
-export function saveStatePlugin(store) {
-  store.subscribe((mutation, state) => {
-    // save the user data
-    if (Object.entries(state.$appStore.userMetaData).length) {
-      localStorage.setItem(
-        'userData',
-        JSON.stringify(state.$appStore.userMetaData)
-      )
-    } else if (
-      !localStorage.getItem('userData') &&
-      !Object.entries(state.$appStore.userMetaData).length
-    ) {
-      localStorage.setItem('userData', JSON.stringify({}))
-    }
-  })
-}
-
-/**
- * creating a small save plug-in to get  stored state from the localStorage
- */
-export function getSavedStatePlugin(type, id) {
-  if (localStorage.getItem('thisModule')) {
-    const savedData = JSON.parse(localStorage.getItem('thisModule'))
-
-    if (type === 'module' && savedData.id === id) return savedData
-    if (type === 'page' && savedData.children.length) {
-      return savedData.children.find((p) => id === p.id)
-    }
-    return JSON.parse(localStorage.getItem('thisModule'))
-  }
-  return null
-}
+/* creating a small save plug-in to save store state in the localStorage
+ * the plugin listen for mutations made to the Pinia store and store them in the local browser storage.
+ * This prevent reseting the store to initial state when the browser refreshes
+ * Note: the plugin is used in the store.js
+ */
+export function saveStatePlugin(store) {
+  store.subscribe((mutation, state) => {
+    // save the user data
+    if (Object.entries(state.$appStore.userMetaData).length) {
+      localStorage.setItem(
+        'userData',
+        JSON.stringify(state.$appStore.userMetaData)
+      )
+    } else if (
+      !localStorage.getItem('userData') &&
+      !Object.entries(state.$appStore.userMetaData).length
+    ) {
+      localStorage.setItem('userData', JSON.stringify({}))
+    }
+  })
+}
+
+/**
+ * creating a small save plug-in to get  stored state from the localStorage
+ */
+export function getSavedStatePlugin(type, id) {
+  if (localStorage.getItem('thisModule')) {
+    const savedData = JSON.parse(localStorage.getItem('thisModule'))
+
+    if (type === 'module' && savedData.id === id) return savedData
+    if (type === 'page' && savedData.children.length) {
+      return savedData.children.find((p) => id === p.id)
+    }
+    return JSON.parse(localStorage.getItem('thisModule'))
+  }
+  return null
+}