WIP: selecting features to edit

src/components/feature/FeatureListTable.vue

@@ -78,28 +78,21 @@
         <tr v-for="(feature, index) in paginatedFeatures" :key="index">
           <td class="center">
             <div
-              class="ui checkbox"
-              :class="
-                feature.properties.creator.username !== user.username &&
-                !user.is_superuser &&
-                !isUserProjectAdministrator
-                  ? 'disabled'
-                  : ''
-              "
+              :class="['ui checkbox', {disabled: isEditDisabled(feature)}]"
             >
+              <!-- :class="['ui checkbox', {disabled: canDeleteFeature(feature)}]" -->
               <input
                 type="checkbox"
                 :id="feature.id"
                 :value="feature.id"
                 v-model="checked"
-                :disabled="
-                  feature.properties.creator.username !== user.username &&
-                  !user.is_superuser &&
-                  !isUserProjectAdministrator
-                "
+                :disabled="isEditDisabled(feature)"
+                name="select"
               />
-              <label></label>
+              <label for="select"></label>
+                <!-- :disabled="canDeleteFeature(feature)" -->
             </div>
+            {{canDeleteFeature(feature)}}
           </td>
 
           <td class="center">
@@ -269,10 +262,7 @@ export default {
   computed: {
     ...mapState(["user"]),
     ...mapGetters(["project", "permissions"]),
-
-    isUserProjectAdministrator() {
-      return this.permissions.is_project_administrator;
-    },
+    ...mapState(["user", "USER_LEVEL_PROJECTS"]),
 
     checked: {
       get() {
@@ -321,6 +311,32 @@ export default {
   },
 
   methods: {
+    canDeleteFeature(feature) {
+      return feature.properties.creator.username !== this.user.username &&
+                  !this.user.is_superuser &&
+                  !this.permissions.is_project_administrator
+    },
+
+    isEditDisabled(feature) {
+      //console.log("feature", feature)
+      const userStatus = this.USER_LEVEL_PROJECTS[this.project.slug];
+      const access = {
+        "Administrateur projet" : ["draft", "published", "archived"],
+        "Modérateur" : ["pending"],
+        "Super Contributeur" : ["draft", this.project.moderation ? "pending" : "published"],
+        "Contributeur" : ["draft", this.project.moderation ? "pending" : "published"],
+      };
+
+      console.log("userStatus", userStatus)
+      if (userStatus === "Super Contributeur" || userStatus === "Contributeur") {
+        console.log("feature.properties.creator.username", feature.properties.creator.username)
+        console.log("this.user.username", this.user.username)
+        if (feature.properties.creator.username !== this.user.username) return true;
+      }
+      //console.log("access[userStatus].includes(feature.properties.status.value)", access[userStatus].includes(feature.properties.status.value))
+      return !access[userStatus].includes(feature.properties.status.value);
+    },
+    
     getUserName(feature) {
       if (!feature.properties.creator) {
         return " ---- ";

src/views/feature/Feature_list.vue

@@ -36,10 +36,11 @@
               feature_types.length > 0 &&
               permissions.can_create_feature
             "
+            id="button-dropdown"
             class="item right"
           >
             <div
-              @click="showAddFeature = !showAddFeature"
+              @click="toggleAddFeature"
               class="ui dropdown button compact button-hover-green"
               data-tooltip="Ajouter un signalement"
               data-position="bottom left"
@@ -67,13 +68,40 @@
               </div>
             </div>
 
+
+            <div
+              v-if="checkedFeatures.length > 0"
+              @click="toggleModifyStatus"
+              class="ui dropdown button compact button-hover-green margin-left-25"
+              data-tooltip="Modifier le statut des Signalements"
+              data-position="bottom center"
+            >
+              <i class="pencil fitted icon"></i>
+              <div
+                v-if="showModifyStatus"
+                class="menu transition visible"
+                style="z-index: 9999"
+              >
+                <div class="header">Modifier le statut des Signalements</div>
+                <div class="scrolling menu text-wrap">
+                  <span
+                    v-for="status in availableStatus"
+                    :key="status.value"
+                    @click="modifyStatus(status.value)"
+                    class="item"
+                  >
+                    {{ status.name }}
+                  </span>
+                </div>
+              </div>
+            </div>
+
             <div
               v-if="checkedFeatures.length"
               @click="modalAllDelete"
               class="ui button compact button-hover-red margin-left-25"
               data-tooltip="Effacer tous les types de signalements sélectionnés"
-              data-position="left center"
-              data-variation="mini"
+              data-position="bottom right"
             >
               <i class="grey trash fitted icon"></i>
             </div>
@@ -250,6 +278,7 @@ export default {
       },
       showMap: true,
       showAddFeature: false,
+      showModifyStatus: false,
     };
   },
 
@@ -322,6 +351,12 @@ export default {
       );
     },
 
+    availableStatus() {
+
+      return this.statusChoices.filter((status) => status)
+
+    },
+
     featureTypeChoices() {
       return this.feature_types.map((el) => el.title);
     },
@@ -331,10 +366,31 @@ export default {
     ...mapActions('feature', [
       'GET_PROJECT_FEATURES'
     ]),
+
+    toggleAddFeature() {
+      this.showAddFeature = !this.showAddFeature;
+      this.showModifyStatus = false;
+    },
+
+    toggleModifyStatus() {
+      this.showModifyStatus = !this.showModifyStatus;
+      this.showAddFeature = false;
+    },
+
     modalAllDelete() {
       this.modalAllDeleteOpen = !this.modalAllDeleteOpen;
     },
 
+    clickOutsideDropdown(e) {
+      if (!e.target.closest('#button-dropdown'))
+        this.showModifyStatus = false;
+        this.showAddFeature = false;
+    },
+
+    modifyStatus(newValue) {
+      console.log("newValue", newValue)
+    },
+
     deleteFeature(feature_id) {
       const url = `${this.API_BASE_URL}features/${feature_id}/?project__slug=${this.project.slug}`;
       axios
@@ -550,9 +606,11 @@ export default {
       this.initMap();
     }
     this.fetchPagedFeatures();
+    window.addEventListener("mousedown", this.clickOutsideDropdown);
   },
 
   destroyed() {
+    window.removeEventListener("mousedown", this.clickOutsideDropdown);
     //* allow user to change page if ever stuck on loader
     this.$store.commit("DISCARD_LOADER");
   },