AnalysisList.vue

<script setup lang="ts">
import { computed } from 'vue'
import type { Analysis } from '../composables/useFetchAnalysis';
const router = useRouter()
const { csrfToken } = await useCsrfToken()
const { data: analyses, refresh } = await useFetch<Analysis[]>("/api/analysis/");

const toEdit: Ref<number | null> = ref(null)
const newTitle: Ref<string | null> = ref(null)
const sanitizedAnalyses = computed(() => {
  return analyses !== null ? analyses.value?.map(a => {

    const createTimeDate = new Date(a.create_time)

    return {
      ...a,
      create_time: createTimeDate.toLocaleString()
    }
  }) ?? [] : []
})

async function deleteAnalysis(analysisId: number) {
  if (csrfToken.value) {
    await useFetch<null>(`/api/analysis/${analysisId}`,
      {
        method: "DELETE",
        headers: [["X-CSRFToken", csrfToken.value]]
      }
    )
    refresh()
  }
}


function editionMode(analysisId: number, name: string) {
  toEdit.value = analysisId
  newTitle.value = name
}
async function editAnalysis(analysisId: number) {
  if (csrfToken.value) {
    await useFetch<null>(`/api/analysis/${analysisId}`,
      {
        method: "PUT",
        headers: [["X-CSRFToken", csrfToken.value]],
        body: {
          name: newTitle.value
        },
        onResponse() {
          refresh().finally(() => {
            toEdit.value = null
            newTitle.value = null
          })
        },
      }
    )


  }
}
function cancelEdit() {
  toEdit.value = null
  newTitle.value = null
}
function goToAnalysis(analysisId: number) {
  router.push(`/analyses/${analysisId}/systems`)
}

</script>
<template>
  <v-card flat>
    <v-card-title>Analyses</v-card-title>
    <v-card-text v-if="sanitizedAnalyses !== null">
      <!-- <template v-for="analysis, index in sanitizedAnalyses" :key="analysis.id"> -->
      <v-data-iterator :items="sanitizedAnalyses" :items-per-page="8">

        <template #default="{ items }">
          <template v-for="analysis, index in items" :key="analysis.raw.id">
            <v-list-item :subtitle="analysis.raw.create_time" lines="two">
              <template #title>
                <template v-if="toEdit == analysis.raw.id">
                  <v-text-field v-model="newTitle" variant="underlined">

                    <template #append>
                      <div class="d-flex d-flex-row justify-start align-center">
                        <v-btn color="success" size="x-small" variant="tonal" icon="mdi-check" class="ma-1"
                          @click.stop.prevent="editAnalysis(analysis.raw.id)"></v-btn>
                        <v-btn color="warning" size="x-small" variant="tonal" icon="mdi-cancel" class="ma-1"
                          @click.stop.prevent="cancelEdit()"></v-btn>
                      </div>
                    </template>
                  </v-text-field>
                </template>
                <span v-else>
                  {{ analysis.raw.name }}

                </span>
              </template>
              <template #prepend>
                <v-avatar v-if="analysis.raw.status === 'done'" color="primary">
                  {{ index + 1 }}
                </v-avatar>
                <v-avatar v-else>
                  <AnalysisState :state="analysis.raw.status"></AnalysisState>
                </v-avatar>

              </template>
              <template v-if="toEdit != analysis.raw.id" #append>
                <div class="d-flex flex-row justify-end align-center">
                  <v-btn variant="text" size="small" icon="md:edit"
                    @click.stop.prevent="editionMode(analysis.raw.id, analysis.raw.name)"></v-btn>
                  <v-menu>
                    <template #activator="{ props }">
                      <v-btn icon variant="text" size="small" v-bind="props" @click.stop.prevent>
                        <v-icon>mdi-dots-vertical</v-icon>
                      </v-btn>


                      <!-- <v-card>
                      <pre>{{ props }}</pre>
                    </v-card> -->
                    </template>

                    <v-list>
                      <v-list-item @click="deleteAnalysis(analysis.raw.id)" color="error">
                        <template #title>
                          <span class="text-error">Delete analysis</span>
                        </template>

                      </v-list-item>
                    </v-list>
                  </v-menu>
                  <v-divider vertical inset class="mx-1"></v-divider>
                  <v-btn variant="text" icon @click="goToAnalysis(analysis.raw.id)"><v-icon
                      size="large">md:navigate_next</v-icon></v-btn>
                </div>
              </template>
            </v-list-item>
            <v-divider inset v-if="index < items.length - 1"></v-divider>
          </template>
          <!-- <template></template> -->
        </template>
        <template v-slot:footer="{ page, pageCount, prevPage, nextPage }">
          <div class="d-flex align-center justify-center pa-4">
            <v-btn :disabled="page === 1" icon="mdi-arrow-left" density="comfortable" variant="tonal" rounded
              @click="prevPage"></v-btn>

            <div class="mx-2 text-caption">
              Page {{ page }} of {{ pageCount }}
            </div>

            <v-btn :disabled="page >= pageCount" icon="mdi-arrow-right" density="comfortable" variant="tonal" rounded
              @click="nextPage"></v-btn>
          </div>
        </template>
      </v-data-iterator>
    </v-card-text>
  </v-card>
</template>