pimelon-ui 0.1.211 → 0.1.232

package/icons/index.ts

@@ -0,0 +1,10 @@
+export { default as CircleCheckIcon } from './CircleCheckIcon.vue'
+export { default as DownSolidIcon } from './DownSolidIcon.vue'
+export { default as GreenCheckIcon } from './GreenCheckIcon.vue'
+
+// Melon Icons
+export { default as HelpIcon } from './HelpIcon.vue'
+export { default as LightningIcon } from './LightningIcon.vue'
+export { default as MaximizeIcon } from './MaximizeIcon.vue'
+export { default as MinimizeIcon } from './MinimizeIcon.vue'
+export { default as StepsIcon } from './StepsIcon.vue'

package/melon/Billing/SignupBanner.vue

@@ -25,7 +25,7 @@
   </Button>
 </template>
 <script setup>
-import LightningIcon from '../Icons/LightningIcon.vue'
+import LightningIcon from '../../icons/LightningIcon.vue'
 
 const props = defineProps({
   isSidebarCollapsed: {

package/melon/Billing/TrialBanner.vue

@@ -23,7 +23,7 @@
   </Button>
 </template>
 <script setup>
-import LightningIcon from '../Icons/LightningIcon.vue'
+import LightningIcon from '../../icons/LightningIcon.vue'
 import FeatherIcon from '../../src/components/FeatherIcon.vue'
 import { Button } from '../../src/components/Button'
 import { createResource } from '../../src/resources'

package/melon/DataImport/DataImport.vue

@@ -0,0 +1,165 @@
+<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 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"
+      @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 as DataImport"
+      :fields="fields"
+      @updateStep="updateStep"
+    />
+
+    <PreviewStep
+      v-else-if="step === 'preview'"
+      :dataImports="dataImports"
+      :data="data as DataImport"
+      :fields="fields"
+      :doctypeMap="doctypeMap as Record<string, { title: string; listRoute?: string; pageRoute?: string }>"
+      @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<'upload' | 'map' | 'list' | 'preview'>('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: "melon.desk.form.load.getdoctype",
+  makeParams: (values: { doctype: string }) => {
+    return {
+      doctype: values.doctype,
+      with_parent: 1,
+    }
+  },
+  auto: false,
+})
+
+watch(
+  () => [route.params, 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'
+      }
+      if (data.value?.reference_doctype) {
+        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: DataImport) => di.name === props.importName,
+    ) || null
+}
+
+const updateStep = (newStep: 'list' | 'upload' | 'map' | 'preview', newData: DataImport) => {
+  step.value = newStep
+  if (newData) {
+    data.value = newData
+  }
+}
+
+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'
+        } 
+      },
+    },
+  ]
+
+  if (step.value !== 'list') {
+    crumbs.push({
+      label: `Importing ${doctypeTitle.value}`,
+    })
+  }
+
+  return crumbs
+})
+
+
+</script>

package/melon/DataImport/DataImportList.vue

@@ -0,0 +1,172 @@
+<template>
+    <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">
+					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-[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>
+                    <div class="pl-1">
+                        Status
+                    </div>
+                </div>
+                <div 
+                    v-for="dataImport in dataImports.data" 
+                    @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">
+                            {{ 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, 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'
+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: () => void) => {
+    props.dataImports.insert.submit({
+        reference_doctype: doctypeForImport.value!,
+        import_type: 'Insert New Records',
+        mute_emails: true,
+        status: 'Pending',
+    }, {
+        onSuccess(data: DataImport) {
+            router.replace({
+                name: 'DataImport',
+                params: {
+                    importName: data.name
+                },
+            })
+            close()
+        },
+        onError(error: any) {
+            console.error(error)
+            toast.error(error.messages?.[0] || error)
+        }
+    })
+}
+
+const redirectToImport = (importName: string) => {
+    router.replace({
+        name: 'DataImport',
+        params: {
+            importName
+        },
+    })
+}
+</script>

package/melon/DataImport/ImportSteps.vue

@@ -0,0 +1,114 @@
+<template>
+    <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
+        }"
+        @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-1 lg: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 Data
+            </div>
+        </div>
+        <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
+        }"
+        @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' | 'upload' | '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/melon/DataImport/MappingStep.vue

@@ -0,0 +1,187 @@
+<template>
+    <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">
+                    <span>
+                        Map Data
+                    </span>
+                    <Badge v-if="data?.status" :theme="getBadgeColor(data?.status)">
+                        {{ data?.status }}
+                    </Badge>
+                </div>
+                <div class="leading-5">
+                    Change the mapping of columns from your file to fields in the system
+                </div>
+            </div>
+            
+            <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>
+
+       <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: any) => updateColumnMappings(i, val)"
+                    />
+                </template>
+            </div>
+        </div>
+    </div>
+</template>
+<script setup lang="ts">
+import type { DataImport, DataImports } from './types';
+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';
+
+const previewData = ref<any>(null);
+const emit = defineEmits(['updateStep'])
+const columnMappings = ref<Record<string, string>>({});
+const mappingUpdated = ref(false);
+
+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"];
+
+        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]);
+        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;
+    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({
+            ...templateOptions,
+            column_to_field_map: columnToFieldMap
+        })
+    }, {
+        onSuccess: (data: DataImport) => {
+            emit('updateStep', 'map', { ...data })
+            nextTick(() => {
+                initializeColumnMappings()
+            })
+        },
+        onError: (error: any) => {
+            toast.error(error.messages?.[0] || error)
+            console.error("Error updating column mappings:", error);
+        }
+    })
+}
+
+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 resetMapping = () => {
+    let templateOptions = props.data?.template_options ? JSON.parse(props.data?.template_options) : {};
+    props.dataImports.setValue.submit({
+        ...props.data,
+        template_options: JSON.stringify({
+            ...templateOptions,
+            column_to_field_map: {}
+        })
+    }, {
+        onSuccess: (data: DataImport) => {
+            emit('updateStep', 'map', { ...data })
+            nextTick(() => {
+                initializeColumnMappings()
+            })
+        },
+        onError: (error: any) => {
+            toast.error(error.messages?.[0] || error)
+            console.error("Error resetting column mappings:", error);
+        }
+    })
+}
+
+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>