123 lines
4.6 KiB
Vue
123 lines
4.6 KiB
Vue
<script setup>
|
|
import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout.vue";
|
|
import { router, Link } from "@inertiajs/vue3";
|
|
import { HomeIcon } from "@heroicons/vue/24/outline";
|
|
|
|
const { files, folder } = defineProps({
|
|
files: Object,
|
|
folder: Object,
|
|
ancestors: Array,
|
|
});
|
|
|
|
const openFolder = (file) => {
|
|
if (!file.is_folder) return;
|
|
router.visit(
|
|
route("userFiles", {
|
|
folder: file.path,
|
|
})
|
|
);
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<AuthenticatedLayout>
|
|
<nav class="flex items-center justify-between mb-2">
|
|
<ol class="inline-flex items-center">
|
|
<Link
|
|
class="border-gray-700 border px-3 py-2 rounded hover:border-sky-600"
|
|
:href="route('userFiles')"
|
|
>
|
|
<HomeIcon class="h-5 w-5" aria-hidden="true" />
|
|
</Link>
|
|
<li
|
|
v-for="(ancestor, index) of ancestors.data"
|
|
:key="ancestor.id"
|
|
class="inline-flex items-center"
|
|
>
|
|
<div class="flex items-center" v-if="ancestor.parent_id">
|
|
<div class="mx-2">➤</div>
|
|
<Link
|
|
v-if="index == ancestors.data.length - 1"
|
|
class="border-sky-600 border px-3 py-2 rounded bg-sky-600"
|
|
:href="
|
|
route('userFiles', { folder: ancestor.path })
|
|
"
|
|
>
|
|
{{ ancestor.name }}
|
|
</Link>
|
|
<Link
|
|
v-else
|
|
class="border-gray-700 border px-3 py-2 rounded hover:border-sky-600"
|
|
:href="
|
|
route('userFiles', { folder: ancestor.path })
|
|
"
|
|
>
|
|
{{ ancestor.name }}
|
|
</Link>
|
|
</div>
|
|
</li>
|
|
</ol>
|
|
</nav>
|
|
<table v-if="files.data.length" class="w-full border-separate">
|
|
<colgroup>
|
|
<col />
|
|
<col />
|
|
<col />
|
|
<col />
|
|
</colgroup>
|
|
<thead>
|
|
<tr>
|
|
<th class="p-3 rounded bg-zinc-600 rounded font-medium">
|
|
Name
|
|
</th>
|
|
<th class="p-3 rounded bg-zinc-600 rounded font-medium">
|
|
Modified
|
|
</th>
|
|
<th class="p-3 rounded bg-zinc-600 rounded font-medium">
|
|
Owner
|
|
</th>
|
|
<th class="p-3 rounded bg-zinc-600 rounded font-medium">
|
|
Size
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr
|
|
v-for="file of files.data"
|
|
:key="file.id"
|
|
@click="openFolder(file)"
|
|
>
|
|
<td
|
|
class="p-3 text-center whitespace-nowrap border-gray-700 border rounded hover:border-sky-600 hover:ring-sky-600"
|
|
>
|
|
{{ file.name }}
|
|
</td>
|
|
<td
|
|
class="p-3 text-center whitespace-nowrap border-gray-700 border rounded hover:border-sky-600 hover:ring-sky-600"
|
|
>
|
|
{{ file.updated_at }}
|
|
</td>
|
|
<td
|
|
class="p-3 text-center whitespace-nowrap border-gray-700 border rounded hover:border-sky-600 hover:ring-sky-600"
|
|
>
|
|
{{ file.owner /* get name */ }}
|
|
</td>
|
|
<td
|
|
class="p-3 text-center whitespace-nowrap border-gray-700 border rounded hover:border-sky-600 hover:ring-sky-600"
|
|
>
|
|
{{ file.size == null ? 0 : file.size }}
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<div class="h-full" v-else>
|
|
<div class="text-lg mt-1.5">
|
|
<span class="arrow">🡄</span> click here
|
|
to upload your file
|
|
</div>
|
|
<div class="flex items-center justify-center h-full text-3xl">
|
|
This folder is empty
|
|
</div>
|
|
</div>
|
|
</AuthenticatedLayout>
|
|
</template>
|