frappe-ui 0.1.215 → 0.1.216

package/frappe/DataImport/DataImport.vue

@@ -0,0 +1,160 @@
+<template>
+  <header
+		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" />
+  </header>
+  <div>
+    <DataImportList
+      v-if="step === 'list'"
+      :dataImports="dataImports"
+      @updateStep="updateStep"
+    />
+
+    <UploadStep
+      v-else-if="step === 'upload'"
+      :dataImports="dataImports"
+      :doctype="doctype || data?.reference_doctype"
+      :fields="fields"
+      :data="data"
+      @updateStep="updateStep"
+    />
+
+    <MappingStep
+      v-else-if="step === 'map'"
+      :dataImports="dataImports"
+      :data="data"
+      :fields="fields"
+      @updateStep="updateStep"
+    />
+
+    <PreviewStep
+      v-else-if="step === 'preview'"
+      :dataImports="dataImports"
+      :data="data"
+      :fields="fields"
+      :doctypeMap="doctypeMap"
+      @updateStep="updateStep"
+    />
+  </div>
+</template>
+<script setup lang="ts">
+import { computed, nextTick, ref, watch } from 'vue'
+import type { DataImportProps, DataImport } from './types'
+import { createListResource, createResource } from '../../src/resources'
+import { useRoute } from 'vue-router'
+import Breadcrumbs from '../../src/components/Breadcrumbs/Breadcrumbs.vue'
+import DataImportList from './DataImportList.vue'
+import ImportSteps from './ImportSteps.vue'
+import MappingStep from './MappingStep.vue'
+import PreviewStep from './PreviewStep.vue'
+import UploadStep from './UploadStep.vue'
+
+const route = useRoute()
+const step = ref('list')
+const data = ref<DataImport | null>(null)
+
+const props = defineProps<Partial<DataImportProps>>()
+
+  const dataImports = createListResource({
+  doctype: 'Data Import',
+  fields: [
+    'name',
+    'reference_doctype',
+    'import_type',
+    'status',
+    'creation',
+    'mute_emails',
+    'import_file',
+    'google_sheets_url',
+    'template_options'
+  ],
+  auto: true,
+  orderBy: 'modified desc',
+})
+
+const fields = createResource({
+  url: "frappe.desk.form.load.getdoctype",
+  makeParams: (values) => {
+    return {
+      doctype: values.doctype,
+      with_parent: 1,
+    }
+  },
+  auto: false,
+})
+
+watch(
+  () => [props, dataImports.data],
+  () => {
+    if (!dataImports.data?.length) return
+    if (props.doctype) {
+      step.value = 'upload'
+      fields.reload({
+        doctype: route.params.doctype,
+      })
+    } else if (props.importName) {
+      updateData()
+      if (!data.value?.import_file && !data.value?.google_sheets_url) {
+        step.value = 'upload'
+      } else if (step.value == 'upload' && route.query.step == 'map') {
+        step.value = route.query.step
+      } else {
+        step.value = 'preview'
+      }
+      fields.reload({
+        doctype: data.value?.reference_doctype,
+      })
+    }
+  },
+  { immediate: true },
+)
+
+watch(() => route.query, () => {
+  if (route.query.step == 'list') {
+    step.value = 'list'
+  }
+})
+
+const updateData = () => {
+  data.value = dataImports.data?.find(
+    (di) => 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) {
+    data.value = newData
+  }
+}
+
+const breadcrumbs = computed(() => {
+  let crumbs = [
+    {
+      label: 'Data Import',
+      route: { 
+        name: 'DataImportList', query: {
+        step: 'list'
+      } 
+    },
+    }
+  ]
+
+  if (step.value !== 'list') {
+    crumbs.push({
+      label: `Importing ${doctypeTitle.value}`,
+    })
+  }
+
+  return crumbs
+})
+
+
+</script>

package/frappe/DataImport/DataImportList.vue

@@ -0,0 +1,160 @@
+<template>
+    <div class="flex min-h-0 flex-col text-base py-5 w-[700px] mx-auto">
+		<div class="flex items-center justify-between">
+			<div>
+				<div class="text-xl font-semibold mb-1 text-ink-gray-9">
+					Data Import
+				</div>
+				<div class="text-ink-gray-6 leading-5">
+					Import data into your system using CSV files.
+				</div>
+			</div>
+            <Button variant="solid" @click="showModal = true">
+                <template #prefix>
+                    <FeatherIcon name="plus" class="size-4 stroke-1.5" />
+                </template>
+                Import
+            </Button>
+		</div>
+
+        <div class="flex items-center space-x-2 my-5">
+            <FormControl
+                v-model="search"
+                placeholder="Search imported files"
+                type="text"
+                class="flex-1"
+            />
+            <FormControl
+                v-model="importStatus"
+                type="select"
+                :options="importOptions"
+            />
+        </div>
+
+        <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>
+                        Name
+                    </div>
+                    <div class="pl-1">
+                        Status
+                    </div>
+                </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"
+                >
+                    <div class="space-y-1">
+                        <div class="text-ink-gray-7">
+                            {{ dataImport.reference_doctype }}
+                        </div>
+                        <div class="text-ink-gray-5">
+                            {{ dayjs(dataImport.creation).fromNow() }}
+                        </div>
+                    </div>
+                    <Badge :label="dataImport.status" :theme="getBadgeColor(dataImport.status) as BadgeProps['theme']" class="w-fit" />
+                </div>
+            </div>
+            <div class="my-5 flex justify-center">
+                <Button v-if="props.dataImports.hasNextPage" @click="props.dataImports.next()">
+                    <template #prefix>
+                        <FeatherIcon name="refresh-cw" class="size-4 stroke-1.5" />
+                    </template>
+                    Load More
+                </Button>
+            </div>
+        </div>
+        <div v-else class="text-sm italic text-ink-gray-5 mt-5">
+            No data imports found.
+        </div>
+        <Dialog
+            v-model="showModal"
+            :options="{
+                title: 'New Data Import',
+                actions: [{
+                    label: 'Continue',
+                    variant: 'solid',
+                    onClick({ close }) {
+                        createDataImport(close)
+                    }
+                }]
+            }"
+        >
+            <template #body-content>
+                <div>
+                    <Link 
+                        v-model="doctypeForImport"
+                        doctype="DocType"
+                        :filters="{
+                            'allow_import': 1
+                        }"
+                        label="Choose a Document Type to import"
+                    />
+                </div>
+            </template>
+        </Dialog>
+	</div>
+</template>
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import { useRouter } from 'vue-router'
+import type { DataImports } 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 Button from '../../src/components/Button/Button.vue'
+import Dialog from '../../src/components/Dialog/Dialog.vue'
+import FeatherIcon from '../../src/components/FeatherIcon.vue'
+import FormControl from '../../src/components/FormControl/FormControl.vue'
+import Link from "../Link/Link.vue"
+
+const search = ref('')
+const importStatus = ref('All')
+const showModal = ref(false)
+const doctypeForImport = ref<string | null>(null)
+const emit = defineEmits(['updateStep'])
+const router = useRouter()
+
+const props = defineProps<{
+    dataImports: DataImports
+}>()
+
+const importOptions = computed(() => {
+    const options = ["All", "Pending", "Success", "Partial Success", "Error", "Timed Out"]
+    return options.map(option => ({ label: option, value: option }))
+})
+
+watch([search, importStatus], ([newSearch, newStatus]) => {
+    props.dataImports.update({
+        filters: [
+            newSearch ? [['name', 'like', `%${newSearch}%`]] : [],
+            newStatus !== 'All' ? [['status', '=', newStatus]] : [],
+        ].flat(),
+    })
+    props.dataImports.reload()
+})
+
+const createDataImport = (close) => {
+    props.dataImports.insert.submit({
+        reference_doctype: doctypeForImport.value,
+        import_type: 'Insert New Records',
+    }, {
+        onSuccess(data: DataImport) {
+            router.replace({
+                name: 'DataImport',
+                params: {
+                    importName: data.name
+                },
+            })
+            close()
+        }
+    })
+}
+
+const redirectToImport = (importName: string) => {
+    window.location.href = `/data-import/${importName}`;
+}
+</script>

package/frappe/DataImport/ImportSteps.vue

@@ -0,0 +1,114 @@
+<template>
+    <div class="flex items-center space-x-10">
+        <div class="flex items-center space-x-2 text-ink-gray-5 cursor-pointer" 
+        :class="{
+            'text-ink-gray-9 font-semibold': onUploadStep
+        }"
+        @click="emit('updateStep', 'upload', { ...data })"
+        >
+            <FeatherIcon v-if="uploadStepCompleted" name="check" class="size-5 text-sm border rounded-[5px] p-0.5" :class="{
+                'text-ink-white bg-surface-gray-7': onUploadStep,
+            }"/>
+            <div v-else class="text-sm border rounded-[5px] px-1.5 py-0.5" :class="{
+                'text-ink-white bg-surface-gray-7': onUploadStep,
+            }">
+                <span>
+                    1
+                </span>
+            </div>
+            <div>
+                Upload File
+            </div>
+        </div>
+        <div class="flex items-center space-x-2 text-ink-gray-5" 
+        :class="{
+            'text-ink-gray-9 font-semibold': onMapStep,
+            'cursor-pointer': uploadStepCompleted
+        }"
+        @click="moveToMapStep()"
+        >
+            <FeatherIcon v-if="mapStepCompleted" name="check" class="size-5 text-sm border rounded-[5px] p-0.5" :class="{
+                'text-ink-white bg-surface-gray-7': onMapStep,
+            }"/>
+            <div v-else class="text-sm border rounded-[5px] px-1.5 py-0.5" :class="{
+                'text-ink-white bg-surface-gray-7': onMapStep,
+            }">
+                <span>
+                    2
+                </span>
+            </div>
+            <div>
+                Map File
+            </div>
+        </div>
+        <div class="flex items-center space-x-2 text-ink-gray-5" 
+        :class="{
+            'text-ink-gray-9 font-semibold': onPreviewStep,
+            'cursor-pointer': uploadStepCompleted
+        }"
+        @click="moveToPreviewStep()"
+        >
+            <FeatherIcon v-if="previewStepCompleted" name="check" class="size-5 text-sm border rounded-[5px] p-0.5" :class="{
+                'text-ink-white bg-surface-gray-7': onPreviewStep,
+            }"/>
+            <div v-else class="text-sm border rounded-[5px] px-1.5 py-0.5" :class="{
+                'text-ink-white bg-surface-gray-7': onPreviewStep,
+            }">
+                <span>
+                    3
+                </span>
+            </div>
+            <div>
+                Review & Import
+            </div>
+        </div>
+    </div>
+</template>
+<script setup lang="ts">
+import type { DataImport } from './types'
+import { computed } from 'vue'
+import FeatherIcon from '../../src/components/FeatherIcon.vue'
+
+const emit = defineEmits(['updateStep'])
+
+const props = defineProps<{
+    data: DataImport | null
+    step: 'list' | 'new' | 'map' | 'preview'
+}>()
+
+const onUploadStep = computed(() => {
+    return props.step === 'upload'
+})
+
+const uploadStepCompleted = computed(() => {
+    return props.data?.import_file || props.data?.google_sheets_url
+})
+
+const onMapStep = computed(() => {
+    return props.step === 'map'
+})
+
+const mapStepCompleted = computed(() => {
+    return props.data && props.data?.template_options && JSON.parse(props.data.template_options).column_to_field_map
+})
+
+const onPreviewStep = computed(() => {
+    return props.step === 'preview'
+})
+
+const previewStepCompleted = computed(() => {
+    return props.data?.status === 'Success'
+})
+
+const moveToMapStep = () => {
+    if (uploadStepCompleted.value) {
+        emit('updateStep', 'map', { ...props.data })
+    }
+}
+
+const moveToPreviewStep = () => {
+    if (uploadStepCompleted.value) {
+        emit('updateStep', 'preview', { ...props.data })
+    }
+}
+</script>

package/frappe/DataImport/MappingStep.vue

@@ -0,0 +1,167 @@
+<template>
+    <div class="w-[700px] mx-auto pt-12 space-y-8">
+       <div class="flex items-center justify-between">
+            <div class="space-y-2">
+                <div class="text-lg font-semibold text-ink-gray-9">
+                    Map Data
+                </div>
+                <div>
+                    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" />
+                <Button label="Continue" variant="solid" @click="$emit('updateStep', 'preview')" />
+            </div>
+       </div>
+
+       <div v-if="Object.keys(columnMappings).length" class="border rounded-md space-y-8">
+            <div class="grid grid-cols-2 text-ink-gray-5 border-b py-2 px-4">
+                <div>
+                    Fields in File
+                </div>
+                <div>
+                    Fields in System
+                </div>
+            </div>
+            <div class="grid grid-cols-2 py-2 px-4 gap-y-8">
+                <template v-for="i in columnsFromFile.length" :key="i">
+                    <div class="text-ink-gray-7">{{ columnsFromFile[i - 1] }}</div>
+                    <Autocomplete
+                        :model-value="columnMappings[columnsFromFile[i - 1]]"
+                        :options="columnsFromSystem"
+                        placeholder="Select field" 
+                        @update:model-value="(val) => updateColumnMappings(i, val)"
+                    />
+                </template>
+            </div>
+        </div>
+    </div>
+</template>
+<script setup lang="ts">
+import type { DataImport, DataImports } from './types';
+import { fieldsToIgnore, getPreviewData } from './dataImport'
+import { computed, nextTick, onMounted, ref } from 'vue';
+import Autocomplete from '../../src/components/Autocomplete/Autocomplete.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 props = defineProps<{
+    dataImports: DataImports
+    data: DataImport
+    fields: any
+}>()
+
+onMounted(async () => {
+    previewData.value = await getPreviewData(props.data.name, props.data.import_file, props.data.google_sheets_url);
+    initializeColumnMappings();
+});
+
+const initializeColumnMappings = () => {
+    const mappings: Record<string, string> = {};
+    let columnToFieldMap = []
+    if (props.data?.template_options)
+        columnToFieldMap = JSON.parse(props.data?.template_options)?.["column_to_field_map"];
+
+        columnsFromFile.value.forEach((col: string, index: number) => {
+        if (columnToFieldMap && columnToFieldMap[index])
+            mappings[col] = getMappedColumnName(columnToFieldMap[index]);
+        else
+            mappings[col] = col;
+    });
+
+    columnMappings.value = mappings;
+}
+
+const getMappedColumnName = (fieldname: string) => {
+    const field = columnsFromSystem.value.find((f: any) => f.value == fieldname);
+    if (field)
+        return field.label;
+    return fieldname;
+}
+
+const updateColumnMappings = (index: number, value: any) => {
+    if (!value) return;
+    let columnToFieldMap = JSON.parse(props.data?.template_options)?.["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),
+            column_to_field_map: columnToFieldMap
+        })
+    }, {
+        onSuccess: (data: DataImport) => {
+            emit('updateStep', 'map', { ...data })
+            nextTick(() => {
+                initializeColumnMappings()
+            })
+        }
+    })
+}
+
+const columnsFromFile = computed(() => {
+    const columns: string[] = [];
+    previewData.value?.columns.forEach((col: any) => {
+        if (col.header_title != "Sr. No")
+            columns.push(col.header_title);
+    })
+    return columns;
+})
+
+const columnsFromSystem = computed(() => {
+  const parent = props.data.reference_doctype
+  const docs = props.fields.data?.docs || []
+
+  return docs
+    .map((doc: any) => {
+      const isParent = doc.name === parent
+
+      const columns = doc.fields
+        .filter((f: any) => !fieldsToIgnore.includes(f.fieldtype))
+        .map((f: any) => ({
+          value: f.fieldname,
+          label: isParent
+            ? f.label
+            : `${f.label} (${getChildTableName(parent, doc.name)})`,
+        }))
+
+      return [
+        { value: "name", label: "ID" },
+        ...columns,
+      ]
+    })
+    .flat()
+})
+
+const startOver = () => {
+    props.dataImports.setValue.submit({
+        ...props.data,
+        template_options: JSON.stringify({
+            ...JSON.parse(props.data?.template_options),
+            column_to_field_map: {}
+        })
+    }, {
+        onSuccess: (data: DataImport) => {
+            emit('updateStep', 'map', { ...data })
+            nextTick(() => {
+                initializeColumnMappings()
+            })
+        }
+    })
+}
+
+const getChildTableName = (parent: string, child: string) => {
+    let parentFields = props.fields.data?.docs.find((doc: any) => doc.name == parent)?.fields || [];
+    
+    let childField = parentFields.filter((field: any) => field.options == child)[0]
+    return childField?.label || child;
+}
+</script>