MIDNIGHT/enlight-lms
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

refactor: new data import flow

Browse Source
This commit is contained in:
Jannat Patel
2025-11-20 18:01:36 +05:30
parent 1f6a0194f7
commit 9b7d763d52
17 changed files with 6111 additions and 470 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/components/DesktopLayout.vue
View File

@@ -9,5 +9,5 @@
</div>
</template>
<script setup>
import AppSidebar from './AppSidebar.vue'
import AppSidebar from '@/components/Sidebar/AppSidebar.vue'
</script>

8
frontend/src/components/Settings/Settings.vue
View File

@@ -70,9 +70,8 @@
import { Dialog, createDocumentResource } from 'frappe-ui'
import { computed, markRaw, ref, watch } from 'vue'
import { useSettings } from '@/stores/settings'
import { DataImport } from 'frappe-ui/frappe'
import SettingDetails from '@/components/Settings/SettingDetails.vue'
import SidebarLink from '@/components/SidebarLink.vue'
import SidebarLink from '@/components/Sidebar/SidebarLink.vue'
import Members from '@/components/Settings/Members.vue'
import Evaluators from '@/components/Settings/Evaluators.vue'
import Categories from '@/components/Settings/Categories.vue'
@@ -160,11 +159,6 @@ const tabsStructure = computed(() => {
},
],
},
{
label: 'Data Import',
icon: 'Database',
template: markRaw(DataImport),
},
{
label: 'Contact Us',
icon: 'Phone',

26
frontend/src/components/AppSidebar.vue → frontend/src/components/Sidebar/AppSidebar.vue
View File

@@ -181,19 +181,9 @@
</template>
<script setup>
import UserDropdown from '@/components/UserDropdown.vue'
import UserDropdown from '@/components/Sidebar/UserDropdown.vue'
import CollapseSidebar from '@/components/Icons/CollapseSidebar.vue'
import SidebarLink from '@/components/SidebarLink.vue'
import {
ref,
onMounted,
inject,
watch,
reactive,
markRaw,
h,
onUnmounted,
} from 'vue'
import SidebarLink from '@/components/Sidebar/SidebarLink.vue'
import { getSidebarLinks } from '@/utils'
import { usersStore } from '@/stores/user'
import { sessionStore } from '@/stores/session'
@@ -204,7 +194,17 @@ import PageModal from '@/components/Modals/PageModal.vue'
import { capture } from '@/telemetry'
import LMSLogo from '@/components/Icons/LMSLogo.vue'
import { useRouter } from 'vue-router'
import InviteIcon from './Icons/InviteIcon.vue'
import InviteIcon from '@/components/Icons/InviteIcon.vue'
import {
ref,
onMounted,
inject,
watch,
reactive,
markRaw,
h,
onUnmounted,
} from 'vue'
import {
BookOpen,
CircleAlert,

3
frontend/src/components/Apps.vue → frontend/src/components/Sidebar/Apps.vue
View File

@@ -1,11 +1,10 @@
<template>
<Popover placement="right-start" class="flex w-full">
<Popover placement="right-start" trigger="hover" class="flex w-full">
<template #target="{ togglePopover }">
<button
:class="[
'group w-full flex h-7 items-center justify-between rounded px-2 text-base text-ink-gray-7 hover:bg-surface-gray-2',
]"
@click.prevent="togglePopover()"
>
<div class="flex gap-2">
<LayoutGrid class="size-4 stroke-1.5" />

40
frontend/src/components/Sidebar/Configuration.vue Normal file
View File

@@ -0,0 +1,40 @@
<template>
<Popover placement="right-start" class="flex w-full" trigger="hover">
<template #target="{ togglePopover }">
<button
:class="[
'group w-full flex h-7 items-center justify-between rounded px-2 text-base text-ink-gray-7 hover:bg-surface-gray-2',
]"
>
<div class="flex gap-2">
<Wrench class="size-4 stroke-1.5 text-ink-gray-7" />
<span class="whitespace-nowrap">
{{ __('Configuration') }}
</span>
</div>
<ChevronRight class="h-4 w-4 stroke-1.5" />
</button>
</template>
<template #body-main>
<div class="text-base p-2">
<router-link :to="{
name: 'DataImportList',
query: {
step: 'list'
}
}">
<div class="flex items-center space-x-2 hover:bg-surface-gray-2 px-2 py-1 rounded-sm">
<ArrowDownToLine class="size-4 stroke-1.5 text-ink-gray-7"/>
<div class="text-sm text-ink-gray-7">
{{ __("Data Import") }}
</div>
</div>
</router-link>
</div>
</template>
</Popover>
</template>
<script setup>
import { Popover } from 'frappe-ui'
import { ArrowDownToLine, ChevronRight, Wrench } from 'lucide-vue-next'
</script>

0
frontend/src/components/SidebarLink.vue → frontend/src/components/Sidebar/SidebarLink.vue
View File

15
frontend/src/components/UserDropdown.vue → frontend/src/components/Sidebar/UserDropdown.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="p-2">
<Dropdown :options="userDropdownOptions">
<template v-slot="{ open }">
<template v-slot="{ open, close }">
<button
class="flex h-12 py-2 items-center rounded-md duration-300 ease-in-out"
:class="
@@ -64,18 +64,19 @@
</template>
<script setup>
import LMSLogo from '@/components/Icons/LMSLogo.vue'
import { sessionStore } from '@/stores/session'
import { Dropdown } from 'frappe-ui'
import Apps from '@/components/Apps.vue'
import { useRouter } from 'vue-router'
import { convertToTitleCase } from '@/utils'
import { usersStore } from '@/stores/user'
import { useSettings } from '@/stores/settings'
import { markRaw, watch, ref, onMounted, computed } from 'vue'
import { createDialog } from '@/utils/dialogs'
import SettingsModal from '@/components/Settings/Settings.vue'
import Apps from '@/components/Sidebar/Apps.vue'
import Configuration from '@/components/Sidebar/Configuration.vue'
import FrappeCloudIcon from '@/components/Icons/FrappeCloudIcon.vue'
import LMSLogo from '@/components/Icons/LMSLogo.vue'
import SettingsModal from '@/components/Settings/Settings.vue'
import {
ChevronDown,
LogIn,
@@ -168,6 +169,12 @@ const userDropdownOptions = computed(() => {
return userResource.data?.is_moderator
},
},
{
component: markRaw(Configuration),
condition: () => {
return userResource.data?.is_moderator
},
},
{
icon: FrappeCloudIcon,
label: 'Login to Frappe Cloud',

51
frontend/src/pages/Batches.vue
View File

@@ -3,7 +3,49 @@
class="sticky flex items-center justify-between top-0 z-10 border-b bg-surface-white px-3 py-2.5 sm:px-5"
>
<Breadcrumbs :items="breadcrumbs" />
<router-link
<Dropdown
v-if="canCreateBatch()"
:options="[
{
label: __('New Batch'),
icon: 'users',
onClick() {
router.push({
name: 'BatchForm',
params: { batchName: 'new' },
})
},
},
{
label: __('Import Batch'),
icon: 'upload',
onClick() {
router.push({
name: 'NewDataImport',
params: { doctype: 'LMS Batch' },
})
},
},
]"
>
<template v-slot="{ open }">
<Button variant="solid">
<template #prefix>
<Plus class="h-4 w-4 stroke-1.5" />
</template>
{{ __('Create') }}
<template #suffix>
<ChevronDown
:class="[
'w-4 h-4 stroke-1.5 ml-1 transform transition-transform',
open ? 'rotate-180' : '',
]"
/>
</template>
</Button>
</template>
</Dropdown>
<!-- <router-link
v-if="canCreateBatch()"
:to="{
name: 'BatchForm',
@@ -16,7 +58,7 @@
</template>
{{ __('Create') }}
</Button>
</router-link>
</router-link> -->
</header>
<div class="p-5 pb-10">
<div
@@ -90,13 +132,15 @@ import {
Button,
call,
createListResource,
Dropdown,
FormControl,
Select,
TabButtons,
usePageMeta,
} from 'frappe-ui'
import { computed, inject, onMounted, ref, watch } from 'vue'
import { Plus } from 'lucide-vue-next'
import { useRouter } from 'vue-router'
import { ChevronDown, Plus } from 'lucide-vue-next'
import { sessionStore } from '@/stores/session'
import BatchCard from '@/components/BatchCard.vue'
import EmptyState from '@/components/EmptyState.vue'
@@ -115,6 +159,7 @@ const is_student = computed(() => user.data?.is_student)
const currentTab = ref(is_student.value ? 'All' : 'Upcoming')
const orderBy = ref('start_date')
const readOnlyMode = window.read_only_mode
const router = useRouter()
onMounted(() => {
setFiltersFromQuery()

58
frontend/src/pages/Courses.vue
View File

@@ -3,20 +3,51 @@
class="sticky flex items-center justify-between top-0 z-10 border-b bg-surface-white px-3 py-2.5 sm:px-5"
>
<Breadcrumbs :items="breadcrumbs" />
<router-link
<Dropdown
placement="start"
side="bottom"
v-if="canCreateCourse()"
:to="{
name: 'CourseForm',
params: { courseName: 'new' },
}"
:options="[
{
label: __('New Course'),
icon: 'book-open',
onClick() {
router.push({
name: 'CourseForm',
params: { courseName: 'new' },
})
},
},
{
label: __('Import Course'),
icon: 'upload',
onClick() {
router.push({
name: 'NewDataImport',
params: { doctype: 'LMS Course' },
})
},
},
]"
>
<Button variant="solid">
<template #prefix>
<Plus class="h-4 w-4 stroke-1.5" />
</template>
{{ __('Create') }}
</Button>
</router-link>
<template v-slot="{ open }">
<Button variant="solid">
<template #prefix>
<Plus class="h-4 w-4 stroke-1.5" />
</template>
{{ __('Create') }}
<template #suffix>
<ChevronDown
:class="[
'w-4 h-4 stroke-1.5 ml-1 transform transition-transform',
open ? 'rotate-180' : '',
]"
/>
</template>
</Button>
</template>
</Dropdown>
</header>
<div class="p-5 pb-10">
<div
@@ -85,13 +116,14 @@ import {
Button,
call,
createListResource,
Dropdown,
FormControl,
Select,
TabButtons,
usePageMeta,
} from 'frappe-ui'
import { computed, inject, onMounted, ref, watch } from 'vue'
import { Plus } from 'lucide-vue-next'
import { ChevronDown, Plus } from 'lucide-vue-next'
import { sessionStore } from '@/stores/session'
import { canCreateCourse } from '@/utils'
import CourseCard from '@/components/CourseCard.vue'

39
frontend/src/pages/DataImport.vue Normal file
View File

@@ -0,0 +1,39 @@
<template>
<DataImport
:doctype="route.params.doctype"
:importName="route.params.importName"
:doctypeMap="doctypeMap"
/>
</template>
<script setup lang="ts">
import { usePageMeta } from "frappe-ui"
import { DataImport } from "frappe-ui/frappe"
import { sessionStore } from '../stores/session'
import { useRoute } from 'vue-router'
const { brand } = sessionStore()
const route = useRoute()
const doctypeMap = {
"LMS Course": {
title: "Courses",
listRoute: "/courses",
pageRoute: `/courses/docname`
},
"LMS Batch": {
title: "Batches",
listRoute: "/batches"
},
"LMS Category": {
title: "Categories",
listRoute: "/lms"
}
}
usePageMeta(() => {
return {
title: __('Data Import'),
icon: brand.favicon,
}
})
</script>

6
frontend/src/pages/Home/AdminHome.vue
View File

@@ -30,7 +30,7 @@
<div v-if="createdBatches.data?.length" class="mt-10">
<div class="flex items-center justify-between mb-3">
<span class="font-semibold text-lg">
<span class="font-semibold text-lg text-ink-gray-9">
{{ __('Upcoming Batches') }}
</span>
<router-link
@@ -88,7 +88,7 @@
<div class="grid grid-cols-2 gap-5 mt-10">
<div v-if="evals?.data?.length">
<div class="font-semibold text-lg mb-3">
<div class="font-semibold text-lg text-ink-gray-9 mb-3">
{{ __('Upcoming Evaluations') }}
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-5">
@@ -124,7 +124,7 @@
</div>
</div>
<div v-if="liveClasses?.data?.length">
<div class="font-semibold text-lg mb-3">
<div class="font-semibold text-lg text-ink-gray-9 mb-3">
{{ __('Upcoming Live Classes') }}
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-5">

17
frontend/src/router.js
View File

@@ -243,6 +243,23 @@ const routes = [
),
props: true,
},
{
path: '/data-import',
name: 'DataImportList',
component: () => import('@/pages/DataImport.vue'),
},
{
path: '/data-import/doctype/:doctype',
name: 'NewDataImport',
component: () => import('@/pages/DataImport.vue'),
props: true,
},
{
path: '/data-import/:importName',
name: 'DataImport',
component: () => import('@/pages/DataImport.vue'),
props: true,
}
]
let router = createRouter({