🐛 Fix visibility dropdown ui (#2398)

Traewelling · Mar 7, 2024 · b9853dc · b9853dc
1 parent 86da98e
commit b9853dc
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 16 deletions.
diff --git a/resources/vue/components/TagRow.vue b/resources/vue/components/TagRow.vue
@@ -24,7 +24,7 @@ export default {
             baseKeys: keys,
             selectedKey: this.value?.key,
             input: this.value?.value,
-            visibility: this.value?.visibility ?? 0
+            visibility: 0
         };
     },
     components: {VisibilityDropdown},
@@ -58,9 +58,13 @@ export default {
             }
 
             return false;
+        },
+        setVisibility(visibility) {
+            this.visibility = visibility;
         }
     },
     mounted() {
+        this.visibility = this.value?.visibility ?? 0;
         if (!this.selectedKey) {
             this.selectKey();
         }
@@ -120,12 +124,8 @@ export default {
             :disabled="disabled"
             @keydown.enter="addTag"
         >
-        <VisibilityDropdown :start-value="visibility" :v-model="visibility" :disabled="disabled"></VisibilityDropdown>
+        <VisibilityDropdown :start-value="visibility" @update:model-value="setVisibility" :disabled="disabled"></VisibilityDropdown>
         <button v-if="!list" class="btn btn-primary" @click="addTag" :disabled="disabled">Add</button>
         <button v-if="list" class="btn btn-outline-danger" @click="deleteTag"><i class="fa fa-trash"></i></button>
     </div>
 </template>
-
-<style scoped lang="scss">
-
-</style>
diff --git a/resources/vue/components/VisibilityDropdown.vue b/resources/vue/components/VisibilityDropdown.vue
@@ -4,10 +4,6 @@ import {trans} from "laravel-vue-i18n";
 export default {
     name: "VisibilityDropdown",
     props: {
-        value: {
-            type: Number,
-            default: 0
-        },
         startValue: {
             type: Number, // idk why I need this here. value did not update without it
             default: 0
@@ -19,7 +15,7 @@ export default {
     },
     data() {
         return {
-            visibility: this.value,
+            visibility: this.startValue,
         };
     },
     methods: {
@@ -48,6 +44,11 @@ export default {
     mounted() {
         this.visibility = this.startValue;
     },
+    watch: {
+        startValue(value) {
+            this.visibility = value;
+        }
+    },
     emits: ["update:model-value"]
 };
 </script>
@@ -57,7 +58,7 @@ export default {
             data-mdb-toggle="dropdown" aria-expanded="false" :disabled="disabled">
         <i :class="visibilityIcon" aria-hidden="true"></i>
     </button>
-    <ul class="dropdown-menu" aria-labelledby="visibilityDropdownButton" style="">
+    <ul class="dropdown-menu" aria-labelledby="visibilityDropdownButton">
         <li class="dropdown-item" @click="setVisibility(0)">
             <i class="fa fa-globe-americas" aria-hidden="true"></i> {{ trans("status.visibility.0") }}
             <br>
@@ -86,7 +87,3 @@ export default {
         </li>
     </ul>
 </template>
-
-<style scoped lang="scss">
-
-</style>