V1.0.0

.env.production

@@ -0,0 +1,2 @@
+VUE_APP_TITLE=BDLG Planner 
+VUE_APP_API_URL=https://bdlg-planner.jaquin.fr/

.env.staging

@@ -0,0 +1,3 @@
+NODE_ENV=production
+VUE_APP_TITLE=[Staging] BDLG Planner  
+VUE_APP_API_URL=localhost:8080/

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bdlg-scheduler",
-  "version": "0.1.0",
+  "version": "1.0.0",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",

src/PlannerApp.vue

@@ -3,8 +3,9 @@
     <div class="logo" />
     <router-link to="/planner" class="appname">BDLG planner</router-link>
     <nav class="tabs floating">
+      <router-link class="tab" active-class="selected" to="/planner"> Accueil </router-link>
       <router-link class="tab" active-class="selected" to="/planner/evenement">
-        Accueil
+        Evenement
       </router-link>
       <router-link class="tab" active-class="selected" to="/planner/planning">Planning</router-link>
       <router-link class="tab" active-class="selected" to="/planner/competences">
@@ -61,7 +62,8 @@ import updatePlanningVersions from "@/mixins/updatePlanningVersions";
 import { MutationTypes } from "./store/Mutations";
 import dayjs from "dayjs";
 import { StateJSON } from "./store/State";
-const APIAdress = "http://localhost:8080/";
+
+const API_URL = process.env.VUE_APP_API_URL;
 
 const keyofEvent: Array<keyof Evenement> = ["name", "uuid", "start", "end"];
 export default defineComponent({
@@ -75,23 +77,22 @@ export default defineComponent({
     };
   },
   mounted() {
+    fetch(`${API_URL}api/evenements`)
+      .then((response) => {
+        if (response.status == 200) {
+          return response.json();
+        } else {
+          throw new Error(response.statusText);
+        }
+      })
+      .then((data) => this.$store.commit(MutationTypes.refreshSavedPlanning, data));
+
     const previousState = window.localStorage.getItem("activeState");
     toast({ html: "Bienvenue" });
     if (previousState) {
       this.importJsonState(JSON.parse(previousState), false);
-      this.$router.push({ name: "Main" });
+      if (this.$route.path != "/planner") this.$router.push({ name: "Evenement" });
     }
-    this.$nextTick(() =>
-      fetch(`${APIAdress}api/evenements`)
-        .then((response) => {
-          if (response.status == 200) {
-            return response.json();
-          } else {
-            throw new Error(response.statusText);
-          }
-        })
-        .then((data) => this.$store.commit(MutationTypes.refreshSavedPlanning, data))
-    );
     window.onbeforeunload = () => {
       this.localSave();
     };
@@ -108,12 +109,10 @@ export default defineComponent({
       };
       // local save
       window.localStorage.setItem("activeState", body.content);
-      fetch(`${APIAdress}api/evenements/${body.uuid}`, {
+      fetch(`${API_URL}api/evenements/${body.uuid}`, {
         method: "PUT",
         body: JSON.stringify(body),
-        headers: {
-          "Content-Type": "application/json",
-        },
+        headers: { "Content-Type": "application/json" },
       })
         .then((response) => {
           if (response.status == 200) {
@@ -126,12 +125,10 @@ export default defineComponent({
               classes: "error",
               displayLength: 5000,
             });
-            return fetch(`${APIAdress}api/evenements/`, {
+            return fetch(`${API_URL}api/evenements`, {
               method: "POST",
               body: JSON.stringify(body),
-              headers: {
-                "Content-Type": "application/json",
-              },
+              headers: { "Content-Type": "application/json" },
             }).then((response) => {
               if (response.status == 200) {
                 toast({ html: "Données sauvegardées", classes: "success", displayLength: 5000 });
@@ -207,10 +204,10 @@ export default defineComponent({
       const options = {
         method: "POST",
         body: JSON.stringify(body),
-        headers: { "Content-type": "application/json; charset=UTF-8" },
+        headers: { "Content-Type": "application/json" },
       };
       this.optimisationInProgress = true;
-      fetch(`${APIAdress}planning/solve`, options)
+      fetch(`${API_URL}planning/solve`, options)
         .then((response) => {
           if (response.status == 200) {
             return response.json();
@@ -358,6 +355,9 @@ export default defineComponent({
           }
         }
       }
+      // Remove past score explanation.
+      this.clearToast();
+      this.$router.push({ name: "Evenement" });
     },
   },
 });

src/components/EvenementDataTable.vue

@@ -35,7 +35,7 @@ export default defineComponent({
   },
   methods: {
     formatDate(str: string): string {
-      return dayjs(str).format("YYYY MMM DD HH[h]mm ss[s]");
+      return dayjs(str).format("DD MMM YYYY à HH[h]mm");
     },
     loadPreviousVersion(id: number) {
       const version = this.versions.find((o) => o.id == id);
@@ -63,6 +63,7 @@ table > tbody > tr > td {
   text-align: center;
   padding: 8px;
 }
+table > thead > tr,
 table > tbody > tr {
   border-bottom: solid 1px var(--color-neutral-800);
 }

src/mixins/fetchPlanningVersion.ts

@@ -4,7 +4,7 @@ export default defineComponent({
   emits: ["import"],
   methods: {
     fetchPlanningVersions(url: string) {
-      fetch(url)
+      return fetch(url)
         .then((response) => {
           if (response.status == 200) {
             return response.json();

src/mixins/updatePlanningVersions.ts

@@ -1,10 +1,11 @@
 import { MutationTypes } from "@/store/Mutations";
 import { defineComponent } from "vue";
 
+const API_URL = process.env.VUE_APP_API_URL;
 export default defineComponent({
   methods: {
     updatePlanningVersions() {
-      fetch("/api/evenements/history/" + this.$store.state.evenement.uuid)
+      fetch(`${API_URL}api/evenements/history/${this.$store.state.evenement.uuid}`)
         .then((response) => {
           if (response.status == 200) {
             return response.json();

src/store/Mutations.ts

@@ -198,9 +198,14 @@ export const mutations: MutationTree<State> & Mutations = {
   },
 
   [MutationTypes.newVersion](state, payload) {
-    state.history = [payload, ...state.history];
-    if (state.savedPlanning.find((o) => o.uuid == payload.uuid)) {
-      state.savedPlanning = [payload, ...state.savedPlanning];
+    // if the version is not yet registered in the current history.
+    if (!state.history.find((v) => v.id == payload.id)) {
+      // register the new version in the history
+      state.history = [payload, ...state.history.filter((h) => h.uuid == payload.uuid)];
+      // add the version in the planning list if it doesn't exist neither.
+      if (state.savedPlanning.filter((o) => o.uuid == payload.uuid).length == 0) {
+        state.savedPlanning = [payload, ...state.savedPlanning];
+      }
     }
   },
   [MutationTypes.refreshVersion](state, payload) {

src/views/Evenement.vue

@@ -83,6 +83,8 @@ import EvenementDataTable from "@/components/EvenementDataTable.vue";
 import updatePlanningVersions from "@/mixins/updatePlanningVersions";
 import fetchPlanningVersion from "@/mixins/fetchPlanningVersion";
 
+const API_URL = process.env.VUE_APP_API_URL;
+
 export default defineComponent({
   mixins: [updatePlanningVersions, fetchPlanningVersion],
   components: { styledInput, datepicker, EvenementDataTable },
@@ -127,7 +129,9 @@ export default defineComponent({
   },
   methods: {
     loadVersion(version: EvenementVersion) {
-      this.fetchPlanningVersions(`/api/evenements/history/${version.uuid}/content/${version.id}`);
+      this.fetchPlanningVersions(
+        `${API_URL}api/evenements/history/${version.uuid}/content/${version.id}`
+      );
     },
     toggleModal() {
       this.showModal = !this.showModal;

src/views/Home.vue

@@ -4,7 +4,11 @@
       <h2>Bienvenue sur le gestionnaire du planning bénévoles</h2>
       <h3>
         Planning existants
-        <button class="btn icon" @click="$emit('newEvenement')">
+        <button
+          class="btn icon primary small"
+          style="margin-left: 1rem; vertical-align: bottom"
+          @click="$emit('newEvenement')"
+        >
           <i class="material-icons">edit</i>
         </button>
       </h3>
@@ -21,6 +25,9 @@ import EvenementVersion from "@/models/EvenementVersion";
 import fetchPlanningVersions from "@/mixins/fetchPlanningVersion";
 import EvenementDataTable from "@/components/EvenementDataTable.vue";
 import { defineComponent } from "vue";
+import Toast from "@/utils/Toast";
+
+const API_URL = process.env.VUE_APP_API_URL;
 
 export default defineComponent({
   components: { EvenementDataTable },
@@ -33,7 +40,18 @@ export default defineComponent({
   },
   methods: {
     loadVersion(version: EvenementVersion) {
-      this.fetchPlanningVersions(`/api/evenements/${version.uuid}`);
+      const toast = Toast({
+        html: `Chargement des données du planning "${version.name}"`,
+        displayLength: Infinity,
+      });
+      this.fetchPlanningVersions(`${API_URL}api/evenements/${version.uuid}`).then((_) => {
+        toast.dismiss();
+        Toast({
+          html: `Planning "${version.name}" chargé`,
+          classes: "success",
+          displayLength: 5000,
+        });
+      });
     },
   },
 });

vue.config.js

@@ -1,6 +1,9 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 /*const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
  */
+/**
+ * @type {import('@vue/cli-service').ProjectOptions}
+ */
 module.exports = {
   pages: {
     index: { entry: "./src/main.ts", title: "BDLG planner", filename: "planner/index.html" },
@@ -10,6 +13,10 @@ module.exports = {
       filename: "login.html",
     },
   },
+  outputDir:
+    process.env.NODE_ENV === "production"
+      ? "C:\\Users\\Clovis\\Desktop\\code\\java\\bdlg.planner\\src\\main\\resources\\static"
+      : "dist",
   configureWebpack: {
     plugins: [
       /*new BundleAnalyzerPlugin()*/