@mixd-id/web-scaffold 0.1.230406245 → 0.1.230406246

package/package.json

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

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/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>

package/src/components/ListItem.vue

@@ -139,7 +139,6 @@ export default{
 <style module>
 
 .comp{
-
 }
 
 .comp .dragover{

package/src/components/TextWithTag.vue

@@ -0,0 +1,196 @@
+<template>
+	<div :class="$style.comp">
+
+		<p contenteditable="true" spellcheck="false" class="flex-1" ref="html" v-html="html" @input="onInput"></p>
+
+    <div class="flex flex-row bg-base-300">
+      <div class="flex-1 flex flex-row gap-2 overflow-x-auto p-1" :class="$style.noScrollbar">
+        <button type="button" v-for="item in viewedItems" :class="$style.tag2" class="text-xs" @click="add(item)">{{ item.text ?? item.value }}</button>
+      </div>
+      <div class="p-1 flex items-center justify-center">
+        <button type="button" class="p-1" @click="$refs.modal.open()">
+          <svg width="14" height="14" class="fill-text-300 hover:fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M328 256c0 39.8-32.2 72-72 72s-72-32.2-72-72 32.2-72 72-72 72 32.2 72 72zm104-72c-39.8 0-72 32.2-72 72s32.2 72 72 72 72-32.2 72-72-32.2-72-72-72zm-352 0c-39.8 0-72 32.2-72 72s32.2 72 72 72 72-32.2 72-72-32.2-72-72-72z"/></svg>
+        </button>
+      </div>
+    </div>
+
+    <Modal ref="modal" width="360" height="360">
+      <template v-slot:head>
+        <div class="relative p-5 pb-0">
+          <h3>Select Tag</h3>
+          <div class="absolute top-0 right-0 p-2">
+            <button type="button" class="p-2" @click="$refs.modal.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>
+      <div class="flex-1 p-5 flex flex-col gap-6">
+
+        <div v-for="(group, key) in groupedItems">
+          <div>
+            <label>{{ key }}</label>
+          </div>
+          <div class="flex flex-row flex-wrap gap-2">
+            <button v-for="item in group"
+                    type="button"
+                    :class="$style.tag2"
+                    @click="add(item)" class="p-3">
+              {{ item.text ?? item.value }}
+            </button>
+          </div>
+        </div>
+
+      </div>
+    </Modal>
+	</div>
+</template>
+
+<script>
+import groupBy from "lodash/groupBy";
+
+export default{
+
+  emits: [ 'update:modelValue' ],
+
+  props:{
+
+    modelValue: String,
+
+    items: Array,
+
+  },
+
+  computed:{
+
+    groupedItems(){
+      return groupBy(this.items ?? [], 'group')
+    },
+
+    viewedItems(){
+      return (this.items ?? []).slice(0, 6)
+    },
+
+  },
+
+  data(){
+    return {
+      html: '',
+      isInternal: false
+    }
+  },
+
+  methods: {
+
+    insertElement(newNode){
+      let selection = window.getSelection();
+      if (selection.rangeCount === 0) return;
+
+      let range = selection.getRangeAt(0);
+      if(range.commonAncestorContainer.parentNode !== this.$refs.html) return
+
+      let currentNode = range.startContainer;
+
+      if (currentNode.nodeType === Node.TEXT_NODE) {
+        let offset = range.startOffset;
+        currentNode = currentNode.splitText(offset);
+        range.setStart(currentNode, 0);
+      }
+
+      range.insertNode(newNode);
+      range.setStartAfter(newNode);
+      range.setEndAfter(newNode);
+      selection.removeAllRanges();
+      selection.addRange(range);
+    },
+
+    add(item){
+      this.$refs.modal.close()
+
+      const el = document.createElement('span')
+      el.setAttribute('contenteditable', 'false')
+      el.setAttribute('class', this.$style.tag)
+      el.setAttribute('data-value', item.value)
+      el.textContent = item.text ?? item.value
+
+      this.insertElement(el)
+      this.onInput()
+    },
+
+    remove(e){
+      e.target.parentNode.removeChild(e.target)
+    },
+
+    onInput(){
+
+      const arr = []
+      for(let i = 0 ; i < this.$refs.html.childNodes.length ; i++){
+        if(this.$refs.html.childNodes[i].nodeType === 3){
+          arr.push(this.$refs.html.childNodes[i].textContent)
+        }
+        else if(this.$refs.html.childNodes[i].nodeType === 1 && this.$refs.html.childNodes[i].classList.contains(this.$style.tag)){
+          arr.push(this.$refs.html.childNodes[i].getAttribute('data-value'))
+        }
+      }
+      this.$emit('update:modelValue', arr.join(''))
+
+      this.isInternal = true
+    }
+
+  },
+
+  watch: {
+
+    modelValue: {
+      immediate: true,
+      handler(val){
+        if(this.isInternal){
+          this.isInternal = false
+          return
+        }
+
+        let html = val
+        for(let item of this.items){
+          html = html.replaceAll(item.value, `<span class="${this.$style.tag}" contenteditable="false" @click="remove" data-value="${item.value}">${item.text ?? item.value}</span>`, 'gi')
+        }
+
+        this.html = html
+      }
+    },
+
+  }
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+  @apply border-[1px] border-text-200 bg-base-50 rounded-lg min-w-[100px];
+  @apply flex flex-col gap-2;
+  @apply overflow-hidden;
+  @apply divide-y divide-text-100;
+}
+
+.comp p{
+  @apply outline-none leading-8 p-2;
+}
+
+.comp .tag{
+  @apply bg-primary text-white p-1 rounded-lg whitespace-nowrap;
+  @apply font-mono text-xs;
+}
+
+.tag2{
+  @apply bg-text-50 p-1 rounded-lg px-2 cursor-pointer;
+  @apply hover:bg-primary hover:text-white;
+}
+
+.noScrollbar::-webkit-scrollbar{
+  display: none;
+}
+
+</style>

package/src/components/Textbox.vue

@@ -173,8 +173,9 @@ export default{
 <style module>
 
 .textbox{
-	@apply flex items-center border-[1px] border-text-200 bg-base-50;
-	@apply rounded-lg overflow-hidden;
+	@apply flex items-center;
+  @apply border-[1px] border-text-200 bg-base-50 rounded-lg;
+	@apply overflow-hidden;
 }
 
 .textbox.readonly{

package/src/components/TreeView.vue

@@ -96,7 +96,6 @@ export default{
 <style module>
 
 .comp{
-
 }
 
 </style>

package/src/index.js

@@ -475,6 +475,7 @@ export default{
     app.component('FBLogin', defineAsyncComponent(() => import("./components/FBLogin.vue")))
     app.component('GSignIn', defineAsyncComponent(() => import("./components/GSignIn.vue")))
     app.component('DayTimeRange', defineAsyncComponent(() => import("./components/DayTimeRange.vue")))
+    app.component('TextWithTag', defineAsyncComponent(() => import("./components/TextWithTag.vue")))
 
     app.component('AhrefSetting', defineAsyncComponent(() => import("./widgets/AhrefSetting.vue")))
     app.component('ArticleSetting', defineAsyncComponent(() => import("./widgets/ArticleSetting.vue")))

package/src/utils/importer.js

@@ -113,7 +113,15 @@ const importRequest = async(req) => {
 
   const worksheet = workbook.worksheets[0]
 
-  let rowStart = 2
+  const row = worksheet.getRow(2)
+  let isInfoRow = false
+  row.eachCell(cell => {
+    if(cell.value.trim().startsWith('***')){
+      isInfoRow = true
+    }
+  })
+
+  let rowStart = isInfoRow ? 3 : 2
   const header = worksheet.getRow(1)
   const columnAddress = {}
   header.eachCell((cell, index) => {