adds delete item modal

src/components/DataDisplay.vue

@@ -6,22 +6,15 @@ This file is part of LiberaForms.
 -->
 
 <template>
-  <div v-if="is_loading===true">
-    <div class="ds-loading">
-      {{ $t('Loading...') }}
-    </div>
+  <div v-if="is_loading===true" class="ds-loading">
+    {{ $t('Loading...') }}
   </div>
-  <div v-else>
-
-    <DisplayPanel />
-
-  </div>
-
+  <DisplayPanel v-else />
 </template>
 
 <script>
 import axios from 'axios';
-import { inject, computed, provide } from "vue";
+import { inject, computed } from "vue";
 import { dataDisplayStore } from '@/store.js'
 import DisplayPanel from '@/components/panel/DisplayPanel.vue'
 

src/components/ItemsRenderer.vue

@@ -14,18 +14,21 @@ This file is part of LiberaForms.
               :data="field_modal_data"
               @closeFieldModal="closeFieldModal" />
 
+  <DeleteItem v-if="!is_loading && delete_item_initiated" />
+
 </template>
 
 <script>
-import { computed, provide, ref, toRefs, reactive } from "vue";
+import { computed, provide, ref, reactive } from "vue";
 import { dataDisplayStore } from '@/store.js'
 import ItemsGrid from '@/components/itemsRenderer/ItemsGrid.vue'
 import FieldModal from '@/components/itemsRenderer/FieldModal.vue'
+import DeleteItem from '@/components/itemsRenderer/DeleteItem.vue'
 
 export default {
   name: 'ItemsRenderer',
   components: {
-    ItemsGrid, FieldModal
+    ItemsGrid, FieldModal, DeleteItem
   },
 
   setup() {
@@ -71,6 +74,7 @@ export default {
       }),
       field_modal_data, show_field_modal, closeFieldModal,
       is_loading: computed(() => store.downloading_items),
+      delete_item_initiated: computed(() => { return store.delete_item_initiated }),
     }
   },
 }

src/components/itemsRenderer/DeleteItem.vue

@@ -6,10 +6,42 @@ This file is part of LiberaForms.
 -->
 
 <template>
-
+  <div tabindex="-1" aria-labelledby="delete-modal-label" aria-hidden="true"
+       class="modal fade d-block show"
+       @keydown.esc="closeModal()"
+       role="dialog">
+    <div class="modal-dialog">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title" id="delete-modal-label">
+            {{ $t("Delete answer")}}
+          </h5>
+          <button type="button" aria-label="Close"
+                  v-on:click="closeModal()">
+            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
+          </button>
+        </div>
+        <div class="modal-body">
+          {{ $t("This cannot be undone!") }}
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-danger"
+                  v-on:click="deleteItem()">
+            {{ $t("Delete") }}
+          </button>
+          <button type="button" class="btn btn-secondary"
+                  v-on:click="closeModal()">
+            {{ $t("Cancel") }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="modal-backdrop fade show"></div>
 </template>
 
 <script>
+import axios from 'axios';
 import { computed } from "vue";
 import { dataDisplayStore } from '@/store.js'
 
@@ -18,13 +50,54 @@ export default {
   components: {
 
   },
-
   setup() {
     const store = dataDisplayStore()
 
+    const item_id = store.delete_item_initiated
+
+    function deleteItem() {
+
+      function removeFromStore() {
+        let item_pos = store.items.findIndex(item => item.id === item_id)
+        store.items.splice(item_pos, 1)
+        store.meta.total = store.meta.total - 1
+        if (store.filtered_items) {
+          let item_pos = store.filtered_items.findIndex(item => item.id === item_id)
+          store.filtered_items.splice(item_pos, 1)
+        }
+      }
+      let endpoint = store.item_endpoint + item_id + '/delete'
+      axios.delete(endpoint)
+        .then(response => {
+          if (response.data.deleted == true) {
+            removeFromStore()
+            if (response.data.remove_alert != false) {
+              let alert = document.getElementById(response.data.remove_alert.disk_alert)
+              if (alert !== null) {
+                alert.remove()
+                let alert_menu = document.getElementById(response.data.remove_alert.alerts)
+                let alerts = alert_menu.querySelectorAll("li");
+                if (alerts.length == 0) {
+                  alert_menu.remove()
+                }
+              }
+            }
+          }
+        })
+        .catch(e => {
+          console.log(e)
+        })
+        .finally(() => {
+          this.closeModal()
+        });
+    }
+
+    function closeModal() {
+      store.delete_item_initiated = null
+    }
 
     return {
-
+      deleteItem, closeModal,
     }
   },
 }

src/components/itemsRenderer/FieldRender.vue

@@ -31,7 +31,6 @@ export default {
   props: {
     field_name: String,
     field_value: undefined,
-    edit_mode: Boolean,
     item_id: Number,
   },
   setup(props) {

src/components/itemsRenderer/GridRow.vue

@@ -12,8 +12,7 @@ This file is part of LiberaForms.
             class="p-0 stickyColumn first_sticky_col">
 
           <RowControls :item_id="item.id"
-                       :marked="item.marked"
-                       :edit_mode="edit_mode" />
+                       :marked="item.marked" />
 
         </td>
         <td v-else
@@ -21,9 +20,7 @@ This file is part of LiberaForms.
           <div :style="column_width">
             <FieldRender :field_name="field.name"
                          :field_value="field.name == 'created' ? item.created : item.data[field.name]"
-                         :item_id="item.id"
-                         :edit_mode="field.name == 'created' ? false : edit_mode">
-            </FieldRender>
+                         :item_id="item.id" />
           </div>
         </td>
       </template>
@@ -44,7 +41,6 @@ export default {
   props: {
     item: Object,
     field_index: Object,
-    edit_mode: Boolean,
     is_data_sticky: Boolean,
     delete_initiated: Boolean,
     column_width: Object,

src/components/itemsRenderer/RowControls.vue

@@ -16,7 +16,7 @@ This file is part of LiberaForms.
             class="ds-delete-button"
             :class="{'ds-card-button':is_card==true}"
             :aria-label="$t('Delete answer')"
-            v-on:click="deleteItem">
+            v-on:click="initiateDelete()">
       <TrashIcon size="1.3x" />
     </button>
   </div>
@@ -36,13 +36,11 @@ export default {
   props: {
     item_id: Number,
     marked: Boolean,
-    edit_mode: Boolean,
     is_card: Boolean,
   },
 
   setup(props) {
     const store = dataDisplayStore()
-
     const with_other_options = computed(() => { return store.show_other_options })
 
     const controlClass = computed(() => {
@@ -68,10 +66,16 @@ export default {
       }
     }
 
+    function initiateDelete() {
+      store.delete_item_initiated = props.item_id
+    }
+
     return {
       controlClass,
       toggleBookmarked,
       with_other_options,
+      initiateDelete
+
     }
   },
 }

src/components/panel/DisplayPanel.vue

@@ -6,7 +6,6 @@ This file is part of LiberaForms.
 -->
 
 <template>
-  <div>
 
     <div class="ds-panel-desktop-container-1">
       <ExportOptions />
@@ -31,7 +30,6 @@ This file is part of LiberaForms.
 
     </div>
 
-  </div>
 </template>
 
 <script>
@@ -68,7 +66,7 @@ export default {
     return {
       controlGroupClasses,
       data_type: store.data_type,
-      //show_other_options, toggleOtherOptions,
+      
     }
   },
 }

src/store.js

@@ -39,6 +39,7 @@ export const dataDisplayStore = defineStore("dataDisplayStore", {
     show_modes: false,
     show_other_options: false,
     has_row_controls: false,
+    delete_item_initiated: null,  // is the id of the item
     include_deleted_fields: false,
     display_items_as: "grid",
     pdf_builder_mode: false,