feat: ahora se pueden ver las propiedades dadas de baja y añadido el tema de los servicios

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

Front/src/Componentes/ListaAcciones.svelte

@@ -39,10 +39,10 @@
     }
 </script>
 
-<div class="list-group">
+<div class="list-group" style="border: 1px solid black">
     {#each $permisos as item}
         <a href="/accion/{item.id}" class="list-group-item list-group-item-action">
             {item.descripcion}
         </a>      
     {/each}
-</div>
+</div>

Front/src/Componentes/RowPropiedad.svelte

@@ -1,10 +1,9 @@
 <script lang="ts">
-  import { fade, fly, scale } from "svelte/transition";
-  import type {PropiedadDto} from "../types"
+  import { fade } from "svelte/transition";
   import ModalEstatico from "./ModalEstatico.svelte";
   import ModificarPropiedadForm from "./modificarPropiedadForm.svelte";
 
-  let { id, ubicacion, tipo, letra, piso,canthabitaciones }: PropiedadDto = $props();
+  let { id, ubicacion, tipo, letra, piso,canthabitaciones, servicios }  = $props();
 
   let modal: boolean = $state(false);
   let modalpayload: string = $state("");
@@ -26,17 +25,10 @@
         }, 
         });
       
-      if (responce.ok){
         const json = await responce.json();
         modalpayload = json.message;
         modal = true;
-      }
-      
-      if (!responce.ok) {
-        const json = await responce.json();
-        modalpayload = json.message;
-        modal = true;
-      }
+        location.reload();      
     }catch (e){
       console.error(e);
     }
@@ -50,9 +42,11 @@
   <td>{letra}</td>
   <td>{piso}</td>  	
  	<td>{tipo}</td>
+  <td>{servicios}</td>
   <td class="text-end">
-    <button class="btn btn-outline-secondary" onclick={() => setmod()}>Modificar</button>
-    <button class="btn btn-outline-danger" onclick={()=> BajaPropiedad()}>Baja</button>
+    <button class="btn btn-outline-secondary" onclick={()=> setmod()}>Modificar</button>
+    <button class="btn btn-outline-secondary" >Ver Más</button>
+    <button class="btn btn-outline-danger" onclick={() => BajaPropiedad()}>Baja</button>
   </td>
 </tr>
 {#if modal}
@@ -60,8 +54,8 @@
 {/if}
 {#if modificar}
   <tr transition:fade={{duration:100}}> 
-    <td colspan="7">
-      <ModificarPropiedadForm {id} {ubicacion} {canthabitaciones} {letra} {piso} {tipo} />
+    <td colspan="8">
+      <ModificarPropiedadForm {id} {ubicacion} {canthabitaciones} {letra} {piso} {tipo} {servicios}/>
     </td>
   </tr>
 {/if}

Front/src/Componentes/modificarPropiedadForm.svelte

@@ -1,130 +1,161 @@
 <script lang="ts">
-  import type { PropiedadDto } from "../types";
-  import {urlG} from "../stores/urlStore";
+  import { urlG } from "../stores/urlStore";
   import { onMount } from "svelte";
-  
-  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 { canthabitaciones, id, letra, piso, tipo, ubicacion, servicios } = $props();
+  let serviciosSeleccionados: string[] = $state([]);
+  const serviciosDisponibles = ["Gas", "Internet", "Telefono", "Luz"];
+
+  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;
+    }
+    serviciosSeleccionados = servicios.split(", ");
   });
 
   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");
+    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,
+          servicios: serviciosSeleccionados,
+        }),
+      });
+      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 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">
+  <div class="form-floating mb-3">
+    <input
+      type="text"
+      id="ubicacion"
+      class="form-control"
+      bind:value={ubicacion}
+      placeholder="Ubicación"
+      required
+    />
+    <label for="ubicacion">Ubicación</label>
+  </div>
+  <div class="form-floating mb-3">
+    <input
+      type="number"
+      id="canthabitaciones"
+      class="form-control"
+      bind:value={canthabitaciones}
+      min="1"
+      placeholder="Cantidad de Habitaciones"
+      required
+    />
+    <label for="canthabitaciones">Cantidad de Habitaciones</label>
+  </div>
+  <div class="form-floating mb-3">
+    <input
+      type="number"
+      id="piso"
+      class="form-control"
+      bind:value={piso}
+      min="0"
+      placeholder="Piso"
+    />
+    <label for="piso">Piso</label>
+  </div>
+  <div class="form-floating mb-3">
+    <input
+      type="text"
+      id="letra"
+      class="form-control"
+      bind:value={letra}
+      maxlength="1"
+      placeholder="Letra"
+    />
+    <label for="letra">Letra</label>
+  </div>
+  <div class="form-floating mb-3">
+    <select id="idtipo" class="form-select" bind:value={tipo} required>
+      <option value="1">Casa</option>
+      <option value="2">Piso</option>
+      <option value="3">Departamento</option>
+      <option value="4">Galpon</option>
+      <option value="5">LocalComercial</option>
+      <option value="6">Oficina</option>
+    </select>
+    <label for="idtipopropiedad">Tipo de propiedad</label>
+  </div>
+
+  <div class="mb-3">
+    <h6 class="form-floating form-label">Servicios</h6>
+    {#each serviciosDisponibles as servicio}
+    <div class="form-check">
       <input
-        type="text"
-        id="ubicacion"
-        class="form-control"
-        bind:value={ubicacion}
-        placeholder="Ubicación"
-        required
-        />
-        <label for="ubicacion">Ubicación</label>
+        type="checkbox"
+        class="form-check-input"
+        bind:group={serviciosSeleccionados}
+        value={servicio}
+        id={`servicio-${servicio}`}
+      />
+      <label class="form-check-label" for={`servicio-${servicio}`}>
+        {servicio}
+      </label>
     </div>
-    <div class="form-floating mb-3">
-        <input
-            type="number"
-            id="canthabitaciones"
-            class="form-control"
-            bind:value={canthabitaciones}
-            min="1"
-            placeholder="Cantidad de Habitaciones"
-            required
-        />
-        <label for="canthabitaciones">Cantidad de Habitaciones</label>
-    </div>
-    <div class="form-floating mb-3">
-        <input
-            type="number"
-            id="piso"
-            class="form-control"
-                    bind:value={piso}
-            min="0"
-            placeholder="Piso"
-                />
-        <label for="piso">Piso</label>
-    </div>
-            <div class="form-floating mb-3">
-        <input
-            type="text"
-                    id="letra"
-            class="form-control"
-            bind:value={letra}
-                    maxlength="1"
-            placeholder="Letra"
-        />
-                <label for="letra">Letra</label>
-    </div>
-    <div class="form-floating mb-3">
-          <select
-            id="idtipo"
-            class="form-select"
-            bind:value={tipo}
-            required
-            >
-            <option value="1">Casa</option>
-            <option value="2">Piso</option>
-            <option value="3">Departamento</option>
-            <option value="4">Galpon</option>
-            <option value="5">LocalComercial</option>
-            <option value="6">Oficina</option>
-          </select>
-        <label for="idtipopropiedad">Tipo de propiedad</label>
-    </div>
-            <button type="submit" class="btn btn-primary">Enviar</button>
+    {/each}
+  </div>
+
+  <button type="submit" class="btn btn-primary">Enviar</button>
 </form>