scinote-web/app/javascript/vue/storage_locations/modals/move_tree.vue

<template>
  <div class="pl-6" v-if="storageLocationTrees.length" v-for="storageLocationTree in storageLocationTrees"
       :key="storageLocationTree.storage_location.id">
    <div class="flex items-center">
      <i v-if="storageLocationTree.children.length > 0"
         :class="{'sn-icon-up': opendedStorageLocations[storageLocationTree.storage_location.id],
                  'sn-icon-down': !opendedStorageLocations[storageLocationTree.storage_location.id]}"
         @click="opendedStorageLocations[storageLocationTree.storage_location.id] = !opendedStorageLocations[storageLocationTree.storage_location.id]"
         class="sn-icon p-2 pr-1 cursor-pointer"></i>
      <i v-else class="sn-icon sn-icon-up p-2 pr-1 opacity-0"></i>
      <div @click="$emit('selectStorageLocation', storageLocationTree.storage_location.id)"
           class="cursor-pointer flex items-center pl-1 flex-1 gap-2
                text-sn-blue hover:bg-sn-super-light-grey"
          :class="{'!bg-sn-super-light-blue': storageLocationTree.storage_location.id == value}">
        <i class="sn-icon sn-icon-folder"></i>
        <div class="flex-1 truncate p-2 pl-0" :title="storageLocationTree.storage_location.name">
          {{ storageLocationTree.storage_location.name }}
        </div>
      </div>
    </div>
    <MoveTree v-if="opendedStorageLocations[storageLocationTree.storage_location.id]"
              :storageLocationTrees="storageLocationTree.children"
              :value="value"
              @selectStorageLocation="$emit('selectStorageLocation', $event)" />
  </div>
</template>

<script>
export default {
  name: 'MoveTree',
  emits: ['selectStorageLocation'],
  props: {
    storageLocationTrees: Array,
    value: Number
  },
  components: {
    MoveTree: () => import('./move_tree.vue')
  },
  data() {
    return {
      opendedStorageLocations: {}
    };
  }
};
</script>