Files
hoppscotch/components/collections/request.vue
2020-02-24 21:06:23 -05:00

67 lines
1.6 KiB
Vue

<template>
<div class="flex-wrap">
<div>
<button class="icon" @click="selectRequest()" v-tooltip="$t('use_request')">
<i class="material-icons">insert_drive_file</i>
<span>{{ request.name }}</span>
</button>
</div>
<v-popover>
<button class="tooltip-target icon" v-tooltip="$t('more')">
<i class="material-icons">more_vert</i>
</button>
<template slot="popover">
<div>
<button class="icon" @click="$emit('edit-request')" v-close-popover>
<i class="material-icons">edit</i>
<span>{{ $t("edit") }}</span>
</button>
</div>
<div>
<button class="icon" @click="removeRequest" v-close-popover>
<i class="material-icons">delete</i>
<span>{{ $t("delete") }}</span>
</button>
</div>
</template>
</v-popover>
</div>
</template>
<style scoped lang="scss">
ul {
display: flex;
flex-direction: column;
}
ul li {
display: flex;
padding-left: 16px;
border-left: 1px solid var(--brd-color);
}
</style>
<script>
export default {
props: {
request: Object,
collectionIndex: Number,
folderIndex: Number,
requestIndex: Number,
},
methods: {
selectRequest() {
this.$store.commit("postwoman/selectRequest", { request: this.request })
},
removeRequest() {
if (!confirm("Are you sure you want to remove this request?")) return
this.$store.commit("postwoman/removeRequest", {
collectionIndex: this.collectionIndex,
folderIndex: this.folderIndex,
requestIndex: this.requestIndex,
})
},
},
}
</script>