Adds Item Removal functionality to Items-List. Adds delete item to actions and mutations on collections module.

src/admin/components/items-list.vue

@@ -26,9 +26,8 @@
 
                 <b-table-column label="Ações">
                     <router-link :to="`/collections/${collectionId}/items/${props.row.id}/edit`" tag="a"><b-icon icon="pencil"></router-link>
-                    <a @click.native="showMoreItem(props.row.id)">
-                        <b-icon icon="dots-vertical">
-                    </a>
+                    <a><b-icon icon="delete" @click.native="deleteOneItem(props.row.id)"></a>
+                    <a><b-icon icon="dots-vertical" @click.native="showMoreItem(props.row.id)"></a> 
                 </b-table-column>
 
             </template>
@@ -55,7 +54,8 @@ export default {
     },
     methods: {
         ...mapActions('collection', [
-            'fetchItems'
+            'fetchItems',
+            'deleteItem'
         ]),
         ...mapGetters('collection', [
             'getItems'
@@ -63,11 +63,13 @@ export default {
         handleSelectionChange(value) {
             this.multipleSelection = value;
         },
-        shareItem(itemId) {
-
+        deleteOneItem(itemId) {
+            this.$dialog.confirm({
+                message: 'Deseja realmente deletar este Item?',
+                onConfirm: () => this.deleteItem(itemId)
+            });
         },
         showMoreItem(itemId) {
-
         }
     },
     computed: {

src/admin/scss/tainacan-admin.scss

@@ -26,6 +26,9 @@ $link: $primary;
 $link-invert: $primary-invert;
 $link-focus-border: $primary;
 
+// Bulma's modal (needs to be greather than taincan-admin-app
+$modal-z: 9999999;
+
 // Import Bulma and Buefy styles
 @import "../../assets/css/fonts/materialdesignicons.css";
 @import "../../../node_modules/bulma/bulma.sass";

src/classes/field-types/tainacan-form-item.vue

@@ -3,10 +3,10 @@
                  :message="getErrorMessage"
                  :type="fieldTypeMessage">
             <div>
-                <component :is="field.field_type_object.component" v-model="inputs[0]" :field="field" @blur="changeValue()"></component>
+                <component :is="field.field.field_type_object.component" v-model="inputs[0]" :field="field" @blur="changeValue()"></component>
                 <div v-if="field.field.multiple == 'yes'">
                     <div v-if="index > 0" v-for="(input, index) in inputsList " v-bind:key="index" class="multiple-inputs">
-                        <component :is="field.field_type_object.component" v-model="inputs[index]" :field="field" @blur="changeValue()"></component><a class="button" v-if="index > 0" @click="removeInput(index)">-</a>
+                        <component :is="field.field.field_type_object.component" v-model="inputs[index]" :field="field" @blur="changeValue()"></component><a class="button" v-if="index > 0" @click="removeInput(index)">-</a>
                     </div>
                     <a class="button" @click="addInput">+</a>
                 </div>
@@ -59,10 +59,7 @@
                     if (this.inputs.length == 0)
                         this.inputs.push('');
                 } else {
-                    if (this.field.value == null || this.field.value == undefined)
-                        this.inputs.push('');
-                    else
-                        this.inputs.push(this.field.value);
+                    this.field.value == null || this.field.value == undefined ? this.inputs.push('') : this.inputs.push(this.field.value);
                 }
             },
             addInput(){

src/js/store/modules/collection/actions.js

@@ -9,6 +9,19 @@ export const fetchItems = ({ commit, state }, collectionId) => {
         .catch(error => console.log( error ));
 }
 
+export const deleteItem = ({ commit }, item_id ) => {
+    return new Promise((resolve, reject) => {
+        axios.delete('/items/' + item_id)
+        .then( res => {
+            commit('deleteItem', { id: item_id });
+            resolve( res );
+        }).catch( error => { 
+            reject( error );
+        });
+
+    });
+};
+
 export const fetchCollections = ({ commit }) => {
     axios.get('/collections')
         .then(res => {

src/js/store/modules/collection/mutations.js

@@ -2,6 +2,13 @@ export const setItems = ( state, items ) => {
     state.items = items;
 }
 
+export const deleteItem = ( state, item ) => {
+    let index = state.items.findIndex(deletedItem => deletedItem.id === item.id);
+    if (index >= 0) {
+        state.items.splice(index, 1);
+    }
+}
+
 export const setCollections = (state, collections) => {
     state.collections = collections;
 }

src/js/store/modules/item/getters.js

@@ -6,7 +6,3 @@ export const getFields =  state => {
 export const getItem = state => {
     return state.item;
 }
-
-export const getError =  state => {
-    return state.error;
-}

src/js/store/modules/item/mutations.js

@@ -1,6 +1,5 @@
 import Vue from 'vue';
 
-
 export const setItem = ( state, item ) => {
     state.item = item;
 }