refactoring

src/AdminPage.vue

@@ -16,8 +16,8 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 import "@/assets/css/main.css";
-import cHeader, { HeaderLink } from "./components/Header.vue";
-import cFooter from "./components/Footer.vue";
+import cHeader, { HeaderLink } from "./components/Utils/Header.vue";
+import cFooter from "./components/Utils/Footer.vue";
 
 const tabs: Array<HeaderLink> = [
   { to: "/admin", name: "Accueil" },

src/Inscription.vue

@@ -26,15 +26,15 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 import { validate as validateUuid } from "uuid";
-import cHeader from "@/components/Header.vue";
-import cFooter from "@/components/Footer.vue";
+import cHeader from "@/components/Utils/Header.vue";
+import cFooter from "@/components/Utils/Footer.vue";
 import Questionnaire from "@/components/Questionaire.vue";
-import dots from "@/components/Dots.vue";
+import dots from "@/components/Utils/Dots.vue";
 
 import { StateJSON } from "@/store/State";
 import Benevole, { BenevoleJSON } from "@/models/Benevole";
 import Competence from "@/models/Competence";
-import getQuestionnaire from "./mixins/getQuestionnaire";
+import getQuestionnaire from "@/mixins/getQuestionnaire";
 import "@/assets/css/button.css";
 
 const API_URL = process.env.VUE_APP_API_URL;

src/LoginPage.vue

@@ -8,7 +8,7 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 import login from "./views/Login.vue";
-import cHeader from "@/components/Header.vue";
+import cHeader from "@/components/Utils/Header.vue";
 
 export default defineComponent({
   components: { login, cHeader },

src/PlannerApp.vue

@@ -52,8 +52,8 @@ import importJsonState from "@/mixins/ImportJsonState";
 import { MutationTypes } from "@/store/Mutations";
 import dayjs from "dayjs";
 import { StateJSON } from "@/store/State";
-import Header, { HeaderLink } from "./components/Header.vue";
-import cFooter from "./components/Footer.vue";
+import Header, { HeaderLink } from "./components/Utils/Header.vue";
+import cFooter from "./components/Utils/Footer.vue";
 
 const API_URL = process.env.VUE_APP_API_URL;
 
@@ -106,8 +106,13 @@ export default defineComponent({
         });
         this.subscribe(this.uuid);
       },
-      (error) => {
-        toast({ html: error.toString(), classes: "error" });
+      () => {
+        toast({
+          html:
+            "Impossible d'établir une connection avec le serveur.<br>Veuillez recharger la page.",
+          classes: "error",
+          displayLength: Infinity,
+        });
       }
     );
   },
@@ -162,7 +167,6 @@ export default defineComponent({
     },
     handlePlanningChange(msg: Stomp.Message) {
       var content = JSON.parse(msg.body) as PlanningUpdateMessage;
-      console.log("Received message ", content);
       if (this.uuid == content.uuid && this.username && this.username != content.user) {
         if (content.method === "toast") {
           toast({ html: content.payload });

src/PlanningPage.vue

@@ -23,10 +23,10 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 import Planning from "@/views/PlanningPersonnel.vue";
-import AutoCompleteInput from "@/components/AutoCompleteInput.vue";
+import AutoCompleteInput from "@/components/Form/AutoCompleteInput.vue";
 
-import Dots from "@/components/Dots.vue";
-import cHeader from "@/components/Header.vue";
+import Dots from "@/components/Utils/Dots.vue";
+import cHeader from "@/components/Utils/Header.vue";
 import importJsonState from "@/mixins/ImportJsonState";
 import Toast from "./utils/Toast";
 import Benevole from "./models/Benevole";

src/components/EditeurBenevole.vue

@@ -88,9 +88,9 @@
 <script lang="ts">
 import Benevole from "@/models/Benevole";
 import Competence from "@/models/Competence";
-import styledInput from "@/components/input.vue";
-import chipsInput from "@/components/SelectChipInput.vue";
-import checkbox from "@/components/checkBox.vue";
+import styledInput from "@/components/Form/Input.vue";
+import chipsInput from "@/components/Form/SelectChipInput.vue";
+import checkbox from "@/components/Form/checkBox.vue";
 import { defineComponent, PropType } from "vue";
 import { MutationTypes } from "@/store/Mutations";
 import AutocompleteOptions from "@/models/AutocompleteOptions";

src/components/EditeurCompetence.vue

@@ -61,8 +61,8 @@
 
 <script lang="ts">
 import Competence from "@/models/Competence";
-import styledInput from "./input.vue";
-import checkbox from "./checkBox.vue";
+import styledInput from "./Form/Input.vue";
+import checkbox from "./Form/checkBox.vue";
 import { defineComponent, PropType } from "vue";
 import { MutationTypes } from "@/store/Mutations";
 import "@/assets/css/editor-panel.css";

src/components/EditeurCreneau.vue

@@ -147,11 +147,11 @@
 import { defineComponent, PropType } from "vue";
 import Creneau from "@/models/Creneau";
 import AutocompleteOptions from "@/models/AutocompleteOptions";
-import AutoCompleteInput from "@/components/AutoCompleteInput.vue";
-import styledInput from "@/components/input.vue";
-import chipsInput from "@/components/SelectChipInput.vue";
-import DatePicker from "@/components/date-picker.vue";
-import checkbox from "./checkBox.vue";
+import AutoCompleteInput from "@/components/Form/AutoCompleteInput.vue";
+import styledInput from "@/components/Form/Input.vue";
+import chipsInput from "@/components/Form/SelectChipInput.vue";
+import DatePicker from "@/components/Form/date-picker.vue";
+import checkbox from "./Form/checkBox.vue";
 import dayjs from "dayjs";
 
 import "@/assets/css/editor-panel.css";

src/components/EditeurCreneauGroup.vue

@@ -61,8 +61,8 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 import { Ressource } from "jc-timeline/lib/Ressource";
-import AutoCompleteInput from "./AutoCompleteInput.vue";
-import styledInput from "./input.vue";
+import AutoCompleteInput from "./Form/AutoCompleteInput.vue";
+import styledInput from "./Form/Input.vue";
 import "@/assets/css/editor-panel.css";
 import AutocompleteOptions from "@/models/AutocompleteOptions";
 

src/components/EditeurQuestionnaireQuestion.vue

@@ -67,8 +67,8 @@
 import { defineComponent, PropType } from "vue";
 import { Question, QuestionCompetence, QuestionType } from "@/models/Questionnaire";
 
-import styledInput from "@/components/input.vue";
-import chipsInput from "@/components/SelectChipInput.vue";
+import styledInput from "@/components/Form/Input.vue";
+import chipsInput from "@/components/Form/SelectChipInput.vue";
 import Competence from "@/models/Competence";
 import AutocompleteOptions from "@/models/AutocompleteOptions";
 import "@/assets/css/button-group.css";

src/components/AutoCompleteInput.vue → src/components/Form/AutoCompleteInput.vue

@@ -162,4 +162,4 @@ export default defineComponent({
 });
 </script>
 
-<style src="../assets/css/multiple-select.css"></style>
+<style src="@/assets/css/multiple-select.css"></style>

src/components/SelectChipInput.vue → src/components/Form/SelectChipInput.vue

@@ -238,4 +238,4 @@ export default defineComponent({
 });
 </script>
 
-<style src="../assets/css/multiple-select.css"></style>
+<style src="@/assets/css/multiple-select.css"></style>

src/components/Questionaire.vue

@@ -78,8 +78,8 @@ import { defineComponent, PropType } from "vue";
 import marked from "marked";
 import Benevole, { BenevoleJSON } from "@/models/Benevole";
 import Toast from "@/utils/Toast";
-import checkBox from "@/components/checkBox.vue";
-import styledInput from "@/components/input.vue";
+import checkBox from "@/components/Form/checkBox.vue";
+import styledInput from "@/components/Form/Input.vue";
 import Competence from "@/models/Competence";
 import "@/assets/css/markdown.css";
 

src/components/filteringPanel.vue → src/components/Utils/FilteringPanel.vue

@@ -35,8 +35,8 @@
 
 <script lang="ts">
 import { defineComponent, PropType } from "vue";
-import SelectChipInput from "@/components/SelectChipInput.vue";
-import DatePicker from "@/components/date-picker.vue";
+import SelectChipInput from "@/components/Form/SelectChipInput.vue";
+import DatePicker from "@/components/Form/date-picker.vue";
 import dayjs, { ConfigType } from "dayjs";
 
 export type FilterParam = {

src/components/ManageRegistration.vue → src/components/Utils/ManageRegistration.vue

@@ -61,7 +61,7 @@
 import Benevole, { BenevoleJSON } from "@/models/Benevole";
 import { defineComponent } from "vue";
 
-import dots from "@/components/Dots.vue";
+import dots from "@/components/Utils/Dots.vue";
 import { MutationTypes } from "@/store/Mutations";
 
 const API_URL = process.env.VUE_APP_API_URL;

src/router/admin.ts

@@ -1,7 +1,7 @@
 import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
-import Users from "@/views/UserManager.vue";
-import EvenementManager from "@/views/EvenementManager.vue";
-import Admin from "@/views/Admin.vue";
+import Users from "@/views/admin/UserManager.vue";
+import EvenementManager from "@/views/admin/EvenementManager.vue";
+import Admin from "@/views/admin/Admin.vue";
 
 const routes: Array<RouteRecordRaw> = [
   {

src/router/main.ts

@@ -4,7 +4,7 @@ import Planning from "@/views/Planning.vue";
 import CompetenceManager from "@/views/CompetenceManager.vue";
 import BenevoleManager from "@/views/BenevoleManager.vue";
 import PlanningOutput from "@/views/PlanningOutput.vue";
-import PrintablePlanning from "@/views/PrintablePlanning.vue";
+import PrintablePlanning from "@/views/PlanningViewManager.vue";
 import Help from "@/views/Help.vue";
 import Home from "@/views/Home.vue";
 

src/views/BenevoleManager.vue

@@ -38,16 +38,15 @@
 <script lang="ts">
 import Competence from "@/models/Competence";
 import EditeurBenevole from "@/components/EditeurBenevole.vue";
-import FilterPanel, { FilterParam } from "@/components/filteringPanel.vue";
+import FilterPanel, { FilterParam } from "@/components/Utils/FilteringPanel.vue";
 import EditeurQuestionnaire from "@/components/EditeurQuestionnaire.vue";
-import ManageRegistration from "@/components/ManageRegistration.vue";
-import Navigation from "@/components/NavigationPanel.vue";
+import ManageRegistration from "@/components/Utils/ManageRegistration.vue";
+import Navigation from "@/components/Utils/NavigationPanel.vue";
 import DataTable, {
   CustomButton,
   DataTableColumn,
   DataTableData,
-  DataTableObject,
-} from "@/components/DataTable.vue";
+} from "@/components/Utils/DataTable.vue";
 import { defineComponent } from "vue";
 import { MutationTypes } from "@/store/Mutations";
 import Benevole from "@/models/Benevole";

src/views/CompetenceManager.vue

@@ -20,7 +20,7 @@
 <script lang="ts">
 import Competence from "@/models/Competence";
 import EditeurContrainte from "@/components/EditeurCompetence.vue";
-import DataTable, { DataTableData, DataTableColumn } from "@/components/DataTable.vue";
+import DataTable, { DataTableData, DataTableColumn } from "@/components/Utils/DataTable.vue";
 import { defineComponent } from "vue";
 import { MutationTypes } from "@/store/Mutations";
 

src/views/Evenement.vue

@@ -113,8 +113,8 @@ import { defineComponent } from "vue";
 import { MutationTypes } from "@/store/Mutations";
 import Evenement from "@/models/Evenement";
 import EvenementVersion from "@/models/EvenementVersion";
-import styledInput from "@/components/input.vue";
-import datepicker from "@/components/date-picker.vue";
+import styledInput from "@/components/Form/Input.vue";
+import datepicker from "@/components/Form/date-picker.vue";
 import EvenementDataTable from "@/components/EvenementDataTable.vue";
 import updatePlanningVersions from "@/mixins/updatePlanningVersions";
 import fetchPlanningVersion from "@/mixins/fetchPlanningVersion";

src/views/Login.vue

@@ -40,7 +40,7 @@ import "@/assets/css/main.css";
 import "@/assets/css/button.css";
 import Toast from "@/utils/Toast";
 import { defineComponent } from "vue";
-import styledInput from "../components/input.vue";
+import styledInput from "../components/Form/Input.vue";
 
 export default defineComponent({
   data() {

src/views/Planning.vue

@@ -73,7 +73,7 @@ import toast from "@/utils/Toast";
 
 import dayjs from "dayjs";
 import "dayjs/locale/fr";
-import ContextMenu, { MenuAction } from "@/components/ContextMenu.vue";
+import ContextMenu, { MenuAction } from "@/components/Utils/ContextMenu.vue";
 dayjs.locale("fr");
 
 type changePayload = {

src/views/PlanningOutput.vue

@@ -23,7 +23,7 @@
 import { defineComponent } from "vue";
 
 import Planning from "@/views/PlanningPersonnel.vue";
-import NavigationPanel, { NavigationOption } from "@/components/NavigationPanel.vue";
+import NavigationPanel, { NavigationOption } from "@/components/Utils/NavigationPanel.vue";
 import BenevoleCard from "@/components/BenevoleCard.vue";
 import Benevole from "@/models/Benevole";
 

src/views/PlanningViewManager.vue

@@ -3,7 +3,7 @@
     <div class="planning-view-panel">
       <div
         class="item"
-        :class="{ selected: view.uuid == currentPlanningView.uuid }"
+        :class="{ selected: currentPlanningView != null && view.uuid == currentPlanningView.uuid }"
         v-for="view in planningViewList"
         :key="view.uuid"
         @click="loadView(view.uuid)"
@@ -23,20 +23,8 @@
   <div v-if="showEdit && currentPlanningView != null" class="modal" @click="closeEdit">
     <div class="modal-content" ref="edit">
       <styled-input label="Titre" id="planning-view-title" v-model="currentPlanningView.name" />
-      <date-picker
-        label="Début"
-        id="planning-view-start"
-        lang="fr"
-        target="hour"
-        v-model="currentPlanningView.start"
-      />
-      <date-picker
-        label="Fin"
-        id="planning-view-end"
-        lang="fr"
-        target="hour"
-        v-model="currentPlanningView.end"
-      />
+      <date-picker label="Début" id="planning-view-start" lang="fr" target="hour" v-model="start" />
+      <date-picker label="Fin" id="planning-view-end" lang="fr" target="hour" v-model="end" />
       <select-chip-input
         title="Ligne"
         placeholder="Selectionner les lignes à afficher dans ce planning"
@@ -53,14 +41,16 @@
 
 <script lang="ts">
 import { PlanningView } from "@/models/PlanningView";
-import DatePicker from "@/components/date-picker.vue";
-import styledInput from "@/components/input.vue";
-import SelectChipInput from "@/components/SelectChipInput.vue";
+import DatePicker from "@/components/Form/date-picker.vue";
+import styledInput from "@/components/Form/Input.vue";
+import SelectChipInput from "@/components/Form/SelectChipInput.vue";
 
 import PlanningViewRenderer from "@/components/PlanningViewRenderer.vue";
 import { v4 as uuidv4 } from "uuid";
 import { defineComponent } from "vue";
 import AutocompleteOptions from "@/models/AutocompleteOptions";
+import Toast from "@/utils/Toast";
+import dayjs, { Dayjs } from "dayjs";
 
 const API_URL = process.env.VUE_APP_API_URL;
 
@@ -70,9 +60,37 @@ export default defineComponent({
     return {
       showEdit: false,
       currentPlanningView: null as null | PlanningView,
+      end: null as Dayjs | null,
+      start: null as Dayjs | null,
       planningViewList: [] as Array<PlanningView>,
     };
   },
+  watch: {
+    currentPlanningView(val: null | PlanningView) {
+      if (val) {
+        this.end = dayjs(val.end);
+        this.start = dayjs(val.start);
+      }
+    },
+    start(val: Dayjs, oldval) {
+      if (
+        this.currentPlanningView &&
+        oldval &&
+        !val.isSame(this.currentPlanningView.start, "minutes")
+      ) {
+        this.currentPlanningView.start = val.startOf("h").toDate();
+      }
+    },
+    end(val: Dayjs, oldval) {
+      if (
+        this.currentPlanningView &&
+        oldval &&
+        !val.isSame(this.currentPlanningView.end, "minutes")
+      ) {
+        this.currentPlanningView.end = val.subtract(1, "h").endOf("h").toDate();
+      }
+    },
+  },
   computed: {
     autocompleteList(): Array<AutocompleteOptions> {
       return this.$store.state.creneauGroupList
@@ -81,10 +99,28 @@ export default defineComponent({
           return { id: o.id.toString(), name: o.title };
         });
     },
+    uuid(): string {
+      return this.$store.state.evenement.uuid;
+    },
   },
   methods: {
     closeEdit(e: MouseEvent) {
-      if (!(this.$refs.edit as HTMLElement).contains(e.target as Node)) this.showEdit = false;
+      if (!(this.$refs.edit as HTMLElement).contains(e.target as Node)) {
+        this.showEdit = false;
+        if (this.currentPlanningView)
+          fetch(`${API_URL}api/evenements/${this.uuid}/views/${this.currentPlanningView.uuid}`, {
+            method: "PUT",
+            body: JSON.stringify(this.currentPlanningView),
+            headers: { "Content-Type": "application/json" },
+          }).then((res) => {
+            if (res.status !== 200) {
+              Toast({
+                html: "Impossible de sauvegardé la vue:" + res.statusText,
+                classes: "error",
+              });
+            }
+          });
+      }
     },
     newView() {
       const evt = this.$store.state.evenement;
@@ -98,6 +134,17 @@ export default defineComponent({
       };
       this.currentPlanningView = planning;
       this.planningViewList.push(planning);
+      fetch(`${API_URL}api/evenements/${this.uuid}/views`, {
+        method: "POST",
+        body: JSON.stringify(planning),
+        headers: { "Content-Type": "application/json" },
+      }).then((res) => {
+        if (res.status == 200) {
+          Toast({ html: "Vue sauvergardée", classes: "success" });
+        } else {
+          Toast({ html: "Impossible de sauvegardé la vue:" + res.statusText, classes: "error" });
+        }
+      });
     },
     deleteVue() {
       if (this.currentPlanningView && confirm("Êtes vous sûr de vouloir supprimer cette vue?")) {
@@ -105,12 +152,41 @@ export default defineComponent({
         this.planningViewList = this.planningViewList.filter((p) => p.uuid != uuid);
         this.currentPlanningView = null;
         this.showEdit = false;
+        fetch(`${API_URL}api/evenements/${this.uuid}/views/${uuid}`, {
+          method: "DELETE",
+        }).then((res) => {
+          if (res.status !== 200) {
+            Toast({ html: "Impossible de supprimé la vue:" + res.statusText, classes: "error" });
+          }
+        });
       }
     },
     loadView(uuid: string) {
       this.currentPlanningView = this.planningViewList.find((p) => uuid == p.uuid) ?? null;
     },
   },
+  mounted() {
+    fetch(`${API_URL}api/evenements/${this.uuid}/views`, {
+      method: "GET",
+    })
+      .then((res) => {
+        if (res.status == 200) {
+          return res.json();
+        } else {
+          Toast({ html: "Impossible de chargé les données" + res.statusText, classes: "error" });
+        }
+      })
+      .then((arr) => {
+        this.planningViewList = arr.map((o: PlanningView) => {
+          o.start = new Date(o.start);
+          o.end = new Date(o.end);
+          return o;
+        });
+        if (this.planningViewList.length > 0) {
+          this.currentPlanningView = this.planningViewList[0];
+        }
+      });
+  },
 });
 </script>
 

src/views/PrintablePlanning.vue

@@ -17,7 +17,7 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 import Timeline from "jc-timeline/lib/Timeline";
-import DatePicker from "@/components/date-picker.vue";
+import DatePicker from "@/components/Form/date-picker.vue";
 
 import { Event as jcEvent } from "jc-timeline/lib/Event";
 import dayjs from "dayjs";

src/views/EvenementManager.vue → src/views/admin/EvenementManager.vue

@@ -22,7 +22,7 @@
 
 <script lang="ts">
 import { defineComponent } from "vue";
-import DataTable, { DataTableData, DataTableObject } from "@/components/DataTable.vue";
+import DataTable, { DataTableData, DataTableObject } from "@/components/Utils/DataTable.vue";
 import EvenementVersion from "@/models/EvenementVersion";
 import dayjs from "dayjs";
 import Toast from "@/utils/Toast";

src/views/UserManager.vue → src/views/admin/UserManager.vue

@@ -67,13 +67,13 @@
 import Toast from "@/utils/Toast";
 import User, { Role } from "@/models/MyUser";
 import { defineComponent } from "vue";
-import styledInput from "../components/input.vue";
-import chipsInput from "../components/SelectChipInput.vue";
+import styledInput from "@/components/Form/Input.vue";
+import chipsInput from "@/components/Form/SelectChipInput.vue";
 import DataTable, {
   CustomButton,
   DataTableData,
   DataTableObject,
-} from "@/components/DataTable.vue";
+} from "@/components/Utils/DataTable.vue";
 
 const API_URL = process.env.VUE_APP_API_URL;
 export default defineComponent({