Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

#1757 - Create common container for content in tab #1816

Merged
merged 11 commits into from
Mar 21, 2023

Conversation

sh16011993
Copy link
Collaborator

@sh16011993 sh16011993 commented Mar 16, 2023

Created a common container for contents in the tab. This ensures that there is no jumping effect when the ministry user clicks from one tab to the other ensuring a smooth UI transition. Below are the screenshots:

Profile Tab:

image

Applications tab:

image

Restrictions tab:

image

File Uploads tab:

image

SIN tab:

image

Overawards tab:

image

Notes tab:

image

Also, checked to make sure that effects of the changes in the shared components are propagated correctly.

Student Application Summary:

image

Here, the spacing between the Applications title and the datatable is reduced (as a side effect of the above change)

Created common container for the contents in tab. However, this does not include the styling changes.
@@ -0,0 +1,28 @@
<template>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

May the template not be simplified as below or something similar?

<template>
  <v-card v-if="card">
    <slot name="header"></slot>
    <slot></slot>
  </v-card>
  <div v-else>
    <slot name="header"></slot>
    <slot></slot>
  </div>
</template>

Copy link
Collaborator Author

@sh16011993 sh16011993 Mar 20, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

<template>
  <div class="mb-5">
    <!-- Header slot (with and without v-card) -->
    <v-card v-if="enableCardView">
      <v-container><slot name="header"></slot><slot></slot></v-container>
    </v-card>
    <div v-else><slot name="header"></slot><slot></slot></div>
  </div>
</template>

Copy link
Collaborator Author

@sh16011993 sh16011993 Mar 20, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have made the suggested change. There are two slight modifications:

  1. Wrapped the card / no-card inside a div to give it a class="mb-5" to add bottom-margin after every card / no-card element.
  2. Added a v-container inside the v-card

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In terms of code syntax, I would still prefer as below for better readability.

<template>
  <div class="mb-5">
    <v-card v-if="enableCardView">
      <v-container>
        <slot name="header"></slot>
        <slot></slot>
      </v-container>
    </v-card>
    <div v-else>
      <slot name="header"></slot>
      <slot></slot>
    </div>
  </div>
</template>

>No notes found. Please click on create new note to add one.</v-col
></v-row
>
<v-container :fluid="true">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

our plan was to add the new template to all tab content right?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, fixed it.


export default defineComponent({
props: {
card: {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can we give a proper name something like isCard or enableCardView or maybe something appropriate

Copy link
Collaborator Author

@sh16011993 sh16011993 Mar 21, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done, changed to enableCardView

<div v-else><slot name="header"></slot></div>

<!-- Default slot (with and without v-card) -->
<v-card v-if="card" class="mt-n1"><slot></slot></v-card>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

if card==true then will there be one v-card for the header and another v-card for the body?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed it.

@@ -0,0 +1,29 @@
<template>
<div class="mt-8">
Copy link
Contributor

@ann-aot ann-aot Mar 17, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

just wanted to know, can we use v-container with fluid? and maybe we can remove the class

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done

required: false,
default: true,
},
fullWidth: {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

looks like you are not using the prop fullWidth

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

removed


export default defineComponent({
props: {
card: {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can we give a proper name

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

done

</div>
</v-card>
<tab-container>
<StudentApplications
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we can rename it to student-applications

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

done

@sh16011993 sh16011993 self-assigned this Mar 20, 2023
@sh16011993 sh16011993 added User Experience task that relates to UI UX Ministry Ministry Features Web Portal labels Mar 20, 2023
@sh16011993 sh16011993 requested a review from JasonCTang March 20, 2023 16:03
'editApplicationAction',
slotProps.data.status,
slotProps.data.id,
<Column
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not part of this PR but are we going to replace this Column tag as it is Primevue? @andrewsignori-aot @dheepak-aot @ann-aot @guru-aot

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it will be removed, when we replace primevue datable with vuetify data table

Copy link
Collaborator

@andrewsignori-aot andrewsignori-aot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for doing the changes.
The ticket is not precise about the ticket expectations but I was under the impression that we would be changing Student and Institution tabs as part of this effort, but I may be wrong.
@dheepak-aot @guru-aot @andrepestana-aot @ann-aot does someone recall the final goal of the ticket?

@andrewsignori-aot andrewsignori-aot changed the title #1757 - create common container for content in tab #1757 - Create common container for content in tab Mar 21, 2023
@dheepak-aot
Copy link
Collaborator

You are right @andrewsignori-aot. This ticket was drafted to have the container created for tab but doesn't mention about how far we should go to change the existing tab with new container. In my mind it was only the ministry implementation. May be we (team) can talk quickly to be on same page.

@andrepestana-aot
Copy link
Collaborator

andrepestana-aot commented Mar 21, 2023

Thanks for doing the changes. The ticket is not precise about the ticket expectations but I was under the impression that we would be changing Student and Institution tabs as part of this effort, but I may be wrong. @dheepak-aot @guru-aot @andrepestana-aot @ann-aot does someone recall the final goal of the ticket?

In my understanding the main goal of the ticket is to create the component (tab-container) to make the spacing uniform among the tabs and deal with different layouts like overawards tab that has multiple "containers". We can keep it only for the ministry student search and create another ticket to apply to other cases.

@github-actions
Copy link

Backend Unit Tests Coverage Report

Totals Coverage
Statements: 17.87% ( 1931 / 10806 )
Methods: 8.13% ( 114 / 1403 )
Lines: 20.55% ( 1690 / 8225 )
Branches: 10.78% ( 127 / 1178 )

@github-actions
Copy link

E2E Workflow Workers Coverage Report

Totals Coverage
Statements: 30.87% ( 163 / 528 )
Methods: 20.51% ( 16 / 78 )
Lines: 37.66% ( 145 / 385 )
Branches: 3.08% ( 2 / 65 )

@github-actions
Copy link

E2E Queue Consumers Coverage Report

Totals Coverage
Statements: 56.72% ( 308 / 543 )
Methods: 46.38% ( 32 / 69 )
Lines: 59.48% ( 276 / 464 )
Branches: 0% ( 0 / 10 )

@sonarqubecloud
Copy link

Kudos, SonarCloud Quality Gate passed!    Quality Gate passed

Bug A 0 Bugs
Vulnerability A 0 Vulnerabilities
Security Hotspot A 0 Security Hotspots
Code Smell A 0 Code Smells

No Coverage information No Coverage information
0.0% 0.0% Duplication

@github-actions
Copy link

E2E SIMS API Coverage Report

Totals Coverage
Statements: 36.26% ( 2429 / 6699 )
Methods: 27.7% ( 241 / 870 )
Lines: 41.89% ( 2093 / 4997 )
Branches: 11.42% ( 95 / 832 )

Copy link
Collaborator

@dheepak-aot dheepak-aot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for doing the changes @sh16011993 . LGTM.

Copy link
Collaborator

@andrewsignori-aot andrewsignori-aot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for doing the changes, looks good 👍

@sh16011993 sh16011993 merged commit 6064f16 into main Mar 21, 2023
@sh16011993 sh16011993 temporarily deployed to DEV March 21, 2023 18:20 — with GitHub Actions Inactive
@sh16011993 sh16011993 deleted the 1757_create_common_container_for_content_in_tab branch March 21, 2023 18:20
@sh16011993 sh16011993 temporarily deployed to DEV March 21, 2023 18:20 — with GitHub Actions Inactive
@sh16011993 sh16011993 temporarily deployed to DEV March 21, 2023 18:41 — with GitHub Actions Inactive
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Ministry Ministry Features User Experience task that relates to UI UX
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants