feat(forms): 🎨 Make student selector 2 column

Creates a 2 column layout for the student selector. When a student is chosen they will be moved to the right column Signed-off-by: Matthew Gray <[email protected]>
mmoomocow · Aug 16, 2023 · 320fef7 · 320fef7
1 parent a338249
commit 320fef7
Show file tree

Hide file tree

Showing 5 changed files with 169 additions and 54 deletions.
diff --git a/commendations/static/commendations/giveCommendation.css b/commendations/static/commendations/giveCommendation.css
@@ -1,75 +1,133 @@
 form {
-	margin: 0 auto;
-	max-width: 500px;
-	padding: 1rem;
-	background-color: var(--color-grey-light);
-	border-radius: 0.5rem;
-	box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
+    margin: 0 auto;
+    max-width: 500px;
+    padding: 1rem;
+    background-color: var(--color-grey-light);
+    border-radius: 0.5rem;
+    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
 }
 
 .formField {
-	margin-bottom: 2rem;
-	width: 100%;
+    margin-bottom: 2rem;
+    width: 100%;
 }
 
 .formField:last-of-type {
-	margin-bottom: 0;
+    margin-bottom: 0;
 }
 
 form * {
-	box-sizing: border-box;
+    box-sizing: border-box;
 }
 
 form input,
 form select,
 form textarea {
-	display: block;
-	margin: 0.5em 0;
-	padding: 0.5em;
-	border: 1px solid var(--color-grey-dark);
-	border-radius: 0.25rem;
-	box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
-	width: 100%;
+    display: block;
+    margin: 0.5em 0;
+    padding: 0.5em;
+    border: 1px solid var(--color-grey-dark);
+    border-radius: 0.25rem;
+    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
+    width: 100%;
 }
 
 form textarea {
-	height: 5rem;
-	resize: vertical;
+    height: 5rem;
+    resize: vertical;
 }
 
 form select:not(#teacher, #quickReason) {
-	height: 10rem;
+    height: 10rem;
 }
 
 form input[type="radio"] {
-	margin-left: 1em;
-	margin-right: 0.3em;
-	display: inline-block;
-	width: auto;
-	box-shadow: 0 0rem 0rem rgba(0, 0, 0, 0.2);
-	border: none;
-	transform: translateY(0.15rem);
+    margin-left: 1em;
+    margin-right: 0.3em;
+    display: inline-block;
+    width: auto;
+    box-shadow: 0 0rem 0rem rgba(0, 0, 0, 0.2);
+    border: none;
+    transform: translateY(0.15rem);
 }
 
 form input[type="radio"]:checked+label {
-	background-color: var(--color-gold);
+    background-color: var(--color-gold);
 }
 
 form #submit {
-	background-color: var(--color-gold);
-	color: var(--color-grey-dark);
-	font-weight: bold;
-	cursor: pointer;
+    background-color: var(--color-gold);
+    color: var(--color-grey-dark);
+    font-weight: bold;
+    cursor: pointer;
 }
 
 .errorMessage {
-	color: red;
-	font-weight: bold;
-	margin-bottom: 1rem;
+    color: red;
+    font-weight: bold;
+    margin-bottom: 1rem;
 }
 
 .hint {
-	color: var(--color-grey-dark);
-	font-size: 0.8rem;
-	margin-bottom: 1rem;
+    color: var(--color-grey-dark);
+    font-size: 0.8rem;
+    margin-bottom: 1rem;
+}
+
+#searchStudents {
+    grid-column: span 2;
+}
+
+/* 2 Col layout for student selection */
+/* Parent div with ID 2ColSelector */
+.selector {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-gap: 0.3rem;
+    margin-bottom: 2rem;
+}
+
+.selectorCol {
+    border: 1px solid var(--color-grey-dark);
+    border-radius: 0.25rem;
+    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
+    height: 15rem;
+    overflow-y: scroll;
+    padding: 2px;
+    /* Adjust padding as needed */
+}
+
+.selector>div>ul {
+    list-style-type: none;
+    padding: 2px;
+    margin: 0;
+}
+
+.selector>div>ul>li:hover,
+.selected {
+    background-color: var(--color-gold);
+}
+
+
+
+.selector>div>ul>li {
+    cursor: pointer;
+}
+
+.selector>div>ul>li>input {
+    margin-right: 0.2rem;
+    display: none;
+}
+
+
+/* Mobile friendly version */
+
+@media only screen and (max-width: 600px) {
+    .selector {
+        grid-template-columns: 1fr;
+    }
+
+    form {
+        max-width: 100%;
+    }
 }
diff --git a/commendations/static/commendations/giveCommendation.min.css b/commendations/static/commendations/giveCommendation.min.css
diff --git a/commendations/static/commendations/search.js b/commendations/static/commendations/search.js
@@ -1,10 +1,37 @@
 function filterStudents(searchTerm) {
-    var students = document.getElementsByClassName("studentChoice");
-    for (var i = 0; i < students.length; i++) {
-        if (students[i].text.toLowerCase().indexOf(searchTerm.toLowerCase()) > -1) {
-            students[i].style.display = "";
+    var selectableStudents = document.getElementById('selectable-students').getElementsByTagName("li");
+    var selectedStudents = document.getElementById('selected-students').getElementsByTagName("li");
+
+    if (searchTerm == "") {
+        for (var i = 0; i < selectableStudents.length; i++) {
+            selectableStudents[i].style.display = "";
+        }
+
+        for (var i = 0; i < selectedStudents.length; i++) {
+            selectedStudents[i].style.display = "";
+        }
+
+        return;
+    }
+
+
+    searchTerm = searchTerm.toLowerCase();
+
+    for (var i = 0; i < selectableStudents.length; i++) {
+        var studentName = selectableStudents[i].innerHTML.toLowerCase();
+        if (studentName.indexOf(searchTerm) > -1) {
+            selectableStudents[i].style.display = "";
+        } else {
+            selectableStudents[i].style.display = "none";
+        }
+    }
+
+    for (var i = 0; i < selectedStudents.length; i++) {
+        var studentName = selectedStudents[i].innerHTML.toLowerCase();
+        if (studentName.indexOf(searchTerm) > -1) {
+            selectedStudents[i].style.display = "";
         } else {
-            students[i].style.display = "none";
+            selectedStudents[i].style.display = "none";
         }
     }
 }
diff --git a/commendations/static/commendations/search.min.js b/commendations/static/commendations/search.min.js
diff --git a/commendations/templates/commendations/award.html b/commendations/templates/commendations/award.html
@@ -9,7 +9,27 @@
 {% comment %} Content that goes in the HTML head {% endcomment %}
 {% block head %}
 <link rel="stylesheet" href="{% static 'commendations/giveCommendation.min.css' %}">
-<script src="{% static 'commendations/search.js' %}"></script>
+<script src="{% static 'commendations/search.min.js' %}"></script>
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
+<script>
+    {% comment %} For 2 col selector {% endcomment %}
+    $(document).ready(function () {
+        $('#Available').on('click', 'li', function () {
+            $(this).toggleClass('selected');
+            $(this).find('input').prop('checked', !$(this).find('input').prop('checked'));
+            if ($(this).hasClass('selected')) {
+                $('#selected-students').append('<li><input type="checkbox" for="students" id="' + $(this).find('input').attr('id') + '" checked>' + $(this).text() + '</li>');
+            } else {
+                $('#selected-students').find('#' + $(this).find('input').attr('id')).parent().remove();
+            }
+        });
+        $('#Selected').on('click', 'li', function () {
+            $(this).toggleClass('selected');
+            $(this).find('input').prop('checked', !$(this).find('input').prop('checked'));
+            $('#selected-students').find('#' + $(this).find('input').attr('id')).parent().remove();
+        });
+    });
+</script>
 {% endblock head %}
 
 {% comment %} H1 at top of page, page title {% endcomment %}
@@ -47,14 +67,24 @@
 
     <div class="formField">
         <label for="students">Student(s) <abbr class="requiredField" title="This field is required">*</abbr></label>
-        {% comment %} Hold ctrl to select multiple hint {% endcomment %}
-        <p class="hint">Hold Ctrl to select multiple students</p>
-        <input type="text" name="students" id="searchStudents" placeholder="Search students" onkeydown="filterStudents(this.value)">
-        <select name="students" id="students" multiple required>
-            {% for student in students %}
-                <option class="studentChoice" value="{{ student.id }}">{{ student }}</option>
-            {% endfor %}
-        </select>
+        <p class="hint">Select students from the left by clicking them. Students on the right will be awarded the commendation. You can click students who are selected to deselect them</p>
+        <div class="selector">
+            <label id="AvailableLabel">Available Students</label>
+            <label id="SelectedLabel">Selected Students</label>
+            <input type="text" name="students" id="searchStudents" placeholder="Search students" onkeyup="filterStudents(this.value)">
+            <div id="Available" class="selectorCol">
+                <ul id="selectable-students">
+                    {% for student in students %}
+                        <li><input type="checkbox" for="students" id="{{student.id}}">{{student}}</li>
+                    {% endfor %}
+                </ul>
+            </div>
+            <div id="Selected" class="selectorCol">
+                <ul id="selected-students">
+                    <!-- Selected students will appear here -->
+                </ul>
+            </div>
+        </div>
     </div>
 
     <div class="formField">