Do not show favourite or recent labels if the lists are empty #1105

AndBible · Jul 8, 2021 · ae7bf20 · ae7bf20
1 parent 7fa6a35
commit ae7bf20
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 8 deletions.
diff --git a/app/bibleview-js/src/components/LabelList.vue b/app/bibleview-js/src/components/LabelList.vue
@@ -36,7 +36,7 @@
 
 <script>
 import {useCommon} from "@/composables";
-import {inject} from "@vue/runtime-core";
+import {inject, watch} from "@vue/runtime-core";
 import {computed, ref} from "@vue/reactivity";
 import {addAll, clickWaiter, removeAll} from "@/utils";
 import {FontAwesomeIcon} from "@fortawesome/vue-fontawesome";
@@ -54,9 +54,10 @@ export default {
     onlyAssign: {type: Boolean, default: false},
     singleLine: {type: Boolean, default: false},
   },
+  emits: ["has-entries"],
   components: {FontAwesomeIcon},
   name: "LabelList",
-  setup(props) {
+  setup(props, {emit}) {
     const {adjustedColor, ...common} = useCommon();
     const appSettings = inject("appSettings");
     const android = inject("android");
@@ -108,6 +109,10 @@ export default {
       return sortBy(Array.from(shown).map(labelId => bookmarkLabels.get(labelId)).filter(v => v), ["name"]);
     });
 
+    watch(labels, v => {
+      emit("has-entries", v.length > 0);
+    }, {immediate: true});
+
     function assignLabels() {
       if(bookmark.value) {
         android.assignLabels(bookmark.value.id);

diff --git a/app/bibleview-js/src/components/modals/BookmarkLabelActions.vue b/app/bibleview-js/src/components/modals/BookmarkLabelActions.vue
@@ -31,14 +31,14 @@
         {{strings.favouriteLabels}}
       </div>
       <div class="item">
-        <LabelList :bookmark-id="bookmarkId" favourites only-assign />
+        <LabelList :bookmark-id="bookmarkId" favourites only-assign @has-entries="hasFavourites = $event"/>
       </div>
       <div class="item title" v-if="hasRecent">
         <FontAwesomeIcon icon="history"/>
         {{strings.recentLabels}}
       </div>
       <div class="item">
-        <LabelList :bookmark-id="bookmarkId" recent only-assign />
+        <LabelList :bookmark-id="bookmarkId" recent only-assign @has-entries="hasRecent = $event" />
       </div>
       <!--div class="item title">
         <FontAwesomeIcon icon="fire-alt"/>
@@ -79,10 +79,8 @@ export default {
         android.assignLabels(bookmark.value.id);
       }
     }
-    const appSettings = inject("appSettings");
-    const hasFavourites = computed(() => appSettings.favouriteLabels.length > 0)
-    const hasRecent = computed(() => appSettings.recentLabels.length > 0)
-
+    const hasFavourites = ref(false);
+    const hasRecent = ref(false);
     async function showActions() {
       showModal.value = true;
     }