myCRM/assets/js/components/GitCommitList.vue

<template>
  <div class="git-commit-list">
    <DataTable
      :value="commits"
      :loading="loading"
      paginator
      :rows="20"
      :rowsPerPageOptions="[10, 20, 50, 100]"
      :total-records="commits.length"
      responsive-layout="scroll"
      striped-rows
      class="p-datatable-sm"
    >
      <template #empty>
        <div class="text-center py-4 text-500">
          Keine Commits gefunden
        </div>
      </template>

      <Column field="shortHash" header="Hash" style="width: 100px">
        <template #body="{ data }">
          <code class="text-sm">{{ data.shortHash }}</code>
        </template>
      </Column>

      <Column field="subject" header="Nachricht">
        <template #body="{ data }">
          <div class="font-medium">{{ data.subject }}</div>
          <div v-if="data.body" class="text-sm text-500 mt-1 whitespace-pre-wrap">
            {{ data.body }}
          </div>
        </template>
      </Column>

      <Column field="author" header="Autor" style="width: 200px">
        <template #body="{ data }">
          <div class="flex flex-col gap-1">
            <span class="font-medium">{{ data.author }}</span>
            <span class="text-sm text-500">{{ data.email }}</span>
          </div>
        </template>
      </Column>

      <Column field="date" header="Datum" style="width: 180px">
        <template #body="{ data }">
          {{ formatDate(data.date) }}
        </template>
      </Column>
    </DataTable>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import DataTable from 'primevue/datatable'
import Column from 'primevue/column'
import { useToast } from 'primevue/usetoast'

const props = defineProps({
  repositoryId: {
    type: Number,
    required: true
  },
  branch: {
    type: String,
    default: 'main'
  },
  limit: {
    type: Number,
    default: 100
  }
})

const toast = useToast()
const commits = ref([])
const loading = ref(false)

onMounted(() => {
  loadCommits()
})

watch(() => [props.repositoryId, props.branch], () => {
  loadCommits()
})

async function loadCommits() {
  loading.value = true

  try {
    const url = `/api/git-repos/${props.repositoryId}/commits?branch=${props.branch}&limit=${props.limit}`
    const response = await fetch(url)

    if (!response.ok) {
      const error = await response.json()
      throw new Error(error.error || 'Fehler beim Laden der Commits')
    }

    const data = await response.json()
    commits.value = data.commits || []
  } catch (error) {
    console.error('Error loading commits:', error)
    toast.add({
      severity: 'error',
      summary: 'Fehler',
      detail: error.message || 'Commits konnten nicht geladen werden',
      life: 3000
    })
    commits.value = []
  } finally {
    loading.value = false
  }
}

function formatDate(dateString) {
  if (!dateString) return ''
  const date = new Date(dateString)
  return date.toLocaleString('de-DE', {
    day: '2-digit',
    month: '2-digit',
    year: 'numeric',
    hour: '2-digit',
    minute: '2-digit'
  })
}

defineExpose({
  loadCommits
})
</script>

<style scoped>
.git-commit-list {
  width: 100%;
}

code {
  background-color: var(--surface-100);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'Courier New', monospace;
}
</style>