Created a plural filter

app/assets/javascripts/cycle_analytics/components/limit_warning_component.js

@@ -11,7 +11,7 @@ export default {
           aria-hidden="true"
           title="Limited to showing 50 events at most"
           data-placement="top"></i>
-      {{ 'Showing 50 events' | translate }}
+      {{ 'Showing %d event' | translate-plural('Showing %d events', 50) }}
     </span>
   `,
 };

app/assets/javascripts/cycle_analytics/components/total_time_component.js

@@ -12,9 +12,9 @@ global.cycleAnalytics.TotalTimeComponent = Vue.extend({
   template: `
     <span class="total-time">
       <template v-if="Object.keys(time).length">
-        <template v-if="time.days">{{ time.days }} <span>{{ time.days === 1 ? 'day' : 'days' | translate }}</span></template>
+        <template v-if="time.days">{{ time.days }} <span>{{ 'day' | translate-plural('days', time.days) }}</span></template>
         <template v-if="time.hours">{{ time.hours }} <span v-translate>hr</span></template>
-        <template v-if="time.mins && !time.days">{{ time.mins }} <span v-translate>mins</span></template>
+        <template v-if="time.mins && !time.days">{{ time.mins }} <span>{{ 'min' | translate-plural('mins', time.mins) }}</span></template>
         <template v-if="time.seconds && Object.keys(time).length === 1 || time.seconds === 0">{{ time.seconds }} <span>s</span></template>
       </template>
       <template v-else>

app/assets/javascripts/vue_shared/translate.js

@@ -3,6 +3,9 @@ import locale from '../locale';
 export default (Vue) => {
   Vue.filter('translate', text => locale.gettext(text));
 
+  Vue.filter('translate-plural', (text, pluralText, count) =>
+    locale.ngettext(text, pluralText, count).replace(/%d/g, count));
+
   Vue.directive('translate', {
     bind(el) {
       const $el = el;

spec/javascripts/vue_shared/translate_spec.js

+import Vue from 'vue';
+import Translate from '~/vue_shared/translate';
+
+Vue.use(Translate);
+
+describe('Vue translate filter', () => {
+  let el;
+
+  beforeEach(() => {
+    el = document.createElement('div');
+
+    document.body.appendChild(el);
+  });
+
+  it('translate single text', (done) => {
+    const comp = new Vue({
+      el,
+      template: `
+        <span>
+          {{ 'testing' | translate }}
+        </span>
+      `,
+    }).$mount();
+
+    Vue.nextTick(() => {
+      expect(
+        comp.$el.textContent.trim(),
+      ).toBe('testing');
+
+      done();
+    });
+  });
+
+  it('translate plural text with single count', (done) => {
+    const comp = new Vue({
+      el,
+      template: `
+        <span>
+          {{ '%d day' | translate-plural('%d days', 1) }}
+        </span>
+      `,
+    }).$mount();
+
+    Vue.nextTick(() => {
+      expect(
+        comp.$el.textContent.trim(),
+      ).toBe('1 day');
+
+      done();
+    });
+  });
+
+  it('translate plural text with multiple count', (done) => {
+    const comp = new Vue({
+      el,
+      template: `
+        <span>
+          {{ '%d day' | translate-plural('%d days', 2) }}
+        </span>
+      `,
+    }).$mount();
+
+    Vue.nextTick(() => {
+      expect(
+        comp.$el.textContent.trim(),
+      ).toBe('2 days');
+
+      done();
+    });
+  });
+
+  it('translate plural without replacing any text', (done) => {
+    const comp = new Vue({
+      el,
+      template: `
+        <span>
+          {{ 'day' | translate-plural('days', 2) }}
+        </span>
+      `,
+    }).$mount();
+
+    Vue.nextTick(() => {
+      expect(
+        comp.$el.textContent.trim(),
+      ).toBe('days');
+
+      done();
+    });
+  });
+});