eduvia/lms
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: use frappe-ui for batch progress charts

Browse Source
This commit is contained in:
Jannat Patel
2025-05-12 10:37:26 +05:30
parent 12e5eedd6b
commit 0d41a1ae70
7 changed files with 548 additions and 3260 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/package.json
View File

@@ -2,6 +2,7 @@
"name": "frappe-ui-frontend",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"serve": "vite preview",
@@ -26,7 +27,7 @@
"codemirror-editor-vue3": "^2.8.0",
"dayjs": "^1.11.6",
"feather-icons": "^4.28.0",
"frappe-ui": "^0.1.134",
"frappe-ui": "^0.1.141",
"highlight.js": "^11.11.1",
"lucide-vue-next": "^0.383.0",
"markdown-it": "^14.0.0",

2
frontend/postcss.config.js
View File

@@ -1,4 +1,4 @@
module.exports = {
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},

168
frontend/src/components/BatchStudents.vue
View File

@@ -6,70 +6,100 @@
</div>
</div>
<div class="grid grid-cols-4 gap-5 mb-8">
<div
class="flex items-center border py-2 px-3 rounded-md text-ink-gray-7"
>
<div class="p-2 rounded-md bg-surface-gray-2 mr-3">
<User class="w-5 h-5 stroke-1.5" />
</div>
<div class="flex items-center space-x-2">
<span class="font-semibold">
{{ students.data?.length }}
</span>
<span class="">
{{ __('Students') }}
</span>
</div>
</div>
<div
class="flex items-center border py-2 px-3 rounded-md text-ink-gray-7"
>
<div class="p-2 rounded-md bg-surface-gray-2 mr-3">
<GraduationCap class="w-5 h-5 stroke-1.5" />
</div>
<div class="flex items-center space-x-2">
<span class="font-semibold">
{{ certificationCount.data }}
</span>
<span class="">
{{ __('Certified') }}
</span>
</div>
</div>
<NumberChart
class="border rounded-md"
:config="{ title: __('Students'), value: students.data?.length || 0 }"
/>
<div
class="flex items-center border py-2 px-3 rounded-md text-ink-gray-7"
>
<div class="p-2 rounded-md bg-surface-gray-2 mr-3">
<BookOpen class="w-5 h-5 stroke-1.5" />
</div>
<div class="flex items-center space-x-2">
<span class="font-semibold">
{{ batch.courses?.length }}
</span>
<span>
{{ __('Courses') }}
</span>
</div>
</div>
<NumberChart
class="border rounded-md"
:config="{ title: __('Certified'), value: certificationCount.data || 0 }"
/>
<div
class="flex items-center border py-2 px-3 rounded-md text-ink-gray-7"
>
<div class="p-2 rounded-md bg-surface-gray-2 mr-3">
<ShieldCheck class="w-5 h-5 stroke-1.5" />
</div>
<div class="flex items-center space-x-2">
<span class="font-semibold">
{{ assessmentCount }}
</span>
<span>
{{ __('Assessments') }}
</span>
</div>
</div>
<NumberChart
class="border rounded-md"
:config="{ title: __('Courses'), value: batch.courses?.length || 0 }"
/>
<NumberChart
class="border rounded-md"
:config="{ title: __('Assessments'), value: assessmentCount || 0 }"
/>
</div>
<AxisChart
:config="{
data: [
{
product: 'Apple Watch',
sales: 400,
},
{
product: 'Services',
sales: 400,
},
{
product: 'iMac',
sales: 350,
},
{
product: 'Accessories',
sales: 350,
},
{
product: 'iPad',
sales: 300,
},
{
product: 'AirPods',
sales: 300,
},
{
product: 'Apple TV',
sales: 300,
},
{
product: 'Others',
sales: 300,
},
{
product: 'Macbook',
sales: 250,
},
{
product: 'Beats',
sales: 250,
},
{
product: 'iPhone',
sales: 200,
},
{
product: 'HomePod',
sales: 200,
},
],
title: __('Batch Summary'),
subtitle: __('Progress of students in courses and assessments'),
xAxis: {
key: 'product',
title: 'Product',
type: 'category',
},
yAxis: {
title: __('Number of Students'),
},
swapXY: true,
series: [
{
name: 'sales',
type: 'bar',
},
],
}"
/>
<div v-if="showProgressChart" class="mb-8">
<div class="text-ink-gray-7 font-medium">
{{ __('Progress') }}
@@ -213,6 +243,7 @@
<script setup>
import {
Avatar,
AxisChart,
Button,
createResource,
FeatherIcon,
@@ -223,6 +254,7 @@ import {
ListRows,
ListView,
ListRowItem,
NumberChart,
} from 'frappe-ui'
import {
BookOpen,
@@ -331,10 +363,19 @@ const removeStudents = (selections, unselectAll) => {
}
const getChartData = () => {
let categories = {}
let data = []
console.log(students.data)
students.data.forEach(row => {
row.assessments.forEach(assessment => {
})
})
/* let categories = {}
if (!students.data?.length) return []
console.log(students.data)
Object.keys(students.data[0].courses).forEach((course) => {
categories[course] = {
value: 0,
@@ -366,12 +407,13 @@ const getChartData = () => {
})
chartOptions.value = getChartOptions(categories)
console.log(Object.values(categories).map((item) => item.value))
return [
{
name: __('Completed by Students'),
data: Object.values(categories).map((item) => item.value),
},
]
] */
}
const getChartOptions = (categories) => {

6
frontend/tailwind.config.js
View File

@@ -1,5 +1,7 @@
module.exports = {
presets: [require('frappe-ui/src/tailwind/preset')],
import frappeUIPreset from 'frappe-ui/src/tailwind/preset'
export default {
presets: [frappeUIPreset],
content: [
'./index.html',
'./src/**/*.{vue,js,ts,jsx,tsx}',

2812
frontend/yarn.lock
View File

File diff suppressed because it is too large Load Diff

3
package.json
View File

@@ -2,7 +2,8 @@
"name": "frappe_lms",
"version": "1.0.0",
"description": "Easy to use, open-source, Learning Management System",
"workspaces1": [
"type": "module",
"workspaces": [
"frappe-ui",
"frontend"
],

814
yarn.lock
View File

File diff suppressed because it is too large Load Diff