ToeHistory.vue

<template>
  <div class="dropdown">
    <button
      class="btn btn-primary dropdown-toggle"
      type="button"
      data-bs-toggle="dropdown"
      aria-expanded="false"
    >
      {{ currentTreeShown }}
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
      <li
        v-for="tree in toeHistory"
        :key="tree.treeStateId"
        :class="disabled(tree)"
        @click="getHistoryTree(tree)"
        class="dropdown-item"
      >
        <a>
          {{ formatDatetime(tree.timeUpdated) }}
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
import { DateTime } from "luxon";
import { getLastTree } from "@/helpers/helpers";

export default {
  name: "ToeHistory",
  props: ["toeHistory", "currentTreeState"],
  data: function () {
    return {
      formatDatetime(datetime) {
        return DateTime.fromISO(datetime).toLocaleString(
          DateTime.DATETIME_FULL
        );
      },
      disabled(tree) {
        if (tree.treeStateId === this.currentTreeState.treeStateId) {
          return "disabled";
        }
        return "";
      },
    };
  },
  computed: {
    currentTreeShown() {
      if (
        this.currentTreeState.treeStateId ===
        getLastTree(this.toeHistory).treeStateId
      ) {
        return "Current tree state";
      } else {
        return this.formatDatetime(this.currentTreeState.timeUpdated);
      }
    },
  },
  methods: {
    getHistoryTree(tree) {
      this.$store.dispatch("getTreeDataByStateId", tree.treeStateId);
    },
  },
};
</script>

<style scoped lang="scss">
@import "@/styles/_variables.scss";
.disabled {
  pointer-events: none;
  opacity: 0.6;
}
.dropdown-item {
  cursor: pointer;
}
</style>