Merge pull request #412 from lblod/fix/date-locales

Fix i18n of human readable dates

app/components/app-chrome.hbs

@@ -11,7 +11,7 @@
         {{#if @editorDocument.updatedOn}}
         <li class="au-c-list-horizontal__item">
           <span class="au-c-app-chrome__status">
-            {{t "appChrome.savedOn"}} {{human-friendly-date @editorDocument.updatedOn}}
+            {{t "appChrome.savedOn"}} {{human-friendly-date @editorDocument.updatedOn locale=this.intl.primaryLocale}}
           </span>
         </li>
         {{else}}

app/components/app-chrome.js

@@ -5,6 +5,7 @@ import { DRAFT_STATUS_ID } from 'frontend-gelinkt-notuleren/utils/constants';
 export default class AppChromeComponent extends Component {
   @service currentSession;
   @service features;
+  @service intl;
 
   get documentStatus() {
     const status =

app/components/document-history.hbs

@@ -12,13 +12,13 @@
     {{#if @isCurrentVersion}}
       <p class="au-u-padding-small au-u-flex au-u-flex--between regulatory-statement-current-version-container-active">
         <span class="au-u-bold au-u-margin-right-large">{{t 'utils.currentVersion'}}: </span>
-        <span class="au-u-light">{{human-friendly-date @currentVersion.updatedOn}}</span>
+        <span class="au-u-light">{{human-friendly-date @currentVersion.updatedOn locale=this.intl.primaryLocale}}</span>
       </p>
     {{else}}
     <p class="au-u-padding-small">
       <LinkTo @route={{if (or @currentVersion.status (not this.currentSession.canWrite)) 'regulatory-statements.show' 'regulatory-statements.edit'}} @model={{@documentContainerId}} class="regulatory-statement-current-version-container au-u-flex au-u-flex--between">
         <span class="au-u-margin-right-large">{{t 'utils.currentVersion'}}: </span>
-        <span class="au-u-light">{{human-friendly-date @currentVersion.updatedOn}}</span>
+        <span class="au-u-light">{{human-friendly-date @currentVersion.updatedOn locale=this.intl.primaryLocale}}</span>
       </LinkTo>
     </p>
     {{/if}}
@@ -27,14 +27,14 @@
       {{#each this.revisions as |revision|}}
         {{#if (eq revision.id @currentRevisionId)}}
           <AuLink @route="regulatory-statements.revisions" @active="true" @skin="secondary" role="menuitem" class="au-u-padding-tiny au-u-padding-left-small" @models={{array @documentContainerId revision.id}}>
-            {{human-friendly-date revision.updatedOn}}
+            {{human-friendly-date revision.updatedOn locale=this.intl.primaryLocale}}
             {{#if revision.status.label}}
               <AuPill @skin='success'>{{revision.status.label}}</AuPill>
             {{/if}}
           </AuLink>
         {{else}}
           <AuLink @route="regulatory-statements.revisions" @skin="secondary" role="menuitem" class="au-u-padding-tiny au-u-padding-left-small" @models={{array @documentContainerId revision.id}}>
-            {{human-friendly-date revision.updatedOn}}
+            {{human-friendly-date revision.updatedOn locale=this.intl.primaryLocale}}
             {{#if revision.status.label}}
               <AuPill @skin='success'>{{revision.status.label}}</AuPill>
             {{/if}}

app/components/document-history.js

@@ -8,6 +8,7 @@ export default class DocumentHistoryComponent extends Component {
   @service documentService;
   @service router;
   @service currentSession;
+  @service intl;
   @tracked revisions;
   @tracked hasMore = true;
 

app/components/editor-plugins/regulatory-statements/view.hbs

@@ -10,7 +10,7 @@
     <AuToolbar as |Group|>
       <Group>
         <AuHeading @level="4" @skin="4">{{t "regulatoryStatementsPlugin.regulatoryStatement"}}</AuHeading>
-        <p>({{t "regulatoryStatementsPlugin.lastModification"}}: {{human-friendly-date this.updatedOn}})</p>
+        <p>({{t "regulatoryStatementsPlugin.lastModification"}}: {{human-friendly-date this.updatedOn locale=this.intl.primaryLocale}})</p>
       </Group>
       <Group>
         <AuButtonGroup>

app/components/editor-plugins/regulatory-statements/view.js

@@ -5,6 +5,7 @@ import { tracked } from '@glimmer/tracking';
 
 export default class ReadOnlyContentSectionComponent extends Component {
   @service store;
+  @service intl;
   @tracked documentContainer;
 
   @tracked regulatoryStatementContainer;

app/controllers/agendapoints/revisions.js

@@ -6,6 +6,7 @@ import generateExportFromEditorDocument from 'frontend-gelinkt-notuleren/utils/g
 import { inject as service } from '@ember/service';
 export default class AgendapointsRevisionsController extends Controller {
   @service router;
+  @service intl;
   @tracked showConfirmationModal = false;
   @tracked revisionToRemove;
   @tracked revisionsToRemove;

app/controllers/inbox/agendapoints.js

@@ -13,6 +13,7 @@ export default class InboxDraftDecisionsController extends Controller {
 
   @service currentSession;
   @service router;
+  @service intl;
   sort = '-current-version.updated-on';
 
   @restartableTask

app/controllers/inbox/imported.js

@@ -0,0 +1,6 @@
+import Controller from '@ember/controller';
+import { inject as service } from '@ember/service';
+
+export default class InboxImportedController extends Controller {
+  @service intl;
+}

app/controllers/inbox/regulatory-statements.js

@@ -12,6 +12,7 @@ export default class InboxRegulatoryStatementsController extends Controller {
 
   @service currentSession;
   @service router;
+  @service intl;
   sort = '-current-version.updated-on';
 
   @restartableTask

app/controllers/inbox/trash.js

@@ -13,6 +13,7 @@ export default class InboxTrashController extends Controller {
 
   @service currentSession;
   @service router;
+  @service intl;
 
   @action
   async moveToConcepts(documents) {

app/controllers/regulatory-statements/revisions.js

@@ -11,6 +11,7 @@ export default class RegulatoryAttachmentsShowController extends Controller {
   @service documentService;
   @service router;
   @service store;
+  @service intl;
   @service documentService;
   @tracked revisions;
 

app/controllers/regulatory-statements/show.js

@@ -10,6 +10,7 @@ export default class RegulatoryAttachmentsShowController extends Controller {
   @service currentSession;
   @service documentService;
   @service router;
+  @service intl;
   @tracked revisions;
 
   @action

app/helpers/human-friendly-date.js

@@ -1,18 +1,19 @@
-import { helper } from '@ember/component/helper';
 import formatRelative from 'date-fns/formatRelative';
-import { nl } from 'date-fns/locale';
+import locales from 'date-fns/locale';
 
-// this is a helper to mimic the moment-calendar behaviour
-export default helper(function humanFriendlyDate(
-  [referenceDatetime] /*, hash*/
-) {
-  //If not a date (e.g. date is undefined) return "" for printing on screen.
-  if (!(referenceDatetime instanceof Date)) return '';
+function getDateFnsLocale(locale) {
+  return locales[locale] ?? locales[locale.substring(0, 2)];
+}
 
+export default function humanFriendlyDate(date, { locale = 'nl-BE' }) {
+  console.log('LOCALE: ', locale);
+  if (!(date instanceof Date)) return '';
   try {
-    return formatRelative(referenceDatetime, new Date(), { locale: nl });
+    return formatRelative(date, new Date(), {
+      locale: getDateFnsLocale(locale),
+    });
   } catch (e) {
     console.error(e);
     return '';
   }
-});
+}

app/templates/agendapoints/revisions.hbs

@@ -33,7 +33,7 @@
             <li class="au-c-list-navigation__item">
               <AuButton @skin="link" @icon="document" @iconAlignment="left" class="au-c-button--pill au-c-list-navigation__link {{if (eq revision.updatedOn this.revisionDetail.updatedOn) 'active'}}" {{on "click" (fn this.details revision)}}>
                 <span class="au-c-button__text">
-                  {{human-friendly-date revision.updatedOn}}
+                  {{human-friendly-date revision.updatedOn locale=this.intl.primaryLocale}}
                 </span>
                 {{#if (eq revision.id this.model.editorDocument.id)}}
                   <AuPill @size="small" class="au-u-margin-left-tiny">Huidige versie</AuPill>
@@ -75,7 +75,7 @@
         <ul class="numbered-list">
           {{#each this.revisionsToRemove as |revision|}}
             <li class="u-hr u-padding--bottom--small">
-              <AuHeading @level="4" @skin="5">Versie van {{human-friendly-date revision.updatedOn}}</AuHeading>
+              <AuHeading @level="4" @skin="5">Versie van {{human-friendly-date revision.updatedOn locale=this.intl.primaryLocale}}</AuHeading>
               <p class="au-u-muted">{{revision.title}}</p>
             </li>
           {{/each}}

app/templates/inbox/agendapoints.hbs

@@ -39,7 +39,7 @@
         <AgendaPuntLink @documentContainer={{container}} @readOnly={{this.readOnly}}/>
       </td>
       <td>
-        {{human-friendly-date row.updatedOn}}
+        {{human-friendly-date row.updatedOn locale=this.intl.primaryLocale}}
         <br>
       </td>
       <td>

app/templates/inbox/imported.hbs

@@ -24,7 +24,7 @@
     </c.header>
     <c.body as |container|>
       <td><LinkTo @route="editor-documents.show" @model={{row.id}} class="au-c-link">{{container.currentVersion.title}}</LinkTo></td>
-      <td>{{human-friendly-date container.currentVersion.createdOn}}</td>
+      <td>{{human-friendly-date container.currentVersion.createdOn locale=this.intl.primaryLocale}}</td>
       <td><EditorStatusPill @status={{container.status}} /></td>
     </c.body>
   </t.content>

app/templates/inbox/regulatory-statements.hbs

@@ -50,7 +50,7 @@
           <RegulatoryStatementLink @documentContainer={{container}} @readOnly={{this.readOnly}}/>
         </td>
         <td>
-          {{human-friendly-date row.updatedOn}}
+          {{human-friendly-date row.updatedOn locale=this.intl.primaryLocale}}
           <br>
         </td>
         <td>

app/templates/inbox/trash.hbs

@@ -48,8 +48,8 @@
     <c.body as |container|>
       {{#let container.currentVersion as |row|}}
         <td>{{row.title}}</td>
-        <td>{{human-friendly-date row.updatedOn}}</td>
-        <td>{{human-friendly-date row.createdOn}}</td>
+        <td>{{human-friendly-date row.updatedOn locale=this.intl.primaryLocale}}</td>
+        <td>{{human-friendly-date row.createdOn locale=this.intl.primaryLocale}}</td>
       {{/let}}
     </c.body>
   </table.content>

app/templates/regulatory-statements/edit.hbs

@@ -15,7 +15,7 @@
     <AuDropdown @title={{t 'utils.currentVersion'}} @buttonLabel={{t 'utils.currentVersion'}} @alignment="left">
       <p class="au-u-padding-small regulatory-statement-current-version-container-active">
         <span class="au-u-medium au-u-margin-right-large">{{t 'utils.currentVersion'}}: </span>
-        <span class="au-u-light">{{human-friendly-date this.editorDocument.updatedOn}}</span>
+        <span class="au-u-light">{{human-friendly-date this.editorDocument.updatedOn locale=this.intl.primaryLocale}}</span>
       </p>
       <AuHr />
       <div
@@ -26,7 +26,7 @@
         <p class="au-u-muted au-u-medium au-u-padding-tiny au-u-padding-left-small">{{t 'utils.history'}}</p>
         {{#each this.revisions as |revision|}}
           <AuLink @route="regulatory-statements.revisions" @skin="secondary" class="au-u-padding-tiny au-u-padding-left-small" role="menuitem" @models={{array this.documentContainer.id revision.id}}>
-            {{human-friendly-date revision.updatedOn}}
+            {{human-friendly-date revision.updatedOn locale=this.intl.primaryLocale}}
             {{#if revision.status.label}}
               <AuPill @skin='success'>{{revision.status.label}}</AuPill>
             {{/if}}

app/templates/regulatory-statements/revisions.hbs

@@ -9,20 +9,20 @@
     </AuLink>
   </:return-link>
   <:actions-after-title>
-    <AuDropdown @title={{human-friendly-date this.model.editorDocument.updatedOn}} @buttonLabel={{human-friendly-date
-      this.model.editorDocument.updatedOn}} @alignment="left">
+    <AuDropdown @title={{human-friendly-date this.model.editorDocument.updatedOn locale=this.intl.primaryLocale}} @buttonLabel={{human-friendly-date
+      this.model.editorDocument.updatedOn locale=this.intl.primaryLocale}} @alignment="left">
       <LinkTo @route="{{if (or this.model.currentVersion.status (not this.currentSession.canWrite)) 'regulatory-statements.show' 'regulatory-statements.edit'}}" @model={{this.model.documentContainer.id}}
               class="au-u-padding-small regulatory-statement-current-version-container">
         <span class="au-u-margin-right-large">{{t 'utils.currentVersion'}}: </span>
-        <span class="au-u-light">{{human-friendly-date this.model.currentVersion.updatedOn}}</span>
+        <span class="au-u-light">{{human-friendly-date this.model.currentVersion.updatedOn locale=this.intl.primaryLocale}}</span>
       </LinkTo>
       <AuHr/>
       <div class="au-u-flex--column au-u-flex">
         <p class="au-u-muted au-u-medium au-u-padding-tiny au-u-padding-left-small">{{t 'utils.history'}}: </p>
         {{#each this.revisions as |revision|}}
           <AuLink @route="regulatory-statements.revisions" @skin="secondary" class="au-u-padding-tiny au-u-padding-left-small" role="menuitem" @models={{array
             this.model.documentContainer.id revision.id}}>
-            {{human-friendly-date revision.updatedOn}}
+            {{human-friendly-date revision.updatedOn locale=this.intl.primaryLocale}}
             {{#if revision.status.label}}
               <AuPill @skin='success'>{{revision.status.label}}</AuPill>
             {{/if}}

app/templates/regulatory-statements/show.hbs

@@ -11,19 +11,19 @@
   </AuLink>
   </:return-link>
   <:actions-after-title>
-    <AuDropdown @title={{human-friendly-date this.model.editorDocument.updatedOn}} @buttonLabel={{human-friendly-date
-      this.model.editorDocument.updatedOn}} @alignment="left">
+    <AuDropdown @title={{human-friendly-date this.model.editorDocument.updatedOn locale=this.intl.primaryLocale}} @buttonLabel={{human-friendly-date
+      this.model.editorDocument.updatedOn locale=this.intl.primaryLocale}} @alignment="left">
       <p class="au-u-padding-small regulatory-statement-current-version-container-active">
         <span class="au-u-bold au-u-margin-right-large">{{t 'utils.currentVersion'}}: </span>
-        <span class="au-u-light">{{human-friendly-date this.model.editorDocument.updatedOn}}</span>
+        <span class="au-u-light">{{human-friendly-date this.model.editorDocument.updatedOn locale=this.intl.primaryLocale}}</span>
       </p>
       <AuHr />
       <div class="au-u-margin-small au-u-flex--column au-u-flex">
         <p class="au-u-muted">{{t 'utils.history'}}: </p>
         {{#each this.revisions as |revision|}}
           <AuLink @route="regulatory-statements.revisions" @skin="secondary" role="menuitem" @models={{array
             this.model.documentContainer.id revision.id}}>
-            {{human-friendly-date revision.updatedOn}}
+            {{human-friendly-date revision.updatedOn locale=this.intl.primaryLocale}}
             {{#if revision.status.label}}
               <AuPill @skin='success'>{{revision.status.label}}</AuPill>
             {{/if}}