Ajoute le titre des pages dans l'onglet du navigateur

CHANGELOG.md

@@ -26,6 +26,7 @@ Ce projet adhère au principe du [Semantic Versioning](https://semver.org/spec/v
 - Supprime la pagination côté serveur pour le matériel à l'étape 4 de l'édition d'événement, et améliore l'UX (#115).
 - Ajoute quelques informations (dates, bénéficiaires, techniciens) au survol des événements dans le calendrier (#117).
 - Augmente le zoom maximum du calendrier à 6 mois pour élargir la vision globale de la frise temporelle (#118).
+- Ajoute le titre des pages dans l'onglet du navigateur.
 
 ## 0.11.0 (2021-01-14)
 

client/src/config/constants.js

@@ -1,3 +1,5 @@
+const APP_NAME = 'Robert2';
+
 const DATE_DB_FORMAT = 'YYYY-MM-DD HH:mm:ss';
 const DATE_QUERY_FORMAT = 'YYYY-MM-DD';
 const DEBOUNCE_WAIT = 500; // - in milliseconds
@@ -21,6 +23,7 @@ const AUTHORIZED_FILE_TYPES = [
 const MAX_FILE_SIZE = 10 * 1024 * 1024; // 10 MB
 
 export {
+  APP_NAME,
   DATE_DB_FORMAT,
   DATE_QUERY_FORMAT,
   DEBOUNCE_WAIT,

client/src/locale/en/pages.js

@@ -2,6 +2,7 @@
 /* eslint-disable quote-props */
 export default {
   'page-login': {
+    'title': "Login",
     'welcome': "Hello! Who are you?",
     'connexion': "Enter Robert",
     'please-wait': "Authentication, please wait...",
@@ -75,6 +76,7 @@ export default {
     'back-to-calendar': "Back to calendar",
     'add': "New event",
     'edit': "Modify event «\u00a0{pageSubTitle}\u00a0»",
+    'edit-title': "Modify event",
     'edit-event': "Modify event",
     'save-and-back-to-calendar': "Save and back to calendar",
     'save-and-continue': "Save and continue",
@@ -111,6 +113,7 @@ export default {
     'action-add': "New user",
     'add': "New user",
     'edit': "Modify user «\u00a0{pageSubTitle}\u00a0»",
+    'edit-title': "Modify user",
     'confirm-delete': "Move this user in trash bin?",
     'confirm-permanently-delete': "Do you really want to permanently delete this user?",
     'confirm-restore': "Do you really want to restore this user?",
@@ -124,6 +127,7 @@ export default {
     'action-add': "New beneficiary",
     'add': "New beneficiary",
     'edit': "Modify beneficiary «\u00a0{pageSubTitle}\u00a0»",
+    'edit-title': "Modify beneficiary",
     'beneficiary-type': "Beneficiary type",
     'person': "Natural person (individual)",
     'company': "Legal entity (company)",
@@ -138,6 +142,7 @@ export default {
     'title': "Companies",
     'add': "New company",
     'edit': "Modify company «\u00a0{pageSubTitle}\u00a0»",
+    'edit-title': "Modify company",
     'edit-btn': "Modify company",
     'create-new': "Add a new company",
     'help-edit': "The legal name of the company is mandatory.",
@@ -157,6 +162,7 @@ export default {
     ),
     'add': "New material",
     'edit': "Modify material «\u00a0{pageSubTitle}\u00a0»",
+    'edit-title': "Modify material",
     'help-edit': "Give a short name, and use the description field to detail the material if needed.",
     'view': "Details of material «\u00a0{pageSubTitle}\u00a0»",
     'confirm-delete': "Move this material in trash bin?",
@@ -253,6 +259,7 @@ export default {
     'action-add': "New technician",
     'add': "New technician",
     'edit': "Modify technician «\u00a0{pageSubTitle}\u00a0»",
+    'edit-title': "Modify technician",
     'help-edit': "Only first name and last name are mandatory.",
     'confirm-delete': "Move this technician in trash bin?",
     'confirm-permanently-delete': "Do you really want to permanently delete this technician?",
@@ -266,6 +273,7 @@ export default {
     'action-add': "New materials park",
     'add': "New materials park",
     'edit': "Modify park «\u00a0{pageSubTitle}\u00a0»",
+    'edit-title': "Modify park",
     'help-edit': "Only the name of the park is mandatory.",
     'confirm-delete': "Move this park in trash bin? This won't delete materials in this park.",
     'confirm-permanently-delete': "Do you really want to permanently delete this park? WARNING: this will delete all materials of this park!!",

client/src/locale/fr/pages.js

@@ -2,6 +2,7 @@
 /* eslint-disable quote-props */
 export default {
   'page-login': {
+    'title': "Connexion",
     'welcome': "Bonjour\u00a0! Qui êtes vous\u00a0?",
     'connexion': "Connexion",
     'please-wait': "Authentification, merci de patienter...",
@@ -111,6 +112,7 @@ export default {
     'action-add': "Nouvel utilisateur",
     'add': "Nouvel utilisateur",
     'edit': "Modifier l'utilisateur «\u00a0{pageSubTitle}\u00a0»",
+    'edit-title': "Modifier l'utilisateur",
     'confirm-delete': "Mettre cet utilisateur à la corbeille\u00a0?",
     'confirm-permanently-delete': "Voulez-vous vraiment supprimer définitivement cet utilisateur\u00a0?",
     'confirm-restore': "Voulez-vous vraiment restaurer cet utilisateur\u00a0?",
@@ -124,6 +126,7 @@ export default {
     'action-add': "Nouveau bénéficiaire",
     'add': "Nouveau bénéficiaire",
     'edit': "Modifier le bénéficiaire «\u00a0{pageSubTitle}\u00a0»",
+    'edit-title': "Modifier le bénéficiaire",
     'beneficiary-type': "Type de bénéficiaire",
     'person': "Personne physique (individu)",
     'company': "Personne morale (entreprise)",
@@ -138,6 +141,7 @@ export default {
     'title': "Sociétés",
     'add': "Nouvelle société",
     'edit': "Modifier la société «\u00a0{pageSubTitle}\u00a0»",
+    'edit-title': "Modifier la société",
     'edit-btn': "Modifier la société",
     'create-new': "Ajouter une nouvelle société",
     'help-edit': "La raison sociale (nom de la société) est obligatoire.",
@@ -157,6 +161,7 @@ export default {
     ),
     'add': "Nouveau matériel",
     'edit': "Modifier le matériel «\u00a0{pageSubTitle}\u00a0»",
+    'edit-title': "Modifier le matériel",
     'help-edit': "Trouvez un nom assez court, et utilisez plutôt la description pour détailler le matériel si besoin.",
     'view': "Détails du matériel «\u00a0{pageSubTitle}\u00a0»",
     'confirm-delete': "Mettre ce matériel à la corbeille\u00a0?",
@@ -167,6 +172,7 @@ export default {
   },
 
   'page-materials-view': {
+    'title': "Détails du matériel",
     'documents': {
       'no-document': "Aucun document pour le moment.",
       'drag-and-drop-files-here': "Glissez-déposez des fichiers ici ↓ pour les ajouter.",
@@ -253,6 +259,7 @@ export default {
     'action-add': "Nouveau technicien",
     'add': "Nouveau technicien",
     'edit': "Modifier le technicien «\u00a0{pageSubTitle}\u00a0»",
+    'edit-title': "Modifier le technicien",
     'help-edit': "Seuls le nom et le prénom de la personne sont obligatoires.",
     'confirm-delete': "Mettre ce technicien à la corbeille\u00a0?",
     'confirm-permanently-delete': "Voulez-vous vraiment supprimer définitivement ce technicien\u00a0?",
@@ -266,6 +273,7 @@ export default {
     'action-add': "Nouveau parc de matériel",
     'add': "Nouveau parc de matériel",
     'edit': "Modifier le parc «\u00a0{pageSubTitle}\u00a0»",
+    'edit-title': "Modifier le parc",
     'help-edit': "Seul le nom du parc est obligatoire.",
     'confirm-delete': "Mettre ce parc à la corbeille\u00a0? Cela ne supprimera pas le matériel qu'il contient.",
     'confirm-permanently-delete': "Voulez-vous vraiment supprimer définitivement ce parc\u00a0? ATTENTION, cela supprimera tout le matériel contenu dans ce parc\u00a0!!",

client/src/router.js

@@ -2,6 +2,7 @@
 import Vue from 'vue';
 import Router from 'vue-router';
 import store from '@/store';
+import { APP_NAME } from '@/config/constants';
 import Login from '@/pages/Login/Login.vue';
 import UserProfile from '@/pages/UserProfile/UserProfile.vue';
 import UserSettings from '@/pages/UserSettings/UserSettings.vue';
@@ -33,6 +34,7 @@ const router = new Router({
       name: 'login',
       component: Login,
       meta: {
+        title: 'page-login.title',
         requiresAuth: false,
       },
     },
@@ -42,6 +44,7 @@ const router = new Router({
       component: UserProfile,
       meta: {
         resource: 'users',
+        title: 'page-profile.title',
         readableName: 'page-profile.title',
         requiresAuth: true,
         requiresGroups: ['admin', 'member', 'visitor'],
@@ -53,6 +56,7 @@ const router = new Router({
       component: UserSettings,
       meta: {
         resource: 'users',
+        title: 'page-settings.title',
         readableName: 'page-settings.title',
         requiresAuth: true,
         requiresGroups: ['admin', 'member', 'visitor'],
@@ -64,6 +68,7 @@ const router = new Router({
       component: Calendar,
       meta: {
         resource: 'events',
+        title: 'page-calendar.title',
         readableName: 'page-calendar.title',
         requiresAuth: true,
         requiresGroups: ['admin', 'member', 'visitor'],
@@ -75,6 +80,7 @@ const router = new Router({
       component: Event,
       meta: {
         resource: 'events',
+        title: 'page-events.add',
         readableName: 'page-events.add',
         requiresAuth: true,
         requiresGroups: ['admin', 'member'],
@@ -86,6 +92,7 @@ const router = new Router({
       component: Event,
       meta: {
         resource: 'events',
+        title: 'page-events.edit-event',
         readableName: 'page-events.edit',
         requiresAuth: true,
         requiresGroups: ['admin', 'member'],
@@ -97,6 +104,7 @@ const router = new Router({
       component: Users,
       meta: {
         resource: 'users',
+        title: 'page-users.title',
         readableName: 'page-users.title',
         requiresAuth: true,
         requiresGroups: ['admin'],
@@ -108,6 +116,7 @@ const router = new Router({
       component: User,
       meta: {
         resource: 'users',
+        title: 'page-users.add',
         readableName: 'page-users.add',
         requiresAuth: true,
         requiresGroups: ['admin'],
@@ -119,6 +128,7 @@ const router = new Router({
       component: User,
       meta: {
         resource: 'users',
+        title: 'page-users.edit-title',
         readableName: 'page-users.edit',
         requiresAuth: true,
         requiresGroups: ['admin'],
@@ -130,6 +140,7 @@ const router = new Router({
       component: Beneficiaries,
       meta: {
         resource: 'persons',
+        title: 'page-beneficiaries.title',
         readableName: 'page-beneficiaries.title',
         requiresAuth: true,
         requiresGroups: ['admin', 'member'],
@@ -141,6 +152,7 @@ const router = new Router({
       component: Beneficiary,
       meta: {
         resource: 'persons',
+        title: 'page-beneficiaries.add',
         readableName: 'page-beneficiaries.add',
         requiresAuth: true,
         requiresGroups: ['admin', 'member'],
@@ -152,6 +164,7 @@ const router = new Router({
       component: Beneficiary,
       meta: {
         resource: 'persons',
+        title: 'page-beneficiaries.edit-title',
         readableName: 'page-beneficiaries.edit',
         requiresAuth: true,
         requiresGroups: ['admin', 'member'],
@@ -163,6 +176,7 @@ const router = new Router({
       component: Company,
       meta: {
         resource: 'companies',
+        title: 'page-companies.add',
         readableName: 'page-companies.add',
         requiresAuth: true,
         requiresGroups: ['admin', 'member'],
@@ -174,6 +188,7 @@ const router = new Router({
       component: Company,
       meta: {
         resource: 'companies',
+        title: 'page-companies.edit-title',
         readableName: 'page-companies.edit',
         requiresAuth: true,
         requiresGroups: ['admin', 'member'],
@@ -185,6 +200,7 @@ const router = new Router({
       component: Materials,
       meta: {
         resource: 'materials',
+        title: 'page-materials.title',
         readableName: 'page-materials.title',
         requiresAuth: true,
         requiresGroups: ['admin', 'member'],
@@ -196,6 +212,7 @@ const router = new Router({
       component: Material,
       meta: {
         resource: 'materials',
+        title: 'page-materials.add',
         readableName: 'page-materials.add',
         requiresAuth: true,
         requiresGroups: ['admin', 'member'],
@@ -207,6 +224,7 @@ const router = new Router({
       component: Material,
       meta: {
         resource: 'materials',
+        title: 'page-materials.edit',
         readableName: 'page-materials.edit',
         requiresAuth: true,
         requiresGroups: ['admin', 'member'],
@@ -218,6 +236,7 @@ const router = new Router({
       component: MaterialView,
       meta: {
         resource: 'materials',
+        title: 'page-materials-view.title',
         readableName: 'page-materials.view',
         requiresAuth: true,
         requiresGroups: ['admin', 'member'],
@@ -229,6 +248,7 @@ const router = new Router({
       component: Attributes,
       meta: {
         resource: 'attributes',
+        title: 'page-attributes.title',
         readableName: 'page-attributes.title',
         requiresAuth: true,
         requiresGroups: ['admin'],
@@ -240,6 +260,7 @@ const router = new Router({
       component: Categories,
       meta: {
         resource: 'categories',
+        title: 'page-categories.title',
         readableName: 'page-categories.title',
         requiresAuth: true,
         requiresGroups: ['admin'],
@@ -251,6 +272,7 @@ const router = new Router({
       component: Technicians,
       meta: {
         resource: 'persons',
+        title: 'page-technicians.title',
         readableName: 'page-technicians.title',
         requiresAuth: true,
         requiresGroups: ['admin', 'member'],
@@ -262,6 +284,7 @@ const router = new Router({
       component: Technician,
       meta: {
         resource: 'persons',
+        title: 'page-technicians.add',
         readableName: 'page-technicians.add',
         requiresAuth: true,
         requiresGroups: ['admin', 'member'],
@@ -273,6 +296,7 @@ const router = new Router({
       component: Technician,
       meta: {
         resource: 'persons',
+        title: 'page-technicians.edit-title',
         readableName: 'page-technicians.edit',
         requiresAuth: true,
         requiresGroups: ['admin', 'member'],
@@ -284,6 +308,7 @@ const router = new Router({
       component: Tags,
       meta: {
         resource: 'tags',
+        title: 'page-tags.title',
         readableName: 'page-tags.title',
         requiresAuth: true,
         requiresGroups: ['admin'],
@@ -295,6 +320,7 @@ const router = new Router({
       component: Parks,
       meta: {
         resource: 'parks',
+        title: 'page-parks.title',
         readableName: 'page-parks.title',
         requiresAuth: true,
         requiresGroups: ['admin'],
@@ -306,6 +332,7 @@ const router = new Router({
       component: Park,
       meta: {
         resource: 'parks',
+        title: 'page-parks.add',
         readableName: 'page-parks.add',
         requiresAuth: true,
         requiresGroups: ['admin'],
@@ -317,6 +344,7 @@ const router = new Router({
       component: Park,
       meta: {
         resource: 'parks',
+        title: 'page-parks.edit-title',
         readableName: 'page-parks.edit',
         requiresAuth: true,
         requiresGroups: ['admin'],
@@ -353,6 +381,15 @@ router.beforeEach((to, from, next) => {
     null,
   );
 
+  const { title, requiresGroups } = to.matched[0].meta;
+
+  if (title) {
+    const translatedName = Vue.i18n.translate(title);
+    document.title = `${translatedName} − ${APP_NAME}`;
+  } else {
+    document.title = APP_NAME;
+  }
+
   const isLogged = store.getters['auth/isLogged'];
   if (requiresAuth && !isLogged) {
     next('/login');
@@ -369,7 +406,6 @@ router.beforeEach((to, from, next) => {
     return;
   }
 
-  const { requiresGroups } = to.matched[0].meta;
   if (requiresGroups && requiresGroups.length) {
     if (!isLogged) {
       next('/login');