REDLINE-20 falta só o editar

Author: sombriks

web-app-vue/src/components/categoria/lista-categorias.vue

@@ -1,18 +1,43 @@
 <template>
   <ul>
-    <li v-if="!cState.store.categorias || !cState.store.categorias.length">Não há categorias para exibir</li>
-    <li v-for="cat in cState.store.categorias" :key="cat.id">{{cat.descricao}}</li>
+    <li>
+      <form @submit.prevent.stop="salvarNova">
+        <input v-model="novaCategoria.descricao" required placeholder="Nova categoria" />
+        <button type="submit">Salvar</button>
+      </form>
+    </li>
+    <li v-if="!cState.store.categorias || !cState.store.categorias.length">
+      Não há categorias para exibir
+    </li>
+    <li v-for="cat in cState.store.categorias" :key="cat.id">
+      {{ cat.descricao }}
+      <button @click="removeCategoria(cat)">&#128686;</button>
+    </li>
   </ul>
 </template>
 <script setup>
-
-import { useCategoriaStore } from "@/stores/categoriaStore";
-import { onMounted } from "vue";
+import { useCategoriaStore } from '@/stores/categoriaStore'
+import { onMounted, reactive } from 'vue'
 
 const cState = useCategoriaStore()
 
+const novaCategoria = reactive({
+  descricao: ''
+})
+
+const salvarNova = async () => {
+  await cState.salvarCategoria({ ...novaCategoria })
+  novaCategoria.descricao = ''
+  await cState.sincronizarCategorias()
+}
+
+const removeCategoria = async (categoria) => {
+  if (!confirm('deseja realmente excluir esta categoria?')) return
+  await cState.excluirCategoria(categoria)
+  await cState.sincronizarCategorias()
+}
 onMounted(() => {
   cState.sincronizarCategorias()
 })
 </script>
-<style scoped></style>
+<style scoped></style>

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

@@ -10,9 +10,9 @@ const req = async ({ method = 'POST', uri, payload }) => {
   }
   if (token) headers['Authorization'] = `Bearer ${token}`
   const result = await fetch(url, {
-    method,
+    body: JSON.stringify(payload),
     headers,
-    body: JSON.stringify(payload)
+    method
   })
   return result.json()
 }
@@ -47,3 +47,12 @@ export const deleteConta = async ({ id, conta }) => await del({ uri: `/${id}/con
 
 export const listCategorias = async ({ id, q = '', limit = 50, offset = 0 }) =>
   await get({ uri: `/${id}/categoria?q=${q}&limit=${limit}&offset=${offset}` })
+
+export const updateCategoria = async ({ id, categoria }) =>
+  await put({ uri: `/${id}/categoria/${categoria.id}`, payload: categoria })
+
+export const insertCategoria = async ({ id, categoria }) =>
+  await post({ uri: `/${id}/categoria`, payload: categoria })
+
+export const delCategoria = async ({ id, categoria }) =>
+  await del({ uri: `/${id}/categoria/${categoria.id}` })

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

@@ -1,21 +1,38 @@
 import { defineStore } from 'pinia'
 import { reactive } from 'vue'
-import { getRedLine } from "@/services/redLine";
-import { listCategorias } from "@/services/api";
-import { useUserStore } from "@/stores/userStore";
+import { getRedLine, setRedLine } from '@/services/redLine'
+import { delCategoria, insertCategoria, listCategorias, updateCategoria } from '@/services/api'
+import { useUserStore } from '@/stores/userStore'
 
 export const useCategoriaStore = defineStore('categoria-store', () => {
   const uState = useUserStore()
 
-
   const store = reactive({
     categorias: getRedLine()?.categorias || []
   })
 
   const sincronizarCategorias = async () => {
-    const {id} = uState.userData
-    store.categorias = await listCategorias({id})
+    const { id } = uState.userData
+    const categorias = await listCategorias({ id })
+    store.categorias = categorias
+    setRedLine({ ...getRedLine(), categorias })
+  }
+
+  const salvarCategoria = async (categoria) => {
+    const { id } = uState.userData
+    categoria.usuario_id = id
+    if (categoria.id) {
+      await updateCategoria({ id, categoria })
+    } else {
+      await insertCategoria({ id, categoria })
+    }
+  }
+
+  const excluirCategoria = async (categoria) => {
+    const { id } = uState.userData
+    categoria.usuario_id = id
+    await delCategoria({ id, categoria })
   }
 
-  return { store, sincronizarCategorias }
+  return { store, sincronizarCategorias, salvarCategoria, excluirCategoria }
 })