Make the report logs translatable

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

js/src/i18n/en_US.json

@@ -594,5 +594,12 @@
   "No notifications": "No notifications",
   "Direct": "Direct",
   "Every hour": "Every hour",
-  "Every day": "Every day"
+  "Every day": "Every day",
+  "report #{report_number}": "report #{report_number}",
+  "{actor} closed {report}": "{actor} closed {report}",
+  "a non-existent report": "a non-existent report",
+  "{actor} reopened {report}": "{actor} reopened {report}",
+  "{actor} marked {report} as resolved": "{actor} marked {report} as resolved",
+  "{actor} added a note on {report}": "{actor} added a note on {report}",
+  "{actor} deleted an event named \"{title}\"": "{actor} deleted an event named \"{title}\""
 }

js/src/i18n/fr_FR.json

@@ -597,10 +597,17 @@
   "We'll always send you emails to notify about important event updates": "Nous vous enverrons toujours des emails pour vous notifier à propos des mises à jour importantes des événements",
   "Like title or physical address update, start or end date change or event being confirmed or cancelled.": "Comme la mise à jour du titre ou de l'addresse de l'événement, un changement de date de début ou de fin, ou bien l'événement devenant confirmé ou bien annulé.",
   "Organizer notifications": "Notifications pour organisateur·ice",
-  "Notifications for manually approved participations to an event": "Notifications pour l'approbabtion manuelle des participations à un événement",
+  "Notifications for manually approved participations to an event": "Notifications pour l'approbation manuelle des participations à un événement",
   "We'll send you an email when there new participations requests.": "Nous vous enverrons un email lorsqu'il y aura de nouvelles demandes de participation.",
   "No notifications": "Pas de notifications",
   "Direct": "Direct",
   "Every hour": "À chaque heure",
-  "Every day": "Chaque jour"
+  "Every day": "Chaque jour",
+  "report #{report_number}": "le signalement #{report_number}",
+  "{actor} closed {report}": "{actor} a fermé {report}",
+  "a non-existent report": "un signalement non-existant",
+  "{actor} reopened {report}": "{actor} a réouvert {report}",
+  "{actor} marked {report} as resolved": "{actor} a marqué {report} comme résolu",
+  "{actor} added a note on {report}": "{actor} a ajouté une note sur {report}",
+  "{actor} deleted an event named \"{title}\"": "{actor} a supprimé un événement nommé \"{title}\""
 }

js/src/views/Moderation/Logs.vue

@@ -1,48 +1,74 @@
 <template>
   <section>
     <ul v-if="actionLogs.length > 0">
-      <li v-for="log in actionLogs">
+      <li v-for="log in actionLogs" :key="log.id">
         <div class="box">
           <img class="image" :src="log.actor.avatar.url" v-if="log.actor.avatar" />
-          <span>@{{ log.actor.preferredUsername }}</span>
-          <span v-if="log.action === ActionLogAction.REPORT_UPDATE_CLOSED">
-            closed
-            <router-link :to="{ name: RouteName.REPORT, params: { reportId: log.object.id } }"
-              >report #{{ log.object.id }}</router-link
+          <i18n
+            v-if="log.action === ActionLogAction.REPORT_UPDATE_CLOSED"
+            tag="span"
+            path="{actor} closed {report}"
           >
-          </span>
-          <span v-else-if="log.action === ActionLogAction.REPORT_UPDATE_OPENED">
-            reopened
-            <router-link :to="{ name: RouteName.REPORT, params: { reportId: log.object.id } }"
-              >report #{{ log.object.id }}</router-link
+            <span slot="actor">@{{ log.actor.preferredUsername }}</span>
+            <router-link
+              :to="{ name: RouteName.REPORT, params: { reportId: log.object.id } }"
+              slot="report"
+              >{{ $t("report #{report_number}", { report_number: log.object.id }) }}
+            </router-link>
+          </i18n>
+          <i18n
+            v-else-if="log.action === ActionLogAction.REPORT_UPDATE_OPENED"
+            tag="span"
+            path="{actor} reopened {report}"
           >
-          </span>
-          <span v-else-if="log.action === ActionLogAction.REPORT_UPDATE_RESOLVED">
-            marked
-            <router-link :to="{ name: RouteName.REPORT, params: { reportId: log.object.id } }"
-              >report #{{ log.object.id }}</router-link
-            >as resolved
-          </span>
-          <span v-else-if="log.action === ActionLogAction.NOTE_CREATION">
-            added a note on
+            <span slot="actor">@{{ log.actor.preferredUsername }}</span>
+            <router-link
+              :to="{ name: RouteName.REPORT, params: { reportId: log.object.id } }"
+              slot="report"
+              >{{ $t("report #{report_number}", { report_number: log.object.id }) }}
+            </router-link>
+          </i18n>
+          <i18n
+            v-else-if="log.action === ActionLogAction.REPORT_UPDATE_RESOLVED"
+            tag="span"
+            path="{actor} marked {report} as resolved"
+          >
+            <span slot="actor">@{{ log.actor.preferredUsername }}</span>
+            <router-link
+              :to="{ name: RouteName.REPORT, params: { reportId: log.object.id } }"
+              slot="report"
+              >{{ $t("report #{report_number}", { report_number: log.object.id }) }}
+            </router-link>
+          </i18n>
+          <i18n
+            v-else-if="log.action === ActionLogAction.NOTE_CREATION"
+            tag="span"
+            path="{actor} added a note on {report}"
+          >
+            <span slot="actor">@{{ log.actor.preferredUsername }}</span>
             <router-link
               v-if="log.object.report"
               :to="{ name: RouteName.REPORT, params: { reportId: log.object.report.id } }"
-              >report #{{ log.object.report.id }}</router-link
-            >
-            <span v-else>a non-existent report</span>
-          </span>
-          <span v-else-if="log.action === ActionLogAction.EVENT_DELETION"
-            >deleted an event named « {{ log.object.title }} »</span
+              slot="report"
+              >{{ $t("report #{report_number}", { report_number: log.object.report.id }) }}
+            </router-link>
+            <span v-else slot="report">{{ $t("a non-existent report") }}</span>
+          </i18n>
+          <i18n
+            v-else-if="log.action === ActionLogAction.EVENT_DELETION"
+            tag="span"
+            path='{actor} deleted an event named "{title}"'
           >
+            <span slot="actor">@{{ log.actor.preferredUsername }}</span>
+            <span slot="title">{{ log.object.title }}</span>
+          </i18n>
           <br />
           <small>{{ log.insertedAt | formatDateTimeString }}</small>
         </div>
-        <!--                <pre>{{ log }}</pre>-->
       </li>
     </ul>
     <div v-else>
-      <b-message type="is-info">{{ $t('No moderation logs yet') }}</b-message>
+      <b-message type="is-info">{{ $t("No moderation logs yet") }}</b-message>
     </div>
   </section>
 </template>
@@ -73,7 +99,7 @@ export default class ReportList extends Vue {
 </script>
 <style lang="scss" scoped>
 img.image {
-  display: inline;
+  display: inline-block;
   height: 1.5em;
   vertical-align: text-bottom;
 }