Add Tab functionality in UpdateNoteModal

Author: Andrei0872

src/renderer/components/modals/update-note-modal/UpdateNoteModal.html

@@ -5,6 +5,42 @@
       <h2 class="text-red" v-if="displayDupError">Oh sorry, you can't have duplicated name in your note files...</h2>
     </header>
 
+    <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">
+          <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="Content">
+        <editor v-model="selectedFile.content" :lang="selectedFile.language" theme="monokai" width="100%" height="260">
+        </editor>
+      </b-field>
+    </div>
+
     <section class="modal-card-body">
       <b-field v-if="!gistsSelected" horizontal label="Name">
         <b-input
@@ -32,48 +68,30 @@ <h2 class="text-red" v-if="displayDupError">Oh sorry, you can't have duplicated
         </b-taginput>
       </b-field>
 
-      <div class="note-file" v-for="file in files">
-        <b-field horizontal label="Name" grouped>
-          <b-input
-            style="width: 186px"
-            type="text"
-            v-model="file.name"
-            placeholder="Your file name">
-          </b-input>
-          <p class="control is-pulled-right" v-if="files.length > 1">
-            <button class="button is-danger" @click="deleteFile(file)">
-              <b-icon icon="trash"></b-icon>
-            </button>
-          </p>
-        </b-field>
 
-        <b-field horizontal label="Language">
-          <b-select placeholder="Select a language" v-model="file.language">
-            <option
-              v-for="language in languages"
-              :value="language.name">
-              {{ language.name | capitalize }}
-            </option>
-          </b-select>
-        </b-field>
+      <b-field horizontal label="Name" grouped>
+        <b-input style="width: 186px" type="text" v-model="baseFile.name" placeholder="Your file name">
+        </b-input>
+      </b-field>
 
-        <b-field horizontal label="Content">
-          <editor v-model="file.content"
-                  :lang="file.language"
-                  theme="monokai"
-                  width="100%"
-                  height="260"
-          ></editor>
-        </b-field>
-      </div>
+      <b-field horizontal label="Language">
+        <b-select placeholder="Select a language" v-model="baseFile.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="baseFile.content" :lang="baseFile.language" theme="monokai" width="100%" height="260"></editor>
+      </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>
       </div>
-
     </section>
 
     <footer class="modal-card-foot">

src/renderer/components/modals/update-note-modal/UpdateNoteModal.scss

@@ -15,3 +15,10 @@
   padding: 12px;
   margin-bottom: 10px;
 }
+
+.c-selected-file {
+  background-color: $light;
+  border-top: 1px solid #ccc;
+  padding: 1rem;
+  max-height: 20rem;
+}

src/renderer/components/modals/update-note-modal/UpdateNoteModal.vue

@@ -5,10 +5,13 @@ import { mapGetters, mapActions } from 'vuex';
 import editor from '@/components/editor/Editor';
 import languages from '@/assets/data/languages.json';
 import converter from '@/converter';
+import Tab from '../../tab/Tab';
+
+import { createId } from '../../../utils';
 
 export default {
   name: 'cn-update-note-modal',
-  components: { editor },
+  components: { editor, Tab },
   props: {
     note: Object,
   },
@@ -26,6 +29,12 @@ export default {
       gistFiles: [],
       languages,
       displayDupError: false,
+      selectedFile: null,
+      baseFile: {
+        name: '',
+        language: 'text',
+        content: '',
+      },
     };
   },
   mounted() {
@@ -39,10 +48,10 @@ export default {
     this.noteUpdated = { ...this.note };
     this.noteUpdated.files = {};
     Object.keys(this.note.files).forEach((key, index) => {
-      this.files.push({ ...this.note.files[key], id: index });
+      this.files.push({ ...this.note.files[key], id: createId() });
       this.gistFiles.push({
         ...this.note.files[key],
-        id: index,
+        id: createId(),
         deleted: false,
       });
     });
@@ -95,12 +104,15 @@ export default {
     },
     addFile() {
       this.files.push({
-        name: '',
-        language: 'text',
-        content: '',
+        id: createId(),
+        ...this.baseFile,
         deleted: false,
         added: true,
       });
+
+      Object.keys(this.baseFile).forEach(
+        k => this.baseFile[k] = k !== 'language' ? '': this.languages[0].name
+      );
     },
     deleteFile(file) {
       if (this.gistsSelected) {
@@ -112,6 +124,8 @@ export default {
       }
 
       this.files = this.files.filter(f => f !== file);
+      this.$refs.tab.recomputeSlidesLen();
+      this.selectedFile = null;
     },
     containsDupFiles() {
       const map = new Map();
@@ -135,7 +149,7 @@ export default {
   computed: {
     ...mapGetters(['gistsSelected']),
     isDisabled() {
-      return this.files.some(file => !/\S/.test(file.content));
+      return !this.files.length || this.files.some(file => !/\S/.test(file.content));
     },
   },
 };