OliveTin/frontend/resources/vue/components/EntityDefinitionSection.vue

<template>
  <Section
    :icon="CellsIcon"
    :padding="!hasTable"
  >
    <template #title>
      <span class="section-title-with-icon">
        Entity:
        <ActionIconGlyph
          v-if="definition.icon"
          class="entity-title-icon"
          :glyph="definition.icon"
        />
        {{ definition.title }}
      </span>
    </template>
    <template
      v-if="hasTable"
      #toolbar
    >
      <EntityListFilter v-model="searchText" />
    </template>

    <p v-if="!hasTable">
      {{ definition.instances.length }} instances.
    </p>

    <template v-if="hasTable">
      <p
        v-if="tableError"
        class="table-error padding"
        role="alert"
      >
        {{ tableError }}
      </p>
      <EntityInstancesTable
        v-else
        v-model:page="currentPage"
        v-model:page-size="pageSize"
        :instances="tableInstances"
        :properties="definition.properties"
        :total-instances="totalInstances"
      />
    </template>

    <ul v-else>
      <li
        v-for="inst in definition.instances"
        :key="inst.uniqueKey"
      >
        <router-link :to="entityDetailsRoute(inst)">
          {{ inst.title }}
        </router-link>
      </li>
    </ul>

    <div
      v-if="usedDashboards.length > 0"
      :class="{ padding: hasTable }"
    >
      <h3>Used on Dashboards:</h3>
      <ul>
        <li
          v-for="dash in usedDashboards"
          :key="dash"
        >
          <template v-if="isEntityDirectory(dash)">
            {{ getDashboardTitle(dash) }} <span class="entity-directory-label">[Entity Directory]</span>
          </template>
          <router-link
            v-else-if="!dash.includes('entity:')"
            :to="{ name: 'Dashboard', params: { title: getDashboardTitle(dash) } }"
          >
            {{ getDashboardTitle(dash) }}
          </router-link>
          <span v-else>{{ dash }}</span>
        </li>
      </ul>
    </div>
  </Section>
</template>

<script setup>
import { computed, ref, watch, onMounted, onBeforeUnmount } from 'vue'
import { CellsIcon } from '@hugeicons/core-free-icons'
import Section from 'picocrank/vue/components/Section.vue'
import ActionIconGlyph from './ActionIconGlyph.vue'
import EntityInstancesTable from './EntityInstancesTable.vue'
import EntityListFilter from './EntityListFilter.vue'
import { entityDetailsRoute } from '../utils/entityRoutes.js'

const props = defineProps({
  definition: {
    type: Object,
    required: true
  }
})

const searchText = ref('')
const tableInstances = ref([])
const totalInstances = ref(0)
const currentPage = ref(1)
const pageSize = ref(10)
const tableError = ref('')
let fetchTimer = null
let fetchSequence = 0

const hasTable = computed(() => (props.definition.properties?.length ?? 0) > 0)

const usedDashboards = computed(() => filteredDashboards(props.definition.usedOnDashboards ?? []))

watch(searchText, () => {
  currentPage.value = 1
  scheduleFetchTableInstances()
})

watch([currentPage, pageSize], () => {
  scheduleFetchTableInstances()
})

function filteredDashboards (dashboards) {
  return dashboards.filter(d => d && !d.includes('{{'))
}

function isEntityDirectory (dashboardTitle) {
  return dashboardTitle.endsWith(' [Entity Directory]')
}

function getDashboardTitle (dashboardTitle) {
  if (isEntityDirectory(dashboardTitle)) {
    return dashboardTitle.slice(0, -' [Entity Directory]'.length)
  }
  return dashboardTitle
}

function scheduleFetchTableInstances () {
  if (!hasTable.value) {
    return
  }

  if (fetchTimer) {
    clearTimeout(fetchTimer)
  }

  fetchTimer = setTimeout(() => {
    fetchTableInstances()
  }, 250)
}

async function fetchTableInstances () {
  if (!hasTable.value) {
    return
  }

  const requestId = ++fetchSequence
  tableError.value = ''
  try {
    const response = await window.client.getEntities({
      entityType: props.definition.title,
      filter: searchText.value.trim(),
      page: currentPage.value,
      pageSize: pageSize.value
    })

    if (requestId !== fetchSequence) {
      return
    }

    const definition = response.entityDefinitions?.find(def => def.title === props.definition.title)
    tableInstances.value = definition?.instances ?? []
    totalInstances.value = definition?.totalInstances ?? 0
  } catch (err) {
    if (requestId !== fetchSequence) {
      return
    }

    console.error('Failed to fetch entity instances:', err)
    tableError.value = 'Failed to load entity instances.'
    tableInstances.value = []
    totalInstances.value = 0
  }
}

onMounted(() => {
  if (hasTable.value) {
    fetchTableInstances()
  }
})

onBeforeUnmount(() => {
  if (fetchTimer) {
    clearTimeout(fetchTimer)
    fetchTimer = null
  }
})
</script>

<style scoped>
.section-title-with-icon {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
}

.entity-title-icon {
	font-size: 1.2em;
}

.table-error {
	color: var(--error, #c00);
}
</style>