se agrega en mantenedor de persona, subir foto

src/layouts/LayoutUser.svelte

@@ -3,48 +3,53 @@
 </svelte:head>
 
 <script>
-    import 'bootstrap/dist/css/bootstrap.min.css'
+import 'bootstrap/dist/css/bootstrap.min.css'
-    import '@adminkit/core/dist/css/app.css'
+import '@adminkit/core/dist/css/app.css'
-    import '@adminkit/core/dist/js/app.js'
+import '@adminkit/core/dist/js/app.js'
-    import 'bootstrap-icons/font/bootstrap-icons.css'
+import 'bootstrap-icons/font/bootstrap-icons.css'
-    import '../assets/colors.css'
+import '../assets/colors.css'
-    import '../assets/custom.css'
+import '../assets/custom.css'
-    import Navbar from './Navbar.svelte'
+import Navbar from './Navbar.svelte'
-    import Sidebar from './Sidebar.svelte'
+import Sidebar from './Sidebar.svelte'
-    import Footer from './Footer.svelte'
+import Footer from './Footer.svelte'
-    import Notifications from './Notifications.svelte'
+import Notifications from './Notifications.svelte'
-    import { getRoutes } from '$/routes/user.routes'
+import { getRoutes } from '$/routes/user.routes'
-    import { Router, Route, createHistory } from 'svelte-navigator'
+import { Router, Route, createHistory } from 'svelte-navigator'
-    import hashHistory from './hashHistory'
+import hashHistory from './hashHistory'
-    import { onMount } from 'svelte'
+import { onMount } from 'svelte'
-    import { getInfoToken } from '$/services/login'
+import { getInfoToken } from '$/services/login'
-    import { storeSession } from '$/stores/global'
+import { storeSession } from '$/stores/global'
-    import Toast from '$/components/Toast.svelte';
+import Toast from '$/components/Toast.svelte';
-    import ActualizandoGtfs from '$/components/ActualizandoGtfs.svelte';
+import ActualizandoGtfs from '$/components/ActualizandoGtfs.svelte';
+    import { getPhoto } from '$/services/personas';
 
 
-    let triggerEvent = false;
+let triggerEvent = false;
-    // @ts-ignore
+// @ts-ignore
-    const history = createHistory(hashHistory())
+const history = createHistory(hashHistory())
-    let routes = []
+let routes = []
-    let actualizando = true
+let actualizando = true
 
-    getRoutes()
+getRoutes()
-        .then(data => routes = data)
+    .then(data => routes = data)
-        .catch(error => alert(error))
+    .catch(error => alert(error))
 
-    onMount(() => {
+onMount(() => {
-        triggerEvent && document.dispatchEvent(new Event('DOMContentLoaded'));
+    triggerEvent && document.dispatchEvent(new Event('DOMContentLoaded'));
-    })
+})
 
-    async function begin() {
+async function begin() {
-        try {
+    try {
-            $storeSession = await getInfoToken()
+        const data = await getInfoToken()
-        } catch (error) {
+        const avatar_img = await getPhoto(data.persona.rut)
-            alert(error.message || error)
+        $storeSession = { ...data, avatar_img }
-        }
+    } catch (error) {
+        alert(error.message || error)
+        sessionStorage.clear();
+        document.location.href = '/';
     }
-    begin()
+}
+begin()
 </script>
 
 <div class="wrapper">

src/pages/personas/Form.svelte

@@ -1,29 +1,42 @@
 <script>
-    import { getTiposPersona } from "$/services/tipos_persona";
+    import { getPhoto } from "$/services/personas";
+import { getTiposPersona } from "$/services/tipos_persona";
 
-    export let form = {}
+export let form = {}
-    export let es_nuevo = true
+export let es_nuevo = true
 
-    let tipos_tratamiento = [];
+let inputFile = null;
-    let rut = '';
+let tipos_tratamiento = [];
+let rut = '';
+let urlPhoto = null
 
-    $: begin(es_nuevo)
+$: begin(es_nuevo)
-    $: !es_nuevo && (rut = `${form.rut || ''}-${form.dv || ''}`);
+$: !es_nuevo && (rut = `${form.rut || ''}-${form.dv || ''}`);
+$: cargarPhoto(form.rut)
 
-    async function begin(es_nuevo) {
+async function begin(es_nuevo) {
-        try {
+    try {
-            tipos_tratamiento = await getTiposPersona()
+        tipos_tratamiento = await getTiposPersona()
-        } catch (error) {
+    } catch (error) {
-            globalThis.toast.success(error.detail || error)
+        globalThis.toast.success(error.detail || error)
-        }
     }
+}
 
-    function onChangeRut({ target: { value } }) {
+async function cargarPhoto(rut) {
-        const valorRut = value.replace(/[.|-]/,'');
+    try {
-        const dv = valorRut.substring(valorRut.length -1)
+        if (!rut) return;
-        const rut = valorRut.substring(0, valorRut.length -1)
+        urlPhoto = await getPhoto(rut)
-        form = { ...form, rut, dv }
+    } catch (error) {
+        globalThis.toast.success(error.detail || error)
     }
+}
+
+function onChangeRut({ target: { value } }) {
+    const valorRut = value.replace(/[.|-]/,'');
+    const dv = valorRut.substring(valorRut.length -1)
+    const rut = valorRut.substring(0, valorRut.length -1)
+    form = { ...form, rut, dv }
+}
 </script>
 
 <div class="row">
@@ -83,4 +96,19 @@
         Dirección
         <input type="text" bind:value={form.direccion} class="form-control">
     </div>
+</div>
+
+
+<div class="row">
+    <div class="col-md-2">
+        {#if form.rut}
+            <img src={urlPhoto} class="img-fluid" alt="imagen de persona">
+        {/if}
+    </div>
+    <div class="col-md mb-3">
+        Fotografia
+        <div class="form-control">
+            <input type="file" bind:this={inputFile} accept=".jpg, .jpeg, .png" on:change={() => form.photo = inputFile}>
+        </div>
+    </div>
 </div>

src/pages/personas/Persona.svelte

@@ -16,7 +16,7 @@
     const params = useParams()
     const navigate = useNavigate()
     let es_nuevo = true;
-    let form = {}
+    let form = { photo: null }
     let loading = false;
     let escritura = false
 

src/services/gtfs_archivo.js

@@ -23,8 +23,6 @@ export async function getGtfsArchivoId(id) {
 
 export async function createGtfsArchivo(data) {
     const form = new FormData()
-    const directorioUpload = '/uploads'
-    form.append('ruta_archivo', directorioUpload)
     form.append('status', 'PENDIENTE')
     for (let key in data) {
         if (key === 'archivo') {

src/services/personas.js

@@ -19,21 +19,50 @@ export async function getPersona(rut) {
 }
 
 export async function createPersona(data) {
+    const form = new FormData()
+    for (const key in data) {
+        if (data[key]?.files?.length) {
+            form.append(key, data[key].files[0], data[key].files[0].name)
+        } else {
+            form.append(key, data[key] || '')
+        }
+    }
+
     const res = await fetch(`${base}/personas/`, {
         method: 'POST',
-        body: JSON.stringify(data),
+        body: form,
-        headers: { "Authorization": `Bearer ${getToken()}`, "Content-Type": "application/json" }
+        headers: { "Authorization": `Bearer ${getToken()}` }
     })
     if (!res.ok) throw await res.text()
     return res.json()
 }
 
 export async function updatePersona({ rut: id = null,  ...data }) {
+    console.log({ data })
+    const form = new FormData()
+    for (const key in data) {
+        if (data[key]?.files?.length) {
+            form.append(key, data[key].files[0], data[key].files[0].name)
+        } else {
+            form.append(key, data[key] || '')
+        }
+    }
+
     const res = await fetch(`${base}/personas/${id}/`, {
         method: 'PATCH',
-        body: JSON.stringify(data),
+        body: form,
-        headers: { "Authorization": `Bearer ${getToken()}`, "Content-Type": "application/json" }
+        headers: { "Authorization": `Bearer ${getToken()}` }
     })
     if (!res.ok) throw await res.text()
     return res.json()
+}
+
+export async function getPhoto(id) {
+    const res = await fetch(`${base}/personas/photo/?id=${id}`, {
+        headers: { "Authorization": `Bearer ${getToken()}` }
+    })
+    if (!res.ok) throw await res.text()
+
+    const blob = await res.blob()
+    return URL.createObjectURL(blob);
 }