Adds action sheet for creating items.
This commit is contained in:
parent
b886536658
commit
a0652dd1d2
|
@ -19,7 +19,13 @@ export const translationStrings = {
|
|||
label_collection_without_name: 'Collection without name',
|
||||
total_of_published_items: 'Total of {0} published items',
|
||||
label_last_modified_collections: 'Last modified collections',
|
||||
label_last_modified_items: 'Last modified itens'
|
||||
label_last_modified_items: 'Last modified itens',
|
||||
label_add_items: 'Add items',
|
||||
info_create_items: 'Create new items in this collection',
|
||||
label_option_multiple_items: 'Multiple items from file selection',
|
||||
label_option_multiple_attachments: 'Single item with document and attachments from file selection',
|
||||
label_option_single_item: 'Single empty item',
|
||||
label_cancel: 'Cancel'
|
||||
},
|
||||
pt: {
|
||||
collections: "Coleções",
|
||||
|
@ -41,6 +47,12 @@ export const translationStrings = {
|
|||
label_collection_without_name: 'Coleção sem nome',
|
||||
total_of_published_items: 'Total de {0} itens públicos',
|
||||
label_last_modified_collections: 'Coleções alteradas recentemente',
|
||||
label_last_modified_items: 'Itens alterados recentemente'
|
||||
label_last_modified_items: 'Itens alterados recentemente',
|
||||
label_add_items: 'Adicionar itens',
|
||||
info_create_items: 'Crie novos itens nesta coleção',
|
||||
label_option_multiple_items: 'Vários itens a partir de uma seleção de arquivos',
|
||||
label_option_multiple_attachments: 'Um item com documento e anexos provenientes de ums seleção de aquivos',
|
||||
label_option_single_item: 'Um item vazio',
|
||||
label_cancel: 'Cancelar'
|
||||
}
|
||||
}
|
|
@ -9,16 +9,13 @@
|
|||
>
|
||||
</ion-loading>
|
||||
<items-list :items="tainacanStore.collectionItems"></items-list>
|
||||
<ion-fab vertical="bottom" horizontal="end" slot="fixed">
|
||||
<ion-fab-button>
|
||||
<ion-icon :icon="add"></ion-icon>
|
||||
</ion-fab-button>
|
||||
<ion-fab-list side="top" class="collection-page-actions">
|
||||
<ion-button size="small">Criar um novo item</ion-button>
|
||||
<ion-button size="small">Criar item com anexos selecionados</ion-button>
|
||||
<ion-button size="small">Criar itens a partir de uma seleção</ion-button>
|
||||
</ion-fab-list>
|
||||
</ion-fab>
|
||||
<ion-button
|
||||
class="add-items-button"
|
||||
color="primary"
|
||||
@click="openActionSheet()">
|
||||
<ion-icon :icon="add"></ion-icon>
|
||||
{{ $t('label_add_items') }}
|
||||
</ion-button>
|
||||
</base-layout>
|
||||
</template>
|
||||
|
||||
|
@ -28,15 +25,15 @@ import {
|
|||
} from '../store/storeTainacan';
|
||||
import { useRoute } from "vue-router";
|
||||
import { ref } from 'vue';
|
||||
import { add } from "ionicons/icons";
|
||||
import { add, documentOutline, documentAttachOutline, documentsOutline } from "ionicons/icons";
|
||||
|
||||
import {
|
||||
IonLoading,
|
||||
IonRefresher,
|
||||
IonRefresherContent,
|
||||
IonFab,
|
||||
IonIcon,
|
||||
IonFabList
|
||||
IonButton,
|
||||
actionSheetController
|
||||
} from '@ionic/vue';
|
||||
|
||||
import BaseLayout from '@/components/base/BaseLayout.vue';
|
||||
|
@ -49,9 +46,8 @@ export default {
|
|||
IonLoading,
|
||||
IonRefresher,
|
||||
IonRefresherContent,
|
||||
IonFab,
|
||||
IonIcon,
|
||||
IonFabList
|
||||
IonButton
|
||||
},
|
||||
setup() {
|
||||
const isLoading = ref(false);
|
||||
|
@ -66,6 +62,54 @@ export default {
|
|||
if (event && event.target)
|
||||
event.target.complete();
|
||||
}
|
||||
const actionSheetLabels = ref({
|
||||
header: '',
|
||||
button1: '',
|
||||
button2: '',
|
||||
button3: '',
|
||||
cancel: ''
|
||||
});
|
||||
const setActionSheetLabels = (newLabels: any) => actionSheetLabels.value = newLabels;
|
||||
const openActionSheet = async () => {
|
||||
const actionSheet = await actionSheetController.create({
|
||||
header: actionSheetLabels.value.header,
|
||||
cssClass: 'item-creation-action-sheet',
|
||||
buttons: [
|
||||
{
|
||||
text: actionSheetLabels.value.button1,
|
||||
icon: documentsOutline,
|
||||
data: 'multiple-items',
|
||||
handler: () => {
|
||||
console.log('Vários iteeeens')
|
||||
},
|
||||
},
|
||||
{
|
||||
text: actionSheetLabels.value.button2,
|
||||
icon: documentAttachOutline,
|
||||
data: 'multiple-attachments',
|
||||
handler: () => {
|
||||
console.log('Item com vários anexos')
|
||||
},
|
||||
},
|
||||
{
|
||||
text: actionSheetLabels.value.button3,
|
||||
icon: documentOutline,
|
||||
data: 'single item',
|
||||
handler: () => {
|
||||
console.log('Item simples')
|
||||
},
|
||||
},
|
||||
{
|
||||
text: actionSheetLabels.value.cancel,
|
||||
role: 'cancel'
|
||||
},
|
||||
],
|
||||
});
|
||||
await actionSheet.present();
|
||||
|
||||
const { role, data } = await actionSheet.onDidDismiss();
|
||||
console.log('onDidDismiss resolved with role and data', role, data);
|
||||
}
|
||||
|
||||
let tainacanStore = useTainacanStore();
|
||||
|
||||
|
@ -75,11 +119,23 @@ export default {
|
|||
setIsLoading,
|
||||
loadItemsByCollection,
|
||||
doRefresh,
|
||||
openActionSheet,
|
||||
collectionId,
|
||||
add
|
||||
add,
|
||||
actionSheetLabels,
|
||||
setActionSheetLabels
|
||||
}
|
||||
},
|
||||
async created() {
|
||||
|
||||
this.setActionSheetLabels({
|
||||
header: this.$t('info_create_items'),
|
||||
button1: this.$t('label_option_multiple_items'),
|
||||
button2: this.$t('label_option_multiple_attachments'),
|
||||
button3: this.$t('label_option_single_item'),
|
||||
cancel: this.$t('label_cancel')
|
||||
});
|
||||
|
||||
this.setIsLoading(true);
|
||||
await this.loadItemsByCollection();
|
||||
this.setIsLoading(false);
|
||||
|
@ -88,8 +144,15 @@ export default {
|
|||
</script>
|
||||
|
||||
<style>
|
||||
.collection-page-actions {
|
||||
right: 0;
|
||||
align-items: flex-end;
|
||||
.add-items-button {
|
||||
position: fixed;
|
||||
bottom: 16px;
|
||||
right: 16px;
|
||||
height: 52px;
|
||||
--padding-start: 24px;
|
||||
--padding-bottom: 16px;
|
||||
--padding-top: 16px;
|
||||
--padding-end: 24px;
|
||||
--border-radius: 18px;
|
||||
}
|
||||
</style>
|
|
@ -58,24 +58,4 @@ http://ionicframework.com/docs/theming/ */
|
|||
--ion-color-light-contrast-rgb: 0,0,0;
|
||||
--ion-color-light-shade: #d7d8da;
|
||||
--ion-color-light-tint: #f5f6f9;
|
||||
|
||||
--ion-color-step-50: #0d0d0d;
|
||||
--ion-color-step-100: #1a1a1a;
|
||||
--ion-color-step-150: #262626;
|
||||
--ion-color-step-200: #333333;
|
||||
--ion-color-step-250: #404040;
|
||||
--ion-color-step-300: #4d4d4d;
|
||||
--ion-color-step-350: #595959;
|
||||
--ion-color-step-400: #666666;
|
||||
--ion-color-step-450: #737373;
|
||||
--ion-color-step-500: #808080;
|
||||
--ion-color-step-550: #8c8c8c;
|
||||
--ion-color-step-600: #999999;
|
||||
--ion-color-step-650: #a6a6a6;
|
||||
--ion-color-step-700: #b3b3b3;
|
||||
--ion-color-step-750: #bfbfbf;
|
||||
--ion-color-step-800: #cccccc;
|
||||
--ion-color-step-850: #d9d9d9;
|
||||
--ion-color-step-900: #e6e6e6;
|
||||
--ion-color-step-950: #f2f2f2;
|
||||
}
|
Loading…
Reference in New Issue