Crea rol basado en Operador y App Tipo Cargo V2

src/pages/contrato/Admin.svelte

@@ -0,0 +1,131 @@
+<script>
+    import Paginate from "$/components/Paginate.svelte";
+    import { getOperadores } from "$/services/operadores";
+    import PageTitle from "$/components/PageTitle.svelte";
+    import ModalOperador from "./ModalOperador.svelte";
+    import { useLocation } from "svelte-navigator";
+    import { getPermisosPath } from "$/services/usuarios";
+
+    const limit = 15;
+    let page = 1;
+    let offset = 0;
+    let count = 0;
+    let ordering = 'id_operador'
+    let operadores = []
+    let operador = null
+    let verLineas =null 
+    let loading = false;
+    let escritura = false;
+    let location = useLocation()
+
+    getPermisosPath($location.pathname)
+        .then(data => escritura = data.escritura)
+        .catch(error => console.log({ error }))
+
+    $: onPage(page) 
+    async function onPage(p) {
+        try {
+            loading = true
+            offset = (p - 1) * limit;             
+            const data = await getOperadores({ offset, limit, ordering })
+            operadores = data.results;
+            count = data.count;
+        } catch (error) {
+            globalThis.toast.error(error)
+        } finally {
+            loading = false;
+        }
+    }
+
+    function onEdita(item) {
+        operador = item;
+    }
+
+    function onVerLineas(item){
+        verLineas = item;
+        operador = item;
+    }
+
+    function onNuevo() {
+        operador = {}
+    }
+
+    function onOrderBy(field) {
+        ordering = ordering === field ? '-' + field : field;
+        onPage(page)
+    }
+</script>
+
+<PageTitle {loading}>Operadores</PageTitle>
+
+<div class="card">
+    <div class="card-header">
+        {#if escritura}
+            <button class="btn btn-primary" on:click|preventDefault={onNuevo}>
+                <i class="bi bi-plus-lg"></i> Nuevo
+            </button>
+        {/if}
+    </div>
+    <div class="card-body">
+        <div class="table-responsive">
+            <table class="table table-sm table-bordered">
+                <thead>
+                    <tr class="table-light">
+                        <th style="width:5%">Nro</th>
+                        <th>
+                            <a href={"#"} on:click|preventDefault={() => onOrderBy('id_operador')}>ID</a>
+                            {#if ordering === 'id_operador'}<i class="bi bi-caret-up-fill"></i>{/if}
+                            {#if ordering === '-id_operador'}<i class="bi bi-caret-down-fill"></i>{/if}
+                        </th>
+                        <th>
+                            <a href={"#"} on:click|preventDefault={() => onOrderBy('nombre_operador')}>Nombre</a>
+                            {#if ordering === 'nombre_operador'}<i class="bi bi-caret-up-fill"></i>{/if}
+                            {#if ordering === '-nombre_operador'}<i class="bi bi-caret-down-fill"></i>{/if}
+                        </th>
+                        
+                        <th>
+                            <a href={"#"} on:click|preventDefault={() => onOrderBy('vigente')}>Vigente</a>
+                            {#if ordering === 'vigente'}<i class="bi bi-caret-up-fill"></i>{/if}
+                            {#if ordering === '-vigente'}<i class="bi bi-caret-down-fill"></i>{/if}
+                        </th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {#each operadores as app, index}
+                    <tr key={index}>
+                        <td class="table-light">{offset + index + 1}</td>
+                        <td>{app.id_operador}</td>
+                        <td><a href={"#"} on:click|preventDefault={() => onEdita(app)}>{app.nombre_operador}</a></td>                        
+                        <td>{app.vigente ? '✅':'🚫'}</td>
+                    </tr>
+                    {/each}
+                </tbody>
+            </table>
+        </div>
+    </div>
+    <div class="card-footer d-flex">
+        <a href={"#"} class="btn btn-outline-secondary me-3" on:click|preventDefault={() => onPage(page)}>
+            <i class="bi bi-arrow-repeat"></i>
+        </a>
+        <Paginate
+            {limit}
+            {count}
+            on:page={ev => page = ev.detail}
+        />
+    </div>
+</div>
+
+{#if operador}
+    <ModalOperador    
+        {operador}
+        {escritura}
+        on:close={() => operador = null}
+        on:refresh={() => onPage(page)}
+    />
+{/if}
+
+<style>
+    .table-responsive {
+        max-height: calc(100vh - 300px);
+    }
+</style>

src/pages/operadores/ModalOperador.svelte

@@ -71,19 +71,20 @@
                 form = await updateOperador(form);
             } else {
                 
-                formRol.nombre_rol=form.nombre_operador;
+                /*formRol.nombre_rol=form.nombre_operador;
                 formRol =  await createRol(formRol);
-                form.id_rol = formRol.id_rol    
+                form.id_rol = formRol.id_rol   */
-                form = await createOperador(form);                
-                formRol= await createRolOperador(form);
                  
-                formRol={};
+                form = await createOperador(form);                
+                /*formRol= await createRolOperador(form);*/
+
+                /*formRol={};
                 formRol.id_rol = form.id_rol;
                 formRol.id_aplicacion=1;
                 formRol = await createRolyaplicacion(formRol);
 
                 formRol.id_aplicacion=2;
-                formRol = await createRolyaplicacion(formRol);
+                formRol = await createRolyaplicacion(formRol);*/
 
 
             }

src/pages/usuarios/Perfil.svelte

@@ -16,8 +16,8 @@
                 <img class="img-fluid" width="100%" alt="" src={avatar} />
                 <section class="section">
                     <div class="section-body">
-                        <p>Twitter del perfil: <br />
+                        <p> <br />
-                            @twitter
+                           
                         </p>
                     </div>
                 </section>
@@ -34,13 +34,10 @@
                     </div>
                     <div class="section-body">
                         <p>
-                            Vestibulum
+                            
-                            volutpat lacus ac magna ullamcorper, id semper sem aliquam. Donec
-                            vestibulum turpis mi, sed ullamcorper lorem feugiat sed. Praesent
-                            ut fringilla dolor. Sed viverra posuere felis eu ullamcorper.
                         </p>
                         <p>
-                            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                            
         
                         </p>
                     </div>
@@ -53,12 +50,13 @@
             <div class="section-header">
                 <h6 class="pb-2 border-bottom border-accent">Información de contacto:</h6>
             </div>
-            <div class="section-body">
+          <!--  <div class="section-body">
                 <p class="mb-1">Sitio Web: <a href="http://wwww.example.com">http://wwww.example.com</a></p>
                 <p class="mb-1">Twitter: @twitter</p>
                 <p class="mb-2">Facebook: facebook/ejemplo</p><a class="btn btn-primary btn-block" href={"#"}>Ir al
                     sitio</a>
             </div>
+            -->
         </section>
     </div>
 </div>

src/services/contrato.js

@@ -0,0 +1,68 @@
+
+import { base, getToken } from './_config'
+
+export async function getUsuarios(params) {
+    const query = !params ? '' : '?' + (new URLSearchParams(params).toString());
+    const res = await fetch(`${base}/usuarios/${query}`, {
+        headers: { "Authorization": `Bearer ${getToken()}`, "Content-Type": "application/json" }
+    })
+    if (!res.ok) throw await res.text()
+    return res.json()
+}
+
+export async function getUsuario(id) {
+    const res = await fetch(`${base}/usuarios/${id}/`, {
+        headers: { "Authorization": `Bearer ${getToken()}`, "Content-Type": "application/json" }
+    })
+    if (!res.ok) throw await res.text()
+    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',
+        headers: { "Authorization": `Bearer ${getToken()}`, "Content-Type": "application/json" }
+    })
+    if (!res.ok) throw await res.text()
+    return res.json()
+}
+
+export async function createUsuario(data) {
+    const res = await fetch(`${base}/usuarios/`, {
+        method: 'POST',
+        body: JSON.stringify(data),
+        headers: { "Authorization": `Bearer ${getToken()}`, "Content-Type": "application/json" }
+    })
+    if (!res.ok) throw await res.text()
+    return res.json()
+}
+
+export async function updateUsuario({ login: id = null, ...data }) {
+    const res = await fetch(`${base}/usuarios/${id}/`, {
+        method: 'PATCH',
+        body: JSON.stringify(data),
+        headers: { "Authorization": `Bearer ${getToken()}`, "Content-Type": "application/json" }
+    })
+    if (!res.ok) throw await res.text()
+    return res.json()
+}
+
+
+export async function deleteUsuario(id) {
+    const res = await fetch(`${base}/usuarios/${id}/`, {
+        method: 'DELETE',
+        headers: { "Authorization": `Bearer ${getToken()}`, "Content-Type": "application/json" }
+    })
+    if (!res.ok) throw await res.text()
+    return res.text()
+}