rendering strings as function on the dragsortwidget

learningequality · Nov 20, 2024 · d3b8251 · d3b8251
1 parent 3648fc5
commit d3b8251
Show file tree

Hide file tree

Showing 9 changed files with 20 additions and 80 deletions.
diff --git a/...ins/coach/assets/src/views/lessons/LessonEditDetailsPage/EditDetailsResourceListTable.vue b/...ins/coach/assets/src/views/lessons/LessonEditDetailsPage/EditDetailsResourceListTable.vue
@@ -29,8 +29,8 @@
             >
               <div class="move-handle">
                 <DragSortWidget
-                  :moveUpText="()=>moveResourceUpButtonDescription$()"
-                  :moveDownText="()=>moveResourceDownButtonDescription$()"
+                  :moveUpText="moveResourceUpButtonDescription$"
+                  :moveDownText="moveResourceDownButtonDescription$"
                   :isFirst="index === 0"
                   :isLast="index === resourceListItems.length - 1"
                   @moveUp="moveUpOne(index)"
@@ -261,14 +261,6 @@
         context:
           'Confirmation message when user removes a specific amount of resources from a lesson.',
       },
-      moveResourceUpButtonDescription: {
-        message: 'Move this resource one position up in this lesson',
-        context: 'Refers to changing the order of resources in a lesson.',
-      },
-      moveResourceDownButtonDescription: {
-        message: 'Move this resource one position down in this lesson',
-        context: 'Refers to changing the order of resources in a lesson.',
-      },
       parentChannelLabel: {
         message: 'Parent channel:',
         context:

diff --git a/.../plugins/coach/assets/src/views/lessons/LessonSummaryPage/tables/LessonResourcesTable.vue b/.../plugins/coach/assets/src/views/lessons/LessonSummaryPage/tables/LessonResourcesTable.vue
@@ -27,8 +27,8 @@
                     <!-- Mousedown.prevent is needed to avoid user selection -->
                     <DragSortWidget
                       class="sort-widget"
-                      :moveUpText="()=>moveResourceUpButtonDescription$()"
-                      :moveDownText="()=>moveResourceDownButtonDescription$()"
+                      :moveUpText="moveResourceUpButtonDescription$"
+                      :moveDownText="moveResourceDownButtonDescription$"
                       :isFirst="index === 0"
                       :isLast="index === entries.length - 1"
                       @moveUp="moveUpOne(index)"
@@ -189,16 +189,6 @@
         exporter.export(this.entries);
       },
     },
-    $trs: {
-      moveResourceUpButtonDescription: {
-        message: 'Move this resource one position up in this lesson',
-        context: 'Refers to ordering resources.',
-      },
-      moveResourceDownButtonDescription: {
-        message: 'Move this resource one position down in this lesson',
-        context: 'Refers to ordering resources.',
-      },
-    },
   };
 
 </script>

diff --git a/.../coach/assets/src/views/plan/LessonResourceSelectionPage/ManageSelectedLessonResource.vue b/.../coach/assets/src/views/plan/LessonResourceSelectionPage/ManageSelectedLessonResource.vue
@@ -14,8 +14,8 @@
           <div style="display:flex;">
             <div>
               <DragSortWidget
-                :moveUpText="()=> upLabel$()"
-                :moveDownText="()=> downLabel$()"
+                :moveUpText="upLabel$"
+                :moveDownText="downLabel$"
                 :noDrag="true"
                 :isFirst="index === 0"
                 :isLast="index === resources.length - 1"

diff --git a/kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/CreateQuizSection.vue b/kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/CreateQuizSection.vue
@@ -245,8 +245,8 @@
                       <div>
                         <DragSortWidget
                           class="sort-widget"
-                          :moveUpText="()=> upLabel$()"
-                          :moveDownText="()=>downLabel$()"
+                          :moveUpText="upLabel$"
+                          :moveDownText="downLabel$"
                           :noDrag="true"
                           :isFirst="index === 0"
                           :isLast="index === activeQuestions.length - 1"
@@ -665,16 +665,6 @@
         return this.$tr('down');
       },
     },
-    $trs: {
-      up: {
-        message: 'Up',
-        context: 'Move a section up in the list',
-      },
-      down: {
-        message: 'Down',
-        context: 'Move a section down in the list',
-      },
-    },
   };
 
 </script>

diff --git a/kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/SectionOrder.vue b/kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/SectionOrder.vue
@@ -28,8 +28,8 @@
             >
               <DragSortWidget
                 class="drag-title"
-                :moveUpText="()=> upLabel$()"
-                :moveDownText="()=> downLabel$()"
+                :moveUpText="upLabel$"
+                :moveDownText="downLabel$"
                 :noDrag="true"
                 :isFirst="index === 0"
                 :isLast="index === sectionOrderList.length - 1"
@@ -322,23 +322,7 @@
         );
         return displaySectionTitle(section, sectionIndexOrder).toUpperCase();
       },
-      upLabel(){
-        return this.$tr('up');
-      },
-      downLabel(){
-        return this.$tr('down');
-      },
     },     
-    $trs: {
-      up: {
-        message: 'Up',
-        context: 'Move a section up in the list',
-      },
-      down: {
-        message: 'Down',
-        context: 'Move a section down in the list',
-      },
-    },
   };
 
 </script>

diff --git a/kolibri/plugins/device/assets/src/views/RearrangeChannelsPage.vue b/kolibri/plugins/device/assets/src/views/RearrangeChannelsPage.vue
@@ -36,8 +36,8 @@
                 >
                   <DragSortWidget
                     class="sort-widget"
-                    :moveUpText="() => moveChannelUpLabel$({ name: channel.name })"
-                    :moveDownText="() => moveChanneldownLabel$({ name: channel.name })"
+                    :moveUpText="moveChannelUpLabel$"
+                    :moveDownText="moveChannelDownLabel$"
                     :isFirst="index === 0"
                     :isLast="index === channels.length - 1"
                     @moveUp="shiftOne(index, -1)"
@@ -94,14 +94,14 @@
       const { createSnackbar } = useSnackbar();
       const{
           moveChannelUpLabel$,
-          moveChanneldownLabel$
+          moveChannelDownLabel$,
         } = searchAndFilterStrings;
 
       return {
         canManageContent,
         createSnackbar,
         moveChannelUpLabel$,
-        moveChanneldownLabel$
+        moveChannelDownLabel$,
       };
     },
     data() {
@@ -197,14 +197,6 @@
         context:
           "This message will display on the 'Edit channel order' page if there are no channels available.",
       },
-      upLabel: {
-        message: 'Move {name} up one',
-        context: 'Label to rearrange channel order. Not seen on UI.',
-      },
-      downLabel: {
-        message: 'Move {name} down one',
-        context: 'Label to rearrange channel order. Not seen on UI.',
-      },
       editChannelOrderTitle: {
         message: 'Edit channel order',
         context:

diff --git a/packages/kolibri-common/components/sortable/DragSortWidget/index.vue b/packages/kolibri-common/components/sortable/DragSortWidget/index.vue
@@ -11,7 +11,7 @@
       icon="chevronUp"
       class="btn up"
       size="mini"
-      :ariaLabel="upLabel"
+      :ariaLabel="moveUpText()"
       :class="{ visuallyhidden: !hasFocus }"
       @click="clickUp"
       @keyup.space="clickUp"
@@ -31,7 +31,7 @@
       icon="chevronDown"
       class="btn dn"
       size="mini"
-      :ariaLabel="downLabel"
+      :ariaLabel="moveDownText()"
       :class="{ visuallyhidden: !hasFocus }"
       @click="clickDown"
       @keyup.space="clickDown"
@@ -75,14 +75,6 @@
         hasFocus: false,
       };
     },
-    computed: {
-      upLabel() {
-        return this.moveUpText();
-      },
-      downLabel() {
-        return this.moveDownText();
-      },
-    },
     mounted() {
       window.addEventListener('focus', this.updateFocus, true);
     },

diff --git a/packages/kolibri-common/strings/searchAndFilterStrings.js b/packages/kolibri-common/strings/searchAndFilterStrings.js
@@ -8,11 +8,11 @@ export const searchAndFilterStrings = createTranslator('SearchAndFilterStrings',
       'Label for a section of the page that contains options for searching and filtering content',
   },
   moveChannelUpLabel: {
-    message: 'Move {name} up one',
+    message: 'Move up one',
     context: 'Label to rearrange channel order. Not seen on UI.',
   },
-  moveChanneldownLabel: {
-    message: 'Move {name} down one',
+  moveChannelDownLabel: {
+    message: 'Move down one',
     context: 'Label to rearrange channel order. Not seen on UI.',
   },
 

diff --git a/packages/kolibri/utils/i18n.js b/packages/kolibri/utils/i18n.js
@@ -157,7 +157,7 @@ class Translator {
     this._defaultMessages = defaultMessages;
     for (const key in defaultMessages) {
       this[`${key}$`] = this.$tr.bind(this, key);
-      Object.defineProperty(this[`${key}$`], 'KOLIBRI_I18N_WRAPPED_STRING', { value: true, writeable: false });
+      this[`${key}$`].KOLIBRI_I18N_WRAPPED_STRING == true
     }
   }
   $tr(messageId, args) {