tmdinosaurcenter
/
tainacan-mobile
mirror of https://github.com/tainacan/tainacan-mobile.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

This commit is contained in:
mateuswetah 2022-07-27 11:38:09 -03:00
parent 4c6ac82561
commit b04ed6dbec
4 changed files with 117 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
src/components/lists/ItemsList.vue
View File

@ -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 { computed } from 'vue';
import { pencil, trashBin } from "ionicons/icons";
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>

10
src/locales/translation-strings.ts
View File

@ -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'
}
}

2
src/pages/CollectionPage.vue
View File

@ -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,

39
src/store/storeTainacan.ts
View File

@ -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 };