@mixd-id/web-scaffold 0.1.240411124 → 0.1.240411125

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mixd-id/web-scaffold",
   "private": false,
-  "version": "0.1.240411124",
+  "version": "0.1.240411125",
   "scripts": {
     "dev": "vite serve",
     "build": "vite build",

package/src/components/AIDashboard.vue

@@ -11,7 +11,10 @@
           <!-- Host controls left of the title, e.g. a "show dashboards" toggle -->
           <slot name="before-title" />
           <div class="flex-1 min-w-0">
-            <h3 class="truncate" @click="log(activeItem)">{{ activeItem ? activeItem.name : 'Dashboard' }}</h3>
+            <div class="flex flex-row items-center gap-2 min-w-0">
+              <h3 class="truncate" @click="log(activeItem)">{{ activeItem ? activeItem.name : 'Dashboard' }}</h3>
+              <span v-if="readonly && activeItem" class="shrink-0 text-[11px] px-2 py-0.5 rounded-full bg-text-50 text-text-400">View only</span>
+            </div>
             <p v-if="activeItem?.props?.description" class="mt-1 text-sm text-text-300 line-clamp-2 max-w-[420px]">{{ activeItem.props.description }}</p>
           </div>
         </div>
@@ -81,14 +84,7 @@
 
       <div class="border-b-[1px] border-text-50 flex flex-row gap-4 items-start">
         <div class="flex-1 min-w-0 overflow-x-auto px-3 pt-3" :class="mobile ? 'px-6' : 'pt-6'">
-          <Tabs :items="[
-          { text: 'Views', value: 'views' },
-          { text: 'Filters', value: 'filters' },
-          { text: 'Datasource', value: 'datasource' },
-          { text: 'AI Assistant', value: 'chat' },
-          ...(connected ? [ { text: 'Sharing', value: 'sharing' } ] : []),
-          { text: 'Settings', value: 'settings' },
-        ]" v-model="config.params.rightTab" />
+          <Tabs :items="tabs" v-model="config.params.rightTab" />
         </div>
         <div v-if="mobile" class="shrink-0 flex flex-row items-center">
           <button type="button" class="py-5 px-2 text-text-300 hover:text-primary" :title="mobilePanelTall ? 'Shrink panel' : 'Expand panel'"
@@ -280,19 +276,19 @@
           <div v-else-if="sharing.error && !sharing.owner" class="text-red-600 text-sm text-center py-6">{{ sharing.error }}</div>
           <template v-else>
             <div v-if="sharing.canManage" class="flex flex-col gap-1">
-              <Textbox v-model="sharing.search" placeholder="Add people by name or email" />
+              <Textbox v-model="sharing.search" placeholder="Add people by name or code" />
               <div v-if="sharing.search.trim()" class="rounded-lg border-[1px] border-text-50 bg-base-400 p-1 flex flex-col">
+                <div v-if="sharing.search.trim().length < SEARCH_MIN_LENGTH" class="text-text-400 text-xs p-2">Type at least {{ SEARCH_MIN_LENGTH }} characters.</div>
+                <template v-else>
                 <button v-for="user in sharing.results.filter(u => u.id !== sharing.owner?.id && !sharing.users.some(s => s.id === u.id))" :key="user.id"
-                        type="button" class="flex flex-row items-center gap-2 p-2 rounded-md text-left hover:bg-base-500"
+                        type="button" class="flex flex-row items-center gap-2 px-2 py-1.5 rounded-md text-left hover:bg-base-500"
                         @click="shareWith(user)">
-                  <div class="w-[26px] h-[26px] rounded-full bg-base-500 text-xs flex items-center justify-center shrink-0">{{ (user.name || '?').slice(0, 1).toUpperCase() }}</div>
-                  <div class="flex-1 min-w-0">
-                    <div class="text-sm truncate">{{ user.name }}</div>
-                    <div class="text-[11px] text-text-400 truncate">{{ [ user.type, user.email ].filter(Boolean).join(' · ') }}</div>
-                  </div>
+                  <div class="w-[22px] h-[22px] rounded-full bg-base-500 text-[11px] flex items-center justify-center shrink-0">{{ (user.name || '?').slice(0, 1).toUpperCase() }}</div>
+                  <div class="flex-1 min-w-0 text-sm truncate">{{ user.name }}</div>
                   <span class="text-xs text-primary shrink-0">Share</span>
                 </button>
                 <div v-if="!sharing.results.some(u => u.id !== sharing.owner?.id && !sharing.users.some(s => s.id === u.id))" class="text-text-400 text-xs p-2">No one found.</div>
+                </template>
               </div>
               <div v-if="sharing.error" class="text-red-600 text-xs">{{ sharing.error }}</div>
             </div>
@@ -300,16 +296,21 @@
             <div class="flex flex-col gap-1">
               <label class="text-xs text-text-400">Who has access</label>
               <div v-for="user in [ ...(sharing.owner ? [ sharing.owner ] : []), ...sharing.users ]" :key="user.id"
-                   class="flex flex-row items-center gap-2 p-2 rounded-lg bg-base-400">
-                <div class="w-[26px] h-[26px] rounded-full bg-base-500 text-xs flex items-center justify-center shrink-0">{{ (user.name || '?').slice(0, 1).toUpperCase() }}</div>
-                <div class="flex-1 min-w-0">
-                  <div class="text-sm truncate">{{ user.name }}</div>
-                  <div class="text-[11px] text-text-400 truncate">{{ [ user.type, user.email ].filter(Boolean).join(' · ') }}</div>
-                </div>
+                   class="flex flex-row items-center gap-2 px-2 py-1 rounded-lg bg-base-400">
+                <div class="w-[22px] h-[22px] rounded-full bg-base-500 text-[11px] flex items-center justify-center shrink-0">{{ (user.name || '?').slice(0, 1).toUpperCase() }}</div>
+                <div class="flex-1 min-w-0 text-sm truncate">{{ user.name }}</div>
                 <span v-if="user.id === sharing.owner?.id" class="text-[11px] text-text-400 shrink-0">Owner</span>
-                <button v-else-if="sharing.canManage" type="button" class="p-1 text-text-300 hover:text-red-600 shrink-0" title="Stop sharing" @click="unshareWith(user)">
-                  <svg width="11" height="11" class="fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/></svg>
+                <!-- Access as an icon; the owner clicks it for a menu to change or remove it -->
+                <button v-else-if="sharing.canManage" type="button"
+                        class="shrink-0 flex flex-row items-center gap-0.5 p-1.5 rounded-md text-text-400 hover:bg-base-500 hover:text-text-600"
+                        v-tooltip.bottom="shareAccess(user.access).text"
+                        @click="accessMenu.open($event.currentTarget, { user })">
+                  <svg width="14" height="14" class="fill-current" xmlns="http://www.w3.org/2000/svg" :viewBox="shareAccess(user.access).box"><path :d="shareAccess(user.access).path"/></svg>
+                  <svg width="8" height="8" class="fill-current opacity-70" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/></svg>
                 </button>
+                <span v-else class="shrink-0 p-1.5 text-text-400" v-tooltip.bottom="shareAccess(user.access).text">
+                  <svg width="14" height="14" class="fill-current" xmlns="http://www.w3.org/2000/svg" :viewBox="shareAccess(user.access).box"><path :d="shareAccess(user.access).path"/></svg>
+                </span>
               </div>
               <div v-if="!sharing.users.length" class="text-text-400 text-xs px-1 pt-1">Not shared with anyone yet.</div>
             </div>
@@ -415,6 +416,22 @@
         </template>
       </LLMChat>
 
+      <ContextMenu ref="accessMenu" position="bottom-right">
+        <template #default="{ context }">
+          <div v-if="context?.user" class="flex flex-col min-w-[160px] p-1 py-2">
+            <button v-for="opt in SHARE_ACCESS" :key="opt.value" type="button"
+                    class="w-full p-2 rounded-md text-left px-3 menu-item flex flex-row items-center gap-2"
+                    @click="accessMenu.close(); opt.value !== shareAccess(context.user.access).value && shareWith(context.user, opt.value)">
+              <svg width="13" height="13" class="fill-text-400 shrink-0" xmlns="http://www.w3.org/2000/svg" :viewBox="opt.box"><path :d="opt.path"/></svg>
+              <span class="flex-1">{{ opt.text }}</span>
+              <svg v-if="opt.value === shareAccess(context.user.access).value" width="11" height="11" class="fill-primary shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/></svg>
+            </button>
+            <div class="my-1 border-t-[1px] border-text-50" />
+            <button type="button" class="w-full p-2 rounded-md text-left px-3 menu-item text-red-600" @click="accessMenu.close(); unshareWith(context.user)">Remove access</button>
+          </div>
+        </template>
+      </ContextMenu>
+
       <ContextMenu ref="viewMenu" position="bottom-right">
         <template #default="{ context }">
           <div class="flex flex-col min-w-[160px] p-1 py-2">
@@ -770,15 +787,20 @@ import AIDashboardFilterSetting from './AIDashboardFilterSetting.vue'
 //     `${controller}.load-dashboard` hydrates node.data from datasources and
 //     `${controller}.ai-chat` drives the assistant. `datasources` describes the
 //     query-builder options: { [key]: { label, fields: [{ key, label }] } }.
-const { controller, socket, config, datasources } = defineProps({
+const { controller, socket, config, datasources, readonly } = defineProps({
   controller: { type: String, default: '' },
   socket: { type: Object, default: null },
   config: { type: Object, required: true },
   datasources: { type: [ Object, Array ], default: () => ({}) },
+  // View-only: the dashboard can be looked at, filtered and reloaded, but its
+  // components, datasource, assistant and settings are hidden. The host is
+  // expected not to save the item while this is set.
+  readonly: { type: Boolean, default: false },
 })
 
 const addMenu = useTemplateRef('addMenu')
 const viewMenu = useTemplateRef('viewMenu')
+const accessMenu = useTemplateRef('accessMenu')
 const renameCard = useTemplateRef('renameCard')
 const dsCard = useTemplateRef('dsCard')
 const dashboardFilters = useTemplateRef('dashboardFilters')
@@ -900,6 +922,18 @@ const panelOpen = computed({
 if (config.params.inspectorHeight == null) config.params.inspectorHeight = 300
 if (config.params.rightTab === 'data') config.params.rightTab = 'datasource'
 if (![ 'views', 'filters', 'datasource', 'chat', 'sharing', 'settings' ].includes(config.params.rightTab)) config.params.rightTab = 'views'
+
+const tabs = computed(() => [
+  ...(readonly ? [] : [ { text: 'Views', value: 'views' } ]),
+  { text: 'Filters', value: 'filters' },
+  ...(readonly ? [] : [ { text: 'Datasource', value: 'datasource' }, { text: 'AI Assistant', value: 'chat' } ]),
+  ...(connected.value ? [ { text: 'Sharing', value: 'sharing' } ] : []),
+  ...(readonly ? [] : [ { text: 'Settings', value: 'settings' } ]),
+])
+// A view-only dashboard keeps the panel on a tab it still shows.
+watch(() => [ readonly, config.params.rightTab ], () => {
+  if (readonly && !tabs.value.some(tab => tab.value === config.params.rightTab)) config.params.rightTab = 'filters'
+}, { immediate: true })
 if (!Array.isArray(config.items)) config.items = []
 config.items.forEach(normalizeItem)
 
@@ -1746,7 +1780,7 @@ function getChatContext() {
 
 const chatFocus = computed(() => selectedNode.value)
 
-const focusable = computed(() => panelOpen.value && [ 'views', 'chat' ].includes(config.params.rightTab))
+const focusable = computed(() => !readonly && panelOpen.value && [ 'views', 'chat' ].includes(config.params.rightTab))
 
 function pickFocus(e, node) {
   if (!focusable.value || e.target.closest('button, canvas, [data-breakdown] td, [data-map] [data-point], [data-map][data-dragging]')) return
@@ -1756,7 +1790,7 @@ function pickFocus(e, node) {
 }
 
 function focusClass(node) {
-  if (!panelOpen.value || ![ 'views', 'chat' ].includes(config.params.rightTab)) return ''
+  if (readonly || !panelOpen.value || ![ 'views', 'chat' ].includes(config.params.rightTab)) return ''
   return selectedNode.value === node ? 'cursor-pointer ring-2 ring-primary' : 'cursor-pointer hover:ring-1 hover:ring-text-200'
 }
 
@@ -1917,12 +1951,12 @@ watch(() => [ activeItem.value?.uid, JSON.stringify((activeItem.value?.props?.fi
 })
 watch(activeUid, () => { selectedNode.value = null; updatedAt.value = null; if (connected.value) hydrateActive() })
 
-const sharing = ref({ uid: null, loaded: false, error: null, owner: null, canManage: false, users: [], search: '', results: [] })
+const sharing = ref({ uid: null, loaded: false, error: null, owner: null, access: null, canManage: false, users: [], search: '', results: [] })
 
 async function loadSharing() {
   const uid = activeItem.value?.uid
   if (!connected.value || !uid) return
-  if (sharing.value.uid !== uid) sharing.value = { uid, loaded: false, error: null, owner: null, canManage: false, users: [], search: '', results: [] }
+  if (sharing.value.uid !== uid) sharing.value = { uid, loaded: false, error: null, owner: null, access: null, canManage: false, users: [], search: '', results: [] }
   try {
     const res = await socket.send(`${controller}.load-sharing`, { uid })
     if (sharing.value.uid === uid) sharing.value = { ...sharing.value, ...res, loaded: true, error: null }
@@ -1936,9 +1970,11 @@ watch(() => [ config.params.rightTab, activeItem.value?.uid ], () => {
 }, { immediate: true })
 
 let searchTimer = null
+// Matches the server's minimum; shorter input clears the results.
+const SEARCH_MIN_LENGTH = 3
 watch(() => sharing.value.search, (search) => {
   clearTimeout(searchTimer)
-  if (!search?.trim()) return
+  if ((search?.trim().length ?? 0) < SEARCH_MIN_LENGTH) { sharing.value.results = []; return }
   searchTimer = setTimeout(async () => {
     try {
       const res = await socket.send(`${controller}.search-users`, { search })
@@ -1949,10 +1985,19 @@ watch(() => sharing.value.search, (search) => {
   }, 250)
 })
 
-async function shareWith(user) {
+const SHARE_ACCESS = [
+  { value: 'view', text: 'Can view', box: '0 0 576 512', path: 'M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM144 256a144 144 0 1 1 288 0 144 144 0 1 1 -288 0zm144-64c0 35.3-28.7 64-64 64c-7.1 0-13.9-1.2-20.3-3.3c-5.5-1.8-11.9 1.6-11.7 7.4c.3 6.9 1.3 13.8 3.2 20.7c13.7 51.2 66.4 81.6 117.6 67.9s81.6-66.4 67.9-117.6c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3z' },
+  { value: 'edit', text: 'Can edit', box: '0 0 512 512', path: 'M362.7 19.3L314.3 67.7 444.3 197.7l48.4-48.4c25-25 25-65.5 0-90.5L453.3 19.3c-25-25-65.5-25-90.5 0zm-71 71L58.6 323.5c-10.4 10.4-18 23.3-22.2 37.4L1 481.2C-1.5 489.7 .8 498.8 7 505s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L421.7 220.3 291.7 90.3z' },
+]
+// Anything but 'edit' reads as view, as on the server.
+const shareAccess = (access) => SHARE_ACCESS.find(opt => opt.value === access) ?? SHARE_ACCESS[0]
+
+// Shares as view-only by default; sharing an existing person again with
+// another `access` changes theirs.
+async function shareWith(user, access = 'view') {
   const uid = sharing.value.uid
   try {
-    const res = await socket.send(`${controller}.share`, { uid, userId: user.id })
+    const res = await socket.send(`${controller}.share`, { uid, userId: user.id, access })
     if (sharing.value.uid === uid) sharing.value = { ...sharing.value, ...res, error: null, search: '', results: [] }
   } catch (e) {
     sharing.value.error = e?.message ?? `${e}`

package/src/components/AIDashboardViews.vue

@@ -21,7 +21,7 @@
           <input v-if="editing?.uid === view.uid" :ref="el => el && el.focus()" v-model="editing.name" maxlength="100"
                  :class="$style.renameInput" @click.stop @keydown.enter.prevent="commitRename" @keydown.esc.prevent="editing = null" @blur="commitRename" />
           <span v-else class="flex-1 truncate" :title="view.name" @dblclick.stop="!view.shared && startRename(view)">{{ view.name }}</span>
-          <svg v-if="view.shared && !grouped" width="12" height="12" class="fill-text-400 shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><title>Shared with you</title><path :d="SHARED_PATH"/></svg>
+          <svg v-if="view.shared && !grouped" width="12" height="12" class="fill-text-400 shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><title>{{ view.access === 'view' ? 'Shared with you · view only' : 'Shared with you' }}</title><path :d="SHARED_PATH"/></svg>
           <button type="button" :class="$style.rowMenu"
                   @click.stop="viewMenu.open($event.currentTarget, { view })">
             <svg width="14" height="14" class="fill-text-400 hover:fill-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path :d="ELLIPSIS_PATH"/></svg>