control/control-ui/src/components/params/ParamsTableCard.vue

<script setup lang="ts">
import type { InitialCondition, Params } from '@/models.ts'

interface CreateForm {
  rel: number
  rel_c: number
  le: number
  sc: number
  pe: number
  ma: number
  initial_condition_id: number | null
  time: number
}

defineProps<{
  items: Params[]
  loading: boolean
  selectedId: number | null
  createForm: CreateForm
  initialConditions: InitialCondition[]
  saving: boolean
  launchingId: number | null
  page: number
  totalPages: number
  totalCount: number
  pageStart: number
  pageEnd: number
}>()

defineEmits<{
  create: []
  select: [item: Params]
  launch: [item: Params]
  goToPage: [page: number]
}>()
</script>

<template>
  <div class="card shadow-sm">
    <div class="card-body p-0">
      <div v-if="loading" class="p-4 text-center text-muted">Загрузка...</div>
      <div v-else class="table-responsive">
        <table class="table table-sm table-hover align-middle mb-0">
          <thead class="table-light">
            <tr>
              <th>id</th>
              <th>rel</th>
              <th>rel_c</th>
              <th>le</th>
              <th>sc</th>
              <th>pe</th>
              <th>ma</th>
              <th>Initial</th>
              <th>time</th>
              <th>folder_path</th>
              <th class="text-end">Действия</th>
            </tr>
          </thead>
          <tbody>
            <tr class="table-success">
              <td class="fw-semibold text-success">+</td>
              <td>
                <input v-model.number="createForm.rel" type="number" step="any" class="form-control form-control-sm" placeholder="Rel" />
              </td>
              <td>
                <input v-model.number="createForm.rel_c" type="number" step="any" class="form-control form-control-sm" placeholder="RelC" />
              </td>
              <td>
                <input v-model.number="createForm.le" type="number" step="any" class="form-control form-control-sm" placeholder="Le" />
              </td>
              <td>
                <input v-model.number="createForm.sc" type="number" step="any" class="form-control form-control-sm" placeholder="Sc" />
              </td>
              <td>
                <input v-model.number="createForm.pe" type="number" step="any" class="form-control form-control-sm" placeholder="Pe" />
              </td>
              <td>
                <input v-model.number="createForm.ma" type="number" step="any" class="form-control form-control-sm" placeholder="Ma" />
              </td>
              <td>
                <select v-model="createForm.initial_condition_id" class="form-select form-select-sm">
                  <option :value="null">—</option>
                  <option v-for="condition in initialConditions" :key="condition.ID" :value="condition.ID">
                    {{ condition.name || `#${condition.ID}` }}
                  </option>
                </select>
              </td>
              <td>
                <input v-model.number="createForm.time" type="number" step="any" class="form-control form-control-sm" placeholder="Time" />
              </td>
              <td class="text-muted small">new</td>
              <td class="text-end">
                <button class="btn btn-sm btn-success" type="button" @click="$emit('create')" :disabled="saving">
                  {{ saving ? 'Сохранение...' : 'Добавить' }}
                </button>
              </td>
            </tr>
            <tr v-if="items.length === 0">
              <td colspan="11" class="text-center text-muted py-4">Записи не найдены</td>
            </tr>
            <tr
              v-for="item in items"
              :key="item.id"
              :class="{ 'table-primary': item.id === selectedId }"
            >
              <td class="fw-semibold">{{ item.id }}</td>
              <td>{{ item.rel }}</td>
              <td>{{ item.rel_c }}</td>
              <td>{{ item.le }}</td>
              <td>{{ item.sc }}</td>
              <td>{{ item.pe }}</td>
              <td>{{ item.ma }}</td>
              <td class="text-truncate" style="max-width: 180px">
                {{ item.initial_condition?.name || item.initial_condition?.file_path || '—' }}
              </td>
              <td>{{ item.time }}</td>
              <td class="text-truncate" style="max-width: 220px">{{ item.folder_path || '—' }}</td>
              <td class="text-end">
                <div class="btn-group btn-group-sm" role="group">
                  <button class="btn btn-outline-primary" type="button" @click="$emit('select', item)">Редактировать</button>
                  <button class="btn btn-success" type="button" @click="$emit('launch', item)" :disabled="launchingId === item.id">
                    {{ launchingId === item.id ? 'Запуск...' : 'Запустить' }}
                  </button>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="d-flex flex-wrap justify-content-between align-items-center gap-2 p-3 border-top">
        <div class="text-muted small">Показано {{ pageStart }}-{{ pageEnd }} из {{ totalCount }}</div>
        <div class="btn-group btn-group-sm" role="group" aria-label="Pagination">
          <button class="btn btn-outline-secondary" type="button" @click="$emit('goToPage', page - 1)" :disabled="page <= 1">Назад</button>
          <button class="btn btn-outline-secondary" type="button" disabled>{{ page }} / {{ totalPages }}</button>
          <button class="btn btn-outline-secondary" type="button" @click="$emit('goToPage', page + 1)" :disabled="page >= totalPages">Вперёд</button>
        </div>
      </div>
    </div>
  </div>
</template>