Adds action sheet for creating items.

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

src/pages/CollectionPage.vue

@@ -9,16 +9,13 @@
         >
         </ion-loading>
         <items-list :items="tainacanStore.collectionItems"></items-list>
-        <ion-fab vertical="bottom" horizontal="end" slot="fixed">
+        <ion-button 
-            <ion-fab-button>
+                class="add-items-button"
-                <ion-icon :icon="add"></ion-icon>
+                color="primary"
-            </ion-fab-button>
+                @click="openActionSheet()">
-            <ion-fab-list side="top" class="collection-page-actions">
+            <ion-icon :icon="add"></ion-icon>
-                <ion-button size="small">Criar um novo item</ion-button>
+            &nbsp;{{ $t('label_add_items') }}
-                <ion-button size="small">Criar item com anexos selecionados</ion-button>
+        </ion-button>
-                <ion-button size="small">Criar itens a partir de uma seleção</ion-button>
-            </ion-fab-list>
-        </ion-fab>
     </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 {
+.add-items-button {
-    right: 0;
+    position: fixed;
-    align-items: flex-end;
+    bottom: 16px;
+    right: 16px;
+    height: 52px;
+    --padding-start: 24px;
+    --padding-bottom: 16px;
+    --padding-top: 16px;
+    --padding-end: 24px;
+    --border-radius: 18px;
 }
 </style>

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