128 lines
2.8 KiB
Vue
128 lines
2.8 KiB
Vue
<template>
|
|
<div>
|
|
<font-awesome-icon class="icon" :icon="iconName" @click="onClickVisible" />
|
|
<p @click="onClickEdit()">{{ item.name }}</p>
|
|
<div id="settings" ref="settings" class="collapsed">
|
|
<div id="settings-container" ref="settings-container">
|
|
<div>
|
|
<input
|
|
ref="focusElement"
|
|
type="text"
|
|
v-model="editPcName"
|
|
@keyup.enter="onEnter()"
|
|
/>
|
|
|
|
<button @click="onClickSave()">
|
|
<font-awesome-icon class="icon" icon="edit"></font-awesome-icon>
|
|
<p>Save</p>
|
|
</button>
|
|
<button @click="onClickEdit()">
|
|
<font-awesome-icon class="icon" icon="times"></font-awesome-icon>
|
|
<p>Cancel</p>
|
|
</button>
|
|
<button @click="onClickDelete()">
|
|
<font-awesome-icon class="icon" icon="trash"></font-awesome-icon>
|
|
<p>Delete</p>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "ScanItem",
|
|
props: ["item"],
|
|
data() {
|
|
return {
|
|
isVisible: true,
|
|
isCollapsed: true,
|
|
editPcName: "",
|
|
};
|
|
},
|
|
methods: {
|
|
onClickVisible() {
|
|
this.isVisible = !this.isVisible;
|
|
},
|
|
onEnter() {
|
|
this.onClickSave();
|
|
},
|
|
onClickEdit() {
|
|
this.isCollapsed = !this.isCollapsed;
|
|
|
|
if (this.isCollapsed) {
|
|
this.$refs.settings.style.height = 0;
|
|
} else {
|
|
this.editPcName = this.item.name;
|
|
this.$refs.settings.style.height =
|
|
this.outerHeight(this.$refs["settings-container"]) + "px";
|
|
setTimeout(() => this.$refs.focusElement.focus(), 100);
|
|
}
|
|
},
|
|
onClickSave() {
|
|
this.$store.dispatch("pci/updatePointCloud", {
|
|
id: this.item.id,
|
|
name: this.editPcName,
|
|
});
|
|
this.onClickEdit();
|
|
},
|
|
onClickDelete() {
|
|
this.$store.dispatch("pci/deletePointCloud", {
|
|
id: this.item.id,
|
|
name: this.editPcName,
|
|
});
|
|
},
|
|
outerHeight(el) {
|
|
var width = el.offsetHeight;
|
|
const style = getComputedStyle(el);
|
|
|
|
width += parseInt(style.marginTop) + parseInt(style.marginTop);
|
|
return width;
|
|
},
|
|
},
|
|
computed: {
|
|
iconName() {
|
|
return this.isVisible ? "eye" : "eye-slash";
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.icon {
|
|
margin-right: 5px;
|
|
width: 25px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
p {
|
|
display: inline-block;
|
|
margin: 0px;
|
|
margin-left: 5px;
|
|
font-size: 0.8em;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
}
|
|
|
|
#settings {
|
|
-moz-transition: height 0.1s;
|
|
-ms-transition: height 0.1s;
|
|
-o-transition: height 0.1s;
|
|
-webkit-transition: height 0.1s;
|
|
transition: height 0.1s;
|
|
height: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#settings-container {
|
|
padding: 10px;
|
|
|
|
margin-left: 25px;
|
|
margin-top: 10px;
|
|
margin-bottom: 30px;
|
|
border-style: solid;
|
|
border-width: 1px;
|
|
border-color: grey;
|
|
}
|
|
</style>e |