Untitled

<template>
  <div class="pt-6">
    <!-- Drag and Drop Component -->
    <DragDropUpload ref="dragDropUpload" @files-added="handleFilesAdded" />

    <!-- File Cards Grid -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mt-4">
      <div v-if="files.length" v-for="(file, index) in files" :key="file.id" class="border rounded-lg p-4 shadow">
        <h3 class="font-bold text-lg">{{ file.file_name }}</h3>
        <p class="text-gray-500">Uploaded on: {{ file.created_at }}</p>
        <p class="text-gray-500">Uploaded by: {{ file.uploader }}</p>
        <div class="flex justify-between mt-4">
          <Button icon="pi pi-download" label="Download" class="bg-green-500 text-white py-1 px-2 rounded" @click="downloadFile(file)"/>
          <Button icon="pi pi-trash" label="Delete" class="bg-red-500 text-white py-1 px-2 rounded" @click="deleteFile(index)"/>
        </div>
      </div>
      <div v-else class="text-center text-gray-500">No files found</div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import DragDropUpload from '../../components/AdminPortal/DragDropUpload.vue';
import Button from 'primevue/button';
import UserService from "@/services/user.service.ts";
import ResourcesService from "@/services/resources.service.ts";

export default {
  name: 'Resources',
  components: {
    DragDropUpload,
    Button
  },
  setup() {
    const dragDropUpload = ref(null);
    const files = ref([]);

    const handleFilesAdded = (newFiles) => {
      newFiles.forEach(file => {
        UserService.uploadDocument(file, 1) // 1 for Resources
            .then(response => {
              console.log('File uploaded successfully:', response);
              getResourcesDocs(); // Refresh the list after uploading
            })
            .catch(error => {
              console.error('Error uploading file:', error);
            });
      });
    };

    const getResourcesDocs = () => {
      ResourcesService.getResourcesDocuments()
          .then(response => {
            console.log('API response:', response.data);
            files.value = response.data;
            console.log('Files array updated:', files.value);
          })
          .catch(error => {
            console.error('Error fetching resources:', error);
          });
    };

    const downloadFile = (file) => {
      // Implement file download logic
      console.log('Downloading file:', file);
    };

    const deleteFile = (index) => {
      files.value.splice(index, 1);
    };

    onMounted(() => {
      getResourcesDocs();
    });

    return {
      dragDropUpload,
      files,
      handleFilesAdded,
      downloadFile,
      deleteFile
    };
  }
};
</script>

<style>
@import 'tailwindcss/tailwind.css';
</style>