Create widget type to accommodate time-sensitive content #524

thevoiceofzeke · 2017-09-14T19:32:34Z

MUMUP-2780: "Apply lessons learned to refactor Annual Benefits Enrollment widget."

In this PR

Establish new widget type for displaying time-sensitive content during one or more provided ranges of days/times, and fall back on "basic" presentation outside of those ranges

Screenshots

Contributor License Agreement adherence:

This Contribution is under the terms of Individual Contributor License Agreements (and also Corporate Contributor License Agreements to the extent applicable) appearing in the Apereo CLA roster.

apetro · 2017-09-14T19:51:08Z

uw-frame-components/portal/widgets/controllers.js

+    /**
+     *
+     */
+    var configureAnnualBenefitsEnrollmentContent = function() {


To generalize this so it doesn't need annual-benefits-enrollment-specific stuff: have it compute the days until the next template switch and expose that integer to the template.

As in, it's currently showing the before-benefit-enrollment-starts content. And it knows the date on which it'll switch to the next template. So it computes the quantity days until that happens, and exposes it to the current template as daysRemainingShowingThisTemplate or daysUntilNextTemplate or whatever. And then in the actual ABE content, the before-enrollment template uses, references this variable to get at the count.

So then the ABE start date arrives. Boing, onto next template. And that template gets the count of days until the template after it. So the during-ABE content could include the countdown until the end of ABE.

Turtles all the way down.

One thing that doesn't account for is the warning that the active period is going to begin. ABE widget has the countdown during the active period, but also has a "Begins [given date]" case leading up to it.

ChristianMurphy

Looks Good 👍

I'd highly recommend importing Moment for any and all date processing.
I've left some notes on what Moment functions could help. 📓 🕐

ChristianMurphy · 2017-09-14T19:41:48Z

uw-frame-components/portal/widgets/controllers.js

+          $scope.enrollmentPeriodStatus = 'ongoing';
+        }
+      // Determine whether enrollment period is upcoming or already over
+      } else if ($filter('filterDifferenceFromDate')(


📓 🕐 https://momentjs.com/docs/#/query/is-before/

ChristianMurphy · 2017-09-14T19:43:43Z

uw-frame-components/portal/widgets/controllers.js

+        if (value.isAnnual) {
+          startDate = (new Date).getFullYear() + '-' + startDate;
+          endDate = (new Date).getFullYear() + '-' + endDate;
+          if ($filter('filterDateRange')(startDate, endDate)) {


📓 🕐 https://momentjs.com/docs/#/query/is-between/

ChristianMurphy · 2017-09-14T19:44:26Z

uw-frame-components/portal/widgets/controllers.js

+     */
+    var configureAnnualBenefitsEnrollmentContent = function() {
+      // Set enrollment period dates for current year
+      $scope.enrollStartDate = (new Date).getFullYear() + '-'


📓 🕐 https://momentjs.com/docs/#/displaying/format/

I would LOVE to use moment. Hopefully this gets the conversation started again :)

ChristianMurphy · 2017-09-14T19:45:05Z

uw-frame-components/portal/widgets/controllers.js

+      if ($filter('filterDateRange')(
+        $scope.enrollStartDate, $scope.enrollEndDate)) {
+        // Calculate countdown
+        $scope.daysLeft = $filter('filterDifferenceFromDate')(


📓 🕐 https://momentjs.com/docs/#/query/is-before/

ChristianMurphy · 2017-09-14T19:45:42Z

uw-frame-components/portal/widgets/filters.js

+
+define(['angular'], function(angular) {
+  return angular.module('portal.widgets.filters', [])
+    .filter('filterDateRange', function() {


📓 🕐 https://momentjs.com/docs/#/query/is-between/

ChristianMurphy · 2017-09-14T19:48:44Z

uw-frame-components/portal/widgets/filters.js

+        return today >= rangeStart && today < rangeEnd;
+      };
+    })
+    .filter('filterDifferenceFromDate', function() {


📓 🕐 https://momentjs.com/docs/#/displaying/difference/

ChristianMurphy · 2017-09-14T19:49:28Z

uw-frame-components/portal/widgets/controllers.js

+      } else if ($filter('filterDifferenceFromDate')(
+        $scope.enrollStartDate) > 0) {
+        $scope.enrollmentPeriodStatus = 'upcoming';
+      } else if ($filter('filterDifferenceFromDate')(


📓 🕐 https://momentjs.com/docs/#/query/is-after/

ChristianMurphy · 2017-09-14T19:50:30Z

uw-frame-components/portal/widgets/controllers.js

+        // If date range is annual, not for a specific year,
+        // use current year in range
+        if (value.isAnnual) {
+          startDate = (new Date).getFullYear() + '-' + startDate;


📓 🕐 https://momentjs.com/docs/#/displaying/format/

ChristianMurphy · 2017-09-14T19:50:37Z

uw-frame-components/portal/widgets/controllers.js

+        // use current year in range
+        if (value.isAnnual) {
+          startDate = (new Date).getFullYear() + '-' + startDate;
+          endDate = (new Date).getFullYear() + '-' + endDate;


📓 🕐 https://momentjs.com/docs/#/displaying/format/

ChristianMurphy · 2017-09-14T19:59:58Z

📓 👷‍♂️ 🏁 AppVeyor CI error appears to be the same one from #523
⛔ 👷‍♂️ 🐧 Files appear to be missing license header

[ERROR] Failed to execute goal com.mycila:license-maven-plugin:3.0:check (default-cli) on project uw-frame: Some files do not have the expected license header -> [Help 1]
[ERROR] 
[ERROR] To see the full stack trace of the errors, re-run Maven with the -e switch.
[ERROR] Re-run Maven using the -X switch to enable full debug logging.
[ERROR] 
[ERROR] For more information about the errors and possible solutions, please read the following articles:
[ERROR] [Help 1] http://cwiki.apache.org/confluence/display/MAVEN/MojoExecutionException

https://travis-ci.org/UW-Madison-DoIT/uw-frame/jobs/275607992#L725-L731

vertein · 2017-09-15T14:09:34Z

thevoiceofzeke#2

docs(license): adds license header to files

…frame into benefits-type

ChristianMurphy · 2017-09-15T17:08:55Z

uw-frame-components/portal/widgets/filters.js

+    })
+    .filter('filterForDateWithYear', function() {
+      return function(date) {
+        var validWithYear = /([12]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01]))/;


🐎 to limit performance implications consider anchoring the start and the end

/^([12]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01]))$/

📓 https://momentjs.com/docs/#/parsing/is-valid/ is a wonderful thing

ChristianMurphy · 2017-09-15T17:09:30Z

uw-frame-components/portal/widgets/filters.js

+    .filter('filterForDateWithYear', function() {
+      return function(date) {
+        var validWithYear = /([12]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01]))/;
+        var validDayAndMonth = /(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01])/;


🐎 to limit performance implications consider anchoring the start and the end

/^(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01])$/

📓 https://momentjs.com/docs/#/parsing/is-valid/ is a wonderful thing

ChristianMurphy

👷‍♂️ ⛔

docs\make-a-widget.md
            390:5  warning  Incorrect indentation before bullet: remove 2 spaces  list-item-bullet-indent     remark-lint
            391:5  warning  Incorrect indentation before bullet: remove 2 spaces  list-item-bullet-indent     remark-lint
            392:5  warning  Incorrect indentation before bullet: remove 2 spaces  list-item-bullet-indent     remark-lint
            393:5  warning  Incorrect indentation before bullet: remove 2 spaces  list-item-bullet-indent     remark-lint
  395:133-395:136  warning  Found reference to undefined definition               no-undefined-references     remark-lint
  395:133-395:136  warning  Use the trailing [] on reference links                no-shortcut-reference-link  remark-lint
  395:304-395:307  warning  Found reference to undefined definition               no-undefined-references     remark-lint
  395:304-395:307  warning  Use the trailing [] on reference links                no-shortcut-reference-link  remark-lint
            398:5  warning  Incorrect indentation before bullet: remove 2 spaces  list-item-bullet-indent     remark-lint
            399:5  warning  Incorrect indentation before bullet: remove 2 spaces  list-item-bullet-indent     remark-lint
  414:419-414:440  warning  Use the trailing [] on reference links                no-shortcut-reference-link  remark-lint
  414:419-414:440  warning  Found reference to undefined definition               no-undefined-references     remark-lint
  415:412-415:431  warning  Use the trailing [] on reference links                no-shortcut-reference-link  remark-lint
  415:412-415:431  warning  Found reference to undefined definition               no-undefined-references     remark-lint

https://ci.appveyor.com/project/vertein/uw-frame/build/1.0.388#L1111

vertein

Looks like the lint issues have been resolved.

ChristianMurphy

thevoiceofzeke added 3 commits September 14, 2017 14:13

feat(widgets): Add variable content widget type (with ABE)

8563889

fix: Add necessary files

68daa6b

feat(docs): Document variable content widget type

3564d0a

apetro reviewed Sep 14, 2017

View reviewed changes

ChristianMurphy approved these changes Sep 14, 2017

View reviewed changes

thevoiceofzeke changed the title ~~[WIP] Create widget type to accommodate annual benefits enrollment~~ [WIP] Create widget type to accommodate time-sensitive content Sep 14, 2017

docs(license): adds license header to files

cbfe560

thevoiceofzeke and others added 2 commits September 15, 2017 09:56

Merge pull request #2 from vertein/benefits-type

df04a42

docs(license): adds license header to files

Merge branch 'benefits-type' of https://github.com/thevoiceofzeke/uw-…

115d504

…frame into benefits-type

davidmsibley approved these changes Sep 15, 2017

View reviewed changes

ChristianMurphy approved these changes Sep 15, 2017

View reviewed changes

feat(widgets): Make generic widget type for ABE

0343eb1

ChristianMurphy approved these changes Sep 15, 2017

View reviewed changes

thevoiceofzeke added 2 commits September 18, 2017 10:54

feat(widget): Rename and test with various dates

fc435cd

fix: Update docs and add example template

30a759d

thevoiceofzeke changed the title ~~[WIP] Create widget type to accommodate time-sensitive content~~ Create widget type to accommodate time-sensitive content Sep 18, 2017

fix: Remove a bunch of unecessary JSON

f4904f3

ChristianMurphy suggested changes Sep 18, 2017

View reviewed changes

fix(docs): Conform to markdown style

659d5f1

vertein approved these changes Sep 21, 2017

View reviewed changes

ChristianMurphy approved these changes Sep 21, 2017

View reviewed changes

thevoiceofzeke merged commit 3b64726 into uPortal-Attic:master Sep 21, 2017

davidmsibley added the patch version bump label Sep 21, 2017

davidmsibley added this to the 5.2.1 milestone Sep 21, 2017

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Create widget type to accommodate time-sensitive content #524

Create widget type to accommodate time-sensitive content #524

thevoiceofzeke commented Sep 14, 2017 •

edited

apetro Sep 14, 2017

thevoiceofzeke Sep 14, 2017

ChristianMurphy left a comment

ChristianMurphy Sep 14, 2017

ChristianMurphy Sep 14, 2017

ChristianMurphy Sep 14, 2017

thevoiceofzeke Sep 14, 2017

ChristianMurphy Sep 14, 2017

ChristianMurphy Sep 14, 2017

ChristianMurphy Sep 14, 2017

ChristianMurphy Sep 14, 2017

ChristianMurphy Sep 14, 2017

ChristianMurphy Sep 14, 2017 •

edited

ChristianMurphy commented Sep 14, 2017

vertein commented Sep 15, 2017

ChristianMurphy Sep 15, 2017

ChristianMurphy Sep 15, 2017

ChristianMurphy left a comment

vertein left a comment

ChristianMurphy left a comment •

edited

Create widget type to accommodate time-sensitive content #524

Create widget type to accommodate time-sensitive content #524

Conversation

thevoiceofzeke commented Sep 14, 2017 • edited

Screenshots

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ChristianMurphy left a 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

ChristianMurphy Sep 14, 2017 • edited

Choose a reason for hiding this comment

ChristianMurphy commented Sep 14, 2017

vertein commented Sep 15, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ChristianMurphy left a comment

Choose a reason for hiding this comment

vertein left a comment

Choose a reason for hiding this comment

ChristianMurphy left a comment • edited

Choose a reason for hiding this comment

thevoiceofzeke commented Sep 14, 2017 •

edited

ChristianMurphy Sep 14, 2017 •

edited

ChristianMurphy left a comment •

edited