File: resources/js/Components/Bucket/Partials/Folder.vue

<script setup>
import {ExclamationCircleIcon, FolderIcon} from "@heroicons/vue/24/outline/index.js";
import OptionMenu from "@components/Bucket/Partials/OptionMenu.vue";
import {ref, defineEmits} from "vue";
import route from "ziggy-js";
import { useDropZone } from '@vueuse/core'
import { DialogTitle } from "@headlessui/vue";
import DeleteModal from "@components/Bucket/Modals/DeleteModal.vue";
import FileMoveModal from "@components/Bucket/Modals/FileMoveModal.vue";

const props = defineProps({
  folder: {
    type: Object,
    default: () => {}
  },
  bucket: {
    type: Object,
    default: () => {}
  },
  hideMenu: {
    type: Boolean,
    default: false,
  },
})

const emit = defineEmits(['deleted', 'moved'])
const dropZoneRef = ref(null)

const onDrop = (files) => {
  console.log(props.folder)
  console.log(files)
}

useDropZone(dropZoneRef, {
  onDrop,
})

const openDeleteModal = ref(false)
const openFileMoveModal = ref(false)

</script>

<template>
  <FileMoveModal
    :open="openFileMoveModal"
    :current-bucket="props.bucket.id"
    :current-path="props.folder.path"
    :current-name="props.folder.name"
    @close="openFileMoveModal = false"
    @moved="emit('moved')"
  />

  <DeleteModal
    :open="openDeleteModal"
    :delete-url="route('buckets.folders.delete', {
      bucket: props.bucket.id,
      path: props.folder.path,
    })"
    @close="openDeleteModal = false"
    @deleted="emit('deleted')"
  >
    <div class="bg-white p-4 ">
      <div class="text-center sm:text-left">
        <DialogTitle
          as="h3"
          class="text-base font-semibold leading-6 text-gray-900"
        >
          {{ $t('modals.delete_title') }}
        </DialogTitle>
        <div class="mt-3">
          <p class="text-sm text-gray-500">
            {{ $t('modals.delete_folder') }}
          </p>
        </div>
        <div class="inline-flex gap-2 mt-3">
          <ExclamationCircleIcon class="w-5 h-5 text-gray-500" />
          <p class="text-sm text-gray-500">
            {{ folder.name }}
          </p>
        </div>
      </div>
    </div>
  </DeleteModal>

  <div
    ref="dropZoneRef"
    class="flex flex-col justify-between p-3 cursor-pointer rounded-md text-gray-500 ring-1 ring-inset ring-gray-500/10 hover:shadow-md h-28"
  >
    <div class="flex justify-between">
      <div class="flex h-10 w-10 flex-none items-center justify-center rounded-md bg-teal-500">
        <FolderIcon
          class="h-6 w-6 text-white flex-none"
          aria-hidden="true"
        />
      </div>

      <div v-if="!hideMenu">
        <OptionMenu
          hide-upload
          hide-edit
          hide-view
          @delete="openDeleteModal = true"
          @move="openFileMoveModal = true"
        />
      </div>
    </div>

    <div>
      <p class="truncate">
        {{ folder.name }}
      </p>
    </div>
  </div>
</template>

<style scoped>

</style>