@mixd-id/web-scaffold 0.1.230406245 → 0.1.230406247

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mixd-id/web-scaffold",
   "private": false,
-  "version": "0.1.230406245",
+  "version": "0.1.230406247",
   "scripts": {
     "dev": "vite serve",
     "build": "vite build",
@@ -26,6 +26,7 @@
     "./importer": "./src/utils/importer.js",
     "./listpage1": "./src/utils/listpage1.js",
     "./listview": "./src/utils/listview.js",
+    "./preset-selector": "./src/utils/preset-selector.js",
     "./web": "./src/utils/web.js"
   },
   "dependencies": {

package/src/components/Alert.vue

@@ -16,8 +16,8 @@
 						</div>
 
 						<div :class="$style.details">
-							<p class="text-center break-words" v-if="message">{{ message }}</p>
-							<p class="text-center break-words max-w-[420px]" v-if="stack">{{ stack }}</p>
+							<p class="text-center break-words whitespace-pre-line" v-if="message">{{ message }}</p>
+							<p class="text-center break-words max-w-[420px] whitespace-pre-line" v-if="stack">{{ stack }}</p>
 						</div>
 
 						<div :class="$style.details" v-if="details">

package/src/components/Button.vue

@@ -183,7 +183,7 @@ export default{
 }
 
 .button-outline{
-	@apply bg-transparent text-primary-500;
+	@apply bg-transparent text-primary-500 border-[1px] border-primary;
 }
 .button-outline:hover{
 }

package/src/components/Chart.vue

@@ -0,0 +1,295 @@
+<template>
+	<div v-if="readyState === 1" :class="$style.comp">
+
+    <div class="p-3 flex flex-col items-start leading-tight">
+      <small class="text-text-400">Users</small>
+      <h5 class="inline align-top cursor-pointer hover:text-primary group" @click="$refs.presetSelector.open()">
+        {{ preset.name ?? 'Preset Name' }}
+        <span v-if="badgeCount > 0" class="mx-1 min-w-[19px] px-2 h-[19px] relative top-[-2px] rounded-full bg-primary text-white inline-flex items-center justify-center">
+          {{ badgeCount }}
+        </span>
+        <svg width="13" height="13" class="inline fill-text pointer-events-none group-hover:fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"/></svg>
+      </h5>
+    </div>
+
+    <Bar class="w-full"
+        id="my-chart-id"
+        :options="chartOptions"
+        :data="chartData"
+    />
+
+    <PresetSelector ref="presetSelector" :config="config" @select="load" type="chart" />
+
+	</div>
+
+  <div v-else-if="readyState < 0" :class="$style.comp"
+       class="flex items-center justify-center gap-3">
+    <svg width="32" height="32" class="fill-red-500" 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="M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256s256-114.6 256-256S397.4 0 256 0zM256 464c-114.7 0-208-93.31-208-208S141.3 48 256 48s208 93.31 208 208S370.7 464 256 464zM359.5 133.7c-10.11-8.578-25.28-7.297-33.83 2.828L256 218.8L186.3 136.5C177.8 126.4 162.6 125.1 152.5 133.7C142.4 142.2 141.1 157.4 149.7 167.5L224.6 256l-74.88 88.5c-8.562 10.11-7.297 25.27 2.828 33.83C157 382.1 162.5 384 167.1 384c6.812 0 13.59-2.891 18.34-8.5L256 293.2l69.67 82.34C330.4 381.1 337.2 384 344 384c5.469 0 10.98-1.859 15.48-5.672c10.12-8.562 11.39-23.72 2.828-33.83L287.4 256l74.88-88.5C370.9 157.4 369.6 142.2 359.5 133.7z"/></svg>
+    <h5>{{ (error ?? {}).message ?? 'An error occurred' }}</h5>
+  </div>
+</template>
+
+<script>
+
+import { Bar } from 'vue-chartjs'
+import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale } from 'chart.js'
+import PresetSelector from "../widgets/PresetSelector.vue";
+import throttle from "lodash/throttle";
+
+ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale)
+
+export default{
+
+  components: {Bar, PresetSelector},
+
+  inject: [ 'alert', 'socket' ],
+
+  props: {
+    config: {
+      type: Object,
+      default: {}
+    },
+
+    presetKey: undefined,
+    src: undefined,
+    subscribeKey: String,
+  },
+
+  data(){
+    return {
+      badgeCount: 0,
+      readyState: 0,
+      data: {},
+      error: null,
+
+      backgroundColors: [
+        '#5D9CEC',
+        '#A0D468',
+        '#FFCE54',
+        '#FC6E51',
+        '#48CFAD',
+        '#AC92EC',
+        '#4FC1E9',
+        '#FFCE54',
+        '#ED5565',
+        '#EC87C0'
+      ],
+      borderColors: [
+        '#4A89DC',
+        '#8CC152',
+        '#F6BB42',
+        '#E9573F',
+        '#37BC9B',
+        '#967ADC',
+        '#3BAFDA',
+        '#F6BB42',
+        '#DA4453',
+        '#D770AD'
+      ],
+    }
+  },
+
+  computed: {
+
+    chartData(){
+
+      const { type, xAxis = [], yAxis = [] } = this.preset.chart ?? {}
+
+      const items = this.data.items ?? []
+
+      const datasets = []
+      if((yAxis[0] ?? {}).aggregrate === 'count'){
+        datasets.push({
+          label: 'count',
+          data: [],
+          borderColor: this.borderColors[datasets.length % this.borderColors.length],
+          backgroundColor: this.backgroundColors[datasets.length % this.backgroundColors.length],
+        })
+      }
+      else{
+        for(let key in items[0] ?? {}){
+          if(key !== 'date'){
+            datasets.push({
+              label: key,
+              data: [],
+              borderColor: this.borderColors[datasets.length % this.borderColors.length],
+              backgroundColor: this.backgroundColors[datasets.length % this.backgroundColors.length],
+            })
+          }
+        }
+      }
+
+      const labels = []
+      for(let item of this.data.items ?? []){
+        labels.push(item[xAxis[0].key])
+
+        if((yAxis[0] ?? {}).aggregrate === 'count'){
+          datasets[0].data.push(item['count'])
+        }
+        else{
+          for(let i in datasets){
+            datasets[i].data.push(item[datasets[i].label])
+          }
+        }
+      }
+
+      return {
+        labels,
+        datasets
+      }
+    },
+
+    chartOptions(){
+      if(typeof window === 'undefined') return
+
+      var style = getComputedStyle(document.body)
+      var gridColor = style.getPropertyValue('--text-100')
+      var gridColor2 = style.getPropertyValue('--text-200')
+
+      return {
+        responsive: true,
+        maintainAspectRatio: false,
+        animation: false,
+        plugins: {
+          legend: {
+            display: false, // Disable the legend
+          },
+        },
+        scales: {
+          x: {
+            //display: false, // Disable x-axis labels
+            grid: {
+              display: true,
+              color: function(context){
+                return `rgb(${gridColor2})`
+              }
+            },
+          },
+          y: {
+            beginAtZero: true, // Adjust y-axis as needed
+            grid: {
+              display: true,
+              color: function(context){
+                return `rgb(${gridColor})`
+              }
+            },
+          },
+        },
+      }
+    },
+
+    preset(){
+      return ((this.config ?? {}).presets ?? [])[(this.config ?? {}).presetIdx ?? 0] ?? {}
+    },
+
+  },
+
+  methods: {
+
+    load(){
+      this.socket.send(this.src, this.preset)
+          .then(data => this.data = data)
+          .catch(err => {
+            this.readyState = -1
+            this.error = err
+          })
+    },
+
+    loadPreset(){
+      if(this.presetKey){
+        return this.socket.send('user.preset', { key:this.presetKey, reset:'reset' in this.$route.query })
+          .then(config => {
+            Object.assign(this.config, config)
+
+            if('reset' in this.$route.query){
+              this.savePreset()
+              this.$router.replace({ name:this.$route.name })
+            }
+          })
+      }
+      return new Promise(resolve => resolve())
+    },
+
+    saveConfig: throttle(function() {
+      if(this.presetKey){
+        this.socket.send('user.preset',
+            { key:this.presetKey, config:this.config })
+      }
+    }, 1000, { leading:true }),
+
+    onSignal(event, items){
+      console.log('onSignal', event, items)
+
+      const hasData = items.some(item => item._data)
+      if(hasData){
+        for(let item of items){
+          if(item._data){
+            const length = this.data.items.length
+            this.$util.push(this.data.items, { id:item.id, ...item._data })
+            this.data.items.length > length ? this.data.items.shift() : null
+          }
+        }
+      }
+      else{
+        this.socket.send(this.src, {
+          ...this.preset,
+          id: items.map(item => item.id)
+        })
+          .then(data => {
+            if(!Array.isArray((data ?? {}).items)) return
+
+            for(let item of data.items){
+              const length = this.data.items.length
+              this.$util.push(this.data.items, item)
+              this.data.items.length > length ? this.data.items.shift() : null
+            }
+          })
+      }
+
+    },
+  },
+
+  mounted() {
+    this.loadPreset()
+        .then(() => {
+          this.readyState = 1
+          this.load()
+        })
+
+    if(this.subscribeKey){
+      this.socket.send('user.subscribe', { name:this.subscribeKey })
+      this.socket.on(this.subscribeKey, this.onSignal)
+    }
+  },
+
+  unmounted() {
+    if(this.subscribeKey) {
+      this.socket.send('user.unsubscribe', {name: this.subscribeKey})
+      this.socket.off(this.subscribeKey, this.onSignal)
+    }
+  },
+
+  watch: {
+
+    config: {
+      deep: true,
+      handler(){
+        this.saveConfig()
+      }
+    }
+
+  },
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+  @apply flex flex-col;
+  @apply bg-base-400;
+  padding-bottom: 50px;
+}
+
+</style>

package/src/components/DGrid.vue

@@ -0,0 +1,21 @@
+<template>
+	<div :class="$style.comp">
+    <slot name="default"></slot>
+	</div>
+</template>
+
+<script>
+
+export default{
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+  @apply flex flex-col md:grid grid-cols-12 gap-5 md:items-stretch;
+}
+
+</style>

package/src/components/DGridItem.vue

@@ -0,0 +1,196 @@
+<template>
+	<div :class="computedClass">
+    <slot name="default"></slot>
+
+    <div :class="`${$style.left} ${editMode ? $style.editMode : ''}`"
+         @click="editMode = true"
+         @mousedown="(e) => onMouseDown(e, 'left')"></div>
+    <div :class="`${$style.top} ${editMode ? $style.editMode : ''}`"
+         @click="editMode = true"
+         @mousedown="(e) => onMouseDown(e, 'top')"></div>
+    <div :class="`${$style.right} ${editMode ? $style.editMode : ''}`"
+         @click="editMode = true"
+         @mousedown="(e) => onMouseDown(e, 'right')"></div>
+    <div :class="`${$style.bottom} ${editMode ? $style.editMode : ''}`"
+         @click="editMode = true"
+         @mousedown="(e) => onMouseDown(e, 'bottom')"></div>
+
+    <button type="button" :class="`${$style.removeBtn} ${editMode ? $style.editMode : ''}`" @click="$emit('remove')">
+      <svg width="11" height="11" class="fill-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M378.4 440.6c8.531 10.16 7.203 25.28-2.938 33.81C370.9 478.2 365.5 480 360 480c-6.844 0-13.64-2.906-18.39-8.562L192 293.3l-149.6 178.1C37.63 477.1 30.83 480 23.98 480c-5.453 0-10.92-1.844-15.42-5.625c-10.14-8.531-11.47-23.66-2.938-33.81L160.7 256L5.625 71.44C-2.906 61.28-1.578 46.16 8.563 37.63C18.69 29.08 33.84 30.39 42.38 40.56L192 218.7l149.6-178.1c8.547-10.17 23.67-11.47 33.81-2.938s11.47 23.66 2.938 33.81L223.3 256L378.4 440.6z"/></svg>
+    </button>
+
+	</div>
+</template>
+
+<script>
+
+export default{
+
+  emits: [ 'class-change', 'remove' ],
+
+  props: {
+
+    class: {
+      type: String,
+      default: ''
+    }
+
+  },
+
+  computed: {
+
+    computedClass(){
+      return [
+        this.$style.comp,
+        this.class
+      ]
+        .join(' ')
+    }
+
+  },
+
+  data(){
+    return {
+      drag: null,
+      editMode: false,
+    }
+  },
+
+  methods: {
+
+    onMouseDown(e, direction){
+      if(!this.editMode) return
+
+      this.drag = {
+        x: e.clientX,
+        y: e.clientY,
+        colSize: Math.round(this.$el.clientWidth / 12),
+        target: e.target,
+        direction
+      }
+
+      window.addEventListener('mousemove', this.onMouseMove)
+      window.addEventListener('mouseup', this.onMouseUp)
+    },
+
+    onMouseMove(e){
+
+      switch(this.drag.direction){
+
+        case 'right':
+          const distanceX = e.clientX - this.drag.x
+
+          if(Math.abs(distanceX) > 35){
+            const match = this.class.match(/col-span-(\d+)/)
+            console.log(match)
+            const colSpan = match ? parseInt(match[1]) : 1
+            const nextColSpan = distanceX > 0 ? colSpan + 1 <= 12 ? colSpan + 1 : 12 :
+                colSpan - 1 >= 1 ? colSpan - 1 : 1
+            console.log(colSpan, nextColSpan)
+
+            console.log(2, this.class)
+            const nextClass = match ? this.class.replace(`col-span-${colSpan}`, `col-span-${nextColSpan}`) :
+                `${this.class} col-span-${nextColSpan}`
+            console.log(2, nextClass)
+
+            this.drag.x = e.clientX
+            this.$emit('class-change', nextClass)
+          }
+          break
+
+        case 'bottom':
+          const distanceY = e.clientY - this.drag.y
+          if(Math.abs(distanceY) > 20){
+            const match = this.class.match(/row-span-(\d+)/)
+            const rowSpan = match ? parseInt(match[1]) : 1
+            const nextRowSpan = distanceY > 0 ? rowSpan + 1 <= 12 ? rowSpan + 1 : 12 :
+                rowSpan - 1 >= 1 ? rowSpan - 1 : 1
+
+            match ? this.class.replace(`row-span-${rowSpan}`, `row-span-${nextRowSpan}`) :
+                this.class += ` row-span-${nextRowSpan}`
+
+            this.drag.y = e.clientY
+            this.$emit('class-change', this.class)
+          }
+          break
+      }
+
+    },
+
+    onMouseUp(e){
+
+      window.removeEventListener('mousemove', this.onMouseMove)
+      window.removeEventListener('mouseup', this.onMouseUp)
+    },
+
+    checkEditMode(e){
+
+      if(e.target.closest(`.${this.$style.comp}`) !== this.$el){
+        this.editMode = false
+      }
+
+    },
+
+  },
+
+  watch: {
+
+    editMode(to){
+      to ? window.addEventListener('click', this.checkEditMode) :
+          window.removeEventListener('click', this.checkEditMode)
+    }
+
+  }
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+  @apply relative flex;
+}
+
+.top{
+  @apply h-[3px];
+  @apply absolute top-[-6px] right-[-6px] left-[-6px] cursor-move bg-transparent hover:bg-text-50;
+}
+.top.editMode{
+  @apply cursor-n-resize bg-primary hover:bg-primary;
+}
+
+.bottom{
+  @apply h-[3px];
+  @apply absolute bottom-[-6px] right-[-6px] left-[-6px] cursor-move bg-transparent hover:bg-text-50;
+}
+.bottom.editMode{
+  @apply cursor-s-resize bg-primary hover:bg-primary;
+}
+
+.left{
+  @apply w-[3px];
+  @apply absolute top-[-6px] left-[-6px] bottom-[-6px] cursor-move bg-transparent hover:bg-text-50;
+}
+.left.editMode{
+  @apply cursor-w-resize bg-primary hover:bg-primary;
+}
+
+.right{
+  @apply w-[3px];
+  @apply absolute top-[-6px] right-[-6px] bottom-[-6px] cursor-move bg-transparent hover:bg-text-50;
+}
+.right.editMode{
+  @apply cursor-e-resize bg-primary hover:bg-primary;
+}
+
+.removeBtn{
+  @apply absolute top-[.5rem] right-[.5rem] hidden;
+  @apply w-[24px] h-[24px] rounded-full bg-primary;
+  @apply items-center justify-center;
+}
+.removeBtn.editMode{
+  @apply flex;
+}
+
+</style>

package/src/components/ImportModal.vue

@@ -26,7 +26,7 @@
 		</template>
 
 		<div class="flex-1 p-5 flex flex-col items-center justify-center" v-if="step === 1">
-			<button type="button" @click="$refs.uploader.click()" class="rounded-3xl w-[200px] bg-base-300 px-6 aspect-square flex items-center justify-center text-center border-dashed border-[3px] border-text-100">
+			<button type="button" @click="$refs.uploader.click()" class="rounded-3xl w-[160px] bg-base-300 px-6 aspect-square flex items-center justify-center text-center border-dashed border-[3px] border-text-100">
 				<div class="text-xl" v-if="!isLoading">
 					Click to <br />
 					<span class="text-primary text-lg">Upload</span>
@@ -55,7 +55,7 @@
 					<label v-else>{{ key.text }}</label>
 				</div>
 				<div class="flex-1">
-					<Dropdown v-model="importData.keys[index].value">
+					<Dropdown v-model="importData.keys[index].value" :class="key.required ? 'w-full' : 'w-[210px]'">
 						<option disabled selected>Pilih Kolom</option>
 						<option v-for="column in importData.columns" :value="column">{{ column }}</option>
 					</Dropdown>