Skip to content

Commit 41faf1c

Browse files
webplusmultimediawebplusmultimedia
committed
fix folder returning on create one
1 parent 123d93b commit 41faf1c

File tree

17 files changed

+636
-2
lines changed

17 files changed

+636
-2
lines changed

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ You can install the package via composer:
2121
composer require webplusmultimedia/filemanager
2222
```
2323

24-
You can publish the config file and change the root :
24+
You can publish the config file and change the root directory if you want:
2525

2626
```bash
2727
php artisan vendor:publish --tag="filemanager-config"

‎resources/dist/js/Components/Filemanager/Actions/FileAction.js‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import {Danger, Success, Warning} from "./../Support/Notification";
2+
3+
/**
4+
*
5+
* @param {File[]} files
6+
* @param {Proxy} data
7+
*/
8+
export function SaveFilesAction(files, data) {
9+
if (!files.length) {
10+
Warning('Aucun fichier à transféré');
11+
return
12+
}
13+
data.resetProgress()
14+
data.$wire.uploadMultiple('photos', files, (uploadFilenames) => {
15+
data.resetProgress()
16+
if (uploadFilenames) {
17+
let folder = data.selectedFolder ? data.selectedFolder.id : null
18+
data.$wire.saveFiles(folder).then((value) => {
19+
let result = value?.result
20+
if (value && !value.error && result.files && result.files.length) {
21+
data.files.unshift(...result.files)
22+
Success(value.message)
23+
return
24+
}
25+
Danger(value?.message ?? "Erreur sur les fichiers téléchargés")
26+
})
27+
}
28+
29+
},
30+
() => {
31+
data.resetProgress()
32+
Danger("Erreur sur les fichiers téléchargés")
33+
},
34+
(e) => {
35+
data.progress = 100 - Math.ceil((e.loaded / e.total) * 100)
36+
})
37+
}
38+
/**
39+
*
40+
* @param {Proxy} data
41+
* @return void
42+
*/
43+
export async function DeleteFile(data) {
44+
const root = data.selectedFolder ? data.selectedFolder.id + '/' + data.file.filename : data.file.filename,
45+
result = await data.$wire.deleteFile(root)
46+
47+
if (!result.error) {
48+
Success(result.message)
49+
data.showImg = false
50+
data.files.splice(data.index, 1);
51+
return
52+
}
53+
Warning(result.message)
54+
}

‎resources/dist/js/Components/Filemanager/Actions/FolderAction.js‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import {Success, Warning} from "./../Support/Notification";
2+
/**
3+
*
4+
* @param {Proxy} data
5+
* @return void
6+
*/
7+
export async function SaveFolderAction(data) {
8+
const name = data.$refs.folderEdit.value
9+
if (!name) {
10+
data.removeInput()
11+
return
12+
}
13+
const result = await data.$wire.createFolder(name, data.folder.parent)
14+
if(result.error){
15+
Warning(result.message)
16+
return
17+
}
18+
data.folder.name = name
19+
data.folder.children = []
20+
data.folder.files = []
21+
data.folder.id = result.result.id
22+
Success(`Le répertoire <strong>${name}</strong> a été ajouté`)
23+
data.isNewFolder = false
24+
data.files =[]
25+
data.setFiles()
26+
}
27+
/**
28+
*
29+
* @param {Proxy} data
30+
* @return void
31+
*/
32+
export async function DeleteFolderAction(data) {
33+
const result = await data.$wire.deleteFolder(data.selectedFolder.id)
34+
if (!result.error) {
35+
await data.supportArray.deleteFolder(data.selectedFolder.parent, data.selectedFolder.id)
36+
Success(result.message)
37+
data.selectedFolder = null
38+
data.setFiles()
39+
return
40+
}
41+
Warning(result.message)
42+
}

‎resources/dist/js/Components/Filemanager/DragableFiles.js‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import {ImageSupport} from "./../Filemanager/Support/ImageSupport";
2+
import {SaveFilesAction} from "./../Filemanager/Actions/FileAction";
3+
import {DeleteFolderAction} from "../Filemanager/Actions/FolderAction";
4+
5+
export function dragableFiles() {
6+
return {
7+
progress: 100,
8+
resetProgress() {
9+
this.progress = 100
10+
},
11+
'overZone': {
12+
['@dragover.prevent.stop']() {
13+
14+
if (this.$event.target.classList.contains('dropZone')) {
15+
16+
}
17+
},
18+
['@dragenter.prevent.stop']() {
19+
this.$refs.dropzone.classList.remove('pointer-events-none')
20+
this.$refs.dropzone.classList.add('after:opacity-75', 'opacity-100', 'pointer-events-auto')
21+
},
22+
['@dragleave.prevent.stop']() {
23+
if (this.$event.target === this.$refs.dropzone) {
24+
this.$refs.dropzone.classList.remove('after:opacity-75', 'opacity-100', 'pointer-events-auto')
25+
this.$refs.dropzone.classList.add('pointer-events-none')
26+
}
27+
return false
28+
},
29+
},
30+
'dropZone': {
31+
['@drop.prevent.stop']() {
32+
if (this.$event.target.classList.contains('dropZone')) {
33+
this.$refs.dropzone.classList.remove('after:opacity-75', 'opacity-100', 'pointer-events-auto')
34+
this.$refs.dropzone.classList.add('pointer-events-none')
35+
36+
SaveFilesAction(ImageSupport().getDesireFiles(this.$event.dataTransfer.files), this.$data)
37+
}
38+
}
39+
},
40+
'deleteFolder': {
41+
async ['@click.stop']() {
42+
await DeleteFolderAction(this.$data)
43+
},
44+
['x-show']() {
45+
return this.selectedFolder && this.selectedFolder.children && !this.selectedFolder.children.length
46+
}
47+
}
48+
}
49+
}

‎resources/dist/js/Components/Filemanager/File.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
export function WbFile() {
2+
return {
3+
get title(){
4+
let dir = (this.selectedFolder?this.selectedFolder.id: '/')??'-- Nouveau répertoire --'
5+
return `.:: ${dir}`
6+
}
7+
}
8+
}

‎resources/dist/js/Components/Filemanager/Filemanager.js‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
import {Icons} from "./Icons/Icons";
2+
import {arraySupport} from "./Support/ArraySupport";
3+
import {ui} from "./functions/Ui";
4+
5+
export function Filemanager(folders) {
6+
return {
7+
folders: {children: [], files: []},
8+
files: [],
9+
getFiles() {
10+
if (!this.selectedFolder) {
11+
return this.folders.files
12+
}
13+
if (this.selectedFolder.files && this.selectedFolder.files.length) {
14+
return this.selectedFolder.files;
15+
}
16+
return []
17+
},
18+
setFiles() {
19+
if (!this.selectedFolder) {
20+
this.files = this.folders.files
21+
return
22+
}
23+
if (this.selectedFolder.files && this.selectedFolder.files.length) {
24+
this.files = this.selectedFolder.files;
25+
return
26+
}
27+
this.files = []
28+
},
29+
showFiles() {
30+
return this.files.length > 0
31+
},
32+
showZoneFiles(){
33+
return !(this.selectedFolder && !this.selectedFolder.id);
34+
},
35+
isNewFolder: false,
36+
folderEdit: null,
37+
supportArray: arraySupport(),
38+
selectedFolder: null,
39+
getTitle(folder) {
40+
return folder ? folder.name : '/'
41+
},
42+
getInput() {
43+
return `<input x-bind="editInputFolder" type="text" class="input-component" x-init="$el.focus()" x-model="folderEdit"/>`
44+
},
45+
keyId() {
46+
return Math.random().toString(36).slice(2)
47+
},
48+
async renderFolder(folder) {
49+
let isBtnAddingNewFolder = !folder || (folder && folder.id !== null)
50+
let htmlTemplate =
51+
`<div x-data="Folder(${folder ? 'folder' : null})">
52+
<div x-data="inputEditFolder" class="folder group duration-300 " :class="{ 'active' : getActive()?? null }">
53+
<div class="folder-icon" role="button" x-bind="loadChildren" >
54+
${(folder && !folder.open) ? Icons().folder : Icons().folderOpen}
55+
<span class="w-full">${isBtnAddingNewFolder ? this.getTitle(folder) : this.getInput()} </span>
56+
</div>
57+
${ui(isBtnAddingNewFolder)}
58+
</div>
59+
</div>`
60+
if (folder && folder.children && folder.children.length) {
61+
htmlTemplate += `<template x-if="renderFolder">
62+
<template x-for="(folder,index) in folder.children" :key="'-'+folder.id??'xxxxx-webX'">
63+
<div class="pl-5 pt-1" x-html="renderFolder(folder)" x-show="folder.open" x-transition></div>
64+
</template>
65+
</template>`
66+
}
67+
return htmlTemplate;
68+
},
69+
async init() {
70+
this.folders.children = folders
71+
this.supportArray.items = folders
72+
this.folders.files = await this.$wire.getFiles()
73+
this.files = this.folders.files
74+
}
75+
}
76+
}

‎resources/dist/js/Components/Filemanager/Folder.js‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
import {Info, Warning} from "./Support/Notification";
2+
3+
/**
4+
*
5+
* @param folder
6+
* @return {{addNewFolder: {"@click.prevent.stop"(): Promise<void>}, fakeFolder(): {parent: null, name: string, id: null, open: boolean}, active: boolean, _newFolder: null, getActive(): boolean, loadChildren: {"@click.prevent.stop"(): Promise<void>}, getFolders(): Promise<void>, checkOpen(): void, parentId: null}|{parent: *, name: string, id: null, open: boolean}|boolean}
7+
*/
8+
export function folder(folder) {
9+
10+
11+
return {
12+
parentId: null,
13+
active: false,
14+
async getFolders() {
15+
if (folder && folder.id && (!folder.children || !folder.files)) {
16+
folder.children = await this.$wire.getFolders(folder.id)
17+
folder.files = await this.$wire.getFiles(folder.id)
18+
}
19+
this.setFiles()
20+
},
21+
getActive() {
22+
return this.selectedFolder === folder
23+
},
24+
_newFolder: null,
25+
fakeFolder() {
26+
let parent = folder ? folder.id : null
27+
return {name: null, id: null, parent: parent, open: true, children: []}
28+
},
29+
30+
'addNewFolder': {
31+
async ['@click.prevent.stop']() {
32+
await this.getFolders()
33+
if (this.isNewFolder && this.folderEdit) {
34+
Warning("Vous ajouter déjà un répertoire")
35+
return;
36+
}
37+
if (this.isNewFolder && !this.folderEdit) {
38+
Info("Suppression edit")
39+
this.supportArray.deleteItemEditFolder()
40+
}
41+
42+
this.isNewFolder = true
43+
this.supportArray.editFolder = this.fakeFolder()
44+
this.supportArray.parentEditFolder = folder
45+
this.selectedFolder = this.supportArray.editFolder
46+
if (folder) {
47+
folder.children.unshift(this.supportArray.editFolder)
48+
} else {
49+
this.folders.children.unshift(this.supportArray.editFolder)
50+
}
51+
}
52+
},
53+
54+
'loadChildren': {
55+
async ['@click.prevent.stop']() {
56+
this.checkOpen()
57+
this.selectedFolder = folder
58+
await this.getFolders();
59+
}
60+
},
61+
checkOpen() {
62+
63+
if (folder && folder.id && this.selectedFolder === folder) {
64+
folder.children.forEach((v) => {
65+
if (v.id) {
66+
v.open = !v.open
67+
}
68+
})
69+
} else if (folder && folder.children) {
70+
folder.children.forEach((v) => {
71+
v.open = true
72+
})
73+
}
74+
}
75+
76+
77+
}
78+
}

‎resources/dist/js/Components/Filemanager/Icons/Icons.js‎

Lines changed: 28 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎resources/dist/js/Components/Filemanager/InputEditFolder.js‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import {Success, Warning} from "./Support/Notification";
2+
import {SaveFolderAction} from "./Actions/FolderAction";
3+
4+
export function inputEditFolder() {
5+
return {
6+
removeInput() {
7+
this.supportArray.deleteItemEditFolder()
8+
this.isNewFolder = false
9+
this.selectedFolder = null
10+
this.setFiles()
11+
},
12+
folderValue: null,
13+
'editInputFolder': {
14+
['x-ref']: "folderEdit",
15+
async ['@keyup.enter']() {
16+
await SaveFolderAction(this.$data)
17+
},
18+
async ['@keyup.esc']() {
19+
this.removeInput()
20+
},
21+
async ['@click.outside']() {
22+
this.removeInput()
23+
},
24+
},
25+
'validateInput': {
26+
async ['@click.prevent.stop']() {
27+
await SaveFolderAction(this.$data)
28+
}
29+
}
30+
}
31+
}

0 commit comments

Comments
 (0)