iconograph-ui 1.7.19 → 2.0.0

package/lib/{form → components/form}/ActionButton.svelte

@@ -7,6 +7,7 @@
 
     export let options = [];
     export let style = "classic";
+    export let outline = false;
 
     let open = false;
     let dropdownEl;
@@ -26,7 +27,7 @@
 
 <!-- svelte-ignore a11y_click_events_have_key_events -->
 <!-- svelte-ignore a11y_no_static_element_interactions -->
-<div class="dropdown {open ? 'open' : ''} {style == "icon" ? 'icon' : ''}"
+<div class="dropdown {open ? 'open' : ''} {style == "icon" ? 'icon' : ''} {outline ? 'outline' : '' }"
     bind:this={dropdownEl} use:clickOutside on:click_outside={() => {open = false}}
     on:click|preventDefault|stopPropagation={openDropdown}>
     {#if style == "icon"}
@@ -38,12 +39,16 @@
     <!-- Liste déroulante -->
     {#if open}
     <Portal target="#main-container" position={"top: 0px; right: 0px"}>
-        <div class="list" style="position: absolute; top:{coords.top + 4}px; right:{coords.right - 14}px; width: {coords.width}px;" >
+        <div class="list" style="position: absolute; top:{coords.top + 6}px; right:{coords.right - 0}px; width: {coords.width}px;" >
         <!-- Options -->
         {#each options as opt}
-            <div class="option" on:click={opt.action}>
+            {#if opt.separator }
+            <hr />
+            {:else}
+            <div class="option" on:click={opt.action} style:background-image={`url("${opt.icon}")`} >
                 <span>{opt.label}</span>
             </div>
+            {/if}
         {/each}
         </div>
     </Portal>
@@ -67,27 +72,34 @@
 }
 .dropdown > div:first-of-type {
     background-color: var(--theme-input-bg-highlight);
+    box-shadow: var(--button-box-shadow);
     height: 32px;
     border: none;
-    border-radius: 8px;
+    border-radius: 7px;
     cursor: pointer;
     padding: 0px 8px;
     font-size: 14px;
-    line-height: 33px;
-    font-weight: 600;
+    line-height: 32px;
+    font-weight: 500;
     font-family: var(--theme-text-font);
-    color: #333;
+    color: #121212;
     flex: 1;
-    min-width: 76px;
     background-size: 14px auto;
     background-repeat: no-repeat;
-    background-position: center right 14px;
-    padding-left: 20px;
-
+    background-position: center right 12px;
+    padding-left: 18px;
+    padding-right: 32px;
     transition: all ease-in-out 0.17s;
 }
+.dropdown.outline > div:first-of-type {
+    height: 30px;
+    line-height: 30px;
+    border: 1px solid var(--button-border-color);
+    background-color: var(--main-bg-color);
+}
 .dropdown > div:first-of-type:hover {
     background-color: var(--theme-input-bg-hover);
+    box-shadow: var(--button-hover-box-shadow);
 }
 .dropdown > div:first-of-type.icon {
     min-width: 1px;
@@ -99,30 +111,45 @@
     padding: 0px;
     height: 32px;
 }
+.dropdown.outline > div:first-of-type.icon {
+    height: 30px;
+    line-height: 30px;
+    max-width: 30px;
+    border: 1px solid var(--button-border-color);
+    background-color: var(--main-bg-color);
+}
+.dropdown.outline > div:first-of-type:hover {
+    background-color: var(--theme-input-bg-highlight);
+}
 .list {
     position: absolute;
     top: 100%;
     right: 0px;
     background: #ffffff; /*var(--theme-input-bg-highlight, #ebebed);*/
-    border-radius: 8px;
+    border-radius: 7px;
     padding: 8px 0px;
     max-height: 220px;
     overflow-y: auto;
     z-index: 9999;
-    min-width: 200px;
-    border: 1px solid #00000012;
-    box-shadow: #00000012 0 0px 8px;
+    min-width: 260px;
+    border: 1px solid var(--button-border-color);
+    box-shadow: #77777715 0 3px 10px;
 }
 .option {
     display: flex;
     align-items: center;
-    padding: 8px 24px;
+    padding: 8px 12px 8px 36px;
+    margin: 0px 8px;
     gap: 8px;
     cursor: pointer;
+    border-radius: 5px;
+    background-size: 20px auto;
+    background-repeat: no-repeat;
+    background-position: center left 8px;
 }
 .option > span {
     font-size: 14px;
-    line-height: 18px;
+    line-height: 20px;
     font-weight: 400;
     font-family: var(--theme-text-font);
     color: var(--theme-input-text-color);
@@ -131,6 +158,14 @@
     text-overflow: ellipsis;
 }
 .option:hover {
-    background: var(--theme-input-bg-highlight);
+    background-color: var(--theme-input-bg-color);
+}
+hr {
+    color: var(--button-border-color);
+    height: 0;
+    line-height: 0;
+    margin: 7px 12px;
+    border-top: 1px solid var(--button-border-color);
+    border-bottom: 0px solid var(--button-border-color);
 }
 </style>

package/lib/{layout → components/layout}/Card.svelte

@@ -12,8 +12,9 @@
     width: 100%;
     background-color: var(--main-bg-color);
     box-sizing: border-box;
-    border: 1px solid var(--main-border-color);
+    border: var(--main-border, 1px solid var(--main-border-color));
     border-radius: 8px;
     overflow: hidden;
+    box-shadow: var(--main-shadow);
 }
 </style>

package/lib/{navigation → components/navigation}/Button.svelte

@@ -34,9 +34,9 @@ a, button {
     display: inline-block;
     background-color: var(--theme-main-color);
     color: #ffffff !important;
-    /*box-shadow: #000000a0 0px 1px 3px 0px !important;*/
+    box-shadow: var(--button-box-shadow);
     border: 1px solid var(--theme-main-color);
-    border-radius: 8px;
+    border-radius: 7px;
     height: 30px;
     line-height: 30px !important;
     font-size: 13px;
@@ -86,6 +86,14 @@ a:disabled {
     background-size: 18px;
     padding-left: 36px;
 }
+.min {
+    min-width: 30px;
+    border: 1px solid var(--theme-main-color);
+    padding: 0px 0px;
+    background-position: center center;
+    background-size: 18px;
+    padding-left: 0px;
+}
 .disabled {
     background-color: #eee;
     color: #888 !important;

package/lib/{navigation → components/navigation}/MainMenu.svelte

@@ -13,6 +13,8 @@
     afterUpdate(() => {
         current_url = $page.url.pathname.split('/');
         current_url = '/' + current_url[1];
+
+        console.log(current_url);
     });
 
 </script>
@@ -26,9 +28,12 @@
         </div>
     </header>
 
-    <div class="logo" >
-        <!-- Logo -->
-    </div>
+    {#if menu.logo != null}
+        <div class="logo" >
+        </div>
+    {:else}
+        <div><h1>Bienvenue</h1></div>
+    {/if}
 
     <div class="main">
         <ul>
@@ -53,19 +58,21 @@
         padding: 14px;
         position: absolute;
         top: 10px;
-        right: -11px;
+        /*right: -11px;*/
+        left: 20px;
         z-index: 300;
+        margin-bottom: 12px;
     }
     header > div {
         position: absolute;
-        top: 10px;
+        top: 16px;
         left: 0px;
         width: 32px;
         height: 32px;
         border-radius: 30px;
         cursor: pointer;
-        background-color: #fff;
-        border: 1px solid var(--main-border-color);
+        /*background-color: var(--main-menu-bg-color, #ffffff);
+        border: 1px solid var(--main-border-color);*/
         transition: all ease-in-out 0.3s;
         align-self: flex-end;
     }
@@ -77,22 +84,22 @@
         height: 32px;
     }
     header > div.menu-open {
-        background-color: #fff;
+        /*background-color: var(--main-menu-bg-color, #ffffff);*/
         box-shadow: inset;
     }
     header > div > div > div{
         display: inline-block;
         position: absolute;
         vertical-align: top;
-        background-color: #333;
+        background-color: #555;
         border-radius: 0px;
-        height: 2px;
-        width: 16px;
+        height: 3px;
+        width: 25px;
         transition: all 0.3s;
         border-radius: 0px;
     }
     header > div > div > div:nth-of-type(1){
-        top: 15px;
+        top: 12px;
         left: 10px;
     }
     header > div > div > div:nth-of-type(2){
@@ -100,7 +107,7 @@
         left: 10px;
     }
     header > div > div > div:nth-of-type(3){
-        top: 24px;
+        top: 28px;
         left: 10px;
     }
     header > div.menu-open > div > div:nth-of-type(1){
@@ -115,7 +122,7 @@
         transform: rotate(-45deg);
     }
     nav {
-        background-color: var(--main-bg-color);
+        background-color: var(--main-menu-bg-color, #ffffff);
         position: fixed;
         top: 0px;
         left: 0px;
@@ -124,7 +131,7 @@
         max-height: 100vh;
         box-sizing: border-box;
         border-right: 1px solid var(--main-border-color);
-        padding-top: 58px;
+        padding-top: 80px;
         padding-bottom: 10px;
         transition: all ease-in-out 0.4s;
         display: flex;
@@ -136,23 +143,6 @@
         transform: translateX(0px);
         width: 285px;
     }
-    nav > .logo {
-        width: 48px;
-        height: 40px;
-        min-height: 40px;
-        background-image: var(--logo-large);
-        background-size: auto 32px;
-        background-repeat: no-repeat;
-        background-position: 0px center;
-        margin-bottom: 32px;
-        margin-left: 17px;
-        transition: all ease-in-out 0.4s;
-    }
-    nav.menu-open > .logo {
-        width: 248px;
-        background-size: auto 32px;
-        background-position: 0px center;
-    }
 
     nav > .main {
         flex: 1;
@@ -184,12 +174,15 @@
             width: 285px;
         }
         header {
+            position: fixed;
             top: 10px;
             right: initial;
             left: 105px;
+            transform: translateX(0px);
+            transition: all ease-in-out 0.4s;
         }
         nav.menu-open > header {
-            left: 20px;
+            transform: translateX(-85px);
         }
         header > div {
             border: none;

package/lib/{navigation → components/navigation}/MenuItem.svelte

@@ -24,7 +24,7 @@
     li {
         list-style: none;
         width: 100%;
-        margin-bottom: 14px;
+        margin-bottom: 2px;
     }
 
     .menu-item {
@@ -68,8 +68,9 @@
         line-height: 48px;
         padding-left: 48px;
         overflow: hidden;
-        font-weight: 600;
-        color: var(--theme-text-darkgrey);
+        font-weight: var(--main-menu-font-weight, 600);
+        font-size: var(--main-menu-font-size);
+        color: var(--main-menu-fg-color, --theme-text-darkgrey);
         font-family: var(--theme-title-font);
     }
     .menu-item > div.menu-open > div:nth-of-type(2) {
@@ -78,13 +79,13 @@
         display: flex;
     }
     .menu-item.selected > div > div:nth-of-type(1) {
-        background-color: var(--theme-main-color);
+        background-color: var(--main-menu-fg-color, --theme-main-color);
     }
     .menu-item.selected > div > div:nth-of-type(2) {
-        color: var(--theme-main-color);
+        color: var(--main-menu-fg-color, --theme-main-color);
     }
     .menu-item:hover > div > div:nth-of-type(2) {
-        background-color: var(--theme-bg-color-light);
-        color: var(--theme-main-color);
+        background-color: var(--main-menu-bg-hover-color, --theme-bg-color-light);
+        color: var(--main-menu-fg-color, --theme-main-color);
     }
 </style>

package/lib/{navigation → components/navigation}/NavBar.svelte

@@ -4,16 +4,17 @@
     export let tabs;
     export let currentTab;
 
-    /*$: if (currentTab) {
-        history.replaceState(null, '', `#${currentTab}`);
-    }*/
-
-    /*onMount(() => {
+    onMount(() => {
         const hash = window.location.hash.replace('#', '');
 
         if (hash && Object.keys(tabs).includes(hash))
             currentTab = hash;
-    });*/
+    });
+
+    function onChangeTab(key) {
+        currentTab = key;
+        history.replaceState({}, "", `#${key}`);
+    }
 
 </script>
 
@@ -21,7 +22,7 @@
     {#each Object.keys(tabs) as key}
         <!-- svelte-ignore a11y_click_events_have_key_events -->
         <!-- svelte-ignore a11y_no_static_element_interactions -->
-        <div on:click={() => {currentTab = key}} class="{currentTab == key ? 'selected' : ''}">
+        <div on:click={() => {onChangeTab(key)}} class="{currentTab == key ? 'selected' : ''}">
             {tabs[key]}
         </div>
     {/each}

package/lib/network/APIErrors.js

@@ -0,0 +1,51 @@
+// @ts-nocheck
+
+export class APIError extends Error {
+    constructor(message, statusCode, endpoint, user = null) {
+        super(message);
+        this.name = 'APIError';
+        this.statusCode = statusCode;
+        this.endpoint = endpoint;
+        this.user = user ? user : { id: null, email: null };
+        this.timestamp = new Date();
+    }
+
+    async logError() {
+        this.user = this.user.id ? await JSON.parse(this.user) : {};
+        console.error(`[${this.timestamp.toISOString()}] ${this.name}: ${this.message} (${this.statusCode}) at ${this.endpoint} - ${this.user.id}`);
+        console.trace(`${this.message} (${this.statusCode}) at ${this.endpoint}`);
+
+        if (this.statusCode != 401) {
+            const webhookUrl = "https://discord.com/api/webhooks/1422717261738676244/qZ5jx0uGTmcL2DEH8Kdb0IoerCh6VG27xIyKKJU55XYqwADhXXqM-qlh3E5WZzVH5nuV";
+
+            let stackTrace = this.stack || "No stack trace available.";
+            if (stackTrace.length > 1020)
+                stackTrace = stackTrace.slice(0, 1017) + "...";
+
+            const embed = {
+                title: process.env.NODE_ENV == 'development' ? "[DEV] erreur" : "⚠️ Nouvelle erreur détectée",
+                color: process.env.NODE_ENV == 'development' ? 0x0000ff : 0xff0000,
+                fields: [
+                    { name: "Message", value: String(this.statusCode) + ' ' + this.message },
+                    { name: "Endpoint", value: this.endpoint },
+                    { name: "User", value: this.user.email },
+                    { name: "Timestamp", value: this.timestamp.toISOString() },
+                    { name: "Stack Trace", value: "```" + stackTrace + "```" }
+                ],
+            };
+
+            try {
+                await fetch(webhookUrl, {
+                    method: "POST",
+                    headers: { "Content-Type": "application/json" },
+                    body: JSON.stringify({
+                        username: "Error Logger",
+                        embeds: [embed],
+                    }),
+                });
+            } catch (err) {
+                console.error("Erreur lors de l'envoi au webhook Discord:", err);
+            }
+        }
+    }
+}

package/lib/network/action.js

@@ -0,0 +1,21 @@
+// @ts-nocheck
+import { json } from '@sveltejs/kit';
+import { requestApi } from './requestApi.js';
+
+export async function addActivity(objectId, objectType, type, content, cookies) {
+
+    const response = await requestApi('POST', '/graphql', {
+        query: `mutation {
+            createAction (
+                objectId: "${objectId}",
+                objectType: "${objectType}",
+                type: "${type}",
+                content: "${encodeURI(content)}"
+            ) {
+                id
+            }
+        }`
+    }, cookies);
+
+    return response.data.createAction;
+}

package/lib/network/clientFetch.js

@@ -0,0 +1,50 @@
+// @ts-nocheck
+import { addNotification } from "iconograph-ui";
+import { APIError } from "./APIErrors";
+import { json } from "@sveltejs/kit";
+
+export const Notifications = {
+    All: 'ALL',
+    ErrorsOnly: 'ERROR_ONLY',
+    None: 'NONE'
+}
+
+export async function clientFetch(method, uri, body, n = Notifications.All) {
+    let response;
+
+    if (method == 'GET' || !body) {
+        response = await fetch(uri, {
+            method: method,
+            headers: { 'Content-Type': 'application/json' }
+        });
+    }
+    else {
+        response = await fetch(uri, {
+            method: method,
+            body: JSON.stringify(body),
+            headers: { 'Content-Type': 'application/json' }
+        });
+    }
+
+    if (!response.ok && response.status == 401) {
+        if (n != Notifications.None)
+            addNotification({ 'status': 'failure', 'message': 'Votre session a expiré, veuillez vous reconnecter' });
+        return window.location = '/auth/signout?reason=Expired'
+    }
+    if (!response.ok && response.status == 404 && n != Notifications.None) {
+        (new APIError(JSON.stringify(response, null, 4) , response.status, uri, null)).logError();
+        return addNotification({ 'status': 'failure', 'message': 'Erreur ' + response.status });
+    }
+
+    const data = await response.json();
+
+    if (!response.ok && (n === Notifications.ErrorsOnly || n === Notifications.All)) {
+        (new APIError(JSON.stringify(data.message, null, 4) , response.status, uri, null)).logError();
+        addNotification({ 'status': 'failure', 'message': response.status + ': ' + data.message });
+        data.__errors == true;
+    }
+    else if (method != 'GET' && n == Notifications.All)
+        addNotification({ 'status': 'success', 'message': data.message });
+
+    return data;
+}

package/lib/network/index.js

@@ -0,0 +1 @@
+export * as network from "./"

package/lib/network/requestApi.js

@@ -0,0 +1,127 @@
+// @ts-nocheck
+import { error, redirect } from '@sveltejs/kit';
+import { env } from '$env/dynamic/private';
+import { APIError } from './APIErrors';
+
+let API_DATA_HOST = process.env.API_DATA_HOST || 'srvc-data';
+let API_DATA_PORT = process.env.API_DATA_PORT || '3030';
+
+let API_OIDC_HOST = env.API_OIDC_HOST || 'localhost';
+let API_OIDC_PORT = env.API_OIDC_PORT || '3030';
+
+const dev = (!env.NODE_ENV) || env.NODE_ENV === 'development';
+
+async function fetchInterceptor(resource, config, cookies, cookieName) {
+    try {
+        const raw = await fetch(resource, config);
+        const text = await raw.text();
+        let json;
+
+        try {
+            json = JSON.parse(text);
+        }
+        catch {
+            throw new APIError("Invalid JSON received from API", 502, resource);
+        }
+
+        /*if (response.errors) {
+            if (response.errors[0].message == 'Not authenticated') {
+
+                /*const refreshToken = cookies.get('refreshToken');
+                response = await fetch('http://' + API_OIDC_HOST + ':' + API_OIDC_PORT + '/jwks/sign/' + tokenNames[cookieName], {
+                    method: 'POST',
+                    body: JSON.stringify({refreshToken: refreshToken}),
+                    headers: headers,
+                });
+
+                if (!response.ok)
+                    return response;
+
+                const data = await response.json();
+                cookies.set(cookieName, data.token, {
+                    path: '/',
+                    httpOnly: true,
+                    sameSite: 'lax',
+                    secure: !dev,
+                    maxAge: 60 * 100
+                });*/
+
+                // config.headers['Authorization'] = data.token;
+                // response = await fetch(resource, config);
+
+
+        return { raw, json };
+    }
+    catch (e) {
+        if (e.message === 'fetch failed') {
+            error(501, { message: "Le serveur de données n'est pas disponible (__SRVC_DATACORE_DOWN__)"});
+        }
+        throw e;
+    }
+}
+
+export async function request(method, url, body, cookies, cookieName) {
+
+    const jwt = cookies.get(cookieName);
+    const headers = {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json',
+        ...(jwt ? { Authorization: 'Bearer ' + jwt } : {})
+    };
+
+    try {
+        const { raw, json } = await fetchInterceptor(url, {
+            method: method,
+            body: (method == 'GET' || method == 'HEAD') ? undefined : JSON.stringify(body),
+            headers: headers,
+        }, cookies, cookieName);
+
+        if (json.errors?.length) {
+            const msg = json.errors[0].message;
+
+            switch (msg) {
+                case "Not authenticated":
+                    throw new APIError(msg, 401, url);
+                case "Unauthorized":
+                    throw new APIError(msg, 403, url);
+                case "Invalid credentials":
+                    throw new APIError("Identifiants non valides", 401, url);
+                default:
+                    throw new APIError(msg, 500, url);
+            }
+        }
+
+        return json;
+    }
+    catch (e) {
+        throw e;
+    }
+}
+
+export async function requestApi(method, uri, body, cookies) {
+    try {
+        return await request(method, 'http://' + API_DATA_HOST + ':' + API_DATA_PORT + uri, body, cookies, 'BibliapediaAccessToken');
+    }
+    catch (e) {
+        if (e instanceof APIError)
+            e.logError();
+        else
+            console.error(e)
+
+        error(e.statusCode, { message: e.message })
+    }
+}
+
+export async function loadApi(method, uri, body, cookies) {
+    try {
+        return await request(method, 'http://' + API_DATA_HOST + ':' + API_DATA_PORT + uri, body, cookies, 'BibliapediaAccessToken');
+    }
+    catch (e) {
+        e.logError();
+
+        if (e.statusCode == 401)
+            return redirect(307, "/auth/signout?reason=Expired");
+        else
+            error(e.statusCode, { message: e.message })
+    }
+}