adds 'No data' message

src/components/ItemsRenderer.vue

@@ -7,14 +7,21 @@ This file is part of LiberaForms.
 
 <template>
 
-  <ItemsGrid v-if="display_items" class="mt-4"/>
+  <div v-if="!is_loading">
+    <h2 v-if="!has_items" class="ds-no-data">
+      {{ $t('No data') }}
+    </h2>
+    <template v-else-if="display_items">
+      <ItemsGrid class="mt-4" />
 
-  <FieldModal v-if="!is_loading"
-              :show_modal="show_field_modal"
-              :data="field_modal_data"
-              @closeFieldModal="closeFieldModal" />
+      <FieldModal v-if="display_items"
+                  :show_modal="show_field_modal"
+                  :data="field_modal_data"
+                  @closeFieldModal="closeFieldModal" />
 
-  <DeleteItemModal v-if="!is_loading && delete_item_initiated" />
+      <DeleteItemModal v-if="delete_item_initiated" />
+    </template>
+  </div>
 
 </template>
 
@@ -42,6 +49,7 @@ export default {
       item_id: null
 
     })
+    const has_items = computed(() => {return store.itemsToDisplay.length})
 
     function showFieldEditor(data) {
       //console.log("showFieldEditor:", data.item_id, data.field_name, data.field_value)
@@ -61,7 +69,7 @@ export default {
 
     return {
       display_items: computed(() => {
-        if (store.downloading_items) {
+        if (store.downloading_items || !has_items) {
           return false
         }
         if (store.pdf_builder_mode) {
@@ -72,6 +80,7 @@ export default {
         }
         return false
       }),
+      has_items,
       field_modal_data, show_field_modal, closeFieldModal,
       is_loading: computed(() => store.downloading_items),
       delete_item_initiated: computed(() => { return store.delete_item_initiated }),
@@ -80,6 +89,22 @@ export default {
 }
 </script>
 
-<style scoped>
-
+<style>
+.ds-empty-field {
+  font-style: italic;
+}
+</style>
+
+<style scoped>
+.ds-loading {
+  font-style: italic;
+  color: var(--lf-gray-800);
+  margin-top: 1.5em;
+}
+.ds-no-data {
+  font-style: italic;
+  color: var(--lf-gray-600);
+  margin-top: 1em;
+  font-size: 1.75em;
+}
 </style>

src/components/panel/DisplayPanel.vue

@@ -16,7 +16,7 @@ This file is part of LiberaForms.
       <ItemFilters />
     </div>
 
-    <div  v-if="data_type=='answer'"
+    <div v-if="data_type=='answer'"
          class="mt-3 ds-panel-desktop-container-1"
          :class="controlGroupClasses()">
 
@@ -33,7 +33,7 @@ This file is part of LiberaForms.
 </template>
 
 <script>
-import { computed, ref } from "vue";
+import { computed, ref, provide } from "vue";
 import { dataDisplayStore } from '@/store.js'
 import ItemFilters from '@/components/panel/ItemFilters.vue'
 import ExportOptions from '@/components/panel/ExportOptions.vue'
@@ -49,6 +49,8 @@ export default {
   setup() {
     const store = dataDisplayStore()
 
+    provide('has_items', computed(() => {return store.itemsToDisplay.length}))
+
     let mq = "lg"
     function controlGroupClasses() {
       if (mq == "sm") {
@@ -66,7 +68,8 @@ export default {
     return {
       controlGroupClasses,
       data_type: store.data_type,
-      
+      has_items: computed(() => store.itemsToDisplay.length),
+
     }
   },
 }

src/components/panel/OtherOptions.vue

@@ -9,19 +9,20 @@ This file is part of LiberaForms.
 
   <button v-if="available_options"
           class="btn btn-sm"
-          :class="show_options ? 'btn-primary' : 'btn-outline-primary'"
+          :class="show_options && has_items ? 'btn-primary' : 'btn-outline-primary'"
+          :disabled="!has_items"
           v-on:click="toggleOptions()">
         {{ $t("Options") }}
   </button>
 
-  <a v-if="show_options && can_edit"
+  <a v-if="show_options && can_edit && has_items"
      class="btn btn-sm btn-outline-danger modes"
      role="button"
      :href="endpoint+'/delete-all-items'">
       {{ $t("Delete all") }}
   </a>
 
-  <button v-if="has_deleted_fields"
+  <button v-if="has_deleted_fields && has_items"
           class="btn btn-sm"
           :class="show_deleted==true ? 'btn-primary' : 'btn-outline-secondary'"
           v-on:click="displayDeletedFields()">
@@ -31,18 +32,17 @@ This file is part of LiberaForms.
 </template>
 
 <script>
-import { computed } from "vue";
+import { computed, inject } from "vue";
 import { dataDisplayStore } from '@/store.js'
 
-
 export default {
   name: 'OtherOptions',
   components: {
 
   },
-
   setup() {
     const store = dataDisplayStore()
+    const has_items = inject('has_items')
 
     function toggleOptions() {
       store.show_other_options = !store.show_other_options
@@ -54,6 +54,7 @@ export default {
     }
 
     return {
+      has_items,
       can_edit: store.can_edit,
       data_type: store.data_type,
       endpoint: store.endpoint,