Cleaner initial scrolling

UPGRADE_NOTES.md

@@ -59,6 +59,8 @@ A number of components used two-way data binding, which is discouraged in modern
 
 Instead, modern Ember uses the Data down, Actions up pattern. Parent components send data down to their child components. A parent also sends actions (functions) to the child when updates are needed. When the child wants to update the property's value, it uses the appropriate action (essentially a callback to the parent). In this way, the parent is responsible for all of its properties' values, both getting and setting them.
 
+One way this comes into play is when we update DB objects via editing. Right now, the update to the DB occurs at the component level. I need to think about whether the components should do the updating of those objects or if we should have a service that provides creation and updating methods (deleting is an update in our system). This allows for all DB operations to be centralized rather than spread over components, with a lot of duplicated code.
+
 ## Template and Component files
 
 Should be co-located in the app/components folder rather than in the app/templates/components folder. The app/templates folder should be for route templates only. Note that many of the still-to-be upgraded components are split between the folders; the upgraded ones have their hbs files in app/components.

app/components/assignment-new.hbs

@@ -1,4 +1,4 @@
-<div id='assignment-new'>
+<div id='assignment-new' {{did-insert this.scrollIntoView}}>
   <header id='assignmentnewheader'>
     <h2>
       Enter assignment information below
@@ -31,8 +31,8 @@
                 <SelectizeInput
                   @inputId='assn-new-section-select'
                   @initialOptions={{this.sectionOptions}}
-                  @onItemAdd={{action 'updateSelectizeSingle'}}
-                  @onItemRemove={{action 'updateSelectizeSingle'}}
+                  @onItemAdd={{this.updateSelectizeSingle}}
+                  @onItemRemove={{this.updateSelectizeSingle}}
                   @maxItems={{1}}
                   @labelField='name'
                   @valueField='id'
@@ -61,7 +61,7 @@
                 *
               </span>
             </label>
-            {{#if this.fromProblemInfo}}
+            {{#if @showTitle}}
               <p>
                 {{this.selectedProblem.title}}
               </p>
@@ -70,8 +70,8 @@
                 <SelectizeInput
                   @inputId='assn-new-problem-select'
                   @initialOptions={{this.problemOptions}}
-                  @onItemAdd={{action 'updateSelectizeSingle'}}
-                  @onItemRemove={{action 'updateSelectizeSingle'}}
+                  @onItemAdd={{this.updateSelectizeSingle}}
+                  @onItemRemove={{this.updateSelectizeSingle}}
                   @maxItems={{1}}
                   @labelField='title'
                   @valueField='id'
@@ -129,7 +129,7 @@
                   <Ui::ErrorBox
                     @error='Invalid Date Range'
                     @showDismiss={{true}}
-                    @resetError={{action (mut this.invalidDateRange) null}}
+                    @resetError={{this.cancelDateError}}
                   />
                 {{/if}}
               </div>
@@ -166,7 +166,7 @@
               <Ui::RadioGroup
                 @options={{this.linkedWsOptions}}
                 @selectedValue={{this.doCreateLinkedWorkspaces}}
-                @updateValue={{action 'updateDoCreateLinkedWorkspaces'}}
+                @updateValue={{this.updateDoCreateLinkedWorkspaces}}
               />
             </div>
             {{#if this.showLinkedWsForm}}
@@ -177,7 +177,7 @@
                 <Ui::RadioGroup
                   @options={{this.groupWsOptions}}
                   @selectedValue={{this.linkedWorkspacesMode}}
-                  @updateValue={{action 'updateLinkedWorkspacesMode'}}
+                  @updateValue={{this.updateLinkedWorkspacesMode}}
                   @noWidth={{true}}
                 />
               </div>
@@ -208,7 +208,7 @@
                 <Ui::RadioGroup
                   @options={{this.parentWsOptions}}
                   @selectedValue={{this.doCreateParentWorkspace}}
-                  @updateValue={{action 'updateDoCreateParentWorkspace'}}
+                  @updateValue={{this.updateDoCreateParentWorkspace}}
                 />
 
                 {{#if this.doCreateParentWorkspace}}
@@ -223,7 +223,7 @@
                   <Ui::RadioGroup
                     @options={{this.parentWorkspaceAccessOptions}}
                     @selectedValue={{this.parentWorkspaceAccess}}
-                    @updateValue={{action 'updateParentWorkspaceAccess'}}
+                    @updateValue={{this.updateParentWorkspaceAccess}}
                     @noWidth={{true}}
                   />
                   <ParentWorkspaceNew
@@ -249,12 +249,12 @@
       class='createAssignment'
       data-test='create'
       type='button'
-      {{action 'validate'}}
+      {{on 'click' this.validate}}
     >
       Create Assignment
       <i class='fas fa-plus-circle'></i>
     </button>
-    <button class='cancelBtn' type='button' {{action 'cancel'}}>
+    <button class='cancelBtn' type='button' {{on 'click' this.cancel}}>
       Cancel
       <i class='fas fa-times'></i>
     </button>

app/components/assignment-new.js

@@ -18,7 +18,6 @@ export default class AssignmentNewComponent extends Component {
   @tracked linkedWorkspacesMode = 'individual';
   @tracked doCreateLinkedWorkspaces = false;
   @tracked doCreateParentWorkspace = false;
-  @tracked fromProblemInfo = false;
   @tracked parentWorkspaceAccess = false;
   @tracked allSelected = true;
   @tracked invalidDateRange = false;
@@ -114,8 +113,9 @@ export default class AssignmentNewComponent extends Component {
 
   @tracked sectionGroups = [];
   @tracked groupWorkspacesToMake = [];
-  @tracked studentWorkspacesToMake = this.selectedSection.students.mapBy('id');
-  //TODO: refactor
+  @tracked studentWorkspacesToMake =
+    this.selectedSection?.students?.map((student) => student.id) ?? [];
+
   @action updateLists(record) {
     this.allSelected = false;
     if (record.constructor.modelName === 'user') {
@@ -224,22 +224,11 @@ export default class AssignmentNewComponent extends Component {
     }
   }
 
-  willDestroy() {
-    super.willDestroy(...arguments);
-    let problem = this.selectedProblem;
-    if (problem && problem.isForAssignment) {
-      problem.isForAssignment = false;
-    }
-  }
-
   createAssignment(formValues) {
     let { section, problem, assignedDate, dueDate, name } = formValues;
     const createdBy = this.user;
 
     if (!name) {
-      // let nameDate = $('#assignedDate')
-      //   .data('daterangepicker')
-      //   .startDate.format('MMM Do YYYY');
       let nameDate = assignedDate
         ? moment(new Date(assignedDate.replace(/-/g, '/'))).format(
             'MMM Do YYYY'
@@ -427,17 +416,20 @@ export default class AssignmentNewComponent extends Component {
       return;
     }
     if (this.linkedWorkspacesMode === 'individual') {
-      this.studentWorkspacesToMake = this.workspacesList.mapBy('id');
+      this.studentWorkspacesToMake =
+        this.workspacesList?.map((workspace) => workspace.id) ?? [];
       this.allSelected = true;
     }
     if (this.linkedWorkspacesMode === 'group') {
-      this.groupWorkspacesToMake = this.workspacesList.mapBy('id');
+      this.groupWorkspacesToMake =
+        this.workspacesList?.map((workspace) => workspace.id) ?? [];
       this.allSelected = true;
     }
     if (this.linkedWorkspacesMode === 'both') {
       this.studentWorkspacesToMake =
-        this.selectedSection.students.content.mapBy('id');
-      this.groupWorkspacesToMake = this.sectionGroups.mapBy('id');
+        this.selectedSection?.students?.map((student) => student.id) ?? [];
+      this.groupWorkspacesToMake =
+        this.sectionGroups?.map((group) => group.id) ?? [];
       this.allSelected = true;
     }
   }
@@ -465,4 +457,11 @@ export default class AssignmentNewComponent extends Component {
   @action cancelDateError() {
     this.invalidDateRange = false;
   }
+
+  @action
+  scrollIntoView(element) {
+    if (element) {
+      element.scrollIntoView({ behavior: 'smooth' });
+    }
+  }
 }

app/routes/assignments/new.js

@@ -1,29 +1,18 @@
 import { hash } from 'rsvp';
-import { action } from '@ember/object';
 import AuthenticatedRoute from '../_authenticated_route';
-import { inject as service } from '@ember/service';
+import { service } from '@ember/service';
 export default class AssignmentsNewRoute extends AuthenticatedRoute {
   @service store;
+  @service currentUser;
   @service router;
   beforeModel() {
-    const user = this.modelFor('application');
-    const isStudent = user.get('isStudent');
-    if (isStudent) {
-      this.router.transitionTo('assignments');
-    }
+    if (this.currentUser.isStudent) this.router.transitionTo('assignments');
   }
   model() {
     return hash({
-      currentUser: this.modelFor('application'),
       sections: this.store.findAll('section'),
       groups: this.store.findAll('group'),
       cachedProblems: this.store.findAll('problem'),
     });
   }
-  @action toAssignmentInfo(model) {
-    this.router.transitionTo('assignment', model);
-  }
-  @action toAssignmentsHome() {
-    this.router.transitionTo('assignments');
-  }
 }

app/routes/problems/problem/assignment.js

@@ -1,15 +1,6 @@
 import AuthenticatedRoute from 'encompass/routes/_authenticated_route';
 
 export default class ProblemsProblemAssignmentRoute extends AuthenticatedRoute {
-  activate() {
-    super.activate(...arguments);
-    requestAnimationFrame(() => {
-      let outletEl = document.getElementById('problem-info-outlet');
-      if (outletEl) {
-        outletEl.scrollIntoView({ behavior: 'smooth' });
-      }
-    });
-  }
   model() {
     // This reuses the model already loaded by problems/problem.js (must be a parent route)
     return this.modelFor('problems.problem');

app/templates/assignments/index.hbs

@@ -1,11 +1,10 @@
 {{page-title 'Assignments'}}
 <div id='assignment-home' class='home-view'>
-  {{#if this.model.currentUser.isStudent}}
-    <h1>Welcome to the Assignments Page <i class='fas fa-pen'></i></h1>
-    <p>Click on an assignment to submit an answer, new revision, or review an
+  <h1>Welcome to the Assignments Page</h1>
+  {{#if @model.isStudent}}
+    <p>Click on an assignment to submit an answer, make a revision, or review an
       earlier submission.</p>
   {{else}}
-    <h1>Welcome to the Assignments Page</h1>
     <p>Click on an assignment to display more information.</p>
     <LinkTo @route='assignments.new' id='assignment-new-link'>
       <span class='new-link-btn'>Create New Assignment

app/templates/assignments/new.hbs

@@ -1,2 +1,6 @@
-{{page-title "New Assignment"}}
-<AssignmentNew @cachedProblems={{this.model.cachedProblems}} @currentUser={{this.model.currentUser}} @sectionList={{this.model.sections}} @groups={{this.model.groups}} />
+{{page-title 'New Assignment'}}
+<AssignmentNew
+  @cachedProblems={{@model.cachedProblems}}
+  @sectionList={{@model.sections}}
+  @groups={{@model.groups}}
+/>