@humandialog/forms.svelte 0.4.27 → 0.4.28

package/components/list/List.d.ts

@@ -3,7 +3,8 @@ export declare enum rList_property_type {
     Hidden = 0,
     Text = 1,
     Date = 2,
-    Combo = 3
+    Combo = 3,
+    Static = 4
 }
 export declare class rList_property {
     constructor(type: rList_property_type);

package/components/list/List.js

@@ -5,6 +5,7 @@ export var rList_property_type;
     rList_property_type[rList_property_type["Text"] = 1] = "Text";
     rList_property_type[rList_property_type["Date"] = 2] = "Date";
     rList_property_type[rList_property_type["Combo"] = 3] = "Combo";
+    rList_property_type[rList_property_type["Static"] = 4] = "Static";
 })(rList_property_type || (rList_property_type = {}));
 export class rList_property {
     constructor(type) {

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

@@ -212,6 +212,7 @@ async function edit_date(field, prop_idx) {
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
+{#if item}
 <section    class="flex flex-row my-0  w-full text-sm text-slate-700 dark:text-slate-400 cursor-default rounded-md border-2 border-transparent {selected_class} {focused_class}"
             on:contextmenu={on_contextmenu}
             role="menu"
@@ -263,6 +264,10 @@ async function edit_date(field, prop_idx) {
                                             definition={prop.combo_definition}
                                             changed={(key,name)=>{on_combo_changed(key, name, prop)}}
                                             s='xs'/>
+                                {:else if prop.type == rList_property_type.Static}
+                                    <span class="dark:text-white text-gray-400 truncate px-2.5 bg-slate-900/10 dark:bg-slate-100/10 rounded-lg">
+                                        {item[prop.a]}
+                                    </span>
                                 {/if}
                             </span>
                         {/if}
@@ -294,6 +299,7 @@ async function edit_date(field, prop_idx) {
         {/if}
     </div>
 </section>
+{/if}
 
 <style>
     .grid-1

package/components/list/list.static.svelte

@@ -0,0 +1,12 @@
+<script>import { getContext } from "svelte";
+import { rList_property_type, rList_property } from "./List";
+export let name;
+export let a = "";
+let definition = getContext("rList-definition");
+let date_property = new rList_property(rList_property_type.Static);
+date_property.name = name;
+date_property.a = a;
+if (!date_property.a)
+  date_property.a = date_property.name;
+definition.properties.push(date_property);
+</script>

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

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        name: string;
+        a?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ListProps = typeof __propDef.props;
+export type ListEvents = typeof __propDef.events;
+export type ListSlots = typeof __propDef.slots;
+export default class List extends SvelteComponentTyped<ListProps, ListEvents, ListSlots> {
+}
+export {};

package/components/list/list.svelte

@@ -13,6 +13,7 @@ export let typename = "";
 export let c = "";
 export let toolbar_operations;
 export let context_menu;
+export let key = "";
 let definition = new rList_definition();
 setContext("rList-definition", definition);
 setContext("rIs-table-component", true);
@@ -34,16 +35,18 @@ function setup(...args) {
   last_tick = $data_tick_store;
   item = self ?? $context_items_store[ctx];
   items = void 0;
-  if (objects)
+  if (objects) {
     items = objects;
-  else if (item && a)
+  } else if (item && a)
     items = item[a];
   if (items == void 0)
     items = [];
   if (items.length > 0) {
     let first_element = items[0];
     let keys = Object.keys(first_element);
-    if (keys.includes("Id"))
+    if (key)
+      item_key = key;
+    else if (keys.includes("Id"))
       item_key = "Id";
     else if (keys.includes("$ref"))
       item_key = "$ref";
@@ -143,11 +146,12 @@ export function edit(element, property_name) {
                         {context_menu}
                         bind:this={rows[i]}
                         >
+          
             <span slot="left" let:element>
                 <slot name="left" {element}/>
             </span>
         </List_element>
-
+        
         {#if show_insertion_row_after_element == element}
             <Inserter   oninsert={async (text) => {await insert(text, show_insertion_row_after_element)}}
                         icon={definition.inserter_icon}

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

@@ -10,6 +10,7 @@ declare const __propDef: {
         c?: string | undefined;
         toolbar_operations: any;
         context_menu: any;
+        key?: string | undefined;
         refresh?: (() => void) | undefined;
         update_objects?: ((_objects: object[]) => void) | undefined;
         update_self?: ((_self: object) => void) | undefined;

package/horizontal.toolbar.svelte

@@ -94,6 +94,17 @@
         let rect = owner.getBoundingClientRect();
         let options = [];
 
+        if(config.customOperations && Array.isArray(config.customOperations) && config.customOperations.length > 0)
+        {
+            config.customOperations.forEach( o => {
+                options.push({
+                    caption: o.caption,
+                    icon: o.icon,
+                    action: o.action
+                })
+            })
+        }
+
         if(show_sign_in_out_icons)
         {
                 if(!is_logged_in)

package/index.d.ts

@@ -34,7 +34,9 @@ export { default as ListSummary } from './components/list/list.summary.svelte';
 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 Modal } from './modal.svelte';
+export { default as MembersPage } from './tenant.members.svelte';
 export { select_item, activate_item, clear_active_item, is_active, is_selected, get_active, editable, start_editing, selectable, handle_select } from './utils';
 export { data_tick_store, has_selected_item, has_data_item } from "./stores";
 export { context_toolbar_operations, page_toolbar_operations, context_items_store, context_types_store } from './stores';

package/index.js

@@ -40,7 +40,9 @@ export { default as ListSummary } from './components/list/list.summary.svelte';
 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 Modal } from './modal.svelte';
+export { default as MembersPage } from './tenant.members.svelte';
 export { select_item, activate_item, clear_active_item, is_active, is_selected, get_active, editable, start_editing, selectable, handle_select } from './utils';
 export { data_tick_store, has_selected_item, has_data_item } from "./stores";
 export { context_toolbar_operations, page_toolbar_operations, context_items_store, context_types_store } from './stores'; // tmp

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@humandialog/forms.svelte",
-  "version": "0.4.27",
+  "version": "0.4.28",
   "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.2.4",
+    "@humandialog/auth.svelte": "^1.2.7",
     "flowbite-svelte": "^0.29.13",
     "svelte-icons": "^2.1.0",
     "svelte-spa-router": "^3.3.0"
@@ -79,6 +79,7 @@
     "./components/list/list.combo.svelte": "./components/list/list.combo.svelte",
     "./components/list/list.date.svelte": "./components/list/list.date.svelte",
     "./components/list/list.inserter.svelte": "./components/list/list.inserter.svelte",
+    "./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.title.svelte": "./components/list/list.title.svelte",
@@ -107,6 +108,7 @@
     "./page.row.svelte": "./page.row.svelte",
     "./page.svelte": "./page.svelte",
     "./stores": "./stores.js",
+    "./tenant.members.svelte": "./tenant.members.svelte",
     "./tile.svelte": "./tile.svelte",
     "./tiles.row.svelte": "./tiles.row.svelte",
     "./tiles.vertical.row.svelte": "./tiles.vertical.row.svelte",

package/tenant.members.svelte

@@ -0,0 +1,397 @@
+<script>
+    import {    FaUserPlus,
+                FaUserMinus,
+                FaPen,
+                FaInfoCircle} from 'svelte-icons/fa'
+    
+    import Page from './page.svelte'
+    import List from './components/list/list.svelte'
+    import ListTitle from './components/list/list.title.svelte'
+    import ListSummary from './components/list/list.summary.svelte'
+    import ListComboProperty from './components/list/list.combo.svelte'
+    import ComboItem from './components/combo/combo.item.svelte'
+    import ListStaticProperty from './components/list/list.static.svelte'
+    import Input from './components/inputbox.ltop.svelte';
+    import Icon from "./components/icon.svelte";
+	import Modal from './modal.svelte'
+	import Checkbox from './components/checkbox.svelte';
+    import {Popover} from 'flowbite-svelte'
+	import { reef } from '@humandialog/auth.svelte';
+	
+
+    // ==============================================================================
+
+    export let users = undefined;
+    export let name_attrib = "Name";
+    export let email_attrib = "login";
+    export let ref_attrib = "$ref";
+    export let show_files = false;
+    //export let show_admin = true;
+    export let app_groups = undefined;
+
+    // ===============================================================================
+  
+    $: init();
+   
+    // ===============================================================================
+
+	let list;
+
+    let create_new_user_enabled = false;
+
+    let reef_users = [];
+    let new_reef_user_id = 1;
+
+    async function init()
+    {
+        reef_users = [];
+        if(users && Array.isArray(users) && users.length > 0)
+        {
+            users.forEach( u =>
+            {
+                reef_users.push(
+                    {
+                        [name_attrib]: u[name_attrib],
+                        [email_attrib]: u[email_attrib],
+                        [ref_attrib]: u[ref_attrib],
+                        auth_group: 0,
+                        files_group :0,
+                        app_group: 0,
+                        other: "",
+                        avatar_url : "",
+                        invitation_not_accepted: false,
+                        removed: false,
+                        membership_tag: "",
+                        __hd_internal_item_id: new_reef_user_id++
+                    }
+                )
+            })
+        }
+
+        await fetch_details();
+ 
+    }
+
+    
+    async function fetch_details(...args)
+    {
+        let users_no = reef_users.length;
+        let handled_no = 0;
+        reef_users.forEach(async ru =>
+        {
+            let details = await reef.get(`/sys/user_details?email=${ru[email_attrib]}`)
+            set_user_info(ru, details);
+
+            handled_no++;
+            if(handled_no == reef_users.length)
+                list?.update_objects(reef_users);
+        } )
+    }
+
+    function set_user_info(user, info)
+    {
+        user.auth_group = info.auth_group ?? 0;
+        user.files_group = info.files_group ?? 0;
+        user.avatar_url = info.avatar_url ?? "";
+        user.other = info.access_details ?? "";
+        user.app_group = info.reef_user_group_id ?? 0;
+        user.removed = info.removed ?? false;
+        user.invitation_not_accepted = info.invitation_not_accepted ?? false;
+
+        if(user.removed)
+            user.membership_tag = "Removed";
+        else if(user.invitation_not_accepted)
+            user.membership_tag = "Invited";
+        else
+            user.membership_tag = "";
+
+        user.__hd_internal_item_id = new_reef_user_id++;
+    }
+
+    /*onMount(
+        async () => {
+            await fetch_details();
+            return () => {}
+        }
+    )
+    */
+    
+    let new_user = {
+        name: '',
+        email: '',
+        maintainer: false
+    }
+
+    let name_input;
+    let email_input;
+
+    async function delete_user(user)
+    {
+        let email = user[email_attrib];
+        
+        let removed_user_details = await reef.get('/sys/kick_out_user?email=' + email);
+        if(removed_user_details)
+        {
+            //let removed_user = reef_users.find( u => u[email_attrib] == user[email_attrib])
+            set_user_info(user, removed_user_details);
+            list?.refresh();
+        }
+    }
+
+    async function on_name_changed(user, name, property)
+    {
+        user[property] = name;
+
+        let user_path = user[ref_attrib];
+        if(!user_path)
+            return;
+
+        await reef.post(`${user_path}/set`,
+                    {
+                        [name_attrib]: name
+                    }); 
+    }
+
+    async function on_change_privileges(user, flags, name)
+    {
+        if(user.auth_group != flags)
+        {
+            let email = user[email_attrib];
+            let info = await reef.get(`sys/set_user_details?email=${email}&auth_group=${flags}`)
+            if(info)
+            {
+                user.auth_group = flags;
+
+                set_user_info(user, info)
+                list?.refresh();
+            }
+        }
+    }
+
+    async function on_change_files_access(user, flags, name)
+    {
+        if(user.files_group != flags)
+        {
+            user.files_group = flags;
+            
+            let email = user[email_attrib];
+            let info = await reef.get(`sys/set_user_details?email=${email}&files_group=${flags}`)
+            if(info)
+            {
+                set_user_info(user, info)
+                list?.refresh();
+            }
+        }
+    }
+    
+    function create_new_user()
+    {
+        create_new_user_enabled = true;
+    }
+
+    let page_operations=[
+        {
+            icon: FaUserPlus,
+            caption: '',
+            action: (focused) => { create_new_user(); }
+        }
+    ]
+
+    function get_edit_operations(user)
+    {
+        let operations = [
+            {
+                caption: name_attrib,
+                action: (focused) =>  { list.edit(user, name_attrib) }
+            },
+            {
+                caption: 'Privileges',
+                action: (focused) => { list.edit(user, 'Privileges') }
+            }];
+
+        if(show_files)
+        {
+            operations.push({
+                caption: 'Files',
+                action: (focused) => { list.edit(user, 'Files') }
+            });
+        }
+        
+        return operations;
+    }
+
+    let user_operations = (user) => { 
+        
+        let operations = [];
+        
+        let edit_operations = get_edit_operations(user)
+        if(edit_operations.length == 1)
+        {
+            operations.push({
+                                icon: FaPen,
+                                caption: '',
+                                action: edit_operations[0].action
+                            });
+        }
+        else
+        {
+            operations.push({
+                                icon: FaPen,
+                                caption: '',
+                                grid: edit_operations
+                            });
+        }
+
+        operations.push({
+                            caption: '',
+                            icon: FaUserMinus,
+                            action: (focused) => delete_user(user)
+                        });
+
+        return operations;
+    }
+
+    let user_context_menu = (user) => {
+        let edit_operations = get_edit_operations(user);
+        return {
+            grid: edit_operations
+        }
+    }
+
+    let data_item = 
+    { 
+       
+    }
+
+    function is_valid_email_address(e)
+    {
+        let pattern = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
+        return (e.match(pattern) != null);
+    }
+
+    function is_valid_name(s)
+    {
+        return !!s;
+    }
+
+    async function on_new_user_requested()
+    {
+        if(!name_input?.validate())
+            return;
+
+        if(!email_input?.validate())
+            return;
+
+        let result = await reef.post('/sys/invite_user',
+                        {
+                            email: new_user.email,
+                            admin: new_user.maintainer,
+                            set:
+                            {
+                                [name_attrib]: new_user.name,
+                                [email_attrib]: new_user.email
+                            }
+                        })
+        if(result)
+        {
+            let created_user = result.User;
+            let new_reef_user = {
+                [name_attrib]: created_user[name_attrib],
+                [email_attrib]: created_user[email_attrib],
+                [ref_attrib]: created_user[ref_attrib]
+            }
+
+            let details = await reef.get(`/sys/user_details?email=${new_reef_user[email_attrib]}`)
+            set_user_info(new_reef_user, details);
+
+            reef_users = [...reef_users, new_reef_user]
+            list?.update_objects(reef_users);
+        }
+
+        new_user.name = '';
+        new_user.email = '';
+        new_user.maintainer = false;
+        create_new_user_enabled = false;
+    }
+
+    function on_new_user_canceled()
+    {
+        new_user.name = '';
+        new_user.email = '';
+        new_user.maintainer = false;
+        create_new_user_enabled = false;
+    }
+
+</script>
+
+<Page   self={data_item} 
+        cl="!bg-white dark:!bg-slate-900 w-full h-full flex flex-col overflow-y-hidden overflow-x-hidden py-1 px-1 border-0" 
+        toolbar_operations={page_operations}
+        clears_context='props sel'>
+    <a href="/" class="underline text-sm font-semibold ml-3"> &lt; Back to root</a>
+
+    {#if reef_users && reef_users.length > 0}
+    <List       objects={reef_users} 
+                title='Members' 
+                toolbar_operations={user_operations} 
+                context_menu={user_context_menu}
+                key='__hd_internal_item_id'
+                bind:this={list}>
+            <ListTitle a={name_attrib} on_change={on_name_changed}/>
+            <ListSummary a={email_attrib} readonly/>
+
+            <ListStaticProperty name="Membership" a="membership_tag"/>
+            
+            <ListComboProperty name='Privileges' a='auth_group' on_select={on_change_privileges}>
+                <ComboItem name='None'       key={0}  />
+                <ComboItem name='Can See'    key={1}  />
+                <ComboItem name='Can Invite' key={3}  />
+                <ComboItem name='Maintainer' key={7}  />
+            </ListComboProperty>
+
+            {#if show_files}
+            <ListComboProperty name='Files' a='files_group' on_select={on_change_files_access}>
+                <ComboItem name='None'      key={0}  />
+                <ComboItem name='Read'      key={1}  />
+                <ComboItem name='Write'     key={2}  />
+                <ComboItem name='Read&Write' key={3}  />
+            </ListComboProperty>
+            {/if}
+
+            
+    </List>
+    {/if}
+
+</Page>
+
+<Modal  bind:open={create_new_user_enabled}
+        title='Invite someone'
+        ok_caption='Invite'
+        on_ok_callback={on_new_user_requested}
+        on_cancel_callback={on_new_user_canceled}
+        icon={FaUserPlus}>
+            <Input  label='Name' 
+                    placeholder='' 
+                    self={new_user} 
+                    a="name"
+                    validate_cb={is_valid_name}
+                    bind:this={name_input}/>
+            
+            <Input  label='E-mail' 
+                    placeholder='' 
+                    self={new_user} 
+                    a="email" 
+                    validate_cb={is_valid_email_address}
+                    bind:this={email_input}/>
+
+            <Checkbox class="mt-2 text-xs font-normal" self={new_user} a="maintainer">
+                <div class="flex flex-row items-center">
+                    <span class="">Maintainer</span>
+                    <Icon id="b1" size={4} component={FaInfoCircle} class="text-slate-400 ml-5 pt-0 mt-1"/>
+                    <Popover class="w-64 text-sm font-light " title="Maintainer" triggeredBy="#b1">
+                        Means that the invited user will be able to add and remove others and manage permissions in this organization.
+                    </Popover>
+                </div>
+            </Checkbox>
+</Modal>
+

package/tenant.members.svelte.d.ts

@@ -0,0 +1,33 @@
+/** @typedef {typeof __propDef.props}  TenantProps */
+/** @typedef {typeof __propDef.events}  TenantEvents */
+/** @typedef {typeof __propDef.slots}  TenantSlots */
+export default class Tenant extends SvelteComponentTyped<{
+    users?: any;
+    name_attrib?: string | undefined;
+    email_attrib?: string | undefined;
+    ref_attrib?: string | undefined;
+    show_files?: boolean | undefined;
+    app_groups?: any;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type TenantProps = typeof __propDef.props;
+export type TenantEvents = typeof __propDef.events;
+export type TenantSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        users?: any;
+        name_attrib?: string | undefined;
+        email_attrib?: string | undefined;
+        ref_attrib?: string | undefined;
+        show_files?: boolean | undefined;
+        app_groups?: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/vertical.toolbar.svelte

@@ -87,6 +87,17 @@
         let rect = owner.getBoundingClientRect();
         let options = [];
 
+        if(config.customOperations && Array.isArray(config.customOperations) && config.customOperations.length > 0)
+        {
+            config.customOperations.forEach( o => {
+                options.push({
+                    caption: o.caption,
+                    icon: o.icon,
+                    action: o.action
+                })
+            })
+        }
+
         if(show_sign_in_out_icons)
         {
                 if(!is_logged_in)