TreeItem.vue

<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>