sintonia_webapp/resources/js/components/content/partials/PodcastEditor.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 {onBeforeMount, reactive, ref, watch} from "vue";
import axios from "axios";
import ConfirmDelete from "@partials/dialogs/ConfirmDelete.vue";
import {podcast_page} from "@/composables/content/podcast_page.ts";

const auth = useAuthStore();

const emit = defineEmits([
  'saveItem',
  'goBack'
])

const podcastStore = usePodcastStore();
const item = podcastStore.currentPodcast;

const { items, headers, loading, downloadEpisode, getItems } = podcast_episode_page(item.url);

const podcast_id = ref(item.id);
console.log(item)

const podcastFields = podcast(item);
console.log(podcastFields())
const { editItem } = podcast_page();

const episodes = ref([]);

const disabledSaveButton = ref(false)

const dialog = reactive({
  open: false,
  type: '',
  title: '',
  text: '',
  item: null
})

const openDialog = (type, title = '', text = '', item = null) => {
  dialog.open = true
  dialog.type = type
  dialog.title = title
  dialog.text = text
  dialog.item = item
}

const closeDialog = () => {
  dialog.open = false
}

const checkError = (field, model) => {
  if (field.required) {
    const error = field.required && (model === '' || model === null)
    disabledSaveButton.value = error
    return error
  }
  return false
}

const checkDownload = (item) => {
  if (podcast_id.value > 0) {
    // console.log(item);
    downloadEpisode(podcast_id.value, item);
  } else {
    openDialog(
        'save',
        'Salvataggio necessario',
        'Per procedere con il download dell\'episodio è necessario salvare il podcast. Confermi?',
        item
    )
  }
}

const confirmSave = (confirm, bulk, row) => {
  console.log(confirm, row)
  if (confirm) {
    save(row);
  }
  closeDialog();
}

const save = (row) => {
  console.log(row)
  // const errors
  editItem(item).then(res => {
    podcastStore.loadPodcast(res.podcast);
    podcast_id.value = res.podcast.id;
    console.log(podcast_id.value);
    //Check if row is effectively a podcast episode object using his `title` property
    if (row.title) {
      downloadEpisode(podcast_id.value, row);
    }
  });
}

watch(items, (newItems, oldItems) => {
  episodes.value = newItems;
}, {deep: true});

setInterval(() => {
  getItems(false, item.id);
}, 5000)

onBeforeMount(() => {
  getItems().then(title => podcastStore.updateField({'title': title}));
});

</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])"
            :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 }">
          <v-icon
              class="me-2 spinning"
              size="small"
              v-if="item.imported === 'PENDING'"
          >
            mdi-loading
          </v-icon>
          <v-icon
              class="me-2"
              size="small"
              v-else-if="item.imported === 'SUCCESS'"
          >
            mdi-check-outline
          </v-icon>
          <v-icon
              class="me-2 text-center"
              size="small"
              v-else-if="item.imported === 0"
              @click="checkDownload(item)"
          >
            mdi-download-box
          </v-icon>
        </template>
      </VDataTable>
    </v-col>
  </v-row>
  <v-dialog v-model="dialog.open">
    <ConfirmDelete
        v-if="dialog.type === 'save'"
        :title="dialog.title"
        :text="dialog.text"
        :bulk="false"
        :item="dialog.item"
        @confirm="confirmSave"
        @after-leave="closeDialog"
    />
  </v-dialog>
</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>