@humandialog/forms.svelte 1.3.17 → 1.4.0

package/index.js

@@ -45,6 +45,7 @@ export { default as ListInserter } from './components/list/list.inserter.svelte'
 export { default as ListDateProperty } from './components/list/list.date.svelte';
 export { default as ListComboProperty } from './components/list/list.combo.svelte';
 export { default as ListStaticProperty } from './components/list/list.static.svelte';
+export { default as ListTags } from './components/list/list.tags.svelte';
 export { default as Modal } from './modal.svelte';
 export { default as MembersPage } from './tenant.members.svelte';
 export { default as Console } from './console.svelte';
@@ -62,9 +63,13 @@ export { default as KanbanTagsProperty } from './components/kanban/kanban.tags.s
 export { default as KanbanCallbacks } from './components/kanban/kanban.callbacks.svelte';
 export { KanbanColumnTop, KanbanColumnBottom } from './components/kanban/Kanban';
 export { selectItem, activateItem, clearActiveItem, isActive, isSelected, getActive, editable, startEditing, saveCurrentEditable, selectable, handleSelect, isDeviceSmallerThan, resizeImage, refreshToolbarOperations, isOnScreenKeyboardVisible, randomString, UI, } from './utils';
-export { getFormattedStringDate, getNiceStringDate, dayName, monthName } from './components/date_utils';
-export { mainContentPageReloader, reloadMainContentPage, reloadWholeApp, alerts, addAlert, onErrorShowAlert, main_sidebar_visible_store } from './stores.js';
+export { getNiceStringDateTime, getFormattedStringDate, getNiceStringDate, dayName, monthName } from './components/date_utils';
+export { mainContentPageReloader, reloadMainContentPage, reloadWholeApp, alerts, addAlert, onErrorShowAlert, main_sidebar_visible_store, tagsReloader, reloadVisibleTags } from './stores.js';
 export { data_tick_store, // tmp
 hasSelectedItem, hasDataItem, setNavigatorTitle } from "./stores";
 export { contextToolbarOperations, pageToolbarOperations, contextItemsStore, contextTypesStore } from './stores'; // tmp
 export { informModification, informModificationEx, informItem, pushChanges } from './updates'; // tmp
+export { default as IcH1 } from './components/document/internal/h1.icon.svelte';
+export { default as IcH2 } from './components/document/internal/h2.icon.svelte';
+export { default as IcH3 } from './components/document/internal/h3.icon.svelte';
+export { default as IcH4 } from './components/document/internal/h4.icon.svelte';

package/operations.svelte

@@ -6,21 +6,20 @@ $:
 let operations = [];
 let leftOperations = [];
 let rightOperations = [];
+let hasOperations = false;
 function update(...args) {
-  let isOpVer1 = false;
+  let opVer = 0;
   if ($contextToolbarOperations && Array.isArray($contextToolbarOperations) && $contextToolbarOperations.length > 0) {
     operations = $contextToolbarOperations;
   } else if ($contextToolbarOperations && $contextToolbarOperations.operations && $contextToolbarOperations.operations.length > 0) {
     operations = $contextToolbarOperations.operations;
-    if ($contextToolbarOperations.opver && $contextToolbarOperations.opver == 1)
-      isOpVer1 = true;
+    opVer = $contextToolbarOperations.opver ?? 0;
   } else {
     if (Array.isArray($pageToolbarOperations))
       operations = $pageToolbarOperations;
     else {
       operations = $pageToolbarOperations.operations;
-      if ($pageToolbarOperations.opver && $pageToolbarOperations.opver == 1)
-        isOpVer1 = true;
+      opVer = $pageToolbarOperations.opver ?? 0;
     }
   }
   leftOperations = [];
@@ -28,7 +27,7 @@ function update(...args) {
   let AOperations = [];
   let BOperations = [];
   let COperations = [];
-  if (isOpVer1) {
+  if (opVer == 1) {
     operations.forEach((group) => {
       if (group.operations && group.operations.length > 0) {
         AOperations = [...AOperations, ...group.operations.filter((o) => o.tbr == "A")];
@@ -38,10 +37,56 @@ function update(...args) {
     });
     leftOperations = [...AOperations, ...BOperations];
     rightOperations = [...COperations];
+  } else if (opVer == 2) {
+    operations.forEach((group) => {
+      if (group.tbr) {
+        const expandOperation = {
+          caption: group.caption ?? "",
+          icon: group.icon ?? void 0,
+          preAction: group.preAction,
+          activeFunc: group.activeFunc,
+          menu: group.operations
+        };
+        switch (group.tbr) {
+          case "A":
+            AOperations.push(expandOperation);
+            break;
+          case "B":
+            BOperations.push(expandOperation);
+            break;
+          case "C":
+            COperations.push(expandOperation);
+            break;
+        }
+      }
+      group.operations.forEach((op) => {
+        if (op.tbr) {
+          const tbrOperation = {
+            ...op
+          };
+          if (op.hideToolbarCaption)
+            tbrOperation.caption = "";
+          switch (op.tbr) {
+            case "A":
+              AOperations.push(tbrOperation);
+              break;
+            case "B":
+              BOperations.push(tbrOperation);
+              break;
+            case "C":
+              COperations.push(tbrOperation);
+              break;
+          }
+        }
+      });
+    });
+    leftOperations = [...AOperations, ...BOperations];
+    rightOperations = [...COperations];
   } else {
     leftOperations = operations.filter((o) => !o.right);
     rightOperations = operations.filter((o) => o.right == true);
   }
+  hasOperations = leftOperations.length > 0 || rightOperations.length > 0;
 }
 function on_click(e, operation) {
   if (!operation)
@@ -49,6 +94,8 @@ function on_click(e, operation) {
   let owner = e.target;
   while (owner && owner.tagName != "BUTTON")
     owner = owner.parentElement;
+  if (operation.preAction)
+    operation.preAction(owner);
   if (operation.action) {
     operation.action(owner);
     return;
@@ -74,6 +121,7 @@ function isOperationActivated(operation) {
 }
 </script>
 
+{#if hasOperations}
 <section class="flex flex-row no-print h-10 bg-stone-600 dark:bg-stone-950 overflow-x-clip overflow-y-hidden py-0 text-xs whitespace-nowrap">
     <div    class="flex flex-row"
             class:flex-row-reverse={mobile}>
@@ -85,7 +133,7 @@ function isOperationActivated(operation) {
                     {#each operation.toolbox as operation}
                         <button type="button" 
                                 class="py-2.5 px-4 
-                                text-xs font-thin text-stone-100 dark:text-stone-300 dark:hover:text-white 
+                                text-sm font-thin text-stone-100 dark:text-stone-300 dark:hover:text-white 
                                 hover:bg-stone-700 dark:hover:bg-stone-800 active:bg-stone-300 dark:active:bg-stone-600
                                 border-stone-200 focus:outline-none dark:border-stone-600
                                 inline-flex items-center"
@@ -94,7 +142,7 @@ function isOperationActivated(operation) {
                                 on:click={(e) => {on_click(e, operation)}}
                                 on:mousedown={mousedown}>
                             {#if operation.icon}
-                                <div class="w-3.5 h-3.5 mr-1"><svelte:component this={operation.icon}/></div>
+                                <div class="w-5 h-5 mr-1"><svelte:component this={operation.icon}/></div>
                             {/if}
                             {#if operation.caption}
                                 <span class="ml-1">{operation.caption}</span>
@@ -105,7 +153,7 @@ function isOperationActivated(operation) {
                 
                     <button type="button" 
                             class="py-2.5 px-4
-                            text-xs font-thin text-stone-100 dark:text-stone-300 dark:hover:text-white 
+                            text-sm font-thin text-stone-100 dark:text-stone-300 dark:hover:text-white 
                             hover:bg-stone-700 dark:hover:bg-stone-800 active:bg-stone-300 dark:active:bg-stone-600
                             border-stone-200 focus:outline-none dark:border-stone-600
                             inline-flex items-center"
@@ -114,7 +162,7 @@ function isOperationActivated(operation) {
                             on:click={(e) => {on_click(e, operation)}}
                             on:mousedown={mousedown}>
                         {#if operation.icon}
-                            <div class="w-3.5 h-3.5 mr-1"><svelte:component this={operation.icon}/></div>
+                            <div class="w-5 h-5 mr-1"><svelte:component this={operation.icon}/></div>
                         {/if}
                         {#if operation.caption}
                             <span class="ml-1">{operation.caption}</span>
@@ -133,7 +181,7 @@ function isOperationActivated(operation) {
             {@const isActive=isOperationActivated(operation)}
                 <button type="button" 
                         class="py-2.5 px-4 
-                        text-xs font-thin text-stone-100 dark:text-stone-300 dark:hover:text-white 
+                        text-sm font-thin text-stone-100 dark:text-stone-300 dark:hover:text-white 
                         hover:bg-stone-700 dark:hover:bg-stone-800 active:bg-stone-300 dark:active:bg-stone-600
                         border-stone-200 focus:outline-none dark:border-stone-600
                         inline-flex items-center"
@@ -142,7 +190,7 @@ function isOperationActivated(operation) {
                         on:click={(e) => {on_click(e, operation)}}
                         on:mousedown={mousedown}>
                     {#if operation.icon}
-                        <div class="w-3.5 h-3.5 mr-1"><svelte:component this={operation.icon}/></div>
+                        <div class="w-5 h-5 mr-1"><svelte:component this={operation.icon}/></div>
                     {/if}
                     {#if operation.caption}
                         <span class="ml-1">{operation.caption}</span>
@@ -152,6 +200,7 @@ function isOperationActivated(operation) {
         {/each}
     </div>
 </section>
+{/if}
 
 <style>
     @media print

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@humandialog/forms.svelte",
-  "version": "1.3.17",
+  "version": "1.4.0",
   "description": "Basic Svelte UI components for Object Reef applications",
   "devDependencies": {
     "@playwright/test": "^1.28.1",
@@ -26,7 +26,7 @@
   },
   "type": "module",
   "dependencies": {
-    "@humandialog/auth.svelte": "^1.8.5",
+    "@humandialog/auth.svelte": "^1.8.8",
     "@tiptap/core": "^2.11.0",
     "@tiptap/extension-bullet-list": "^2.11.5",
     "@tiptap/extension-code-block": "^2.11.5",
@@ -43,6 +43,7 @@
     "@tiptap/suggestion": "^2.11.0",
     "flowbite-svelte": "^0.44.4",
     "pdfjs-dist": "^4.10.38",
+    "qs": "^6.14.0",
     "svelte-icons": "^2.1.0",
     "svelte-spa-router": "^4.0.1"
   },
@@ -125,6 +126,7 @@
     "./components/list/list.static.svelte": "./components/list/list.static.svelte",
     "./components/list/list.summary.svelte": "./components/list/list.summary.svelte",
     "./components/list/list.svelte": "./components/list/list.svelte",
+    "./components/list/list.tags.svelte": "./components/list/list.tags.svelte",
     "./components/list/list.title.svelte": "./components/list/list.title.svelte",
     "./components/list/List": "./components/list/List.js",
     "./components/menu": "./components/menu.js",

package/stores.d.ts

@@ -5,6 +5,7 @@ export function hasSelectedItem(): boolean;
 export function hasDataItem(): boolean;
 export function reloadMainContentPage(): void;
 export function reloadWholeApp(): void;
+export function reloadVisibleTags(): void;
 export function set_dark_mode_default(value: any): void;
 export function set_default_tools_visible(value: any, force: any): void;
 export function restore_defults(): void;
@@ -35,7 +36,9 @@ export const nav_titles: import("svelte/store").Writable<{}>;
 export const mainContentPageReloader: import("svelte/store").Writable<number>;
 export const wholeAppReloader: import("svelte/store").Writable<number>;
 export const alerts: import("svelte/store").Writable<never[]>;
+export const tagsReloader: import("svelte/store").Writable<number>;
 export function addAlert(txt: any): void;
+export function removeAlert(alert: any): void;
 export function onErrorShowAlert(txt: any): void;
 export const dark_mode_store: import("svelte/store").Writable<any>;
 export const main_sidebar_visible_store: import("svelte/store").Writable<any>;

package/stores.js

@@ -1,6 +1,6 @@
 
 import {writable, get} from 'svelte/store';
-import {SCREEN_SIZES} from './utils.js'
+import {SCREEN_SIZES, randomString} from './utils.js'
 
 export const data_tick_store = writable(1);
 export const contextItemsStore = writable({focused:'', data: null, sel: null})
@@ -14,6 +14,7 @@ export const nav_titles = writable({});
 export const mainContentPageReloader = writable(1);
 export const wholeAppReloader = writable(1)
 export const alerts = writable([])
+export const tagsReloader = writable(1)
 
 
 let toolsActionsOperationsStack = []
@@ -42,10 +43,26 @@ export function popToolsActionsOperations()
 
 export const addAlert = (txt) => {
     let al = get(alerts)
-    al = [txt, ...al];
+    const alert = {
+        msg: txt,
+        id: randomString(6),
+        timeoutId: setTimeout(() => removeAlert(alert), 10000)
+    }
+    al = [alert, ...al];
     alerts.set(al);
 }
 
+export const removeAlert = (alert) => {
+    let al = get(alerts)
+    const idx = al.findIndex((a) => a.id == alert.id)
+    if(idx >= 0)
+    {
+        clearTimeout(alert.timeoutId)
+        al.splice(idx, 1)
+        alerts.set(al)
+    }
+}
+
 export const onErrorShowAlert = addAlert;
 
 export function setNavigatorTitle(key, title)
@@ -81,6 +98,12 @@ export function reloadWholeApp()
     wholeAppReloader.set(val);
 }
 
+export function reloadVisibleTags()
+{
+    let val = get(tagsReloader);
+    val += 1;
+    tagsReloader.set(val);
+}
 
 let has_saved_dark_mode = false;
 function create_dark_mode_store()

package/tenant.members.svelte

@@ -4,7 +4,8 @@
                 FaPen,
                 FaInfoCircle,
                 FaUserSlash,
-                FaChevronDown} from 'svelte-icons/fa'
+                FaChevronDown,
+                FaInfo} from 'svelte-icons/fa'
     
     import Page from './page.svelte'
     import List from './components/list/list.svelte'
@@ -32,6 +33,7 @@
     export let nameAttrib = "Name";
     export let emailAttrib = "login";
     export let refAttrib = "$ref";
+    export let hrefAttrib = ''
     export let showFiles = false;
     //export let show_admin = true;
     export let showAccessRoles = false;
@@ -101,7 +103,10 @@
                         avatar_url : "",
                         invitation_not_accepted: false,
                         removed: false,
-                        membership_tag: ""
+                        membership_tag: "",
+                        ... hrefAttrib ? { 
+                            [hrefAttrib]: u[hrefAttrib] 
+                         } : { }
                     }
                 )
             })
@@ -110,7 +115,7 @@
         //fake_users = [];
         //add_fake_users(fake_users);
 
-        await fetch_details();
+      //  await fetch_details();
  
     }
 
@@ -136,6 +141,13 @@
 
     }
 
+    async function fetch_user_details(reef_user)
+    {
+        let details = await reef.get(`/sys/user_details?email=${reef_user[emailAttrib]}`)
+        set_user_info(reef_user, details);
+        list?.reload(reef_users);
+    }
+
     function set_user_info(user, info)
     {
         user.auth_group = info.auth_group ?? 0;
@@ -285,25 +297,26 @@
     }
 
     let page_operations={
-        opver: 1,
+        opver: 2,
         operations: [
             {
                 caption: 'View',
                 operations: [
                     {
                         icon: FaUserPlus,
-                        caption: '',
+                        caption: 'Add user',
                         action: (focused) => { create_new_user(); },
-                        fab: 'M10',
+                    //    fab: 'M10',
                         tbr: 'A'
                     },
-                    {
+                    // przenieść na stronie /profile
+                  /*  {
                         icon: FaUserSlash,
-                        caption: '',
+                        caption: 'Delete application account',
                         action: (f) => {askToDeleteApplicationAccount();},
-                        fab: 'S00',
+                        //fab: 'S00',
                         tbr: 'C'
-                    }
+                    }*/
                 ]
             }
         ]
@@ -317,18 +330,14 @@
                 action: (focused) =>  { list.edit(user, nameAttrib) }
             },
             {
-                caption: 'Users management',
+                caption: 'Users management (auth role)',
                 action: (focused) => { list.edit(user, 'Privileges') }
             }];
 
         if(showAccessRoles)
         {
             operations.push({
-                separator: true
-            });
-
-            operations.push({
-                caption: 'Access role',
+                caption: 'Access role (app role)',
                 action: (focused) => { list.edit(user, 'Access') }
             });
         }
@@ -336,7 +345,7 @@
         if(showFiles)
         {
             operations.push({
-                caption: 'External files',
+                caption: 'External files (files role)',
                 action: (focused) => { list.edit(user, 'Files') }
             });
         }
@@ -346,74 +355,62 @@
 
     let user_operations = (user) => { 
         
-        let operations = [];
+        let operations = [
+            {
+                caption: 'Fetch info',
+                icon: FaInfo,
+                action: (f) => fetch_user_details(user),
+                tbr: 'A'
+            }
+        ];
 
         if(user.removed)
         {
-            operations = [
+            operations = [ ...operations,
                 {
                     icon: FaUserPlus,
-                    caption: '',
+                    caption: 'Revert removing',
                     action: (f) => askToAddAgain(user),
-                    fab: 'M10',
-                    tbr: 'B'
+//                    fab: 'M10',
+                    tbr: 'A'
                 }
             ];
         }
         else
         {
             let edit_operations = get_edit_operations(user)
-            if(edit_operations.length == 1)
-            {
-                operations.push({
-                                    icon: FaPen,
-                                    caption: '',
-                                    action: edit_operations[0].action,
-                                    fab: 'M20',
-                                    tbr: 'B'
-                                });
-            }
-            else
-            {
-                operations.push({
-                                    icon: FaPen,
-                                    caption: '',
-                                    grid: edit_operations,
-                                    fab: 'M20',
-                                    tbr: 'B'
-                                });
-            }
-
+            
             operations.push({
-                                caption: '',
+                                icon: FaPen,
+                                caption: 'Change',
+                                menu: edit_operations,
+                                //fab: 'M20',
+                                tbr: 'A'
+                            });
+            
+            operations.push({
+                                caption: 'Remove user',
                                 icon: FaUserMinus,
                                 action: (focused) => askToRemove(user),
-                                fab: 'M30',
-                                tbr: 'B'
+                             //   fab: 'M30',
+                                tbr: 'A'
                             });
         }
 
         
         return {
-            opver: 1,
+            opver: 2,
             operations: [
                 {
                     caption: 'User',
+                 //   tbr: 'B',
                     operations: operations
                 }
             ]
         }
     }
 
-    let user_context_menu = (user) => {
-        if(user.removed)
-            return [];
-
-        let edit_operations = get_edit_operations(user);
-        return {
-            grid: edit_operations
-        }
-    }
+    
 
     let data_item = 
     { 
@@ -695,7 +692,13 @@
         create_new_user();
     }
 
-   
+   function getHRefFunc()
+   {
+        if(!hrefAttrib)
+            return undefined
+        else
+            return (user) => { return user[hrefAttrib]} 
+   }
     
 </script>
 
@@ -713,9 +716,8 @@
     <List       objects={reef_users} 
                 title='Members' 
                 toolbarOperations={user_operations} 
-                contextMenu={user_context_menu}
                 bind:this={list}>
-            <ListTitle a={nameAttrib} onChange={on_name_changed}/>
+            <ListTitle a={nameAttrib} onChange={on_name_changed} hrefFunc={getHRefFunc()}/>
             <ListSummary a={emailAttrib} readonly/>
 
             <ListStaticProperty name="Membership" a="membership_tag"/>

package/tenant.members.svelte.d.ts

@@ -6,6 +6,7 @@ export default class Tenant extends SvelteComponentTyped<{
     nameAttrib?: string | undefined;
     emailAttrib?: string | undefined;
     refAttrib?: string | undefined;
+    hrefAttrib?: string | undefined;
     showFiles?: boolean | undefined;
     showAccessRoles?: boolean | undefined;
 }, {
@@ -22,6 +23,7 @@ declare const __propDef: {
         nameAttrib?: string | undefined;
         emailAttrib?: string | undefined;
         refAttrib?: string | undefined;
+        hrefAttrib?: string | undefined;
         showFiles?: boolean | undefined;
         showAccessRoles?: boolean | undefined;
     };