open modal when selecting an item in cards

src/components/Cards.vue

@@ -30,7 +30,12 @@
         </div>
         <div class="col-lg-9 col-xl-8">
             <div class="card-columns">
-                <div class="card-list-item card bg-dark text-light" v-for="item in internalItems" :key="item[keyName]">
+                <div
+                    class="card-list-item card bg-dark text-light"
+                    v-for="item in internalItems"
+                    :key="item[keyName]"
+                    @click="$emit('itemActivated', item)"
+                >
                     <slot v-bind:item="item"/>
                 </div>
             </div>

src/components/EditItem.vue

@@ -0,0 +1,22 @@
+<template>
+  <div>
+    <img class="img-fluid rounded mx-auto d-block mb-3" :src="`https://c3lf.de/api/1/thumbs/${item.file}`"/>
+    <h6>Editing Item <span class="badge badge-secondary">#{{ item[badge] }}</span></h6>
+    <form>
+        <div class="form-group" v-for="field in fields" :key="field">
+            <label>{{ field }}</label>
+            <input type="text" class="form-control" v-model="item[field]">
+        </div>
+    </form>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Add',
+  props: ['item', 'badge', 'fields']
+};
+</script>
+
+<style>
+</style>

src/components/Modal.vue

@@ -1,19 +1,26 @@
 <template>
     <div class="modal" tabindex="-1">
-        <div class="modal-dialog modal-lg">
+        <div class="modal-dialog modal-xl">
             <div class="modal-content bg-dark text-light border-secondary">
                 <div class="modal-header">
-                    <h5 class="modal-title">Modal title</h5>
+                    <h5 class="modal-title">{{ title }}</h5>
-                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <button type="button" class="close" @click="$emit('close')" aria-label="Close">
-                        <font-awesome-icon icon="window-close" class="text-light"></font-awesome-icon>
+                        <font-awesome-icon icon="window-close" class="text-light"/>
                     </button>
                 </div>
                 <div class="modal-body">
-                    <p>Modal body text goes here.</p>
+                    <slot name="body">
+                        <div class="alert alert-danger">
+                            Modal body is empty
+                        </div>
+                    </slot>
                 </div>
                 <div class="modal-footer">
-                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                    <slot name="buttons">
-                    <button type="button" class="btn btn-primary">Save changes</button>
+                        <div class="alert alert-danger">
+                            Modal footer is empty
+                        </div>
+                    </slot>
                 </div>
             </div>
         </div>
@@ -22,7 +29,8 @@
 
 <script>
 export default {
-  name: 'Modal'
+  name: 'Modal',
+  props: ['title']
 };
 </script>
 

src/views/Items.vue

@@ -1,24 +1,38 @@
 <template>
     <div class="container-fluid px-xl-5 mt-3">
+        <Modal title="Edit Item" v-if="selectedItem" @close="closeModal()">
+            <template #body>
+                <EditItem
+                    :item="selectedItem"
+                    badge="item_uid"
+                    :fields="['bezeichnung', 'container']"
+                />
+            </template>
+            <template #buttons>
+                <button type="button" class="btn btn-secondary" @click="closeModal()">Cancel</button>
+                <button type="button" class="btn btn-success">Save Changes</button>
+            </template>
+        </Modal>
         <div class="row" v-if="layout === 'table'">
             <div class="col-xl-8 offset-xl-2">
                 <Table
-                        :columns="['uid', 'description', 'box']"
+                    :columns="['uid', 'description', 'box']"
-                        :items="loadedItems"
+                    :items="loadedItems"
-                        :keyName="'uid'"
+                    :keyName="'uid'"
                 />
             </div>
         </div>
         <Cards
-                v-if="layout === 'cards'"
+            v-if="layout === 'cards'"
-                :columns="['uid', 'description', 'box']"
+            :columns="['uid', 'description', 'box']"
-                :items="loadedItems"
+            :items="loadedItems"
-                :keyName="'uid'"
+            :keyName="'uid'"
-                v-slot="{ item }"
+            v-slot="{ item }"
+            @itemActivated="selectedItem = $event"
         >
             <img
-                    :src="`https://c3lf.de/api/1/thumbs/${item.file}`"
+                :src="`https://c3lf.de/api/1/thumbs/${item.file}`"
-                    class="card-img-top img-fluid"
+                class="card-img-top img-fluid"
             >
             <div class="card-body">
                 <h6 class="card-title">{{ item.description }}</h6>
@@ -31,13 +45,22 @@
 <script>
 import Table from '@/components/Table';
 import Cards from '@/components/Cards';
+import Modal from '@/components/Modal';
+import EditItem from '@/components/EditItem';
 import { mapState } from 'vuex';
 
 export default {
   name: 'Items',
-  components: { Table, Cards },
+  data: () => ({
+    selectedItem: null
+  }),
+  components: { Table, Cards, Modal, EditItem },
   computed: mapState(['loadedItems', 'layout']),
   methods: {
+    closeModal: function () {
+      console.log('asdasd');
+      this.selectedItem = null;
+    }
   }
 };
 </script>