@mixd-id/web-scaffold 0.2.240701 → 0.2.240703

package/src/widgets/Dashboard/VirtualColumnEdit.vue

@@ -0,0 +1,97 @@
+<template>
+	<Modal ref="modal"
+         width="360"
+         height="400">
+	  <template v-slot:head>
+	    <div class="relative p-6">
+	      <h3>Add Column</h3>
+	      <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">
+	            <path d="M6.53034 5.46965C6.23745 5.17676 5.76257 5.17676 5.46968 5.46965C5.17679 5.76255 5.17679 6.23742 5.46968 6.53031L10.9393 12L5.46967 17.4697C5.17678 17.7626 5.17678 18.2374 5.46967 18.5303C5.76256 18.8232 6.23744 18.8232 6.53033 18.5303L12 13.0606L17.4697 18.5303C17.7626 18.8232 18.2375 18.8232 18.5303 18.5303C18.8232 18.2374 18.8232 17.7626 18.5303 17.4697L13.0607 12L18.5303 6.53032C18.8232 6.23743 18.8232 5.76256 18.5303 5.46966C18.2374 5.17677 17.7626 5.17677 17.4697 5.46966L12 10.9393L6.53034 5.46965Z"/>
+	          </svg>
+	        </button>
+	      </div>
+	    </div>
+	  </template>
+	  <template v-slot:foot>
+	    <div class="p-6">
+        <Button class="w-[80px]" @click="apply">OK</Button>
+	    </div>
+	  </template>
+	  <div class="flex-1 p-6 flex flex-col gap-6">
+
+      <div>
+        <label class="text-text-400">Label</label>
+        <Textbox v-model="instance.label" />
+      </div>
+
+      <div>
+        <label class="text-text-400">Value</label>
+        <TextWithTag :items="items" variant="minimal" v-model="instance.value" />
+      </div>
+
+	  </div>
+	</Modal>
+</template>
+
+<script>
+
+export default{
+
+	inject: [ 'socketEmit2' ],
+
+  computed: {
+
+    items(){
+      return (this.columns ?? []).map(_ => ({ text:_.label, value:`{${_.key}}` }))
+    }
+
+  },
+
+  props: {
+
+    columns: Array,
+
+  },
+
+	data(){
+		return {
+      callback: null,
+      instance: null
+		}
+	},
+
+	methods: {
+
+		apply(){
+      this.instance.key = '_' + this.instance.label.toLowerCase().replace(/ /g, '_')
+
+      if(typeof this.callback === 'function')
+        this.callback(this.instance)
+      this.close()
+		},
+
+		open(instance, callback){
+      this.instance = instance
+      this.callback = callback
+      this.$refs.modal.open()
+		},
+
+		close(){
+      this.$refs.modal.close()
+		}
+
+	}
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+
+}
+
+</style>

package/src/widgets/Dashboard/VirtualTableSetting.vue

@@ -0,0 +1,234 @@
+<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="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 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>
+        </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>
+
+        <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" />
+              </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>
+                </button>
+              </div>
+            </div>
+          </template>
+        </VirtualGrid>
+
+      </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(_ => _)
+    },
+
+    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)))
+      })
+    },
+
+  },
+
+  data(){
+    return {
+      properties: {
+        'height': { component:"HeightSetting", text:'Height', group:'Layout' }
+      },
+      search: ''
+    }
+  },
+
+  emits: [ 'change' ],
+
+  inject: [ 'uploadImage', 'viewTypes' ],
+
+  props: {
+
+    datasource: Object,
+
+    index: Number,
+
+    readonly: [ Boolean, Number ],
+
+    value: {
+      type: Object,
+      required: true
+    },
+
+    viewType: String,
+
+  },
+
+  methods: {
+
+    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
+      }
+
+      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
+          }))
+    },
+
+    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])
+      }
+    },
+
+    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')
+      }
+    }
+
+  }
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+  @apply flex-1 flex flex-col;
+}
+
+.columnTextbox input::placeholder{
+  @apply text-text;
+}
+
+</style>