Add tab functionality in CreateNodeModal

Author: Andrei0872

src/renderer/components/modals/create-note-modal/CreateNoteModal.html

@@ -5,32 +5,39 @@
       <h2 class="text-red" v-if="displayDupError">Oh sorry, you can't have duplicated name in your note files...</h2>
     </header>
 
-    <Tab v-if="files.length" :dataArr="files" v-slot:name="{ item }">
+    <Tab
+      ref="tab"
+      v-if="files.length"
+      :dataArr="files"
+      v-slot:name="{ item }"
+      @onFileSelected="selectedFile = $event"
+    >
       {{ item.name }}
     </Tab>
 
+    <!-- Selected file -->
     <div v-if="selectedFile !== null" :class="{ 'c-selected-file': true }">
       <b-field horizontal label="Name" grouped>
-          <b-input style="width: 186px" type="text" v-model="selectedFile.name" placeholder="Your file name">
-          </b-input>
-          <p class="control is-pulled-right" v-if="selectedFile.length > 1">
-            <button class="button is-danger" @click="deleteFile(selectedFile)">
-              <b-icon icon="trash"></b-icon>
-            </button>
-          </p>
-        </b-field>
+        <b-input style="width: 186px" type="text" v-model="selectedFile.name" placeholder="Your file name">
+        </b-input>
+        <p class="control is-pulled-right">
+          <button class="button is-danger" @click="deleteFile(selectedFile)">
+            <b-icon icon="trash"></b-icon>
+          </button>
+        </p>
+      </b-field>
 
-        <b-field horizontal label="Language">
-          <b-select placeholder="Select a language" v-model="selectedFile.language">
-            <option v-for="language in languages" :value="language.name">
-              {{ language.name | capitalize }}
-            </option>
-          </b-select>
-        </b-field>
+      <b-field horizontal label="Language">
+        <b-select placeholder="Select a language" v-model="selectedFile.language">
+          <option v-for="language in languages" :value="language.name">
+            {{ language.name | capitalize }}
+          </option>
+        </b-select>
+      </b-field>
 
-        <b-field horizontal label="Content">
-          <editor v-model="selectedFile.content" :lang="selectedFile.language" theme="monokai" width="100%" height="260"></editor>
-        </b-field>
+      <b-field horizontal label="Content">
+        <editor v-model="selectedFile.content" :lang="selectedFile.language" theme="monokai" width="100%" height="260"></editor>
+      </b-field>
     </div>
 
     <section class="modal-card-body">
@@ -75,7 +82,7 @@ <h2 class="text-red" v-if="displayDupError">Oh sorry, you can't have duplicated
       </b-field>
 
       <div class="text-center">
-        <button class="button" type="button" @click="addFile()" v-if="files.length < 5">
+        <button class="button" type="button" @click="addFile()">
           <b-icon id="plus" icon="plus"></b-icon>
           Add a file
         </button>

src/renderer/components/modals/create-note-modal/CreateNoteModal.vue

@@ -86,7 +86,9 @@ export default {
         ;
     },
     deleteFile(file) {
-      this.files = this.files.filter(f => f !== file);
+      this.files = this.files.filter(f => f.id !== file.id);
+      this.$refs.tab.recomputeSlidesLen();
+      this.selectedFile = null;
     },
     containsDupFiles() {
       const map = new Map();

src/renderer/components/tab/Tab.html

@@ -3,7 +3,7 @@
   <div class="c-tabs__wrapper" ref="tabWrapper">
     <div class="c-tabs__inner" ref="tabInner">
       <div
-        :class="{ 'c-tabs__item': true }"
+        :class="{ 'c-tabs__item': true, 'is-selected': selectedFile && selectedFile.id === item.id }"
         v-for="item in dataArr"
         :key="item.id"
         v-if="item.name"
@@ -19,7 +19,7 @@
       class="c-tabs__button c-tabs__button--left">
       &lt;
     </button>
-    <button v-if="tabSlideIndex !== tabSlidesLen" @click="changeSlide('right')" type="button"
+    <button v-if="tabSlideIndex < tabSlidesLen" @click="changeSlide('right')" type="button"
       class="c-tabs__button c-tabs__button--right">
       &gt;
     </button>

src/renderer/components/tab/Tab.vue

@@ -6,7 +6,8 @@ export default {
     tabWrapperWidth: null,
     tabInnerWith: null,
     tabSlidesLen: null,
-    tabSlideIndex: 0
+    tabSlideIndex: 0,
+    selectedFile: null,
   }),
 
   props: {
@@ -21,10 +22,15 @@ export default {
       deep: true,
 
       // Adjust the witdh every time a file is added/deleted
-      handler () {
-        this.tabInnerWith = this.$refs.tabInner.offsetWidth;
+      handler (newVal, oldVal) {
+        this.recomputeSlidesLen();
+      }
+    },
 
-        this.tabSlidesLen = Math.ceil(this.tabInnerWith / this.tabWrapperWidth) - 1;
+    tabSlidesLen (len) {
+      if (len <= this.tabSlideIndex) {
+        this.tabSlideIndex = len === 0 ? 0 : len - 1;
+        this.$refs.tabInner.style.transform = 'translateX(0)';
       }
     }
   },
@@ -45,20 +51,28 @@ export default {
     },
 
     selectFile (item, ev) {
-      /* Logic to select a file... */
+      // Toggle
+      if (this.selectedFile && this.selectedFile.id === item.id) {
+        this.selectedFile = null;
+      } else {
+        this.selectedFile = item;
+      }
+
+      this.$emit('onFileSelected', this.selectedFile);
+    },
+
+    recomputeSlidesLen () {
+      this.$nextTick(() => {
+        this.tabWrapperWidth = this.$refs.tabWrapper.offsetWidth;
+        this.tabInnerWith = this.$refs.tabInner.offsetWidth;
+        this.tabSlidesLen = Math.ceil(this.tabInnerWith / this.tabWrapperWidth) - 1;
+      })
     }
   },
 
   mounted () {
 
-    this.tabWrapperWidth = this.$refs.tabWrapper.offsetWidth;
-    this.tabInnerWith = this.$refs.tabInner.offsetWidth;
-
-    this.tabSlidesLen = Math.ceil(this.tabInnerWith / this.tabWrapperWidth) - 1;
-
-    console.log(this.tabWrapperWidth)
-    console.log(this.tabInnerWith)
-    console.log(this.tabSlidesLen)
+    this.recomputeSlidesLen();
   }
 }
 </script>