@humandialog/forms.svelte 1.2.5 → 1.3.1

package/tenant.members.svelte

@@ -68,10 +68,17 @@
     {
         if(showAccessRoles)
         {
-            let roles = await reef.get('/sys/list_access_roles')
+            let roles = await reef.get('/sys/list_access_roles?details')
             access_roles = [];
             if(roles)
-                roles.forEach( gname => access_roles.push({name: gname}));
+                roles.forEach( roleInfo => 
+                    access_roles.push(
+                        {
+                            name: roleInfo.name,
+                            flags: roleInfo.flags,
+                            id: roleInfo.id,
+                            summary: roleInfo.summary ? roleInfo.summary : roleInfo.name
+                        }));
         }
 
 
@@ -659,7 +666,7 @@
 
             {#if showAccessRoles}
                 <ListComboProperty name='Access' a='acc_role' onSelect={on_change_access_role}>
-                    <ComboSource objects={access_roles} name='name' key='name'/>
+                    <ComboSource objects={access_roles} name='summary' key='name'/>
                 </ListComboProperty>
             {/if}
 
@@ -810,7 +817,7 @@
 
                             let options = [];
                             access_roles.forEach(k => options.push({
-                                caption: k.name,
+                                caption: k.summary,
                                 action: (f) => { new_user.acc_role=k.name}
                             }));
 
@@ -818,7 +825,12 @@
                             let pt = new DOMPoint(rect.left, rect.bottom)
                             showMenu(pt, options);   
                         }}>
-                            {new_user.acc_role ? new_user.acc_role : '<none>'}
+                            {#if new_user.acc_role}
+                                {access_roles.find(r => r.name==new_user.acc_role).summary}
+                            {:else}
+                                {"<none>"}
+                            {/if}
+                           
                             <span class="w-3 h-3 inline-block text-stone-700 dark:text-stone-300 ml-2 mt-2 sm:mt-1">
                                 <FaChevronDown/>
                             </span>

package/updates.js

@@ -1,5 +1,6 @@
 import {writable} from 'svelte/store';
 import {reef} from '@humandialog/auth.svelte/dist/index'
+import {onErrorShowAlert} from './stores.js'
 
 
 const modified_item_store = writable(null);
@@ -121,19 +122,14 @@ update_request_ticket.subscribe(async (v) => {
             changes.push(value.item);
         });
 
-        try
-        {
-            //console.log('push: ', changes);
-            const res = await reef.post('/Push', { Items: changes });
+        
+        //console.log('push: ', changes);
+        const res = await reef.post('/Push', { Items: changes }, onErrorShowAlert);
 
-            if(res)
-            {
-                modified_items_map.clear();
-            }
-        }
-        catch(err)
-        {
-            console.error(err);
-        }
+        //if(res)
+        //{
+            modified_items_map.clear();
+        //}
+        
     }
 })

package/utils.d.ts

@@ -2,6 +2,7 @@ export function isDeviceSmallerThan(br: any): boolean;
 export function selectItem(itm: any): void;
 export function activateItem(context_level: any, itm: any, operations?: null): void;
 export function clearActiveItem(context_level: any): void;
+export function refreshToolbarOperations(): void;
 export function isSelected(itm: any): boolean;
 export function isActive(context_level: any, itm: any): boolean;
 export function getActive(context_level: any): any;
@@ -25,6 +26,8 @@ export function getLast(array: any): any;
 export function removeAt(array: any, index: any): any;
 export function remove(array: any, element: any): any;
 export function swapElements(array: any, e1: any, e2: any): any;
+export function resizeImage(file: any, maxWidth?: number, maxHeight?: number, contentType?: string, quality?: number): Promise<any>;
+export function isOnScreenKeyboardVisible(): boolean;
 export namespace icons {
     const symbols: null;
 }
@@ -35,3 +38,7 @@ export namespace SCREEN_SIZES {
     const xl: number;
 }
 export let currentEditable: null;
+export namespace UI {
+    const operations: null;
+    const fab: null;
+}

package/utils.js

@@ -1,6 +1,7 @@
 import { getContext, tick } from "svelte";
 import {get} from 'svelte/store'
-import { contextItemsStore, contextToolbarOperations, data_tick_store } from "./stores";
+import { contextItemsStore, contextToolbarOperations, pageToolbarOperations, data_tick_store } from "./stores";
+import { Img } from "flowbite-svelte";
 
 export let icons = {symbols :null}
 
@@ -76,6 +77,22 @@ export function clearActiveItem(context_level)
     contextToolbarOperations.set( [] )
 }
 
+export function refreshToolbarOperations()
+{
+    const contextOperations = get(contextToolbarOperations)
+    if(contextOperations && contextOperations.length)
+    {
+        contextToolbarOperations.set([...contextOperations])
+    
+    }
+    else
+    {
+        const pageOperations = get(pageToolbarOperations);
+        if(pageOperations && pageOperations.length)
+            pageToolbarOperations.set([...pageOperations])
+    }
+}
+
 export function isSelected(itm)
 {
     let data_context = get(contextItemsStore);
@@ -162,7 +179,7 @@ export function editable(node, params)
         case 'Enter':
             e.stopPropagation();
             e.preventDefault();
-
+            
             if(e.shiftKey && onSoftEnter)
                 await finish_editing({ softEnter: true});
             else
@@ -211,11 +228,14 @@ export function editable(node, params)
             if(active)
             {
                 if(has_changed)
+                {
+                    has_changed = false;
                     await action(node.textContent)
+                }
+                    
             }
             else
                 await action(node.textContent)
-            
         }
 
         const finish_event  = new CustomEvent("finish", {
@@ -522,3 +542,84 @@ export function swapElements(array, e1, e2)
 
     return array;
 }
+
+
+export async function resizeImage(file, maxWidth=1024, maxHeight=1024, contentType='', quality=0.95)
+{
+    if(!contentType)
+        contentType = file.type
+
+    if(!contentType)
+        contentType = 'image/png'
+
+    const calculateSize = (img, maxWidth, maxHeight) => {
+        let w = img.width,
+            h = img.height;
+        if (w > h) {
+          if (w > maxWidth) {
+            h = Math.round((h * maxWidth) / w);
+            w = maxWidth;
+          }
+        } else {
+          if (h > maxHeight) {
+            w = Math.round((w * maxHeight) / h);
+            h = maxHeight;
+          }
+        }
+        return [w, h];
+      };
+
+    return new Promise((resolve) => {
+
+        const img = new Image();
+        img.onerror = function () {
+            URL.revokeObjectURL(this.src)
+        }
+
+        img.onload = function () {
+            URL.revokeObjectURL(this.src)
+            const [newWidth, newHeight] = calculateSize(img, maxWidth, maxHeight);
+
+            console.log('resizeImage', img.width, '=>', newWidth, img.height, '=>', newHeight, contentType, quality)
+            
+            const canvas = document.createElement("canvas");
+            canvas.width = newWidth;
+            canvas.height = newHeight;
+            const ctx = canvas.getContext("2d");
+            ctx.drawImage(img, 0, 0, newWidth, newHeight);
+    
+            canvas.toBlob((blob) => {
+                resolve(blob);
+              },
+    
+              contentType,
+              quality)
+       
+        }
+
+        img.src = URL.createObjectURL(file);
+
+    }) 
+}
+
+export function isOnScreenKeyboardVisible()
+{
+    if(!isDeviceSmallerThan('sm'))       // are we on mobile?
+        return false;
+
+    const sel = window.getSelection();
+    // if we have active selections then it's very possible we have onscreen keyboard visible, se we need to shrink window.innerHeight 
+    if(sel && sel.rangeCount>0 && sel.focusNode && sel.focusNode.nodeType==sel.focusNode.TEXT_NODE)
+    {
+        const el = sel.focusNode.parentElement;
+        if(el && (el.isContentEditable || el.contentEditable == 'true' || el.tagName == 'INPUT'))
+            return true;
+    }
+
+    return false;
+}
+
+export const UI = {
+    operations: null,
+    fab: null
+}