Edit element from the details panel

src/components/Element/PanelHeader.vue

@@ -31,6 +31,11 @@
     >
       <i class="icon-link" :title="`Navigate to ${element.name}`"></i>
     </router-link>
+    <a
+      class="icon-edit"
+      title="Edit this element"
+      v-on:click="editionModal = true"
+    ></a>
     <a
       class="icon-trash"
       :class="canAdminElement(elementId) ? 'has-text-danger' : 'has-text-grey-light'"
@@ -62,6 +67,11 @@
         <button class="button is-danger" :class="{ 'is-loading': deleteLoading }" v-on:click="performDelete">Delete</button>
       </template>
     </Modal>
+    <EditionForm
+      v-if="editionModal"
+      v-model:modal="editionModal"
+      :element="element"
+    />
     <div class="is-clearfix"></div>
   </div>
 </template>
@@ -75,6 +85,7 @@ import Modal from '@/components/Modal.vue'
 import ItemId from '@/components/ItemId.vue'
 import WorkerRunSummary from '@/components/Process/Workers/WorkerRuns/WorkerRunSummary.vue'
 import WorkerVersionDetails from '@/components/Process/Workers/Versions/Details.vue'
+import EditionForm from '@/components/Element/EditionForm'
 
 export default {
   mixins: [
@@ -85,7 +96,8 @@ export default {
     Modal,
     ItemId,
     WorkerVersionDetails,
-    WorkerRunSummary
+    WorkerRunSummary,
+    EditionForm
   },
   props: {
     elementId: {
@@ -95,7 +107,8 @@ export default {
   },
   data: () => ({
     deleteModal: false,
-    deleteLoading: false
+    deleteLoading: false,
+    editionModal: false
   }),
   computed: {
     ...mapState('elements', ['elements', 'neighbors']),