Merge pull request #8257 from jrjohnson/lm-manager-yup-no-render

Material Manager Updates
ilios · Dec 9, 2024 · 0109a25 · 0109a25
2 parents a1084fc + be1a4c8
commit 0109a25
Show file tree

Hide file tree

Showing 5 changed files with 73 additions and 29 deletions.
diff --git a/packages/ilios-common/.lint-todo b/packages/ilios-common/.lint-todo
@@ -10,8 +10,6 @@ add|ember-template-lint|no-at-ember-render-modifiers|2|2|2|2|ad17d66e0fe1720bc8d
 add|ember-template-lint|no-at-ember-render-modifiers|3|2|3|2|d39abab22a3e75d93f69335da422e7ef73b36283|1731542400000|1762646400000|1793750400000|addon/components/html-editor.hbs
 add|ember-template-lint|no-at-ember-render-modifiers|9|2|9|2|1a2522cd1202904fb09a6e811dec6b46d8189ab3|1731542400000|1762646400000|1793750400000|addon/components/ilios-calendar-event-month.hbs
 add|ember-template-lint|no-at-ember-render-modifiers|4|4|4|4|fc97c348371546a640a56d968295aa0dec994ad9|1731542400000|1762646400000|1793750400000|addon/components/ilios-tooltip.hbs
-add|ember-template-lint|no-at-ember-render-modifiers|3|2|3|2|4836956b22094e4400c07a696446403e2e70ae25|1731542400000|1762646400000|1793750400000|addon/components/learningmaterial-manager.hbs
-add|ember-template-lint|no-at-ember-render-modifiers|4|2|4|2|ed145b35cc73f6141f721a99468b9ac5488e1c3c|1731542400000|1762646400000|1793750400000|addon/components/learningmaterial-manager.hbs
 add|ember-template-lint|no-at-ember-render-modifiers|62|10|62|10|5ba6894d30ea3a3eae704867d5bc5d61c5ee4e1f|1731542400000|1762646400000|1793750400000|addon/components/mesh-manager.hbs
 add|ember-template-lint|no-at-ember-render-modifiers|3|2|3|2|6bbbcafd85d75fd8f3d70c2bd4ba01d753c24f9c|1731542400000|1762646400000|1793750400000|addon/components/offering-calendar.hbs
 add|ember-template-lint|no-at-ember-render-modifiers|4|2|4|2|0a8f8f3c4ad64455e02a7594b39cb2785441d6e8|1731542400000|1762646400000|1793750400000|addon/components/offering-calendar.hbs

diff --git a/packages/ilios-common/addon/classes/yup-validations.js b/packages/ilios-common/addon/classes/yup-validations.js
@@ -122,7 +122,7 @@ function required() {
     return {
       path: validationParams.path,
       messageKey: 'errors.blank',
-      values: [],
+      values: {},
     };
   };
 }

diff --git a/packages/ilios-common/addon/components/learningmaterial-manager.hbs b/packages/ilios-common/addon/components/learningmaterial-manager.hbs
@@ -1,11 +1,5 @@
-<div
-  class="learningmaterial-manager"
-  {{did-insert (perform this.load) @learningMaterial}}
-  {{did-update (perform this.load) @learningMaterial}}
->
-  {{#if this.load.isRunning}}
-    <LoadingSpinner class="loading" />
-  {{else}}
+<div class="learningmaterial-manager">
+  {{#if this.isLoaded}}
     {{#let (unique-id) as |templateId|}}
       <div class="item displayname">
         <label for="displayname-{{templateId}}">
@@ -17,10 +11,14 @@
             type="text"
             value={{this.title}}
             disabled={{this.save.isRunning}}
-            {{on "keyup" (fn this.addErrorDisplayFor "title")}}
+            {{on "keyup" (fn this.validations.addErrorDisplayFor "title")}}
             {{on "input" (pick "target.value" (set this "title"))}}
           />
-          <ValidationError @validatable={{this}} @property="title" data-test-title-validation-error-message />
+          <YupValidationMessage
+            @description={{t 'general.title'}}
+            @validationErrors={{this.validations.errors.title}}
+            data-test-title-validation-error-message
+          />
         {{else}}
           <span>
             {{this.title}}
@@ -286,7 +284,11 @@
               {{format-date this.endDate day="2-digit" month="2-digit" year="numeric" hour12=true hour="2-digit" minute="2-digit"}}
             {{/if}}
           </div>
-          <ValidationError @validatable={{this}} @property="endDate" data-test-end-date-validation-error-message />
+          <YupValidationMessage
+            @description={{t 'general.endDate'}}
+            @validationErrors={{this.validations.errors.endDate}}
+            data-test-end-date-validation-error-message
+          />
           {{#if @editable}}
             <button class="remove-date" type="button" {{on "click" (fn (set this "endDate") null)}}>
               {{t "general.timedReleaseClearEndDate"}}

diff --git a/packages/ilios-common/addon/components/learningmaterial-manager.js b/packages/ilios-common/addon/components/learningmaterial-manager.js
@@ -4,20 +4,57 @@ import { service } from '@ember/service';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import { DateTime } from 'luxon';
-import { validatable, Length, AfterDate, NotBlank } from 'ilios-common/decorators/validation';
 import { findById } from 'ilios-common/utils/array-helpers';
+import YupValidations from 'ilios-common/classes/yup-validations';
+import { date, string } from 'yup';
 
-@validatable
 export default class LearningMaterialManagerComponent extends Component {
   @service store;
   @service flashMessages;
+  @service intl;
 
-  @tracked notes;
-  @tracked learningMaterial;
+  constructor() {
+    super(...arguments);
+    this.loadExistingData();
+  }
 
-  @Length(4, 120) @NotBlank() @tracked title;
-  @AfterDate('startDate', { granularity: 'minute' }) @tracked endDate;
+  validations = new YupValidations(this, {
+    title: string().required().min(4).max(120),
+    startDate: date().notRequired(),
+    endDate: date()
+      .notRequired()
+      .when('startDate', {
+        is: (startDate) => !!startDate, // Check if the startDate field has a value
+        then: (schema) =>
+          schema.test(
+            'is-end-date-after-start-date',
+            (d) => {
+              return {
+                path: d.path,
+                messageKey: 'errors.after',
+                values: {
+                  after: this.intl.t('general.startDate'),
+                },
+              };
+            },
+            (value) => {
+              if (!value) {
+                return true;
+              }
+              return (
+                DateTime.fromJSDate(value).diff(DateTime.fromJSDate(this.startDate), 'minutes') > 1
+              );
+            },
+          ),
+      }),
+  });
+
+  @tracked isLoaded = false;
 
+  @tracked notes;
+  @tracked learningMaterial;
+  @tracked title;
+  @tracked endDate;
   @tracked type;
   @tracked owningUser;
   @tracked originalAuthor;
@@ -108,6 +145,8 @@ export default class LearningMaterialManagerComponent extends Component {
       minute: minute,
       second: 0,
     }).toJSDate();
+
+    this.validations.addErrorDisplayFor(which);
   }
 
   @action
@@ -166,10 +205,11 @@ export default class LearningMaterialManagerComponent extends Component {
     return findById(this.args.learningMaterialStatuses, this.statusId);
   }
 
-  load = restartableTask(async (element, [learningMaterial]) => {
-    if (!learningMaterial) {
-      return;
+  async loadExistingData() {
+    if (!this.args.learningMaterial) {
+      throw new Error('LearningMaterialManagerComponent requires a learningMaterial argument');
     }
+    const { learningMaterial } = this.args;
     const parentMaterial = await learningMaterial.learningMaterial;
     this.notes = learningMaterial.notes;
     this.required = learningMaterial.required;
@@ -197,16 +237,17 @@ export default class LearningMaterialManagerComponent extends Component {
     this.owningUser = await parentMaterial.owningUser;
     const userRole = await parentMaterial.userRole;
     this.userRoleTitle = userRole.title;
-  });
+
+    this.isLoaded = true;
+  }
 
   save = dropTask(async () => {
-    this.addErrorDisplayForAllFields();
-    const isTitleValid = await this.isValid('title');
-    const isEndDateValid = this.startDate && this.endDate ? await this.isValid('endDate') : true;
-    if (!isTitleValid || !isEndDateValid) {
+    this.validations.addErrorDisplayForAllFields();
+    const isValid = await this.validations.isValid();
+    if (!isValid) {
       return false;
     }
-    this.clearErrorDisplay();
+    this.validations.clearErrorDisplay();
 
     this.args.learningMaterial.set('publicNotes', this.publicNotes);
     this.args.learningMaterial.set('required', this.required);

diff --git a/packages/ilios-common/addon/components/yup-validation-message.js b/packages/ilios-common/addon/components/yup-validation-message.js
@@ -6,6 +6,9 @@ export default class YupValidationMessage extends Component {
   get messages() {
     return (
       this.args.validationErrors?.map(({ messageKey, values }) => {
+        if (!values) {
+          values = {};
+        }
         if (this.args.description) {
           values.description = this.args.description;
         } else {