más avances

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

Front/src/Componentes/ModalEstatico.svelte

@@ -1,13 +1,18 @@
 <script lang="ts">
-  import { Button, Modal } from '@sveltestrap/sveltestrap';
+  import { Modal } from '@sveltestrap/sveltestrap';
 
-  let {payload} = $props();
-  let open = $state(true);
   const toggle = () => (open = !open);
+  let {payload, close = toggle, iscomponent = false } = $props();
+  let open = $state(true);
+
 </script>
 
 <div>
-  <Modal body isOpen={open} {toggle}>
+  <Modal body isOpen={open} toggle={close}>
+    {#if iscomponent == false}
     {payload}
+    {:else}
+    {@render payload()}
+    {/if}
   </Modal>
-</div>
+</div>

Front/src/Componentes/RowPropiedad.svelte

@@ -1,10 +1,18 @@
 <script lang="ts">
+    import { fade } from "svelte/transition";
   import type {PropiedadDto} from "../types"
     import ModalEstatico from "./ModalEstatico.svelte";
-  let { id, ubicacion, tipo, letra, piso }: PropiedadDto = $props();
+    import ModificarPropiedadForm from "./modificarPropiedadForm.svelte";
+  let { id, ubicacion, tipo, letra, piso,canthabitaciones }: PropiedadDto = $props();
 
-  let modal: boolean = $state(false)
+  let modal: boolean = $state(false);
-  let modalpayload: string = $state("")
+  let modalpayload: string = $state("");
+  
+  let modificar: boolean = $state(false);
+  
+  function setmod(){
+    modificar = !modificar;
+  }
   
   async function BajaPropiedad(){
     modal = false;
@@ -15,7 +23,7 @@
           'Auth' : String(sessionStorage.getItem("token")),
           'Email' : String(localStorage.getItem("email"))
         }, 
-      });
+        });
       
       if (responce.ok){
         const json = await responce.json();
@@ -34,17 +42,20 @@
   }
 </script>
 
-<tr>
+<tr in:fade>
   <td>{id}</td>
   <td>{ubicacion}</td>
+  <td>{canthabitaciones}</td>
   <td>{letra}</td>
   <td>{piso}</td>  	
  	<td>{tipo}</td>
   <td class="text-end">
-    <button class="btn btn-outline-secondary">Modificar</button>
+    <button class="btn btn-outline-secondary" onclick={() => setmod()}>Modificar</button>
     <button class="btn btn-outline-danger" onclick={()=> BajaPropiedad()}>Baja</button>
   </td>
 </tr>
 {#if modal}
 	<ModalEstatico payload={modalpayload}/>
 {/if}
+{#if modificar}
+{/if}

Front/src/Componentes/modificarPropiedadForm.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+  import type { PropiedadDto } from "../types";
+  
+  let propi: PropiedadDto = $props();
+  
+  function submitForm(e: Event) {
+    e.preventDefault();
+
+    
+  }
+</script>
+
+<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}
+        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={propi.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={propi.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={propi.letra}
+                    maxlength="1"
+            placeholder="Letra"
+        />
+                <label for="letra">Letra</label>
+    </div>
+    <div class="form-floating mb-3">
+          <select
+            id="idtipropiedad"
+            class="form-select"
+            bind:value={propi.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="idtipropiedad">Tipo de Propiedad</label>
+    </div>
+            <button type="submit" class="btn btn-primary">Enviar</button>
+</form>

Front/src/paginas/MisPropiedades.svelte

@@ -44,6 +44,7 @@ onMount(async ()=> {
       <tr>
         <th>#</th>
         <th>ubicacion</th>
+        <th>Habitaciones</th>
         <th>Letra</th>
         <th>Piso</th>
         <th>Tipo</th>
@@ -51,7 +52,8 @@ onMount(async ()=> {
     </thead>
     <tbody>
     {#each $propiedades as propiedad}
-    	<RowPropiedad id={propiedad.id} ubicacion={propiedad.ubicacion} letra={propiedad.letra} piso={propiedad.piso} tipo={propiedad.tipo}/>
+    	<RowPropiedad id={propiedad.id} ubicacion={propiedad.ubicacion} letra={propiedad.letra} piso={propiedad.piso} tipo={propiedad.tipo} canthabitaciones={propiedad.canthabitaciones}/>
+    	
     {/each}
     </tbody>
   </table>

Front/src/paginas/PublicarPropiedad.svelte

@@ -3,15 +3,7 @@
     import ModalEstatico from "../Componentes/ModalEstatico.svelte";
     import NavBarAutocompletable from "../Componentes/NavBarAutocompletable.svelte";
     import BarraHorizontalConTexto from "../Componentes/BarraHorizontalConTexto.svelte";
-
+    import type { Propiedad } from "../types";
-    type Propiedad = {
-        ubicacion: string,
-        canthabitaciones: number,
-        piso: number,
-        letra: string,
-        email: string,
-        idtipropiedad: number,
-    };
 
     let propiedad: Propiedad = {
         ubicacion: "",
@@ -28,6 +20,7 @@
 
     const submitForm = async (e: Event) => {
         e.preventDefault();
+        mostrarModal = false;
         try {
             const response = await fetch("http://localhost:5007/api/propiedad", {
                 method: 'POST',

Front/src/types.d.ts

@@ -4,6 +4,7 @@ export type PropiedadDto = {
     tipo: string,
     piso: string | null,
     letra: string | null,
+    canthabitaciones: number,
 }
 export type Permiso = {
     id: number;
@@ -15,3 +16,12 @@ export type Grupo = {
     nombre: string;
     idpermisos: Permiso[];
   };
+
+export type Propiedad = {
+    ubicacion: string,
+    canthabitaciones: number,
+    piso: number,
+    letra: string,
+    email: string,
+    idtipropiedad: number,
+};