Fix sorting projects by date and add login buttons

README.md

@@ -51,4 +51,8 @@ docker-compose up -d
 - Base.html = App.js
 
 ## Divers
-- Vue-fragment permet d'avoir plusieurs éléments html à la racine du template d'un compposant, sans avoir à ajouter une div wrapper qui peut modifier le style, si on a une classe parente avec du flex par exemple. Cela permet de garder la même structure de pages que les templates originaux dans Django, mais il y a des erreurs avec la version 1.5.2, donc elle est bloqué à 1.5.1. https://github.com/Thunberg087/vue-fragment/issues/32 v-frag ne semble pas avoir ce problème, mais n'est pas plus légère, à décider laquelle est mieux...
\ No newline at end of file
+- Vue-fragment permet d'avoir plusieurs éléments html à la racine du template d'un compposant, sans avoir à ajouter une div wrapper qui peut modifier le style, si on a une classe parente avec du flex par exemple. Cela permet de garder la même structure de pages que les templates originaux dans Django, mais il y a des erreurs avec la version 1.5.2, donc elle est bloqué à 1.5.1. https://github.com/Thunberg087/vue-fragment/issues/32 v-frag ne semble pas avoir ce problème, mais n'est pas plus légère, à décider laquelle est mieux...
+
+- user.full_name n'existe pas en base
+
+- sso semble provenir d'une requête, donc du front, alors qu'on en a besoin en front (création d'une view mais ne semble pas propre...)
\ No newline at end of file

src/App.vue

@@ -3,11 +3,8 @@
     <header class="header-menu">
       <div class="ui container">
         <div class="ui inverted icon menu">
-          <!-- <a href="" class="header item"> -->
           <router-link to="/" class="header item">
-            <!-- <img class="ui mini right spaced image" :src="LOGO_PATH">
-          <img class="ui mini right spaced image" :src="$process.env.VUE_APP_LOGO_PATH"> -->
-            <!-- // todo : find out how to get image dynamicaly -->
+            <!-- // todo : find out how to get image from .env -->
             <!-- :src="require(LOGO_PATH)" -->
             <img
               class="ui mini right spaced image"
@@ -15,18 +12,13 @@
             />
             {{ APPLICATION_NAME }}
           </router-link>
-          <!-- </a> -->
 
-          <!-- <div v-if="project" class="ui dropdown item"> -->
           <sui-dropdown
             v-if="project"
             :text="`Projet : ${project.title}`"
             class="item"
           >
-            <!-- Projet&nbsp;: {{ project.title }} -->
             <sui-dropdown-menu>
-              <!--  <i class="dropdown icon"></i>
-              <div class="menu" style="z-index: 401"> -->
               <router-link
                 :to="{
                   name: 'Project_detail',
@@ -34,24 +26,16 @@
                 }"
                 class="item"
               >
-                <!-- <a
-                      class="item"
-                      href="{% url 'geocontrib:project' slug=project.slug %}"
-                    > -->
                 <i class="home icon"></i>Accueil
               </router-link>
               <!-- // todo : créer la page liste de signalements /signalement/lister/ + endpoint -->
               <router-link
                 :to="{
-                  name: 'Project_detail',
+                  name: 'feature_list',
                   params: { slug: project.slug },
                 }"
                 class="item"
               >
-                <!--  <a
-                    class="item"
-                    href="{% url 'geocontrib:feature_list' slug=project.slug %}"
-                  > -->
                 <i class="list icon"></i>Liste & Carte
               </router-link>
 
@@ -60,61 +44,52 @@
               <!-- // todo : créer la page /administration-carte/ + endpoint-->
               <router-link
                 :to="{
-                  name: 'Project_detail',
+                  name: 'project_mapping',
                   params: { slug: project.slug },
                 }"
                 class="item"
               >
-                <!--  <a
-                    class="item"
-                    href="{% url 'geocontrib:project_mapping' slug=project.slug %}"
-                  > -->
                 <i class="map icon"></i>Fonds cartographiques
               </router-link>
               <!-- // todo : créer la page /membres/ -->
               <router-link
                 :to="{
-                  name: 'Project_detail',
+                  name: 'project_members',
                   params: { slug: project.slug },
                 }"
                 class="item"
               >
-                <!-- <a
-                    class="item"
-                    href="{% url 'geocontrib:project_members' slug=project.slug %}"
-                  > -->
                 <i class="users icon"></i>Membres
               </router-link>
-
               <!-- {% endif %} -->
-              <!--  </div> -->
             </sui-dropdown-menu>
           </sui-dropdown>
-          <!-- </div> -->
 
           <div class="right menu">
+            <!--  // todo : create my_account page + endpoint + router -->
             <a
               v-if="user"
               class="item"
               href="{% url 'geocontrib:my_account' %}"
             >
-              {{ user.full_name || user.username }}
+              {{ user.full_name || user.username
+              }}<!-- // ? full_name n'existe pas côté django... -->
             </a>
-            <!--  
-          {% if project or user.is_administrator %}
-          <div class="item ui label">
-            {% if project %}{{ USER_LEVEL_PROJECTS|lookup:project.slug }}<br>{% endif %}
-            {% if user.is_administrator == True %}Gestionnaire métier{% endif %}
-          </div>
-          {% endif %}
-          {% if not SSO_SETTED %} 
-          <a class="item" href="{% url 'geocontrib:logout' %}"><i class="ui logout icon"></i></a>
-          {% endif %}
-          {% elif not SSO_SETTED %} --><!-- // todo : find out SSO_SETTED in django -->
-            <router-link v-else to="/connexion/" class="item"
+            <div v-if="project || user.is_administrator" class="item ui label">
+              <span v-if="project"> {{ USER_LEVEL_PROJECTS }}</span
+              ><br />
+              <span v-if="user.is_administrator"> Gestionnaire métier </span>
+            </div>
+            <!-- // todo: add router link -->
+            <!-- // todo : find out SSO_SETTED in django -->
+            <!-- // ? condition bizarre (if !sso_setted pui elif !sso_setted)  ? -->
+            <!-- <a  class="item" href="{% url 'geocontrib:logout' %}"><i class="ui logout icon"></i></a> -->
+            <router-link v-if="user && !SSO_SETTED" to="logout" class="item"
+              ><i class="ui logout icon"></i>
+            </router-link>
+            <router-link v-else-if="!user" to="/connexion/" class="item"
               >Se Connecter</router-link
             >
-            <!-- {% endif %} -->
           </div>
         </div>
       </div>
@@ -165,7 +140,13 @@ import { mapState } from "vuex";
 export default {
   name: "App",
   computed: {
-    ...mapState(["projects", "user", "project"]),
+    ...mapState([
+      "projects",
+      "user",
+      "project",
+      "SSO_SETTED",
+      "USER_LEVEL_PROJECTS",
+    ]),
     LOGO_PATH: () => process.env.VUE_APP_LOGO_PATH,
     APPLICATION_NAME: () => process.env.VUE_APP_APPLICATION_NAME,
     PACKAGE_VERSION: () => process.env.PACKAGE_VERSION || "0",

src/store/index.js

@@ -23,6 +23,8 @@ export default new Vuex.Store({
     projectMembers: null,
     projects: [],
     staticPages: null,
+    SSO_SETTED: false,
+    USER_LEVEL_PROJECTS: "Administrateur projet"
   },
 
   mutations: {
@@ -43,15 +45,25 @@ export default new Vuex.Store({
     },
     SET_STATIC_PAGES(state, staticPages) {
       state.staticPages = staticPages
+    },
+    SET_SSO(state, SSO_SETTED) {
+      state.SSO_SETTED = SSO_SETTED
+    },
+    SET_USER_LEVEL_PROJECTS(state, USER_LEVEL_PROJECTS) {
+      state.USER_LEVEL_PROJECTS = USER_LEVEL_PROJECTS
     }
   },
 
   actions: {
     async GET_ALL_PROJECTS({ commit }) {
+      function parseDate(date) {
+        let dateArr = date.split("/").reverse()
+        return new Date (dateArr[0], dateArr[1]-1, dateArr[2])
+      }
       await axios
         .get("http://localhost:8000/api/projects/")
         .then((response) => {
-          const orderedProjects = response.data.sort((a, b) => new Date(b.created_on) - new Date(a.created_on));
+          const orderedProjects = response.data.sort((a, b) => parseDate(b.created_on) - parseDate(a.created_on));
           commit("SET_PROJECTS", orderedProjects)
         })
         .catch((error) => {