KAZ/webtransfer
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add bouton to create folder (not logic)

Browse Source
This commit is contained in:
GMrrc
2024-11-18 15:14:02 +01:00
parent 8670be9d4d
commit 46cfd49bca
6 changed files with 726 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
src/components/FileTable.vue
View File

@ -1,13 +1,55 @@
<template>
<div class="flex flex-col h-full w-full border">
<!-- Breadcrumb -->
<NcBreadcrumbs class="max-h-8 ml-3 mt-1">
<NcBreadcrumb name="Home" title="Title of the Home folder" @click="handleClickBreadcrumb(-1)">
</NcBreadcrumb>
<NcBreadcrumb v-if="getBreadcrumbParts().length > 0" v-for="(part, index) in breadcrumbParts" :key="index"
:name="part" @click="handleClickBreadcrumb(index)">
</NcBreadcrumb>
</NcBreadcrumbs>
<div class="flex flex-row mt-1 ml-3 items-start container">
<NcBreadcrumbs class="max-h-8">
<NcBreadcrumb name="Home" title="Title of the Home folder" @click="handleClickBreadcrumb(-1)">
</NcBreadcrumb>
<NcBreadcrumb v-if="getBreadcrumbParts().length > 0" v-for="(part, index) in breadcrumbParts" :key="index"
:name="part" @click="handleClickBreadcrumb(index)">
</NcBreadcrumb>
<template #actions>
<div class="flex items-center ml-2">
<button
@click="toggleAddFilePopup"
class="flex items-center space-x-2 bg-blue-100 text-blue-600 font-medium px-4 py-2 rounded-md hover:bg-blue-200 transition"
>
<Plus :size="20" />
<span>Add</span>
</button>
</div>
</template>
</NcBreadcrumbs>
</div>
<!-- Popup pour la création de fichier -->
<div v-if="isAddFilePopupVisible" class="fixed inset-0 flex items-center justify-center bg-gray-700 bg-opacity-50 z-50">
<div class="bg-NcBlack rounded-lg shadow-lg p-6 w-96">
<h2 class="text-lg font-semibold mb-4">Créer un nouveau fichier</h2>
<input
v-model="newFileName"
type="text"
placeholder="Nom du fichier"
class="w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
<div class="flex justify-end mt-4 space-x-2">
<button
@click="toggleAddFilePopup"
class="px-4 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 transition"
>
Annuler
</button>
<button
@click="createNewFile"
class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition"
>
Créer
</button>
</div>
</div>
</div>
<!-- En-tête -->
<div class="flex h-12 items-center border-b border-gray-300">
@ -66,18 +108,22 @@
import { getClient } from '@nextcloud/files/dav';
import NcBreadcrumbs from '@nextcloud/vue/dist/Components/NcBreadcrumbs.js';
import NcBreadcrumb from '@nextcloud/vue/dist/Components/NcBreadcrumb.js';
import Plus from 'vue-material-design-icons/Plus.vue'
export default {
name: 'FileTable',
components: {
NcBreadcrumbs,
NcBreadcrumb
NcBreadcrumb,
Plus
},
data() {
return {
files: [], // Liste des fichiers et dossiers récupérés
current_dir: '/',
breadcrumbParts: []
breadcrumbParts: [],
isAddFilePopupVisible: false,
newFileName: ''
};
},
async mounted() {
@ -132,6 +178,23 @@ export default {
this.current_dir = dir;
this.breadcrumbParts = this.getBreadcrumbParts();
await this.fetchFiles();
},
async createNewFile() {
if (!this.newFileName) return;
try {
const client = getClient();
const filePath = `/files/admin${this.current_dir}/${this.newFileName}`;
await client.createFile(filePath, '');
this.newFileName = '';
this.isAddFilePopupVisible = false;
await this.fetchFiles();
} catch (error) {
console.error('Erreur lors de la création du fichier :', error);
}
},
toggleAddFilePopup() {
this.isAddFilePopupVisible = !this.isAddFilePopupVisible;
if (!this.isAddFilePopupVisible) this.newFileName = '';
}
}
};

194
src/output.css
View File

@ -545,6 +545,52 @@ video {
display: none;
}
.container {
width: 100%;
}
@media (min-width: 640px) {
.container {
max-width: 640px;
}
}
@media (min-width: 768px) {
.container {
max-width: 768px;
}
}
@media (min-width: 1024px) {
.container {
max-width: 1024px;
}
}
@media (min-width: 1280px) {
.container {
max-width: 1280px;
}
}
@media (min-width: 1536px) {
.container {
max-width: 1536px;
}
}
.fixed {
position: fixed;
}
.inset-0 {
inset: 0px;
}
.z-50 {
z-index: 50;
}
.m-6 {
margin: 1.5rem;
}
@ -573,6 +619,22 @@ video {
margin-top: 0.25rem;
}
.ml-auto {
margin-left: auto;
}
.mb-4 {
margin-bottom: 1rem;
}
.mt-4 {
margin-top: 1rem;
}
.inline {
display: inline;
}
.flex {
display: flex;
}
@ -629,6 +691,10 @@ video {
width: 4rem;
}
.w-96 {
width: 24rem;
}
.transform {
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@ -645,14 +711,32 @@ video {
flex-direction: column;
}
.items-start {
align-items: flex-start;
}
.items-center {
align-items: center;
}
.justify-start {
justify-content: flex-start;
}
.justify-end {
justify-content: flex-end;
}
.justify-center {
justify-content: center;
}
.space-x-2 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-right: calc(0.5rem * var(--tw-space-x-reverse));
margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}
.rounded-lg {
border-radius: 0.5rem;
}
@ -661,6 +745,10 @@ video {
border-radius: 0.75rem;
}
.rounded-md {
border-radius: 0.375rem;
}
.border {
border-width: 1px;
}
@ -687,10 +775,47 @@ video {
background-color: rgb(0 0 0 / 0.8);
}
.bg-blue-100 {
--tw-bg-opacity: 1;
background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
}
.bg-NcBlue\/20 {
background-color: rgb(0 114 195 / 0.2);
}
.bg-blue-600 {
--tw-bg-opacity: 1;
background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
}
.bg-gray-200 {
--tw-bg-opacity: 1;
background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}
.bg-gray-700 {
--tw-bg-opacity: 1;
background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
}
.bg-white {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.bg-opacity-50 {
--tw-bg-opacity: 0.5;
}
.p-4 {
padding: 1rem;
}
.p-6 {
padding: 1.5rem;
}
.px-4 {
padding-left: 1rem;
padding-right: 1rem;
@ -701,10 +826,19 @@ video {
padding-bottom: 0.5rem;
}
.text-lg {
font-size: 1.125rem;
line-height: 1.75rem;
}
.font-semibold {
font-weight: 600;
}
.font-medium {
font-weight: 500;
}
.text-NcBlue {
--tw-text-opacity: 1;
color: rgb(0 114 195 / var(--tw-text-opacity, 1));
@ -715,10 +849,39 @@ video {
color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.text-blue-600 {
--tw-text-opacity: 1;
color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}
.text-gray-700 {
--tw-text-opacity: 1;
color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
.text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.shadow-lg {
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.filter {
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.transition {
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.last\:border-b-0:last-child {
border-bottom-width: 0px;
}
@ -726,4 +889,35 @@ video {
.hover\:bg-NcGray:hover {
--tw-bg-opacity: 1;
background-color: rgb(33 33 33 / var(--tw-bg-opacity, 1));
}
.hover\:bg-blue-200:hover {
--tw-bg-opacity: 1;
background-color: rgb(191 219 254 / var(--tw-bg-opacity, 1));
}
.hover\:bg-blue-700:hover {
--tw-bg-opacity: 1;
background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1));
}
.hover\:bg-gray-300:hover {
--tw-bg-opacity: 1;
background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
}
.focus\:outline-none:focus {
outline: 2px solid transparent;
outline-offset: 2px;
}
.focus\:ring-2:focus {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring-blue-500:focus {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1));
}