Last active
February 26, 2021 20:05
-
-
Save arelidev/5477f617ecd3dfe7a4b09666a3028c71 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<template> | |
<div | |
:id="item.id" | |
class="accordion-item grid-x" | |
v-bind:class="{'is-open': isOpen, 'is-active': isActive,}" | |
> | |
<div class="shrink cell accordion-item-input-wrapper"> | |
<input | |
type="checkbox" | |
:name="item.name" | |
:value="item" | |
@click="check($event)" | |
:checked="isChecked" | |
/> | |
</div> | |
<div class="auto cell accordion-item-title-wrapper"> | |
<div class="accordion-item-title"> | |
<a @click="toggle" class="accordion-item-trigger"> | |
<span class="accordion-item-title-text">{{ item.name }} {{ getCount(item) }}</span> | |
<span class="accordion-item-trigger-icon"></span> | |
</a> | |
</div> | |
</div> | |
<div class="small-12 cell accordion-item-details-wrapper"> | |
<div v-if="isOpen" class="accordion-item-details"> | |
<div class="accordion-item-details-inner"> | |
<div | |
v-if="item.description" | |
v-html="removeStyles(item.description)" | |
class="accordion-item-details-inner-content"> | |
</div> | |
</div> | |
</div> | |
<div v-if="item.resources" v-show="isOpen" class="accordion box" role="presentation"> | |
<p v-if="item.resources.length > 0" class="accordion-item-header"> | |
<b>Available Resources:</b> | |
</p> | |
<p v-if="item.resources.length <= 0" class="accordion-item-header"> | |
<b>There are currently no resources available for this facility.</b> | |
</p> | |
<tree-item | |
v-for="resource in item.resources" | |
:key="resource.id" | |
:item="resource" | |
:selected="dataSelected" | |
@addElement="addElement" | |
@removeElement="removeElement" | |
class="item" | |
></tree-item> | |
</div> | |
</div> | |
</div> | |
</template> | |
<script> | |
export default { | |
name: "tree-item", | |
props: { | |
item: Object, | |
selected: Array | |
}, | |
data: function () { | |
return { | |
dataSelected: this.selected, | |
isOpen: false, | |
isActive: false | |
}; | |
}, | |
computed: { | |
isChecked: function () { | |
return this.selected.map(e => { | |
return e.name | |
}).indexOf(this.item.name) >= 0; | |
} | |
}, | |
methods: { | |
toggle: function () { | |
this.isOpen = !this.isOpen; | |
}, | |
check: function (e) { | |
if (e.target.checked) { | |
this.$emit("addElement", this.item); | |
this.isActive = true; | |
} else { | |
this.$emit("removeElement", this.item); | |
this.isActive = false; | |
// Remove all selected child nodes when the parent node is deselected | |
// const self = this; | |
// if (this.item.resources) { | |
// this.item.resources.forEach(function (node) { | |
// if (self.selected.map(e => { | |
// return e.name | |
// }).indexOf(node.name) >= 0) { | |
// self.$emit("removeElement", node); | |
// } | |
// }); | |
// } | |
} | |
}, | |
addElement: function (element) { | |
// Add current element if a child node has been selected | |
if (this.selected.map(e => { | |
return e.name | |
}).indexOf(this.item.name) < 0) { | |
this.isActive = true; | |
this.$emit("addElement", this.item); | |
} | |
// Emit selected item up the tree line | |
this.$emit("addElement", element); | |
}, | |
removeElement: function (element) { | |
this.$emit("removeElement", element); | |
}, | |
removeStyles(str) { | |
return str.replace(/style=".*?"/mg, '') | |
}, | |
getCount(parent) { | |
const self = this; | |
let sum = 0; | |
if (!parent.resources) { | |
return; | |
} | |
parent.resources.forEach(function (node) { | |
sum += self.selected.includes(node) ? 1 : 0; | |
}) | |
return sum; | |
} | |
} | |
}; | |
</script> | |
<style scoped> | |
</style> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment