frappe-ui 0.1.225 → 0.1.227

package/frappe/DataImport/DataImport.vue

@@ -3,9 +3,11 @@
 		class="sticky flex items-center justify-between space-x-28 top-0 z-10 border-b bg-surface-white px-3 py-2.5 sm:px-5"
     >
       <Breadcrumbs :items="breadcrumbs" />
-      <ImportSteps class="flex-1" v-if="step != 'list'" :data="data" :step="step" @updateStep="updateStep" />
+      <ImportSteps class="flex-1 hidden lg:flex" v-if="step != 'list'" :data="data" :step="step" @updateStep="updateStep" />
   </header>
   <div>
+      <ImportSteps class="flex-1 lg:hidden w-[90%] mx-auto mt-5" v-if="step != 'list'" :data="data" :step="step" @updateStep="updateStep" />
+
     <DataImportList
       v-if="step === 'list'"
       :dataImports="dataImports"
@@ -24,7 +26,7 @@
     <MappingStep
       v-else-if="step === 'map'"
       :dataImports="dataImports"
-      :data="data"
+      :data="data as DataImport"
       :fields="fields"
       @updateStep="updateStep"
     />
@@ -32,9 +34,9 @@
     <PreviewStep
       v-else-if="step === 'preview'"
       :dataImports="dataImports"
-      :data="data"
+      :data="data as DataImport"
       :fields="fields"
-      :doctypeMap="doctypeMap"
+      :doctypeMap="doctypeMap as Record<string, { title: string; listRoute?: string; pageRoute?: string }>"
       @updateStep="updateStep"
     />
   </div>
@@ -52,7 +54,7 @@ import PreviewStep from './PreviewStep.vue'
 import UploadStep from './UploadStep.vue'
 
 const route = useRoute()
-const step = ref('list')
+const step = ref<'upload' | 'map' | 'list' | 'preview'>('list')
 const data = ref<DataImport | null>(null)
 
 const props = defineProps<Partial<DataImportProps>>()
@@ -76,7 +78,7 @@ const props = defineProps<Partial<DataImportProps>>()
 
 const fields = createResource({
   url: "frappe.desk.form.load.getdoctype",
-  makeParams: (values) => {
+  makeParams: (values: { doctype: string }) => {
     return {
       doctype: values.doctype,
       with_parent: 1,
@@ -86,7 +88,7 @@ const fields = createResource({
 })
 
 watch(
-  () => [props, dataImports.data],
+  () => [route.params, props, dataImports.data],
   () => {
     if (!dataImports.data?.length) return
     if (props.doctype) {
@@ -103,9 +105,11 @@ watch(
       } else {
         step.value = 'preview'
       }
-      fields.reload({
-        doctype: data.value?.reference_doctype,
-      })
+      if (data.value?.reference_doctype) {
+        fields.reload({
+          doctype: data.value?.reference_doctype,
+        })
+      }
     }
   },
   { immediate: true },
@@ -119,15 +123,10 @@ watch(() => route.query, () => {
 
 const updateData = () => {
   data.value = dataImports.data?.find(
-    (di) => di.name === props.importName,
+    (di: DataImport) => di.name === props.importName,
     ) || null
 }
 
-const doctypeTitle = computed(() => {
-  let doctype = props.doctype || data.value?.reference_doctype
-  return props.doctypeMap?.[doctype || '']?.title || doctype || ''
-})
-
 const updateStep = (newStep: 'list' | 'upload' | 'map' | 'preview', newData: DataImport) => {
   step.value = newStep
   if (newData) {
@@ -135,16 +134,22 @@ const updateStep = (newStep: 'list' | 'upload' | 'map' | 'preview', newData: Dat
   }
 }
 
+const doctypeTitle = computed(() => {
+  let doctype = props.doctype || data.value?.reference_doctype
+  return props.doctypeMap?.[doctype || '']?.title || doctype || ''
+})
+
 const breadcrumbs = computed(() => {
   let crumbs = [
     {
       label: 'Data Import',
       route: { 
-        name: 'DataImportList', query: {
-        step: 'list'
-      } 
+        name: 'DataImportList', 
+        query: {
+          step: 'list'
+        } 
+      },
     },
-    }
   ]
 
   if (step.value !== 'list') {

package/frappe/DataImport/DataImportList.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="flex min-h-0 flex-col text-base py-5 w-[700px] mx-auto">
+    <div class="flex min-h-0 flex-col text-base py-5 w-[90%] lg:w-[700px] mx-auto">
 		<div class="flex items-center justify-between">
 			<div>
 				<div class="text-xl font-semibold mb-1 text-ink-gray-9">
@@ -33,7 +33,7 @@
 
         <div v-if="dataImports.data?.length" class="overflow-y-scroll">
             <div class="divide-y">
-                <div class="grid grid-cols-[85%,20%] items-center text-sm text-ink-gray-5 py-1.5 mx-2 my-0.5 px-1">
+                <div class="grid grid-cols-[75%,20%] lg:grid-cols-[85%,20%] items-center text-sm text-ink-gray-5 py-1.5 mx-2 my-0.5 px-1">
                     <div>
                         Name
                     </div>
@@ -43,8 +43,8 @@
                 </div>
                 <div 
                     v-for="dataImport in dataImports.data" 
-                    @click="() => redirectToImport(dataImport.name)"
-                    class="grid grid-cols-[85%,20%] items-center cursor-pointer py-2.5 px-1 mx-2"
+                    @click="() => redirectToImport(dataImport.name!)"
+                    class="grid grid-cols-[75%,20%] lg:grid-cols-[85%,20%] items-center cursor-pointer py-2.5 px-1 mx-2"
                 >
                     <div class="space-y-1">
                         <div class="text-ink-gray-7">
@@ -100,11 +100,12 @@
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
-import type { DataImports } from './types'
+import type { DataImports, DataImport } from './types'
 import { dayjs } from "../../src/utils/dayjs"
 import { getBadgeColor } from "./dataImport"
 import Badge from '../../src/components/Badge/Badge.vue'
 import type { BadgeProps } from '../../src/components/Badge/types'
+import { toast } from "../../src/components/Toast/index"
 import Button from '../../src/components/Button/Button.vue'
 import Dialog from '../../src/components/Dialog/Dialog.vue'
 import FeatherIcon from '../../src/components/FeatherIcon.vue'
@@ -137,10 +138,12 @@ watch([search, importStatus], ([newSearch, newStatus]) => {
     props.dataImports.reload()
 })
 
-const createDataImport = (close) => {
+const createDataImport = (close: () => void) => {
     props.dataImports.insert.submit({
-        reference_doctype: doctypeForImport.value,
+        reference_doctype: doctypeForImport.value!,
         import_type: 'Insert New Records',
+        mute_emails: true,
+        status: 'Pending',
     }, {
         onSuccess(data: DataImport) {
             router.replace({
@@ -150,11 +153,20 @@ const createDataImport = (close) => {
                 },
             })
             close()
+        },
+        onError(error: any) {
+            console.error(error)
+            toast.error(error.messages?.[0] || error)
         }
     })
 }
 
 const redirectToImport = (importName: string) => {
-    window.location.href = `/data-import/${importName}`;
+    router.replace({
+        name: 'DataImport',
+        params: {
+            importName
+        },
+    })
 }
 </script>

package/frappe/DataImport/ImportSteps.vue

@@ -1,6 +1,6 @@
 <template>
-    <div class="flex items-center space-x-10">
-        <div class="flex items-center space-x-2 text-ink-gray-5 cursor-pointer" 
+    <div class="flex items-center space-x-3 lg:space-x-10 text-xs lg:text-base">
+        <div class="flex items-center space-x-1 lg:space-x-2 text-ink-gray-5 cursor-pointer" 
         :class="{
             'text-ink-gray-9 font-semibold': onUploadStep
         }"
@@ -20,7 +20,7 @@
                 Upload File
             </div>
         </div>
-        <div class="flex items-center space-x-2 text-ink-gray-5" 
+        <div class="flex items-center space-x-1 lg:space-x-2 text-ink-gray-5" 
         :class="{
             'text-ink-gray-9 font-semibold': onMapStep,
             'cursor-pointer': uploadStepCompleted
@@ -38,10 +38,10 @@
                 </span>
             </div>
             <div>
-                Map File
+                Map Data
             </div>
         </div>
-        <div class="flex items-center space-x-2 text-ink-gray-5" 
+        <div class="flex items-center space-x-1 lg:space-x-2 text-ink-gray-5" 
         :class="{
             'text-ink-gray-9 font-semibold': onPreviewStep,
             'cursor-pointer': uploadStepCompleted
@@ -73,7 +73,7 @@ const emit = defineEmits(['updateStep'])
 
 const props = defineProps<{
     data: DataImport | null
-    step: 'list' | 'new' | 'map' | 'preview'
+    step: 'list' | 'upload' | 'map' | 'preview'
 }>()
 
 const onUploadStep = computed(() => {

package/frappe/DataImport/MappingStep.vue

@@ -1,17 +1,22 @@
 <template>
-    <div class="w-[700px] mx-auto pt-12 space-y-8">
-       <div class="flex items-center justify-between">
+    <div class="w-[85%] lg:w-[700px] mx-auto py-12 space-y-8">
+       <div class="flex justify-between">
             <div class="space-y-2">
                 <div class="text-lg font-semibold text-ink-gray-9">
-                    Map Data
+                    <span>
+                        Map Data
+                    </span>
+                    <Badge v-if="data?.status" :theme="getBadgeColor(data?.status)">
+                        {{ data?.status }}
+                    </Badge>
                 </div>
-                <div>
+                <div class="leading-5">
                     Change the mapping of columns from your file to fields in the system
                 </div>
             </div>
             
-            <div class="space-x-2">
-                <Button label="Start Over" @click="startOver" />
+            <div class="flex flex-col lg:flex-row space-y-2 lg:space-x-2 lg:space-y-0">
+                <Button v-if="mappingUpdated" label="Reset Mapping" @click="resetMapping" />
                 <Button label="Continue" variant="solid" @click="$emit('updateStep', 'preview')" />
             </div>
        </div>
@@ -32,7 +37,7 @@
                         :model-value="columnMappings[columnsFromFile[i - 1]]"
                         :options="columnsFromSystem"
                         placeholder="Select field" 
-                        @update:model-value="(val) => updateColumnMappings(i, val)"
+                        @update:model-value="(val: any) => updateColumnMappings(i, val)"
                     />
                 </template>
             </div>
@@ -41,16 +46,17 @@
 </template>
 <script setup lang="ts">
 import type { DataImport, DataImports } from './types';
-import { fieldsToIgnore, getPreviewData } from './dataImport'
+import { fieldsToIgnore, getBadgeColor, getPreviewData } from './dataImport'
 import { computed, nextTick, onMounted, ref } from 'vue';
+import { toast } from "../../src/components/Toast/index"
 import Autocomplete from '../../src/components/Autocomplete/Autocomplete.vue';
+import Badge from '../../src/components/Badge/Badge.vue';
 import Button from '../../src/components/Button/Button.vue';
-import FeatherIcon from '../../src/components/FeatherIcon.vue'
-import Link from "../Link/Link.vue"
 
 const previewData = ref<any>(null);
 const emit = defineEmits(['updateStep'])
 const columnMappings = ref<Record<string, string>>({});
+const mappingUpdated = ref(false);
 
 const props = defineProps<{
     dataImports: DataImports
@@ -59,7 +65,7 @@ const props = defineProps<{
 }>()
 
 onMounted(async () => {
-    previewData.value = await getPreviewData(props.data.name, props.data.import_file, props.data.google_sheets_url);
+    previewData.value = await getPreviewData(props.data.name!, props.data.import_file, props.data.google_sheets_url);
     initializeColumnMappings();
 });
 
@@ -69,6 +75,9 @@ const initializeColumnMappings = () => {
     if (props.data?.template_options)
         columnToFieldMap = JSON.parse(props.data?.template_options)?.["column_to_field_map"];
 
+        if (Object.keys(columnToFieldMap).length > 0)
+            mappingUpdated.value = true;
+
         columnsFromFile.value.forEach((col: string, index: number) => {
         if (columnToFieldMap && columnToFieldMap[index])
             mappings[col] = getMappedColumnName(columnToFieldMap[index]);
@@ -88,13 +97,15 @@ const getMappedColumnName = (fieldname: string) => {
 
 const updateColumnMappings = (index: number, value: any) => {
     if (!value) return;
-    let columnToFieldMap = JSON.parse(props.data?.template_options)?.["column_to_field_map"] || {};
+    mappingUpdated.value = true;
+    let templateOptions = props.data?.template_options ? JSON.parse(props.data?.template_options) : {};
+    let columnToFieldMap = templateOptions["column_to_field_map"] || {};
     columnToFieldMap[index - 1] = value.value;
 
     props.dataImports.setValue.submit({
         ...props.data,
         template_options: JSON.stringify({
-            ...JSON.parse(props.data?.template_options),
+            ...templateOptions,
             column_to_field_map: columnToFieldMap
         })
     }, {
@@ -103,6 +114,10 @@ const updateColumnMappings = (index: number, value: any) => {
             nextTick(() => {
                 initializeColumnMappings()
             })
+        },
+        onError: (error: any) => {
+            toast.error(error.messages?.[0] || error)
+            console.error("Error updating column mappings:", error);
         }
     })
 }
@@ -117,7 +132,7 @@ const columnsFromFile = computed(() => {
 })
 
 const columnsFromSystem = computed(() => {
-  const parent = props.data.reference_doctype
+  const parent = props.data!.reference_doctype
   const docs = props.fields.data?.docs || []
 
   return docs
@@ -141,11 +156,12 @@ const columnsFromSystem = computed(() => {
     .flat()
 })
 
-const startOver = () => {
+const resetMapping = () => {
+    let templateOptions = props.data?.template_options ? JSON.parse(props.data?.template_options) : {};
     props.dataImports.setValue.submit({
         ...props.data,
         template_options: JSON.stringify({
-            ...JSON.parse(props.data?.template_options),
+            ...templateOptions,
             column_to_field_map: {}
         })
     }, {
@@ -154,6 +170,10 @@ const startOver = () => {
             nextTick(() => {
                 initializeColumnMappings()
             })
+        },
+        onError: (error: any) => {
+            toast.error(error.messages?.[0] || error)
+            console.error("Error resetting column mappings:", error);
         }
     })
 }

package/frappe/DataImport/PreviewStep.vue

@@ -1,24 +1,25 @@
 <template>
-    <div class="text-base h-full flex flex-col w-[700px] mx-auto py-12 space-y-10">
-        <div class="flex items-center justify-between">
-            <div class="space-y-2 text-ink-gray-7">
-                <div class="text-lg font-semibold text-ink-gray-9">
-                    Review and Import
-                </div>
-                <div>
-                    Verify the data before starting the import process
+    <div class="text-base h-full flex flex-col w-[90%] lg:w-[700px] mx-auto py-12 space-y-10">
+        <div class="flex flex-col space-y-1">
+            <div class="flex items-center justify-between text-ink-gray-7">
+                <div class="flex items-center space-x-2 text-lg font-semibold text-ink-gray-9">
+                    <span>
+                        Review and Import
+                    </span>
+
+                    <Badge :theme="getBadgeColor(data.status)">
+                        {{ data.status }}
+                    </Badge>
                 </div>
-            </div>
-            <div class="space-x-2">
-                <Badge :theme="statusTheme">
-                    {{ data.status }}
-                </Badge>
                 <Button 
                     v-if="data.status != 'Success'" 
                     :label="data.status != 'Pending' ? 'Retry' : 'Import'" 
                     variant="solid" @click="startImport" />
                 <Button v-else-if="listRoute" label="Done" @click="redirectToList()" />
             </div>
+            <div class="leading-5">
+                Verify the data before starting the import process
+            </div>
         </div>
 
         <div v-if="mapping.length" class="space-y-2">
@@ -26,7 +27,7 @@
                 Column Mapping
             </div>
             <div class="border rounded-md bg-surface-gray-2 p-4 space-y-4 text-sm">
-                <div v-for="map in mapping" class="grid grid-cols-3 space-x-3">
+                <div v-for="map in mapping" class="grid grid-cols-[40%,10%,40%] lg:grid-cols-3 space-x-3 items-center">
                     <div class="">
                         {{ map[0] }}
                     </div>
@@ -85,7 +86,7 @@
             </div>
 
             <div class="rounded-md p-2" :class="importBannerClass">
-                {{ importSuccessCount }} rows imported successfully, {{ importErrorCount }} rows failed.
+                {{ importSuccessCount }} {{ importSuccessCount == 1 ? 'row' : 'rows' }} imported successfully, {{ importErrorCount }} {{ importErrorCount == 1 ? 'row' : 'rows' }} failed.
             </div>
 
             <TabButtons :buttons="tabButtons" v-model="activeTab" class="w-fit" />
@@ -152,16 +153,15 @@
     </div>
 </template>
 <script setup lang="ts">
-import { getPreviewData } from './dataImport'
+import { getPreviewData, getBadgeColor } from './dataImport'
 import { computed, nextTick, onMounted, ref, watch } from 'vue';
+import type { DataImport, DataImports } from './types';
 import Badge from '../../src/components/Badge/Badge.vue';
 import Button from '../../src/components/Button/Button.vue';
 import call from '../../src/utils/call';
 import FeatherIcon from '../../src/components/FeatherIcon.vue'
 import initSocket from "../../src/utils/socketio";
-import Tooltip from "../../src/components/Tooltip/Tooltip.vue"
 import Popover from "../../src/components/Popover/Popover.vue"
-import Switch from '../../src/components/Switch/Switch.vue';
 import TabButtons from '../../src/components/TabButtons/TabButtons.vue';
 
 const preview = ref<any>(null);
@@ -174,15 +174,16 @@ const props = defineProps<{
     dataImports: DataImports
     data: DataImport
     fields: any
-    doctypeMap: Record<string, { title: string; route: string }>
+    doctypeMap: Record<string, { title: string; listRoute?: string; pageRoute?: string }>
 }>()
 
 onMounted(async () => {
     let socket = initSocket();
-    socket.on("data_import_refresh", (data) => {
+    socket.on("data_import_refresh", (data: { data_import: string }) => {
         reloadPreviewData(data.data_import);
     })
 
+    if (!props.data?.name) return;
     preview.value = await getPreviewData(
         props.data.name, props.data.import_file, props.data.google_sheets_url
     );
@@ -227,9 +228,9 @@ const previewColumns = computed(() => {
 })
 
 const previewData = computed(() => {
-    const data = []
+    const data: Record<string, any>[] = [];
     preview.value?.data.forEach((row: any) => {
-        const dataMap = {};
+        const dataMap: Record<string, any> = {};
         Object.keys(row).forEach((key: any, index: number) => {
             let columnLabel = getColumnLabel(index)
             let mappedFieldIndex = getMappedColumnName(index);
@@ -308,7 +309,7 @@ const importBannerClass = computed(() => {
 })
 
 const mapping = computed(() => {
-    let warningMap = []
+    let warningMap: string[][] = [];
     if (!preview.value?.warnings?.length) return [];
     preview.value.warnings.forEach((warning: any) => {
         const regex = /<strong>(.*?)<\/strong>/g;
@@ -335,7 +336,7 @@ const pageRoute = computed(() => {
     return props.doctypeMap[props.data.reference_doctype]?.pageRoute
 })
 
-const redirectToPage = (docname) => {
+const redirectToPage = (docname: string) => {
     if (!pageRoute.value) return;
     window.location.href = pageRoute.value.replace('docname', docname);
 }
@@ -348,13 +349,7 @@ const tabButtons = computed(() => {
     ]
 })
 
-const statusTheme = computed(() => {
-    if (props.data?.status == 'Success') return 'green'
-    else if (props.data?.status == 'Error') return 'red'
-    else return 'orange'
-})
-
-const rowMessage = (row) => {
+const rowMessage = (row: any) => {
     return JSON.parse(row.messages)?.[0]?.message
 }
 </script>

package/frappe/DataImport/TemplateModal.vue

@@ -12,12 +12,6 @@
                         :options="['Excel', 'CSV']"
                         type="select"
                     />
-                    <FormControl
-                        label="Export Type"
-                        v-model="exportType"
-                        :options="['All Records', '5 Records', 'Blank Template']"
-                        type="select"
-                    />
                 </div>
                 <div class="border-t">
                     <p class="mt-2 text-ink-gray-5">
@@ -35,14 +29,13 @@
                             </div>
                             <div class="grid grid-cols-2 gap-5">
                                 <div v-for="field in fields.data[doctype]" :key="field.fieldname" class="flex items-center space-x-2">
-                                    <FormControl
-                                        type="checkbox"
-                                        v-model="fieldSelection[doctype][field.fieldname]"
-                                        :id="`checkbox-${field.fieldname}`"
-                                        :disabled="field.disabled"
-                                    />
+                                    <Checkbox
+                                        :id="`checkbox-${doctype}-${field.fieldname}`"
+                                        :checked="fieldSelection[doctype][field.fieldname]"
+                                        @change="(e: Event) => fieldSelection[doctype][field.fieldname] = (e.target as HTMLInputElement).checked"
+                                        />
                                     <label
-                                        :for="`checkbox-${field.fieldname}`"
+                                        :for="`checkbox-${doctype}-${field.fieldname}`"
                                         :class="{
                                             'text-ink-red-3': field.reqd
                                         }">
@@ -65,10 +58,11 @@
 </template>
 <script setup lang="ts">
 import { ref } from 'vue'
-import type { DataImport, DocField } from './types'
+import type { DocField } from './types'
 import { createResource } from '../../src/resources'
 import { fieldsToIgnore, getChildTableName } from './dataImport'
 import Button from "../../src/components/Button/Button.vue"
+import Checkbox from "../../src/components/Checkbox/Checkbox.vue"
 import Dialog from "../../src/components/Dialog/Dialog.vue"
 import FormControl from "../../src/components/FormControl/FormControl.vue"
 
@@ -114,7 +108,7 @@ const prepareDoctypeMap = (docs: any[], doctypeMap: Record<string, { fieldname:
                 fieldname: field.fieldname,
                 label: field.label,
                 reqd: field.reqd,
-                disabled: doc.name == props.doctype && field.reqd
+                disabled: doc.name == props.doctype && field.reqd ? true : false,
             }
         })
     })