Add quiz recipients selector as Side Panel

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,
     },
   };
 

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 {
@@ -327,6 +349,30 @@
         this.showTitleError = false;
         this.showServerError = false;
       },
+      /**
+       * @public
+       */
+      validate() {
+        let error = '';
+        // Validate title
+        if (this.title === '') {
+          this.handleSubmitTitleFailure();
+          error = this.coreString('requiredFieldError');
+        }
+
+        // Validate recipients
+        const recipientsError = this.$refs.recipientsSelector?.validate();
+        if (!error && recipientsError) {
+          error = recipientsError;
+          this.$refs.recipientsSelector?.handleSubmitRecipientsFailure();
+        }
+
+        if (error) {
+          this.showServerError = true;
+        }
+
+        return error;
+      },
     },
   };