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

Merge branch 'dev' of https://github.com/Pl4yep2on/webtransfer into dev

Browse Source
This commit is contained in:
Alexandre_BRAVO 2024-12-12 15:11:55 +01:00
commit fad57eaa18
1 changed files with 62 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

112
src/components/WebContentViewer.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div class="flex flex-col h-full w-full border"> <div class="flex flex-col h-full w-full border">
<!-- Breadcrumb --> <!-- Breadcrumb -->
<div class="flex flex-row mt-1 ml-3 items-start container"> <div class="flex flex-row mt-1 items-start container">
<NcBreadcrumbs class="max-h-8"> <NcBreadcrumbs class="max-h-8">
<NcBreadcrumb name="Home" title="Title of the Home folder" @click="handleClickBreadcrumb(-1)"> <NcBreadcrumb name="Home" title="Title of the Home folder" @click="handleClickBreadcrumb(-1)">
</NcBreadcrumb> </NcBreadcrumb>
@ -12,61 +12,69 @@
</div> </div>
<div class="flex h-12 items-center border-b border-gray-300"> <div class="flex h-12 items-center border-b border-gray-300">
<div class="w-5/6 px-4 py-2 text-gray-500 font-semibold border-r border-gray-300">{{ translate('name') }} <div @click.stop class="flex items-center cursor-pointer">
<input type="checkbox" id="checkbox-file"
class="NIQUE TA MERE SA CHANGE RIEN PARCE QUE HTML/CSS C DE LA MERDE"
@change="handleCheckboxChange(file, $event)" :checked="isChecked(file)" />
</div> </div>
<div class="ml-2 w-5/6 px-4 py-2 text-gray-500 font-semibold border-r border-gray-300">{{
translate('name')}}</div>
<div class="w-1/6 px-4 py-2 text-gray-500 font-semibold">{{ translate('size') }}</div> <div class="w-1/6 px-4 py-2 text-gray-500 font-semibold">{{ translate('size') }}</div>
</div> </div>
<!-- Archive depliee --> <!-- Archive depliee -->
<div v-if="!isLoading && zipContent.length !== 0" class="overflow-y-auto h-full"> <div v-if="!isLoading && zipContent.length !== 0" class="overflow-y-auto h-full">
<div v-for="(file, index) in sortedFiles" :key="file.fullPath" class="flex flex-col"> <div v-for="(file, index) in sortedFiles" :key="file.fullPath" class="flex flex-col">
<div class="flex h-16 dark:hover:bg-NcGray hover:bg-NcWhite items-center pl-4 cursor-pointer rounded-lg border-b last:border-b-0 border-gray-300" <div class="flex flex-row w-full gap-2">
@click="toggleFolder(file)" v-if="file.isDirectory && isVisible(file)" draggable="true" @dragstart="onDragStart(file)" @dragend="onDragEnd">
<div @click.stop class="flex items-center">
<input type="checkbox" id="checkbox-file"
class="form-checkbox h-5 w-5 text-blue-600 transition duration-150 ease-in-out cursor-pointer"
@change="handleCheckboxChange(file, $event)" :checked="isChecked(file)">
</div>
<div class="w-5/6 flex items-center py-2 border-r border-gray-300 cursor-pointer">
<div class="w-12 h-12 flex items-center justify-center cursor-pointer">
<template>
<svg fill="currentColor" viewBox="0 0 24 24" class="text-NcBlue w-10 h-10 ">
<path
d="M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z">
</path>
</svg>
</template>
</div>
<div class="w-4/6 flex items-center py-2 border-r border-gray-300 cursor-pointer">
<span class="ml-2 truncate cursor-pointer">{{ file.name }}</span>
</div>
</div>
<div class="w-1/6 px-4 py-2 cursor-pointer">-</div>
</div>
<div class="flex h-16 dark:hover:bg-NcGray hover:bg-NcWhite items-center pl-4 cursor-pointer rounded-lg border-b last:border-b-0 border-gray-300" <div v-if="isVisible(file)" @click.stop class="flex items-center cursor-pointer">
v-else-if="isVisible(file)" draggable="true" @dragstart="onDragStart(file, $event)">
<div class="flex items-center">
<input type="checkbox" id="checkbox-file" <input type="checkbox" id="checkbox-file"
class="form-checkbox h-5 w-5 text-blue-600 transition duration-150 ease-in-out cursor-pointer" class="NIQUE TA MERE SA CHANGE RIEN PARCE QUE HTML/CSS C DE LA MERDE"
@change="handleCheckboxChange(file, $event)" :checked="isChecked(file)"> @change="handleCheckboxChange(file, $event)" :checked="isChecked(file)" />
</div> </div>
<template>
<div class="flex items-center justify-center cursor-pointer"> <div class="flex w-full h-16 dark:hover:bg-NcGray hover:bg-NcWhite items-center pl-4 cursor-pointer rounded-lg border-b last:border-b-0 border-gray-300"
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" @click="toggleFolder(file)" v-if="file.isDirectory && isVisible(file)" draggable="true"
class="w-10 h-10" @dragstart="onDragStart(file)" @dragend="onDragEnd">
style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2">
<path <div class="w-5/6 flex items-center py-2 border-r border-gray-300 cursor-pointer">
d="M6 22c-.55 0-1.021-.196-1.412-.587A1.927 1.927 0 0 1 4 20V4c0-.55.196-1.021.588-1.413A1.926 1.926 0 0 1 6 2h8l6 6v12a1.93 1.93 0 0 1-.587 1.413A1.93 1.93 0 0 1 18 22H6Z" <div class="w-12 h-12 flex items-center justify-center cursor-pointer">
style="fill:#969696;fill-rule:nonzero" transform="matrix(.7 0 0 .7 -.43 -.388)" /> <template>
</svg> <svg fill="currentColor" viewBox="0 0 24 24" class="text-NcBlue w-10 h-10 ">
<path
d="M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z">
</path>
</svg>
</template>
</div>
<div class="w-4/6 flex items-center py-2 border-r border-gray-300 cursor-pointer">
<span class="ml-2 truncate cursor-pointer">{{ file.name }}</span>
</div>
</div> </div>
</template> <div class="w-1/6 px-4 py-2 cursor-pointer">-</div>
<div class="w-5/6 flex items-center px-4 py-2 cursor-pointer">
<div class="truncate max-sm:max-w-32 max-w-96 cursor-pointer">{{ file.name }}</div>
</div> </div>
<div class="w-1/6 py-2 cursor-pointer">
{{ formatFileSize(file.size) }}
<div class="flex h-16 w-full dark:hover:bg-NcGray hover:bg-NcWhite items-center pl-4 cursor-pointer rounded-lg border-b last:border-b-0 border-gray-300"
v-else-if="isVisible(file)" draggable="true" @dragstart="onDragStart(file, $event)">
<template>
<div class="flex items-center justify-center cursor-pointer">
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xml:space="preserve"
class="w-10 h-10"
style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2">
<path
d="M6 22c-.55 0-1.021-.196-1.412-.587A1.927 1.927 0 0 1 4 20V4c0-.55.196-1.021.588-1.413A1.926 1.926 0 0 1 6 2h8l6 6v12a1.93 1.93 0 0 1-.587 1.413A1.93 1.93 0 0 1 18 22H6Z"
style="fill:#969696;fill-rule:nonzero"
transform="matrix(.7 0 0 .7 -.43 -.388)" />
</svg>
</div>
</template>
<div class="w-5/6 flex items-center px-4 py-2 cursor-pointer">
<div class="truncate max-sm:max-w-32 max-w-96 cursor-pointer">{{ file.name }}</div>
</div>
<div class="w-1/6 py-2 cursor-pointer">
{{ formatFileSize(file.size) }}
</div>
</div> </div>
</div> </div>
</div> </div>
@ -91,7 +99,7 @@ import { ref } from 'vue';
export default { export default {
name: 'WebContentViewer', name: 'WebContentViewer',
components:{ components: {
NcBreadcrumbs, NcBreadcrumbs,
NcBreadcrumb NcBreadcrumb
}, },
@ -274,7 +282,7 @@ export default {
const currentState = this.folderMap[file.fullPath]; const currentState = this.folderMap[file.fullPath];
const parentPath = file.parentPath; const parentPath = file.parentPath;
if(!currentState) { if (!currentState) {
this.currentDir = file.fullPath; this.currentDir = file.fullPath;
} }
else { else {
@ -282,7 +290,7 @@ export default {
} }
this.$set(this.folderMap, file.fullPath, !currentState); this.$set(this.folderMap, file.fullPath, !currentState);
if(parentPath !== '') { if (parentPath !== '') {
const parentState = this.folderMap[parentPath]; const parentState = this.folderMap[parentPath];
this.$set(this.folderMap, parentPath, !parentState); this.$set(this.folderMap, parentPath, !parentState);
} }
@ -346,12 +354,12 @@ export default {
} }
} }
}, },
isVisible(file){ isVisible(file) {
let parentPath = file.parentPath; let parentPath = file.parentPath;
if(this.currentDir === parentPath){ if (this.currentDir === parentPath) {
return true; return true;
} }
else{ else {
return false; return false;
} }
}, },
@ -374,8 +382,8 @@ export default {
this.currentDir = dir; this.currentDir = dir;
this.breadcrumbParts = this.getBreadcrumbParts(); this.breadcrumbParts = this.getBreadcrumbParts();
let file = { let file = {
fullPath : dir, fullPath: dir,
parentPath: this.generateCrumbHref(index -1), parentPath: this.generateCrumbHref(index - 1),
isDirectory: true, isDirectory: true,
}; };