diff --git a/src/App.vue b/src/App.vue index 0583651..7a0036a 100644 --- a/src/App.vue +++ b/src/App.vue @@ -2,7 +2,7 @@
- +
@@ -45,6 +45,8 @@ import LeftPanel from '@/components/LeftPanel.vue' import LottieAnimation from "lottie-vuejs/src/LottieAnimation.vue"; +import { StoreType } from '@/store'; + interface AnimData { direction: number; currentTime: number; @@ -73,8 +75,6 @@ interface ILottieAnimation { }, }) export default class App extends Vue { - public leftPanelClosed: boolean = true; - @Ref('close-icon') public readonly closeIcon!: ILottieAnimation; setAnimController(controller: IAnimController) { @@ -111,6 +111,17 @@ export default class App extends Vue { this.leftPanelClosed = true; } + + get leftPanelClosed(): boolean { + return (this.$store as StoreType).state.app.leftPanelClosed; + } + + set leftPanelClosed(value: boolean) { + const store = (this.$store as StoreType); + + store.dispatch('app/setLeftPanelCloseStatus', value) + .catch(error => console.log(error)); + } } diff --git a/src/components/LeftPanel.vue b/src/components/LeftPanel.vue index be60f26..037e64b 100644 --- a/src/components/LeftPanel.vue +++ b/src/components/LeftPanel.vue @@ -43,26 +43,36 @@ diff --git a/src/store/albums/actions.ts b/src/store/albums/actions.ts index 681f072..8374419 100644 --- a/src/store/albums/actions.ts +++ b/src/store/albums/actions.ts @@ -1,9 +1,7 @@ import { Actions } from 'vuex-smart-module'; -import Vue from 'vue'; -import { AxiosResponse, AxiosError } from 'axios'; -import AlbumsState from './state'; +import AlbumsState, { IAlbum } from './state'; import AlbumsGetters from './getters'; -import AlbumsMutations from './muttations'; +import AlbumsMutations from './mutations'; export default class AlbumsActions extends Actions< AlbumsState, @@ -11,5 +9,53 @@ export default class AlbumsActions extends Actions< AlbumsMutations, AlbumsActions > { - + $init() { + const albums: IAlbum[] = [ + { + name: 'Test', + description: 'Test description', + protected: false, + + folderName: 'test', + files: [ + 'p (1).jpg', + 'p (2).jpg', + 'p (3).jpg', + 'p (4).jpg', + 'p (5).jpg', + 'p (6).jpg', + ] + }, + { + name: 'Test 2', + description: 'Test 2 description', + protected: false, + + folderName: 'test2', + files: [ + 'p (1).jpg', + 'p (2).jpg', + 'p (3).jpg', + 'p (4).jpg', + 'p (5).jpg', + ] + }, + { + name: 'Test 3', + description: 'Test 3 description', + protected: false, + + folderName: 'test3', + files: [ + 'p (1).jpg', + 'p (2).jpg', + 'p (3).jpg', + 'p (4).jpg', + 'p (5).jpg', + ] + } + ]; + + setTimeout(() => this.commit('updateAlbums', albums), 500); + } } diff --git a/src/store/albums/index.ts b/src/store/albums/index.ts index 0c28efa..bf72a53 100644 --- a/src/store/albums/index.ts +++ b/src/store/albums/index.ts @@ -1,7 +1,7 @@ import { Module } from 'vuex-smart-module'; import AlbumsState from './state'; import AlbumsGetters from './getters'; -import AlbumsMutations from './muttations'; +import AlbumsMutations from './mutations'; import AlbumsActions from './actions'; diff --git a/src/store/albums/muttations.ts b/src/store/albums/mutations.ts similarity index 100% rename from src/store/albums/muttations.ts rename to src/store/albums/mutations.ts diff --git a/src/store/app/actions.ts b/src/store/app/actions.ts new file mode 100644 index 0000000..9b8e3b1 --- /dev/null +++ b/src/store/app/actions.ts @@ -0,0 +1,15 @@ +import { Actions } from 'vuex-smart-module'; +import AppState from './state'; +import AppGetters from './getters'; +import AppMutations from './mutations'; + +export default class AppActions extends Actions< + AppState, + AppGetters, + AppMutations, + AppActions +> { + setLeftPanelCloseStatus(value: boolean) { + this.commit("setLeftPanelCloseStatus", value); + } +} diff --git a/src/store/app/getters.ts b/src/store/app/getters.ts new file mode 100644 index 0000000..d0bfc87 --- /dev/null +++ b/src/store/app/getters.ts @@ -0,0 +1,6 @@ +import { Getters } from 'vuex-smart-module'; +import AppState from './state'; + +export default class AppGetters extends Getters { + +} diff --git a/src/store/app/index.ts b/src/store/app/index.ts new file mode 100644 index 0000000..f5446ac --- /dev/null +++ b/src/store/app/index.ts @@ -0,0 +1,16 @@ +import { Module } from 'vuex-smart-module'; +import AppState from './state'; +import AppGetters from './getters'; +import AppMutations from './mutations'; +import AppActions from './actions'; +import AlbumsMutations from '../albums/mutations'; + + +const appModule = new Module({ + state: AppState, + getters: AppGetters, + mutations: AppMutations, + actions: AppActions, +}); + +export default appModule; diff --git a/src/store/app/mutations.ts b/src/store/app/mutations.ts new file mode 100644 index 0000000..9c39985 --- /dev/null +++ b/src/store/app/mutations.ts @@ -0,0 +1,8 @@ +import { Mutations } from 'vuex-smart-module'; +import AppState from './state'; + +export default class AppMutations extends Mutations { + setLeftPanelCloseStatus(value: boolean) { + this.state.leftPanelClosed = value; + } +} diff --git a/src/store/app/state.ts b/src/store/app/state.ts new file mode 100644 index 0000000..874ad09 --- /dev/null +++ b/src/store/app/state.ts @@ -0,0 +1,3 @@ +export default class AppState { + leftPanelClosed: boolean = true; +} diff --git a/src/store/index.ts b/src/store/index.ts index aa0ffea..bdb8aaf 100644 --- a/src/store/index.ts +++ b/src/store/index.ts @@ -7,11 +7,15 @@ import { Store } from 'vuex'; import albums from './albums'; import albumsState from './albums/state'; +import app from './app'; +import appState from './app/state'; + Vue.use(Vuex); interface IStore { - albums: albumsState + albums: albumsState, + app: appState } export type StoreType = Store; @@ -20,6 +24,7 @@ const store: StoreType = createStore( new Module({ modules: { albums, + app } }), { diff --git a/src/views/Album.vue b/src/views/Album.vue index e2e24d6..33af64f 100644 --- a/src/views/Album.vue +++ b/src/views/Album.vue @@ -1,6 +1,10 @@ diff --git a/src/views/Home.vue b/src/views/Home.vue index 70d7411..db46f56 100644 --- a/src/views/Home.vue +++ b/src/views/Home.vue @@ -11,11 +11,13 @@