@mixd-id/web-scaffold 0.2.240705 → 0.2.250801009

package/src/widgets/{Dashboard.vue → Dashboard0.vue}

@@ -1,8 +1,8 @@
 <template>
-  <div v-if="cConfig && presets" :class="$style.comp">
+  <div v-if="cConfig" :class="$style.comp">
 
     <div :style="sidebarStyle"
-         class="relative flex flex-col border-r-[1px] border-text-50 panel-400 overflow-hidden">
+         class="relative flex flex-col border-r-[1px] border-border-50 panel-400 overflow-hidden">
 
       <TransitionGroup class="flex-1 flex flex-col" name="openltr" tag="div">
 
@@ -33,7 +33,7 @@
                        :readonly="selectedPreset.readonly"
                        :value="selectedView"
                        :view-type="config.viewType"
-                       @change="load({ [selectedView.uid]:selectedView })"/>
+                       @change="load({ [selectedView.uid]:selectedView })" />
 
           </div>
         </div>
@@ -58,7 +58,7 @@
             </button>
           </div>
 
-          <div class="flex justify-center border-b-[1px] border-text-50 mt-3">
+          <div class="flex justify-center border-b-[1px] border-border-50 mt-3">
             <Tabs v-model="selectedDatasource.tabIndex" :items="datasourceTabs"/>
           </div>
 
@@ -114,11 +114,11 @@
             </div>
 
             <div v-else-if="selectedDatasource.tabIndex === 2"
-                 class="flex-1 flex flex-col divide-y divide-text-50 py-3">
+                 class="flex-1 flex flex-col divide-y divide-border-50 py-3">
 
               <ListItem :items="selectedDatasource.filters"
                         class="bg-transparent"
-                        container-class="flex flex-col divide-y divide-text-50"
+                        container-class="flex flex-col divide-y divide-border-50"
                         @reorder="(from, to) => { selectedDatasource.filters.splice(to, 0, selectedDatasource.filters.splice(from, 1)[0]); }">
                 <template v-slot="{ item:filter, index:idx }">
                   <div class="p-5">
@@ -253,7 +253,7 @@
 
               <ListItem v-if="selectedDatasource.sorts?.length > 0"
                         :items="selectedDatasource.sorts"
-                        container-class="flex flex-col rounded-lg border-[1px] border-text-50 bg-base-300 divide-y divide-text-50"
+                        container-class="flex flex-col rounded-lg border-[1px] border-border-50 bg-base-300 divide-y divide-border-50"
                         @reorder="(from, to) => { selectedDatasource.sorts.splice(to, 0, selectedDatasource.sorts.splice(from, 1)[0]);  }">
                 <template v-slot="{ item, index }">
                   <div class="flex flex-row items-center gap-3 p-1">
@@ -341,7 +341,7 @@
 
         <div v-else-if="selectedPreset" class="flex-1 flex flex-col">
           <div class="p-5 flex flex-row gap-2">
-            <button type="button" @click="delete cConfig.selectedUid">
+            <button type="button" @click="delete cConfig.params.selectedUid">
               <svg class="fill-text hover:fill-primary" height="16" viewBox="0 0 448 512" width="16"
                    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) -->
@@ -350,95 +350,28 @@
               </svg>
             </button>
             <Textbox v-model="selectedPreset.name"
-                     class="border-none bg-transparent"
+                     class="flex-1 border-transparent bg-transparent"
                      item-class="p-0 text-lg font-bold"
-                     @click="log(selectedPreset)"/>
+                     :readonly="!!!presetNameChanging">
+              <template #end>
+                <div v-if="!presetNameChanging" class="pl-5">
+                  <button type="button" class="text-primary" @click="presetNameChanging = selectedPreset.name">Edit</button>
+                </div>
+                <div v-else class="flex flex-row gap-3">
+                  <button type="button" class="text-primary" @click="selectedPreset.name = presetNameChanging; presetNameChanging = null">Revert</button>
+                  <button type="button" class="text-primary" @click="presetNameChanging = null">Save</button>
+                </div>
+              </template>
+            </Textbox>
           </div>
 
-          <div class="flex-1 overflow-y-auto">
-            <div class="p-5">
-              <div class="flex flex-row gap-2">
-                <label class="flex-1" @click="log(selectedPreset.datasource)">Datasource</label>
-                <button v-if="!selectedPreset.readonly" class="text-primary"
-                        type="button"
-                        @click="$refs.chooseDatasource.open()">
-                  Add Datasource
-                </button>
-              </div>
-              <div class="flex flex-col mt-2">
-                <ListItem :items="selectedPreset.datasource"
-                          class="bg-transparent"
-                          container-class="flex flex-col gap-1">
-                  <template v-slot="{ item, index }">
-                    <div class="flex flex-row items-center gap-3 p-3 bg-base-500 hover:bg-text-50 rounded-lg">
-                      <div class="flex-1 text-ellipsis whitespace-nowrap overflow-hidden cursor-pointer"
-                           @click="cConfig.selectedDatasource = item.uid">
-                        {{ item.name }}
-                      </div>
-                      <button v-if="!selectedPreset.readonly" :ref="`datasourceOpt${index}`" type="button"
-                              @click="$refs.datasourceMenu.open($refs[`datasourceOpt${index}`], { index, uid:item.uid })">
-                        <svg class="fill-text-300 hover:fill-primary" height="14" viewBox="0 0 512 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
-                              d="M64 192C28.61 192 0 220.6 0 256s28.61 64 64 64s64-28.62 64-64S99.39 192 64 192zM256 192C220.6 192 192 220.6 192 256s28.61 64 64 64s64-28.62 64-64S291.4 192 256 192zM448 192c-35.39 0-64 28.62-64 64s28.61 64 64 64s64-28.62 64-64S483.4 192 448 192z"/>
-                        </svg>
-                      </button>
-                    </div>
-                  </template>
-                </ListItem>
-              </div>
-              <ContextMenu ref="datasourceMenu" position="bottom-right">
-                <template #default="{ context }">
-                  <div class="flex flex-col min-w-[200px]">
-
-                    <button :class="appStyle.menuItem" class="w-full p-3 text-left flex flex-row items-center"
-                            @click="cConfig.selectedDatasource = context.uid">
-                      <div class="w-[30px]">
-                        <svg class="fill-text-300" height="16" viewBox="0 0 512 512" width="16"
-                             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
-                              d="M495.6 49.23l-32.82-32.82C451.8 5.471 437.5 0 423.1 0c-14.33 0-28.66 5.469-39.6 16.41L167.5 232.5C159.1 240 154.8 249.5 152.4 259.8L128.3 367.2C126.5 376.1 133.4 384 141.1 384c.916 0 1.852-.0918 2.797-.2813c0 0 74.03-15.71 107.4-23.56c10.1-2.377 19.13-7.459 26.46-14.79l217-217C517.5 106.5 517.4 71.1 495.6 49.23zM461.7 94.4L244.7 311.4C243.6 312.5 242.5 313.1 241.2 313.4c-13.7 3.227-34.65 7.857-54.3 12.14l12.41-55.2C199.6 268.9 200.3 267.5 201.4 266.5l216.1-216.1C419.4 48.41 421.6 48 423.1 48s3.715 .4062 5.65 2.342l32.82 32.83C464.8 86.34 464.8 91.27 461.7 94.4zM424 288c-13.25 0-24 10.75-24 24v128c0 13.23-10.78 24-24 24h-304c-13.22 0-24-10.77-24-24v-304c0-13.23 10.78-24 24-24h144c13.25 0 24-10.75 24-24S229.3 64 216 64L71.1 63.99C32.31 63.99 0 96.29 0 135.1v304C0 479.7 32.31 512 71.1 512h303.1c39.69 0 71.1-32.3 71.1-72L448 312C448 298.8 437.3 288 424 288z"/>
-                        </svg>
-                      </div>
-                      Edit
-                    </button>
-
-                    <button v-if="!selectedPreset.readonly" :class="appStyle.menuItem"
-                            class="w-full p-3 text-left flex flex-row items-center"
-                            @click="duplicateDatasource(context.index)">
-                      <div class="w-[30px]">
-                        <svg class="fill-text-300" height="16" viewBox="0 0 512 512" width="16"
-                             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
-                              d="M502.6 70.63l-61.25-61.25C435.4 3.371 427.2 0 418.7 0H255.1c-35.35 0-64 28.66-64 64l.0195 256C192 355.4 220.7 384 256 384h192c35.2 0 64-28.8 64-64V93.25C512 84.77 508.6 76.63 502.6 70.63zM464 320c0 8.836-7.164 16-16 16H255.1c-8.838 0-16-7.164-16-16L239.1 64.13c0-8.836 7.164-16 16-16h128L384 96c0 17.67 14.33 32 32 32h47.1V320zM272 448c0 8.836-7.164 16-16 16H63.1c-8.838 0-16-7.164-16-16L47.98 192.1c0-8.836 7.164-16 16-16H160V128H63.99c-35.35 0-64 28.65-64 64l.0098 256C.002 483.3 28.66 512 64 512h192c35.2 0 64-28.8 64-64v-32h-47.1L272 448z"/>
-                        </svg>
-                      </div>
-                      Duplicate
-                    </button>
-
-                    <button v-if="!selectedPreset.readonly" :class="appStyle.menuItem"
-                            class="w-full p-3 text-left flex flex-row items-center"
-                            @click="removeDatasource(context.index)">
-                      <div class="w-[30px]">
-                        <svg class="fill-text-300" height="16" viewBox="0 0 320 512" width="16"
-                             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
-                              d="M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z"/>
-                        </svg>
-                      </div>
-                      Remove
-                    </button>
+          <div class="flex justify-center border-b-[1px] border-border-50">
+            <Tabs :items="presetTabs" v-model="selectedPresetParams.tabIndex" />
+          </div>
 
-                  </div>
-                </template>
-              </ContextMenu>
-            </div>
+          <div class="flex-1 overflow-y-auto">
 
-            <div class="p-5">
+            <div v-if="selectedPresetParams.tabIndex === 1" class="p-5">
               <div class="flex flex-row gap-2">
                 <label class="flex-1" @click="log(selectedPreset.views)">Views</label>
                 <button v-if="!selectedPreset.readonly" class="text-primary" type="button"
@@ -453,8 +386,7 @@
                           :readonly="selectedPreset.readonly"
                           class="mt-2">
                   <template #item="{ item, parent, depth }">
-                    <div
-                        class="flex-1 p-3 overflow-hidden text-ellipsis cursor-pointer flex flex-row items-center gap-3">
+                    <div class="flex-1 p-3 overflow-hidden text-ellipsis cursor-pointer flex flex-row items-center gap-3">
                       <div>
                         <svg v-if="item.type === 'Grid'" class="fill-text-200" height="14" viewBox="0 0 512 512"
                              width="14" xmlns="http://www.w3.org/2000/svg">
@@ -566,9 +498,91 @@
               </div>
             </div>
 
-            <div v-if="sharingSrc && !selectedPreset.readonly" class="p-5">
+            <div v-else-if="selectedPresetParams.tabIndex === 2" class="p-5">
+              <div class="flex flex-row gap-2">
+                <label class="flex-1" @click="log(selectedPreset.datasource)">Datasource</label>
+                <button v-if="!selectedPreset.readonly && selectedPreset.addDatasource !== false" class="text-primary"
+                        type="button"
+                        @click="$refs.chooseDatasource.open()">
+                  Add Datasource
+                </button>
+              </div>
+              <div class="flex flex-col mt-2">
+                <ListItem :items="selectedPreset.datasource"
+                          class="bg-transparent"
+                          container-class="flex flex-col gap-1">
+                  <template v-slot="{ item, index }">
+                    <div class="flex flex-row items-center gap-3 p-3 bg-base-500 hover:bg-text-50 rounded-lg">
+                      <div class="flex-1 text-ellipsis whitespace-nowrap overflow-hidden cursor-pointer"
+                           @click="cConfig.selectedDatasource = item.uid">
+                        {{ item.name }}
+                      </div>
+                      <button v-if="!selectedPreset.readonly" :ref="`datasourceOpt${index}`" type="button"
+                              @click="$refs.datasourceMenu.open($refs[`datasourceOpt${index}`], { index, uid:item.uid })">
+                        <svg class="fill-text-300 hover:fill-primary" height="14" viewBox="0 0 512 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
+                              d="M64 192C28.61 192 0 220.6 0 256s28.61 64 64 64s64-28.62 64-64S99.39 192 64 192zM256 192C220.6 192 192 220.6 192 256s28.61 64 64 64s64-28.62 64-64S291.4 192 256 192zM448 192c-35.39 0-64 28.62-64 64s28.61 64 64 64s64-28.62 64-64S483.4 192 448 192z"/>
+                        </svg>
+                      </button>
+                    </div>
+                  </template>
+                </ListItem>
+              </div>
+              <ContextMenu ref="datasourceMenu" position="bottom-right">
+                <template #default="{ context }">
+                  <div class="flex flex-col min-w-[200px]">
+
+                    <button :class="appStyle.menuItem" class="w-full p-3 text-left flex flex-row items-center"
+                            @click="cConfig.selectedDatasource = context.uid">
+                      <div class="w-[30px]">
+                        <svg class="fill-text-300" height="16" viewBox="0 0 512 512" width="16"
+                             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
+                              d="M495.6 49.23l-32.82-32.82C451.8 5.471 437.5 0 423.1 0c-14.33 0-28.66 5.469-39.6 16.41L167.5 232.5C159.1 240 154.8 249.5 152.4 259.8L128.3 367.2C126.5 376.1 133.4 384 141.1 384c.916 0 1.852-.0918 2.797-.2813c0 0 74.03-15.71 107.4-23.56c10.1-2.377 19.13-7.459 26.46-14.79l217-217C517.5 106.5 517.4 71.1 495.6 49.23zM461.7 94.4L244.7 311.4C243.6 312.5 242.5 313.1 241.2 313.4c-13.7 3.227-34.65 7.857-54.3 12.14l12.41-55.2C199.6 268.9 200.3 267.5 201.4 266.5l216.1-216.1C419.4 48.41 421.6 48 423.1 48s3.715 .4062 5.65 2.342l32.82 32.83C464.8 86.34 464.8 91.27 461.7 94.4zM424 288c-13.25 0-24 10.75-24 24v128c0 13.23-10.78 24-24 24h-304c-13.22 0-24-10.77-24-24v-304c0-13.23 10.78-24 24-24h144c13.25 0 24-10.75 24-24S229.3 64 216 64L71.1 63.99C32.31 63.99 0 96.29 0 135.1v304C0 479.7 32.31 512 71.1 512h303.1c39.69 0 71.1-32.3 71.1-72L448 312C448 298.8 437.3 288 424 288z"/>
+                        </svg>
+                      </div>
+                      Edit
+                    </button>
+
+                    <button v-if="!selectedPreset.readonly" :class="appStyle.menuItem"
+                            class="w-full p-3 text-left flex flex-row items-center"
+                            @click="duplicateDatasource(context.index)">
+                      <div class="w-[30px]">
+                        <svg class="fill-text-300" height="16" viewBox="0 0 512 512" width="16"
+                             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
+                              d="M502.6 70.63l-61.25-61.25C435.4 3.371 427.2 0 418.7 0H255.1c-35.35 0-64 28.66-64 64l.0195 256C192 355.4 220.7 384 256 384h192c35.2 0 64-28.8 64-64V93.25C512 84.77 508.6 76.63 502.6 70.63zM464 320c0 8.836-7.164 16-16 16H255.1c-8.838 0-16-7.164-16-16L239.1 64.13c0-8.836 7.164-16 16-16h128L384 96c0 17.67 14.33 32 32 32h47.1V320zM272 448c0 8.836-7.164 16-16 16H63.1c-8.838 0-16-7.164-16-16L47.98 192.1c0-8.836 7.164-16 16-16H160V128H63.99c-35.35 0-64 28.65-64 64l.0098 256C.002 483.3 28.66 512 64 512h192c35.2 0 64-28.8 64-64v-32h-47.1L272 448z"/>
+                        </svg>
+                      </div>
+                      Duplicate
+                    </button>
+
+                    <button v-if="!selectedPreset.readonly" :class="appStyle.menuItem"
+                            class="w-full p-3 text-left flex flex-row items-center"
+                            @click="removeDatasource(context.index)">
+                      <div class="w-[30px]">
+                        <svg class="fill-text-300" height="16" viewBox="0 0 320 512" width="16"
+                             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
+                              d="M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z"/>
+                        </svg>
+                      </div>
+                      Remove
+                    </button>
+
+                  </div>
+                </template>
+              </ContextMenu>
+            </div>
+
+            <div v-else-if="selectedPresetParams.tabIndex === 3" class="p-5">
               <div class="flex flex-row gap-2">
-                <label class="flex-1" @click="log(selectedPreset.shared)">Sharing</label>
+                <label class="flex-1">Sharing</label>
                 <button class="text-primary" type="button"
                         @click="$refs.sharingModal.open([], { callback:addSharing })">
                   Share
@@ -577,7 +591,7 @@
                 <SharingModal ref="sharingModal" :src="sharingSrc"/>
               </div>
               <div class="flex flex-col gap-1 mt-2">
-                <div v-for="(user, index) in selectedPreset.sharing"
+                <div v-for="(item, index) in selectedPreset.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"
@@ -586,9 +600,9 @@
                       <path
                           d="M224 256c70.7 0 128-57.31 128-128s-57.3-128-128-128C153.3 0 96 57.31 96 128S153.3 256 224 256zM274.7 304H173.3C77.61 304 0 381.6 0 477.3c0 19.14 15.52 34.67 34.66 34.67h378.7C432.5 512 448 496.5 448 477.3C448 381.6 370.4 304 274.7 304z"/>
                     </svg>
-                    {{ user.name }}
+                    {{ item.user?.name ?? item.userId }}
                   </div>
-                  <button type="button" @click="removeSharing(index)">
+                  <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">
                       <!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) -->
@@ -599,14 +613,15 @@
                 </div>
               </div>
             </div>
+
           </div>
 
         </div>
 
         <div v-else class="flex-1 flex flex-col">
-          <div class="p-5 flex flex-row items-start gap-2">
+          <div class="p-5 px-6 flex flex-row items-start gap-2">
             <div class="flex-1">
-              <h5 @click="log(cConfig)">{{ title }}</h5>
+              <h5>{{ title }}</h5>
             </div>
             <button v-if="hasPresets" type="button" @click="addPreset">
               <svg class="fill-primary" height="19" viewBox="0 0 448 512" width="19" xmlns="http://www.w3.org/2000/svg">
@@ -617,25 +632,23 @@
             </button>
           </div>
 
-          <div v-if="hasPresets" class="flex-1 overflow-y-auto px-6 flex flex-col gap-5">
+          <div v-if="hasPresets" class="flex-1 overflow-y-auto flex flex-col gap-5 px-3 my-5">
 
             <div v-if="(presets ?? []).length > 0">
-              <div class="mb-2">
+              <div class="p-3">
                 <label class="text-text-400">Views</label>
               </div>
 
-              <ListItem :items="presets"
-                        class="bg-transparent rounded-xl overflow-hidden"
-                        container-class="divide-y divide-text-50">
+              <ListItem :items="presets">
                 <template v-slot="{ item, index }">
-                  <div class="flex flex-row items-center gap-1 bg-base-500 hover:bg-text-50 pl-3">
-                    <Radio :checked="item.uid === cConfig.viewedUid" class="flex-1 py-3"
+                  <div :class="$style.listMenu">
+                    <Radio :checked="item.uid === cConfigParams.viewedUid" class="flex-1 py-3"
                            @click="(e) => e.shiftKey ? openPreset(item.uid) : selectPreset(item.uid)">
                       {{ item.name }}
                     </Radio>
                     <button :ref="`presetItemBtn${index}`"
-                            class="pr-3"
                             type="button"
+                            :class="$style.listBtn"
                             @click="$refs.presetItemMenu.open($refs[`presetItemBtn${index}`], { item, index })">
                       <svg class="fill-text-300 hover:fill-primary" height="14" viewBox="0 0 128 512"
                            width="14" xmlns="http://www.w3.org/2000/svg">
@@ -647,43 +660,54 @@
                   </div>
                 </template>
               </ListItem>
-            </div>
 
-            <div v-if="(sharedPresets ?? []).length > 0">
-              <div class="mb-2">
-                <label class="text-text-400">Shared</label>
-              </div>
+              <ContextMenu ref="presetItemMenu" position="bottom-right">
+                <template #default="{ context }">
+                  <div v-if="!context?.sharing" class="flex flex-col min-w-[200px] divide-y divide-border-50">
 
-              <ListItem :items="sharedPresets"
-                        class="bg-transparent rounded-xl overflow-hidden"
-                        container-class="divide-y divide-text-50">
-                <template v-slot="{ item, index }">
-                  <div class="flex flex-row items-center gap-1 bg-base-500 hover:bg-text-50 pl-3">
-                    <Radio :checked="item.uid === cConfig.viewedUid" class="flex-1 py-3"
-                           @click="(e) => e.shiftKey ? openPreset(item.uid) : selectPreset(item.uid)">
-                      {{ item.name }}
-                    </Radio>
-                    <button :ref="`sharedPresetItemBtn${index}`"
-                            class="pr-3"
-                            type="button"
-                            @click="$refs.presetItemMenu.open($refs[`sharedPresetItemBtn${index}`], { item, index, sharing:true })">
-                      <svg class="fill-text-300 hover:fill-primary" height="14" viewBox="0 0 128 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
-                            d="M128 64c0-35.39-28.62-64-64-64S0 28.61 0 64s28.62 64 64 64S128 99.39 128 64zM128 256c0-35.39-28.62-64-64-64S0 220.6 0 256s28.62 64 64 64S128 291.4 128 256zM128 448c0-35.39-28.62-64-64-64s-64 28.61-64 64s28.62 64 64 64S128 483.4 128 448z"/>
-                      </svg>
+                    <div class="divide-y divide-border-50">
+                      <button :class="appStyle.menuItem" class="w-full p-3 text-left flex flex-row items-center"
+                              @click="openPreset(context.item.uid)">
+                        <div class="w-[30px]">
+                          <svg class="fill-text-300" height="16" viewBox="0 0 512 512" width="16"
+                               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
+                                d="M256 0C114.6 0 0 114.6 0 255.1S114.6 512 255.1 512S512 397.4 512 256S397.4 0 256 0zM210.8 368.1c-22.25 5.24-71.61 15.71-71.61 15.71c-.6309 .127-1.22 .1499-1.83 .1499c-5.711 0-10.33-5.232-9.151-11.13l16.1-71.61c1.551-6.895 5.027-13.21 10.03-18.21l101-101l74.67 74.67l-101.6 101.6C223.5 363.1 217.5 366.5 210.8 368.1zM373.1 213.6l-20.45 20.45l-74.67-74.67l20.4-20.4C305.7 131.6 315.2 128 324.8 128c9.553 0 19.11 3.646 26.4 10.94l21.88 21.88C387.6 175.4 387.7 198.1 373.1 213.6z"/>
+                          </svg>
+                        </div>
+                        Edit
+                      </button>
+
+                      <button :class="appStyle.menuItem" class="w-full p-3 text-left flex flex-row items-center"
+                              @click="duplicate(context.item)">
+                        <div class="w-[30px]">
+                          <svg class="fill-text-300" height="16" viewBox="0 0 512 512" width="16"
+                               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
+                                d="M502.6 70.63l-61.25-61.25C435.4 3.371 427.2 0 418.7 0H255.1c-35.35 0-64 28.66-64 64l.0195 256C192 355.4 220.7 384 256 384h192c35.2 0 64-28.8 64-64V93.25C512 84.77 508.6 76.63 502.6 70.63zM464 320c0 8.836-7.164 16-16 16H255.1c-8.838 0-16-7.164-16-16L239.1 64.13c0-8.836 7.164-16 16-16h128L384 96c0 17.67 14.33 32 32 32h47.1V320zM272 448c0 8.836-7.164 16-16 16H63.1c-8.838 0-16-7.164-16-16L47.98 192.1c0-8.836 7.164-16 16-16H160V128H63.99c-35.35 0-64 28.65-64 64l.0098 256C.002 483.3 28.66 512 64 512h192c35.2 0 64-28.8 64-64v-32h-47.1L272 448z"/>
+                          </svg>
+                        </div>
+                        Duplicate
+                      </button>
+                    </div>
+
+                    <button :class="appStyle.menuItem" class="w-full p-3 text-left flex flex-row items-center"
+                            @click="confirm('Remove this preset?', () => removePreset(context.item))">
+                      <div class="w-[30px]">
+                        <svg class="fill-text-300" height="16" viewBox="0 0 320 512" width="16"
+                             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
+                              d="M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z"/>
+                        </svg>
+                      </div>
+                      Remove
                     </button>
                   </div>
-                </template>
-              </ListItem>
-            </div>
-
-            <ContextMenu ref="presetItemMenu" position="bottom-right">
-              <template #default="{ context }">
-                <div v-if="!context.sharing" class="flex flex-col min-w-[200px] divide-y divide-text-50">
 
-                  <div class="divide-y divide-text-50">
+                  <div v-else>
                     <button :class="appStyle.menuItem" class="w-full p-3 text-left flex flex-row items-center"
                             @click="openPreset(context.item.uid)">
                       <div class="w-[30px]">
@@ -694,9 +718,8 @@
                               d="M256 0C114.6 0 0 114.6 0 255.1S114.6 512 255.1 512S512 397.4 512 256S397.4 0 256 0zM210.8 368.1c-22.25 5.24-71.61 15.71-71.61 15.71c-.6309 .127-1.22 .1499-1.83 .1499c-5.711 0-10.33-5.232-9.151-11.13l16.1-71.61c1.551-6.895 5.027-13.21 10.03-18.21l101-101l74.67 74.67l-101.6 101.6C223.5 363.1 217.5 366.5 210.8 368.1zM373.1 213.6l-20.45 20.45l-74.67-74.67l20.4-20.4C305.7 131.6 315.2 128 324.8 128c9.553 0 19.11 3.646 26.4 10.94l21.88 21.88C387.6 175.4 387.7 198.1 373.1 213.6z"/>
                         </svg>
                       </div>
-                      Edit
+                      Open
                     </button>
-
                     <button :class="appStyle.menuItem" class="w-full p-3 text-left flex flex-row items-center"
                             @click="duplicate(context.item)">
                       <div class="w-[30px]">
@@ -709,62 +732,76 @@
                       </div>
                       Duplicate
                     </button>
+                    <button :class="appStyle.menuItem" class="w-full p-3 text-left flex flex-row items-center"
+                            @click="removeShared(context.item, context.index)">
+                      <div class="w-[30px]">
+                        <svg class="fill-text-300" height="16" viewBox="0 0 320 512" width="16"
+                             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
+                              d="M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z"/>
+                        </svg>
+                      </div>
+                      Remove
+                    </button>
                   </div>
+                </template>
+              </ContextMenu>
+            </div>
 
-                  <button :class="appStyle.menuItem" class="w-full p-3 text-left flex flex-row items-center"
-                          @click="confirm('Remove this preset?', () => removePreset(context.item))">
-                    <div class="w-[30px]">
-                      <svg class="fill-text-300" height="16" viewBox="0 0 320 512" width="16"
-                           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
-                            d="M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z"/>
-                      </svg>
-                    </div>
-                    Remove
-                  </button>
-                </div>
+            <div v-if="(sharedPresets ?? []).length > 0">
+              <div class="px-3">
+                <label class="text-text-400">Shared</label>
+              </div>
 
-                <div v-else>
-                  <button :class="appStyle.menuItem" class="w-full p-3 text-left flex flex-row items-center"
-                          @click="openPreset(context.item.uid)">
-                    <div class="w-[30px]">
-                      <svg class="fill-text-300" height="16" viewBox="0 0 512 512" width="16"
-                           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
-                            d="M256 0C114.6 0 0 114.6 0 255.1S114.6 512 255.1 512S512 397.4 512 256S397.4 0 256 0zM210.8 368.1c-22.25 5.24-71.61 15.71-71.61 15.71c-.6309 .127-1.22 .1499-1.83 .1499c-5.711 0-10.33-5.232-9.151-11.13l16.1-71.61c1.551-6.895 5.027-13.21 10.03-18.21l101-101l74.67 74.67l-101.6 101.6C223.5 363.1 217.5 366.5 210.8 368.1zM373.1 213.6l-20.45 20.45l-74.67-74.67l20.4-20.4C305.7 131.6 315.2 128 324.8 128c9.553 0 19.11 3.646 26.4 10.94l21.88 21.88C387.6 175.4 387.7 198.1 373.1 213.6z"/>
-                      </svg>
-                    </div>
-                    Open
-                  </button>
-                  <button :class="appStyle.menuItem" class="w-full p-3 text-left flex flex-row items-center"
-                          @click="duplicate(context.item)">
-                    <div class="w-[30px]">
-                      <svg class="fill-text-300" height="16" viewBox="0 0 512 512" width="16"
-                           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
-                            d="M502.6 70.63l-61.25-61.25C435.4 3.371 427.2 0 418.7 0H255.1c-35.35 0-64 28.66-64 64l.0195 256C192 355.4 220.7 384 256 384h192c35.2 0 64-28.8 64-64V93.25C512 84.77 508.6 76.63 502.6 70.63zM464 320c0 8.836-7.164 16-16 16H255.1c-8.838 0-16-7.164-16-16L239.1 64.13c0-8.836 7.164-16 16-16h128L384 96c0 17.67 14.33 32 32 32h47.1V320zM272 448c0 8.836-7.164 16-16 16H63.1c-8.838 0-16-7.164-16-16L47.98 192.1c0-8.836 7.164-16 16-16H160V128H63.99c-35.35 0-64 28.65-64 64l.0098 256C.002 483.3 28.66 512 64 512h192c35.2 0 64-28.8 64-64v-32h-47.1L272 448z"/>
-                      </svg>
-                    </div>
-                    Duplicate
-                  </button>
-                  <button :class="appStyle.menuItem" class="w-full p-3 text-left flex flex-row items-center"
-                          @click="removeShared(context.item, context.index)">
-                    <div class="w-[30px]">
-                      <svg class="fill-text-300" height="16" viewBox="0 0 320 512" width="16"
-                           xmlns="http://www.w3.org/2000/svg">
+              <ListItem :items="sharedPresets"
+                        class="bg-transparent">
+                <template v-slot="{ item, index }">
+                  <div :class="$style.listMenu">
+                    <Radio :checked="item.uid === cConfigParams.viewedUid" class="flex-1 py-3"
+                           @click="(e) => e.shiftKey ? openPreset(item.uid) : selectPreset(item.uid)">
+                      {{ item.name }}
+                    </Radio>
+                    <button :ref="`sharedPresetItemBtn${index}`"
+                            type="button"
+                            :class="$style.listBtn"
+                            @click="$refs.contextMenu2.open($refs[`sharedPresetItemBtn${index}`], { item, index, sharing:true })">
+                      <svg class="fill-text-300 hover:fill-primary" height="14" viewBox="0 0 128 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
-                            d="M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z"/>
+                            d="M128 64c0-35.39-28.62-64-64-64S0 28.61 0 64s28.62 64 64 64S128 99.39 128 64zM128 256c0-35.39-28.62-64-64-64S0 220.6 0 256s28.62 64 64 64S128 291.4 128 256zM128 448c0-35.39-28.62-64-64-64s-64 28.61-64 64s28.62 64 64 64S128 483.4 128 448z"/>
                       </svg>
-                    </div>
-                    Remove
-                  </button>
-                </div>
-              </template>
-            </ContextMenu>
+                    </button>
+                  </div>
+                </template>
+              </ListItem>
+
+              <ContextMenu ref="contextMenu2" position="bottom-right">
+                <template #default="{ context }">
+                  <div class="flex flex-col min-w-[200px] divide-y divide-border-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>
+
+                  </div>
+                </template>
+              </ContextMenu>
+            </div>
+
 
           </div>
           <div v-else class="flex-1 flex items-center justify-center">
@@ -831,7 +868,7 @@
             </div>
           </div>
           <ContextMenu ref="contextMenu" class="panel-400">
-            <div class="flex flex-col min-w-[300px] divide-y divide-text-50">
+            <div class="flex flex-col min-w-[300px] divide-y divide-border-50">
 
               <div class="p-3 flex flex-col gap-1 bg-base-300">
                 <button v-for="(preset, idx) in presets"
@@ -945,6 +982,7 @@ export default {
     BarChartSetting: defineAsyncComponent(() => import('./Dashboard/BarChartSetting.vue')),
     MetricSetting: defineAsyncComponent(() => import('./Dashboard/MetricSetting.vue')),
     GHeatMapsSetting: defineAsyncComponent(() => import('./Dashboard/GHeatMapsSetting.vue')),
+    DataTableSetting: defineAsyncComponent(() => import('./Dashboard/DataTableSetting.vue')),
     VirtualTableSetting: defineAsyncComponent(() => import('./Dashboard/VirtualTableSetting.vue')),
     PieSetting: defineAsyncComponent(() => import('./Dashboard/PieSetting.vue')),
     PolarAreaSetting: defineAsyncComponent(() => import('./Dashboard/PolarAreaSetting.vue')),
@@ -956,14 +994,17 @@ export default {
   computed: {
 
     cConfig() {
-      const config = this.config
+      if (!this.config.viewType)
+        this.config.viewType = 'md:'
 
-      if (config) {
-        if (!config.viewType)
-          config.viewType = 'md:'
-      }
+      return this.config
+    },
+
+    cConfigParams() {
+      if(!this.cConfig.params)
+        this.cConfig.params = {}
 
-      return config
+      return this.cConfig.params
     },
 
     componentsConfig() {
@@ -972,11 +1013,46 @@ export default {
       return this.cConfig.components
     },
 
+    datasourceTabs() {
+      return [
+        {text: "Columns", value: 1},
+        {text: "Filters", value: 2},
+        {text: "Sorts", value: 3},
+        this.selectedDatasource?.pivot !== false ? {text: "Pivots", value: 4} : null,
+      ]
+          .filter(_ => _)
+    },
+
     hasPresets() {
       return (this.presets ?? []).length > 0 ||
           (this.sharedPresets ?? []).length > 0
     },
 
+    presets(){
+      if(!Array.isArray(this.config.presets)){
+        this.config.presets = []
+      }
+
+      return this.config.presets
+    },
+
+    presetTabs(){
+      return [
+        { text:"Datasource", value:2 },
+        { text:"Views", value:1 },
+        !!this.sharingSrc ? { text:"Share", value:3 } : null,
+      ]
+          .filter(_ => _)
+    },
+
+    sharedPresets(){
+      if(!Array.isArray(this.config.sharedPresets)){
+        this.config.sharedPresets = []
+      }
+
+      return this.config.sharedPresets
+    },
+
     selectedDatasource() {
       const datasource = this.selectedPreset?.datasource[this.selectedPreset.datasource.findIndex(_ => _.uid === this.cConfig.selectedDatasource)]
 
@@ -1037,20 +1113,34 @@ export default {
     selectedPreset() {
       if(!Array.isArray(this.presets)) return
 
-      const preset = this.presets[this.presets.findIndex(_ => _.uid === this.cConfig.selectedUid)] ??
-          this.sharedPresets[this.sharedPresets.findIndex(_ => _.uid === this.cConfig.selectedUid)]
+      const preset = this.presets[this.presets.findIndex(_ => _.uid === this.cConfig.params.selectedUid)] ??
+          this.sharedPresets[this.sharedPresets.findIndex(_ => _.uid === this.cConfig.params.selectedUid)]
+      if(!preset) return
 
-      if (preset) {
-        if (!Array.isArray(preset.datasource))
-          preset.datasource = []
+      if (!Array.isArray(preset.datasource))
+        preset.datasource = []
 
-        if (!Array.isArray(preset.views))
-          preset.views = []
-      }
+      if (!Array.isArray(preset.views))
+        preset.views = []
+
+      if(!preset.params)
+        preset.params = {}
+
+      if(!preset.params.tabIndex)
+        preset.params.tabIndex = 2
 
       return preset
     },
 
+    selectedPresetParams(){
+      if(!this.selectedPreset) return
+
+      if(!this.selectedPreset.params)
+        this.selectedPreset.params = {}
+
+      return this.selectedPreset.params
+    },
+
     selectedView() {
       return findComponents(this.selectedPreset?.views, this.cConfig.selectedView)
     },
@@ -1074,9 +1164,9 @@ export default {
     viewedPreset() {
       if(!Array.isArray(this.presets)) return
 
-      return this.presets[this.presets.findIndex(_ => _.uid === this.cConfig.viewedUid)]
+      return this.presets[this.presets.findIndex(_ => _.uid === this.cConfigParams.viewedUid)]
           ??
-          this.sharedPresets[this.sharedPresets.findIndex(_ => _.uid === this.cConfig.viewedUid)]
+          this.sharedPresets[this.sharedPresets.findIndex(_ => _.uid === this.cConfigParams.viewedUid)]
     },
 
     viewedComponents() {
@@ -1111,7 +1201,21 @@ export default {
       }
 
       return filters
-    }
+    },
+
+    src(){ return `${this.controller}.load` },
+
+    presetSrc(){ return `${this.controller}.preset` },
+
+    datasourceSrc(){ return `${this.controller}.load-datasource` },
+
+    datasourceListSrc(){ return `/datasource` },
+
+    previewSrc(){ return `${this.controller}.preview` },
+
+    sharingSrc(){ return `${this.controller}.load-sharing` },
+
+    removeSharingSrc(){ return `${this.controller}.remove-shared` },
 
   },
 
@@ -1156,12 +1260,6 @@ export default {
 
       initialConfig: null,
 
-      datasourceTabs: [
-        { text:"Columns", value:1 },
-        {text: "Filters", value: 2},
-        {text: "Sorts", value: 3},
-        {text: "Pivots", value: 4},
-      ],
       datasourceColumnSearch: '',
 
       enumCache: {},
@@ -1181,9 +1279,7 @@ export default {
 
       values: {},
 
-      config: {},
-      presets: [],
-      sharedPresets: []
+      presetNameChanging: null
     }
   },
 
@@ -1229,16 +1325,42 @@ export default {
         uid,
       }
       this.presets.push(newPreset)
-      this.cConfig.viewedUid = uid
+      this.cConfigParams.viewedUid = uid
 
       this.openPreset(newPreset.uid, {select: true})
     },
 
     addSharing(item) {
-      if (!Array.isArray(this.selectedPreset.sharing))
-        this.selectedPreset.sharing = []
+      const obj = {
+        key: this.presetKey,
+        presetUid: this.selectedPreset.uid,
+        userId: item.id
+      }
 
-      this.$util.push(this.selectedPreset.sharing, item, {key: "id"})
+      this.socket.send(`${this.controller}.add-sharing`, obj)
+          .then(newItem => {
+            if (!Array.isArray(this.selectedPreset.shared))
+              this.selectedPreset.shared = []
+            this.$util.push(this.selectedPreset.shared, newItem, {key: "presetUid"})
+          })
+    },
+
+    removeSharing(item, index) {
+      this.confirm('Remove shared?', () => {
+        this.socket.send(`${this.controller}.remove-sharing`, item)
+            .then(_ => {
+              this.selectedPreset.sharing.splice(index, 1)
+            })
+      })
+    },
+
+    removeShared(item, index) {
+      this.confirm('Remove shared?', () => {
+        this.socket.send(`${this.controller}.remove-sharing`, item.UserConfigPresetShared)
+            .then(_ => {
+              this.sharedPresets.splice(index, 1)
+            })
+      })
     },
 
     addSort(obj) {
@@ -1321,19 +1443,28 @@ export default {
       this.presets.push(newPreset)
 
       this.$nextTick(() => {
-        this.cConfig.viewedUid = newPreset.uid
+        this.cConfigParams.viewedUid = newPreset.uid
         this.openPreset(newPreset.uid)
         this.selectPreset(newPreset.uid)
-        this.saveConfig()
+        this.savePreset()
       })
     },
 
     duplicateComponent(item, parent) {
 
+      const recurseSet = (item) => {
+        item.uid = getPresetUid()
+
+        if(Array.isArray(item.items)){
+          for(let subItem of item.items)
+            recurseSet(subItem)
+        }
+      }
+
       const index = parent.findIndex(_ => _ === item)
 
       const newItem = JSON.parse(JSON.stringify(item))
-      newItem.uid = getPresetUid()
+      recurseSet(newItem)
       newItem.name += ' (Copy)';
 
       parent.splice(index + 1, null, newItem)
@@ -1363,36 +1494,12 @@ export default {
     },
 
     async load(uids) {
-      if (this.readyState !== 1) return
-      if (!this.viewedComponents) return
-      if (!this.cConfig) return
-
-      const views = this.recurseViews(this.viewedComponents, uids)
-      if (views?.length < 1) return
-
-      const {name, datasource} = this.viewedPreset
-
-      !uids ? this.readyState = 0 : Object.keys(uids).forEach(uid => this.emitter.emit(`${uid}.readyState`, 2))
-      this.socket.send(this.src, {
-        name,
-        views,
-        datasource: datasource.map(_datasource => {
-          return {
-            ..._datasource,
-            filters: [
-              ...(_datasource.filters ?? []),
-              ...(this.queryFilters[_datasource.uid] ?? [])
-            ]
-          }
-        })
-      })
-          .then(_ => {
-            Object.assign(this.values, _)
-          })
-          .catch(err => this.alert(err))
-          .finally(_ => {
-            !uids ? this.readyState = 1 : Object.keys(uids).forEach(uid => this.emitter.emit(`${uid}.readyState`, 1))
-          })
+      if(uids){
+        Object.keys(uids).forEach(uid => this.emitter.emit(`${uid}.load`))
+      }
+      else{
+        this.emitter.emit(`dashboard.load`)
+      }
     },
 
     async loadNext(component) {
@@ -1450,9 +1557,8 @@ export default {
       }
     },
 
-    openPreset(uid, opt = {}) {
-      this.cConfig.selectedUid = uid
-      this.saveConfig()
+    openPreset(uid) {
+      this.cConfig.params.selectedUid = uid
     },
 
     previewDatasource(datasource) {
@@ -1507,18 +1613,6 @@ export default {
       this.load()
     },
 
-    removeShared(item, index) {
-      if (!this.removeSharingSrc)
-        return this.alert('Unable to remove shared preset.')
-
-      this.confirm('Remove this preset?', () => {
-        this.socket.send(this.removeSharingSrc, item)
-            .then(_ => {
-              this.sharedPresets.splice(index, 1)
-            })
-      })
-    },
-
     selectPreset(uid, params = {}) {
       this.$router.push({
         query: {
@@ -1526,7 +1620,7 @@ export default {
           ...params
         }
       })
-      this.saveConfig()
+      this.savePreset()
     },
 
     resize1(w) {
@@ -1580,48 +1674,45 @@ export default {
           })
     },
 
-    removeSharing(index) {
-      const user = this.selectedPreset.sharing[index]
-
-      for (let datasource of this.selectedPreset.datasource) {
-        for (let filter of datasource.filters) {
-          const index = (filter.sharing ?? []).findIndex(_ => _.id === user.id)
-          if (index > -1) {
-            filter.sharing.splice(index, 1)
-          }
+    async loadPreset(){
+      if(!Object.keys(this.$route.query).map(_ => _.toLowerCase()).includes('reset')) {
+        if(this.presetKey) {
+          return this.socket.send(this.presetSrc, { key:this.presetKey })
+              .then(async (config) => {
+                if(config){
+                  Object.assign(this.config, config ?? {})
+
+                  /*if(this.$route.query?.search)
+                    this.preset.search = this.$route.query.search*/
+                }
+              })
+              .catch(() => {})
         }
       }
-
-      this.selectedPreset.sharing.splice(index, 1)
-    },
-
-
-    async loadConfig(){
-      return this.socket.send(this.presetSrc, { key:this.presetKey })
-          .then(async ({ config, presets, sharedPresets }) => {
-
-            this.config = config
-            this.presets = presets
-            this.sharedPresets = sharedPresets
-
-            if(this.$route.query?.search)
-              this.preset.search = this.$route.query.search
+      else {
+        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
           })
-          .catch(() => {})
+
+          resolve()
+        })
+      }
     },
 
-    saveConfig: invokeAfterIdle(function(reset = false, preset = false){
+    savePreset: invokeAfterIdle(function(reset = false, preset = false){
       if(!this.presetKey) return
       if(!this.config) return
 
       return this.socket.send(this.presetSrc, {
-        key:this.presetKey,
-        config: {
-          ...this.config,
-          presets: undefined
-        },
-        ...(reset ? { reset:true, presets: this.presets } : {}),
-        ...(preset ? { presets: [ this.preset ] } : {}),
+        key: this.presetKey,
+        config: this.config,
       })
           .catch(() => {})
     }),
@@ -1637,45 +1728,27 @@ export default {
           .catch(() => {})
     },
 
-    savePreset: invokeAfterIdle(async function(){
-      if(!this.presetKey) return
-      if(!this.selectedPreset) return
-
-      return this.socket.send(this.presetSrc, {
-        key: this.presetKey,
-        presets: [
-          this.selectedPreset
-        ]
-      })
-          .catch(() => {})
-    }),
-
   },
 
   mounted() {
-    this.loadConfig()
+    this.loadPreset()
         .then(_ => this.load())
   },
 
   props: {
+
+    config: Object,
+    defaultConfig: Function,
     presetKey: String,
-    presetSrc: {
+
+    controller: {
       type: String,
-      default: 'user.preset'
+      required: true
     },
 
-    src: String,
-
-    datasourceSrc: String,
-    datasourceListSrc: String,
-
-    previewSrc: String,
-
-    sharingSrc: String,
-
-    removeSharingSrc: String,
 
     title: String,
+
   },
 
   provide() {
@@ -1689,7 +1762,10 @@ export default {
       getConfig: this.getConfig,
       getPresets: this.getPresets,
       selectPreset: this.selectPreset,
-      preview: this.preview
+      preview: this.preview,
+      getSrc: () => this.src,
+      getViewedPreset: () => this.viewedPreset,
+      getQueryFilters: () => this.queryFilters,
     }
   },
 
@@ -1703,25 +1779,26 @@ export default {
   watch: {
 
     'presets'(to) {
-      this.cConfig.viewedUid = 'uid' in this.$route.query ? this.$route.query.uid : this.cConfig.viewedUid
+      this.cConfigParams.viewedUid = 'uid' in this.$route.query ? this.$route.query.uid : this.cConfigParams.viewedUid
     },
 
-    'cConfig.viewedUid'() {
+    'cConfigParams.viewedUid'() {
       this.$emit('change')
     },
 
-    'cConfig.selectedUid'() {
-      this.saveConfig()
+    'cConfig.params.selectedUid'() {
+      this.savePreset()
+      this.presetNameChanging = null
     },
 
     'cConfig.selectedDatasource'() {
-      this.saveConfig()
+      this.savePreset()
     },
 
     '$route.query': {
       handler(to) {
         if (this.cConfig) {
-          this.cConfig.viewedUid = 'uid' in to ? to.uid : this.cConfig.viewedUid
+          this.cConfigParams.viewedUid = 'uid' in to ? to.uid : this.cConfigParams.viewedUid
           this.load()
         }
       }
@@ -1731,14 +1808,14 @@ export default {
       deep: true,
       handler(to, from){
         if(Object.keys(from ?? {}).length > 0){
-          this.saveConfig()
+          this.savePreset()
         }
       }
     },
 
     selectedPreset: {
       deep: true,
-      handler(to) {
+      handler(to, from) {
         if(to) {
           this.savePreset()
         }
@@ -1766,8 +1843,14 @@ export default {
   @apply hover:border-primary-300 hover:bg-primary-100;
 }
 
-.columnTextbox input::placeholder {
-  @apply text-text;
+.listMenu{
+  @apply flex flex-row items-center gap-1 hover:bg-text-50 px-3 rounded-xl;
+}
+.listMenu .listBtn{
+  @apply hidden p-1;
+}
+.listMenu:hover .listBtn{
+  @apply block;
 }
 
 </style>