ux fixes for permissions modal and bulk edit

- add close/cancel button in upper right of student forms modal - add hover state to buttons in modal - sort permission forms by name in bulk edit dropdowns - sort permission forms by name in student forms modal
concord-consortium · Jul 3, 2024 · 859ab19 · 859ab19
1 parent 7a74a0c
commit 859ab19
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 4 deletions.
diff --git a/...rc/library/components/permission-forms-v2/students-tab/edit-student-permissions-form.scss b/...rc/library/components/permission-forms-v2/students-tab/edit-student-permissions-form.scss
@@ -1,15 +1,44 @@
 @import "../../../../shared/styles/variables/variables";
 
 .editStudentPerimissionsForm {
-  width: 400px;
+  width: 540px;
 
   .formTop {
     display: flex;
+    justify-content: space-between;
     align-content: center;
     background-color: $blue;
     color: white;
     font-weight: bold;
     padding: 10px;
+
+    .studentName {
+      align-content: center;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .closeButton button {
+      padding: 0px;
+      border: none;
+      width: 40px;
+      height: 40px;
+      text-align: center;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 50px;
+      background-color: white;
+      &:hover {
+        background-color: darken(white, 10%);
+      }
+      i {
+        color: $blue;
+        margin: 0 auto;
+        font-size: 16px;
+      }
+    }
   }
 
   .scrollableWrapper {
@@ -40,6 +69,12 @@
     }
   }
 
+  .scrollableWrapper .formRow {
+    &:nth-child(even) {
+      background-color: #f5f5f5;
+    }
+  }
+
   .name {
     width: 273px;
   }
@@ -64,12 +99,20 @@
       background-color: $permission-gold;
       border-color: $permission-gold;
       color: white;
+      &:not(:disabled):hover {
+        background-color: darken($permission-gold, 10%);
+        border-color: darken($permission-gold, 10%);
+      }
     }
 
     .cancelButton {
       background-color: #ccc;
       border-color: #ccc;
       color:#333;
+      &:not(:disabled):hover {
+        background-color: darken(#ccc, 10%);
+        border-color: darken(#ccc, 10%);
+      }
     }
   }
 }
diff --git a/...src/library/components/permission-forms-v2/students-tab/edit-student-permissions-form.tsx b/...src/library/components/permission-forms-v2/students-tab/edit-student-permissions-form.tsx
@@ -61,14 +61,22 @@ export const EditStudentPermissionsForm = ({ student, permissionForms, onFormCan
   const savedIds = student.permission_forms.map(pf => pf.id).sort();
   const newIds = localPermissions.map(lp => lp.id).sort();
   const hasChanges = savedIds.length !== newIds.length || savedIds.some((id, i) => id !== newIds[i]);
+  const sortedPermissions = permissionForms.sort((a, b) => a.name.localeCompare(b.name));
 
   return (
     <div className={css.editStudentPerimissionsForm}>
       <div className={css.formTop}>
-        { `EDIT: ${student.name}` }
+        <div className={css.studentName}>
+        { `EDIT Permission Forms for: ${student.name}` }
+        </div>
+        <div className={css.closeButton}>
+          <button onClick={onFormCancel}>
+            <i className="icon-close" />
+          </button>
+        </div>
       </div>
       <div className={css.scrollableWrapper}>
-        { permissionForms.map((p, i) => {
+        { sortedPermissions.map((p, i) => {
           const isChecked = localPermissions.some(lp => lp.id === p.id);
 
           return (

diff --git a/...act-components/src/library/components/permission-forms-v2/students-tab/students-table.tsx b/...act-components/src/library/components/permission-forms-v2/students-tab/students-table.tsx
@@ -46,7 +46,7 @@ export const StudentsTable = ({ classId, currentSelectedProject }: IProps) => {
   const [requestInProgress, setRequestInProgress] = useState(false);
   const [permissionsExpanded, setPermissionsExpanded] = useState(false);
 
-  const currentForms = filteredByProject(nonArchived(permissionForms), currentSelectedProject);
+  const currentForms = filteredByProject(nonArchived(permissionForms), currentSelectedProject).sort((a, b) => a.name.localeCompare(b.name));
 
   const permissionFormToAddOptions = Object.freeze(
     currentForms.filter(pf => !permissionFormsToRemove.find(pfr => pfr.value === pf.id)).map(pf => ({ value: pf.id, label: pf.name }))