@humandialog/forms.svelte 1.7.11 → 1.7.13

package/components/list/internal/list.element.svelte

@@ -348,7 +348,7 @@ async function onDownloadFile(e) {
                                 </a>
                             {/if}
                         </p>
-                    {:else}
+                    {:else if definition.onOpen}
                         <p  class=" text-base font-semibold 
                                     
                                     whitespace-nowrap overflow-clip w-full sm:flex-none sm:{name_w}"
@@ -372,6 +372,19 @@ async function onDownloadFile(e) {
                             {/if}
                             -->
                         </p>
+                    {:else}
+                        <p  class=" text-base font-semibold 
+                                    whitespace-nowrap overflow-clip w-full sm:flex-none sm:{name_w}"
+                            id="__hd_list_ctrl_{getItemKey(item)}_Title"
+                            use:editable={{
+                                action: (text) => {change_name(text)},
+                                active: true,
+                                readonly: definition.title_readonly,
+                            }}> 
+                                <span>
+                                    {element_title}
+                                </span>
+                        </p>
                     {/if}
                 {/key}
             {:else}

package/components/list/list.svelte

@@ -1,6 +1,6 @@
 <script>import { setContext, getContext, afterUpdate, tick, onMount } from "svelte";
 import { data_tick_store, contextItemsStore, contextTypesStore } from "../../stores";
-import { activateItem, getActive, clearActiveItem, parseWidthDirective, getPrev, getNext, swapElements, getLast, insertAfter, getActiveCount, addActiveItem } from "../../utils";
+import { activateItem, getActive, clearActiveItem, parseWidthDirective, getPrev, getNext, swapElements, getLast, insertAfter, getActiveCount, addActiveItem, getFirst, insertAt, remove as removeFrom } from "../../utils";
 import Icon from "../icon.svelte";
 import { FaRegCircle, FaRegCheckCircle } from "svelte-icons/fa/";
 import { rList_definition } from "./List";
@@ -139,7 +139,8 @@ export function reload(data, selectElement = KEEP_SELECTION) {
         activate_after_dom_update = itemToActivate;
       }
     }
-  }
+  } else
+    clearActiveItem(selectionKey);
 }
 export async function moveUp(element) {
   if (!orderAttrib)
@@ -169,6 +170,30 @@ export async function moveDown(element) {
   informModification(next, orderAttrib);
   pushChanges();
 }
+export async function moveTop(element) {
+  if (!orderAttrib)
+    return;
+  let current = getFirst(items);
+  if (current == element)
+    return;
+  const firstOrder = current[orderAttrib];
+  while (current != element) {
+    const next = getNext(items, current);
+    const nextOrder = next[orderAttrib];
+    current[orderAttrib] = nextOrder;
+    informModification(current, orderAttrib);
+    current = next;
+  }
+  element[orderAttrib] = firstOrder;
+  informModification(element, orderAttrib);
+  items = removeFrom(items, element);
+  items = insertAt(items, 0, element);
+  await tick();
+  scrollToSelectedElement();
+  pushChanges();
+}
+export async function moveBottom(element) {
+}
 let last_activated_element = null;
 export async function addRowAfter(after = null) {
   if (!definition.can_insert)

package/components/list/list.svelte.d.ts

@@ -26,6 +26,8 @@ declare const __propDef: {
         reload?: ((data: object | object[], selectElement?: number) => void) | undefined;
         moveUp?: ((element: object) => Promise<void>) | undefined;
         moveDown?: ((element: object) => Promise<void>) | undefined;
+        moveTop?: ((element: object) => Promise<void>) | undefined;
+        moveBottom?: ((element: object) => Promise<void>) | undefined;
         addRowAfter?: ((after?: object | null) => Promise<void>) | undefined;
         remove?: ((element: object) => void) | undefined;
         edit?: ((element: object, property_name: string) => void) | undefined;
@@ -59,6 +61,8 @@ export default class List extends SvelteComponentTyped<ListProps, ListEvents, Li
     get reload(): (data: object | object[], selectElement?: number) => void;
     get moveUp(): (element: object) => Promise<void>;
     get moveDown(): (element: object) => Promise<void>;
+    get moveTop(): (element: object) => Promise<void>;
+    get moveBottom(): (element: object) => Promise<void>;
     get addRowAfter(): (after?: object | null) => Promise<void>;
     get remove(): (element: object) => void;
     get edit(): (element: object, property_name: string) => void;

package/dialog.svelte

@@ -0,0 +1,49 @@
+<script>import { afterUpdate, onMount, tick } from "svelte";
+import Icon from "./components/icon.svelte";
+import { pushToolsActionsOperations, popToolsActionsOperations, fabHiddenDueToPopup } from "./stores.js";
+import { isDeviceSmallerThan } from "./utils";
+import { FaTimes } from "svelte-icons/fa";
+import { i18n } from "./i18n.js";
+export let open = false;
+export function show(on_close_callback = void 0) {
+  open = true;
+  close_callback = on_close_callback;
+  if (isDeviceSmallerThan("sm")) {
+    $fabHiddenDueToPopup = true;
+  }
+}
+export function hide() {
+  if (!open)
+    return;
+  open = false;
+  $fabHiddenDueToPopup = false;
+}
+let root;
+afterUpdate(
+  async () => {
+    if (!!root) {
+      let modal_root = document.getElementById("__hd_svelte_modal_root");
+      if (!!modal_root && root.parentElement != modal_root) {
+        await tick();
+        modal_root.appendChild(root);
+      }
+    }
+  }
+);
+let close_callback = void 0;
+</script>
+
+{#if open}
+<div class="relative z-30" aria-labelledby="modal-title" role="dialog" aria-modal="true" bind:this={root}>
+    <div class="fixed w-screen h-screen inset-0 bg-stone-500 dark:bg-stone-800 bg-opacity-75 dark:bg-opacity-75 transition-opacity"></div>
+  
+    <div class="fixed z-30 inset-0 w-screen overflow-y-auto">
+      <div class="flex min-h-full items-end justify-center p-1 text-center sm:items-center sm:p-0">
+        <div class=" p-2 bg-stone-100 dark:bg-stone-800 rounded-lg shadow-md shadow-stone-500 dark:shadow-black text-left shadow-xl transition-all  
+                    sm:my-8 w-full sm:max-w-lg"> <!-- transform overflow-hidden -->
+            <slot/>
+        </div>
+      </div>
+    </div>
+  </div>
+  {/if}

package/dialog.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        open?: boolean | undefined;
+        show?: ((on_close_callback?: Function | undefined) => void) | undefined;
+        hide?: (() => void) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type DialogProps = typeof __propDef.props;
+export type DialogEvents = typeof __propDef.events;
+export type DialogSlots = typeof __propDef.slots;
+export default class Dialog extends SvelteComponentTyped<DialogProps, DialogEvents, DialogSlots> {
+    get show(): (on_close_callback?: Function | undefined) => void;
+    get hide(): () => void;
+}
+export {};

package/index.d.ts

@@ -42,6 +42,7 @@ export { default as ListComboProperty } from './components/list/list.combo.svelt
 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 Dialog } from './dialog.svelte';
 export { default as MembersPage } from './tenant.members.svelte';
 export { default as Console } from './console.svelte';
 export { default as Tag } from './components/tag.svelte';

package/index.js

@@ -48,6 +48,7 @@ export { default as ListComboProperty } from './components/list/list.combo.svelt
 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 Dialog } from './dialog.svelte';
 export { default as MembersPage } from './tenant.members.svelte';
 export { default as Console } from './console.svelte';
 export { default as Tag } from './components/tag.svelte';

package/operations.svelte

@@ -110,8 +110,11 @@ function update(...args) {
             ...op,
             group: group.caption
           };
-          if (op.hideToolbarCaption)
+          if (op.hideToolbarCaption) {
+            if (!tbrOperation.tooltip)
+              tbrOperation.tooltip = tbrOperation.caption;
             tbrOperation.caption = "";
+          }
           const shouldAddSeparator = (list, groupName) => {
             if (!groupName)
               return false;
@@ -197,6 +200,14 @@ function isOperationDisabled(operation) {
   else
     return operation.disabled ?? false;
 }
+function operationTooltip(operation) {
+  if (!operation)
+    return "";
+  else if (operation.tooltip)
+    return operation.tooltip;
+  else
+    return "";
+}
 </script>
 
 {#if hasOperations}
@@ -221,6 +232,7 @@ function isOperationDisabled(operation) {
                                 inline-flex items-center"
                                 class:bg-stone-700={isActive}
                                 class:dark:bg-stone-800={isActive}
+                                title={operationTooltip(operation)}
                                 on:mousedown={(e) => mousedown(e, operation)}
                                 on:click={(e) => {on_click(e, operation, isDisabled)}}>
                             {#if operation.icon}
@@ -251,6 +263,7 @@ function isOperationDisabled(operation) {
                             class:bg-stone-200={isActive}
                             class:dark:bg-stone-800={isActive}
                             disabled={isDisabled}
+                            title={operationTooltip(operation)}
                             on:mousedown={(e) => mousedown(e, operation)}
                             on:click={(e) => {on_click(e, operation, isDisabled)}}>
                         {#if operation.icon}
@@ -293,6 +306,7 @@ function isOperationDisabled(operation) {
                         class:bg-stone-200={isActive}
                         class:dark:bg-stone-800={isActive}
                         disabled={isDisabled}
+                        title={operationTooltip(operation)}
                         on:mousedown={(e) => mousedown(e, operation)}
                         on:click={(e) => {on_click(e, operation, isDisabled)}}>
                     {#if operation.icon}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@humandialog/forms.svelte",
-  "version": "1.7.11",
+  "version": "1.7.13",
   "description": "Basic Svelte UI components for Object Reef applications",
   "devDependencies": {
     "@playwright/test": "^1.28.1",
@@ -156,6 +156,7 @@
     "./components/tile.title.svelte": "./components/tile.title.svelte",
     "./console.svelte": "./console.svelte",
     "./desk.svelte": "./desk.svelte",
+    "./dialog.svelte": "./dialog.svelte",
     "./form.box.svelte": "./form.box.svelte",
     "./horizontal.toolbar.svelte": "./horizontal.toolbar.svelte",
     "./i18n-preprocess": "./i18n-preprocess.js",

package/tenant.members.svelte

@@ -5,7 +5,7 @@
                 FaInfoCircle,
                 FaUserSlash,
                 FaChevronDown,
-                FaInfo} from 'svelte-icons/fa'
+                FaInfo, FaLink} from 'svelte-icons/fa'
     
     import Page from './page.svelte'
     import List from './components/list/list.svelte'
@@ -189,7 +189,8 @@
         auth_group: 0,
         files_group: 0,
         acc_role: '',
-        silently: false
+        silently: false,
+        accepted: false
     }
 
     let name_input;
@@ -367,7 +368,8 @@
                 caption: i18n({en: 'Fetch info', es: 'Obtener información', pl: 'Pobierz informacje'}),
                 icon: FaInfo,
                 action: (f) => fetch_user_details(user),
-                tbr: 'A'
+                tbr: 'A',
+                fab: 'S00'
             }
         ];
 
@@ -375,11 +377,11 @@
         {
             operations = [ ...operations,
                 {
-                    icon: FaUserPlus,
+                    //icon: FaUserPlus,
                     caption: i18n({en: 'Revert removing', es: 'Revertir eliminación', pl: 'Cofnij usunięcie'}),
                     action: (f) => askToAddAgain(user),
 //                    fab: 'M10',
-                    tbr: 'A'
+                   // tbr: 'A'
                 }
             ];
         }
@@ -391,16 +393,24 @@
                                 icon: FaPen,
                                 caption: i18n({en: 'Change', es: 'Cambiar', pl: 'Zmień'}),
                                 menu: edit_operations,
-                                //fab: 'M20',
+                                fab: 'M20',
                                 tbr: 'A'
                             });
             
             operations.push({
                                 caption: i18n({en: 'Remove user', es: 'Eliminar usuario', pl: 'Usuń użytkownika'}),
-                                icon: FaUserMinus,
+                            //    icon: FaUserMinus,
                                 action: (focused) => askToRemove(user),
                              //   fab: 'M30',
-                                tbr: 'A'
+                             //   tbr: 'A'
+                            });
+
+            operations.push({
+                                caption: i18n({en: 'Copy the invitation link', es: 'Copie el enlace de invitación', pl: 'Skopuj link zapraszający'}),
+                                //icon: FaLink,
+                                action: (focused) => regenerateAndCopyInvitationLink(user),
+                                //   fab: 'M30',
+                                //tbr: 'A'
                             });
         }
 
@@ -408,6 +418,7 @@
         return {
             opver: 2,
             fab: 'M00',
+            tbr: 'D',
             operations: [
                 {
                     caption: i18n({en: 'User', es: 'Usuario', pl: 'Użytkownik'}),
@@ -418,7 +429,37 @@
         }
     }
 
-    
+    async function regenerateAndCopyInvitationLink(user)
+    {
+        try {
+                let params = `username=${user[emailAttrib]}`
+                params += `&client_id=${$session.configuration.client_id}`
+                params += `&redirect_uri=${encodeURIComponent(window.location.origin+'/#/auth/cb')}`
+                params += `&state=${encodeURIComponent(window.location.origin+'/#/auth/signin')}`
+                params += `&tenant=${$session.tid}`
+                params += `&scope=${$session.appId}`
+
+                console.log(params)
+
+                const res = await reef.fetch(`/auth/regenerate_invitation_link?${params}`)
+
+                if(res.ok)
+                {
+                    const result = await res.json();
+                    console.log(result.invitation_link)
+                    navigator.clipboard.writeText(result.invitation_link)
+                }
+                else
+                {
+                    const err_msg = await res.text();
+                    onErrorShowAlert(err_msg);
+                }
+        }
+        catch (err)
+        {
+            onErrorShowAlert(err);
+        }
+    }
 
     let data_item = 
     { 
@@ -541,6 +582,7 @@
                                 state: `${window.location.origin}/#/auth/signin`,
                                 idempotency_token: inviteUserIdempotencyToken,
                                 silently: new_user.silently ?? false,
+                                accepted: new_user.accepted ?? false,
                                 set:
                                 {
                                     [nameAttrib]: new_user.name,
@@ -593,6 +635,7 @@
         new_user.files_group = 0;
         new_user.acc_role = ''
         new_user.silently = false;
+        new_user.accepted = false;
 
         create_new_user_enabled = false;
     }
@@ -605,6 +648,7 @@
         new_user.files_group = 0;
         new_user.acc_role = ''
         new_user.silently = false;
+        new_user.accepted = false;
 
         create_new_user_enabled = false;
     }
@@ -693,6 +737,7 @@
         new_user.email = user[emailAttrib];
         new_user.name = user[nameAttrib];      
         new_user.silently = true;
+        new_user.accepted = true;
 
         //name_input?.setReadonly(true)
         //email_input?.setReadonly(true)
@@ -725,7 +770,8 @@
                 title='Members' 
                 toolbarOperations={user_operations} 
                 bind:this={list}>
-            <ListTitle a={nameAttrib} onChange={on_name_changed} hrefFunc={getHRefFunc()}/>
+            <!-- hrefFunc={getHRefFunc()}-->
+            <ListTitle a={nameAttrib} onChange={on_name_changed} />
             <ListSummary a={emailAttrib} readonly/>
 
             <ListStaticProperty name="Membership" a="membership_tag"/>
@@ -770,14 +816,14 @@
                     a="email" 
                     validation={is_valid_email_address}
                     bind:this={email_input}
-                    readonly={new_user.silently}/>
+                    readonly={new_user.accepted}/>
 
             <Input  label={i18n({en: 'Name', es: 'Nombre', pl: 'Imię'})} 
                     placeholder='Optional' 
                     self={new_user} 
                     a="name"
                     bind:this={name_input}
-                    readonly={new_user.silently}/>
+                    readonly={new_user.accepted}/>
 
             <!--Checkbox class="mt-2 text-xs font-normal" self={new_user} a="maintainer">
                 <div class="flex flex-row items-center">
@@ -789,6 +835,10 @@
                 </div>
             </Checkbox-->
 
+            <Checkbox class="mt-2 text-xs font-normal" self={new_user} a="silently">
+                {i18n({en: 'Add user without sending an email', es: 'Añadir usuario sin enviar correo electrónico', pl: 'Dodaj użytkownika bez wysyłania e-maila'})}
+            </Checkbox>
+
             <!-- There is problem with dropdown/combo on dialogs (nested fixed stacks) -->
             <!--Combo class="mt-2" label='Privileges' a='auth_group' self={new_user} >
                 <ComboItem name='No auth access'    key={0}  />