feat: Add button with link to endpoint on the specific endpoint

simoneldevig · Apr 12, 2021 · 1233640 · 1233640
1 parent 7ccb17b
commit 1233640
Showing 1 changed file with 12 additions and 1 deletion.
diff --git a/src/components/RecursiveCollapse.vue b/src/components/RecursiveCollapse.vue
@@ -9,7 +9,14 @@
                 <h1 v-show="!editPropertyName" class="h3">{{ propertyName }}</h1>
                 <MazInput v-show="editPropertyName" ref="propertyName" v-model="newPropertyName" placeholder="Property name" size="sm" @change="updateModel" @blur="editPropertyName = false" />
               </div>
-              <h1 v-else class="h3">{{ id }}</h1>
+              <div v-else class="d-flex justify-content-between w-100">
+                <h1 class="h3">{{ id }}</h1>
+                <a v-if="isEndpoint" :href="endpointUrl" target="blank" class="mr-2">
+                  <MazBtn size="mini" color="grey" rounded>
+                    <small>Open</small>
+                  </MazBtn>
+                </a>
+              </div>
               <div class="d-flex align-items-center">
                 <div v-if="isSubChild" class="property__actions">
                   <MazBtn title="Rename" fab outline size="mini" class="mr-2 property__actions--btn" color="primary" @click.stop="editPropName">
@@ -97,6 +104,10 @@ export default class RecursiveCollapse extends Vue {
       return this.$store.state.models;
     }
 
+    get endpointUrl (): string {
+      return `${window.location.origin}/${this.id}`;
+    }
+
     get sortable () {
       // Convert value object to array for making it sortabel
       return this.dataModel.value ? Object.entries((this.dataModel.value as any)) : [];