@mixd-id/web-scaffold 0.1.230406001

package/src/components/ImportModal.vue

@@ -0,0 +1,247 @@
+<template>
+	<Modal :state="isOpen" width="480" height="560">
+		<template v-slot:head>
+			<div class="relative p-5">
+				<div v-if="step !== 3">
+					<h3>{{ title }}</h3>
+					<p v-if="step === 1" class="mt-1 text-text-400" v-html="description"></p>
+					<p v-else-if="step === 2" class="mt-1 text-text-400" v-html="description2"></p>
+				</div>
+				<div class="absolute top-0 right-0 p-2">
+					<button type="button" class="p-2" @click="isOpen = false">
+						<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-5 flex flex-row gap-3" v-if="step === 2">
+				<Button class="w-[120px]" :disabled="!canImport" :state="isLoading ? 2 : 1" @click="proceedImport">Import</Button>
+				<Button variant="secondary" class="w-[80px]" @click="step = 1">Back</Button>
+			</div>
+		</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">
+				<div class="text-xl" v-if="!isLoading">
+					Click to <br />
+					<span class="text-primary text-lg">Upload</span>
+					file
+				</div>
+				<div v-else class="flex items-center justify-center">
+					<svg class="animate-spin aspect-square w-[48px] text-primary" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
+				</div>
+			</button>
+			<input type="file" :accept="accept" ref="uploader" class="hidden" @change="onFileUploaded"/>
+			<br />
+			<br />
+			<br />
+			<br />
+			<div v-if="templateFiles.length > 0" class="flex flex-col gap-2">
+				<a v-for="(file, index) in templateFiles" :href="file" class="text-primary">
+					Download Sample {{ templateFiles.length > 1 ? index + 1 : '' }}
+				</a>
+			</div>
+		</div>
+
+		<div class="flex-1 p-5 flex flex-col gap-3" v-else-if="step === 2">
+			<div v-for="(key, index) in importData.keys" class="flex flex-row items-center gap-2">
+				<div class="w-[120px]">
+					<strong v-if="key.required">{{ key.text }}*</strong>
+					<label v-else>{{ key.text }}</label>
+				</div>
+				<div class="flex-1">
+					<Dropdown v-model="importData.keys[index].value">
+						<option disabled selected>Pilih Kolom</option>
+						<option v-for="column in importData.columns" :value="column">{{ column }}</option>
+					</Dropdown>
+				</div>
+			</div>
+			<slot name="mapping-opt" :import-data="importData"></slot>
+		</div>
+
+		<div class="flex-1 flex items-center justify-center" v-else-if="step === 3">
+			<div class="flex flex-col items-center justify-center gap-1">
+				<svg width="96" height="96" viewBox="0 0 24 24" class="fill-green-600" xmlns="http://www.w3.org/2000/svg">
+					<path fill-rule="evenodd" clip-rule="evenodd" d="M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM20.5 12C20.5 16.6944 16.6944 20.5 12 20.5C7.30558 20.5 3.5 16.6944 3.5 12C3.5 7.30558 7.30558 3.5 12 3.5C14.5863 3.5 16.9028 4.65509 18.4618 6.47753L11.1768 13.7626C11.0791 13.8602 10.9209 13.8602 10.8232 13.7626L8.03033 10.9697C7.73744 10.6768 7.26256 10.6768 6.96967 10.9697C6.67678 11.2626 6.67678 11.7374 6.96967 12.0303L9.76256 14.8232C10.446 15.5066 11.554 15.5066 12.2374 14.8232L19.3437 7.717C20.0787 8.97466 20.5 10.4381 20.5 12Z" />
+				</svg>
+				<h3>{{ importData.result.title ?? 'Data berhasil diimport' }}</h3>
+				<p class="mb-4 text-text-400 text-center" v-html="importData.result.description"></p>
+				<div class="p-2 text-sm text-green-500 border-green-500 border-[1px] rounded-lg">
+					Total Data: {{ importData.result.count }}
+				</div>
+				<div class="px-6 my-4">
+					<VirtualTable v-if="warnings.length > 0" :columns="warningColumns" :items="warnings" class="h-[200px]"></VirtualTable>
+				</div>
+
+				<div class="flex flex-row gap-3">
+					<Button class="font-bold w-[160px]" @click="close">OK</Button>
+					<Button v-if="warnings.length > 0" variant="outline" class="font-bold w-[60px]" @click="downloadWarning">
+						<svg width="21" height="21" viewBox="0 0 24 24" class="fill-text-300 mr-1" xmlns="http://www.w3.org/2000/svg">
+							<path d="M12.7519 4.99959C12.7519 4.58537 12.4161 4.24959 12.0019 4.24959C11.5877 4.24959 11.2519 4.58537 11.2519 4.99959V13.6894L8.03216 10.4697C7.73927 10.1768 7.26439 10.1768 6.9715 10.4697C6.67861 10.7626 6.67861 11.2374 6.9715 11.5303L10.7644 15.3233C11.4479 16.0067 12.5559 16.0067 13.2393 15.3233L17.0303 11.5323C17.3232 11.2394 17.3232 10.7645 17.0303 10.4716C16.7374 10.1787 16.2625 10.1787 15.9696 10.4716L12.7519 13.6893V4.99959Z" />
+							<path fill-rule="evenodd" clip-rule="evenodd" d="M4 14.25C4.41421 14.25 4.75 14.5858 4.75 15V17C4.75 17.6904 5.30964 18.25 6 18.25H18C18.6904 18.25 19.25 17.6904 19.25 17V15C19.25 14.5858 19.5858 14.25 20 14.25C20.4142 14.25 20.75 14.5858 20.75 15V17C20.75 18.5188 19.5188 19.75 18 19.75H6C4.48122 19.75 3.25 18.5188 3.25 17V15C3.25 14.5858 3.58579 14.25 4 14.25Z" />
+						</svg>
+					</Button>
+				</div>
+			</div>
+		</div>
+
+	</Modal>
+</template>
+
+<script>
+
+import axios from "axios";
+
+export default{
+
+	emit: [ 'complete' ],
+
+	inject: [ 'socketEmit', 'socket', 'toast' ],
+
+	props: {
+
+		accept: { type: String, default: ".csv,.xlsx" },
+
+		title: { type: String, default: "Untitled Import" },
+
+		description: { type: String, default: "Import csv or xlsx file" },
+
+		description2: { type: String, default: "Map column to fields" },
+
+		urlAnalyse: { type: String },
+
+		urlImport: { type: String },
+
+		completeDescription: { type: String, default: "" },
+
+		warningFile: { type: String, default: "warning.txt" },
+
+		templateFile: String
+
+	},
+
+	computed: {
+
+		canImport(){
+			return (this.importData.keys ?? []).filter((_) => _.required && !_.value).length < 1
+		},
+
+		warnings(){
+			return (this.importData.result ?? {}).warnings ?? []
+		},
+
+		templateFiles(){
+			return (this.templateFile ?? '').split(',')
+		}
+
+	},
+
+	data(){
+		return {
+			isOpen: false,
+			isLoading: false,
+			step: 1,
+			importData: null,
+			warningColumns: [
+				{ key:"text", label:"Warning", width:"420px", visible:true }
+			]
+		}
+	},
+
+	methods: {
+
+		onFileUploaded(){
+
+			const data = new FormData()
+			data.append('file', this.$refs.uploader.files[0])
+			data.append('filename', this.$refs.uploader.files[0].name)
+
+			this.isLoading = true
+			axios({
+				url: import.meta.env.VITE_API_HOST + this.urlAnalyse,
+				method: 'POST',
+				data
+			})
+				.then(({ data:res }) => {
+
+					this.step = 2
+					this.importData = res
+
+					this.importData.keys.forEach((key) => {
+
+						const labels = [
+							...(key.labels ?? []),
+							key.text
+						]
+
+						const value = res.columns.filter((_) => labels.includes(_)).pop()
+						if(value) key.value = value
+					})
+				})
+				.catch((e) => {
+					this.toast(e.response.data)
+				})
+				.finally(() => {
+					this.isLoading = false
+				})
+		},
+
+		open(){
+			this.reset()
+			this.isOpen = true
+		},
+
+		close(){
+			this.isOpen = false
+			this.$emit('dismiss')
+			if(this.step === 3){
+				this.$emit('complete')
+			}
+		},
+
+		reset(){
+			this.step = 1
+			this.importData = {}
+		},
+
+		proceedImport(){
+
+			this.isLoading = true
+			axios({
+				url: import.meta.env.VITE_API_HOST + this.urlImport,
+				method: 'POST',
+				data: this.importData
+			})
+				.then(({ data:res }) => {
+					this.importData.result = res
+					this.step = 3
+				})
+				.catch((e) => {
+					this.toast(e.response.data)
+				})
+				.finally(() => {
+					this.isLoading = false
+				})
+		},
+
+		downloadWarning(){
+			const warningText = this.importData.result.warnings.map((_) => _.text).join("\n")
+			this.$download("data:attachment/text," + encodeURI(warningText), this.warningFile)
+		}
+
+	}
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+
+}
+
+</style>

package/src/components/ListItem.vue

@@ -0,0 +1,147 @@
+<template>
+	<div :class="$style.comp">
+		<div :class="headerClass">
+			<slot name="header"></slot>
+		</div>
+		<div :class="bodyClass">
+			<slot v-if="items && items.length > 0" name="default" v-for="(item, index) in items" :item="item" :index="index"></slot>
+			<slot v-else name="empty"></slot>
+		</div>
+		<div :class="footerClass">
+			<slot name="footer"></slot>
+		</div>
+	</div>
+</template>
+
+<script>
+
+export default{
+
+	props: {
+		items: [ Array, Object ],
+		headerClass: String,
+		bodyClass: String,
+		footerClass: String,
+	},
+
+	emits: [ 'reorder' ],
+
+	mounted() {
+		this.attachReorder()
+	},
+
+	data(){
+		return {
+			lastDragOver: null,
+			startIdx: null,
+			targetIdx: null,
+			dragItem: null
+		}
+	},
+
+	methods: {
+
+		dragOver(e){
+			e.preventDefault();
+
+			let targetItem = e.target
+			while(targetItem.parentNode.parentNode){
+				if(targetItem.parentNode.parentNode === this.$el){
+					break
+				}
+				targetItem = targetItem.parentNode
+			}
+			if(targetItem === this.dragItem) return
+
+			this.targetIdx = [ ...this.$el.children[1].children ].indexOf(targetItem)
+
+			if(this.lastDragOver){
+				this.lastDragOver.classList.remove(this.$style.dragover)
+			}
+			targetItem.classList.add(this.$style.dragover)
+			this.lastDragOver = targetItem
+		},
+
+		dragEnd(e){
+
+			e.preventDefault()
+			window.removeEventListener('dragover', this.dragOver)
+			window.removeEventListener('dragend', this.dragEnd)
+			this.dragItem.removeAttribute('draggable')
+			if(this.lastDragOver){
+				this.lastDragOver.classList.remove(this.$style.dragover)
+			}
+
+			if(this.targetIdx >= 0 && this.targetIdx !== this.startIdx){
+
+				/*if(this.items instanceof Array){
+					this.items.splice(targetIdx, 0, this.items.splice(startIdx, 1)[0])
+				}*/
+
+				/*this.$nextTick(() => {
+					this.attachReorder()
+				})*/
+
+				this.$emit('reorder', this.startIdx, this.targetIdx)
+			}
+		},
+
+		onDragStart(){
+			window.addEventListener('dragover', this.dragOver)
+			window.addEventListener('dragend', this.dragEnd)
+		},
+
+		onDrag(e){
+
+			this.dragItem = e.target
+			while(this.dragItem.parentNode.parentNode){
+				if(this.dragItem.parentNode.parentNode === this.$el){
+					break
+				}
+				this.dragItem = this.dragItem.parentNode
+			}
+
+			this.startIdx = [ ...this.$el.children[1].children ].indexOf(this.dragItem)
+			this.targetIdx = -1
+
+			this.dragItem.setAttribute('draggable', true)
+			this.dragItem.addEventListener('dragstart', this.onDragStart)
+		},
+
+		attachReorder(){
+			this.$el.querySelectorAll('[data-reorder]').forEach((comp) => {
+				comp.addEventListener('mousedown', this.onDrag)
+				comp.addEventListener('touchstart', this.onDrag)
+			})
+		}
+
+	},
+
+	watch: {
+
+		items: {
+			handler(to){
+				this.$nextTick(() => {
+					this.attachReorder()
+				})
+			},
+			deep: true
+		}
+
+	}
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+
+}
+
+.comp .dragover{
+	@apply opacity-50
+}
+
+</style>