Add "apply changes" button to tag list (closes #27)

TheTeaCat · Jan 21, 2020 · 3b51b85 · 3b51b85
1 parent fd5e877
commit 3b51b85
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 10 deletions.
diff --git a/src/components/CloudBox.vue b/src/components/CloudBox.vue
@@ -2,7 +2,7 @@
     <main>
         <Cloud ref="cloud" 
                :result="result" 
-               @generating="generating=$event"/>
+               @generating="$emit('generating',$event)"/>
 
         <ul>
             <li id="share-link-container">
@@ -39,10 +39,7 @@
         components:{
             Cloud,
         },
-        props:["result"],
-        data:function(){return{
-            generating:true,
-        }},
+        props:["result","generating"],
         methods: {
             reshuffle(){this.$refs['cloud'].generateTagCloud()},
             downloadTagCloud() {

diff --git a/src/components/Results.vue b/src/components/Results.vue
@@ -36,9 +36,11 @@
             Click "Load Data"!
         </h2>
 
-        <CloudBox ref="cloud"
+        <CloudBox ref="cloud-box"
                   v-if="result != undefined && result.artists.length > 0"
-                  :result="result"/>
+                  :result="result"
+                  :generating="generating"
+                  @generating="generating=$event"/>
 
         <artists-list class="list"
                       v-if="result != undefined && result.artists.length > 0" 
@@ -49,7 +51,9 @@
                    v-if="result != undefined && result.artists.length > 0" 
                    :tags="result.tags" 
                    :taggings="result.taggings"
-                   :tag_meta="result.tag_meta"/>
+                   :tag_meta="result.tag_meta"
+                   :generating="generating"
+                   @applyTagChanges="applyTagChanges"/>
     </div>
 </template>
 
@@ -67,10 +71,16 @@
             TagsList,
         },    
         props: ['state','result','error'],
+        data: function(){return{
+            generating:true,
+        }},
         methods: {
             clear(){
                 this.cloudState = undefined
             },
+            applyTagChanges(){
+                this.$refs['cloud-box'].reshuffle()
+            },
         },
     }
 </script>

diff --git a/src/components/TagsList.vue b/src/components/TagsList.vue
@@ -2,8 +2,11 @@
     <div>
         <collapse-button :collapsed="collapsed" @collapse="collapse"/>
         <h2>Tags:</h2>
-        <span>//Don't like a tag? Uncheck it here & reshuffle!</span>
+        <span>//Don't like a tag? Uncheck it here!</span>
         <ol id="tag-list" v-if="!collapsed">
+            <button id="apply-changes-button" 
+                    @click="$emit('applyTagChanges')"
+                    :disabled="generating">Apply Changes</button> 
             <li class="tag" v-for='tag in tags' :key='tag' :tag='tag'>
                 <input type="checkbox" v-model="tag_meta[tag].shown"/>
                 <div>
@@ -24,7 +27,7 @@
             CollapseButton,
             TaggingsList,
         },
-        props: ['tags','taggings','tag_meta'],
+        props: ['tags','taggings','tag_meta','generating'],
         data:function(){return{
             collapsed:true,
         }},
@@ -65,6 +68,12 @@
         }
     }
     
+    #apply-changes-button {
+        float:right;
+        margin:0 0 1vw 1vw;
+        background:var(--background-colour);
+    }
+
     .tag {
         display:flex;
         align-items:start;