se agrega lectura de permiso al acceder a la pantalla

src/pages/aplicaciones/Admin.svelte

@@ -3,7 +3,8 @@
     import { getAplicaciones } from "$/services/aplicaciones";
     import PageTitle from "$/components/PageTitle.svelte";
     import ModalAplicacion from "./ModalAplicacion.svelte";
-    import { getPermisoPath } from "$/stores/global";
+    import { useLocation } from "svelte-navigator";
+    import { getPermisosPath } from "$/services/usuarios";
 
     const limit = 15;
     let page = 1;
@@ -13,7 +14,12 @@
     let aplicaciones = []
     let aplicacion = null
     let loading = false;
-    let permiso_app = getPermisoPath()
+    let escritura = false;
+    let location = useLocation()
+
+    getPermisosPath($location.pathname)
+        .then(data => escritura = data.escritura)
+        .catch(error => console.log({ error }))
 
     $: onPage(page)
 
@@ -49,7 +55,7 @@
 
 <div class="card">
     <div class="card-header">
-        {#if permiso_app.escritura}
+        {#if escritura}
             <button class="btn btn-primary" on:click|preventDefault={onNuevo}>
                 <i class="bi bi-plus-lg"></i> Nuevo
             </button>
@@ -113,6 +119,7 @@
 {#if aplicacion}
     <ModalAplicacion
         {aplicacion}
+        {escritura}
         on:close={() => aplicacion = null}
         on:refresh={() => onPage(page)}
     />

src/pages/aplicaciones/ModalAplicacion.svelte

@@ -2,13 +2,12 @@
     import Modal from "../../components/Modal.svelte";
     import { getAplicacion, createAplicacion, updateAplicacion, deleteAplicacion } from "$/services/aplicaciones";
     import { createEventDispatcher } from "svelte";
-    import { getPermisoPath } from "$/stores/global";
     const dispatch = createEventDispatcher();
 
-    export let aplicacion = {}
+    export let aplicacion = {};
+    export let escritura = false;
     let form = {}
     let loading = false;
-    let permiso_app = getPermisoPath()
 
     $: begin(aplicacion.id_aplicacion)
 
@@ -63,7 +62,7 @@
     <Modal title={'Aplicacion #' + (aplicacion.id_aplicacion || 'Nuevo')}
         size="lg"
         on:close={() => dispatch('close')}>
-        <div class={"form" + (permiso_app.escritura ? '' : ' disabled')}>
+        <div class={"form" + (escritura ? '' : ' disabled')}>
             <div class="row mb-3">
                 <div class="col-md-3">ID</div>
                 <div class="col-md">
@@ -94,7 +93,7 @@
             </div>
         </div>
         <svelte:fragment slot="buttons">
-            {#if permiso_app.escritura}
+            {#if escritura}
                 <button class="btn btn-primary"type="submit" disabled={loading}>Guardar</button>
                 <button class="btn btn-danger" on:click|preventDefault={onDelete} disabled={loading}>Eliminar</button>
             {/if}

src/pages/comunas/Admin.svelte

@@ -1,11 +1,11 @@
 <script>
-    import { Link } from 'svelte-navigator'
+    import { Link, useLocation } from 'svelte-navigator'
     import Paginate from '$/components/Paginate.svelte'
     import PageTitle from '$/components/PageTitle.svelte'
     import { getComunas, getComuna, createComuna, updateComuna, deleteComuna } from '$/services/comunas'
     import Modal from '$/components/Modal.svelte';
     import FormComuna from './Form.svelte';
-    import { getPermisoPath } from '$/stores/global';
+    import { getPermisosPath } from '$/services/usuarios';
 
     let comuna = null
     let es_nuevo = true
@@ -13,7 +13,12 @@
     let page = 1
     let loading = false;
     const limit = 15
-    let permiso_app = getPermisoPath()
+    let escritura = false;
+    let location = useLocation()
+
+    getPermisosPath($location.pathname)
+        .then(data => escritura = data.escritura)
+        .catch(error => console.log({ error }))
     
     $: onPage(page)
 
@@ -79,7 +84,7 @@
 <div class="card">
     <div class="card-header">
         <div class="mb-3 d-flex">
-            {#if permiso_app.escritura}
+            {#if escritura}
                 <button class="btn btn-primary me-3"
                     on:click|preventDefault={onNuevo}>
                     <i class="bi bi-plus-lg"></i> Nuevo
@@ -131,15 +136,15 @@
         <Modal title="Comuna"
             on:close={() => comuna = null}
         >
-        <div class={permiso_app.escritura ? "" : "disabled"}>
+            <div class={escritura ? "" : "disabled"}>
                 <FormComuna bind:form={comuna} {es_nuevo} />
             </div>
 
             <svelte:fragment slot="buttons">
-            {#if permiso_app.escritura}
+                {#if escritura}
                     <button type="submit" class="btn btn-primary">Guardar</button>
                 {/if}
-            {#if !es_nuevo && permiso_app.escritura}
+                {#if !es_nuevo && escritura}
                     <button class="btn btn-danger" on:click|preventDefault={onDelete}>Eliminar</button>
                 {/if}
             </svelte:fragment>

src/pages/mapas/FormParadero.svelte

@@ -7,14 +7,13 @@
         createParaderoImagen,
         deleteParaderoImagen,
     } from "$/services/paraderos";
-    import { getPermisoPath } from "$/stores/global";
     import IconLoading from "../../components/IconLoading.svelte";
 
     export let parada = null;
+    export let escritura = false;
     let form = {};
     let imagenes = [];
     let loading = false;
-    let permiso_app = getPermisoPath();
 
     $: init(!!parada);
 
@@ -81,7 +80,7 @@
     </div>
 
     Propiedades:
-    <form on:submit|preventDefault={onSave} class={permiso_app.escritura ? '' : 'disabled'}>
+    <form on:submit|preventDefault={onSave} class={escritura ? '' : 'disabled'}>
         <div class="input-group mb-3">
             <div class="input-group-text">Identificador</div>
             <input
@@ -108,7 +107,7 @@
             />
         </div>
         <hr />
-        {#if permiso_app.escritura}
+        {#if escritura}
             <div class="text-center">
                 <button type="submit" class="btn btn-primary"
                     ><i class="bi bi-save" /> Guardar</button
@@ -133,7 +132,7 @@
     {/each}
 
     <!-- agregar imagen -->
-    {#if permiso_app.escritura}
+    {#if escritura}
         <form action="" on:submit|preventDefault={onSaveImagen}>
             <div class="card">
                 <div class="card-body">

src/pages/mapas/FormParaderoDispositivos.svelte

@@ -5,15 +5,14 @@
     import { getTiposDispositivo } from "../../services/tipos_dispositivo";
     import { url_base } from "../../services/_config";
     import { getInfoPublic } from '../../services/paraderos';
-    import { getPermisoPath } from '$/stores/global';
 
     export let parada = null;
+    export let escritura = false;
     let loading = false;
     let tipos_dispositivos = [];
     let dispositivos = [];
     let url_qrcode = null;
     let nuevoDispositivo = null;
-    let permiso_app = getPermisoPath()
 
     async function fetchDispositivos({ id_paradero = null }) {
         try {
@@ -94,7 +93,7 @@
                     <td>{disp.id_dispositivo}</td>
                     <td>{disp.tipo_dispositivo?.descripcion || '--'}</td>
                     <td>
-                        {#if permiso_app.escritura}
+                        {#if escritura}
                             <a href={"#"} on:click|preventDefault={() => onDelete(disp)}><i class="bi bi-trash text-danger"></i></a>
                         {/if}
                     </td>
@@ -103,7 +102,7 @@
             </tbody>
         </table>
 
-        {#if permiso_app.escritura}
+        {#if escritura}
             <div class="my-3 text-center">
                 <button class="btn btn-outline-primary" on:click|preventDefault={() => nuevoDispositivo = {}}>Nuevo Dispositivo</button>
             </div>

src/pages/mapas/OffcanvasParadero.svelte

@@ -6,10 +6,18 @@
     import FormParadero from "./FormParadero.svelte";
     import FormParaderoDispositivos from "./FormParaderoDispositivos.svelte";
     import FormParaderoServicios from "./FormParaderoServicios.svelte";
+    import { useLocation } from "svelte-navigator";
+    import { getPermisosPath } from "$/services/usuarios";
     const dispatch = createEventDispatcher();
     export let parada = null;
     let canvas = null;
     let tab = 0;
+    let escritura = false;
+    let location = useLocation()
+
+    getPermisosPath($location.pathname)
+        .then(data => escritura = data.escritura)
+        .catch(error => console.log({ error }))
 
     $: init(!!parada);
 
@@ -76,10 +84,10 @@
     </div>
     <div class="offcanvas-body bg-white py-3">
         {#if tab === 0}
-            <FormParadero {parada} />
+            <FormParadero {parada} {escritura} />
         {/if}
         {#if tab === 1}
-            <FormParaderoDispositivos {parada} />
+            <FormParaderoDispositivos {parada} {escritura} />
         {/if}
         {#if tab === 2}
             <FormParaderoServicios {parada} />

src/pages/personas/Admin.svelte

@@ -1,14 +1,22 @@
 <script>
-    import { Link } from 'svelte-navigator'
+    import { Link, useLocation } from 'svelte-navigator'
     import Paginate from '$/components/Paginate.svelte'
     import { getPersonas } from '$/services/personas';
     import PageTitle from '$/components/PageTitle.svelte';
-    import { getPermisoPath } from '$/stores/global';
+    import { getPermisosPath } from '$/services/usuarios';
+    import { storePermisoApp } from '$/stores/global';
+
     let page = 1;
     let limit = 15;
     let personas = { results: [], count: 0 };
     let loading = false;
-    let permiso_app = getPermisoPath()
+    let escritura = false;
+    let location = useLocation()
+
+    getPermisosPath($location.pathname)
+        .then(data => escritura = data.escritura)
+        .then(() => storePermisoApp.set({ ...$storePermisoApp, personas: { escritura } }))
+        .catch(error => console.log({ error }))
 
     $: onPage(page)
 
@@ -29,7 +37,7 @@
 
 <div class="card">
     <div class="card-header">
-        {#if permiso_app.escritura}
+        {#if escritura}
             <Link to='/personas/nuevo' class="btn btn-primary">
                 <i class="bi bi-plus-lg"></i> Nuevo
             </Link>
@@ -61,7 +69,7 @@
     </div>
     <div class="card-footer">
         <Paginate
-            offset={(page - 1) / limit}
+            forcePage={page}
             {limit}
             count={personas.count}
             on:page={ev => page = ev.detail}

src/pages/personas/Persona.svelte

@@ -1,6 +1,6 @@
 <script>
     import { onMount } from 'svelte'
-    import { getPermisoPath, storeLayout } from '$/stores/global'
+    import { storeLayout, storePermisoApp } from '$/stores/global'
     import FormPersona from './Form.svelte'
     import { Link, useParams, useNavigate } from 'svelte-navigator';
     import { getPersona, createPersona, updatePersona } from '$/services/personas';
@@ -18,8 +18,9 @@
     let es_nuevo = true;
     let form = {}
     let loading = false;
-    let permiso_app = getPermisoPath()
+    let escritura = false
 
+    $: escritura = $storePermisoApp?.personas?.escritura;
     $: es_nuevo = !$params.rut
     $: begin($params)
 
@@ -56,7 +57,7 @@
 <form action="" on:submit|preventDefault={onSave}>
     <div class="card">
         <div class="card-header d-flex">
-            {#if permiso_app.escritura}
+            {#if escritura}
                 <button type="submit" class="btn btn-primary"><i class="bi bi-save"></i> Guardar</button>
             {/if}
             <div class="m-auto"></div>
@@ -64,7 +65,7 @@
         </div>
         <div class="card-body">
             <h4 class="h4 mb-3">Datos de la persona</h4>
-            <div class={permiso_app.escritura ? "" : "disabled"}>
+            <div class={escritura ? "" : "disabled"}>
                 <FormPersona bind:form={form} {es_nuevo} />
             </div>
         </div>

src/pages/roles/Admin.svelte

@@ -3,7 +3,8 @@
     import { getRoles } from "$/services/roles";
     import PageTitle from "$/components/PageTitle.svelte";
     import ModalRol from "./ModalRol.svelte";
-    import { getPermisoPath } from "$/stores/global";
+    import { useLocation } from "svelte-navigator";
+    import { getPermisosPath } from "$/services/usuarios";
 
     const limit = 15;
     let page = 1;
@@ -13,9 +14,12 @@
     let roles = []
     let rol = null
     let loading = false;
-    let permiso_app = getPermisoPath()
+    let escritura = false;
+    let location = useLocation()
 
-    console.log({ permiso_app })
+    getPermisosPath($location.pathname)
+        .then(data => escritura = data.escritura)
+        .catch(error => console.log({ error }))
 
     $: onPage(page)
 
@@ -51,7 +55,7 @@
 
 <div class="card">
     <div class="card-header">
-        {#if permiso_app.escritura}
+        {#if escritura}
             <button class="btn btn-primary" on:click|preventDefault={onNuevo}>
                 <i class="bi bi-plus-lg"></i> Nuevo
             </button>
@@ -101,7 +105,7 @@
 </div>
 
 {#if rol}
-    <ModalRol {rol} on:close={() => rol = null} on:refresh={() => onPage(page)} />
+    <ModalRol {rol} on:close={() => rol = null} on:refresh={() => onPage(page)} {escritura} />
 {/if}
 
 <style>

src/pages/roles/ModalRol.svelte

@@ -4,7 +4,6 @@
     import { createRol, getRol, updateRol } from "$/services/roles";
     import { createRolyaplicacion, deleteRolyaplicacion, getRolesyaplicaciones, updateRolyaplicacion } from "$/services/roles_aplicaciones";
     import { createRolLinea, deleteRolLinea, getRolLineas } from '$/services/roles_lineas';
-    import { getPermisoPath } from "$/stores/global";
     import { createEventDispatcher } from "svelte";
     import TabForm from "./TabForm.svelte";
     import TabAplicaciones from "./TabAplicaciones.svelte";
@@ -14,9 +13,9 @@
     const dispatch = createEventDispatcher()
 
     export let rol = {};
+    export let escritura = false;
     let loading = false
     let form = {}
-    let permiso_app = getPermisoPath()
     let permisos_app = []
     let permisos_lineas = []
     let tab = 0
@@ -151,7 +150,7 @@
 
         <div class="p-3 bg-white">
             {#if tab === 0}
-                <TabForm bind:form={form} escritura={permiso_app.escritura} />
+                <TabForm bind:form={form} {escritura} />
             {/if}
     
             {#if tab === 1}
@@ -165,7 +164,7 @@
 
 
         <svelte:fragment slot="buttons">
-            {#if permiso_app.escritura}
+            {#if escritura}
                 {#if tab === 0}
                     <button class="btn btn-primary" type="submit" disabled={loading}>
                         <i class="bi bi-save"></i> Guardar

src/pages/roles/TabLineas.svelte

@@ -2,8 +2,26 @@
     import TableResponsive from "$/components/TableResponsive.svelte";
 
     export let permisos = []
+    let resultado = []
+    let search = '';
+
+    function normalize_string(str) {
+        if (!str) return str;
+        return str.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "");
+    }
+
+    function filtrar_lineas(search) {
+        return permisos.filter(el => !search || normalize_string(el.route_long_name).includes(normalize_string(search)))
+    }
+
+    $: resultado = filtrar_lineas(search)
 </script>
 
+<div class="input-group my-3">
+    <input type="text" class="form-control" bind:value={search} placeholder="Nombre de línea...">
+    <div class="input-group-text"><i class="bi bi-search"></i></div>
+</div>
+
 <TableResponsive>
     <thead>
         <tr>
@@ -13,7 +31,7 @@
         </tr>
     </thead>
     <tbody>
-        {#each permisos as linea}
+        {#each resultado as linea}
         <tr>
             <td>{linea.route_long_name}</td>
             <td>{linea.vigente ? '✅' : '⛔'}</td>

src/pages/rutas/ModalFormRuta.svelte

@@ -1,18 +1,24 @@
 <script>
-    import { getPermisoPath } from "$/stores/global";
+    import { useLocation } from "svelte-navigator";
     import IconLoading from "../../components/IconLoading.svelte";
     import Modal from "../../components/Modal.svelte";
     import { createLetreroLUR, deleteLetreroLUR } from "../../services/letreros_lur";
     import { createLinea, updateLinea } from "../../services/lineas";
     import FormRuta from "./FormRuta.svelte";
     import { createEventDispatcher } from "svelte";
+    import { getPermisosPath } from "$/services/usuarios";
     const dispatch = createEventDispatcher();
 
     export let ruta = null;
     let form = {};
     let error_messages = null;
     let loading = false;
-    let permiso_app = getPermisoPath();
+    let escritura = false;
+    let location = useLocation()
+
+    getPermisosPath($location.pathname)
+        .then(data => escritura = data.escritura)
+        .catch(error => console.log({ error }))
 
     $: form = { ...ruta };
 
@@ -57,7 +63,7 @@
         size="xl"
         on:close={() => dispatch("close")}
     >
-        <div class={permiso_app.escritura ? "" : "disabled"}>
+        <div class={escritura ? "" : "disabled"}>
             <FormRuta {form} />
         </div>
 
@@ -72,7 +78,7 @@
         {/if}
 
         <svelte:fragment slot="buttons">
-            {#if permiso_app.escritura}
+            {#if escritura}
                 <button
                     class="btn btn-primary"
                     type="submit"

src/pages/usuarios/Admin.svelte

@@ -1,15 +1,21 @@
 <script>
-    import { Link } from 'svelte-navigator'
+    import { Link, useLocation } from 'svelte-navigator'
     import Paginate from '$/components/Paginate.svelte'
     import PageTitle from '$/components/PageTitle.svelte'
-    import { getUsuarios } from '$/services/usuarios'
+    import { getPermisosPath, getUsuarios } from '$/services/usuarios'
-    import { getPermisoPath } from '$/stores/global';
+    import { storePermisoApp } from '$/stores/global';
 
     let usuarios = { count: 0, results: [] }
     let page = 1
     const limit = 15
     let loading = false
-    let permiso_app = getPermisoPath()
+    let escritura = false;
+    let location = useLocation()
+
+    getPermisosPath($location.pathname)
+        .then(data => escritura = data.escritura)
+        .then(() => storePermisoApp.set({ ...$storePermisoApp, usuarios: { escritura } }))
+        .catch(error => console.log({ error }))
     
     $: onPage(page)
 
@@ -31,7 +37,7 @@
 <div class="card">
     <div class="card-header">
         <div class="mb-3 d-flex">
-            {#if permiso_app.escritura}
+            {#if escritura}
                 <Link to='/usuarios/nuevo' class="btn btn-primary">
                     <i class="bi bi-plus-lg"></i> Nuevo
                 </Link>

src/pages/usuarios/Usuario.svelte

@@ -1,10 +1,10 @@
 <script>
     import { onMount } from 'svelte'
-    import { getPermisoPath, storeLayout } from '$/stores/global'
+    import { storeLayout, storePermisoApp } from '$/stores/global'
     import PageTitle from '$/components/PageTitle.svelte';
     import FormPersona from '../personas/Form.svelte'
     import FormUsuario from './Form.svelte'
-    import { Link, useParams, useNavigate } from 'svelte-navigator';
+    import { Link, useParams, useNavigate, useLocation } from 'svelte-navigator';
     import { getUsuario, createUsuario, updateUsuario, deleteUsuario } from '$/services/usuarios';
     import { updatePersona } from '$/services/personas';
 
@@ -22,8 +22,10 @@
     let form_usuario = {}
     let clave2 = ''
     let loading = false;
-    let permiso_app = getPermisoPath()
+    let escritura = false;
 
+    $: console.log({ $storePermisoApp })
+    $: escritura = $storePermisoApp?.usuarios?.escritura;
     $: es_nuevo = !$params.login
     $: begin($params)
 
@@ -75,15 +77,15 @@
 
 <PageTitle {loading}>{es_nuevo ? 'Nuevo Usuario': 'Editar Usuario'}</PageTitle>
 
-<form action="" on:submit|preventDefault={onSave} class={permiso_app.escritura ? '' : 'disabled'}>
+<form action="" on:submit|preventDefault={onSave}>
     <div class="card">
         <div class="card-header d-flex">
-            {#if permiso_app.escritura}
+            {#if escritura}
                 <button type="submit" class="btn btn-primary">
                     <i class="bi bi-save"></i> Guardar
                 </button>
             {/if}
-            {#if !es_nuevo && permiso_app.escritura}
+            {#if !es_nuevo && escritura}
                 <button type="button" class="btn btn-danger ms-2"
                     on:click|preventDefault={onDelete}>
                     <i class="bi bi-trash"></i> Eliminar
@@ -92,7 +94,7 @@
             <div class="m-auto"></div>
             <Link to="/usuarios" class="btn btn-outline-secondary">Volver</Link>
         </div>
-        <div class="card-body">
+        <div class={"card-body" + (escritura ? '' : ' disabled')}>
             <h4 class="h4 mb-3">Datos de la persona</h4>
             <FormPersona bind:form={form_persona} {es_nuevo} />
             <hr>

src/services/usuarios.js

@@ -18,6 +18,16 @@ export async function getUsuario(id) {
     return res.json()
 }
 
+export async function getPermisosPath(path) {
+    const res = await fetch(`${base}/usuarios/permisos/`, {
+        method: 'POST',
+        body: JSON.stringify({ path }),
+        headers: { "Authorization": `Bearer ${getToken()}`, "Content-Type": "application/json" }
+    })
+    if (!res.ok) throw await res.text()
+    return res.json()
+}
+
 export async function getPermisosApp() {
     const res = await fetch(`${base}/usuarios/permisos/`, {
         method: 'POST',
@@ -47,6 +57,7 @@ export async function updateUsuario({ login: id = null, ...data }) {
     return res.json()
 }
 
+
 export async function deleteUsuario(id) {
     const res = await fetch(`${base}/usuarios/${id}/`, {
         method: 'DELETE',

src/stores/global.js

@@ -8,13 +8,6 @@ export const storeParaderos = writable(cacheParaderos);
 export const storeSession = writable({});
 export const storeLayout = writable({ showSidebar: true });
 export const storePermisos = writable([]);
+export const storePermisoApp = writable({});
 
 storeParaderos.subscribe(val => sessionStorage.setItem('cache-paraderos', JSON.stringify(val)))
-
-export function getPermisoPath(path = null) {
-    let location = useLocation()
-    let pathname = null
-    location.subscribe(val => pathname = val.pathname)
-
-    return { escritura: true  };
-}