fix bugs

src/App.vue

@@ -1,5 +1,4 @@
 <script setup>
-import Table from '~/components/Table.vue'
 import Editor from '~/components/Editor.vue'
 
 useHead({
@@ -70,11 +69,13 @@ onChange(async(files) => {
 	<main class="relative w-dvw flex items-center justify-center h-dvh">
 		<div
 			v-if="!csvFileBody"
-			class="ghost-white min-w-lg flex flex-col items-center justify-center gap-4 p-4"
+			class="ghost-white max-w-md flex flex-col items-center justify-center gap-4 p-4"
 		>
 			<header class="text-center">
 				<h1>CSV Umbrella</h1>
-				<p>{{ $t('about') }}</p>
+				<p class="px-8">
+					{{ $t('about') }}
+				</p>
 			</header>
 
 			<button
@@ -187,14 +188,6 @@ onChange(async(files) => {
 			v-else
 			class="h-[calc(100svh-48px)] w-[calc(100svw-48px)] flex flex-col"
 		>
-			<Table
-				v-if="false"
-				:sys-field="sysField"
-				:custom-field="customField"
-				:csv="csvFileBody"
-				@update:csv="$ev => (csvFileBody = $ev)"
-				@reset="onResetFile"
-			/>
 			<Editor
 				:name="csvFileName"
 				:csv="csvFileBody"

src/components/ColumnPicker.vue

@@ -11,7 +11,7 @@ const floatingArrow = shallowRef()
 const isOpen = computed(() => !!targetRef.value)
 const selectedColumns = computed(() => props.columns.filter(c => c))
 
-const { fields, onAddCustomField } = useFieldStore()
+const { fields, onAddCustomField, customFieldType } = useFieldStore()
 
 const socks = ref()
 const { floatingStyles, middlewareData } = useFloating(

src/components/Editor.vue

@@ -59,6 +59,7 @@ async function handleSelectColumn(idx) {
 	const result = await columnPickerRef.value.open(target, socks)
 	if (result.ev === 'select') {
 		table.columns[idx] = result.value
+		onValidate({ ev: 'select', value: { colIdx: idx } })
 	} else if (result.ev === 'remove') {
 		table.columns.splice(idx, 1)
 		csv.value = csv.value.map(
@@ -171,6 +172,7 @@ async function handleColumnEdit(ev, rowId, colIdx, val) {
 			return
 		}
 		fRow[colIdx] = result.value
+		onValidate({ ev: 'submit', value: { rowId, colIdx, val }})
 	}
 }
 
@@ -194,6 +196,101 @@ async function handleSave() {
 	})
 }
 
+const onValidate = (result) => {
+	const { ev, value } = result
+	const { colIdx } = value
+	console.log('🦕 onValidate', ev, value)
+
+	if (!table.columns[colIdx]) {
+		return
+	}
+	const field = table.columns[colIdx]
+	if (field.type === 'string') {
+		return
+	}
+
+	if (ev === 'select') {
+		onCheckValidColumn(field, colIdx)
+	} else if (ev === 'submit') {
+		onCheckValidValue(field, colIdx, value.rowId)
+		return
+	}
+}
+
+const getRegexByType = (type) => {
+	if (type === 'phone') {
+		return /^\+?[1-9]\d{1,14}$/
+	} else if (type === 'date') {
+		return /^(0[1-9]|[12][0-9]|3[01])\.(0[1-9]|1[0-2])\.(\d{4})$/
+	} else if (type === 'number') {
+		return /^-?\d{1,3}(,\d{3})*(\.\d+)?$/
+	}
+	return null
+}
+
+const onCheckValidColumn = (field, colIdx) => {
+	const { type } = field
+	const colIdxWithUuid = colIdx + HIDDEN_COL
+	const regex = getRegexByType(type)
+
+	if (!regex) {
+		return
+	}
+
+	if (type === 'phone') {
+		csv.value.forEach(row => {
+			if (!regex.test(row[colIdxWithUuid].replace(/\D/g, ''))) {
+				onDetectionInvalid({
+					field,
+					rowId: row[0],
+					colIdxWithUuid,
+				})
+			}
+		})
+	} else {
+		csv.value.forEach(row => {
+			if (!regex.test(row[colIdxWithUuid])) {
+				onDetectionInvalid({
+					field,
+					rowId: row[0],
+					colIdxWithUuid,
+				})
+			}
+		})
+	}
+}
+
+const onCheckValidValue = (field, colIdx, rowId) => {
+	const { type } = field
+
+	const idxWithUuid = colIdx + HIDDEN_COL
+	console.log('🦕 onCheckValidValue', type, colIdx, rowId, idxWithUuid)
+}
+
+const invalidCsv = ref({})
+const onDetectionInvalid = (err) => {
+	const {
+		field,
+		rowId,
+	} = err
+	if (!invalidCsv.value[`${rowId}`]) {
+		invalidCsv.value[`${rowId}`] = []
+	}
+	invalidCsv.value[`${rowId}`].push(field.id)
+}
+
+const getErrorStatusForRow = (rowId) => {
+	return Object.keys(invalidCsv.value).includes(rowId)
+}
+
+const getErrorStatusForCol = (rowId, colIdx) => {
+	if (getErrorStatusForRow(rowId) && table.columns[colIdx - HIDDEN_COL]) {
+		const field = table.columns[colIdx - HIDDEN_COL]
+		return invalidCsv.value[rowId].includes(field.id)
+	}
+	return false
+}
+
 watch(
 	() => pagination.currentPage,
 	async() => {
@@ -266,7 +363,12 @@ onMounted(async() => {
 							:id="row[0]"
 							:key="row[0]"
 						>
-							<td class="t-col-checkbox">
+							<td
+								class="t-col-checkbox"
+								:class="{
+									'bg-red-300': getErrorStatusForRow(row[0])
+								}"
+							>
 								<input
 									:id="row[0]"
 									type="checkbox"
@@ -282,6 +384,9 @@ onMounted(async() => {
 									<div
 										class="t-col-body"
 										:title="col"
+										:class="{
+											'c-red-800 underline': getErrorStatusForCol(row[0], colIdx)
+										}"
 										@click="handleColumnEdit($event, row[0], colIdx, col)"
 									>
 										{{ col }}