Adds option to remove item and checks if current user can edit.

src/components/lists/ItemsList.vue

@@ -1,7 +1,7 @@
 <template>
     <ion-row class="items-list-container">
         <ion-col size="4" v-for="item of items" :key="item.id">
-            <ion-card @click="openItemEdition(item)" button color="light" >
+            <ion-card @click="openActionSheet(item)" button color="light" >
                 <ion-img :src="(item.thumbnail && item.thumbnail['tainacan-medium'] && item.thumbnail['tainacan-medium'][0]) ? item.thumbnail['tainacan-medium'][0] : thumbnailPlaceholder" :alt="(item.thumbnail_alt ? item.thumbnail_alt : (item.title ? item.title : 'Imagem de item sem título'))"></ion-img>
                 <ion-card-header>
                     <ion-card-title>{{ item.title ? item.title : $t('label_item_without_title') }}</ion-card-title>
@@ -18,13 +18,17 @@ import {
     IonCol,
     IonCard,
     IonImg,
-    IonCardTitle
+    IonCardTitle,
+    actionSheetController,
+    ActionSheetButton
 } from '@ionic/vue';
-
+import { pencil, trashBin } from "ionicons/icons";
-import { computed } from 'vue';
+import { computed, ref, defineComponent } from 'vue';
 import { useWpStore } from '@/store/storeWp';
+import { useTainacanStore } from '@/store/storeTainacan';
 import { InAppBrowserEvent } from '@awesome-cordova-plugins/in-app-browser';
-export default {
+
+export default defineComponent({
     props: [
         "items"
     ],
@@ -38,8 +42,61 @@ export default {
     },
     setup() {
         const wpStore = useWpStore();
+        const tainacanStore = useTainacanStore();
         const thumbnailPlaceholder = computed (() => require('../../assets/placeholder_square_small.png'));
         
+        const actionSheetLabels = ref({
+            header: '',
+            button1: '',
+            button2: '',
+            cancel: ''
+        });
+        const setActionSheetLabels = (newLabels: any) => actionSheetLabels.value = newLabels;
+        const openActionSheet = async (event: any) => {
+            const item = event;
+            
+            if (item.current_user_can_edit || item.current_user_can_delete) {
+
+                let actionSheetButtons: ActionSheetButton[] = [];
+
+                if (item.current_user_can_edit)
+                    actionSheetButtons.push({
+                        text: actionSheetLabels.value.button1,
+                        icon: pencil,
+                        data: 'edit-item',  
+                        handler: () => {
+                            openItemEdition(item);
+                        },
+                    });
+
+                if (item.current_user_can_delete)
+                    actionSheetButtons.push({
+                        text: actionSheetLabels.value.button2,
+                        icon: trashBin,
+                        data: 'delete-item',  
+                        handler: () => {
+                            deleteItem(item);
+                        }
+                    });
+
+                actionSheetButtons.push({
+                    text: actionSheetLabels.value.cancel,
+                    role: 'cancel'
+                });
+
+                let actionSheetOptions = {
+                    header: actionSheetLabels.value.header,
+                    cssClass: 'item-creation-action-sheet',
+                    buttons: actionSheetButtons
+                };
+
+                const actionSheet = await actionSheetController.create(actionSheetOptions);
+                await actionSheet.present();
+            }
+        }
+        const deleteItem = function(item: any) {
+            tainacanStore.deleteItem(item.id);
+        }
         const openItemEdition = function(item: any) {
             wpStore.openInAppBrowser('?page=tainacan_admin&mobileAppMode=true#/collections/' + item.collection_id + '/items/' + item.id + '/edit');
             wpStore.listenEventInAppBrowser((event: InAppBrowserEvent) => {
@@ -54,9 +111,17 @@ export default {
             });
         }
         
-        return { thumbnailPlaceholder, wpStore, openItemEdition }
+        return { thumbnailPlaceholder, wpStore, openItemEdition, setActionSheetLabels, openActionSheet }
+    },
+    async created() {
+        this.setActionSheetLabels({
+            header: this.$t('label_item_actions'),
+            button1: this.$t('label_option_edit_item'),
+            button2: this.$t('label_option_delete_item'),
+            cancel: this.$t('label_cancel')
+        });
     }
-}
+});
 </script>
 
 <style>

src/locales/translation-strings.ts

@@ -29,7 +29,10 @@ export const translationStrings = {
         label_search: 'Search',
         label_no_results_found: 'No results found',
         info_application_password: 'This password is not the same of your WordPress admin.',
-        label_learn_more_here: 'Learn more here'
+        label_learn_more_here: 'Learn more here',
+        label_item_actions: 'Item actions',
+        label_option_edit_item: 'Edit item',
+        label_option_delete_item: 'Send item to trash'
     },
     pt: {
         collections: "Coleções",
@@ -61,6 +64,9 @@ export const translationStrings = {
         label_search: 'Buscar',
         label_no_results_found: 'Nenhum resultado encontrado',
         info_application_password: 'Esta senha não é a mesma do seu painel admin do WordPress.',
-        label_learn_more_here: 'Saiba mais aqui.'
+        label_learn_more_here: 'Saiba mais aqui.',
+        label_item_actions: 'Ações para o item',
+        label_option_edit_item: 'Editar item',
+        label_option_delete_item: 'Enviar item para lixeira'
     }
 }

src/pages/CollectionPage.vue

@@ -41,7 +41,7 @@ import {
 } from '../store/storeTainacan';
 import { useWpStore } from '../store/storeWp';
 import { ref, defineComponent } from 'vue';
-import { add, documentOutline, documentAttachOutline, documentsOutline } from "ionicons/icons";
+import { add, documentOutline, documentsOutline } from "ionicons/icons";
 import {
     IonLoading,
     IonRefresher,

src/store/storeTainacan.ts

@@ -81,7 +81,7 @@ const useTainacanStore = defineStore("tainacan", {
       try {
         const wpStore = useWpStore();
 
-        let endpoint = `${wpStore.userSiteUrl}/wp-json/tainacan/v2/collection/${collectionId}/items?fetch_only=id,title,thumbnail`;
+        let endpoint = `${wpStore.userSiteUrl}/wp-json/tainacan/v2/collection/${collectionId}/items?context=edit&fetch_only=id,title,thumbnail`;
         const authorization = (wpStore.userLogin && wpStore.userToken) ? ('Basic ' + btoa(wpStore.userLogin + ':' + wpStore.userToken)) : null;
 
         if (params && params.perPage)
@@ -131,7 +131,7 @@ const useTainacanStore = defineStore("tainacan", {
       try {
         const wpStore = useWpStore();
         
-        const endpoint = `${wpStore.userSiteUrl}/wp-json/tainacan/v2/items?fetch_only=id,title,thumbnail&perpage=12&orderby=modified`;
+        const endpoint = `${wpStore.userSiteUrl}/wp-json/tainacan/v2/items?context=edit&fetch_only=id,title,thumbnail&perpage=12&orderby=modified`;
         const authorization = (wpStore.userLogin && wpStore.userToken) ? ('Basic ' + btoa(wpStore.userLogin + ':' + wpStore.userToken)) : null;
 
         const response = await axios.get(endpoint, authorization ? {
@@ -155,7 +155,7 @@ const useTainacanStore = defineStore("tainacan", {
       try {
         const wpStore = useWpStore();
         
-        let endpoint = `${wpStore.userSiteUrl}/wp-json/tainacan/v2/items?fetch_only=id,title,thumbnail`;
+        let endpoint = `${wpStore.userSiteUrl}/wp-json/tainacan/v2/items?context=edit&fetch_only=id,title,thumbnail`;
         const authorization = (wpStore.userLogin && wpStore.userToken) ? ('Basic ' + btoa(wpStore.userLogin + ':' + wpStore.userToken)) : null;
 
         if (params && params.perPage)
@@ -195,6 +195,39 @@ const useTainacanStore = defineStore("tainacan", {
         return err;
       }
     },
+
+    async deleteItem(itemId: string|number) {
+      try {
+        const wpStore = useWpStore();
+        
+        const endpoint = `${wpStore.userSiteUrl}/wp-json/tainacan/v2/items/${itemId}`;
+        const authorization = (wpStore.userLogin && wpStore.userToken) ? ('Basic ' + btoa(wpStore.userLogin + ':' + wpStore.userToken)) : null;
+
+        const response = await axios.delete(endpoint, authorization ? {
+          headers: {
+            authorization: authorization
+          }
+        } : {});
+        
+        if (response.data && response.data.id) {
+          const existingItemIndex = this.items.indexOf((anItem: any) => anItem.id == response.data.id);
+          if (existingItemIndex >= 0)
+            this.items.splice(existingItemIndex, 1);
+
+          const existingHomeItemIndex = this.homeItems.indexOf((anItem: any) => anItem.id == response.data.id);
+          if (existingHomeItemIndex >= 0)
+            this.items.splice(existingHomeItemIndex, 1);
+
+          const existingCollectionItemIndex = this.collectionItems.indexOf((anItem: any) => anItem.id == response.data.id);
+          if (existingCollectionItemIndex >= 0)
+            this.items.splice(existingCollectionItemIndex, 1);
+        }
+
+      } catch (err) {
+        console.error("Erro ao deletar item:", err);
+        return err;
+      }
+    }
   },
 });
 export { useTainacanStore };