Deploy #260

src/components/FunctionDetailView.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { IonButton, IonChip, IonCol, IonContent, IonGrid, IonIcon, IonItemDivider, IonLabel, IonList, IonPage, IonRow, IonText } from '@ionic/vue'
-import { personSharp, documentTextOutline, textOutline } from 'ionicons/icons'
+import { documentTextOutline, personSharp, textOutline } from 'ionicons/icons'
 import { ref } from 'vue'
 
 interface Props {
@@ -39,34 +39,36 @@ const metaIcon = ref(personSharp)
             Informações gerais
           </IonLabel>
         </IonItemDivider>
-        
+
         <IonList>
           <!-- Tag com abreviação alinhada à esquerda -->
           <div v-if="props.items.abbreviation" class="abbreviation-tag ion-margin-vertical ion-text-left">
             <IonChip color="primary">
               {{ props.items.abbreviation }}
             </IonChip>
           </div>
-        
+
           <!-- Ícone e nome da função alinhados à esquerda -->
           <div style="display: flex; align-items: center; padding: 6px;">
             <IonIcon slot="start" color="primary" style="padding-right: 10px;" :icon="personSharp" />
             <IonText color="primary" style="font-size: 11pt; padding-top: 2px;">
               {{ props.items.name }}
             </IonText>
           </div>
-          
+
           <!-- Ícone e descrição da função alinhados à esquerda -->
           <div v-if="props.items.description" style="display: flex; align-items: flex-start; padding: 6px;">
             <IonIcon slot="start" color="primary" style="padding-right: 10px; margin-top: 3px;" :icon="documentTextOutline" />
             <IonText color="primary" style="font-size: 11pt;">
-              <div class="description-text">{{ props.items.description }}</div>
+              <div class="description-text">
+                {{ props.items.description }}
+              </div>
             </IonText>
           </div>
         </IonList>
       </div>
     </IonContent>
-    
+
     <div>
       <IonGrid>
         <IonRow>

src/components/ListWithActionFunction.vue → src/components/ListWithAction.vue

@@ -1,82 +1,86 @@
 <script setup lang="ts">
 import { IonCard, IonCardContent, IonCardHeader, IonCardTitle, IonIcon, IonItem, IonItemOption, IonItemOptions, IonItemSliding, IonLabel, IonList } from '@ionic/vue'
-import { arrowBack, arrowForward, eye, pencilSharp, personSharp, trashSharp } from 'ionicons/icons'
-import { onMounted, onUnmounted, ref } from 'vue'
+import { apps, arrowBack, arrowForward, eye, pencilSharp, school, trashSharp } from 'ionicons/icons'
+import { ref } from 'vue'
+import { useRoute } from 'vue-router'
 
 interface Props {
   dataList: {
-    id: string
-    name: string
     abbreviation?: string | null
-    description?: string | null
+    active?: boolean
+    address?: string | null
+    course_id?: string | null
+    city?: string | null
     createdAt?: string
-    updatedAt?: string | null
     deletedAt?: string | null
+    email?: string | null
+    id: string
+    institution_id?: string | null
+    logourl?: string | null
+    name: string
+    phone?: string | null
+    postalcode?: string | null
+    school_zone?: string | null
+    social_network?: string | null
+    state?: string | null
+    updatedAt?: string | null
+    user_created?: string | null
+    website?: string | null
+    serieDisciplines?: [
+      {
+        discipline?: string | null
+        workload?: number | null
+      },
+    ]
   }[]
 }
 
 const props = defineProps<Props>()
 const emits = defineEmits(['update:see', 'update:edit', 'update:delete'])
 
+const route = useRoute()
 const isOpen = ref<boolean[]>([])
 const itemSliding = ref<(InstanceType<typeof IonItemSliding> | null)[]>([])
 
-// Tornar innerWidth reativo para responder a mudanças na largura da tela
-const innerWidth = ref(window.innerWidth)
-
-function updateInnerWidth() {
-  innerWidth.value = window.innerWidth
-}
-
-function handleSwipeOpened(index: number) {
-  isOpen.value[index] = true
-}
-
-function handleSwipeClosed(index: number) {
-  isOpen.value[index] = false
-}
-
-onMounted(() => {
-  window.addEventListener('resize', updateInnerWidth)
-  isOpen.value = Array.from<boolean>({ length: props.dataList.length }).fill(false)
-})
-
-onUnmounted(() => {
-  window.removeEventListener('resize', updateInnerWidth)
-})
+const innerWidth = window.innerWidth
 </script>
 
 <template>
   <IonCard v-if="true">
     <IonCardHeader color="secondary">
       <div style="display: flex; align-items: center; height: 15px;">
-        <IonIcon :icon="personSharp" style="margin-right: 10px; font-size: 16pt;" />
+        <IonIcon :icon="route?.meta?.icon ?? apps" style="margin-right: 10px; font-size: 16pt;" />
         <IonCardTitle style="font-size: medium;">
-          Lista de funções ({{ props.dataList.length }})
+          Lista de registros ({{ props.dataList.length }})
         </IonCardTitle>
       </div>
     </IonCardHeader>
 
     <div v-if="true">
       <IonCardContent class="ion-no-padding">
+        <!-- listando -->
+        <!-- <pre>
+          list: {{ list }}
+        </pre> -->
         <IonList>
           <div v-if="innerWidth < 992">
             <IonItemSliding
               v-for="(item, index) in props.dataList" :key="index" ref="itemSliding"
-              @ion-did-open="() => handleSwipeOpened(index)"
-              @ion-did-close="() => handleSwipeClosed(index)"
             >
+              <!-- @ion-drag="console.log('ion-drag')" -->
               <IonItem>
-                <IonLabel color="primary" class="ion-no-margin function-name" style="margin-top: 5px; margin-bottom: 5px;">
-                  <h2>{{ item.name || 'Função sem nome' }}</h2>
-                  <p v-if="item.abbreviation">
-                    {{ item.abbreviation }}
+                <IonLabel color="primary" class="ion-no-margin" style="margin-top: 5px; margin-bottom: 5px;">
+                  <h2>{{ item.name || 'Item sem nome' }}</h2>
+                  <p v-if="item.address" style="color: rgba(var(--ion-color-primary-rgb), 0.6);">
+                    {{ item.address || 'Sem endereço' }}
                   </p>
                 </IonLabel>
                 <IonIcon :icon="isOpen[index] ? arrowForward : arrowBack" style="font-size: 18pt;" />
               </IonItem>
 
               <IonItemOptions side="end" style="border-bottom: 1px solid rgba(var(--ion-color-primary-rgb), 0.2);">
+                <!-- @ion-swipe="handleOpened(index)" -->
+
                 <IonItemOption color="tertiary" @click="emits('update:see', { modal: true, data: item })">
                   <div style="width: 40px; display: flex; justify-content: center;">
                     <IonIcon :icon="eye" style="font-size: 18pt;" />
@@ -92,15 +96,31 @@ onUnmounted(() => {
                     <IonIcon :icon="trashSharp" style="font-size: 18pt;" />
                   </div>
                 </IonItemOption>
+
+                <!-- <IonItemOption style="background-color: white; border-left: 1px solid var(--ion-color-primary);" @click="emits('update:see', { modal: true, data: item })">
+                  <div style="width: 40px; display: flex; justify-content: center;">
+                    <IonIcon color="tertiary" :icon="eye" style="font-size: 18pt;" />
+                  </div>
+                </IonItemOption>
+                <IonItemOption style="background-color: white;" @click="emits('update:edit', { modal: true, data: item })">
+                  <div style="width: 40px; display: flex; justify-content: center;">
+                    <IonIcon color="primary" :icon="pencilSharp" style="font-size: 18pt;" />
+                  </div>
+                </IonItemOption>
+                <IonItemOption style="background-color: white;" @click="emits('update:delete', { modal: true, data: item })">
+                  <div style="width: 40px; display: flex; justify-content: center;">
+                    <IonIcon color="danger" :icon="trashSharp" style="font-size: 18pt;" />
+                  </div>
+                </IonItemOption> -->
               </IonItemOptions>
             </IonItemSliding>
           </div>
           <div v-else>
             <IonItem v-for="(item, index) in props.dataList" :key="index">
-              <IonLabel color="primary" class="ion-no-margin function-name" style="margin-top: 5px; margin-bottom: 5px;">
-                <h2>{{ item.name || 'Função sem nome' }}</h2>
-                <p v-if="item.abbreviation">
-                  {{ item.abbreviation }}
+              <IonLabel color="primary" class="ion-no-margin" style="margin-top: 5px; margin-bottom: 5px;">
+                <h2>{{ item.name || 'Item sem nome' }}</h2>
+                <p style="color: rgba(var(--ion-color-primary-rgb), 0.6);">
+                  {{ item.address || 'Sem endereço' }}
                 </p>
               </IonLabel>
               <div style="display: flex; min-height: 100%;">
@@ -129,16 +149,5 @@ onUnmounted(() => {
 </template>
 
 <style scoped>
-.function-name h2 {
-  text-align: left;
-  font-size: 18px;
-  font-weight: 500;
-  color: var(--ion-color-primary);
-  padding-bottom: 4px;
-}
 
-.function-name p {
-  font-size: 14px;
-  color: var(--ion-color-medium);
-}
 </style>