From a0652dd1d2a70640a3a2b4c4e2e00ac26b10c70b Mon Sep 17 00:00:00 2001 From: mateuswetah Date: Fri, 27 May 2022 14:36:32 -0300 Subject: [PATCH] Adds action sheet for creating items. --- src/locales/translation-strings.ts | 16 ++++- src/pages/CollectionPage.vue | 101 +++++++++++++++++++++++------ src/theme/variables.css | 20 ------ 3 files changed, 96 insertions(+), 41 deletions(-) diff --git a/src/locales/translation-strings.ts b/src/locales/translation-strings.ts index c82ee5a..a533af1 100644 --- a/src/locales/translation-strings.ts +++ b/src/locales/translation-strings.ts @@ -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' } } \ No newline at end of file diff --git a/src/pages/CollectionPage.vue b/src/pages/CollectionPage.vue index 0c96277..7f33976 100644 --- a/src/pages/CollectionPage.vue +++ b/src/pages/CollectionPage.vue @@ -9,16 +9,13 @@ > - - - - - - Criar um novo item - Criar item com anexos selecionados - Criar itens a partir de uma seleção - - + + +  {{ $t('label_add_items') }} + @@ -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 { \ No newline at end of file diff --git a/src/theme/variables.css b/src/theme/variables.css index b164370..9ee4396 100644 --- a/src/theme/variables.css +++ b/src/theme/variables.css @@ -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; } \ No newline at end of file