@@ -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 @@