Consolidate selection text formatting.

contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditAudienceModal.vue

@@ -8,8 +8,8 @@
     @submit="handleSave"
     @cancel="close"
   >
-    <p v-if="nodeIds.length > 1" data-test="resources-selected-message">
-      {{ $tr('resourcesSelected', { count: nodeIds.length }) }}
+    <p v-if="resourcesSelectedText.length > 0" data-test="resources-selected-message">
+      {{ resourcesSelectedText }}
     </p>
     <template v-if="isMultipleAudience">
       <p data-test="multiple-audience-message">
@@ -64,6 +64,10 @@
         type: Array,
         required: true,
       },
+      resourcesSelectedText: {
+        type: String,
+        default: '',
+      },
     },
     data() {
       return {
@@ -147,8 +151,6 @@
       editAudienceTitle: 'Edit Audience',
       saveAction: 'Save',
       cancelAction: 'Cancel',
-      resourcesSelected:
-        '{count, number, integer} {count, plural, one {resource} other {resources}} selected',
       forBeginnersCheckbox: 'For beginners',
       visibleTo: 'Visible to:',
       visibleToAnyone: 'Resources are visible to anyone',

contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditBooleanMapModal.vue

@@ -8,8 +8,8 @@
     @submit="handleSave"
     @cancel="close"
   >
-    <p v-if="nodeIds.length > 1" data-test="resources-selected-message">
-      {{ $tr('resourcesSelected', { count: nodeIds.length }) }}
+    <p v-if="resourcesSelectedText.length > 0" data-test="resources-selected-message">
+      {{ resourcesSelectedText }}
     </p>
     <template v-if="isDescendantsUpdatable && isTopicSelected">
       <KCheckbox
@@ -72,6 +72,10 @@
         type: Array,
         default: () => [],
       },
+      resourcesSelectedText: {
+        type: String,
+        default: '',
+      },
     },
     data() {
       return {
@@ -165,8 +169,6 @@
     $trs: {
       saveAction: 'Save',
       cancelAction: 'Cancel',
-      resourcesSelected:
-        '{count, number, integer} {count, plural, one {resource} other {resources}} selected',
       updateDescendantsCheckbox:
         'Apply to all resources and folders nested within the selected folders',
     },

contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditCategoriesModal.vue

@@ -6,6 +6,7 @@
     :title="$tr('editCategories')"
     :nodeIds="nodeIds"
     :confirmationMessage="changesSaved"
+    :resourcesSelectedText="resourcesSelectedText"
     @close="() => $emit('close')"
   >
     <template #input="{ value, inputHandler }">
@@ -39,6 +40,10 @@
         type: Array,
         required: true,
       },
+      resourcesSelectedText: {
+        type: String,
+        default: '',
+      },
     },
     computed: {
       changesSaved() {

contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditLanguageModal.vue

@@ -9,8 +9,8 @@
     @submit="handleSave"
     @cancel="close"
   >
-    <p v-if="nodeIds.length > 1" data-test="resources-selected-message">
-      {{ $tr('resourcesSelected', { count: nodeIds.length }) }}
+    <p v-if="resourcesSelectedText.length > 0" data-test="resources-selected-message">
+      {{ resourcesSelectedText }}
     </p>
     <p v-if="isMultipleNodeLanguages" data-test="different-languages-message">
       {{ $tr('differentLanguages') }}
@@ -69,6 +69,10 @@
         type: Array,
         required: true,
       },
+      resourcesSelectedText: {
+        type: String,
+        default: '',
+      },
     },
     data() {
       return {
@@ -156,8 +160,6 @@
       saveAction: 'Save',
       cancelAction: 'Cancel',
       selectLanguage: 'Select / Type Language',
-      resourcesSelected:
-        '{count, number, integer} {count, plural, one {resource} other {resources}} selected',
       differentLanguages:
         'The selected resources have different languages set. Choosing an option below will apply the language to all the selected resources',
       updateDescendantsCheckbox:

contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditLearningActivitiesModal.vue

@@ -7,6 +7,7 @@
     :nodeIds="nodeIds"
     :validators="learningActivityValidators"
     :confirmationMessage="changesSaved"
+    :resourcesSelectedText="resourcesSelectedText"
     @close="() => $emit('close')"
   >
     <template #input="{ value, inputHandler }">
@@ -41,6 +42,10 @@
         type: Array,
         required: true,
       },
+      resourcesSelectedText: {
+        type: String,
+        default: '',
+      },
     },
     computed: {
       learningActivityValidators() {

contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditLevelsModal.vue

@@ -6,6 +6,7 @@
     :title="$tr('editLevelsTitle')"
     :nodeIds="nodeIds"
     :confirmationMessage="changesSaved"
+    :resourcesSelectedText="resourcesSelectedText"
     @close="() => $emit('close')"
   >
     <template #input="{ value, inputHandler }">
@@ -39,6 +40,10 @@
         type: Array,
         required: true,
       },
+      resourcesSelectedText: {
+        type: String,
+        default: '',
+      },
     },
     computed: {
       changesSaved() {
@@ -47,7 +52,7 @@
       },
     },
     $trs: {
-      editLevelsTitle: 'What Levels',
+      editLevelsTitle: 'Edit Levels',
     },
   };
 

contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditResourcesNeededModal.vue

@@ -6,6 +6,7 @@
     :title="$tr('editResourcesNeededTitle')"
     :nodeIds="nodeIds"
     :confirmationMessage="changesSaved"
+    :resourcesSelectedText="resourcesSelectedText"
     @close="() => $emit('close')"
   >
     <template #input="{ value, inputHandler }">
@@ -39,6 +40,10 @@
         type: Array,
         required: true,
       },
+      resourcesSelectedText: {
+        type: String,
+        default: '',
+      },
     },
     computed: {
       changesSaved() {

contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditSourceModal.vue

@@ -10,8 +10,8 @@
       @submit="handleSave"
       @cancel="close"
     >
-      <p v-if="nodeIds.length > 1" data-test="resources-selected-message" style="margin-top: 8px;">
-        {{ $tr('resourcesSelected', { count: nodeIds.length }) }}
+      <p v-if="resourcesSelectedText.length > 0" data-test="resources-selected-message">
+        {{ resourcesSelectedText }}
       </p>
       <div class="form-item">
         <div class="input-container">
@@ -146,6 +146,10 @@
         type: Array,
         required: true,
       },
+      resourcesSelectedText: {
+        type: String,
+        default: '',
+      },
     },
     data() {
       /* eslint-disable  kolibri/vue-no-unused-properties */
@@ -271,8 +275,6 @@
       aggregatorLabel: 'Aggregator',
       aggregatorToolTip:
         'Website or org hosting the content collection but not necessarily the creator or copyright holder',
-      resourcesSelected:
-        '{count, number, integer} {count, plural, one {resource} other {resources}} selected',
       copyrightHolderLabel: 'Copyright holder',
       cannotEditPublic: 'Cannot edit for public channel resources',
       editOnlyLocal: 'Edits will be reflected only for local resources',

contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/__tests__/EditAudienceModal.spec.js

@@ -38,6 +38,7 @@ const makeWrapper = nodeIds => {
     store,
     propsData: {
       nodeIds,
+      resourcesSelectedText: '2 resources',
     },
   });
 };

contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/__tests__/EditBooleanMapModal.spec.js

@@ -69,6 +69,7 @@ const makeWrapper = ({ nodeIds, field = 'categories', ...restOptions }) => {
       field,
       autocompleteLabel: 'Select option',
       confirmationMessage: 'edited',
+      resourcesSelectedText: '2 resources',
       ...restOptions,
     },
     scopedSlots: {
@@ -217,7 +218,7 @@ describe('EditBooleanMapModal', () => {
 
     const resourcesCounter = wrapper.find('[data-test="resources-selected-message"]');
     expect(resourcesCounter.exists()).toBeTruthy();
-    expect(resourcesCounter.text()).toContain('4');
+    expect(resourcesCounter.text()).toContain('2 resources');
   });
 
   describe('Submit', () => {

contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/__tests__/EditLanguageModal.spec.js

@@ -20,6 +20,7 @@ const makeWrapper = nodeIds => {
     store,
     propsData: {
       nodeIds,
+      resourcesSelectedText: '2 resources',
     },
   });
 };
@@ -101,7 +102,7 @@ describe('EditLanguageModal', () => {
 
     const resourcesCounter = wrapper.find('[data-test="resources-selected-message"]');
     expect(resourcesCounter.exists()).toBeTruthy();
-    expect(resourcesCounter.text()).toContain('4');
+    expect(resourcesCounter.text()).toContain('2 resources');
   });
 
   test('should filter languages options based on search query', () => {

contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/__tests__/EditSourceModal.spec.js

@@ -41,6 +41,7 @@ const makeWrapper = nodeIds => {
     store,
     propsData: {
       nodeIds,
+      resourcesSelectedText: '2 resources',
     },
   });
 };

contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/index.vue

@@ -9,36 +9,43 @@
     <EditLanguageModal
       v-if="isLanguageOpen"
       :nodeIds="nodeIds"
+      :resourcesSelectedText="displayedResourceSelectedText"
       @close="close"
     />
     <EditResourcesNeededModal
       v-if="isResourcesNeededOpen"
       :nodeIds="nodeIds"
+      :resourcesSelectedText="displayedResourceSelectedText"
       @close="close"
     />
     <EditCategoriesModal
       v-if="isCategoriesOpen"
       :nodeIds="nodeIds"
+      :resourcesSelectedText="displayedResourceSelectedText"
       @close="close"
     />
     <EditLevelsModal
       v-if="isLevelsOpen"
       :nodeIds="nodeIds"
+      :resourcesSelectedText="displayedResourceSelectedText"
       @close="close"
     />
     <EditLearningActivitiesModal
       v-if="isLearningActivitiesOpen"
       :nodeIds="nodeIds"
+      :resourcesSelectedText="displayedResourceSelectedText"
       @close="close"
     />
     <EditSourceModal
       v-if="isEditSourceOpen"
       :nodeIds="nodeIds"
+      :resourcesSelectedText="displayedResourceSelectedText"
       @close="close"
     />
     <EditAudienceModal
       v-if="isAudienceOpen"
       :nodeIds="nodeIds"
+      :resourcesSelectedText="displayedResourceSelectedText"
       @close="close"
     />
     <EditCompletionModal
@@ -55,6 +62,7 @@
 
   import { mapGetters, mapActions } from 'vuex';
   import { QuickEditModals } from '../../constants';
+  import messages from '../../translator';
   import EditSourceModal from './EditSourceModal';
   import EditLevelsModal from './EditLevelsModal';
   import EditLanguageModal from './EditLanguageModal';
@@ -79,7 +87,10 @@
       EditLearningActivitiesModal,
     },
     computed: {
-      ...mapGetters('contentNode', ['getQuickEditModalOpen']),
+      ...mapGetters('contentNode', [
+        'getQuickEditModalOpen',
+        'getSelectedTopicAndResourceCountText',
+      ]),
       openedModal() {
         const quickEditModal = this.getQuickEditModalOpen();
         if (!quickEditModal) {
@@ -94,6 +105,19 @@
         }
         return quickEditModal.nodeIds;
       },
+      resourcesSelectedText() {
+        return this.getSelectedTopicAndResourceCountText(this.nodeIds);
+      },
+      singleResourceSelected() {
+        return (
+          this.resourcesSelectedText ===
+          // eslint-disable-next-line kolibri/vue-no-undefined-string-uses
+          messages.$tr('selectionCount', { topicCount: 0, resourceCount: 1 })
+        );
+      },
+      displayedResourceSelectedText() {
+        return this.singleResourceSelected ? '' : this.resourcesSelectedText;
+      },
       isTitleDescriptionOpen() {
         return this.openedModal === QuickEditModals.TITLE_DESCRIPTION;
       },
@@ -134,5 +158,5 @@
 
 
 <style lang="scss" scoped>
-  
+
 </style>

contentcuration/contentcuration/frontend/channelEdit/translator.js

@@ -14,6 +14,8 @@ const MESSAGES = {
   errorMissingAnswer: 'Choose a correct answer',
   errorChooseAtLeastOneCorrectAnswer: 'Choose at least one correct answer',
   errorProvideAtLeastOneCorrectAnswer: 'Provide at least one correct answer',
+  selectionCount:
+    '{topicCount, plural, =0 {} one {# folder, } other {# folders, }}{resourceCount, plural, one {# resource} other {# resources}}',
 };
 
 export default createTranslator(NAMESPACE, MESSAGES);