Merge branch 'develop' into redmine-issues/20476

src/components/Feature/Edit/FeatureExtraForm.vue

@@ -9,10 +9,11 @@
       v-if="field && field.field_type === 'boolean'"
       :class="['ui checkbox', { 'disabled': field.disabled }]"
     >
+      <!-- JSON.parse is used in case of receiving a string 'true' or 'false'-->
       <input
         :id="field.name"
         type="checkbox"
-        :checked="field.value"
+        :checked="JSON.parse(field.value)"
         :name="field.name"
         @change="updateStore_extra_form"
       >
@@ -175,7 +176,7 @@ export default {
       type: Object,
       default: null,
     },
-    isConditionalField: {
+    useValueOnly: {
       type: Boolean,
       default: false,
     }
@@ -205,8 +206,8 @@ export default {
       },
       set(newValue) {
         //* set the value selected in the dropdown
-        if (this.isConditionalField) {
-          this.$emit('update:condition-value', newValue);
+        if (this.useValueOnly) {
+          this.$emit('update:value', newValue);
         } else {
           const newExtraForm = this.field;
           newExtraForm['value'] = newValue;
@@ -292,7 +293,7 @@ export default {
     ]),
 
     initMultipleCheckboxXform() {
-      this.selectedMultipleCheckbox = this.field.value || [];
+      this.selectedMultipleCheckbox = typeof this.field.value === 'string' ? this.field.value.split(',') : this.field.value || [];
     },
 
     initPrerecordedXform() {
@@ -324,7 +325,6 @@ export default {
       // Check if the field object is defined.
       if (this.field) {
         let newValue;
-
         // If the function is triggered by an event from a template input.
         if (val && val.target) {
           // For boolean fields (like checkboxes), use the 'checked' property.
@@ -341,11 +341,10 @@ export default {
           // If the function is called directly with a value (not from an event).
           newValue = val;
         }
-
         // Set the new value for the field.
-        if (this.isConditionalField) {
+        if (this.useValueOnly) {
           // If the component is used to update directly a returned value, emit an event with the new value.
-          this.$emit('update:condition-value', newValue);
+          this.$emit('update:value', newValue);
         } else {
           // Otherwise, update the Vuex store with the new value for the extra form field.
           this.UPDATE_EXTRA_FORM({ ...this.field, value: newValue });

src/components/FeatureType/CustomFormConditionalField.vue

@@ -36,8 +36,8 @@
           class="full-width"
           name="conditioning-value"
           :field="{...conditioningCustForm, value: config.conditionValue}"
-          :is-conditional-field="true"
-          @update:condition-value="updateConditionValue($event)"
+          :use-value-only="true"
+          @update:value="updateConditionValue($event)"
         />
       </div>
     </div>
@@ -64,8 +64,8 @@
           class="full-width"
           name="forced-value"
           :field="{...customForm, value: config.forcedValue}"
-          :is-conditional-field="true"
-          @update:condition-value="updateForcedValue($event)"
+          :use-value-only="true"
+          @update:value="updateForcedValue($event)"
         />
       </div>
     </div>

src/components/Project/Edition/ProjectAttributeForm.vue

+<template>
+  <div class="field">
+    <label for="attribute-value">
+      {{ attribute.label }}
+    </label>
+    <div>
+      <FeatureExtraForm
+        :id="`attribute-value-for-${attribute.name}`"
+        ref="extraForm"
+        name="attribute-value"
+        :field="{ ...attribute, value }"
+        :use-value-only="true"
+        @update:value="updateValue($event.toString(), attribute.id)"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import FeatureExtraForm from '@/components/Feature/Edit/FeatureExtraForm';
+
+export default {
+
+  name: 'ProjectAttributeForm',
+
+  components: {
+    FeatureExtraForm,
+  },
+
+  props: {
+    attribute: {
+      type: Object,
+      default: () => {
+        return {};
+      }
+    },
+    formProjectAttributes: {
+      type: Array,
+      default: () => {
+        return [];
+      }
+    }
+  },
+
+  computed: {
+    /**
+     * Retrieves the value of a project attribute from project data.
+     * 
+     * @returns {String|null} The current value of the attribute for the project if set;
+     */
+    value() {
+      // Find the attribute within the project's current attributes array.
+      const projectAttribute = this.formProjectAttributes.find(el => el.attribute_id === this.attribute.id);
+      // If the attribute is set in this project, return its value, otherwise return the attribute's default value.
+      return projectAttribute ? projectAttribute.value : this.attribute.default_value;
+    },
+  },
+
+  methods: {
+    /**
+     * Updates the value of a project attribute or adds a new attribute if it does not exist.
+     * 
+     * This function looks for an attribute by its ID. If the attribute exists, its value is updated.
+     * If the attribute does not exist, a new attribute object is added to the `project_attributes` array.
+     * 
+     * @param {String} value - The new value to be assigned to the project attribute.
+     * @param {Number} attributeId - The ID of the attribute to be updated or added.
+     */
+    updateValue(value, attributeId) {
+      let projectAttributes = [...this.formProjectAttributes];
+      // Find the index of the attribute in the project_attributes array.
+      const attributeIndex = projectAttributes.findIndex(el => el.attribute_id === attributeId);
+      if (attributeIndex !== -1) {
+        // Directly update the attribute's value if it exists.
+        projectAttributes[attributeIndex].value = value;
+      } else {
+        // Add a new attribute object if it does not exist.
+        projectAttributes.push({ attribute_id: attributeId, value });
+      }
+      this.$emit('update:project_attributes', projectAttributes);
+    }
+  }
+};
+
+</script>

src/main.js

@@ -112,6 +112,7 @@ const fetchDataAndInitializeApp = async () => {
     store.dispatch('map/GET_AVAILABLE_LAYERS'),
     store.dispatch('GET_USER_LEVEL_PERMISSIONS'),
     store.dispatch('GET_LEVELS_PERMISSIONS'),
+    store.dispatch('GET_PROJECT_ATTRIBUTES'),
   ]);
 
   new Vue({

src/store/index.js

@@ -36,6 +36,7 @@ export default new Vuex.Store({
     logged: false,
     messageCount: 0,
     messages: [],
+    projectAttributes: [],
     reloadIntervalId: null,
     staticPages: null,
     user: false,
@@ -54,9 +55,6 @@ export default new Vuex.Store({
     SET_CONFIG(state, payload) {
       state.configuration = payload;
     },
-    SET_COOKIE(state, cookie) { // ! not called anywhere. Delete it ?
-      state.cookie = cookie;
-    },
     SET_STATIC_PAGES(state, staticPages) {
       state.staticPages = staticPages;
     },
@@ -69,13 +67,15 @@ export default new Vuex.Store({
     SET_USER_TOKEN(state, payload) {
       state.userToken = payload;
     },
-
     SET_USER_PERMISSIONS(state, userPermissions) {
       state.user_permissions = userPermissions;
     },
     SET_LEVELS_PERMISSIONS(state, levelsPermissions) {
       state.levelsPermissions = levelsPermissions;
     },
+    SET_PROJECT_ATTRIBUTES(state, userPermissions) {
+      state.projectAttributes = userPermissions;
+    },
     DISPLAY_MESSAGE(state, message) {
       message['counter'] = state.messageCount;
       state.messageCount += 1;
@@ -308,6 +308,18 @@ export default new Vuex.Store({
           throw error;
         });
     },
+    GET_PROJECT_ATTRIBUTES({ commit }) {
+      return axios
+        .get(`${this.state.configuration.VUE_APP_DJANGO_API_BASE}project-attributes/`)
+        .then((response) => {
+          if (response && response.status === 200) {
+            commit('SET_PROJECT_ATTRIBUTES', response.data);
+          }
+        })
+        .catch((error) => {
+          throw error;
+        });
+    },
     CANCEL_CURRENT_SEARCH_REQUEST({ state }) {
       if (state.cancellableSearchRequest.length > 0) {
         const currentRequestCancelToken =

src/views/Project/ProjectEdit.vue

@@ -299,6 +299,24 @@
         </div>
       </div>
 
+
+      <div class="ui horizontal divider">
+        ATTRIBUTS
+      </div>
+
+      <div
+        v-if="project"
+        class="fields grouped"
+      >
+        <ProjectAttributeForm
+          v-for="(attribute, index) in projectAttributes"
+          :key="index"
+          :attribute="attribute"
+          :form-project-attributes="form.project_attributes"
+          @update:project_attributes="form.project_attributes = $event"
+        />
+      </div>
+
       <div class="ui divider" />
 
       <button
@@ -318,7 +336,8 @@
 
 <script>
 import axios from '@/axios-client.js';
-import Dropdown from '@/components/Dropdown.vue';
+import Dropdown from '@/components/Dropdown';
+import ProjectAttributeForm from '@/components/Project/Edition/ProjectAttributeForm';
 import mapService from '@/services/map-service';
 
 import TextareaMarkdown from 'textarea-markdown';
@@ -330,6 +349,7 @@ export default {
 
   components: {
     Dropdown,
+    ProjectAttributeForm
   },
 
   data() {
@@ -389,7 +409,9 @@ export default {
         generate_share_link: false,
         fast_edition_mode: false,
         feature_browsing_default_filter: '',
-        feature_browsing_default_sort: '-created_on'
+        feature_browsing_default_sort: '-created_on',
+        project_attributes: [],
+
       },
       thumbnailFileSrc: '',
       scalesTable: [
@@ -423,6 +445,7 @@ export default {
   computed: {
     ...mapState([
       'levelsPermissions',
+      'projectAttributes'
     ]),
     ...mapState('projects', ['project']),
     DJANGO_BASE_URL: function () {
@@ -661,17 +684,9 @@ export default {
         return;
       }
       const projectData = {
-        title: this.form.title,
-        description: this.form.description,
+        ...this.form,
         access_level_arch_feature: this.form.access_level_arch_feature.value,
         access_level_pub_feature: this.form.access_level_pub_feature.value,
-        archive_feature: this.form.archive_feature,
-        delete_feature: this.form.delete_feature,
-        map_max_zoom_level: this.form.map_max_zoom_level,
-        is_project_type: this.form.is_project_type,
-        generate_share_link: this.form.generate_share_link,
-        fast_edition_mode: this.form.fast_edition_mode,
-        moderation: this.form.moderation,
         feature_browsing_default_sort: this.form.feature_browsing_default_sort.value,
         feature_browsing_default_filter: this.form.feature_browsing_default_filter.value,
       };
@@ -802,7 +817,7 @@ export default {
 
     zoomMap() {
       mapService.zoom(this.form.map_max_zoom_level);
-    }
+    },
   },
 };
 </script>