removed semantic-ui-vue

package-lock.json

@@ -12,7 +12,6 @@
         "core-js": "^3.6.5",
         "leaflet": "^1.7.1",
         "register-service-worker": "^1.7.1",
-        "semantic-ui-vue": "^0.11.0",
         "vue": "^2.6.11",
         "vue-frag": "^1.1.5",
         "vue-router": "^3.2.0",
@@ -12026,11 +12025,6 @@
         "node-forge": "^0.10.0"
       }
     },
-    "node_modules/semantic-ui-vue": {
-      "version": "0.11.0",
-      "resolved": "https://registry.npmjs.org/semantic-ui-vue/-/semantic-ui-vue-0.11.0.tgz",
-      "integrity": "sha512-wQE7zn7TIOPbLzbUp5hhIzivEkV6qk/i+Vc/BCQCQH7thF7UWqsEAcWWrlskwMTD48uoqGGUHIEN+kxsy0W3mA=="
-    },
     "node_modules/semver": {
       "version": "6.3.0",
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
@@ -25241,11 +25235,6 @@
         "node-forge": "^0.10.0"
       }
     },
-    "semantic-ui-vue": {
-      "version": "0.11.0",
-      "resolved": "https://registry.npmjs.org/semantic-ui-vue/-/semantic-ui-vue-0.11.0.tgz",
-      "integrity": "sha512-wQE7zn7TIOPbLzbUp5hhIzivEkV6qk/i+Vc/BCQCQH7thF7UWqsEAcWWrlskwMTD48uoqGGUHIEN+kxsy0W3mA=="
-    },
     "semver": {
       "version": "6.3.0",
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",

package.json

@@ -15,7 +15,6 @@
     "core-js": "^3.6.5",
     "leaflet": "^1.7.1",
     "register-service-worker": "^1.7.1",
-    "semantic-ui-vue": "^0.11.0",
     "vue": "^2.6.11",
     "vue-frag": "^1.1.5",
     "vue-router": "^3.2.0",

src/App.vue

@@ -13,12 +13,17 @@
             {{ APPLICATION_NAME }}
           </router-link>
 
-          <sui-dropdown
+          <div
+            :class="['ui dropdown item', { 'active visible': menuIsOpen }]"
             v-if="project"
-            :text="`Projet : ${project.title}`"
-            class="item"
+            @click="menuIsOpen = !menuIsOpen"
           >
-            <sui-dropdown-menu>
+            Projet : {{ project.title }}
+            <i class="dropdown icon"></i>
+            <div
+              :class="['menu', { 'visible transition': menuIsOpen }]"
+              style="z-index: 401"
+            >
               <router-link
                 :to="{
                   name: 'project_detail',
@@ -29,7 +34,10 @@
                 <i class="home icon"></i>Accueil
               </router-link>
               <router-link
-                :to="{ name: 'liste-signalements', params: { slug: project.slug } }"
+                :to="{
+                  name: 'liste-signalements',
+                  params: { slug: project.slug },
+                }"
                 class="item"
               >
                 <i class="list icon"></i>Liste & Carte
@@ -54,17 +62,19 @@
                 <i class="users icon"></i>Membres
               </router-link>
               <!-- {% endif %} -->
-            </sui-dropdown-menu>
-          </sui-dropdown>
+            </div>
+          </div>
 
           <div class="right menu">
             <router-link v-if="user" to="/my_account/" class="item">
               {{ userFullname || user.username || "Utilisateur inconnu" }}
               <!-- // ? full_name n'existe pas côté django... -->
             </router-link>
-            <div v-if="user && user.is_administrator" class="item ui label vertical">
-              <span> {{ USER_LEVEL_PROJECTS }}</span
-              >
+            <div
+              v-if="user && user.is_administrator"
+              class="item ui label vertical"
+            >
+              <span> {{ USER_LEVEL_PROJECTS }}</span>
               <br />
               <span v-if="user.is_administrator"> Gestionnaire métier </span>
             </div>
@@ -127,6 +137,13 @@ import { mapGetters } from "vuex";
 
 export default {
   name: "App",
+
+  data() {
+    return {
+      menuIsOpen: false,
+    };
+  },
+
   computed: {
     ...mapState(["projects", "user", "SSO_SETTED", "USER_LEVEL_PROJECTS"]),
     ...mapGetters(["project"]),
@@ -134,17 +151,11 @@ export default {
     APPLICATION_NAME: () => process.env.VUE_APP_APPLICATION_NAME,
     PACKAGE_VERSION: () => process.env.PACKAGE_VERSION || "0",
     userFullname: function () {
-      if (this.user.first_name || this.user.last_name) return this.user.first_name + " " + this.user.last_name;
+      if (this.user.first_name || this.user.last_name)
+        return this.user.first_name + " " + this.user.last_name;
       return null;
     },
-    /* USER_LEVEL_PROJECT: function() {
-      return this.USER_LEVEL_PROJECTS.filter(item => item)
-    } */
   },
-  //  created() {
-
-  //this.$store.dispatch("GET_COOKIE", "csrftoken"); // * ne récupère plus le cookie arès avoir vidé le cache ?!
-  //},
   methods: {
     logout() {
       this.$store.dispatch("LOGOUT");

src/main.js

 const axios = require("axios")
 import Vue from 'vue'
-import SuiVue from 'semantic-ui-vue'
 
 import App from './App.vue'
 import './registerServiceWorker'
@@ -20,7 +19,3 @@ store.dispatch("GET_USER_LEVEL_PROJECTS") // * mock en attendant endpoint ou aut
     render: h => h(App)
   }).$mount('#app')
 }))
-
-
-Vue.use(SuiVue,
-);
\ No newline at end of file

src/views/project/Project_detail.vue

@@ -35,7 +35,7 @@
                   data-tooltip="S'abonner au projet"
                   data-position="top center"
                   data-variation="mini"
-                  @click="openModal = true"
+                  @click="isModalOpen = true"
                 >
                   <i class="inverted grey envelope icon"></i>
                 </a>
@@ -370,37 +370,51 @@
     </span>
     <!-- {% endif %} -->
 
-    <sui-modal v-model="openModal" mini class="mini subscription">
-      <!-- <div class="ui mini modal subscription"> -->
-      <i @click="openModal = false" class="close icon"></i>
-      <div class="ui icon header">
-        <i class="envelope icon"></i>
-        Notifications du projet
-      </div>
-      <div class="content">
-        <!-- {% if is_suscriber %} -->
-        <!-- <form
+    <div
+      v-if="isModalOpen"
+      class="ui dimmer modals page transition visible active"
+      style="display: flex !important"
+    >
+      <div
+        :class="[
+          'ui mini modal subscription',
+          { 'transition visible active': isModalOpen },
+        ]"
+      >
+        <i @click="isModalOpen = false" class="close icon"></i>
+        <div class="ui icon header">
+          <i class="envelope icon"></i>
+          Notifications du projet
+        </div>
+        <div class="content">
+          <!-- {% if is_suscriber %} -->
+          <!-- <form
           action="{% url 'geocontrib:subscription' slug=project.slug action='annuler' %}"
           method="GET"
         > -->
-        <button v-if="is_suscriber" class="ui red compact fluid button">
-          Se désabonner de ce projet
-        </button>
-        <!-- </form> -->
-        <!-- {% else %} -->
-        <!-- <form
+          <button v-if="is_suscriber" class="ui red compact fluid button">
+            Se désabonner de ce projet
+          </button>
+          <!-- </form> -->
+          <!-- {% else %} -->
+          <!-- <form
           action="{% url 'geocontrib:subscription' slug=project.slug action='ajouter' %}"
           method="GET"
         > -->
-        <button v-else class="ui green compact fluid button">
-          <!-- <button type="submit" class="ui green compact fluid button"> -->
-          S'abonner à ce projet
-        </button>
-        <!-- </form> -->
-        <!-- {% endif %} -->
+          <button
+            v-else
+            @click="subsribeProject"
+            class="ui green compact fluid button"
+          >
+            <!-- <button type="submit" class="ui green compact fluid button"> -->
+            S'abonner à ce projet
+          </button>
+          <!-- </form> -->
+          <!-- {% endif %} -->
+        </div>
+        <!--    </div> -->
       </div>
-      <!--    </div> -->
-    </sui-modal>
+    </div>
   </div>
 </template>
 
@@ -418,7 +432,7 @@ export default {
   data() {
     return {
       slug: this.$route.params.slug,
-      openModal: false,
+      isModalOpen: false,
       is_suscriber: false,
       last_comments: [],
       permissions: {
@@ -445,7 +459,11 @@ export default {
     }
   },
 
-  methods: {},
+  methods: {
+    subsribeProject() {
+      console.log("Subsribe to project");
+    },
+  },
 };
 </script>
 

src/views/project/Project_edit.vue

@@ -208,7 +208,6 @@ export default {
 
   methods: {
     definePageType() {
-      console.log("ROUTE : ", this.$router.history.current.name);
       if (this.$router.history.current.name === "project_create") {
         this.action = "create";
       } else if (this.$router.history.current.name === "project_edit") {
@@ -259,7 +258,6 @@ export default {
   },
   created() {
     this.definePageType();
-    console.log(this.action);
     if (!this.project && this.action !== "create") {
       this.$store.commit("SET_PROJECT_SLUG", this.$route.params.slug);
     }