@mixd-id/web-scaffold 0.2.240706 → 0.2.250801010

package/src/widgets/Dashboard/VirtualTableSetting.vue

@@ -1,221 +1,163 @@
 <template>
   <div :class="$style.comp">
 
-    <div class="flex justify-center border-b-[1px] border-text-50" v-if="tabItems.length > 1">
-      <Tabs :items="tabItems" v-model="value.tabIndex" />
-    </div>
-
-    <div class="flex-1 overflow-y-auto flex flex-col">
-      <div v-if="value.tabIndex === 1" class="flex-1 flex flex-col gap-5 p-6">
-
-        <div class="flex flex-row items-center ">
-          <label class="flex-1">Active</label>
-          <Switch v-model="value.props.enabled" :readonly="readonly" />
-        </div>
+    <div class="p-5 flex flex-col gap-5">
 
-        <div class="flex flex-col gap-1">
-          <label class="text-text-400">Label</label>
-          <Textbox v-model="value.props.label" maxlength="50" placeholder="Label" :readonly="readonly" />
+      <div>
+        <div class="flex flex-row">
+          <label class="text-text-400 flex-1">Datasource</label>
+          <button type="button" class="text-primary" @click="dummyDatasource">Add</button>
         </div>
-
-        <div class="flex flex-row items-center">
-          <label class="flex-1">Datasource</label>
-          <div>
-            <Dropdown class="min-w-[150px]"
-                      :readonly="readonly"
-                      v-model="value.props.datasourceUid">
-              <option v-for="_datasource in datasource"
-                      :value="_datasource.uid">
-                {{ _datasource.name }}
-              </option>
-            </Dropdown>
+        <div class="mt-2">
+          <div class="p-3 bg-base-500 flex flex-row gap-3">
+            <div class="flex-1">{{ datasource ? datasource.name : 'No datasource selected' }}</div>
+            <button v-if="datasource" type="button" @click="clear">
+              <svg width="14" height="14" class="fill-text-300 hover:fill-red-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--! 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>
+            </button>
           </div>
         </div>
-
       </div>
 
-      <div v-else-if="value.tabIndex === 2" class="flex-1 flex flex-col gap-5 p-6">
-
-        <div>
-          <Textbox placeholder="Search..." v-model="search">
-            <template #start>
-              <div class="pl-3">
-                <svg width="14" height="14" class="fill-text-300" 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 class="flex flex-row">
+          <label class="text-text-400 flex-1">Columns</label>
+          <button type="button" class="text-primary" @click="dummyColumns">Add</button>
         </div>
-
-        <VirtualGrid class="flex-1 border-[1px] border-text-50 rounded-xl"
-                     container-class="divide-y divide-text-50"
-                     :items="columns">
-          <template #item="{ item }">
-            <div class="flex-1 flex flex-row gap-2 items-center p-1 px-3 group">
-              <div>
-                <Checkbox v-model="item.visible" default="true" :disabled="readonly" />
+        <ListItem :items="item.props.columns"
+                  class="mt-2"
+                  @reorder="(from, to) => { item.props.columns.splice(to, 0, item.props.columns.splice(from, 1)[0]); }">
+          <template v-slot="{ item }">
+            <div class="flex flex-row items-center gap-3 p-3 bg-base-500 hover:bg-text-50">
+              <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>
-              <Textbox v-model="item.label2" :placeholder="item.label" :readonly="readonly"
-                       class="flex-1 border-none bg-transparent" :class="$style.columnTextbox"
-                       item-class="p-1 px-0" />
-              <div class="hidden flex-col justify-center group-hover:flex">
-                <button type="button" @click="moveUp(item)">
-                  <svg width="11" height="11" class="fill-text-300 hover:fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M9.39 265.4l127.1-128C143.6 131.1 151.8 128 160 128s16.38 3.125 22.63 9.375l127.1 128c9.156 9.156 11.9 22.91 6.943 34.88S300.9 320 287.1 320H32.01c-12.94 0-24.62-7.781-29.58-19.75S.2333 274.5 9.39 265.4z"/></svg>
-                </button>
-                <button type="button" @click="moveDown(item)">
-                  <svg width="11" height="11" class="fill-text-300 hover:fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M310.6 246.6l-127.1 128C176.4 380.9 168.2 384 160 384s-16.38-3.125-22.63-9.375l-127.1-128C.2244 237.5-2.516 223.7 2.438 211.8S19.07 192 32 192h255.1c12.94 0 24.62 7.781 29.58 19.75S319.8 237.5 310.6 246.6z"/></svg>
+              <div class="flex-1">
+                {{ item.label ?? item.key }}
+              </div>
+              <div>
+                <button type="button" @click="">
+                  <svg width="16" height="16" class="fill-text-300 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z"/></svg>
                 </button>
               </div>
             </div>
           </template>
-        </VirtualGrid>
-
+        </ListItem>
       </div>
+
     </div>
 
-	</div>
+  </div>
 </template>
 
-<script>
-
-import WebPagePropertySelector from "../WebPageBuilder4/WebPagePropertySelector.vue";
-import {defineAsyncComponent} from "vue";
-import InteractionEdit from "./InteractionEdit.vue";
-
-export default{
-  components: {
-    InteractionEdit,
-    HeightSetting: defineAsyncComponent(() => import('../WebPageBuilder4/HeightSetting.vue')),
-    WebPagePropertySelector
-  },
-
-  computed: {
-
-    interactions(){
-      if(!Array.isArray(this.value.props.interactions))
-        this.value.props.interactions = []
-      return this.value.props.interactions
-    },
-
-    selectedDatasource(){
-      return this.datasource.find(d => d.uid === this.value.props.datasourceUid)
-    },
-
-    definedProperties(){
-      const settings = []
-
-      for(let key in this.properties){
-        if(key in this.value.props){
-          settings.push(this.properties[key])
-        }
-      }
-
-      return settings
-    },
-
-    tabItems(){
-      return [
-        { text:'General', value:1 },
-        this.value.props.datasourceUid ? { text:'Columns', value:2 } : null,
-      ]
-        .filter(_ => _)
-    },
+<script setup>
 
-    columns(){
-      const searches = this.search.toLowerCase().split(' ').filter(_ => _.length > 2)
-      return (this.value.props.datasourceColumns ?? []).filter(_ => {
-        return !_.key.startsWith('_') &&
-            (searches.length < 1 || searches.every(search => _.label.toLowerCase().includes(search)))
-      })
-    },
+import {computed, inject} from "vue";
 
-  },
+const { item } = defineProps({
 
-  data(){
-    return {
-      properties: {
-        'height': { component:"HeightSetting", text:'Height', group:'Layout' }
-      },
-      search: ''
-    }
+  item: {
+    type: Object,
+    required: true
   },
 
-  emits: [ 'change' ],
-
-  inject: [ 'uploadImage', 'viewTypes' ],
+  viewType: String,
 
-  props: {
+  viewIndex: Number,
 
-    datasource: Object,
+  viewTypes: Array,
 
-    index: Number,
+})
 
-    readonly: [ Boolean, Number ],
+const getPresetDatasource = inject('getPresetDatasource')
 
-    value: {
-      type: Object,
-      required: true
-    },
+const datasource = computed(() => {
+  const datasources = getPresetDatasource()
+  return datasources[item.uid]
+})
 
-    viewType: String,
+function clear(){
+  const datasources = getPresetDatasource()
+  delete datasources[item.uid]
+}
 
-  },
+function dummyColumns(){
 
-  methods: {
+  item.props.columns = JSON.parse(JSON.stringify(datasource.value.columns))
 
-    addInteraction(obj){
-      this.$util.push(this.interactions, obj)
-    },
+}
 
-    applyDefault(){
-      if(!this.value.props.datasourceUid && this.datasource?.length === 1){
-        this.value.props.datasourceUid = this.datasource[0].uid
-      }
+function dummyDatasource(){
+
+  const datasources = getPresetDatasource()
+
+  datasources[item.uid] = {
+    name: "idx_stocks_1",
+    columns: [
+      { key:"code" },
+      { key:"subtractHighLowClose", type:"fn", fn: {
+          name: "subtract",
+          type: "number",
+          args: ["IDXStocks.high", "IDXStocks.low", "IDXStocks.close" ]
+        }},
+      { key:"addHighLowClose", type:"fn", fn: {
+          name: "add",
+          type: "number",
+          args: ["IDXStocks.high", "IDXStocks.low", "IDXStocks.close" ]
+        }},
+      { key:"minHighLowClose", type:"fn", fn: {
+          name: "min",
+          type: "number",
+          args: ["IDXStocks.high", "IDXStocks.low", "IDXStocks.close" ]
+        }},
+      { key:"maxHighLowClose", type:"fn", fn: {
+          name: "max",
+          type: "number",
+          args: ["IDXStocks.high", "IDXStocks.low", "IDXStocks.close" ]
+        }},
+      { key:"maxCreatedAt", type:"fn", fn: {
+          name: "max",
+          type: "date",
+          args: ["IDXStocks.createdAt" ]
+        }},
+      { key:"minCreatedAt", type:"fn", fn: {
+          name: "min",
+          type: "date",
+          args: ["IDXStocks.createdAt" ]
+        }},
+    ],
+    tables: [
+      { model:"IDXStocks" },
+    ],
+    groups: [
+      { key:"code" }
+    ]
+  }
 
-      if(!this.value.tabIndex)
-        this.value.tabIndex = 1
-    },
 
-    generateColumns(){
-      this.value.props.datasourceColumns = (this.selectedDatasource.pivot?.enabled ?
-          this.selectedDatasource.pivot.columns :
-          this.selectedDatasource.columns)
-          .map((_, __) => ({
-            ..._,
-            visible: __ < 10
-          }))
-    },
+  return
 
-    moveDown(item){
-      const index = this.value.props.datasourceColumns.indexOf(item)
-      if(index + 1 < this.value.props.datasourceColumns.length){
-        this.value.props.datasourceColumns.splice(index + 1, 0, this.value.props.datasourceColumns.splice(index, 1)[0])
-      }
+  item.props.items = [
+    {
+      code: 'ADCP',
+      subtractHighLowClose: '-49',
+      addHighLowClose: '151',
+      minHighLowClose: '50',
+      maxHighLowClose: '51',
+      maxCreatedAt: '2025-08-22T06:20:18.000Z',
+      minCreatedAt: '2025-08-22T06:15:22.000Z',
+      id: 9
     },
-
-    moveUp(item){
-      const index = this.value.props.datasourceColumns.indexOf(item)
-      if(index - 1 >= 0){
-        this.value.props.datasourceColumns.splice(index - 1, 0, this.value.props.datasourceColumns.splice(index, 1)[0])
-      }
-    },
-
-
-  },
-
-  mounted() {
-    this.applyDefault()
-  },
-
-  watch: {
-
-    'value.props.datasourceUid'(to){
-      if(to){
-        this.generateColumns()
-        this.$emit('change')
-      }
+    {
+      code: 'ADES',
+      subtractHighLowClose: '-13150',
+      addHighLowClose: '41000',
+      minHighLowClose: '13525',
+      maxHighLowClose: '13925',
+      maxCreatedAt: '2025-08-22T06:20:18.000Z',
+      minCreatedAt: '2025-08-22T06:15:22.000Z',
+      id: 10
     }
-
-  }
+  ]
 
 }
 
@@ -223,12 +165,7 @@ export default{
 
 <style module>
 
-.comp{
-  @apply flex-1 flex flex-col;
-}
-
-.columnTextbox input::placeholder{
-  @apply text-text;
+.comp {
 }
 
 </style>