FEDEO/frontend/components/EntityTable.vue

<script setup>
  const getShowRoute = (entityType, id) => entityType === "tasks" ? `/tasks/show/${id}` : `/standardEntity/${entityType}/show/${id}`

  defineShortcuts({
    /*'/': () => {
      //console.log(searchinput)
      //searchinput.value.focus()
      document.getElementById("searchinput").focus()
    },*/
    'Enter': {
      usingInput: true,
      handler: () => {
        router.push(getShowRoute(props.type, props.rows[selectedItem.value].id))
      }
    },
    'arrowdown': () => {
      if(selectedItem.value < props.rows.length - 1) {
        selectedItem.value += 1
      } else {
        selectedItem.value = 0
      }
    },
    'arrowup': () => {
      if(selectedItem.value === 0) {
        selectedItem.value = props.rows.length - 1
      } else {
        selectedItem.value -= 1
      }
    }
  })
  const props = defineProps({
    rows: {
      type: Array,
      required: true,
      default: []
    },
    columns: {
      type: Array,
      required: true,
    },
    type: {
      type: String,
      required: true,
    },
    loading: {
      type: Boolean,
      required: true,
      default: false
    }
  })

  const emit = defineEmits(["sort"]);

  const dataStore = useDataStore()

  const router = useRouter()

  const dataType = dataStore.dataTypes[props.type]

  const selectedItem = ref(0)
  const sorting = ref([{
    id: dataType.sortColumn || "date",
    desc: true
  }])
  const normalizedColumns = computed(() => normalizeTableColumns(props.columns))
  const truncateValue = (value, maxLength) => {
    if (value === null || value === undefined || value === '') {
      return '\u00A0'
    }

    const stringValue = String(value)
    if (!maxLength || stringValue.length <= maxLength) {
      return stringValue
    }

    return `${stringValue.substring(0, maxLength)}...`
  }
  const getColumnDisplayValue = (column, row) => {
    const value = row[column.key]
    if (column.displayFunction) return column.displayFunction(value, row)
    return value
  }
  const handleSortChange = (value) => {
    const nextSort = Array.isArray(value) ? value[0] : undefined

    if (!nextSort?.id) {
      return
    }

    emit('sort', {
      sort_column: nextSort.id,
      sort_direction: nextSort.desc ? 'desc' : 'asc'
    })
  }
  const handleSelect = (row) => {
    router.push(getShowRoute(props.type, row.original.id))
  }

</script>

<template>
  <UTable
      :loading="props.loading"
      sort-mode="manual"
      v-model:sorting="sorting"
      @update:sorting="handleSortChange"
      v-if="dataType && columns"
      :data="props.rows"
      :columns="normalizedColumns"
      class="w-full"
      :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
      :on-select="handleSelect"
      :empty="`Keine ${dataType.label} anzuzeigen`"
  >
    <template #name-cell="{ row }">
      <span
          v-if="row.original.id === props.rows[selectedItem]?.id"
          class="block truncate text-primary-500 font-bold"
      >
        <UTooltip :text="row.original.name">
          <span class="block truncate">
            {{ truncateValue(row.original.name, dataType.templateColumns.find(i => i.key === "name")?.maxLength) }}
          </span>
        </UTooltip>      </span>
      <span v-else class="block truncate">
        <UTooltip :text="row.original.name">
          <span class="block truncate">
            {{ truncateValue(row.original.name, dataType.templateColumns.find(i => i.key === "name")?.maxLength) }}
          </span>
        </UTooltip>
      </span>
    </template>
    <template #fullName-cell="{ row }">
      <span
          v-if="row.original.id === props.rows[selectedItem]?.id"
          class="block truncate text-primary-500 font-bold">{{ row.original.fullName }}
      </span>
      <span v-else class="block truncate">
        {{ row.original.fullName }}
      </span>
    </template>
    <template #licensePlate-cell="{ row }">
      <span
          v-if="row.original.id === props.rows[selectedItem]?.id"
          class="block truncate text-primary-500 font-bold">{{ row.original.licensePlate }}
      </span>
      <span v-else class="block truncate">
        {{ row.original.licensePlate }}
      </span>
    </template>
    <template
        v-for="column in dataType.templateColumns.filter(i => i.key !== 'name' && i.key !== 'fullName' && i.key !== 'licensePlate' && !i.disabledInTable)"
        v-slot:[`${column.key}-cell`]="{ row }">
      <component v-if="column.component" :is="column.component" :row="row.original"></component>
      <span v-else-if="row.original[column.key]" class="block truncate">
        <UTooltip :text="String(getColumnDisplayValue(column, row.original))">
          <span class="block truncate">
            {{ `${truncateValue(getColumnDisplayValue(column, row.original), column.maxLength)}${column.unit ? ` ${column.unit}` : ''}` }}
          </span>
        </UTooltip>
      </span>

    </template>
  </UTable>
</template>

<style scoped>

</style>