feat: modificar propiedad

Signed-off-by: fede <federico.nicolas.polidoro@gmail.com>

Front/src/Componentes/RowPropiedad.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
-    import { fade } from "svelte/transition";
+  import { fade, fly, scale } from "svelte/transition";
   import type {PropiedadDto} from "../types"
-    import ModalEstatico from "./ModalEstatico.svelte";
-    import ModificarPropiedadForm from "./modificarPropiedadForm.svelte";
+  import ModalEstatico from "./ModalEstatico.svelte";
+  import ModificarPropiedadForm from "./modificarPropiedadForm.svelte";
+
   let { id, ubicacion, tipo, letra, piso,canthabitaciones }: PropiedadDto = $props();
 
   let modal: boolean = $state(false);
@@ -58,4 +59,9 @@
 	<ModalEstatico payload={modalpayload}/>
 {/if}
 {#if modificar}
+  <tr transition:fade={{duration:100}}> 
+    <td colspan="7">
+      <ModificarPropiedadForm {id} {ubicacion} {canthabitaciones} {letra} {piso} {tipo} />
+    </td>
+  </tr>
 {/if}

Front/src/Componentes/css/popup.css

@@ -32,7 +32,17 @@
     display: block;  
 }
 
+.popup.show {
+    animation: rollDown 0.5s ease forwards;  
+    display: block;  
+}
+
 .dropdown-menu.hide {
   animation: rollUp 0.5s ease forwards;  
   display: block;
-}
+}
+
+.popup.hide {  
+  animation: rollUp 0.5s ease forwards;  
+  display: block;
+}

Front/src/Componentes/modificarPropiedadForm.svelte

@@ -1,23 +1,76 @@
 <script lang="ts">
-  import { onMount } from "svelte";
   import type { PropiedadDto } from "../types";
+  import {urlG} from "../stores/urlStore";
+  import { onMount } from "svelte";
   
-  let propi: PropiedadDto = $props();
-  
-  function submitForm(e: Event) {
-    e.preventDefault();
+  let {canthabitaciones, id, letra, piso, tipo, ubicacion}: PropiedadDto = $props();
 
+  onMount(()=> {
+   switch(tipo) {
+     case"Casa":
+       tipo = "1"
+       break;
+     case"Piso":
+       tipo = "2"
+       break;
+     case"Departamento":
+       tipo = "3"
+       break;
+     case"Galpon":
+       tipo = "4"
+       break;
+     case"LocalComercial":
+       tipo = "5"
+       break;
+     case"Oficina":
+       tipo = "6"
+       break;
+   }
+  });
+
+  let showAlert: boolean = $state(false);
+  let errorMessage: string = $state("");
+  const token = sessionStorage.getItem("token");
+  const email = localStorage.getItem("email");
     
+  async function submitForm(e: Event) {
+    e.preventDefault();
+      try {
+          let response = await fetch(String($urlG + "/api/propiedad"), {
+              method: 'PATCH',
+              headers: {
+                  'Auth' : String(token),
+                  'Content-Type' : 'application/json',
+              },
+            body: JSON.stringify({id, canthabitaciones, letra, piso, tipo, ubicacion, email}), 
+          });
+          if (response.ok){
+            location.reload();
+          }
+          if (!response.ok) {
+              const errorData = await response.json();
+              errorMessage = errorData.message;
+              showAlert = true;
+          }
+      } catch (e) {
+        throw new Error("Fallo al enviar el formulario para crear un inquilino");
+      }
   }
 </script>
 
+{#if showAlert}
+<div class='alert alert-warning alert-dismissible fade show' role='alert'>
+    <strong>{errorMessage}</strong> 
+    <button type="button" class="btn-close close" aria-label="Close" data-bs-dismiss="alert"></button>
+</div>
+{/if}
 <form onsubmit={submitForm} class="card card-body">
     <div class="form-floating mb-3">
       <input
         type="text"
         id="ubicacion"
         class="form-control"
-        bind:value={propi.ubicacion}
+        bind:value={ubicacion}
         placeholder="Ubicación"
         required
         />
@@ -28,7 +81,7 @@
             type="number"
             id="canthabitaciones"
             class="form-control"
-            bind:value={propi.canthabitaciones}
+            bind:value={canthabitaciones}
             min="1"
             placeholder="Cantidad de Habitaciones"
             required
@@ -40,7 +93,7 @@
             type="number"
             id="piso"
             class="form-control"
-                    bind:value={propi.piso}
+                    bind:value={piso}
             min="0"
             placeholder="Piso"
                 />
@@ -51,7 +104,7 @@
             type="text"
                     id="letra"
             class="form-control"
-            bind:value={propi.letra}
+            bind:value={letra}
                     maxlength="1"
             placeholder="Letra"
         />
@@ -59,9 +112,9 @@
     </div>
     <div class="form-floating mb-3">
           <select
-            id="idtipropiedad"
+            id="idtipo"
             class="form-select"
-            bind:value={propi.tipo}
+            bind:value={tipo}
             required
             >
             <option value="1">Casa</option>
@@ -71,7 +124,7 @@
             <option value="5">LocalComercial</option>
             <option value="6">Oficina</option>
           </select>
-        <label for="idtipropiedad">Tipo de Propiedad</label>
+        <label for="idtipopropiedad">Tipo de propiedad</label>
     </div>
             <button type="submit" class="btn btn-primary">Enviar</button>
 </form>

Front/src/paginas/MisPropiedades.svelte

@@ -1,39 +1,39 @@
 <script lang="ts">
-    import { onMount } from "svelte";
-import NavBarAutocompletable from "../Componentes/NavBarAutocompletable.svelte"  ;
+  import { onMount } from "svelte";
+  import NavBarAutocompletable from "../Componentes/NavBarAutocompletable.svelte"  ;
   import { writable } from 'svelte/store';
-import RowPropiedad from "../Componentes/RowPropiedad.svelte";
-    import type { PropiedadDto } from "../types";
+  import RowPropiedad from "../Componentes/RowPropiedad.svelte";
+  import type { PropiedadDto } from "../types";
 
-let propiedades = writable<PropiedadDto[]>([]);
-let email = localStorage.getItem("email");
-let token = sessionStorage.getItem("token");
+  let propiedades = writable<PropiedadDto[]>([]);
+  let email = localStorage.getItem("email");
+  let token = sessionStorage.getItem("token");
 
-let fallo: boolean = $state(false);
+  let fallo: boolean = $state(false);
 
-onMount(async ()=> {
-  try {
-    const responce = await fetch("http://localhost:5007/api/propiedades/Propietario", {
-      method: "GET",
-      headers: {
-        'Auth': String(token),
-        'Email' : String(email),
-        'Content-Type' : "application/json"
-      },
-    });
-    if (responce.ok){
-      const json = await responce.json();
-      propiedades.set(json);
-      return;
-    }
+  onMount(async ()=> {
+    try {
+      const responce = await fetch("http://localhost:5007/api/propiedades/Propietario", {
+        method: "GET",
+        headers: {
+          'Auth': String(token),
+          'Email' : String(email),
+          'Content-Type' : "application/json"
+        },
+      });
+      if (responce.ok){
+        const json = await responce.json();
+        propiedades.set(json);
+        return;
+      }
     
-    if (!responce.ok){
-      fallo = true;
-    } 
-  } catch (e){
-    console.error(e);
-  }
-});
+      if (!responce.ok){
+        fallo = true;
+      } 
+    } catch (e){
+      console.error(e);
+    }
+  });
 
 </script>
 
@@ -52,7 +52,7 @@ onMount(async ()=> {
     </thead>
     <tbody>
     {#each $propiedades as propiedad}
-    	<RowPropiedad id={propiedad.id} ubicacion={propiedad.ubicacion} letra={propiedad.letra} piso={propiedad.piso} tipo={propiedad.tipo} canthabitaciones={propiedad.canthabitaciones}/>
+    	<RowPropiedad id={propiedad.id} ubicacion={propiedad.ubicacion} letra={propiedad.letra} piso={propiedad.piso} tipo={propiedad.tipo} canthabitaciones={propiedad.canthabitaciones} />
     	
     {/each}
     </tbody>

Front/src/stores/urlStore.js

@@ -0,0 +1,3 @@
+import { readable } from 'svelte/store';
+
+export const urlG = readable('http://localhost:5007');