works on REDLINE-17

docs/ROADMAP.md

@@ -46,4 +46,13 @@ general notes
 
 - multi tenant
 - rest api with hierarchical paths
-- 
+
+## design insights
+
+- liquids
+- water levels
+- cards
+- deck
+- pills
+- controls
+- charts

web-app-vue/src/App.vue

@@ -2,6 +2,7 @@
 import CardOption from "@/components/CardOption.vue";
 import CardLogin from "@/components/usuario/card-login.vue";
 import NovaMovimentacao from "@/components/movimentacao/nova-movimentacao.vue";
+import ListaMovimentacoes from "@/components/movimentacao/lista-movimentacoes.vue";
 import ListaCategorias from "@/components/categoria/lista-categorias.vue";
 import ListaPlanejamentos from "@/components/planejamento/lista-planejamentos.vue";
 import NovaCarteira from "@/components/conta/nova-conta.vue";
@@ -29,6 +30,7 @@ const uState = useUserStore();
                  :active="cState.store.activeCard.movimentacao"
                  @onActive="e => cState.toggleCard('movimentacao', e)">
       <nova-movimentacao></nova-movimentacao>
+      <lista-movimentacoes></lista-movimentacoes>
     </card-option>
     <card-option v-if="uState.store.token"
                  :title="'Carteiras e contas'"

web-app-vue/src/components/movimentacao/lista-movimentacoes.vue

@@ -0,0 +1,16 @@
+<template>
+  <ul>
+    <li></li>
+  </ul>
+</template>
+<script setup>
+import { useMovimentacaoStore } from '@/stores/movimentacaoStore'
+import { onMounted } from 'vue'
+
+const mState = useMovimentacaoStore()
+
+onMounted(() => {
+  mState.sincronizarMovimentacoes()
+})
+</script>
+<style scoped></style>

web-app-vue/src/components/movimentacao/nova-movimentacao.vue

@@ -1,5 +1,25 @@
 <template>
-  <div>nova movimentação</div>
+  <form @submit.stop.prevent="salvarMovimentacao()">
+    <select v-model="novaMovimentacao.tipo">
+      <option>Selecione uma conta</option>
+      <option v-for="tipo in mState.store.tiposMovimentacao" :key="tipo.id" :value="tipo">
+        {{ tipo.descricao }}
+      </option>
+    </select>
+    <input placeholder="valor" />
+    <button type="submit">salvar</button>
+  </form>
 </template>
-<script setup></script>
+<script setup>
+import { useMovimentacaoStore } from '@/stores/movimentacaoStore'
+import { reactive } from 'vue'
+
+const mState = useMovimentacaoStore()
+
+const novaMovimentacao = reactive({
+  tipo: { id: 2, descricao: 'SAIDA' }
+})
+
+const salvarMovimentacao = async () => {}
+</script>
 <style scoped></style>

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

@@ -2,7 +2,7 @@ import { defineStore } from 'pinia'
 import { useUserStore } from '@/stores/userStore'
 import { reactive } from 'vue'
 import { getRedLine, setRedLine } from '@/services/redLine'
-import { lisTiposMovimentacao } from "@/services/api";
+import { lisTiposMovimentacao, listMovimentacoes } from '@/services/api'
 
 export const useMovimentacaoStore = defineStore('movimentacao-store', () => {
   const uState = useUserStore()
@@ -19,7 +19,9 @@ export const useMovimentacaoStore = defineStore('movimentacao-store', () => {
 
   const sincronizarMovimentacoes = async () => {
     const redLine = getRedLine()
+    const { id } = uState.userData
     store.tiposMovimentacao = await lisTiposMovimentacao()
+    store.movimentacoes = await listMovimentacoes({ id })
     setRedLine({
       ...redLine,
       tiposMovimentacao: store.tiposMovimentacao,