chore: movimientos info

Yizack · Oct 20, 2023 · b86a724 · b86a724
1 parent be29fea
commit b86a724
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 8 deletions.
diff --git a/components/CardMov.vue b/components/CardMov.vue
@@ -1,9 +1,9 @@
 <template>
   <div>
     <h4 class="text-center mt-1 py-2"><b>{{ t("saldos") }}</b></h4>
-    <p class="m-0">{{ t("mov_4_semanas") }}</p>
+    <p class="m-0">{{ t("mov_4_semanas") }}<span v-if="tarjeta.movimientos.length">. {{ t("mov_note") }}</span></p>
     <div class="table-responsive">
-      <table v-if="tarjeta.movimientos.length > 0" class="table table-hover shadow small">
+      <table v-if="tarjeta.movimientos.length" class="table table-hover shadow small">
         <thead class="table-primary">
           <tr class="small">
             <th scope="col">{{ t("tipo") }}</th>
@@ -14,7 +14,7 @@
           </tr>
         </thead>
         <tbody class="bg-body-tertiary">
-          <tr v-for="movimiento in tarjeta.movimientos" :key="movimiento.id" class="small" role="button">
+          <tr v-for="(movimiento, i) in tarjeta.movimientos" :key="movimiento.id" class="small" role="button" data-bs-toggle="modal" data-bs-target="#mov-dialog" @click="current = i">
             <td>{{ movimiento.movimiento }}</td>
             <td :title="movimiento.fecha" class="text-nowrap">{{ formatFecha(Number(movimiento.fecha)) }}</td>
             <td class="pe-0 text-end" :class="`text-${movimiento.color}`">{{ movimiento.sign }}</td>
@@ -25,6 +25,50 @@
       </table>
       <p v-else class="text-center my-4"><i>{{ t("mov_notfound") }}.</i></p>
     </div>
+    <!-- Movimiento Dialog -->
+    <div id="mov-dialog" class="modal fade" tabindex="-1" aria-labelledby="add-dialog-label" aria-hidden="true">
+      <div class="modal-dialog modal-dialog-centered">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h1 id="add-dialog-label" class="modal-title fs-5 text-primary-emphasis">
+              <strong>{{ t("movimiento") }}</strong>
+            </h1>
+            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" />
+          </div>
+          <div class="modal-body">
+            <div class="p-2">
+              <div class="row">
+                <div class="col-6">
+                  <p class="m-0"><b>{{ t("tipo") }}</b></p>
+                  <p>{{ tarjeta.movimientos[current]?.movimiento }}</p>
+                </div>
+                <div class="col-6">
+                  <p class=" m-0"><b>{{ t("fecha_mov") }}</b></p>
+                  <p>{{ formatFecha(Number(tarjeta.movimientos[current]?.fecha)) }}</p>
+                </div>
+                <div class="col-6">
+                  <p class="m-0"><b>{{ t("monto") }}</b></p>
+                  <p :class="`text-${tarjeta.movimientos[current]?.color}`">{{ tarjeta.movimientos[current]?.sign }}{{ tarjeta.movimientos[current]?.monto }}</p>
+                </div>
+                <div class="col-6">
+                  <p class="m-0"><b>{{ t("saldo") }}</b></p>
+                  <p>{{ tarjeta.movimientos[current]?.saldo }}</p>
+                </div>
+                <hr>
+                <div class="col-6">
+                  <p class="m-0"><b>{{ t("transaccion_n") }}</b></p>
+                  <p>{{ tarjeta.movimientos[current]?.transaccion }}</p>
+                </div>
+                <div class="col-6">
+                  <p class="m-0"><b>{{ t("lugar") }}</b></p>
+                  <p>{{ tarjeta.movimientos[current]?.lugar }}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -36,6 +80,11 @@ export default {
       type: Object,
       required: true
     }
+  },
+  data () {
+    return {
+      current: 0
+    };
   }
 };
 </script>
diff --git a/strings/en.js b/strings/en.js
@@ -166,5 +166,9 @@ export default {
   limit_message: "Your account has too many linked cards. Once you exceed 4 linked cards, their information will not be automatically retrieved upon login. You will need to click the update button for each one to fetch their details, balance, and transactions. This is a measure to prevent mass data overload on our server.",
   entendido: "Understood",
   downloading_update: "Downloading update...",
-  error_update: "Error downloading update"
+  error_update: "Error downloading update",
+  movimiento: "Transaction",
+  lugar: "Location",
+  mov_note: "Press a transaction for more information.",
+  transaccion_n: "Transaction #"
 };
diff --git a/strings/es.js b/strings/es.js
@@ -166,5 +166,9 @@ export default {
   limit_message: "Su cuenta posee demasiadas tarejetas vinculadas, al superar 4 tarjetas vinculadas, la información de estas no se obtendrá automáticamente al iniciar sesión, será necesario que pulses el botón de actualizar en cada una de ellas para visualizar su información, saldo y movimientos. Esto es una medida para evitar la sobrecarga en masa de datos en nuestro servidor.",
   entendido: "Entendido",
   downloading_update: "Descargando actualización...",
-  error_update: "Error al descargar la actualización"
+  error_update: "Error al descargar la actualización",
+  movimiento: "Movimiento",
+  lugar: "Lugar",
+  mov_note: "Presiona un movimiento para más información.",
+  transaccion_n: "N° Transacción"
 };
diff --git a/utils/database.js b/utils/database.js
@@ -16,7 +16,14 @@ const TABLE = {
       movimiento TEXT,
       fecha TEXT,
       monto TEXT,
-      saldo TEXT)`
+      saldo TEXT,
+      lugar TEXT,
+      transaccion TEXT)`
+};
+
+const ALTER = {
+  lugar: "ALTER TABLE movimientos ADD lugar TEXT",
+  transaccion: "ALTER TABLE movimientos ADD transaccion TEXT"
 };
 
 class Database {
@@ -52,6 +59,13 @@ class Database {
       { statement: TABLE.tarjetas, values: [] },
       { statement: TABLE.movimientos, values: [] }
     ]);
+
+    try {
+      await this.query("SELECT lugar, transaccion FROM movimientos limit 1");
+    }
+    catch (e) {
+      await this.execute([ALTER.lugar, ALTER.transaccion]);
+    }
   }
 
   // Tarjetas
@@ -174,8 +188,10 @@ class Database {
       const fecha = convertToTime(movimientos[size].fecha_hora);
       const monto = movimientos[size].monto;
       const saldo = movimientos[size].saldo_tarjeta;
-      const statement = "INSERT INTO movimientos VALUES (?, ?, ?, ?, ?)";
-      const values = [numero, movimiento, fecha, monto, saldo];
+      const lugar = movimientos[size].lugar;
+      const transaccion = movimientos[size].transaccion;
+      const statement = "INSERT INTO movimientos VALUES (?, ?, ?, ?, ?, ?, ?)";
+      const values = [numero, movimiento, fecha, monto, saldo, lugar, transaccion];
       statements.push({ statement, values });
     }
     return this.execute(statements);