PHP Classes

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

Recommend this page to a friend!
  Classes of Nyi Nyi Lwin   S3 B2B PHP Amazon S3 File Manager   resources/js/Components/Bucket/Partials/Folder.vue   Download  
File: resources/js/Components/Bucket/Partials/Folder.vue
Role: Auxiliary data
Content type: text/plain
Description: Auxiliary data
Class: S3 B2B PHP Amazon S3 File Manager
Manage files stored in multiple Amazon S3 buckets
Author: By
Last change:
Date: 9 months ago
Size: 2,894 bytes
 

Contents

Class file image Download
<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>