Add swap controls to UI (#154)

yeti-platform · Mar 7, 2024 · f0c801e · f0c801e
1 parent a0f366f
commit f0c801e
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 3 deletions.
diff --git a/src/components/EditLink.vue b/src/components/EditLink.vue
@@ -11,6 +11,7 @@
     </v-card-text>
 
     <v-card-actions>
+      <v-btn append-icon="mdi-swap-horizontal" text="Swap link direction" color="primary" @click="swapLink"></v-btn>
       <v-spacer></v-spacer>
       <v-btn text="Cancel" color="cancel" @click="isActive.value = false"></v-btn>
       <v-btn text="Save" color="primary" @click="saveLink" variant="tonal"></v-btn>
@@ -63,6 +64,19 @@ export default {
           console.log(error);
         })
         .finally();
+    },
+    swapLink() {
+      axios
+        .post(`/api/v2/graph/${this.edge.id}/swap`)
+        .then(response => {
+          this.edge["source"] = response.data["source"];
+          this.edge["target"] = response.data["target"];
+          this.$eventBus.emit("displayMessage", { message: "Link direction swapped succesfully!", status: "success" });
+        })
+        .catch(error => {
+          this.error = error;
+          console.log(error);
+        });
     }
   },
   computed: {

diff --git a/src/components/RelatedObjects.vue b/src/components/RelatedObjects.vue
@@ -72,8 +72,8 @@
         </td>
         <td class="controls" v-if="hops === 1">
           <v-btn
-            icon="mdi-link-off"
-            @click="unlink(item.edges[0].id)"
+            icon="mdi-swap-horizontal"
+            @click="swapLink(item.edges[0].id)"
             density="compact"
             variant="tonal"
             color="primary"
@@ -95,6 +95,15 @@
               />
             </template>
           </v-dialog>
+          <v-btn
+            icon="mdi-link-off"
+            @click="unlink(item.edges[0].id)"
+            density="compact"
+            variant="tonal"
+            color="error"
+            class="me-2"
+          >
+          </v-btn>
         </td>
       </tr>
     </template>
@@ -185,7 +194,22 @@ export default {
         })
         .finally(() => (this.loading = false));
     },
+    swapLink(edgeId) {
+      axios
+        .post(`/api/v2/graph/${edgeId}/swap`)
+        .then(response => {
+          this.$eventBus.emit("displayMessage", { message: "Link direction swapped succesfully!", status: "success" });
+          this.fetchNeighbors({ page: this.page, itemsPerPage: this.perPage });
+        })
+        .catch(error => {
+          this.error = error;
+          console.log(error);
+        });
+    },
     unlink(id) {
+      if (!confirm("Are you sure you want to delete this link?")) {
+        return;
+      }
       axios
         .delete(`/api/v2/graph/${id}`)
         .then(() => {
@@ -258,7 +282,7 @@ export default {
 }
 
 td.controls {
-  width: 110px;
+  width: 140px;
 }
 
 td.link {