#3818 - Student Application Summary - Small Screen #4348

bidyashish · 2025-02-12T17:30:15Z

Acceptance Criteria:

Resize application summary page to fit on small screen.
Update to Vuetify
Remove the margins on the side for mobile view (ok for all student pages in mobile view)

Technical

Switch the table from PrimeVue to Vuetify Data Table as a starting point.

Iphone 12

Desktop

andrewsignori-aot · 2025-02-13T17:14:50Z

sources/packages/web/src/views/student/StudentApplicationSummary.vue

Adding the comment here to make it easier to reply.
Below is what I was able to do to convert the PrimeVue table to Vuetify. Please also note the property :mobile="false/false" that define how the table will be displayed.

Mobile false

mobile true

Please note the below image has the original margins that still need to be adjusted. These changes were applied in my local main branch.

StudentApplications.vue changes

<content-group> <toggle-content :toggled="!applicationsAndCount.results?.length" message="No applications are currently available." > <v-data-table :headers="StudentApplicationsSummaryHeaders" :items="applicationsAndCount.results" :items-per-page="DEFAULT_PAGE_LIMIT" :items-per-page-options="ITEMS_PER_PAGE" :mobile="true" > <template #[`item.applicationNumber`]="{ item }"> {{ item.applicationNumber }} </template> <template #[`item.applicationName`]="{ item }"> <v-btn v-if="enableViewApplicationOnName" variant="plain" @click="$emit('goToApplication', item.id)" color="primary" >{{ item.applicationName }} <v-tooltip activator="parent" location="start" >Click To View this Application</v-tooltip > </v-btn> <span v-if="!enableViewApplicationOnName" >{{ item.applicationName }} </span> </template> <template #[`item.studyStartPeriod`]="{ item }"> {{ dateOnlyLongString(item.studyStartPeriod) }} - {{ dateOnlyLongString(item.studyEndPeriod) }} </template> <template #[`item.status`]="{ item }"> <status-chip-application :status="item.status" /> </template> <template #[`item.actions`]="{ item }"> <span v-if="manageApplication"> <span v-if=" !( item.status === ApplicationStatus.Cancelled || item.status === ApplicationStatus.Completed ) " > <v-btn :disabled="sinValidStatus !== SINStatusEnum.VALID" variant="plain" color="primary" class="label-bold" @click="$emit('editApplicationAction', item.status, item.id)" append-icon="mdi-pencil-outline" ><span class="label-bold">Edit</span> <v-tooltip activator="parent" location="start" >Click To Edit this Application</v-tooltip > </v-btn> <v-btn :disabled="sinValidStatus !== SINStatusEnum.VALID" variant="plain" color="primary" class="label-bold" @click="emitCancel(item.id)" ><span class="label-bold">Cancel</span> <v-tooltip activator="parent" location="start" >Click To Cancel this Application</v-tooltip > </v-btn> </span> </span> <span v-if="enableViewApplication"> <v-btn variant="outlined" @click="$emit('goToApplication', item.id)" >View</v-btn > </span> </template> </v-data-table> </toggle-content> </content-group>

DataTableContract.ts changes

/** * Student application summary headers. */ export const StudentApplicationsSummaryHeaders = [ { title: "Application Number", sortable: true, key: "applicationNumber" }, { title: "Name", sortable: false, key: "applicationName" }, { title: "Submitted", sortable: true, key: "submitted" }, { title: "Study Period", sortable: true, key: "studyStartPeriod" }, { title: "Status", sortable: true, key: "status" }, { title: "Actions", sortable: false, key: "actions" }, ];

Thanks for The code sample @andrewsignori-aot .

v-data-table has been updated.

dheepak-aot · 2025-02-14T20:52:26Z

sources/packages/web/src/assets/css/student.scss

+
+// Button styles
+span.v-btn__content {
+  white-space: normal !important;
+}
+
+// Mobile-specific styles
+.v-container.v-container--fluid.v-locale--is-ltr {
+  &:has(> .mobile-view) {
+    padding: 0px !important;
+  }
+}
+
+.mobile-view {
+  margin-right: 0px !important;
+  margin-left: 0px !important;
+
+  .v-card.v-theme--light.v-card--density-default.v-card--variant-elevated.mt-4.p-4.w-100 {
+    padding: 0px !important;
+  }
+
+  .v-container {
+    padding: 5px !important;
+    width: 100% !important;
+    max-width: 100% !important;
+    margin: 0 !important;
+  }
+
+  .v-row {
+    margin: 0 !important;
+  }
+
+  .v-col {
+    padding: 9px !important;
+  }
+}


What is the purpose of these styles being added here ?? If that is for the AC Remove the margins on the side for mobile view then it can be achieved by providing layout class and container class to full page container.

The impact of modifying the vuetify classes in general under mobile view could have undesired effects.

CSS is added to modify mobile view as general css are not able to be override vue general classes.

dheepak-aot · 2025-02-14T20:52:54Z

sources/packages/web/src/assets/css/student.scss

+.v-container.v-container--fluid.v-locale--is-ltr {
+  &:has(> .mobile-view) {
+    padding: 0px !important;
+  }
+}


This can have impacts outside student pages.

it is under mobile-view css and only application page is added as of now with mobile-view.
It will only work with 'mobile-view'. css

dheepak-aot · 2025-02-14T20:55:51Z

sources/packages/web/src/components/common/students/StudentApplications.vue

-        @sort="paginationAndSortEvent($event)"
-        :loading="loading"
+      <toggle-content
+        :toggled="!applicationsAndCount.results?.length"


Toggle should be enabled based on total count.

:toggled="!applicationsAndCount.count"

@dheepak-aot this is not a server-side table right now, so all the records are present on the client side and there is no count available. Please let me know if I am missing something.

Thanks @andrewsignori-aot ,
No changes made.

As pointed out by @dheepak-aot API is already accepting the pagination arguments (I missed that), hence can change it.

sources/packages/web/src/types/contracts/DataTableContract.ts

dheepak-aot · 2025-02-14T21:15:52Z

sources/packages/web/src/components/common/students/StudentApplications.vue

-          :field="StudentApplicationFields.ApplicationNumber"
-          :sortable="true"
-          header="Application #"
+        <v-data-table


This is a lazy pagination. So we must use v-data-table-server rather instead of v-data-table.

Please follow the reference code from here.

SIMS/sources/packages/web/src/views/aest/CASInvoices.vue

Line 48 in b9c9ee0

<v-data-table-server

@dheepak-aot I did not see this as lazy because a student may have a few applications over his lifetime. I would recommend helping it as it is right now and saving the server-side pagination for later improvement.

Thanks for Clarification @andrewsignori-aot
No changes made.

As pointed out by @dheepak-aot API is already accepting the pagination arguments (I missed that), hence can change it.

Update: v-data-table-server. is updated in table

dheepak-aot · 2025-02-14T21:19:35Z

Looks good after refactor. Added more comments. Please have a look.

guru-aot · 2025-02-18T23:28:00Z

sources/packages/web/src/components/common/students/StudentApplications.vue

-          :field="StudentApplicationFields.ApplicationNumber"
-          :sortable="true"
-          header="Application #"
+        <v-data-table


sources/packages/web/src/components/common/students/StudentApplications.vue

sources/packages/web/src/types/contracts/DataTableContract.ts

sonarqubecloud · 2025-02-19T18:33:01Z

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

github-actions · 2025-02-19T18:33:16Z

Backend Unit Tests Coverage Report

Totals
Statements:	22.11% ( 3914 / 17704 )
Methods:	9.96% ( 226 / 2268 )
Lines:	25.46% ( 3380 / 13276 )
Branches:	14.26% ( 308 / 2160 )

github-actions · 2025-02-19T18:33:33Z

E2E Workflow Workers Coverage Report

Totals
Statements:	65.59% ( 589 / 898 )
Methods:	59.63% ( 65 / 109 )
Lines:	68.72% ( 468 / 681 )
Branches:	51.85% ( 56 / 108 )

dheepak-aot

Thanks for making the changes. Looks good 👍

github-actions · 2025-02-19T18:35:47Z

E2E Queue Consumers Coverage Report

Totals
Statements:	87.58% ( 1418 / 1619 )
Methods:	84.66% ( 160 / 189 )
Lines:	89.72% ( 1170 / 1304 )
Branches:	69.84% ( 88 / 126 )

github-actions · 2025-02-19T18:36:46Z

E2E SIMS API Coverage Report

Totals
Statements:	69.95% ( 6282 / 8981 )
Methods:	67.39% ( 773 / 1147 )
Lines:	73.7% ( 4907 / 6658 )
Branches:	51.19% ( 602 / 1176 )

guru-aot

LGTM, nice work @bidyashish

bidyashish marked this pull request as draft February 12, 2025 17:30

revert changes

7fa3847

bidyashish force-pushed the feature/#3818-Student-Application-tech-part branch from 792e5ba to 7fa3847 Compare February 12, 2025 23:03

bidyashish added 4 commits February 12, 2025 15:12

ui

9ce573a

ui

6dc429a

ui

c0e7904

ui fix

ccf751a

bidyashish changed the title ~~udpate UI~~ #3818 - Student Application Summary - Small Screen Feb 13, 2025

bidyashish added Student Student Features Mobile/Browser Compatibility labels Feb 13, 2025

bidyashish self-assigned this Feb 13, 2025

bidyashish marked this pull request as ready for review February 13, 2025 00:10

andrewsignori-aot reviewed Feb 13, 2025

View reviewed changes

bidyashish added 3 commits February 14, 2025 10:21

udpate fix

702c4f4

update

67cc110

update

4be30a9

dheepak-aot reviewed Feb 14, 2025

View reviewed changes

sources/packages/web/src/types/contracts/DataTableContract.ts Show resolved Hide resolved

dheepak-aot reviewed Feb 14, 2025

View reviewed changes

guru-aot self-requested a review February 18, 2025 23:01

Slider fix

5aa13ce

guru-aot reviewed Feb 18, 2025

View reviewed changes

bidyashish added 2 commits February 18, 2025 16:51

use data table server

2d93a69

remove slider css

634b3d0

dheepak-aot reviewed Feb 19, 2025

View reviewed changes

sources/packages/web/src/components/common/students/StudentApplications.vue Outdated Show resolved Hide resolved

change order

8a03265

dheepak-aot reviewed Feb 19, 2025

View reviewed changes

sources/packages/web/src/types/contracts/DataTableContract.ts Outdated Show resolved Hide resolved

update sortable header

442b43a

dheepak-aot approved these changes Feb 19, 2025

View reviewed changes

guru-aot approved these changes Feb 19, 2025

View reviewed changes

bidyashish added this pull request to the merge queue Feb 19, 2025

Merged via the queue into main with commit 147bbc0 Feb 19, 2025
21 checks passed

bidyashish deleted the feature/#3818-Student-Application-tech-part branch February 19, 2025 19:17

bidyashish temporarily deployed to DEV February 19, 2025 19:29 — with GitHub Actions Inactive

bidyashish temporarily deployed to DEV February 19, 2025 19:30 — with GitHub Actions Inactive

bidyashish temporarily deployed to DEV February 19, 2025 19:33 — with GitHub Actions Inactive

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

#3818 - Student Application Summary - Small Screen #4348

#3818 - Student Application Summary - Small Screen #4348

bidyashish commented Feb 12, 2025 •

edited

Loading

andrewsignori-aot Feb 13, 2025 •

edited

Loading

bidyashish Feb 14, 2025 •

edited

Loading

dheepak-aot Feb 14, 2025

bidyashish Feb 18, 2025

dheepak-aot Feb 14, 2025

bidyashish Feb 18, 2025

dheepak-aot Feb 14, 2025

andrewsignori-aot Feb 18, 2025

bidyashish Feb 18, 2025

andrewsignori-aot Feb 19, 2025

dheepak-aot Feb 14, 2025 •

edited

Loading

andrewsignori-aot Feb 18, 2025

bidyashish Feb 18, 2025

andrewsignori-aot Feb 19, 2025

bidyashish Feb 19, 2025

dheepak-aot commented Feb 14, 2025

guru-aot Feb 18, 2025

sonarqubecloud bot commented Feb 19, 2025

github-actions bot commented Feb 19, 2025

github-actions bot commented Feb 19, 2025

dheepak-aot left a comment

github-actions bot commented Feb 19, 2025

github-actions bot commented Feb 19, 2025

guru-aot left a comment

#3818 - Student Application Summary - Small Screen #4348

#3818 - Student Application Summary - Small Screen #4348

Conversation

bidyashish commented Feb 12, 2025 • edited Loading

andrewsignori-aot Feb 13, 2025 • edited Loading

Choose a reason for hiding this comment

Mobile false

mobile true

StudentApplications.vue changes

DataTableContract.ts changes

bidyashish Feb 14, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

dheepak-aot Feb 14, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

dheepak-aot commented Feb 14, 2025

Choose a reason for hiding this comment

sonarqubecloud bot commented Feb 19, 2025

Quality Gate passed

github-actions bot commented Feb 19, 2025

Backend Unit Tests Coverage Report

github-actions bot commented Feb 19, 2025

E2E Workflow Workers Coverage Report

dheepak-aot left a comment

Choose a reason for hiding this comment

github-actions bot commented Feb 19, 2025

E2E Queue Consumers Coverage Report

github-actions bot commented Feb 19, 2025

E2E SIMS API Coverage Report

guru-aot left a comment

Choose a reason for hiding this comment

bidyashish commented Feb 12, 2025 •

edited

Loading

andrewsignori-aot Feb 13, 2025 •

edited

Loading

bidyashish Feb 14, 2025 •

edited

Loading

dheepak-aot Feb 14, 2025 •

edited

Loading