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

fix: mobile view for batch dashboard

Browse Source
This commit is contained in:
Jannat Patel
2026-02-18 10:58:49 +05:30
parent af273a9a1c
commit 6f86b822bf
9 changed files with 28 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
cypress/e2e/batch_creation.cy.js
View File

@@ -54,25 +54,21 @@ describe("Batch Creation", () => {
cy.get("button").contains("Create").click(); cy.get("button").contains("Create").click();
cy.get("span").contains("New Batch").click(); cy.get("span").contains("New Batch").click();
cy.wait(500); cy.wait(500);
cy.url().should("include", "/batches/new/edit");
cy.get("label").contains("Title").type("Test Batch"); cy.get("label").contains("Title").type("Test Batch");
cy.get("label").contains("Start Date").type("2030-10-01"); cy.get("label").contains("Start Date").type("2030-10-01");
cy.get("label").contains("End Date").type("2030-10-31"); cy.get("label").contains("End Date").type("2030-10-31");
cy.get("label").contains("Start Time").type("10:00"); cy.get("label").contains("Start Time").type("10:00");
cy.get("label").contains("End Time").type("11:00"); cy.get("label").contains("End Time").type("11:00");
cy.get("label").contains("Timezone").type("IST"); cy.get("label").contains("Timezone").type("IST");
cy.get("label").contains("Seat Count").type("10"); cy.get("label").contains("Seat Count").type("10");
cy.get("label").contains("Published").click();
cy.get("label") cy.get("label")
.contains("Short Description") .contains("Description")
.type("Test Batch Short Description to test the UI"); .type("Test Batch Short Description to test the UI");
cy.get("div[contenteditable=true").invoke( cy.get("div[contenteditable=true").invoke(
"text", "text",
"Test Batch Description. I need a very big description to test the UI. This is a very big description. It contains more than once sentence. Its meant to be this long as this is a UI test. Its unbearably long and I'm not sure why I'm typing this much. I'm just going to keep typing until I feel like its long enough. I think its long enough now. I'm going to stop typing now." "Test Batch Description. I need a very big description to test the UI. This is a very big description. It contains more than once sentence. Its meant to be this long as this is a UI test. Its unbearably long and I'm not sure why I'm typing this much. I'm just going to keep typing until I feel like its long enough. I think its long enough now. I'm going to stop typing now."
); );
/* Instructor */ /* Instructor */
cy.get("label") cy.get("label")
.contains("Instructors") .contains("Instructors")
@@ -90,13 +86,14 @@ describe("Batch Creation", () => {
cy.get("[id^=headlessui-combobox-option-").first().click(); cy.get("[id^=headlessui-combobox-option-").first().click();
}); });
}); });
cy.button("Save").click();
cy.get("label").contains("Published").click();
cy.button("Save").click(); cy.button("Save").click();
cy.wait(1000); cy.wait(1000);
let batchName; let batchName;
cy.url().then((url) => { cy.url().then((url) => {
console.log(url); console.log(url);
batchName = url.split("/").pop(); batchName = url.split("/").pop().split("#")[0];
cy.wrap(batchName).as("batchName"); cy.wrap(batchName).as("batchName");
}); });
cy.wait(500); cy.wait(500);
@@ -115,7 +112,7 @@ describe("Batch Creation", () => {
.click(); .click();
cy.get("@batchName").then((batchName) => { cy.get("@batchName").then((batchName) => {
cy.get(`a[href='/lms/batches/details/${batchName}'`).within(() => { cy.get(`a[href='/lms/batches/${batchName}'`).within(() => {
cy.get("div").contains("Test Batch").should("be.visible"); cy.get("div").contains("Test Batch").should("be.visible");
cy.get("div") cy.get("div")
.contains("Test Batch Short Description to test the UI") .contains("Test Batch Short Description to test the UI")
@@ -135,7 +132,7 @@ describe("Batch Creation", () => {
.contains("Seats Left") .contains("Seats Left")
.should("be.visible"); .should("be.visible");
}); });
cy.get(`a[href='/lms/batches/details/${batchName}'`).click(); cy.get(`a[href='/lms/batches/${batchName}'`).click();
}); });
cy.get("div").contains("Test Batch").should("be.visible"); cy.get("div").contains("Test Batch").should("be.visible");
@@ -157,14 +154,14 @@ describe("Batch Creation", () => {
"Test Batch Description. I need a very big description to test the UI. This is a very big description. It contains more than once sentence. Its meant to be this long as this is a UI test. Its unbearably long and I'm not sure why I'm typing this much. I'm just going to keep typing until I feel like its long enough. I think its long enough now. I'm going to stop typing now." "Test Batch Description. I need a very big description to test the UI. This is a very big description. It contains more than once sentence. Its meant to be this long as this is a UI test. Its unbearably long and I'm not sure why I'm typing this much. I'm just going to keep typing until I feel like its long enough. I think its long enough now. I'm going to stop typing now."
) )
.should("be.visible"); .should("be.visible");
cy.get("button:visible").contains("Manage Batch").click(); cy.get("button:visible").contains("Dashboard").click();
/* Add student to batch */ /* Add student to batch */
cy.get("button").contains("Students").click(); cy.get("button").contains("Enroll").click();
cy.get("button").contains("Add").click();
cy.get('div[role="dialog"]') cy.get('div[role="dialog"]')
.first() .first()
.find("input[id^='headlessui-combobox-input-v-']") .find("div[label='Student']")
.find("button")
.first() .first()
.click(); .click();
cy.get("input[placeholder='Search']").type(randomEmail); cy.get("input[placeholder='Search']").type(randomEmail);
@@ -172,7 +169,7 @@ describe("Batch Creation", () => {
cy.get("button").contains("Submit").click(); cy.get("button").contains("Submit").click();
// Verify Seat Count // Verify Seat Count
cy.get("span").contains("Details").click(); cy.get("button:visible").contains("Overview").click();
cy.contains("div:visible", "9 Seats Left").should("be.visible"); cy.contains("div:visible", "9 Seats Left").should("be.visible");
}); });
}); });

3
frontend/components.d.ts vendored
View File

@@ -8,7 +8,6 @@ export {}
/* prettier-ignore */ /* prettier-ignore */
declare module 'vue' { declare module 'vue' {
export interface GlobalComponents { export interface GlobalComponents {
AnnouncementModal: typeof import('./src/components/Modals/AnnouncementModal.vue')['default']
Apps: typeof import('./src/components/Sidebar/Apps.vue')['default'] Apps: typeof import('./src/components/Sidebar/Apps.vue')['default']
AppSidebar: typeof import('./src/components/Sidebar/AppSidebar.vue')['default'] AppSidebar: typeof import('./src/components/Sidebar/AppSidebar.vue')['default']
AssessmentModal: typeof import('./src/components/Modals/AssessmentModal.vue')['default'] AssessmentModal: typeof import('./src/components/Modals/AssessmentModal.vue')['default']
@@ -22,9 +21,7 @@ declare module 'vue' {
BadgeForm: typeof import('./src/components/Settings/BadgeForm.vue')['default'] BadgeForm: typeof import('./src/components/Settings/BadgeForm.vue')['default']
Badges: typeof import('./src/components/Settings/Badges.vue')['default'] Badges: typeof import('./src/components/Settings/Badges.vue')['default']
BatchCourseModal: typeof import('./src/components/Modals/BatchCourseModal.vue')['default'] BatchCourseModal: typeof import('./src/components/Modals/BatchCourseModal.vue')['default']
BatchStudentProgress: typeof import('./src/components/Modals/BatchStudentProgress.vue')['default']
BrandSettings: typeof import('./src/components/Settings/BrandSettings.vue')['default'] BrandSettings: typeof import('./src/components/Settings/BrandSettings.vue')['default']
BulkCertificates: typeof import('./src/components/Modals/BulkCertificates.vue')['default']
Categories: typeof import('./src/components/Settings/Categories.vue')['default'] Categories: typeof import('./src/components/Settings/Categories.vue')['default']
CertificationLinks: typeof import('./src/components/CertificationLinks.vue')['default'] CertificationLinks: typeof import('./src/components/CertificationLinks.vue')['default']
ChapterModal: typeof import('./src/components/Modals/ChapterModal.vue')['default'] ChapterModal: typeof import('./src/components/Modals/ChapterModal.vue')['default']

5
frontend/src/pages/Batches/BatchDetail.vue
View File

@@ -37,7 +37,10 @@
<div v-else> <div v-else>
<Tabs :tabs="tabs" v-model="tabIndex"> <Tabs :tabs="tabs" v-model="tabIndex">
<template #tab-panel="{ tab }"> <template #tab-panel="{ tab }">
<div v-if="tab.label == 'Discussions'" class="w-[75%] mx-auto mt-5"> <div
v-if="tab.label == 'Discussions'"
class="w-[90%] lg:w-[75%] mx-auto mt-5"
>
<Discussions <Discussions
doctype="LMS Batch" doctype="LMS Batch"
:docname="batch.data.name" :docname="batch.data.name"

4
frontend/src/pages/Batches/BatchForm.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<div class=""> <div class="">
<div class="grid grid-cols-[3fr,2fr]"> <div class="grid grid-cols-1 lg:grid-cols-[3fr,2fr]">
<div v-if="batchDetail.doc" class="py-5 h-[88vh] overflow-y-auto"> <div v-if="batchDetail.doc" class="py-5 lg:h-[88vh] lg:overflow-y-auto">
<div class="px-5 pb-5 space-y-5 border-b mb-5"> <div class="px-5 pb-5 space-y-5 border-b mb-5">
<div class="text-lg text-ink-gray-9 font-semibold mb-4"> <div class="text-lg text-ink-gray-9 font-semibold mb-4">
{{ __('Details') }} {{ __('Details') }}

8
frontend/src/pages/Batches/components/AdminBatchDashboard.vue
View File

@@ -24,9 +24,9 @@
/> />
</div> </div>
<div class="grid grid-cols-[3fr_2fr] gap-5 items-start"> <div class="grid grid-cols-1 lg:grid-cols-[3fr_2fr] gap-5 items-start">
<div v-if="students.data?.length" class="border rounded-lg py-3 px-4"> <div class="border rounded-lg py-3 px-4 order-2 lg:order-1">
<div class="flex items-center justify-between mb-3"> <div class="flex items-center justify-between space-x-2 mb-3">
<div class="text-lg text-ink-gray-9 font-semibold"> <div class="text-lg text-ink-gray-9 font-semibold">
{{ __('Students') }} {{ __('Students') }}
</div> </div>
@@ -122,7 +122,7 @@
</div> </div>
</div> </div>
<div> <div class="order-1 lg:order-2">
<AxisChart <AxisChart
v-if="showProgressChart" v-if="showProgressChart"
class="border rounded-lg p-3 min-h-[300px]" class="border rounded-lg p-3 min-h-[300px]"

4
frontend/src/pages/Batches/components/Announcements.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<div class="w-[75%] mx-auto mt-5"> <div class="w-[90%] lg:w-[75%] mx-auto mt-5">
<div class="text-ink-gray-9 font-semibold text-lg mb-5"> <div class="text-ink-gray-9 font-semibold text-lg mb-5">
{{ __('Announcements') }} {{ __('Announcements') }}
</div> </div>
@@ -24,7 +24,7 @@
</div> </div>
</div> </div>
</div> </div>
<div v-else class="text-ink-gray-7"> <div v-else class="text-ink-gray-7 leading-5">
{{ __('No announcements have been made yet for this batch') }} {{ __('No announcements have been made yet for this batch') }}
</div> </div>
</div> </div>

2
frontend/src/pages/Batches/components/BatchDashboard.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<div class="h-[88vh]"> <div class="h-[88vh]">
<div class="grid grid-cols-[2fr,1fr] gap-5"> <div class="grid grid-cols-1 lg:grid-cols-[2fr,1fr] gap-5">
<div class="p-5"> <div class="p-5">
<div class="mb-8 space-y-2"> <div class="mb-8 space-y-2">
<div class="text-lg text-ink-gray-9 font-semibold"> <div class="text-lg text-ink-gray-9 font-semibold">

2
frontend/src/pages/Batches/components/BatchStudentProgress.vue
View File

@@ -197,7 +197,7 @@ const redirectToCourse = (row: any) => {
} }
const assessmentColumns = [ const assessmentColumns = [
{ key: 'title', label: 'Assessment', align: 'left' }, { key: 'title', label: 'Assessment', align: 'left', width: '60%' },
{ key: 'status', label: 'Percentage/Status', align: 'right' }, { key: 'status', label: 'Percentage/Status', align: 'right' },
] ]

6
frontend/src/pages/Batches/components/LiveClass.vue
View File

@@ -2,10 +2,10 @@
<div class="p-5"> <div class="p-5">
<div <div
v-if="isAdmin() && !props.zoomAccount" v-if="isAdmin() && !props.zoomAccount"
class="flex items-center space-x-2 mb-5 bg-surface-amber-1 px-3 py-2 rounded-lg text-ink-amber-3" class="flex lg:items-center space-x-2 mb-5 bg-surface-amber-1 px-3 py-2 rounded-lg text-ink-amber-3"
> >
<AlertCircle class="size-4 stroke-1.5" /> <AlertCircle class="size-7 md:size-4 stroke-1.5" />
<span> <span class="leading-5">
{{ {{
__( __(
'Link a Zoom account to this batch from the Settings tab to create live classes' 'Link a Zoom account to this batch from the Settings tab to create live classes'