works on RED-21

web-app-vue/src/components/recorrencia/detalhe-recorrencia.vue

@@ -1,4 +1,23 @@
 <template>
-  <p>detalhe </p>
+
+  <v-chip
+      v-if="!edit"
+      rounded
+      variant="outlined"
+      color="green-accent-2"
+      class="ma-2"
+      size="x-large"
+      :append-icon="props.recorrencia?.id ? 'mdi-playlist-edit' : 'mdi-playlist-plus'"
+      @click="edit = !edit"
+  >
+    {{ props.recorrencia?.descricao || "Nova recorrência" }}
+  </v-chip>
 </template>
-<script setup></script>
+<script setup>
+import {ref} from "vue";
+
+const props = defineProps(['recorrencia'])
+const emit = defineEmits(['onSave', 'onCancel', 'onDel'])
+
+const edit = ref(false)
+</script>

web-app-vue/src/components/recorrencia/list-recorrencia.vue

@@ -9,12 +9,14 @@
 <script setup>
   import {useRecorrenciaStore} from "@/stores/recorrenciaStore";
   import DetalheRecorrencia from "@/components/recorrencia/detalhe-recorrencia.vue";
-  import {computed} from "vue";
+  import {computed, onMounted} from "vue";
 
   const recorrenciaStore = useRecorrenciaStore()
 
   const recorrencias = computed(() => {
     return recorrenciaStore.store.recorrencias || []
   })
 
+  onMounted(async () => await recorrenciaStore.sincronizarRecorrencia())
+
 </script>

web-app-vue/src/services/api.js

@@ -168,3 +168,15 @@ export const listRecorrencias = async ({ id, q, limit, offset }) =>
       }
     })
   })
+
+export const insertRecorrencia = async ({ id, recorrencia }) =>
+  await post({ uri: `/${id}/recorrencia`, payload: recorrencia })
+
+export const findRecorrencia = async ({ id, recorrencia_id }) =>
+  await get({ uri: `/${id}/recorrencia/${recorrencia_id}` })
+
+export const updateRecorrencia = async ({ id, recorrencia }) =>
+  await put({ uri: `/${id}/recorrencia/${recorrencia.id}`, payload: recorrencia })
+
+export const delRecorrencia = async ({ id, recorrencia_id }) =>
+  await del({ uri: `/${id}/recorrencia/${recorrencia_id}` })

web-app-vue/src/stores/recorrenciaStore.js

@@ -2,6 +2,12 @@ import { defineStore } from 'pinia'
 import { reactive } from 'vue'
 import { useUserStore } from '@/stores/userStore'
 import { getRedLine } from '@/services/redLine'
+import {
+  delRecorrencia,
+  insertRecorrencia,
+  listRecorrencias,
+  updateRecorrencia
+} from '@/services/api'
 
 export const useRecorrenciaStore = defineStore('recorrencia-store', () => {
   const uState = useUserStore()
@@ -15,12 +21,26 @@ export const useRecorrenciaStore = defineStore('recorrencia-store', () => {
     }
   })
 
-  const sincronizarRecorrencia = () => {
+  const sincronizarRecorrencia = async () => {
+    console.log("aqui")
     const { id } = uState.userData
-    const { q, limit, offset } = store.filtroPlanejamentos
+    const { q, limit, offset } = store.filtroRecorrencias
+    store.recorrencias = await listRecorrencias({ id, q, limit, offset })
+  }
+  const salvarRecorrencia = async (recorrencia) => {
+    const { id } = uState.userData
+    if (recorrencia.id) {
+      await updateRecorrencia({ id, recorrencia })
+    } else {
+      await insertRecorrencia({ id, recorrencia })
+    }
+    await sincronizarRecorrencia()
+  }
+  const excluirRecorrencia = async (recorrencia_id) => {
+    const { id } = uState.userData
+    await delRecorrencia({ id, recorrencia_id })
+    await sincronizarRecorrencia()
   }
-  const salvarRecorrencia = () => {}
-  const excluirRecorrencia = () => {}
 
   return { store, sincronizarRecorrencia, salvarRecorrencia, excluirRecorrencia }
 })