video-maker/frontend/src/views/main/Progress.vue

<script setup lang="ts">
import { useMainStore } from "@/stores/main";
import { storeToRefs } from "pinia";
import { onMounted } from "vue";
import { useI18n } from "vue-i18n";

const { t } = useI18n();
const mainStore = useMainStore();
const mainStoreRef = storeToRefs(mainStore);
const videos = mainStoreRef.readVideos;
console.log('videos',videos);

const headers = [
  {
    title: t("title"),
    sortable: true,
    key: "title",
    align: "left",
  },
  {
    title: t("state"),
    sortable: true,
    key: "progress_state",
    align: "left",
  },
  {
    title: t("download"),
    key: "id",
  },
];

onMounted(async () => {
  await mainStore.actionGetVideos();
});
</script>

<template>
  <div>
    <v-toolbar light>
      <v-toolbar-title>
        <h3>{{ t("progress") }}</h3>
      </v-toolbar-title>
    </v-toolbar>
    <v-data-table :headers="headers" :items="videos">
      <template v-slot:item.id="{ item }">
        <v-btn
          flat
          :to="{
            name: 'main-admin-users-edit',
            params: { id: item.columns.id },
          }"
          :disabled="item.raw.progress_state !== 'completed'"
        >
         {{ item.progress_state }}
          <v-icon icon="file_download" />
        </v-btn>
      </template>
    </v-data-table>
  </div>
</template>

<style>
.v-data-table-footer {
  margin-top: 10px;
}
</style>