[Web][SIMS-#1110] UI updates for Supporting-Users Account #1456

andrepestana-aot · 2022-10-13T17:20:34Z

This PR is the first one for the ticket #1110.

updated login page;

updated dashboard page.

ann-aot · 2022-10-13T19:09:05Z

sources/packages/forms/src/form-definitions/supportingusersdashboard.json

+                          "disabled": false,
+                          "tableView": false,
+                          "modalEdit": false,
+                          "key": "startParentInformationRequest1",


maybe we can avoid keys ending with numbers like 1. we can add a proper key

yes, that came from the older version. I'll change that. Thanks!

Changed keys in the form.

ann-aot · 2022-10-13T19:10:05Z

sources/packages/forms/src/form-definitions/supportingusersdashboard.json

+                      "title": "Start Partner Information Request",
+                      "collapsible": false,
+                      "hideLabel": true,
+                      "key": "startParentInformationRequest2",


same here. we can add a proper key. and pls review all other keys

Changed keys in the form.

sources/packages/web/src/views/supporting-user/AppSupportingUser.vue

ann-aot · 2022-10-13T19:17:34Z

sources/packages/web/src/views/supporting-user/Login.vue

+  <v-card elevation="2" class="mx-auto mt-15" max-width="730px">
+    <v-card-text>
+      <v-row
+        ><v-col cols="15"


mm..cols options are from 1 to 12. also you can use md instead of cols

yeah, sorry. That came from another login page we have here. Thanks!

oh is it? from which login.vue @andrepestana-aot

aest Login page

@guru-aot is aest login page part of your PR or your previous PR. we need some refactoring in login page

Its was part of my previous story. I am not changing anything now.

so, are you planning to create a ticket for that? @guru-aot

ann-aot · 2022-10-13T19:20:54Z

sources/packages/web/src/views/supporting-user/Login.vue

+      <v-row
+        ><v-col cols="15"
+          ><v-card-header>
+            <v-col cols="12">


do we need v-col here?

ann-aot · 2022-10-13T19:21:43Z

sources/packages/web/src/views/supporting-user/Login.vue

+              using your BC Services Card.
+            </p>
+            <div class="pt-3 pb-2 ml-2">
+              <v-row>


do we need v-row here

we don't need it. Removed.

ann-aot · 2022-10-13T19:22:30Z

sources/packages/web/src/views/supporting-user/Login.vue

+            height="260"
+            class="mt-8"
+            alt="An illustration of a woman working at a desk with her laptop. Illustration by Storyset."
+            src="@/assets/images/happy-parent.svg" /></v-col></v-row></v-card-text


do you have prettier and eslist enabled?

Yes, I do both.

I was thinking that </v-col></v-row></v-card-text will arrange by the prettier. can you adjust the indentation of these tags

ann-aot

Good work @andrepestana-aot added some comments. the Page rendering supportingusersdashboard form is part of this PR. if so, we need to update formio with formio-container

andrepestana-aot · 2022-10-13T21:14:40Z

Good work @andrepestana-aot added some comments. the Page rendering supportingusersdashboard form is part of this PR. if so, we need to update formio with formio-container

Thanks, Ann! Did the changes you mentioned. Please take a look.

ann-aot · 2022-10-14T17:23:30Z

sources/packages/web/src/views/supporting-user/Login.vue

+    <v-card-text>
+      <v-row
+        ><v-col cols="9"
+          ><v-card-header>


actually, we don't have these old tags like v-card-header in vuetify 3

https://next.vuetifyjs.com/en/components/cards/#anatomy

in other login pages, we are using <v-card-text>

andrewsignori-aot · 2022-10-14T18:03:11Z

@andrepestana-aot I believe that we are missing some labels on the dashboard when checking Figma, as shown below.

andrewsignori-aot · 2022-10-14T18:04:23Z

Can we please check the spaces below to be more like Figma? Please take a look at the Students or AEST login also.

guru-aot · 2022-10-14T18:12:16Z

sources/packages/forms/src/form-definitions/supportingusersdashboard.json

  "components": [
    {
      "label": "HTML",
+      "labelWidth": "",
+      "labelMargin": "",
      "tag": "p",
      "className": "",
      "attrs": [


Please add the customClass category-header-x-large for the welcome content to sync with figma.

ok. Added. Thanks!

andrewsignori-aot · 2022-10-14T18:16:46Z

sources/packages/web/src/views/supporting-user/Dashboard.vue

@@ -1,9 +1,9 @@
 <template>
  <full-page-container>
-    <formio
+    <formio-container


In this case, I do not see a benefit in doing change. What was the motivation for the change?
@ann-aot I believe that you requested this change in another comment. What is the motivation?

I'm not sure about the difference between '<formio>' and '<formio-container>'. I thought we were replacing them as @ann-aot asked me to do that.

As per our latest dev conversation, there was no effort or recommendation to use formio-container instead of formio. The decision was to leave it to the developer, in your case there is absolute no benefit using the formio-container but as per the agreement, we can leave it as it is because there is no major drawback either.

@andrewsignori-aot ok. So, is it resolved?

andrewsignori-aot

Nice start, pelase take a look at the comments.

andrepestana-aot · 2022-10-14T18:56:54Z

@andrepestana-aot I believe that we are missing some labels on the dashboard when checking Figma, as shown below. !
oops... added the labels. Thanks!

andrepestana-aot · 2022-10-14T19:15:42Z

Can we please check the spaces below to be more like Figma? Please take a look at the Students or AEST login also.

That's is different from what I got here:

Why is it different for you? I checked on chrome, FF and edge... I think I should increase the bottom margin and align the pic to the bottom anyways.

Also what should be the minimum width for the image, @hellolynn-tbtb ?

sources/packages/web/src/assets/css/formio-shared.scss

dheepak-aot · 2022-10-14T19:55:06Z

sources/packages/web/src/views/supporting-user/Login.vue

-        </v-btn>
-      </v-col>
-    </v-row>
+  <v-card elevation="2" class="mx-auto mt-15" max-width="730px">


Not a part of the PR. For all the login pages we can create a container and make a common pattern with slots. (Student has faqs which can be handled)

@andrepestana-aot @guru-aot @andrewsignori-aot @ann-aot ?

yes we can, as all login mostly follows the same template, like a login-container or something.

is the pattern same for all login pages?

Yes, I think so.

Okay, but it doesn't look like a container, because if you see a student, there is another card below. but for the upper card. we can create a structure.

Yes @dheepak-aot, I agree that they are similar enough to a component be created. We can have a tech debit since all login pages are currently changed. We can take care of this on an upcoming opportunity.

Created one https://app.zenhub.com/workspaces/student-information-management-system-5fce9df5aa1b45000e937014/issues/bcgov/sims/1460

dheepak-aot · 2022-10-14T20:00:46Z

Good first start. Just a minor comment.

sonarqubecloud · 2022-10-14T23:08:36Z

Kudos, SonarCloud Quality Gate passed!

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication

guru-aot

LGTM, nice work @andrepestana-aot

ann-aot

Great start 👍

andrewsignori-aot

Nice start, looks good 👍

dheepak-aot · 2022-10-17T16:39:40Z

sources/packages/web/src/assets/css/formio-shared.scss

+
+.img-welcome-background {
+  @extend .img-background;
+  background-image: url("../images/image_institution_welcome.svg");
  min-height: $image-min-height;


is min-height not a common property? is it specific for each of image class?

not for all classes

dheepak-aot

Thanks for doing the changes. LGTM 👍

andrepestana-aot added 3 commits October 12, 2022 17:43

updated login page; updated dashboard

9f94a13

changed buttons label

0a1a59d

added home icon to the top bar

8c995fa

andrepestana-aot marked this pull request as ready for review October 13, 2022 18:47

andrepestana-aot requested review from ann-aot, dheepak-aot, guru-aot, abschwenker, hellolynn-tbtb, andrewsignori-aot and henryoforeh-dev October 13, 2022 18:48

ann-aot reviewed Oct 13, 2022

View reviewed changes

sources/packages/web/src/views/supporting-user/AppSupportingUser.vue Show resolved Hide resolved

ann-aot reviewed Oct 13, 2022

View reviewed changes

andrepestana-aot added 2 commits October 13, 2022 13:41

changed key in the form

35b71eb

updated Login page; replaced formio with formio-container to Login page

273892c

ann-aot reviewed Oct 14, 2022

View reviewed changes

fixed login page formatting

f54d581

guru-aot reviewed Oct 14, 2022

View reviewed changes

andrewsignori-aot reviewed Oct 14, 2022

View reviewed changes

replaced v-card-header; added labels to the form;

608a809

added category-header-x-large to welcoming message

4e3d74a

dheepak-aot reviewed Oct 14, 2022

View reviewed changes

sources/packages/web/src/assets/css/formio-shared.scss Show resolved Hide resolved

dheepak-aot reviewed Oct 14, 2022

View reviewed changes

andrepestana-aot added 2 commits October 14, 2022 15:53

fixed spacing for login page

ca54891

used @extend to reuse css properties

502a16e

guru-aot approved these changes Oct 17, 2022

View reviewed changes

ann-aot approved these changes Oct 17, 2022

View reviewed changes

andrewsignori-aot approved these changes Oct 17, 2022

View reviewed changes

dheepak-aot reviewed Oct 17, 2022

View reviewed changes

dheepak-aot approved these changes Oct 17, 2022

View reviewed changes

andrepestana-aot merged commit 92a8bd9 into main Oct 17, 2022

andrepestana-aot deleted the 1110_ui-updates-supporting-users branch October 17, 2022 17:04

[Web][SIMS-#1110] UI updates for Supporting-Users Account #1456

[Web][SIMS-#1110] UI updates for Supporting-Users Account #1456

Conversation

andrepestana-aot commented Oct 13, 2022 • edited Loading

ann-aot Oct 13, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ann-aot Oct 13, 2022 • 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

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

andrepestana-aot Oct 13, 2022 • edited Loading

Choose a reason for hiding this comment

ann-aot Oct 14, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ann-aot left a comment

Choose a reason for hiding this comment

andrepestana-aot commented Oct 13, 2022

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

andrewsignori-aot commented Oct 14, 2022

andrewsignori-aot commented Oct 14, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

andrewsignori-aot Oct 14, 2022 • edited Loading

Choose a reason for hiding this comment

andrepestana-aot Oct 14, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

andrewsignori-aot left a comment

Choose a reason for hiding this comment

andrepestana-aot commented Oct 14, 2022 • edited Loading

andrepestana-aot commented Oct 14, 2022

dheepak-aot Oct 14, 2022 • 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

dheepak-aot commented Oct 14, 2022

sonarqubecloud bot commented Oct 14, 2022

guru-aot left a comment

Choose a reason for hiding this comment

ann-aot left a comment

Choose a reason for hiding this comment

andrewsignori-aot left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

dheepak-aot left a comment

Choose a reason for hiding this comment

andrepestana-aot commented Oct 13, 2022 •

edited

Loading

ann-aot Oct 13, 2022 •

edited

Loading

ann-aot Oct 13, 2022 •

edited

Loading

andrepestana-aot Oct 13, 2022 •

edited

Loading

ann-aot Oct 14, 2022 •

edited

Loading

andrewsignori-aot Oct 14, 2022 •

edited

Loading

andrepestana-aot Oct 14, 2022 •

edited

Loading

andrepestana-aot commented Oct 14, 2022 •

edited

Loading

dheepak-aot Oct 14, 2022 •

edited

Loading