WIP: add form for project attributes

src/views/Project/ProjectEdit.vue

@@ -299,6 +299,36 @@
         </div>
       </div>
 
+
+      <div class="ui horizontal divider">
+        ATTRIBUTS
+      </div>
+
+      <div
+        v-if="project"
+        class="fields grouped"
+      >
+        <div
+          v-for="(projectAttribute, 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>
+      </div>
+
       <div class="ui divider" />
 
       <button
@@ -319,6 +349,7 @@
 <script>
 import axios from '@/axios-client.js';
 import Dropdown from '@/components/Dropdown.vue';
+import FeatureExtraForm from '@/components/Feature/Edit/FeatureExtraForm';
 import mapService from '@/services/map-service';
 
 import TextareaMarkdown from 'textarea-markdown';
@@ -330,6 +361,7 @@ export default {
 
   components: {
     Dropdown,
+    FeatureExtraForm,
   },
 
   data() {
@@ -389,7 +421,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 +457,7 @@ export default {
   computed: {
     ...mapState([
       'levelsPermissions',
+      'projectAttributes'
     ]),
     ...mapState('projects', ['project']),
     DJANGO_BASE_URL: function () {
@@ -661,17 +696,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,6 +829,17 @@ 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();
+      }
     }
   },
 };