retrieve existing project attribut value & add attribute creation

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"
       >

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/views/Project/ProjectEdit.vue

@@ -308,25 +308,13 @@
         v-if="project"
         class="fields grouped"
       >
-        <div
-          v-for="(projectAttribute, index) in projectAttributes"
+        <ProjectAttributeForm
+          v-for="(attribute, index) in projectAttributes"
           :key="index"
-          class="field"
-        >
-          <label for="attribute-value">
-            {{ projectAttribute.attribute.label }}
-          </label>
-          <div>
-            <FeatureExtraForm
-              :id="`attribute-value-for-${projectAttribute.attribute.name}`"
-              ref="extraForm"
-              name="attribute-value"
-              :field="{ ...projectAttribute, value: projectAttribute.value }"
-              :use-value-only="true"
-              @update:value="updateAttributeValue($event, projectAttribute.attribute)"
-            />
-          </div>
-        </div>
+          :attribute="attribute"
+          :form-project-attributes="form.project_attributes"
+          @update:project_attributes="form.project_attributes = $event"
+        />
       </div>
 
       <div class="ui divider" />
@@ -348,8 +336,8 @@
 
 <script>
 import axios from '@/axios-client.js';
-import Dropdown from '@/components/Dropdown.vue';
-import FeatureExtraForm from '@/components/Feature/Edit/FeatureExtraForm';
+import Dropdown from '@/components/Dropdown';
+import ProjectAttributeForm from '@/components/Project/Edition/ProjectAttributeForm';
 import mapService from '@/services/map-service';
 
 import TextareaMarkdown from 'textarea-markdown';
@@ -361,7 +349,7 @@ export default {
 
   components: {
     Dropdown,
-    FeatureExtraForm,
+    ProjectAttributeForm
   },
 
   data() {
@@ -830,17 +818,6 @@ export default {
     zoomMap() {
       mapService.zoom(this.form.map_max_zoom_level);
     },
-
-    updateAttributeValue(value, attributeId) {
-      const attributeIndex = this.form.project_attributes.findIndex(projAttr => projAttr.attribute.id === attributeId);
-      if (attributeIndex === -1) {
-        // TODO: adapt for creation, using object from api endpoint project_attributes
-        console.log('no attribute found for this project');
-        //this.form.project_attributes.push({ ...projectAttribute, value });
-      } else if (attributeIndex > -1) {
-        this.form.project_attributes[attributeIndex].value = value.toString();
-      }
-    }
   },
 };
 </script>