Stockage de prefs utilisateur (ui) dans le localstorage. #33 (3f688d7c) · Commits · certic / Vue Jama

src/components/VueJama.vue

+42 −20

Original line number	Diff line number	Diff line
		@@ -113,7 +113,8 @@
		<v-col cols="6" class="ma-0 pa-0">
		<v-row class="ma-0 mt-2 d-flex justify-center align-center">

		<slot name="filter" v-if="isMosaicView \|\| isListingView">
		<slot name="filter" v-if="$store.getters['preferencesStore/isMosaicView']
		\|\| $store.getters['preferencesStore/isListView'] ">
		<jama-filter @filter-changed="reloadCurrentCollection"/>
		</slot>

		@@ -122,7 +123,7 @@
		</div>


		<jama-items-mosaic v-if="isMosaicView"
		<jama-items-mosaic v-if="$store.getters['preferencesStore/isMosaicView']"
		:dnd="!searchMode"
		@items-moved="reloadCurrentCollection"
		@about-selected="aboutResource"
		@@ -132,7 +133,7 @@
		@sort-options-changed="reloadCurrentCollection"
		@resource-dropped="resourceDropped">
		</jama-items-mosaic>
		<jama-items-list v-else-if="isListingView"
		<jama-items-list v-else-if="$store.getters['preferencesStore/isListView']"
		@sort-options-changed="reloadCurrentCollection"
		@items-moved="reloadCurrentCollection"
		@collection-selected="loadCollection"
		@@ -294,9 +295,9 @@ import {
		RESOURCES_MODE,
		UPLOAD_MODE,
		NB_DEFAULT_MODES,
		MOSAIC,
		LIST,
		FULLSCREEN
		// MOSAIC,
		// LIST,
		// FULLSCREEN
		} from "../const";
		import JamaPermissions from "../utils/JamaPermissions";
		import CollectionsTree from "./CollectionsTree";
		@@ -348,16 +349,15 @@ export default {
		pluginMode() {
		return this.mode >= NB_DEFAULT_MODES
		},
		isMosaicView() {
		return this.viewMode === MOSAIC;
		},
		isListingView() {
		return this.viewMode === LIST;
		},
		isFullscreenView() {
		console.log(this.viewMode === FULLSCREEN);
		return this.viewMode === FULLSCREEN
		},
		// isMosaicView() {
		// return this.viewMode === MOSAIC;
		// },
		// isListingView() {
		// return this.viewMode === LIST;
		// },
		// isFullscreenView() {
		// return this.viewMode === FULLSCREEN
		// },
		sidePaneVisible() {
		return (!this.hiddenRightPanel && this.currentCollection && this.currentCollection.parent) \|\| this.currentResource
		},
		@@ -408,6 +408,26 @@ export default {
		return this.treeDrawerCols + this.mainPaneCols
		},

		//mosaic / list / fullscreen
		viewMode: {
		get: function () {
		return this.$store.getters['preferencesStore/view'];
		},
		set: function (val) {
		this.$store.commit('preferencesStore/setView', val);
		}
		},

		//left side tree nav draw
		treeDrawer: {
		get: function () {
		return this.$store.getters['preferencesStore/treeDrawer'];
		},
		set: function (val) {
		this.$store.commit('preferencesStore/setTreeDrawer', val);
		}
		},

		...mapGetters([
		"appTitle",
		"appSubtitle",
		@@ -420,6 +440,7 @@ export default {
		"currentResource",
		"permissions",
		"projectsUserPermissions",
		// "preferencesStore/view",
		"isPickerMode"])
		},

		@@ -464,13 +485,13 @@ export default {
		mode: RESOURCES_MODE,
		metaMode: false,
		propertiesMode: false,
		viewMode: MOSAIC,
		//viewMode: MOSAIC,
		currentPage: 1,
		pageLength: 50,
		hiddenRightPanel: false,
		rightPaneMaximized: false,
		rootCollectionInfos: null,//usefull for root coll pagination
		treeDrawer: true
		//treeDrawer: true
		}
		},

		@@ -551,8 +572,9 @@ export default {
		this.loading = true;
		if (!this.trashMode) {
		EventBus.$emit('set-mode', RESOURCES_MODE);
		if (this.viewMode === FULLSCREEN)
		this.viewMode = MOSAIC;
		if (this.$store.getters['preferencesStore/isFullscreenView'])
		await this.$store.dispatch('preferencesStore/resetView');
		//this.viewMode = MOSAIC;
		}
		this.$store.commit('setCurrentResource', null);
		this.$store.commit('setCurrentCollection', collection);

src/store/JamaStore.js

+4 −1

Original line number	Diff line number	Diff line
		@@ -41,6 +41,7 @@ function findItem(id, items = null) {
		}, null);
		}

		import preferencesStore from './preferencesStore';

		export default new Vuex.Store({
		state: {
		@@ -525,5 +526,7 @@ export default new Vuex.Store({
		}

		},
		modules: {}
		modules: {
		preferencesStore: preferencesStore
		}
		})
		No newline at end of file

src/store/preferencesStore.js

0 → 100644

+43 −0

Original line number	Diff line number	Diff line
		const MOSAIC = 0;
		const FULLSCREEN = 1;
		const LIST = 2;
		const LOCAL_STORAGE_APP_ID='vue-jama';

		const preferencesStore = {
		namespaced: true,
		state: () => ({
		view : localStorage.getItem(LOCAL_STORAGE_APP_ID + '.view')
		? Number(localStorage.getItem(LOCAL_STORAGE_APP_ID + '.view'))
		: MOSAIC,

		treeDrawer : localStorage.getItem(LOCAL_STORAGE_APP_ID + '.treeDrawer')
		? localStorage.getItem(LOCAL_STORAGE_APP_ID + '.treeDrawer') === 'true'
		: true
		}),
		getters: {
		isFullscreenView: state => state.view === FULLSCREEN,
		isMosaicView: state => state.view === MOSAIC,
		isListView: state => state.view === LIST,
		view : state => state.view,
		treeDrawer : state => state.treeDrawer
		},
		mutations: {
		setView: (state, vm) => {
		state.view = vm
		localStorage.setItem(LOCAL_STORAGE_APP_ID + '.view', vm);
		},

		setTreeDrawer: (state, b) => {
		state.treeDrawer = b
		localStorage.setItem(LOCAL_STORAGE_APP_ID + '.treeDrawer', b);
		},

		},
		actions: {
		resetView(context){
		context.commit('setView', MOSAIC)
		}
		}
		}

		export default preferencesStore
		No newline at end of file