Upgrades

UPGRADE_NOTES.md

@@ -154,6 +154,8 @@ There are certainly cases where lodash is helpful, but uses of underscore could
 
 Also, rather than lodash, using native JS functions such as map, filter, etc. would be good.
 
+5/5/2025: Lodash global has been replaced by pulling out individual functions from lodash-es. Also, underscore has been removed entirely from the client side.
+
 ## Removal of jQuery
 
 Modern Ember recommends removing jQuery, using standard DOM access routines instead. Our file app.js sets $ globally to jQuery, so finding all instances will involve both searching for imports of jQuery and for $ (whether "$." or "$(").
@@ -164,6 +166,8 @@ Note that we cannot completely remove jQuery because it's a dependency of select
 
 Moment as a package has a fairly large footprint and is considered a legacy project. Because Encompass uses only uncomplicated pieces of moment, all of the app's usage could be replaced by modern JS or more lightweight, modular packages (e.g., date-fns).
 
+5/24/2025: Changed format-date helper to use date-fns. Removed redundant 'dates' helper and changed its one use in a component. Also removed moment in components/models that I already had upgrade.
+
 ## Avoid runtime errors through use of optional chaining and nullish coalescing
 
 Through the use of ?. and ??, we can avoid runtime errors if an attempt is made to get a property from undefined.
@@ -240,6 +244,8 @@ Since Ember 3.1, this is usually fine as you no longer need to use .get() to acc
 
 - related to above, in components, dot notation might result in a PromiseProxy. However, if it's used in a template, Ember will re-render once the value is fully resolved, so you don't have to worry about it. However, if you are using the value in js, such as wanting to loop over an array, you need to use await. (Of course, if you are just defining a convenience getter that uses dot notiation for use by a template, you don't have to await.)
 
+- if you forget to put the @action decorator on a function then call it from your template, 'this' will not be defined.
+
 # Current Progress
 
 ## CurrentUser service
@@ -323,3 +329,25 @@ The following components, included above, are actually wrappers for third-party
   - problems/problem/<id>/assignment
 
   Previously, edit and assignment were handled by flags in the db inside of a problem. When we transitioned to the problem, we first set the correct flag so that <ProblemInfo> would render correctly. With this change, we don't use the db for local application state, which is poor practice.
+
+## Quill upgrades
+
+I upgraded the loading and use of the Quill (enhanced text editing) package:
+
+- Quill is now loaded as any other third party package, rather than via the vendor folder and manual install.
+- The Ember component, quill-container, has been upgraded to modern Ember (v4.5 at least).
+- The quill-container component has been moved to the components/ui folder.
+- In all quill-container clients, the reference has been updated (<<Ui::QuillContainer ...>>)
+- TODO: in response-submission-view.hbs, the use of quill-container has always had an incorrect signature. I need to figure out what would be the correct signature should be.
+
+## Validate.js
+
+This package's loading has also been upgrading to the modern approach. TODO -- consider whether a custom utility function should replace using a 3rd party package.
+
+## Twitter typeahead
+
+This package has been removed from the system in favor of a simpler, custom component. The new component is contained within the file twitter-typeahead.js/hbs just to simplify references throughout the system. I tested all clients of the new component and they appear to work. Still need to test the usage in the signup-google component (TODO). Note that getting typeahead to work in some components (section-new, user-info, and user-new) involved upgrades to those components because of various old-style Ember idioms, such as the use of two-way binding.
+
+## lodash-es
+
+loadash-es is now loaded. I did this because some of the regular lodash subpackages (e.g., lodash/isEqual) are being deprecated. Thus, the correct thing to do now is to use lodash-es/isEqual, for example. Eventually, I should change all uses of lodash to lodash-es.

app/app.js

@@ -3,14 +3,12 @@
 import loadInitializers from 'ember-load-initializers';
 import Resolver from 'ember-resolver';
 import $ from 'jquery';
-import * as _ from 'lodash-es';
 import config from './config/environment';
 
 // export for others scripts to use
 window.$ = $;
-window._ = _;
 
 $.ajaxSetup({
   xhrFields: {
     withCredentials: false,
   },
@@ -25,8 +23,8 @@
 var PRINT_DEBUG_TO_CONSOLE = true;
 
 if (TEST_MODE) {
   PRINT_DEBUG_TO_CONSOLE = false;
   rootElement = '#testing-location';
 }
 // Ember.run.backburner.DEBUG = true;
 

app/components/admin-filter.hbs

@@ -1,8 +1,8 @@
 <div id='admin-filter'>
-  <!-- Main Dropdown -->
+  {{!-- Main Dropdown --}}
   <div class='choose-filter-admin'>
     <span class='filter-text'>Find by</span>
-    <!-- onItemAdd sends the value to the parent component -->
+    {{!-- onItemAdd sends the value to the parent component --}}
     <SelectizeInput
       @inputId='admin-filter-select'
       @initialOptions={{this.mainOptions}}
@@ -14,7 +14,7 @@
     />
   </div>
 
-  <!-- Conditional Rendering of Options -->
+  {{!-- Conditional Rendering of Options --}}
   {{#if (is-equal this.mainSelection.type 'list')}}
     <div class='filter-admin'>
       <SelectizeInput

app/components/answer-new.hbs

@@ -16,17 +16,18 @@
             <span class='required-star'>*</span></label>
           <Textarea
             name='brief-summary'
-            cols='80'
-            @value={{answer}}
-            rows='3'
+            cols={{80}}
+            rows={{3}}
+            @value={{this.answer}}
             placeholder='Brief Summary...'
+            {{on 'input' this.updateAnswer}}
           />
-          <Input id='answer' required='true' @type='hidden' @value={{answer}} />
+
         </div>
         {{#each this.briefSummaryErrors as |error|}}
           <Ui::ErrorBox
             @error={{error}}
-            @resetError={{action (mut this.briefSummaryErrors) null}}
+            @resetError={{this.resetBriefSummaryErrors}}
             @showDismiss={{true}}
           />
         {{/each}}
@@ -35,51 +36,41 @@
             out
             <span class='required-star'>*</span></label>
 
-          <QuillContainer
-            @onEditorChange={{action 'updateQuillText'}}
+          <Ui::QuillContainer
+            @onEditorChange={{this.updateQuillText}}
             @attrSectionId={{this.quillEditorId}}
             @startingText={{this.explanationText}}
           />
         </div>
         {{#each this.explanationErrors as |error|}}
           <Ui::ErrorBox
             @error={{error}}
-            @resetError={{action (mut this.explanationErrors) null}}
+            @resetError={{this.resetExplanationErrors}}
             @showDismiss={{true}}
           />
         {{/each}}
         <div class='new-answer-input uploaded-file'>
           {{! <label for="uploadedFile">Upload PDF</label> }}
           {{#if this.imageData}}
             <a
-              {{action 'toggleImageSize'}}
+              {{on 'click' this.toggleImageSize}}
               class='image {{if this.isWide " wide "}}'
             >
               <img
-                src='{{this.imageData}}'
-                alt='{{format-date
-                  this.answer.createDate
-                  "MMM Do YYYY hh:mm A"
-                }}'
+                src={{this.imageData}}
+                alt={{format-date this.answer.createDate 'MMM Do YYYY hh:mm A'}}
               />
             </a>
             <button
               class='edit-image-btn'
               type='button'
-              {{action 'deleteImage'}}
+              {{on 'click' this.deleteImage}}
             >Delete</button>
             <button
               class='edit-image-btn'
               type='submit'
-              {{action 'addImage'}}
+              {{on 'click' this.addImage}}
             >Add</button>
-            {{!-- {{else}}
-              {{image-upload
-                filesToBeUploaded=filesToBeUploaded
-                hideSubmit=true
-                acceptMultiple=true
-                isPdfOnly=true
-                }} --}}
           {{/if}}
         </div>
         <div class='new-answer-input contributors'>
@@ -88,9 +79,9 @@
             <ul>
               {{#each this.contributors as |student|}}
                 <li>{{student.username}}
-                  {{#if (not (is-equal student this.currentUser.user))}}
+                  {{#if (not-equal student this.currentUser.user)}}
                     <i
-                      {{action 'removeStudent' student}}
+                      {{on 'click' (fn this.removeStudent student)}}
                       class='far fa-times-circle'
                       aria-hidden='true'
                       title='Remove'
@@ -104,7 +95,7 @@
         <Ui::TwitterTypeahead
           @selectedValue={{this.studentToAdd}}
           @selectedItems={{this.contributors}}
-          @onSelect='addStudent'
+          @onSelect={{this.addStudent}}
           @dataList={{@section.students}}
           @placeholder='username'
           @optionLabelPath='username'
@@ -122,21 +113,21 @@
         <Ui::ErrorBox
           @error='Please provide all required fields.'
           @showDismiss={{true}}
-          @resetError={{action (mut this.isMissingRequiredFields) null}}
+          @resetError={{this.resetMissingRequiredFields}}
         />
       {{/if}}
       {{#if this.overSizedFileError}}
         <Ui::ErrorBox
           @error={{this.overSizedFileError}}
           @showDismiss={{true}}
-          @resetError={{action (mut this.overSizedFileError) null}}
+          @resetError={{this.resetOverSizedFileError}}
         />
       {{/if}}
       {{#if this.isExplanationTooLarge}}
         <Ui::ErrorBox
           @error={{this.tooLargeExplanationMsg}}
           @showDismiss={{true}}
-          @resetError={{action (mut this.isExplanationTooLarge) null}}
+          @resetError={{this.resetIsExplanationTooLarge}}
         />
       {{/if}}
     </form>
@@ -152,14 +143,14 @@
           class='add-parent-workspace-btn create'
           data-test='submit-answer'
           type='button'
-          {{action 'validate'}}
+          {{on 'click' this.validate}}
         >{{if @createButtonText @createButtonText 'Submit Answer'}} </button>
       </span>
       <span class='cancelResponse'>
         <button
           class='cancelEditBtn'
           type='button'
-          {{action 'cancelResponse'}}
+          {{on 'click' this.cancelResponse}}
         >Cancel</button>
       </span>