153 lines
No EOL
3.8 KiB
Vue
153 lines
No EOL
3.8 KiB
Vue
<script setup lang="ts">
|
|
import {useAuthStore} from "@/stores/auth.store.ts";
|
|
import {usePodcastStore} from "@/stores/podcast.store.ts";
|
|
import {podcast} from "@models/podcast/podcast.ts";
|
|
import {podcast_episode_page} from "@/composables/content/podcastEpisode_page.ts";
|
|
import {ref, watch} from "vue";
|
|
import axios from "axios";
|
|
|
|
const auth = useAuthStore();
|
|
|
|
const emit = defineEmits([
|
|
'saveItem'
|
|
])
|
|
|
|
const podcastStore = usePodcastStore();
|
|
const item = podcastStore.currentPodcast;
|
|
console.log(item)
|
|
|
|
const podcastFields = podcast(item);
|
|
const { items, headers, loading, downloadingEpisode, downloadEpisode } = podcast_episode_page(item.id, item.url);
|
|
|
|
const episodes = ref([]);
|
|
|
|
const checkError = (field, model) => {
|
|
if (field.required) {
|
|
// const error = field.required && (model === '' || model === null)
|
|
// // disabledSaveButton.value = error
|
|
// return error
|
|
}
|
|
return false
|
|
}
|
|
|
|
watch(items, (newItems, oldItems) => {
|
|
console.log(newItems, oldItems)
|
|
if (item.id > 0) {
|
|
axios.get('/podcast_episode', {
|
|
params: {
|
|
podcast_id: item.id
|
|
}
|
|
}).then((response) => {
|
|
newItems.forEach((element) => {
|
|
const episode = response.data.filter(imp => {
|
|
if (imp.episode_guid === element.guid) {
|
|
return true;
|
|
}
|
|
});
|
|
if (episode.length > 0) {
|
|
element.imported = (episode[0].file_id === null) ? null : episode[0].file_id;
|
|
}
|
|
});
|
|
});
|
|
}
|
|
console.log(newItems)
|
|
episodes.value = newItems;
|
|
}, {deep: true});
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<v-row no-gutters>
|
|
<v-col>
|
|
<Component
|
|
v-for="(field, key) in podcastFields()"
|
|
:is="field.component"
|
|
:label="field.label"
|
|
:value="field.value ? field.value : field.type == 'checkbox' ? true : null"
|
|
:disabled="field.disabled"
|
|
@update:modelValue="checkError(field, item[key])"
|
|
@update-property="updateProperty"
|
|
:error="checkError(field, item[key])"
|
|
rows="2"
|
|
:items="field.items"
|
|
v-model="item[key]"
|
|
item-title="title"
|
|
item-value="value"
|
|
density="compact"
|
|
hide-details="auto"
|
|
class="mb-2"
|
|
clearable
|
|
:active="true"
|
|
/>
|
|
<v-btn
|
|
color="accent"
|
|
@click="$emit('goBack')"
|
|
>Torna indietro</v-btn>
|
|
<v-btn
|
|
color="primary"
|
|
@click="save"
|
|
:disabled="disabledSaveButton"
|
|
>Salva</v-btn>
|
|
</v-col>
|
|
<v-col>
|
|
<!-- Tracks-->
|
|
<VDataTable
|
|
:headers="headers"
|
|
:items="episodes"
|
|
:loading="loading"
|
|
>
|
|
<template v-slot:item.short_description="{ item }">
|
|
{{ item.short_description }}
|
|
</template>
|
|
<template v-slot:item.imported="{ item }">
|
|
{{item.imported}}
|
|
<v-icon
|
|
class="me-2 spinning"
|
|
size="small"
|
|
v-if="item.imported === null"
|
|
>
|
|
mdi-loading
|
|
</v-icon>
|
|
<v-icon
|
|
class="me-2"
|
|
size="small"
|
|
v-else-if="item.imported > 0"
|
|
>
|
|
mdi-check-outline
|
|
</v-icon>
|
|
<v-icon
|
|
class="me-2 text-center"
|
|
size="small"
|
|
v-else
|
|
@click="downloadEpisode(item)"
|
|
>
|
|
mdi-download-box
|
|
</v-icon>
|
|
</template>
|
|
</VDataTable>
|
|
</v-col>
|
|
</v-row>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.tables > .v-col {
|
|
width: 50%;
|
|
overflow: hidden;
|
|
}
|
|
.v-list {
|
|
max-height: 77vh;
|
|
margin: 4px 0 0 4px;
|
|
border-radius: 4px;
|
|
}
|
|
.spinning {
|
|
animation: rotation 1s linear infinite;
|
|
}
|
|
@keyframes rotation {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
</style> |