Add some more features: locale changer

Add some more entities

Author: b2p-fred

package.json

@@ -21,7 +21,6 @@
     "axios-extensions": "^3.1.3",
     "core-js": "^3.6.5",
     "jwt-decode": "^3.1.2",
-    "localforage": "^1.10.0",
     "lodash": "^4.17.21",
     "moment": "^2.29.1",
     "regenerator-runtime": "^0.13.9",
@@ -96,5 +95,5 @@
     "> 1%",
     "last 2 versions",
     "not dead"
-  ],
+  ]
 }

public/img/flags/README.md

@@ -0,0 +1,5 @@
+# Project flags
+
+Flags are PNG images downloaded from an icon pack: https://icon-icons.com/fr/pack/Flags/2087
+
+Download the PNG 64 file to add a new flag  

public/img/flags/be.png

@@ -1,5 +1,7 @@
 <template>
   <v-app id="my-front">
+    <snackbar></snackbar>
+
     <v-system-bar app>
       <v-spacer></v-spacer>
 
@@ -29,6 +31,35 @@
 
       <v-divider />
 
+      <v-list dense>
+        <v-list-item>
+          <v-list-item-action>
+            <v-icon>mdi-home</v-icon>
+          </v-list-item-action>
+          <v-list-item-content>
+            <v-list-item-title>Home</v-list-item-title>
+          </v-list-item-content>
+        </v-list-item>
+        <v-list-item :to="{ name: 'AddressList' }">
+          <v-list-item-action>
+            <v-icon>mdi-book</v-icon>
+          </v-list-item-action>
+          <v-list-item-content>
+            <v-list-item-title> Books </v-list-item-title>
+          </v-list-item-content>
+        </v-list-item>
+        <v-list-item :to="{ name: 'ContactList' }">
+          <v-list-item-action>
+            <v-icon>mdi-comment-quote</v-icon>
+          </v-list-item-action>
+          <v-list-item-content>
+            <v-list-item-title> Reviews </v-list-item-title>
+          </v-list-item-content>
+        </v-list-item>
+      </v-list>
+
+      <v-divider />
+
       <v-list dense nav>
         <v-list-item-group v-model="selectedItem" color="primary">
           <v-list-item
@@ -73,7 +104,16 @@
     </v-app-bar>
 
     <v-main>
+      <Breadcrumb layout-class="pl-3 py-3" />
+
       <v-container fluid>
+        <LocaleChanger
+          flag
+          label
+          current-language="fr-FR"
+          :flag-height="12"
+        ></LocaleChanger>
+
         <router-view />
       </v-container>
     </v-main>
@@ -128,12 +168,22 @@
 </template>
 
 <script>
-import jwt_decode from "jwt-decode";
-import { mapActions, mapGetters, mapMutations, mapState } from "vuex";
-import { readFromStorage, removeFromStorage } from "@/_helpers";
+import { mapActions, mapGetters, mapState } from "vuex";
+import { readFromStorage } from "@/utils/local-storage";
 import router from "@/router";
 
+import Breadcrumb from "@/components/base/Breadcrumb";
+import Snackbar from "@/components/base/Snackbar";
+
+import LocaleChanger from "@/components/base/LocaleChanger";
+
 export default {
+  components: {
+    Breadcrumb,
+    Snackbar,
+    LocaleChanger,
+  },
+
   data: () => ({
     drawer: null,
     fixed: false,
@@ -146,27 +196,52 @@ export default {
       },
       {
         icon: "mdi-home-city-outline",
-        title: "Sites",
-        to: "/sites",
+        title: "Addresses",
+        to: "/addresses",
       },
       {
-        icon: "mdi-library-shelves",
-        title: "Libraries",
-        to: "/libraries",
+        icon: "mdi-account-group",
+        title: "Contacts",
+        to: "/contacts",
       },
       {
-        icon: "mdi-account-group",
-        title: "Communities",
-        to: "/communities",
+        icon: "mdi-book",
+        title: "Documents",
+        to: "/documents",
+      },
+      {
+        icon: "mdi-book-alphabet",
+        title: "Documents versions",
+        to: "/documentversions",
       },
+      {
+        icon: "mdi-signature-freehand",
+        title: "Relations",
+        to: "/relations",
+      },
+      {
+        icon: "mdi-factory",
+        title: "Sites",
+        to: "/sites",
+      },
+      // {
+      //   icon: "mdi-library-shelves",
+      //   title: "Libraries",
+      //   to: "/libraries",
+      // },
+      // {
+      //   icon: "mdi-account-group",
+      //   title: "Communities",
+      //   to: "/communities",
+      // },
     ],
     miniVariant: true,
     rightDrawer: false,
     title: "This is the application title",
   }),
   computed: {
     ...mapState({
-      currentUser: (state) => state.User,
+      currentUser: (state) => state.Authentication,
       currentLanguage: (state) => state.currentLanguage,
     }),
     userLoggedIn() {
@@ -180,11 +255,8 @@ export default {
     },
   },
   created() {
-    // const defaultLanguage = navigator.language.split("-")[0];
-    // console.log(`Default navigator language: ${defaultLanguage}`, this.currentLanguage);
-
     const userToken = readFromStorage("token") || "";
-    this.$store.commit("User/SET_TOKEN", userToken);
+    this.$store.commit("Authentication/SET_TOKEN", userToken);
     if (userToken) {
       console.log("A user is still signed-in!", this.currentUser);
     }
@@ -201,23 +273,6 @@ export default {
       this.getOidcConfiguration();
     }
 
-    // Event handler for the locale changed with the locale changer component
-    this.$root.$on("language-changed", (code) => {
-      // if (code === "default") {
-      //   code = defaultLanguage;
-      // }
-      // const localeCode = code;
-      // // i18n library locale update
-      // this.$i18n.locale = localeCode;
-      // const localeName = this.$i18n.t("name");
-      //
-      // // Set the current user locale
-      // this.setLocale({ code: localeCode, name: localeName });
-      //
-      // // Force the view update - not necessary, uncomment to reactivate
-      // // this.$forceUpdate();
-    });
-
     // Only if a user signed in
     this.$root.$on("user-signed-in", () => {
       console.log("A user just signed-in!", this.currentUser);
@@ -232,15 +287,15 @@ export default {
     });
   },
   mounted() {
-    console.log("Logged-in", this.userLoggedIn, this.isLoggedIn());
+    console.log("mounted - Logged-in", this.userLoggedIn, this.isLoggedIn());
 
     this.userLoggedIn && this.$root.$emit("user-signed-in");
   },
   methods: {
     ...mapGetters("Alert", ["lastLoginMessage"]),
-    ...mapGetters("User", ["isLoggedIn", "friendlyName", "initials"]),
+    ...mapGetters("Authentication", ["isLoggedIn", "friendlyName", "initials"]),
     ...mapActions({ getApiVersion: "Api/getVersion" }),
-    ...mapActions({ logout: "User/logout" }),
+    ...mapActions({ logout: "Authentication/logout" }),
     ...mapActions({
       getOidcConfiguration: "OidcConfiguration/getOidcConfiguration",
     }),