feat: add optional school name column to research class table [PT-187…

…339065]
concord-consortium · Apr 2, 2024 · 419d72c · 419d72c
1 parent 21e421b
commit 419d72c
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 8 deletions.
diff --git a/rails/app/assets/javascripts/react-components.js b/rails/app/assets/javascripts/react-components.js
diff --git a/rails/app/controllers/api/v1/researcher_classes_controller.rb b/rails/app/controllers/api/v1/researcher_classes_controller.rb
@@ -127,6 +127,7 @@ def classes_mapping(classes_query)
         name: c.name,
         teacher_names: c.teachers.map { |t| "#{t.user.first_name} #{t.user.last_name}" }.join(", "),
         cohort_names: c.teachers.map { |t| t.cohorts.map(&:name) }.flatten.uniq.join(", "),
+        school_name: c.school ? c.school.name : "",
         class_url: materials_portal_clazz_url(c.id, researcher: true)
       }
     end

diff --git a/react-components/src/library/components/researcher-classes-form/style.scss b/react-components/src/library/components/researcher-classes-form/style.scss
@@ -25,10 +25,18 @@
         background-color: #444;
       }
 
-      .resultsLabel {
-        font-weight: bold;
+      .top {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        .resultsLabel {
+          font-weight: bold;
+        }
       }
 
+
+
       table {
         width: 100%;
         border: 1px solid #444;
@@ -91,6 +99,10 @@
         td + td, th + th {
           border-left: 1px solid #444;
         }
+
+        .linkCell {
+          white-space: nowrap;
+        }
       }
     }
   }

diff --git a/react-components/src/library/components/researcher-classes-form/table.js b/react-components/src/library/components/researcher-classes-form/table.js
@@ -9,7 +9,8 @@ export default class ResearcherClassesTable extends React.Component {
       sortedClasses: props.classes,
       // Default sort by id in descending order - this will show the most recent classes first
       sortBy: 'id',
-      sortDirection: 'desc'
+      sortDirection: 'desc',
+      showSchoolName: false
     }
   }
 
@@ -50,15 +51,24 @@ export default class ResearcherClassesTable extends React.Component {
     }, () => this.sortClasses())
   }
 
+  handleShowSchoolNameChange (e) {
+    this.setState({ showSchoolName: e.target.checked })
+  }
+
   render () {
-    const { sortedClasses } = this.state
+    const { sortedClasses, showSchoolName } = this.state
     if (sortedClasses.length === 0) {
       return null
     }
     return (
       <div className={css.researcherClassesTable}>
         <hr />
-        <div className={css.resultsLabel}>Results</div>
+        <div className={css.top}>
+          <div className={css.resultsLabel}>Results</div>
+          <span>
+            <input type='checkbox' checked={showSchoolName} onChange={this.handleShowSchoolNameChange.bind(this)} /> Show School Name
+          </span>
+        </div>
 
         <table>
           <thead>
@@ -78,6 +88,14 @@ export default class ResearcherClassesTable extends React.Component {
                   Class <span className={`${css.sortIcon} ${this.fieldSortIcon('name')} icon-sort`} />
                 </span>
               </th>
+              {
+                showSchoolName &&
+                <th onClick={this.handleHeaderClick.bind(this, 'school_name')}>
+                  <span className={css.header}>
+                    School <span className={`${css.sortIcon} ${this.fieldSortIcon('school_name')} icon-sort`} />
+                  </span>
+                </th>
+              }
               <th />
             </tr>
           </thead>
@@ -88,7 +106,8 @@ export default class ResearcherClassesTable extends React.Component {
                   <td>{c.cohort_names}</td>
                   <td>{c.teacher_names}</td>
                   <td>{c.name}</td>
-                  <td><a href={c.class_url} target='_blank'>View Class</a></td>
+                  { showSchoolName && <td>{c.school_name}</td> }
+                  <td className={css.linkCell}><a href={c.class_url} target='_blank'>View Class</a></td>
                 </tr>
               ))
             }