Merge pull request #12952 from AlexVelezLl/quiz-assignment-side-panel

Add quiz recipients selector as Side Panel
learningequality · Jan 15, 2025 · 5bf546e · 5bf546e
2 parents 5c2a503 + 4663c24
commit 5bf546e
Show file tree

Hide file tree

Showing 14 changed files with 867 additions and 163 deletions.
diff --git a/kolibri/plugins/coach/assets/src/views/common/TruncatedItemList.vue b/kolibri/plugins/coach/assets/src/views/common/TruncatedItemList.vue
@@ -5,17 +5,8 @@
     v-else
     class="items-label"
   >
-    <span v-if="items.length === 1">
-      {{ items[0] }}
-    </span>
-    <span v-else-if="items.length === 2">
-      {{ $tr('twoItems', { item1: items[0], item2: items[1] }) }}
-    </span>
-    <span v-else-if="items.length === 3">
-      {{ $tr('threeItems', { item1: items[0], item2: items[1], item3: items[2] }) }}
-    </span>
-    <span v-else>
-      {{ $tr('manyItems', { item1: items[0], item2: items[1], count: items.length - 2 }) }}
+    <span>
+      {{ getTruncatedItemsString(items) }}
     </span>
   </div>
 
@@ -24,6 +15,8 @@
 
 <script>
 
+  import { getTruncatedItemsString } from './commonCoachStrings';
+
   export default {
     name: 'TruncatedItemList',
     props: {
@@ -32,21 +25,8 @@
         required: true,
       },
     },
-    $trs: {
-      twoItems: {
-        message: '{item1}, {item2}',
-        context:
-          "DO NOT TRANSLATE\nCopy the source string.\n\nFor reference: 'item' will be replaced by the name of the coach(es) in the list of classes.",
-      },
-      threeItems: {
-        message: '{item1}, {item2}, {item3}',
-        context:
-          "DO NOT TRANSLATE\nCopy the source string.\n\nFor reference: 'item' will be replaced by the name of the coach(es) in the list of classes.",
-      },
-      manyItems: {
-        message: '{item1}, {item2}, and {count, number, integer} others',
-        context: "'item' will be replaced by the name of the coach(es) in the list of classes.",
-      },
+    methods: {
+      getTruncatedItemsString,
     },
   };
 

diff --git a/kolibri/plugins/coach/assets/src/views/common/assignments/AssignmentDetailsModal.vue b/kolibri/plugins/coach/assets/src/views/common/assignments/AssignmentDetailsModal.vue
@@ -11,6 +11,10 @@
         {{ submitErrorMessage }}
       </UiAlert>
 
+      <!--
+        TODO: Refactor or rename this component, setting a title or a description
+        is not part of an "assignment" process (?)
+      -->
       <fieldset>
         <KGrid>
           <KGridItem
@@ -78,7 +82,19 @@
         <legend>
           {{ recipientsLabel$() }}
         </legend>
+
+        <SidePanelRecipientsSelector
+          v-if="selectRecipientsWithSidePanel"
+          ref="recipientsSelector"
+          v-model="selectedCollectionIds"
+          :groups="groups"
+          :classId="classId"
+          :disabled="disabled || formIsSubmitted"
+          :adHocLearners.sync="adHocLearners"
+          :selectedCollectionIds.sync="selectedCollectionIds"
+        />
         <RecipientSelector
+          v-else
           v-model="selectedCollectionIds"
           :groups="groups"
           :classId="classId"
@@ -118,13 +134,15 @@
   import commonCoreStrings from 'kolibri/uiText/commonCoreStrings';
   import { coachStrings } from '../../common/commonCoachStrings';
   import RecipientSelector from './RecipientSelector';
+  import SidePanelRecipientsSelector from './SidePanelRecipientsSelector';
 
   export default {
     name: 'AssignmentDetailsModal',
     components: {
       BottomAppBar,
       RecipientSelector,
       UiAlert,
+      SidePanelRecipientsSelector,
     },
     mixins: [commonCoreStrings],
     setup() {
@@ -183,6 +201,10 @@
         type: Boolean,
         default: false,
       },
+      selectRecipientsWithSidePanel: {
+        type: Boolean,
+        default: false,
+      },
     },
     data() {
       return {
@@ -255,6 +277,15 @@
       iconName() {
         return this.assignmentIsQuiz ? 'quiz' : 'lesson';
       },
+      submitObject() {
+        return {
+          title: this.title,
+          description: this.description,
+          assignments: this.selectedCollectionIds,
+          active: this.activeIsSelected,
+          learner_ids: this.adHocLearners,
+        };
+      },
     },
     watch: {
       title() {
@@ -269,6 +300,13 @@
       adHocLearners() {
         this.$emit('update', { learner_ids: this.adHocLearners });
       },
+      submitObject() {
+        if (this.showServerError) {
+          this.$nextTick(() => {
+            this.validate(false);
+          });
+        }
+      },
     },
     methods: {
       submitData() {
@@ -292,13 +330,7 @@
 
         if (this.formIsValid) {
           this.formIsSubmitted = true;
-          this.$emit('submit', {
-            title: this.title,
-            description: this.description,
-            assignments: this.selectedCollectionIds,
-            active: this.activeIsSelected,
-            learner_ids: this.adHocLearners,
-          });
+          this.$emit('submit', this.submitObject);
         } else {
           this.formIsSubmitted = false;
         }
@@ -327,6 +359,35 @@
         this.showTitleError = false;
         this.showServerError = false;
       },
+      /**
+       * @public
+       */
+      validate(handleFailure = true) {
+        let error = '';
+        this.showServerError = false;
+        // Validate title
+        if (this.title === '') {
+          if (handleFailure) {
+            this.handleSubmitTitleFailure();
+          }
+          error = this.coreString('requiredFieldError');
+        }
+
+        // Validate recipients
+        const recipientsError = this.$refs.recipientsSelector?.validate();
+        if (!error && recipientsError) {
+          error = recipientsError;
+          if (handleFailure) {
+            this.$refs.recipientsSelector?.handleSubmitRecipientsFailure();
+          }
+        }
+
+        if (error) {
+          this.showServerError = true;
+        }
+
+        return error;
+      },
     },
   };