diff --git a/components/navigation/modeModal.vue b/components/navigation/modeModal.vue index f1fb7ad1..a3465862 100644 --- a/components/navigation/modeModal.vue +++ b/components/navigation/modeModal.vue @@ -11,8 +11,8 @@ icon-left="folder-account" class="fullWidth customButton" />
- +
@@ -43,6 +43,12 @@ export default { }); this.$parent.close(); }, + goToPublic() { + this.$router.push({ + path: "/public/pictalk", + }); + this.$parent.close(); + } }, computed: { sharedLink() { diff --git a/components/navigation/pictalk-navbar.vue b/components/navigation/pictalk-navbar.vue index 161be3cc..3bf4e7ee 100644 --- a/components/navigation/pictalk-navbar.vue +++ b/components/navigation/pictalk-navbar.vue @@ -261,6 +261,14 @@ export default { } }, watch: { + "$route.query.fatherCollectionId": function (newVal, oldVal) { + if (newVal != oldVal) { + if (!newVal) return; + console.log("navigation changed") + this.$store.commit("pushNavigation", newVal); + console.log(this.$store.getters.getNavigation) + } + }, $route(to, from) { if (to.path.includes("pictalk")) { this.icon = "home"; @@ -350,10 +358,9 @@ export default { }); }, navigateToParentCollection() { - actionsHistory - const speechCollectionArray = this.$store.getters.getSpeech.filter((picto) => !picto.sidebar && picto.collection); - const speechCollectionArrayBeforePosition = speechCollectionArray.slice(0, speechCollectionArray.findIndex((picto) => picto.id == parseInt(this.$route.query.fatherCollectionId))); - if (speechCollectionArrayBeforePosition.length < 1) { + const navigation = this.$store.getters.getNavigation + console.log("navigation", navigation) + if (navigation.length < 2) { if (this.publicMode) { this.$router.push( { @@ -374,9 +381,10 @@ export default { } } } else { + console.log("navigating to", navigation[navigation.length - 2]) this.$router.push({ path: this.publicMode ? "/public/pictalk" : "/pictalk", - query: { ...this.$route.query, fatherCollectionId: speechCollectionArrayBeforePosition[speechCollectionArrayBeforePosition.length - 1]?.id }, + query: { ...this.$route.query, fatherCollectionId: navigation[navigation.length - 2] }, }); } }, diff --git a/components/pictos/pictoBar.vue b/components/pictos/pictoBar.vue index a0a99f2b..08fbaf0f 100644 --- a/components/pictos/pictoBar.vue +++ b/components/pictos/pictoBar.vue @@ -223,6 +223,7 @@ export default { } } else { if (pictalkSpeech.length <= 1) { + this.$store.commit("resetNavigation"); if (this.publicMode) { this.$router.push("/public/pictalk?fatherCollectionId=346"); } else { @@ -253,6 +254,7 @@ export default { this.$store.commit("removeSpeech"); }, eraseSpeech() { + this.$store.commit("resetNavigation"); if (this.publicMode) { this.$router.push("/public/pictalk?fatherCollectionId=346"); this.$store.commit("eraseSpeech"); diff --git a/middleware/axios.js b/middleware/axios.js index 521abfcd..9eb8ae7a 100644 --- a/middleware/axios.js +++ b/middleware/axios.js @@ -12,17 +12,4 @@ export default function (context) { (error) => { return Promise.reject(error); }); - - /* -axios.interceptors.response.use((response) => { - // If err 401 redirect to homepage with notifications - return response; -}, async (error) => { - if (error.response?.status == 401) { - await context.store.dispatch("logout"); - context.store.commit('editUser', {}); - context.redirect('/'); - return Promise.reject(error); - } -});*/ } \ No newline at end of file diff --git a/mixins/pictogram.js b/mixins/pictogram.js index 7b3978a5..998b8dc1 100644 --- a/mixins/pictogram.js +++ b/mixins/pictogram.js @@ -80,7 +80,6 @@ export default { }); if (this.picto.collection == true) { this.$router.push({ - path: "/pictalk", query: { ...this.$route.query, fatherCollectionId: this.picto.id }, }); } diff --git a/nuxt.config.js b/nuxt.config.js index cec34e1b..1ea43fe9 100644 --- a/nuxt.config.js +++ b/nuxt.config.js @@ -1,6 +1,6 @@ import pkg from './package.json' export default { - ssr: true, + ssr: false, target: 'static', server: { host: '0.0.0.0', // default: localhost, @@ -12,9 +12,6 @@ export default { apiURL: process.env.API_URL || "http://localhost:3001", clientVersion: pkg.version, }, - generate: { - fallback: true - }, meta: { ogTitle: false, ogDescription: false, diff --git a/pages/index.vue b/pages/index.vue index 22753e0b..f0aa48f5 100644 --- a/pages/index.vue +++ b/pages/index.vue @@ -267,7 +267,6 @@ export default { } } }, - middleware: ["check-auth"], methods: { openSignUpModal() { this.$buefy.modal.open({ diff --git a/pages/public/pictalk/index.vue b/pages/public/pictalk/index.vue index f3e0808d..7035f46f 100644 --- a/pages/public/pictalk/index.vue +++ b/pages/public/pictalk/index.vue @@ -42,6 +42,26 @@ export default { return "#f5f5f5"; } }, + sidebarPictoId() { + return this.$store.getters.getSidebarId; + }, + fatherCollectionId() { + return this.$route.query.fatherCollectionId; + }, + }, + watch: { + async fatherCollectionId(fatherCollectionId, previousId) { + if (fatherCollectionId && fatherCollectionId != previousId) { + await this.fetchCollection(fatherCollectionId); + this.pictos = await this.loadedPictos(); + } + }, + async sidebarPictoId(sidebarId, previousId) { + if (sidebarId && sidebarId != previousId) { + await this.fetchCollection(sidebarId); + this.sidebarPictos = await this.loadedSidebarPictos(); + } + }, }, async fetch() { if (process.client) { @@ -71,6 +91,7 @@ export default { const collection = await this.$store.dispatch("fetchCollection", collectionId); return collection; } catch (error) { + console.log(error); const notif = this.$buefy.notification.open({ duration: 4500, message: this.$t("LostConnectivity"), diff --git a/plugins/dexieDB.js b/plugins/dexieDB.js index 36bed21f..7b039bab 100644 --- a/plugins/dexieDB.js +++ b/plugins/dexieDB.js @@ -1,5 +1,17 @@ export let db; -if (process.client) { + +export async function getDatabase() { + if (db.isOpen()) { + console.log("Database is already open"); + return db; + } else { + console.log("Database is not open") + await db.open(); + return db; + } +} + +function initializeDatabase() { const Dexie = require('dexie').Dexie; let username = 'default'; const data = JSON.parse(window.localStorage.getItem('pictalk-data')); @@ -40,4 +52,6 @@ export function createDatabaseForUser(username) { }); } return db.open(); -} \ No newline at end of file +} + +initializeDatabase(); \ No newline at end of file diff --git a/store/index.js b/store/index.js index 7b1d8cba..0a813da4 100644 --- a/store/index.js +++ b/store/index.js @@ -1,10 +1,8 @@ import axios from "axios"; import Cookie from "js-cookie"; -function getDexieDB() { - if (process.client) { - return require('~/plugins/dexieDB').db; - } +async function getDexieDB() { + return require('~/plugins/dexieDB').getDatabase(); } export const strict = false; @@ -21,6 +19,7 @@ axios.interceptors.request.use((config) => { },); export const state = () => ({ + navigation: [], token: null, pictoSpeech: [], public: [], @@ -38,6 +37,7 @@ export const state = () => ({ export const mutations = { resetStore(state) { + state.navigation = []; state.pictoSpeech = []; state.rootId = null; state.copyCollectionId = null; @@ -114,6 +114,17 @@ export const mutations = { }, setDragndrop(state, dragndrop) { state.dragndrop = dragndrop; + }, + pushNavigation(state, navigation) { + if (state.navigation[state.navigation.length - 1] == navigation) return; + state.navigation.push(navigation); + }, + resetNavigation(state) { + if (state.user.root) { + state.navigation = [String(state.user.root)]; + } else { + state.navigation = []; + } } }; export const actions = { @@ -121,66 +132,70 @@ export const actions = { if (!Array.isArray(newCollections)) { newCollections = new Array(newCollections); } + const db = await getDexieDB(); // Dexie transition - await getDexieDB().collection.bulkPut(newCollections); + await db.collection.bulkPut(newCollections); }, async dbRemoveCollection(state, removedCollection) { - // Dexie transition - await getDexieDB().collection.delete(removedCollection.id); + const db = await getDexieDB(); + await db.collection.delete(removedCollection.id); }, async dbEditCollection(state, editedCollections) { if (!Array.isArray(editedCollections)) { editedCollections = new Array(editedCollections); } + const db = await getDexieDB(); editedCollections = await Promise.all(editedCollections.map(async (collection) => { - const col = await getDexieDB().collection.get(collection.id) + const col = await db.collection.get(collection.id) Object.assign(col, collection); col.collections = col.collections.filter((v, i, a) => a.findIndex(t => (t.id === v.id)) === i); col.pictos = col.pictos.filter((v, i, a) => a.findIndex(t => (t.id === v.id)) === i); return col; })); console.log(editedCollections); - return getDexieDB().collection.bulkPut(editedCollections); + return db.collection.bulkPut(editedCollections); }, async dbAddPicto(state, pictos) { if (!Array.isArray(pictos)) { pictos = new Array(pictos); } let collection; + const db = await getDexieDB(); for (let picto of pictos) { - collection = await getDexieDB().collection.get(picto.fatherCollectionId); + collection = await db.collection.get(picto.fatherCollectionId); if (collection) { const pictoIndex = collection.pictos.findIndex( pct => pct.id === picto.id ); if (collection && pictoIndex == -1) { collection.pictos.push(picto); - await getDexieDB().collection.put(collection); + await db.collection.put(collection); } } } // Dexie transition - await getDexieDB().pictogram.bulkPut(pictos); + await db.pictogram.bulkPut(pictos); }, async dbEditPicto(state, editedPictos) { if (!Array.isArray(editedPictos)) { editedPictos = new Array(editedPictos); } + const db = await getDexieDB(); editedPictos = await Promise.all(editedPictos.map(async (picto) => { - const pct = await getDexieDB().pictogram.get(picto.id) + const pct = await db.pictogram.get(picto.id) Object.assign(pct, picto); return pct; })); - await getDexieDB().pictogram.bulkPut(editedPictos); + await db.pictogram.bulkPut(editedPictos); }, async dbResetCollections(state) { - // Dexie transition - await getDexieDB().collection.clear(); + const db = await getDexieDB(); + await db.collection.clear(); }, async dbSetCollections(state, collections) { - // Dexie transition - await getDexieDB().collection.bulkPut(collections); + const db = await getDexieDB(); + await db.collection.bulkPut(collections); }, async fetchCollection(vuexContext, collectionId) { @@ -226,11 +241,12 @@ export const actions = { await vuexContext.dispatch('dbEditCollection', { ...targetCollection }); }, - resetCollections(vuexContext) { + async resetCollections(vuexContext) { vuexContext.commit("resetCollections"); // Dexie transition - getDexieDB().collection.clear(); + const db = await getDexieDB(); + await db.collection.clear(); }, async getPublicBundles(vuexContext) { try { @@ -516,12 +532,9 @@ export const actions = { } expirationDate = jwtExpirationDate.split("=")[1]; } - } else if (process.client) { + } else { token = localStorage.getItem("token"); expirationDate = localStorage.getItem("tokenExpiration"); - } else { - token = null; - expirationDate = null; } if (new Date().getTime() > +expirationDate || !token) { vuexContext.dispatch("logout"); @@ -537,7 +550,8 @@ export const actions = { Cookie.set("expirationDate", expirationDate, { sameSite: 'none', secure: true, expires: 7 }); } }, - logout(vuexContext) { + async logout(vuexContext) { + console.log("Logging out") vuexContext.commit("clearToken"); Cookie.remove("jwt"); Cookie.remove("expirationDate"); @@ -545,7 +559,11 @@ export const actions = { localStorage.removeItem("token"); localStorage.removeItem("tokenExpiration"); } - getDexieDB().delete(); + // Check if dexie db is different from the default one + if (vuexContext.state.user.username) { + const db = await getDexieDB(); + db.delete(); + } vuexContext.commit("resetStore"); }, async getUser(vuexContext) { @@ -770,27 +788,33 @@ export const actions = { return notifications; }, async getCollections(vuexContext) { - return getDexieDB().collection.toArray(); + const db = await getDexieDB(); + return db.collection.toArray(); }, async getCollectionFromId(vuexContext, id) { - return getDexieDB().collection.get(id); + const db = await getDexieDB(); + return db.collection.get(id); }, async getCollectionsFromFatherCollectionId(vuexContext, fatherCollectionId) { - const collection = await getDexieDB().collection.get(fatherCollectionId); + const db = await getDexieDB(); + const collection = await db.collection.get(fatherCollectionId); return Promise.all(collection.collections.map(async (collection) => { - return getDexieDB().collection.get(collection.id); + return db.collection.get(collection.id); })); }, async getPictos(state) { - return getDexieDB().pictogram.toArray(); + const db = await getDexieDB(); + return db.pictogram.toArray(); }, async getPictoFromId(state, id) { - return getDexieDB().pictogram.get(id); + const db = await getDexieDB(); + return db.pictogram.get(id); }, async getPictosFromFatherCollectionId(state, fatherCollectionId) { - const collection = await getDexieDB().collection.get(fatherCollectionId); + const db = await getDexieDB(); + const collection = await db.collection.get(fatherCollectionId); return Promise.all(collection.pictos.map(async (picto) => { - return getDexieDB().pictogram.get(picto.id) + return db.pictogram.get(picto.id) })); }, } @@ -845,6 +869,9 @@ export const getters = { getTtsBoundarySupport(state) { return state.ttsBoundarySupport; }, + getNavigation(state) { + return state.navigation; + } }; async function parseAndUpdateEntireCollection(vuexContext, collection, download = false) { @@ -1001,10 +1028,10 @@ async function parseAndUpdatePictogram(vuexContext, picto) { } async function getCollectionFromId(vuexContext, id) { - // Dexie transition - return getDexieDB().collection.get(id); + const db = await getDexieDB(); + return db.collection.get(id); } async function getPictoFromId(vuexContext, id) { - // Dexie transition - return getDexieDB().pictogram.get(id); + const db = await getDexieDB(); + return db.pictogram.get(id); }