@humandialog/forms.svelte 0.6.1 → 1.1.0

package/desk.svelte

@@ -14,7 +14,8 @@
             data_tick_store,
             set_default_tools_visible,
             set_dark_mode_default,
-            sidebar_left_pos } from './stores.js'
+            sidebar_left_pos,
+            wholeAppReloader } from './stores.js'
     
     import { AuthorizedView} from '@humandialog/auth.svelte'
     import { handleSelect, isDeviceSmallerThan } from './utils'
@@ -81,6 +82,8 @@
     else
         set_default_tools_visible(false)
 
+    //let autoRedirectToSignIn = layout.autoRedirectToSignIn ?? true
+
     $: { visible_sidebar = $main_sidebar_visible_store
         
         if(visible_sidebar == "*")
@@ -158,126 +161,130 @@
 
 <svelte:window bind:innerWidth bind:outerWidth bind:innerHeight bind:outerHeight />
 
-<AuthorizedView>
-    <!-- svelte-ignore a11y-click-events-have-key-events -->
-    <div    id="__hd_svelte_layout_root" class="{$dark_mode_store}"
-            on:click={handleSelect} 
-            on:contextmenu={handleSelect}>
-
-        <div class="bg-white dark:bg-stone-900 dark:text-white  overflow-x-clip overflow-y-clip  h-screen">    
-            <!--###########################################################-->
-            <!--##  HORIZONTAL TOOLBAR (FOR PHONES)  ######################-->
-            <!--###########################################################-->
-            <header class="fixed sm:hidden w-screen top-0 h-[50px] sm:h-[40px] z-20 shadow  shadow-stone-900/5 dark:shadow-none     overflow-auto" >
-                    <div class=" flex flex-row justify-between  h-full  bg-stone-950   text-stone-100 ">
-                        <HorizontalToolbar appConfig={layout}/>
-                    <div>
-            </header>        
-
-
-            <!--HorizontalToolbar /-->
-            <!--#######################################################-->
-            <!--##  VERTICAL TOOLBAR                 ##################-->
-            <!--#######################################################-->
-            <div  class="hidden sm:block fixed left-0 top-0 w-[50px] sm:w-[40px] h-screen z-20 inset-0   overflow-hidden">
-                <div class="sticky top-0 flex h-full w-10 bg-stone-800 dark:bg-stone-950 flex-col items-center text-stone-100 shadow">
-                    <VerticalToolbar appConfig={layout}/>
-                </div>    
-            </div>
-
-            <!--VerticalToolbar /-->
-
-            <!--#######################################################-->
-            <!--##  MAIN SIDE BAR                    ##################-->
-            <!--#######################################################-->
-            {#if true}
-            {@const sidebar_left = $sidebar_left_pos==0 ? "left-0" : "left-[50px]"}
-            {@const sidebar_small_width = $sidebar_left_pos==0 ? "w-full" : "w-[calc(100vw-50px)]"}
-
-            <div  class="{main_side_panel_visibility}  
-                            {sidebar_left}  sm:left-[40px]
-                            top-[50px]  sm:top-0 
-                            h-[calc(100vh-50px)] sm:h-full {lg_main_sidebar_height}
-                            {sidebar_small_width} sm:w-[320px] 
-                            z-20 overflow-x-hidden">
-
-                <div class=" bg-stone-50 w-full h-full dark:bg-stone-800 overflow-y-auto py-0 px-0">
-                    <Configurable config={layout.sidebar[visible_sidebar]}>
-                        <div slot='alt'></div>
-                    </Configurable>
-                </div>
-            </div>    
-            {/if}
-
-            <!-- ! below overflow-x-clip prevents horizontal scrollbar when vertical scrollbar is visible. Default
-                behaviour is the content expand vertically, and only vertical scrollbar can be visible.
-                When content on the main page needs to be expanded horizontally (like kanban chart for example) then
-                that component should define overflow-x-* itself -->
-            <section on:click|capture={auto_hide_sidebar} class="">
+<!--AuthorizedView {autoRedirectToSignIn}-->
+    
+    {#key $wholeAppReloader}
+    
+        <!-- svelte-ignore a11y-click-events-have-key-events -->
+        <div    id="__hd_svelte_layout_root" class="{$dark_mode_store}"
+                on:click={handleSelect} 
+                on:contextmenu={handleSelect}>
 
+            <div class="bg-white dark:bg-stone-900 dark:text-white  overflow-x-clip overflow-y-clip  h-screen">    
                 <!--###########################################################-->
-                <!--##  HORIZONTAL TOOLS                 ######################-->
+                <!--##  HORIZONTAL TOOLBAR (FOR PHONES)  ######################-->
                 <!--###########################################################-->
+                <header class="fixed sm:hidden w-screen top-0 h-[50px] sm:h-[40px] z-20 shadow  shadow-stone-900/5 dark:shadow-none     overflow-auto" >
+                        <div class=" flex flex-row justify-between  h-full  bg-stone-950   text-stone-100 ">
+                            <HorizontalToolbar appConfig={layout}/>
+                        <div>
+                </header>        
 
-                <div  class="   {tools_visibility} 
-                                w-screen sm:w-[calc(100vw-40px)] 
-                                h-[40px] 
-                                left-0 sm:left-[40px]     
-                                top-[40px] sm:top-0
-                                {lg_content_area_horizontal_dim}
-                                z-10 overflow-hidden " >
 
-                    <Operations/>
+                <!--HorizontalToolbar /-->
+                <!--#######################################################-->
+                <!--##  VERTICAL TOOLBAR                 ##################-->
+                <!--#######################################################-->
+                <div  class="hidden sm:block fixed left-0 top-0 w-[50px] sm:w-[40px] h-screen z-20 inset-0   overflow-hidden">
+                    <div class="sticky top-0 flex h-full w-10 bg-stone-800 dark:bg-stone-950 flex-col items-center text-stone-100 shadow">
+                        <VerticalToolbar appConfig={layout}/>
+                    </div>    
                 </div>
 
-                <div class="{fab_visibility} right-3 {fab_bottom} mb-1 cursor-pointer z-10">
-                    <Fab/>
-                </div>
+                <!--VerticalToolbar /-->
 
                 <!--#######################################################-->
-                <!--##  CONTENT                          ##################-->
+                <!--##  MAIN SIDE BAR                    ##################-->
                 <!--#######################################################-->
-                <!-- fixed => relative, content-height => min content height -- -->
-                <div    id="__hd_svelte_main_content_container"
-                        class="relative left-0  w-screen  
-                                sm:left-[40px]  sm:w-[calc(100vw-40px)]    
-                                {content_top}
-                                {content_height}
-                                {lg_content_area_horizontal_dim}
-                                z-0 overflow-x-hidden overflow-y-auto" 
-                                >
-                        <Configurable config={layout.mainContent} min_h_class="min-h-full">
+                {#if true}
+                {@const sidebar_left = $sidebar_left_pos==0 ? "left-0" : "left-[50px]"}
+                {@const sidebar_small_width = $sidebar_left_pos==0 ? "w-full" : "w-[calc(100vw-50px)]"}
+
+                <div  class="{main_side_panel_visibility}  
+                                {sidebar_left}  sm:left-[40px]
+                                top-[50px]  sm:top-0 
+                                h-[calc(100vh-50px)] sm:h-full {lg_main_sidebar_height}
+                                {sidebar_small_width} sm:w-[320px] 
+                                z-20 overflow-x-hidden">
+
+                    <div class=" bg-stone-50 w-full h-full dark:bg-stone-800 overflow-y-auto py-0 px-0">
+                        <Configurable config={layout.sidebar[visible_sidebar]}>
                             <div slot='alt'></div>
                         </Configurable>
+                    </div>
                 </div>    
+                {/if}
+
+                <!-- ! below overflow-x-clip prevents horizontal scrollbar when vertical scrollbar is visible. Default
+                    behaviour is the content expand vertically, and only vertical scrollbar can be visible.
+                    When content on the main page needs to be expanded horizontally (like kanban chart for example) then
+                    that component should define overflow-x-* itself -->
+                <section on:click|capture={auto_hide_sidebar} class="">
+
+                    <!--###########################################################-->
+                    <!--##  HORIZONTAL TOOLS                 ######################-->
+                    <!--###########################################################-->
+
+                    <div  class="   {tools_visibility} 
+                                    w-screen sm:w-[calc(100vw-40px)] 
+                                    h-[40px] 
+                                    left-0 sm:left-[40px]     
+                                    top-[40px] sm:top-0
+                                    {lg_content_area_horizontal_dim}
+                                    z-10 overflow-hidden " >
+
+                        <Operations/>
+                    </div>
+
+                    <div class="{fab_visibility} right-3 {fab_bottom} mb-1 cursor-pointer z-10">
+                        <Fab/>
+                    </div>
+
+                    <!--#######################################################-->
+                    <!--##  CONTENT                          ##################-->
+                    <!--#######################################################-->
+                    <!-- fixed => relative, content-height => min content height -- -->
+                    <div    id="__hd_svelte_main_content_container"
+                            class="relative left-0  w-screen  
+                                    sm:left-[40px]  sm:w-[calc(100vw-40px)]    
+                                    {content_top}
+                                    {content_height}
+                                    {lg_content_area_horizontal_dim}
+                                    z-0 overflow-x-hidden overflow-y-auto" 
+                                    >
+                            <Configurable config={layout.mainContent} min_h_class="min-h-full">
+                                <div slot='alt'></div>
+                            </Configurable>
+                    </div>    
+
+
+
+                    <!--###########################################################-->
+                    <!--##  BOTTOM SIDEBAR          ###############################-->
+                    <!--###########################################################-->
+
+                    <div  class="{bottom_bar_visibility} left-0 bottom-0 w-screen h-[240px] z-20 overflow-y-hidden overflow-x-auto 
+                                sm:left-[40px] sm:w-[100vw-40px] " >
+                            <Configurable config={layout.selectionDetails} >
+                                <div slot="alt"></div>
+                            </Configurable>
+                        
+                    </div>    
+
+                    <!-- #########################################################-->
+                    <!-- ## MODAL DIALOG #########################################-->
+                    <!-- #########################################################-->
+                    <div id="__hd_svelte_modal_root" class="z-30">
+                        <!-- after <Modal/> component is shown it's rettached to above div
+                            see: modal.svelte afterUpdate -->
+                    </div>
+
+                </section>
 
-
-
-                <!--###########################################################-->
-                <!--##  BOTTOM SIDEBAR          ###############################-->
-                <!--###########################################################-->
-
-                <div  class="{bottom_bar_visibility} left-0 bottom-0 w-screen h-[240px] z-20 overflow-y-hidden overflow-x-auto 
-                            sm:left-[40px] sm:w-[100vw-40px] " >
-                        <Configurable config={layout.selectionDetails} >
-                            <div slot="alt"></div>
-                        </Configurable>
-                    
-                </div>    
-
-                <!-- #########################################################-->
-                <!-- ## MODAL DIALOG #########################################-->
-                <!-- #########################################################-->
-                <div id="__hd_svelte_modal_root" class="z-30">
-                    <!-- after <Modal/> component is shown it's rettached to above div
-                        see: modal.svelte afterUpdate -->
-                </div>
-
-            </section>
-
+            </div>
         </div>
-    </div>
-</AuthorizedView>
+    {/key}
+<!--/AuthorizedView-->
 
 <style>#__hd_svelte_layout_root {
   /* width */

package/horizontal.toolbar.svelte

@@ -1,15 +1,6 @@
 <script>
-    import FaMoon from 'svelte-icons/fa/FaMoon.svelte'
-    import FaSun from 'svelte-icons/fa/FaSun.svelte'
-    import FaEllipsisH from 'svelte-icons/fa/FaEllipsisH.svelte'
-    import FaCog from 'svelte-icons/fa/FaCog.svelte'
-    import FaTools from 'svelte-icons/fa/FaTools.svelte'
-    import GoPrimitiveDot from 'svelte-icons/go/GoPrimitiveDot.svelte'
-    import FaSignInAlt from 'svelte-icons/fa/FaSignInAlt.svelte'
-    import FaSignOutAlt from 'svelte-icons/fa/FaSignOutAlt.svelte'
-    import FaBars from 'svelte-icons/fa/FaBars.svelte'
-    import FaToggleOn from 'svelte-icons/fa/FaToggleOn.svelte'
-    import FaToggleOff from 'svelte-icons/fa/FaToggleOff.svelte'
+    import {FaUsers, FaCog, FaSignInAlt, FaSignOutAlt, FaBars, FaToggleOn, FaToggleOff} from 'svelte-icons/fa/'
+    //import GoPrimitiveDot from 'svelte-icons/go/GoPrimitiveDot.svelte'
     import {showMenu} from './components/menu'
     import {push} from 'svelte-spa-router'
     import {contextItemsStore, context_info_store, contextToolbarOperations, data_tick_store} from './stores.js'
@@ -25,12 +16,9 @@
         previously_visible_sidebar,
         main_sidebar_visible_store,
         sidebar_left_pos,
-
 		page_title,
-
-		nav_titles
-
-
+		nav_titles,
+        reloadWholeApp
     } from "./stores.js";
     import Icon from './components/icon.svelte';
     import {session, signInHRef, signOutHRef} from '@humandialog/auth.svelte'
@@ -50,6 +38,7 @@
     let is_logged_in = false;
     let sign_in_href = '';
     let sign_out_href = '';
+    let user_is_in_multiple_groups = false;
 
     let tabs = [];
     let icon;
@@ -64,6 +53,7 @@
         show_sign_in_out_icons = config.signin ? true : false;
         sign_in_href = $signInHRef;
         sign_out_href = $signOutHRef;
+        user_is_in_multiple_groups = $session.tenants.length > 1
 
         tabs = Object.keys(appConfig.sidebar);
         if(tabs.length > 1)
@@ -213,6 +203,36 @@
         showMenu(pt, options);    
     }
 
+    function show_groups(e)
+    {
+        let owner = e.target;
+        while(owner && owner.tagName != 'BUTTON')
+            owner = owner.parentElement
+
+        if(!owner)
+            return;
+
+        let rect = owner.getBoundingClientRect();
+        let options = [];
+
+        $session.tenants.forEach(tInfo =>
+            options.push({
+                caption: tInfo.name,
+                icon: FaUsers,
+                disabled: tInfo.id == $session.tid,
+                action: (f) => {
+                    $session.setCurrentTenantAPI(tInfo.url, tInfo.id)
+                    push('/')
+                    reloadWholeApp();
+                }
+            })
+        )
+
+        
+        let pt = new DOMPoint(rect.left, rect.bottom)
+        showMenu(pt, options);    
+    }
+
     function clearSelection()
     {
         if (!clearsContext) return;
@@ -244,7 +264,14 @@
         <div class="block sm:hidden mt-4 sm:mt-3 uppercase text-sm text-center">{@html title}</div>
     </div>
 
-    <div class="flex-none ml-auto flex h-12 sm:h-10">        
+    <div class="flex-none ml-auto flex h-12 sm:h-10">   
+        {#if user_is_in_multiple_groups}
+            <button class="h-full w-12 sm:w-10 px-0 flex justify-center items-center   text-stone-300 hover:text-stone-100"
+                    on:click|stopPropagation={show_groups}>
+                <Icon class="w-5 sm:w-4 h-5 sm:h-4" component={FaUsers} />
+            </button>
+        {/if}
+
         <button
             class="h-full w-12 sm:w-10 px-0 flex justify-center items-center   text-stone-300 hover:text-stone-100"
             on:click|stopPropagation={show_options}>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@humandialog/forms.svelte",
-  "version": "0.6.1",
+  "version": "1.1.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.5.5",
+    "@humandialog/auth.svelte": "^1.8.0",
     "flowbite-svelte": "^0.44.4",
     "svelte-icons": "^2.1.0",
     "svelte-spa-router": "^4.0.1"

package/page.svelte.d.ts

@@ -4,15 +4,15 @@
 export default class Page extends SvelteComponentTyped<{
     [x: string]: any;
     self?: null | undefined;
-    clearsContext?: string | undefined;
+    title?: string | undefined;
     context?: string | undefined;
+    typename?: string | undefined;
     c?: string | undefined;
+    clearsContext?: string | undefined;
     cl?: string | undefined;
-    typename?: string | undefined;
     focused_only?: boolean | undefined;
     inContext?: string | undefined;
     toolbarOperations?: any;
-    title?: string | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -27,15 +27,15 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         self?: null | undefined;
-        clearsContext?: string | undefined;
+        title?: string | undefined;
         context?: string | undefined;
+        typename?: string | undefined;
         c?: string | undefined;
+        clearsContext?: string | undefined;
         cl?: string | undefined;
-        typename?: string | undefined;
         focused_only?: boolean | undefined;
         inContext?: string | undefined;
         toolbarOperations?: any;
-        title?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/stores.d.ts

@@ -2,6 +2,7 @@ export function setNavigatorTitle(key: any, title: any): void;
 export function hasSelectedItem(): boolean;
 export function hasDataItem(): boolean;
 export function reloadMainContentPage(): void;
+export function reloadWholeApp(): void;
 export function set_dark_mode_default(value: any): void;
 export function set_default_tools_visible(value: any): void;
 export function restore_defults(): void;
@@ -29,6 +30,7 @@ export const pageToolbarOperations: import("svelte/store").Writable<never[]>;
 export const page_title: import("svelte/store").Writable<string>;
 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 dark_mode_store: import("svelte/store").Writable<any>;
 export const main_sidebar_visible_store: import("svelte/store").Writable<any>;
 export let previously_visible_sidebar: string;

package/stores.js

@@ -11,6 +11,7 @@ export const pageToolbarOperations = writable([]);
 export const page_title = writable('');
 export const nav_titles = writable({});
 export const mainContentPageReloader = writable(1);
+export const wholeAppReloader = writable(1)
 
 export function setNavigatorTitle(key, title)
 {
@@ -38,6 +39,13 @@ export function reloadMainContentPage()
     mainContentPageReloader.set(val);
 }
 
+export function reloadWholeApp()
+{
+    let val = get(wholeAppReloader);
+    val += 1;
+    wholeAppReloader.set(val);
+}
+
 
 let has_saved_dark_mode = false;
 function create_dark_mode_store()