Add albums cover, fix left bar icon

src/App.vue

@@ -28,8 +28,7 @@
       <vue-scroll style="height: 100vh" :ops="{scrollPanel: {scrollingX: false}}">
         <router-view class="w-100 content-body"
                     :class="{'content-body-when-left-panel-open': !leftPanelClosed}"
-                    style="min-height: 100vh"
-                    :leftPanelClosed="leftPanelClosed"/>
+                    style="min-height: 100vh"/>
       </vue-scroll>
     </div>
   </div>
@@ -37,7 +36,7 @@
 
 <script lang="ts">
 import 'reflect-metadata';
-import { Component, Vue, Ref } from 'vue-property-decorator';
+import { Component, Vue, Ref, Watch } from 'vue-property-decorator';
 
 import VueScroll, { Config } from 'vuescroll';
 
@@ -100,16 +99,14 @@ export default class App extends Vue {
     this.leftPanelClosed = !this.leftPanelClosed;
   }
 
-  closeLeftPanel() {
-    if (this.leftPanelClosed) {
+  changeLeftPanelStatus(status: boolean) {
+    if (!this.leftPanelClosed) {
       this.closeIcon.anim.setDirection(1);
       this.closeIcon.anim.play();
     } else {
       this.closeIcon.anim.setDirection(-1);
       this.closeIcon.anim.play();
     }
-
-    this.leftPanelClosed = true;
   }
 
   get leftPanelClosed(): boolean {
@@ -122,6 +119,12 @@ export default class App extends Vue {
     store.dispatch('app/setLeftPanelCloseStatus', value)
       .catch(error => console.log(error));
   }
+
+  @Watch('leftPanelClosed')
+  onLeftPanelClosedChange(val: boolean, oldValue: boolean) {
+    console.log(val, oldValue);
+    this.changeLeftPanelStatus(val);
+  }
 }
 </script>
 

src/components/LeftBlock.vue

@@ -10,9 +10,15 @@
 </template>
 
 <script lang="ts">
+import 'reflect-metadata';
 import { Component, Prop, Vue } from 'vue-property-decorator';
 
-@Component
+import { StoreType } from '@/store';
+
+
+@Component({
+  name: 'LeftBlock'
+})
 export default class LeftBlock extends Vue {
   @Prop({required: true}) public readonly title!: string;
 
@@ -20,10 +26,12 @@ export default class LeftBlock extends Vue {
 
   @Prop({required: true}) public readonly picture!: string;
 
-  @Prop({required: true}) public readonly leftPanelClosed!: boolean;
-
   get backgroundStyle(): string {
-    return `url('${this.picture}')`
+    return `url('${this.picture}')`;
+  }
+
+  get leftPanelClosed(): boolean {
+    return (this.$store as StoreType).state.app.leftPanelClosed;
   }
 }
 </script>

src/store/albums/actions.ts

@@ -15,6 +15,7 @@ export default class AlbumsActions extends Actions<
         name: 'Test',
         description: 'Test description',
         protected: false,
+        coverFileName: 'p (1).jpg',
   
         folderName: 'test',
         files: [
@@ -30,6 +31,7 @@ export default class AlbumsActions extends Actions<
         name: 'Test 2',
         description: 'Test 2 description',
         protected: false,
+        coverFileName: 'p (1).jpg',
   
         folderName: 'test2',
         files: [
@@ -44,6 +46,7 @@ export default class AlbumsActions extends Actions<
         name: 'Test 3',
         description: 'Test 3 description',
         protected: false,
+        coverFileName: 'p (1).jpg',
   
         folderName: 'test3',
         files: [

src/store/albums/state.ts

@@ -1,6 +1,7 @@
 export interface IAlbum {
   name: string;
   description: string;
+  coverFileName: string;
   protected: boolean;
 
   folderName: string;

src/views/Album.vue

@@ -1,11 +1,9 @@
 <template>
   <div>
     <LeftBlock 
-      title="HOME" 
-      description="kreorg photos" 
-      picture="/pictures/home.jpg" 
-      :leftPanelClosed="leftPanelClosed"></LeftBlock>
-    
+      :title="title" 
+      :description="description" 
+      :picture="picture"></LeftBlock>
   </div>
 </template>
 
@@ -13,6 +11,9 @@
 import 'reflect-metadata';
 import { Vue, Component, Prop } from 'vue-property-decorator';
 
+import { StoreType } from '@/store';
+import { IAlbum } from '@/store/albums/state';
+
 import LeftBlock from '@/components/LeftBlock.vue';
 
 
@@ -23,7 +24,37 @@ import LeftBlock from '@/components/LeftBlock.vue';
   }
 })
 export default class AlbumPage extends Vue {
-  @Prop({required: true}) public readonly leftPanelClosed!: boolean;
+  get album(): IAlbum | null {
+    const albums = (this.$store as StoreType).state.albums.albums;
+
+    if (albums === null)
+      return null;
+
+    const album = albums.filter(item => item.folderName === this.$route.params.name);
+
+    if (album.length === 0)
+      return null;
+
+    return album[0];
+  }
+
+  get title(): string {
+    if (this.album === null)
+      return '';
+    return this.album.name;
+  }
+
+  get description(): string {
+    if (this.album === null)
+      return '';
+    return this.album.description;
+  }
+
+  get picture(): string {
+    if (this.album === null)
+      return '';
+    return `/pictures/albums/${this.album.folderName}/${this.album.coverFileName}`
+  }
 }
 </script>
 

src/views/Home.vue

@@ -1,6 +1,9 @@
 <template>
   <div>
-    <LeftBlock title="HOME" description="kreorg photos" picture="/pictures/home.jpg" :leftPanelClosed="leftPanelClosed"></LeftBlock>
+    <LeftBlock 
+      title="HOME" 
+      description="kreorg photos" 
+      picture="/pictures/home.jpg"></LeftBlock>
     <div class="albums-wrapper">
       <div class="albums">
         <Album v-for="album in albums" :key="album.folderName" :data="album"></Album>
@@ -28,8 +31,6 @@ import { StoreType } from '@/store';
   }
 })
 export default class Home extends Vue {
-  @Prop({required: true}) public readonly leftPanelClosed!: boolean;
-
   public albums: IAlbum[] = [];
 
   public timeoutsIds: number[] = [];