add sort on click, replace '!=' with '!==' & empty dropdown at member added

src/components/feature/FeatureAttachmentForm.vue

@@ -120,15 +120,15 @@ export default {
     },
     //* utilisation de watcher, car @change aurait un délai
     "form.title.value": function (newValue, oldValue) {
-      if (oldValue != "") {
-        if (newValue != oldValue) {
+      if (oldValue !== "") {
+        if (newValue !== oldValue) {
           this.updateStore();
         }
       }
     },
     "form.info.value": function (newValue, oldValue) {
-      if (oldValue != "") {
-        if (newValue != oldValue) {
+      if (oldValue !== "") {
+        if (newValue !== oldValue) {
           this.updateStore();
         }
       }

src/components/feature/FeatureListTable.vue

@@ -227,7 +227,7 @@ export default {
     paginatedFeatures() {
       let filterdFeatures = [...this.filteredFeatures];
       // Ajout du tri
-      if (this.sort.column != "") {
+      if (this.sort.column !== "") {
         filterdFeatures = filterdFeatures.sort((a, b) => {
           let aProp = this.getFeatureDisplayName(a);
           let bProp = this.getFeatureDisplayName(b);
@@ -296,11 +296,11 @@ export default {
   },
 
   methods: {
-    getUserName(feature){
-      if(!feature.properties.creator) {
+    getUserName(feature) {
+      if (!feature.properties.creator) {
         return " ---- ";
       }
-      return feature.properties.creator.username || " ---- "
+      return feature.properties.creator.username || " ---- ";
     },
     getFeatureDisplayName(feature) {
       return feature.properties.title || feature.id;

src/views/feature/Feature_edit.vue

@@ -72,7 +72,7 @@
 
           <!-- Import GeoImage -->
           <div v-frag v-if="feature_type && feature_type.geom_type === 'point'">
-            <p v-if="isOffline() != true">
+            <p v-if="isOffline() !== true">
               <button
                 @click="toggleGeoRefModal"
                 id="add-geo-image"
@@ -209,9 +209,9 @@
         </div>
 
         <!-- Pièces jointes -->
-        <div v-if="isOffline() != true">
+        <div v-if="isOffline() !== true">
           <div class="ui horizontal divider">PIÈCES JOINTES</div>
-          <div v-if="isOffline() != true" id="formsets-attachment">
+          <div v-if="isOffline() !== true" id="formsets-attachment">
             <FeatureAttachmentForm
               v-for="form in attachmentFormset"
               :key="form.dataKey"
@@ -231,7 +231,7 @@
         </div>
 
         <!-- Signalements liés -->
-        <div v-if="isOffline() != true">
+        <div v-if="isOffline() !== true">
           <div class="ui horizontal divider">SIGNALEMENTS LIÉS</div>
           <div id="formsets-link">
             <FeatureLinkedForm

src/views/project/Project_members.vue

@@ -26,8 +26,8 @@
           <!-- <label for="add-member"></label> -->
           <Dropdown
             :options="levelOptions"
-            :selected="newMember.status.name"
-            :selection.sync="newMember.status"
+            :selected="newMember.role.name"
+            :selection.sync="newMember.role"
           />
         </div>
       </div>
@@ -50,8 +50,28 @@
       <table class="ui red table">
         <thead>
           <tr>
-            <th>Membre</th>
-            <th>Niveau d'autorisation</th>
+            <th>
+              Membre
+              <i
+                :class="{
+                  down: isSortedAsc('member'),
+                  up: isSortedDesc('member'),
+                }"
+                class="icon sort"
+                @click="changeSort('member')"
+              />
+            </th>
+            <th>
+              Niveau d'autorisation
+              <i
+                :class="{
+                  down: isSortedAsc('role'),
+                  up: isSortedDesc('role'),
+                }"
+                class="icon sort"
+                @click="changeSort('role')"
+              />
+            </th>
           </tr>
         </thead>
         <tbody>
@@ -118,13 +138,15 @@ export default {
           name: "",
           value: "",
         },
-        status: {
+        role: {
           name: "Contributeur",
           value: "contributor",
         },
       },
-      isSortedByName: false,
-      isSortedByStatus: false,
+      sort: {
+        column: "",
+        ascending: true,
+      },
     };
   },
 
@@ -152,14 +174,24 @@ export default {
       return this.projectUsers
         .filter((el) => el.userLevel.value !== "logged_user")
         .sort((a, b) => {
-          if (this.isSortedByName) {
-            const textA = a.user.username.toUpperCase();
-            const textB = b.user.username.toUpperCase();
-            return textA < textB ? -1 : textA > textB ? 1 : 0;
-          } else if (this.isSortedByStatus) {
-            const textA = a.userLevel.name.toUpperCase();
-            const textB = b.userLevel.name.toUpperCase();
-            return textA < textB ? -1 : textA > textB ? 1 : 0;
+          if (this.sort.column !== "") {
+            if (this.sort.column === "member") {
+              const textA = a.user.username.toUpperCase();
+              const textB = b.user.username.toUpperCase();
+              if (this.sort.ascending) {
+                return textA < textB ? -1 : textA > textB ? 1 : 0;
+              } else {
+                return textA > textB ? -1 : textA < textB ? 1 : 0;
+              }
+            } else if (this.sort.column === "role") {
+              const textA = a.userLevel.name.toUpperCase();
+              const textB = b.userLevel.name.toUpperCase();
+              if (this.sort.ascending) {
+                return textA < textB ? -1 : textA > textB ? 1 : 0;
+              } else {
+                return textA > textB ? -1 : textA < textB ? 1 : 0;
+              }
+            }
           } else {
             return 0;
           }
@@ -174,7 +206,26 @@ export default {
         (el) => el.user.id === this.newMember.user.value
       );
       //* modify its userLever
-      this.projectUsers[indexOfUser].userLevel = this.newMember.status;
+      this.projectUsers[indexOfUser].userLevel = this.newMember.role;
+      //* empty add form
+      this.newMember.user = { value: "", name: "" };
+    },
+
+    isSortedAsc(column) {
+      return this.sort.column === column && this.sort.ascending;
+    },
+    isSortedDesc(column) {
+      return this.sort.column === column && !this.sort.ascending;
+    },
+
+    changeSort(column) {
+      if (this.sort.column === column) {
+        //changer order
+        this.sort.ascending = !this.sort.ascending;
+      } else {
+        this.sort.column = column;
+        this.sort.ascending = true;
+      }
     },
 
     validateMembers() {
@@ -256,4 +307,8 @@ export default {
 .padding-1 {
   padding: 0 1em;
 }
+
+i.icon.sort:not(.down):not(.up) {
+  color: rgb(220, 220, 220);
+}
 </style>
\ No newline at end of file