RED-11 categorias

sombriks · Sep 8, 2023 · a8a8db7 · a8a8db7
1 parent 6934b64
commit a8a8db7
Show file tree

Hide file tree

Showing 10 changed files with 125 additions and 78 deletions.
diff --git a/web-app-vue/src/App.vue b/web-app-vue/src/App.vue
@@ -1,5 +1,6 @@
 <script setup>
 import { useUserStore } from "@/stores/userStore";
+import { ref } from "vue";
 
 const userStore = useUserStore()
 const menu = [
@@ -11,21 +12,31 @@ const menu = [
   { label: 'Recorrências', icon: 'mdi-history', path: '/recorrencias' },
   { label: 'Configurações', icon: 'mdi-cog-outline', path: '/config' },
 ]
+const show = ref(false)
 </script>
 
 <template>
   <v-layout class="rounded rounded-md">
+    <v-app-bar :collapse="!show" v-if="userStore.store.token" title="redline">
+      <template v-slot:prepend>
+        <v-app-bar-nav-icon icon="mdi-pulse" color="red" @click="show = !show"></v-app-bar-nav-icon>
+      </template>
+    </v-app-bar>
+    <v-navigation-drawer v-if="userStore.store.token" v-model="show">
+      <v-list>
+        <v-list-item v-for="m in menu" :key="m.label">
+            <template v-slot:prepend>
+              <v-icon color="red-lighten-3" :icon="m.icon"></v-icon>
+            </template>
+            <v-list-item-title>
+              <router-link :to="m.path">{{m.label}}</router-link>
+            </v-list-item-title>
+        </v-list-item>
+      </v-list>
+    </v-navigation-drawer>
     <v-main class="d-flex align-center justify-center" style="min-height: 300px">
       <router-view></router-view>
     </v-main>
-    <v-bottom-navigation v-if="userStore.store.token" :elevation="24" active mode="shift">
-      <router-link v-for="m in menu" :key="m.label" :to="m.path">
-        <v-btn :value="m.label">
-          <v-icon>{{m.icon}}</v-icon>
-          <span>{{m.label}}</span>
-        </v-btn>
-      </router-link>
-    </v-bottom-navigation>
   </v-layout>
 </template>
 

diff --git a/web-app-vue/src/assets/base.css b/web-app-vue/src/assets/base.css
@@ -72,7 +72,3 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
-
-hr, .container{
-  border: 1px solid red;
-}
diff --git a/web-app-vue/src/assets/main.css b/web-app-vue/src/assets/main.css
@@ -1,5 +1,11 @@
 @import './base.css';
 
+/* TODO it should come from vuetify color pack */
+/* https://vuetifyjs.com/en/styles/colors/#material-colors */
+:root {
+  --red-lighten-3: #EF9A9A;
+}
+
 #app {
   display: flex;
   flex-direction: column;
@@ -8,19 +14,12 @@
   min-height: 100vh;
 }
 
-a,
-.green {
+a {
+  color: var(--red-lighten-3);
   text-decoration: none;
-  color: hsla(160, 100%, 37%, 1);
   transition: 0.4s;
 }
 
-@media (hover: hover) {
-  a:hover {
-    background-color: hsla(160, 100%, 37%, 0.2);
-  }
-}
-
 @media (min-width: 1024px) {
   body {
     display: flex;

diff --git a/web-app-vue/src/components/categoria/detalhe-categoria.vue b/web-app-vue/src/components/categoria/detalhe-categoria.vue
@@ -1,27 +1,52 @@
 <template>
-  <li>
-    <span v-if="!edit" @click="edit = !edit">
-      {{ props.categoria.descricao }}
-      <button @click="emit('onRemove', props.categoria)">&#128686;</button>
-    </span>
-    <form v-if="edit" @submit.prevent.stop="doEdit">
-      <input required placeholder="Descrição" v-model="catEdit.descricao" />
-      <button type="submit">&#9989;</button>
-      <button type="button" @click="edit = !edit">&#10060;</button>
-    </form>
-  </li>
+  <v-chip
+    v-if="!edit"
+    rounded
+    variant="outlined"
+    class="ma-2"
+    size="x-large"
+    append-icon="mdi-playlist-edit"
+    @click="edit = !edit"
+  >
+    {{ catEdit.descricao }}
+  </v-chip>
+  <v-card v-if="edit" elevation="24" min-width="300px" class="ma-2">
+    <v-form v-model="valid" @submit.prevent.stop="doEdit">
+      <v-text-field :rules="[requiredRule]" v-model="catEdit.descricao" label="Nome"></v-text-field>
+      <v-container>
+        <v-row align="center">
+          <v-btn class="ma-2" type="submit">Salvar</v-btn>
+          <v-btn variant="tonal" class="ma-2" type="button" @click="edit = !edit">Cancelar</v-btn>
+        </v-row>
+      </v-container>
+    </v-form>
+  </v-card>
+  <!--  <li>-->
+  <!--    <span v-if="!edit" @click="edit = !edit">-->
+  <!--      {{ props.categoria.descricao }}-->
+  <!--      <button @click="emit('onRemove', props.categoria)">&#128686;</button>-->
+  <!--    </span>-->
+  <!--    <form v-if="edit" @submit.prevent.stop="doEdit">-->
+  <!--      <input required placeholder="Descrição" v-model="catEdit.descricao" />-->
+  <!--      <button type="submit">&#9989;</button>-->
+  <!--      <button type="button" @click="edit = !edit">&#10060;</button>-->
+  <!--    </form>-->
+  <!--  </li>-->
 </template>
 <script setup>
 import { reactive, ref } from 'vue'
+import { requiredRule } from '@/form-rules/basic-rules'
 
 const props = defineProps(['categoria'])
 const emit = defineEmits(['onRemove', 'onEdit'])
 
 const edit = ref(false)
 
-const catEdit = reactive({ descricao: props.categoria.descricao })
+const catEdit = reactive({ ...props.categoria })
+const valid = ref(false)
 
 const doEdit = () => {
+  if (!valid.value) return
   emit('onEdit', {
     ...props.categoria,
     descricao: catEdit.descricao

diff --git a/web-app-vue/src/components/categoria/lista-categorias.vue b/web-app-vue/src/components/categoria/lista-categorias.vue
@@ -1,22 +1,33 @@
 <template>
-  <ul>
-    <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>
-    <detalhe-categoria
-      v-for="cat in cState.store.categorias"
-      :key="cat.id"
-      :categoria="cat"
-      @onRemove="removeCategoria"
-      @onEdit="editaCategoria"
-    ></detalhe-categoria>
-  </ul>
+  <!--  <ul>-->
+  <!--    <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>-->
+  <!--    <detalhe-categoria-->
+  <!--      v-for="cat in cState.store.categorias"-->
+  <!--      :key="cat.id"-->
+  <!--      :categoria="cat"-->
+  <!--      @onRemove="removeCategoria"-->
+  <!--      @onEdit="editaCategoria"-->
+  <!--    ></detalhe-categoria>-->
+  <!--  </ul>-->
+
+  <v-container>
+    <v-row align="center">
+      <detalhe-categoria
+        @onEdit="cat => cat.id ? editaCategoria(cat) : salvarNova(cat)"
+        v-for="cat in cState.store.categorias"
+        :key="cat.id"
+        :categoria="cat"
+      ></detalhe-categoria>
+    </v-row>
+  </v-container>
 </template>
 <script setup>
 import { useCategoriaStore } from '@/stores/categoriaStore'
@@ -29,8 +40,8 @@ const novaCategoria = reactive({
   descricao: ''
 })
 
-const salvarNova = async () => {
-  await cState.salvarCategoria({ ...novaCategoria })
+const salvarNova = async (cat) => {
+  await cState.salvarCategoria({ ...cat })
   novaCategoria.descricao = ''
   await cState.sincronizarCategorias()
 }

diff --git a/web-app-vue/src/components/usuario/card-login.vue b/web-app-vue/src/components/usuario/card-login.vue
@@ -1,21 +1,22 @@
 <template>
-  <v-card :title="createMode ? 'Criar conta' : 'Login'">
+  <v-card :title="createMode ? 'Criar conta' : 'Login'" elevation="24">
     <v-form v-model="valid" @submit.prevent.stop="doLogin" class="auth-form">
       <v-text-field :rules=[requiredRule] v-if="createMode" v-model="nome" label="Nome" required></v-text-field>
       <v-text-field :rules=[requiredRule] v-model="email" label="Email" required type="email"></v-text-field>
       <v-text-field :rules=[requiredRule] v-model="senha" label="Senha" required type="password"></v-text-field>
       <hr />
-      <v-btn aria-roledescription='create-mode' type="button" @click="createMode = !createMode">
+      <v-btn type="submit">{{createMode ? 'Criar conta' : 'Login'}}</v-btn>
+      <v-btn variant="tonal" aria-roledescription='create-mode' type="button" @click="createMode = !createMode">
         {{ createMode ? 'Cancelar' : 'Criar conta' }}
       </v-btn>
-      <v-btn type="submit">{{createMode ? 'Criar conta' : 'Login'}}</v-btn>
     </v-form>
   </v-card>
 </template>
 <script setup>
 import { ref } from 'vue'
 import { useUserStore } from '@/stores/userStore'
 import { router } from "@/routes/router";
+import { requiredRule } from "@/form-rules/basic-rules";
 
 const nome = ref('')
 const email = ref('')
@@ -24,11 +25,6 @@ const createMode = ref(false)
 const valid = ref(false)
 const uState = useUserStore()
 
-const requiredRule = value => {
-  if(value) return true
-  return "Required field"
-}
-
 const doLogin = async () => {
   if(!valid.value) return
   try {

diff --git a/web-app-vue/src/form-rules/basic-rules.js b/web-app-vue/src/form-rules/basic-rules.js
@@ -0,0 +1,5 @@
+
+export const requiredRule = value => {
+  if(value) return true
+  return "Required field"
+}
diff --git a/web-app-vue/src/main.js b/web-app-vue/src/main.js
@@ -1,31 +1,18 @@
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
 
-import '@mdi/font/css/materialdesignicons.css'
-import 'vuetify/styles'
-import { createVuetify } from 'vuetify'
-import { md3 } from 'vuetify/blueprints'
-
 import { router } from './routes/router'
 
+import { vuetifyInstance } from "@/ui/vuetifyInstance";
+
 import App from './App.vue'
 
 import './assets/main.css'
 
-const vuetify = createVuetify({
-  theme: { defaultTheme: 'dark' },
-  blueprint: md3,
-  defaults: {
-    global: {
-      variant: 'outlined'
-    }
-  }
-})
-
 export const app = createApp(App)
 
 app.use(createPinia())
 app.use(router)
-app.use(vuetify)
+app.use(vuetifyInstance)
 
 app.mount('#app')
diff --git a/web-app-vue/src/pages/categorias-page.vue b/web-app-vue/src/pages/categorias-page.vue
@@ -1,9 +1,10 @@
 <script setup>
 
+import ListaCategorias from "@/components/categoria/lista-categorias.vue";
 </script>
 
 <template>
-<h1>Categorias</h1>
+<lista-categorias></lista-categorias>
 </template>
 
 <style scoped>

diff --git a/web-app-vue/src/ui/vuetifyInstance.js b/web-app-vue/src/ui/vuetifyInstance.js
@@ -0,0 +1,16 @@
+import { createVuetify } from "vuetify";
+import { md3 } from "vuetify/blueprints";
+
+import colors from 'vuetify/lib/util/colors'
+import '@mdi/font/css/materialdesignicons.css'
+import 'vuetify/styles'
+
+export const vuetifyInstance = createVuetify({
+  theme: { defaultTheme: 'dark' },
+  blueprint: md3,
+  defaults: {
+    global: {
+
+    }
+  }
+})