npm - @mixd-id/web-scaffold - Versions diffs - 0.1.240411093 → 0.1.240411094 - Mend

@mixd-id/web-scaffold 0.1.240411093 → 0.1.240411094

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/package.json +1 -1
package/src/components/List.vue +33 -84
package/src/widgets/Dashboard/SharingModal.vue +53 -22
package/src/widgets/PresetBar.vue +143 -116

package/package.json CHANGED Viewed

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

package/src/components/List.vue CHANGED Viewed

@@ -14,6 +14,7 @@
                    :controller="controller"
                    :preset-key="presetKey"
                    :use-assistant="useAssistant"
+                   :use-sharing="useSharing"
                    @apply="load">
           <template #toolbar>
@@ -87,7 +88,7 @@
                 <slot name="toolbar"></slot>
               </div>
-              <div class="flex flex-row gap-2 gap-1" v-if="Boolean(toolbar)">
+              <div class="flex flex-row gap-1" v-if="Boolean(toolbar)">
                 <Textbox v-if="canSearch"
                          class="flex-1 md:w-[240px] bg-base-400 border-text-50"
                          placeholder="Search..."
@@ -103,25 +104,6 @@
                   </template>
                 </Textbox>
-                <div v-if="false && $slots.gridItem"
-                     class="hidden md:grid grid-cols-2 gap-[1px] border-[1px] border-text-50 rounded-lg">
-                  <Radio v-model="preset.view"
-                         name="view"
-                         value="table"
-                         :custom="true"
-                         class="p-2 px-3 rounded-lg rounded-r-none"
-                         :class="preset.view === 'table' ? 'bg-primary-500' : 'bg-base-500'">
-                    <svg width="14" height="14" :class="preset.view === 'table' ? 'fill-white' : 'fill-text'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M448 32H64.05C28.7 32 .0492 60.65 .0492 96v320c0 35.35 28.65 64 64 64h383.1c35.35 0 64-28.65 64-64V96C512 60.65 483.4 32 448 32zM224 416H64v-96h160V416zM224 256H64V160h160V256zM448 416h-160v-96h160V416zM448 256h-160V160h160V256z"/></svg>
-                  </Radio>
-                  <Radio v-model="preset.view"
-                         name="view"
-                         value="grid"
-                         :custom="true"
-                         class="p-2 px-3 bg-base-500 rounded-lg rounded-l-none"
-                         :class="preset.view === 'grid' ? 'bg-primary-500' : 'bg-base-500'">
-                    <svg width="14" height="14" :class="preset.view === 'grid' ? 'fill-white' : 'fill-text'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M144 288h-96c-17.67 0-32 14.33-32 32v96c0 17.67 14.33 32 32 32h96c17.67 0 32-14.33 32-32v-96C176 302.3 161.7 288 144 288zM368 288h-96c-17.67 0-32 14.33-32 32v96c0 17.67 14.33 32 32 32h96c17.67 0 32-14.33 32-32v-96C400 302.3 385.7 288 368 288zM592 288h-96c-17.67 0-32 14.33-32 32v96c0 17.67 14.33 32 32 32h96c17.67 0 32-14.33 32-32v-96C624 302.3 609.7 288 592 288zM144 64h-96c-17.67 0-32 14.33-32 32v96c0 17.67 14.33 32 32 32h96c17.67 0 32-14.33 32-32V96C176 78.33 161.7 64 144 64zM368 64h-96c-17.67 0-32 14.33-32 32v96c0 17.67 14.33 32 32 32h96c17.67 0 32-14.33 32-32V96C400 78.33 385.7 64 368 64zM592 64h-96c-17.67 0-32 14.33-32 32v96c0 17.67 14.33 32 32 32h96c17.67 0 32-14.33 32-32V96C624 78.33 609.7 64 592 64z"/></svg>
-                  </Radio>
-                </div>
               </div>
             </div>
@@ -179,7 +161,7 @@
                          :config="cConfig">
               <template #item="{ item }">
                 <slot name="gridItem" :item="item" :enumCache="enumCache" :getEnumText="getEnumText">
-                  <div class="flex flex-row panel-400 rounded-lg overflow-hidden md:rounded-lg overflow-hidden p-3 gap-3">
+                  <div class="flex flex-row panel-400 rounded-lg overflow-hidden p-3 gap-3">
                     <div>
                       <Image :src="item.imageUrl" class="bg-text-50 w-[64px] h-[64px] rounded-lg" />
                     </div>
@@ -242,7 +224,7 @@
                        :config="cConfig">
             <template #item="{ item }">
               <slot name="gridItem" :item="item" :getEnumText="getEnumText">
-                <div class="flex flex-row panel-400 rounded-lg overflow-hidden md:rounded-lg overflow-hidden p-3 gap-3">
+                <div class="flex flex-row panel-400 rounded-lg overflow-hidden p-3 gap-3">
                   <div>
                     <Image :src="item.imageUrl" class="bg-text-50 w-[64px] h-[64px] rounded-lg" />
                   </div>
@@ -282,7 +264,7 @@ import VirtualGrid from "./VirtualGrid.vue";
 import PresetSelector from "../widgets/PresetSelector.vue";
 import {generatePivotColumns, generateTotalColumns, setupConfig, sortsFn} from "../utils/preset-selector.mjs";
 import PresetBar from "../widgets/PresetBar.vue";
-import {groupBy, invokeAfterIdle, queueForLater} from "../utils/helpers.mjs";
+import {invokeAfterIdle, queueForLater} from "../utils/helpers.mjs";
 export default{
@@ -342,6 +324,10 @@ export default{
     useAssistant: {
       type: undefined,
       default: false
+    },
+    useSharing: {
+      type: undefined,
+      default: false
     }
   },
@@ -407,7 +393,7 @@ export default{
             })
             .finally(_ => this.readyState = 1)
       }
-      return new Promise(resolve => resolve())
+      return Promise.resolve()
     },
     loadNext(){
@@ -436,7 +422,7 @@ export default{
             .catch(err => this.toast(err))
             .finally(_ => this.readyState = 1)
       }
-      return new Promise(resolve => resolve())
+      return Promise.resolve()
     },
     async loadPreset(){
@@ -464,25 +450,21 @@ export default{
           const defaultConfig = setupConfig(typeof this.defaultConfig === 'function' ? await this.defaultConfig() : {})
           Object.assign(this.cConfig, defaultConfig)
-          return new Promise(resolve => resolve())
+          return Promise.resolve()
         }
       }
       else{
         const defaultConfig = setupConfig(typeof this.defaultConfig === 'function' ? await this.defaultConfig() : {})
         Object.assign(this.cConfig, defaultConfig)
-        return new Promise((resolve) => {
-          const query = {}
-          for(let key in this.$route.query){
-            if(key.toLowerCase() !== 'reset')
-              query[key] = this.$route.query[key]
-          }
-          this.$router.replace({
-            ...this.$route,
-            query
-          })
-          resolve()
+        const query = {}
+        for(let key in this.$route.query){
+          if(key.toLowerCase() !== 'reset')
+            query[key] = this.$route.query[key]
+        }
+        this.$router.replace({
+          ...this.$route,
+          query
         })
       }
     },
@@ -526,9 +508,9 @@ export default{
               }
             })
-            for(let key in this.enumCache[column.key]){
-              if(!this.enumCache[column.key][key].text)
-                this.enumCache[column.key][key].text = key
+            for(let cacheKey in this.enumCache[column.key]){
+              if(!this.enumCache[column.key][cacheKey].text)
+                this.enumCache[column.key][cacheKey].text = cacheKey
             }
             this.lastEnumItems = reqItems
@@ -634,7 +616,9 @@ export default{
     sortItems(items){
-      if(typeof this.sorts === 'function'){}
+      if(typeof this.sorts === 'function'){
+        return (items ?? []).sort(this.sorts)
+      }
       else if((this.sorts ?? []).length > 0){
         return (items ?? []).sort((a, b) => {
           return sortsFn(a, b, this.sorts, 0)
@@ -946,42 +930,6 @@ export default{
     columns(){
       if((this.preset.pivot ?? {}).enabled){
         return this.preset.pivot.columns ?? []
-        const tableColumns = groupBy(this.preset.columns ?? this.cConfig.columns, 'key')
-        const columns = []
-        for(let row of this.preset.pivot.rows){
-          if(!tableColumns[row.key][0].defaultFormat)
-            tableColumns[row.key][0].defaultFormat = tableColumns[row.key][0].format
-          switch(row.aggregrate){
-            case 'year':
-              tableColumns[row.key][0].format = 'YYYY'
-              break
-            case 'month':
-              tableColumns[row.key][0].format = 'MMM YYYY'
-              break
-            case 'date':
-              tableColumns[row.key][0].format = 'D MMM YYYY'
-              break
-          }
-          columns.push(tableColumns[row.key][0])
-        }
-        for(let value of this.preset.pivot.values){
-          const key = value.aggregrate ? `_${value.key}-${value.aggregrate}` : `_${value.key}-`
-          for(let k in tableColumns){
-            if(k.startsWith(key)){
-              columns.push(tableColumns[k][0])
-            }
-          }
-        }
-        return columns
       }
       for(let idx in this.preset.columns){
@@ -1029,7 +977,7 @@ export default{
       const items = this.sortItems(this.data.items)
       if(typeof this.itemsFn === 'function'){
-        return this.itemsFn(this.data.items)
+        return this.itemsFn(items)
       }
       return items
@@ -1040,6 +988,8 @@ export default{
           this.configSharedPresets.find(_ => _.uid === this.configParams.presetIdx)
       if(preset){
+        if(!preset.columns)
+          preset.columns = JSON.parse(JSON.stringify(this.cConfig.columns))
         if(!preset.search) preset.search = ''
         preset.search = this.$route.query?.search ? this.$route.query.search : preset.search
       }
@@ -1055,7 +1005,7 @@ export default{
     presetView(){
       return this.$device.type === 'mobile' ? 'grid' :
-          (this.view ?? this.preset.view)
+          (this.view ?? this.preset.view ?? 'table')
     },
     configParams(){
@@ -1064,7 +1014,8 @@ export default{
       if(this.configPresets.length > 0 &&
           (!this.cConfig.params.presetIdx ||
-              !this.configPresets.find(_ => _.uid === this.cConfig.params.presetIdx)))
+              (!this.configPresets.find(_ => _.uid === this.cConfig.params.presetIdx) &&
+               !this.configSharedPresets.find(_ => _.uid === this.cConfig.params.presetIdx))))
         this.cConfig.params.presetIdx = this.configPresets[0].uid
       return this.cConfig.params
@@ -1124,7 +1075,7 @@ export default{
     },
     freezeLeft(){
-      return (this.preset?.columns).findIndex(_ => _.freeze) + 1
+      return (this.preset?.columns ?? []).findIndex(_ => _.freeze) + 1
     }
   },
@@ -1135,10 +1086,8 @@ export default{
       data: {
         itemsPerPage: 16,
       },
-      observer: null,
       compPrefix: '',
       enumCache: {},
-      extItems: null,
       lastEnumItems: null,
       queue: null,
       _config: {

package/src/widgets/Dashboard/SharingModal.vue CHANGED Viewed

@@ -3,8 +3,10 @@
          width="360"
          height="480" @show="$refs.search.select()">
 	  <template v-slot:head>
-	    <div class="relative p-6 flex flex-col gap-4">
-	      <h3>Sharing</h3>
+	    <div class="relative pt-6 pb-3 flex flex-col gap-4">
+	      <div class="px-6">
+          <h3>Sharing</h3>
+        </div>
 	      <div class="absolute top-0 right-0 p-2">
 	        <button type="button" class="p-2" @click="close">
 	          <svg width="24" height="24" viewBox="0 0 24 24" class="fill-text-300 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg">
@@ -14,27 +16,36 @@
 	      </div>
         <div>
-          <Textbox @keyup.enter="load"
-                   ref="search"
-                   v-model="search"
-                   placeholder="Search..."
-                   :clearable="true"
-                   @clear="load(search = '')">
-            <template #start>
-              <div class="pl-3">
-                <svg width="14" height="14" class="fill-text-200" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M500.3 443.7l-119.7-119.7c27.22-40.41 40.65-90.9 33.46-144.7C401.8 87.79 326.8 13.32 235.2 1.723C99.01-15.51-15.51 99.01 1.724 235.2c11.6 91.64 86.08 166.7 177.6 178.9c53.8 7.189 104.3-6.236 144.7-33.46l119.7 119.7c15.62 15.62 40.95 15.62 56.57 0C515.9 484.7 515.9 459.3 500.3 443.7zM79.1 208c0-70.58 57.42-128 128-128s128 57.42 128 128c0 70.58-57.42 128-128 128S79.1 278.6 79.1 208z"/></svg>
-              </div>
-            </template>
-          </Textbox>
+          <div class="mb-3 flex border-b-[1px] border-text-50 px-6">
+            <Tabs :items="tabItems" v-model="tabIndex" />
+          </div>
+          <div class="px-6">
+            <Textbox @keyup.enter="load"
+                     ref="search"
+                     v-model="search"
+                     placeholder="Search..."
+                     :clearable="true"
+                     @clear="load(search = '')">
+              <template #start>
+                <div class="pl-3">
+                  <svg width="14" height="14" class="fill-text-200" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M500.3 443.7l-119.7-119.7c27.22-40.41 40.65-90.9 33.46-144.7C401.8 87.79 326.8 13.32 235.2 1.723C99.01-15.51-15.51 99.01 1.724 235.2c11.6 91.64 86.08 166.7 177.6 178.9c53.8 7.189 104.3-6.236 144.7-33.46l119.7 119.7c15.62 15.62 40.95 15.62 56.57 0C515.9 484.7 515.9 459.3 500.3 443.7zM79.1 208c0-70.58 57.42-128 128-128s128 57.42 128 128c0 70.58-57.42 128-128 128S79.1 278.6 79.1 208z"/></svg>
+                </div>
+              </template>
+            </Textbox>
+          </div>
         </div>
 	    </div>
 	  </template>
-	  <div class="flex-1 p-6 flex flex-col">
+	  <div class="flex-1 flex flex-col">
-      <div v-if="items?.length > 0">
-        <div v-for="item in items" :class="appStyle.menuItem" @click="select(item)">
+      <div v-if="items?.length" class="divide-y divide-text-50 border-y-[1px] border-text-50">
+        <div v-for="item in items" class="px-6 p-3 hover:bg-primary" @click="select(item)">
           <slot name="item" :item="item">
-            <div>{{ item.name }}</div>
+            <div v-if="tabIndex === 1">{{ item.user?.name }}</div>
+            <div v-else-if="tabIndex === 2">{{ item.business }}</div>
+            <div v-else-if="tabIndex === 3">{{ item.subBusiness }}</div>
+            <div v-else-if="tabIndex === 4">{{ item.branchCode }}</div>
           </slot>
         </div>
       </div>
@@ -69,6 +80,13 @@ export default{
       selectedIds: null,
       callback: null,
       search: '',
+      tabItems: [
+        { text:'User', value:1 },
+        { text:'Bisnis', value:2 },
+        { text:'Sub Bisnis', value:3 },
+        { text:'Cabang', value:4 }
+      ],
+      tabIndex: 1
 		}
 	},
@@ -79,7 +97,7 @@ export default{
     },
     load(){
-      this.socket.send(this.src, { search:this.search })
+      this.socket.send(this.src, { search:this.search, type: this.tabIndex })
           .then(res => {
             this.items = res.items
           })
@@ -94,13 +112,26 @@ export default{
 		},
     select(item){
+      const newItem = JSON.parse(JSON.stringify(item))
       if(typeof this.callback === 'function')
-        this.callback(item)
-      this.$emit('select', item)
+        this.callback(newItem)
+      this.$emit('select', newItem)
       this.close()
     },
-	}
+	},
+  watch: {
+    tabIndex: {
+      handler(){
+        this.search = ''
+        this.load()
+      }
+    }
+  }
 }

package/src/widgets/PresetBar.vue CHANGED Viewed

@@ -13,132 +13,140 @@
           <slot name="toolbar" :edit="false"></slot>
         </div>
-        <div class="p-5">
-          <div class="px-2">
-            <label class="text-text-300">Presets</label>
-          </div>
+        <div class="flex-1 overflow-y-auto">
+          <div class="p-5">
+            <div class="px-2">
+              <label class="text-text-300">Presets</label>
+            </div>
-          <ListItem :items="config.presets"
-                    class="mt-1 rounded-lg overflow-hidden bg-base-300 border-text-50 border-[1px]"
-                    container-class="divide-y divide-text-50"
-                    @reorder="(from, to) => { config.presets.splice(to, 0, config.presets.splice(from, 1)[0]); apply() }">
-            <template v-slot="{ item }">
-              <div :class="$style.presetBtn">
-                <div data-reorder>
-                  <svg width="14" height="14" class="fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M496 288H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h480c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16zm0-128H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h480c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16z"/></svg>
+            <ListItem :items="config.presets"
+                      class="mt-1 rounded-lg overflow-hidden bg-base-300 border-text-50 border-[1px]"
+                      container-class="divide-y divide-text-50"
+                      @reorder="(from, to) => { config.presets.splice(to, 0, config.presets.splice(from, 1)[0]); apply() }">
+              <template v-slot="{ item }">
+                <div :class="$style.presetBtn">
+                  <div data-reorder>
+                    <svg width="14" height="14" class="fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M496 288H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h480c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16zm0-128H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h480c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16z"/></svg>
+                  </div>
+                  <Radio v-model="configParams.presetIdx" :value="item.uid" @change="apply()" />
+                  <button type="button" class="flex-1 py-1 text-left overflow-hidden text-ellipsis whitespace-nowrap"
+                          @click="configParams.presetIdx = item.uid; apply()">
+                    {{ item.name }}
+                  </button>
+                  <button type="button"
+                          :class="$style.presetOptBtn"
+                          :ref="`presetbtn${item.uid}`"
+                          @click="$refs.contextMenu.open($refs[`presetbtn${item.uid}`], { item })">
+                    <svg width="16" height="16" class="fill-text-300 hover:fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 512"><path d="M64 208c26.5 0 48 21.5 48 48s-21.5 48-48 48-48-21.5-48-48 21.5-48 48-48zM16 104c0 26.5 21.5 48 48 48s48-21.5 48-48-21.5-48-48-48-48 21.5-48 48zm0 304c0 26.5 21.5 48 48 48s48-21.5 48-48-21.5-48-48-48-48 21.5-48 48z"/></svg>
+                  </button>
                 </div>
-                <Radio v-model="configParams.presetIdx" :value="item.uid" @change="apply()" />
-                <button type="button" class="flex-1 py-1 text-left overflow-hidden text-ellipsis whitespace-nowrap"
-                        @click="configParams.presetIdx = item.uid; apply()">
-                  {{ item.name }}
-                </button>
-                <button type="button"
-                        :class="$style.presetOptBtn"
-                        :ref="`presetbtn${item.uid}`"
-                        @click="$refs.contextMenu.open($refs[`presetbtn${item.uid}`], { item })">
-                  <svg width="16" height="16" class="fill-text-300 hover:fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 512"><path d="M64 208c26.5 0 48 21.5 48 48s-21.5 48-48 48-48-21.5-48-48 21.5-48 48-48zM16 104c0 26.5 21.5 48 48 48s48-21.5 48-48-21.5-48-48-48-48 21.5-48 48zm0 304c0 26.5 21.5 48 48 48s48-21.5 48-48-21.5-48-48-48-48 21.5-48 48z"/></svg>
-                </button>
-              </div>
-            </template>
-          </ListItem>
-          <ContextMenu ref="contextMenu" position="bottom-right">
-            <template #default="{ context }">
-              <div class="flex flex-col min-w-[200px] divide-y divide-text-50">
+              </template>
+            </ListItem>
-                <button class="w-full p-3 text-left flex flex-row gap-3" :class="appStyle.menuItem"
-                        @click="select(context.item)">
-                  <div class="w-[24px]">
-                    <svg width="16" height="16" class="mx-auto fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M402.3 344.9l32-32c5-5 13.7-1.5 13.7 5.7V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h273.5c7.1 0 10.7 8.6 5.7 13.7l-32 32c-1.5 1.5-3.5 2.3-5.7 2.3H48v352h352V350.5c0-2.1.8-4.1 2.3-5.6zm156.6-201.8L296.3 405.7l-90.4 10c-26.2 2.9-48.5-19.2-45.6-45.6l10-90.4L432.9 17.1c22.9-22.9 59.9-22.9 82.7 0l43.2 43.2c22.9 22.9 22.9 60 .1 82.8zM460.1 174L402 115.9 216.2 301.8l-7.3 65.3 65.3-7.3L460.1 174zm64.8-79.7l-43.2-43.2c-4.1-4.1-10.8-4.1-14.8 0L436 82l58.1 58.1 30.9-30.9c4-4.2 4-10.8-.1-14.9z"/></svg>
-                  </div>
-                  Edit
-                </button>
+            <ContextMenu ref="contextMenu" position="bottom-right">
+              <template #default="{ context }">
+                <div class="flex flex-col min-w-[200px] divide-y divide-text-50">
-                <button class="w-full p-3 text-left flex flex-row gap-3" :class="appStyle.menuItem"
-                        @click="duplicate(context.item)">
-                  <div class="w-[24px]">
-                    <svg width="16" height="16" class="mx-auto fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M433.941 65.941l-51.882-51.882A48 48 0 0 0 348.118 0H176c-26.51 0-48 21.49-48 48v48H48c-26.51 0-48 21.49-48 48v320c0 26.51 21.49 48 48 48h224c26.51 0 48-21.49 48-48v-48h80c26.51 0 48-21.49 48-48V99.882a48 48 0 0 0-14.059-33.941zM266 464H54a6 6 0 0 1-6-6V150a6 6 0 0 1 6-6h74v224c0 26.51 21.49 48 48 48h96v42a6 6 0 0 1-6 6zm128-96H182a6 6 0 0 1-6-6V54a6 6 0 0 1 6-6h106v88c0 13.255 10.745 24 24 24h88v202a6 6 0 0 1-6 6zm6-256h-64V48h9.632c1.591 0 3.117.632 4.243 1.757l48.368 48.368a6 6 0 0 1 1.757 4.243V112z"/></svg>
-                  </div>
-                  Duplicate
-                </button>
+                  <button class="w-full p-3 text-left flex flex-row gap-3" :class="appStyle.menuItem"
+                          @click="select(context.item)">
+                    <div class="w-[24px]">
+                      <svg width="16" height="16" class="mx-auto fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M402.3 344.9l32-32c5-5 13.7-1.5 13.7 5.7V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h273.5c7.1 0 10.7 8.6 5.7 13.7l-32 32c-1.5 1.5-3.5 2.3-5.7 2.3H48v352h352V350.5c0-2.1.8-4.1 2.3-5.6zm156.6-201.8L296.3 405.7l-90.4 10c-26.2 2.9-48.5-19.2-45.6-45.6l10-90.4L432.9 17.1c22.9-22.9 59.9-22.9 82.7 0l43.2 43.2c22.9 22.9 22.9 60 .1 82.8zM460.1 174L402 115.9 216.2 301.8l-7.3 65.3 65.3-7.3L460.1 174zm64.8-79.7l-43.2-43.2c-4.1-4.1-10.8-4.1-14.8 0L436 82l58.1 58.1 30.9-30.9c4-4.2 4-10.8-.1-14.9z"/></svg>
+                    </div>
+                    Edit
+                  </button>
-                <button v-if="config.presets.length > 1" class="w-full p-3 text-left flex flex-row gap-3 text-red-500" :class="appStyle.menuItem"
-                        @click="remove(context.item)">
-                  <div class="w-[24px]">
-                    <svg width="19" height="19" class="mx-auto fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M469.65 181.65l-11.31-11.31c-6.25-6.25-16.38-6.25-22.63 0L384 222.06l-51.72-51.72c-6.25-6.25-16.38-6.25-22.63 0l-11.31 11.31c-6.25 6.25-6.25 16.38 0 22.63L350.06 256l-51.72 51.72c-6.25 6.25-6.25 16.38 0 22.63l11.31 11.31c6.25 6.25 16.38 6.25 22.63 0L384 289.94l51.72 51.72c6.25 6.25 16.38 6.25 22.63 0l11.31-11.31c6.25-6.25 6.25-16.38 0-22.63L417.94 256l51.72-51.72c6.24-6.25 6.24-16.38-.01-22.63zM576 64H205.26C188.28 64 172 70.74 160 82.74L9.37 233.37c-12.5 12.5-12.5 32.76 0 45.25L160 429.25c12 12 28.28 18.75 45.25 18.75H576c35.35 0 64-28.65 64-64V128c0-35.35-28.65-64-64-64zm16 320c0 8.82-7.18 16-16 16H205.26c-4.27 0-8.29-1.66-11.31-4.69L54.63 256l139.31-139.31c3.02-3.02 7.04-4.69 11.31-4.69H576c8.82 0 16 7.18 16 16v256z"/></svg>
-                  </div>
-                  Remove
-                </button>
+                  <button class="w-full p-3 text-left flex flex-row gap-3" :class="appStyle.menuItem"
+                          @click="duplicate(context.item)">
+                    <div class="w-[24px]">
+                      <svg width="16" height="16" class="mx-auto fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M433.941 65.941l-51.882-51.882A48 48 0 0 0 348.118 0H176c-26.51 0-48 21.49-48 48v48H48c-26.51 0-48 21.49-48 48v320c0 26.51 21.49 48 48 48h224c26.51 0 48-21.49 48-48v-48h80c26.51 0 48-21.49 48-48V99.882a48 48 0 0 0-14.059-33.941zM266 464H54a6 6 0 0 1-6-6V150a6 6 0 0 1 6-6h74v224c0 26.51 21.49 48 48 48h96v42a6 6 0 0 1-6 6zm128-96H182a6 6 0 0 1-6-6V54a6 6 0 0 1 6-6h106v88c0 13.255 10.745 24 24 24h88v202a6 6 0 0 1-6 6zm6-256h-64V48h9.632c1.591 0 3.117.632 4.243 1.757l48.368 48.368a6 6 0 0 1 1.757 4.243V112z"/></svg>
+                    </div>
+                    Duplicate
+                  </button>
-              </div>
-            </template>
-          </ContextMenu>
-        </div>
+                  <button v-if="config.presets.length > 1" class="w-full p-3 text-left flex flex-row gap-3 text-red-500" :class="appStyle.menuItem"
+                          @click="remove(context.item)">
+                    <div class="w-[24px]">
+                      <svg width="19" height="19" class="mx-auto fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M469.65 181.65l-11.31-11.31c-6.25-6.25-16.38-6.25-22.63 0L384 222.06l-51.72-51.72c-6.25-6.25-16.38-6.25-22.63 0l-11.31 11.31c-6.25 6.25-6.25 16.38 0 22.63L350.06 256l-51.72 51.72c-6.25 6.25-6.25 16.38 0 22.63l11.31 11.31c6.25 6.25 16.38 6.25 22.63 0L384 289.94l51.72 51.72c6.25 6.25 16.38 6.25 22.63 0l11.31-11.31c6.25-6.25 6.25-16.38 0-22.63L417.94 256l51.72-51.72c6.24-6.25 6.24-16.38-.01-22.63zM576 64H205.26C188.28 64 172 70.74 160 82.74L9.37 233.37c-12.5 12.5-12.5 32.76 0 45.25L160 429.25c12 12 28.28 18.75 45.25 18.75H576c35.35 0 64-28.65 64-64V128c0-35.35-28.65-64-64-64zm16 320c0 8.82-7.18 16-16 16H205.26c-4.27 0-8.29-1.66-11.31-4.69L54.63 256l139.31-139.31c3.02-3.02 7.04-4.69 11.31-4.69H576c8.82 0 16 7.18 16 16v256z"/></svg>
+                    </div>
+                    Remove
+                  </button>
-        <div v-if="(config.sharedPresets ?? []).length > 0" class="p-5">
-          <div class="px-2">
-            <label class="text-text-300">Shared Presets</label>
+                </div>
+              </template>
+            </ContextMenu>
           </div>
-          <ListItem :items="config.sharedPresets"
-                    class="mt-1 rounded-lg overflow-hidden"
-                    container-class="divide-y divide-text-50">
-            <template v-slot="{ item, index }">
-              <div :class="$style.presetBtn">
-                <Radio v-model="configParams.presetIdx" :value="item.uid" @change="apply()" />
-                <button type="button" class="flex-1 py-1 text-left overflow-hidden text-ellipsis whitespace-nowrap"
-                        @click="configParams.presetIdx = item.uid; apply()">
-                  {{ item.name }}
-                </button>
-                <button type="button"
-                        :class="$style.presetOptBtn"
-                        :ref="`presetsbtn${item.uid}`"
-                        @click="$refs.contextMenu2.open($refs[`presetsbtn${item.uid}`], { item, index })">
-                  <svg width="16" height="16" class="fill-text-300 hover:fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 512"><path d="M64 208c26.5 0 48 21.5 48 48s-21.5 48-48 48-48-21.5-48-48 21.5-48 48-48zM16 104c0 26.5 21.5 48 48 48s48-21.5 48-48-21.5-48-48-48-48 21.5-48 48zm0 304c0 26.5 21.5 48 48 48s48-21.5 48-48-21.5-48-48-48-48 21.5-48 48z"/></svg>
-                </button>
-              </div>
-            </template>
-          </ListItem>
-          <ContextMenu ref="contextMenu2" position="bottom-right">
-            <template #default="{ context }">
-              <div class="flex flex-col min-w-[200px] divide-y divide-text-50">
+          <div v-if="useSharing" class="p-5">
+            <div class="px-2">
+              <label class="text-text-300">Shared Presets</label>
+            </div>
-                <button class="w-full p-3 text-left flex flex-row gap-3" :class="appStyle.menuItem"
-                        @click="duplicate(context.item)">
-                  <div class="w-[24px]">
-                    <svg width="16" height="16" class="mx-auto fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M433.941 65.941l-51.882-51.882A48 48 0 0 0 348.118 0H176c-26.51 0-48 21.49-48 48v48H48c-26.51 0-48 21.49-48 48v320c0 26.51 21.49 48 48 48h224c26.51 0 48-21.49 48-48v-48h80c26.51 0 48-21.49 48-48V99.882a48 48 0 0 0-14.059-33.941zM266 464H54a6 6 0 0 1-6-6V150a6 6 0 0 1 6-6h74v224c0 26.51 21.49 48 48 48h96v42a6 6 0 0 1-6 6zm128-96H182a6 6 0 0 1-6-6V54a6 6 0 0 1 6-6h106v88c0 13.255 10.745 24 24 24h88v202a6 6 0 0 1-6 6zm6-256h-64V48h9.632c1.591 0 3.117.632 4.243 1.757l48.368 48.368a6 6 0 0 1 1.757 4.243V112z"/></svg>
+            <div v-if="config.sharedPresets?.length">
+              <ListItem :items="config.sharedPresets"
+                        class="mt-1 rounded-lg overflow-hidden bg-base-300 border-text-50 border-[1px]"
+                        container-class="divide-y divide-text-50">
+                <template v-slot="{ item, index }">
+                  <div :class="$style.presetBtn">
+                    <Radio v-model="configParams.presetIdx" :value="item.uid" @change="apply()" />
+                    <button type="button" class="flex-1 py-1 text-left overflow-hidden text-ellipsis whitespace-nowrap"
+                            @click="configParams.presetIdx = item.uid; apply()">
+                      {{ item.name }}
+                    </button>
+                    <button type="button"
+                            :class="$style.presetOptBtn"
+                            :ref="`presetsbtn${item.uid}`"
+                            @click="$refs.contextMenu2.open($refs[`presetsbtn${item.uid}`], { item, index })">
+                      <svg width="16" height="16" class="fill-text-300 hover:fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 512"><path d="M64 208c26.5 0 48 21.5 48 48s-21.5 48-48 48-48-21.5-48-48 21.5-48 48-48zM16 104c0 26.5 21.5 48 48 48s48-21.5 48-48-21.5-48-48-48-48 21.5-48 48zm0 304c0 26.5 21.5 48 48 48s48-21.5 48-48-21.5-48-48-48-48 21.5-48 48z"/></svg>
+                    </button>
                   </div>
-                  Duplicate
-                </button>
+                </template>
+              </ListItem>
+              <ContextMenu ref="contextMenu2" position="bottom-right">
+                <template #default="{ context }">
+                  <div class="flex flex-col min-w-[200px] divide-y divide-text-50">
+                    <button class="w-full p-3 text-left flex flex-row gap-3" :class="appStyle.menuItem"
+                            @click="duplicate(context.item)">
+                      <div class="w-[24px]">
+                        <svg width="16" height="16" class="mx-auto fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M433.941 65.941l-51.882-51.882A48 48 0 0 0 348.118 0H176c-26.51 0-48 21.49-48 48v48H48c-26.51 0-48 21.49-48 48v320c0 26.51 21.49 48 48 48h224c26.51 0 48-21.49 48-48v-48h80c26.51 0 48-21.49 48-48V99.882a48 48 0 0 0-14.059-33.941zM266 464H54a6 6 0 0 1-6-6V150a6 6 0 0 1 6-6h74v224c0 26.51 21.49 48 48 48h96v42a6 6 0 0 1-6 6zm128-96H182a6 6 0 0 1-6-6V54a6 6 0 0 1 6-6h106v88c0 13.255 10.745 24 24 24h88v202a6 6 0 0 1-6 6zm6-256h-64V48h9.632c1.591 0 3.117.632 4.243 1.757l48.368 48.368a6 6 0 0 1 1.757 4.243V112z"/></svg>
+                      </div>
+                      Duplicate
+                    </button>
+                    <button class="w-full p-3 text-left flex flex-row gap-3 text-red-500"
+                            :class="appStyle.menuItem"
+                            @click="removeShared(context.item, context.index)">
+                      <div class="w-[24px]">
+                        <svg width="19" height="19" class="mx-auto fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M469.65 181.65l-11.31-11.31c-6.25-6.25-16.38-6.25-22.63 0L384 222.06l-51.72-51.72c-6.25-6.25-16.38-6.25-22.63 0l-11.31 11.31c-6.25 6.25-6.25 16.38 0 22.63L350.06 256l-51.72 51.72c-6.25 6.25-6.25 16.38 0 22.63l11.31 11.31c6.25 6.25 16.38 6.25 22.63 0L384 289.94l51.72 51.72c6.25 6.25 16.38 6.25 22.63 0l11.31-11.31c6.25-6.25 6.25-16.38 0-22.63L417.94 256l51.72-51.72c6.24-6.25 6.24-16.38-.01-22.63zM576 64H205.26C188.28 64 172 70.74 160 82.74L9.37 233.37c-12.5 12.5-12.5 32.76 0 45.25L160 429.25c12 12 28.28 18.75 45.25 18.75H576c35.35 0 64-28.65 64-64V128c0-35.35-28.65-64-64-64zm16 320c0 8.82-7.18 16-16 16H205.26c-4.27 0-8.29-1.66-11.31-4.69L54.63 256l139.31-139.31c3.02-3.02 7.04-4.69 11.31-4.69H576c8.82 0 16 7.18 16 16v256z"/></svg>
+                      </div>
+                      Remove
+                    </button>
-                <button class="w-full p-3 text-left flex flex-row gap-3 text-red-500"
-                        :class="appStyle.menuItem"
-                        @click="removeShared(context.item, context.index)">
-                  <div class="w-[24px]">
-                    <svg width="19" height="19" class="mx-auto fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M469.65 181.65l-11.31-11.31c-6.25-6.25-16.38-6.25-22.63 0L384 222.06l-51.72-51.72c-6.25-6.25-16.38-6.25-22.63 0l-11.31 11.31c-6.25 6.25-6.25 16.38 0 22.63L350.06 256l-51.72 51.72c-6.25 6.25-6.25 16.38 0 22.63l11.31 11.31c6.25 6.25 16.38 6.25 22.63 0L384 289.94l51.72 51.72c6.25 6.25 16.38 6.25 22.63 0l11.31-11.31c6.25-6.25 6.25-16.38 0-22.63L417.94 256l51.72-51.72c6.24-6.25 6.24-16.38-.01-22.63zM576 64H205.26C188.28 64 172 70.74 160 82.74L9.37 233.37c-12.5 12.5-12.5 32.76 0 45.25L160 429.25c12 12 28.28 18.75 45.25 18.75H576c35.35 0 64-28.65 64-64V128c0-35.35-28.65-64-64-64zm16 320c0 8.82-7.18 16-16 16H205.26c-4.27 0-8.29-1.66-11.31-4.69L54.63 256l139.31-139.31c3.02-3.02 7.04-4.69 11.31-4.69H576c8.82 0 16 7.18 16 16v256z"/></svg>
                   </div>
-                  Remove
-                </button>
+                </template>
+              </ContextMenu>
+            </div>
-              </div>
-            </template>
-          </ContextMenu>
-        </div>
+            <div v-else class="mt-2">
+              <p class="text-text-300 p-3 text-center bg-base-300">No Shared Presets</p>
+            </div>
+          </div>
-        <div class="p-5" v-if="['true', 1, true].includes(useAssistant)">
-          <div class="px-2 flex flex-col gap-1">
-            <div class="flex flex-row gap-2">
-              <div class="flex-1">
-                <label class="text-text-300">AI Assistant</label>
-              </div>
-              <div v-if="$isDebugMode" class="flex flex-row gap-2">
-                <button type="button" class="text-primary text-sm" @click="log(config)">Config</button>
-                <button type="button" class="text-primary text-sm" @click="log(preset)">Preset</button>
+          <div class="p-5" v-if="['true', 1, true].includes(useAssistant)">
+            <div class="px-2 flex flex-col gap-1">
+              <div class="flex flex-row gap-2">
+                <div class="flex-1">
+                  <label class="text-text-300">AI Assistant</label>
+                </div>
+                <div v-if="$isDebugMode" class="flex flex-row gap-2">
+                  <button type="button" class="text-primary text-sm" @click="log(config)">Config</button>
+                  <button type="button" class="text-primary text-sm" @click="log(preset)">Preset</button>
+                </div>
               </div>
+              <Textarea rows="6" placeholder="Generate preset based on text" v-model="generateText" />
+              <Button ref="generateBtn" class="w-[100px] mt-2" :state="canGenerate ? 1 : -1" @click="generatePreset">Generate</Button>
             </div>
-            <Textarea rows="6" placeholder="Generate preset based on text" v-model="generateText" />
-            <Button ref="generateBtn" class="w-[100px] mt-2" :state="canGenerate ? 1 : -1" @click="generatePreset">Generate</Button>
           </div>
         </div>
@@ -570,8 +578,8 @@
             <div class="flex flex-col gap-1 mt-2">
               <div v-for="(item, index) in preset.shared"
                    class="bg-base-500 hover:bg-text-50 p-3 rounded-lg flex flex-row gap-2 items-center gap-1">
-                <div class="flex-1 flex flex-row items-center cursor-default gap-2">
-                  <svg class="fill-text-200" height="14" viewBox="0 0 448 512" width="14"
+                <div v-if="item.userId" class="flex-1 flex flex-row items-center cursor-default gap-2">
+                  <svg class="fill-text-200 mr-1" height="14" viewBox="0 0 448 512" width="14"
                        xmlns="http://www.w3.org/2000/svg">
                     <!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) -->
                     <path
@@ -579,6 +587,18 @@
                   </svg>
                   {{ item.user?.name ?? item.userId }}
                 </div>
+                <div v-else-if="item.business" class="flex-1 flex flex-row items-center cursor-default gap-2">
+                  <svg class="fill-text-200 mr-1" width="14" height="14" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M480 192c0-88.38-107.5-160-240-160S0 103.6 0 192c0 35.38 30.88 64 64 64v192c0 17.62 14.38 32 32 32h288c17.62 0 32-14.38 32-32V256C449.1 256 480 227.4 480 192zM400 32c-2.375 0-4.75 .25-7.25 .25C465.3 66.38 512 124.6 512 192c0 42.75-26.88 79-64 91.5V448c-.125 11.25-3.125 22.38-8.875 32H544c17.62 0 32-14.38 32-32V256h4C613.1 256 640 227.4 640 192C640 103.6 532.5 32 400 32z"/></svg>
+                  {{ item.business }}
+                </div>
+                <div v-else-if="item.subBusiness" class="flex-1 flex flex-row items-center cursor-default gap-2">
+                  <svg class="fill-text-200 mr-1" width="14" height="14" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M144 368C144 376.8 151.2 384 160 384s16-7.178 16-16S168.8 352 160 352S144 359.2 144 368zM368 144C368 135.2 360.8 128 352 128s-16 7.178-16 16S343.2 160 352 160S368 152.8 368 144zM184 0C155 0 132 22 129 50c-28 7-48.99 32-48.99 62c0 6 .9863 12 2.986 18C53.1 136 32 161 32 192c0 15 5 29 13.1 40C19 245 0 272 0 304c0 34 21.1 63 52 75C49.1 385 48 392 48 400c0 35 29 64 64 64c5.1 0 11-1 17-2C131 490 155 512 184 512c31 0 56-25 56-56V272H192C183.2 272 176 279.2 176 288v43.43C190.1 337.6 200 351.6 200 368c0 22.09-17.91 40-40 40s-40-17.91-40-40c0-16.38 9.9-30.38 24-36.57V288c0-26.47 21.53-48 48-48h48V160H196.6C190.4 174.1 176.4 184 160 184c-22.09 0-40-17.91-40-40S137.9 104 160 104c16.38 0 30.38 9.9 36.57 24H240V56C240 25 215 0 184 0zM144 144C144 152.8 151.2 160 160 160s16-7.178 16-16S168.8 128 160 128S144 135.2 144 144zM512 304c0-32-19-59-46-72C475 221 480 207 480 192c0-31-22-56-51-62c2-6 2.987-12 2.987-18c0-30-20.99-55-48.99-62C380 22 357 0 328 0c-31 0-56 25-56 56V240H320c8.828 0 16-7.172 16-16V180.6C321.9 174.4 312 160.4 312 144c0-22.09 17.91-40 40-40s40 17.91 40 40c0 16.38-9.9 30.38-24 36.57V224c0 26.47-21.53 48-48 48h-48V352h43.43C321.6 337.9 335.6 328 352 328c22.09 0 40 17.91 40 40s-17.91 40-40 40c-16.38 0-30.38-9.9-36.57-24H272v72c0 31 25 56 56 56c29 0 53-22 55-50C389 463 393.1 464 400 464c35 0 64-29 64-64c0-8-2-15-4-21C489.1 367 512 338 512 304zM368 368c0-8.822-7.178-16-16-16s-16 7.178-16 16S343.2 384 352 384S368 376.8 368 368z"/></svg>
+                  {{ item.subBusiness }}
+                </div>
+                <div v-else-if="item.branchCode" class="flex-1 flex flex-row items-center cursor-default gap-2">
+                  <svg class="fill-text-200 mr-1" width="14" height="14" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M464 0h-224C213.5 0 192 21.49 192 48v80.01L48 128c-26.51 0-48 21.49-48 48v304c0 17.67 14.33 32 32 32L480 512c17.67 0 32-14.33 32-32V48C512 21.49 490.5 0 464 0zM128 336c0 8.836-7.164 16-16 16h-32c-8.836 0-16-7.164-16-16v-32c0-8.838 7.164-16 16-16h32c8.836 0 16 7.162 16 16V336zM128 240c0 8.836-7.164 16-16 16h-32c-8.836 0-16-7.164-16-16v-32c0-8.838 7.164-16 16-16h32c8.836 0 16 7.162 16 16V240zM320 304c0 8.836-7.164 16-16 16h-32C263.2 320 256 312.8 256 304v-32C256 263.2 263.2 256 272 256h32C312.8 256 320 263.2 320 272V304zM320 208C320 216.8 312.8 224 304 224h-32C263.2 224 256 216.8 256 208v-32C256 167.2 263.2 160 272 160h32C312.8 160 320 167.2 320 176V208zM320 112C320 120.8 312.8 128 304 128h-32C263.2 128 256 120.8 256 112v-32C256 71.16 263.2 64 272 64h32C312.8 64 320 71.16 320 80V112zM448 304c0 8.836-7.164 16-16 16h-32C391.2 320 384 312.8 384 304v-32C384 263.2 391.2 256 400 256h32C440.8 256 448 263.2 448 272V304zM448 208C448 216.8 440.8 224 432 224h-32C391.2 224 384 216.8 384 208v-32C384 167.2 391.2 160 400 160h32C440.8 160 448 167.2 448 176V208zM448 112C448 120.8 440.8 128 432 128h-32C391.2 128 384 120.8 384 112v-32C384 71.16 391.2 64 400 64h32C440.8 64 448 71.16 448 80V112z"/></svg>
+                  {{ item.branchCode }}
+                </div>
                 <button type="button" @click="removeSharing(item, index)">
                   <svg class="fill-text-300 hover:fill-red-600" height="14" viewBox="0 0 320 512"
                        width="14" xmlns="http://www.w3.org/2000/svg">
@@ -631,6 +651,11 @@ export default{
     useAssistant: {
       type: undefined,
       default: false
+    },
+    useSharing: {
+      type: undefined,
+      default: false
     }
   },
@@ -646,16 +671,16 @@ export default{
     addSharing(item) {
       const obj = {
+        ...item,
         key: this.presetKey,
-        presetUid: this.preset.uid,
-        userId: item.id
+        presetUid: this.preset.uid
       }
       this.socket.send(`${this.controller}.add-sharing`, obj)
           .then(newItem => {
             if (!Array.isArray(this.preset.shared))
               this.preset.shared = []
-            this.$util.push(this.preset.shared, newItem, {key: "presetUid"})
+            this.$util.push(this.preset.shared, newItem, {key: "id"})
           })
     },
@@ -675,6 +700,7 @@ export default{
               this.config.sharedPresets.splice(index, 1)
               this.configParams.presetIdx = this.config.presets[0].uid
             })
+            .catch(err => this.alert(err))
       })
     },
@@ -849,7 +875,8 @@ export default{
       if(this.config.presets.length > 0 &&
           (!this.config.params.presetIdx ||
-              !this.config.presets.find(_ => _.uid === this.config.params.presetIdx)))
+              (!this.config.presets.find(_ => _.uid === this.config.params.presetIdx) &&
+               !(this.config.sharedPresets ?? []).find(_ => _.uid === this.config.params.presetIdx))))
         this.config.params.presetIdx = this.config.presets[0].uid
       return this.config.params
@@ -944,7 +971,7 @@ export default{
           ...((this.config ?? {}).filters !== false ? [{ text:'Filters', value:2 }] : []),
           ...((this.config ?? {}).sorts !== false ? [{ text:'Sorts', value:3 }] : []),
           ...((this.config ?? {}).pivot !== false ? [{ text:'Pivot', value:5 }] : []),
-          ...(this.controller && (this.config ?? {}).sharing !== false ? [{ text:'Sharing', value:6 }] : []),
+          ...(this.useSharing ? [{ text:'Sharing', value:6 }] : []),
         ],
         chart: [
           ...((this.config ?? {}).filters !== false ? [{ text:'Filters', value:2 }] : []),