nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-05 18:23:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

split code to components, add arrow functions

Browse Source
This commit is contained in:
Miloš Holba
2020-08-15 17:41:46 +02:00
parent 8387f56048
commit ba315014fa
11 changed files with 1768 additions and 1451 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
public/mix-manifest.json
View File

@@ -1,7 +1,19 @@
{
"/js/main.js": "/js/main.js",
"/css/app.css": "/css/app.css",
"/js/main.f400fdfd9d8614e0b28f.hot-update.js": "/js/main.f400fdfd9d8614e0b28f.hot-update.js",
"/js/main.6f284aa3a72d16ce7184.hot-update.js": "/js/main.6f284aa3a72d16ce7184.hot-update.js",
"/js/main.abf30b7258d473341c31.hot-update.js": "/js/main.abf30b7258d473341c31.hot-update.js"
"/js/main.565d4389ee843a89c58e.hot-update.js": "/js/main.565d4389ee843a89c58e.hot-update.js",
"/js/main.2a7a8c5f338bf56d3c85.hot-update.js": "/js/main.2a7a8c5f338bf56d3c85.hot-update.js",
"/js/main.54c4df5b44d30d2d75cf.hot-update.js": "/js/main.54c4df5b44d30d2d75cf.hot-update.js",
"/js/main.52c12c9d276e65d0ae5f.hot-update.js": "/js/main.52c12c9d276e65d0ae5f.hot-update.js",
"/js/main.2c56df733ffb4dd5dc40.hot-update.js": "/js/main.2c56df733ffb4dd5dc40.hot-update.js",
"/js/main.c71f38e533847d460930.hot-update.js": "/js/main.c71f38e533847d460930.hot-update.js",
"/js/main.f5acca59a222131c3cba.hot-update.js": "/js/main.f5acca59a222131c3cba.hot-update.js",
"/js/main.e3e6195a4b3bb271fe26.hot-update.js": "/js/main.e3e6195a4b3bb271fe26.hot-update.js",
"/js/main.1b03d51b15dfd56be648.hot-update.js": "/js/main.1b03d51b15dfd56be648.hot-update.js",
"/js/main.5505a15e90a8468b452f.hot-update.js": "/js/main.5505a15e90a8468b452f.hot-update.js",
"/js/main.5817ccfe47cf82bfa129.hot-update.js": "/js/main.5817ccfe47cf82bfa129.hot-update.js",
"/js/main.a34679fea419709a4a33.hot-update.js": "/js/main.a34679fea419709a4a33.hot-update.js",
"/js/main.3ad171a864e7c390e890.hot-update.js": "/js/main.3ad171a864e7c390e890.hot-update.js",
"/js/main.51a08b81d7efc66a7215.hot-update.js": "/js/main.51a08b81d7efc66a7215.hot-update.js",
"/js/main.ffff7d5846e119bd9af1.hot-update.js": "/js/main.ffff7d5846e119bd9af1.hot-update.js"
}

663
resources/js/components/FilesView/ContextMenu.vue
View File

@@ -1,297 +1,339 @@
<template>
<div
:style="{ top: positionY + 'px', left: positionX + 'px' }"
@click="closeAndResetContextMenu"
class="contextmenu"
v-show="isVisible"
ref="contextmenu"
>
<!--ContextMenu for trash location-->
<div>
<div
v-if="
$isThisLocation(['trash', 'trash-root']) && $checkPermission('master')
"
id="menu-list"
class="menu-options"
class="contextmenu filePreviewFixed"
v-if="showFromPreview"
ref="contextmenu"
:style="{ top: positionY + 'px', left: positionX + 'px' }"
>
<ul class="menu-option-group">
<li
class="menu-option"
@click="$store.dispatch('restoreItem', item)"
v-if="item"
>
<div class="icon">
<life-buoy-icon size="17"></life-buoy-icon>
</div>
<div class="text-label">
{{ $t("context_menu.restore") }}
</div>
</li>
<li class="menu-option" @click="deleteItem" v-if="item">
<div class="icon">
<trash-2-icon size="17"></trash-2-icon>
</div>
<div class="text-label">
{{ $t("context_menu.delete") }}
</div>
</li>
<li class="menu-option" @click="$store.dispatch('emptyTrash')">
<div class="icon">
<trash-icon size="17"></trash-icon>
</div>
<div class="text-label">
{{ $t("context_menu.empty_trash") }}
</div>
</li>
</ul>
<ul class="menu-option-group" v-if="item">
<li class="menu-option" @click="ItemDetail">
<div class="icon">
<eye-icon size="17"></eye-icon>
</div>
<div class="text-label">
{{ $t("context_menu.detail") }}
</div>
</li>
<li class="menu-option" @click="downloadItem" v-if="!isFolder">
<div class="icon">
<download-cloud-icon size="17"></download-cloud-icon>
</div>
<div class="text-label">
{{ $t("context_menu.download") }}
</div>
</li>
</ul>
<!-- ContextMenu for File Preview -->
<div class="menu-options" id="menu-list">
<ul class="menu-option-group">
<li class="menu-option" @click="renameItem" v-if="item">
<div class="icon">
<edit-2-icon size="17"></edit-2-icon>
</div>
<div class="text-label">
{{ $t("context_menu.rename") }}
</div>
</li>
<li class="menu-option" @click="moveItem" v-if="item">
<div class="icon">
<corner-down-right-icon size="17"></corner-down-right-icon>
</div>
<div class="text-label">
{{ $t("context_menu.move") }}
</div>
</li>
<li class="menu-option" @click="deleteItem" v-if="item">
<div class="icon">
<trash-2-icon size="17"></trash-2-icon>
</div>
<div class="text-label">
{{ $t("context_menu.delete") }}
</div>
</li>
</ul>
</div>
</div>
<!--ContextMenu for Base location with MASTER permission-->
<div
v-if="$isThisLocation(['shared']) && $checkPermission('master')"
id="menu-list"
class="menu-options"
:style="{ top: positionY + 'px', left: positionX + 'px' }"
@click="closeAndResetContextMenu"
class="contextmenu"
v-show="isVisible && !showFromPreview"
ref="contextmenu"
>
<ul class="menu-option-group" v-if="item && isFolder">
<li class="menu-option" @click="addToFavourites">
<div class="icon">
<star-icon size="17"></star-icon>
</div>
<div class="text-label">
{{
isInFavourites
? $t("context_menu.remove_from_favourites")
: $t("context_menu.add_to_favourites")
}}
</div>
</li>
</ul>
<ul class="menu-option-group" v-if="item">
<li class="menu-option" @click="shareItem">
<div class="icon">
<link-icon size="17"></link-icon>
</div>
<div class="text-label">
{{
item.shared
? $t("context_menu.share_edit")
: $t("context_menu.share")
}}
</div>
</li>
<li class="menu-option" @click="deleteItem">
<div class="icon">
<trash-2-icon size="17"></trash-2-icon>
</div>
<div class="text-label">
{{ $t("context_menu.delete") }}
</div>
</li>
</ul>
<ul class="menu-option-group" v-if="item">
<li class="menu-option" @click="ItemDetail" v-if="item">
<div class="icon">
<eye-icon size="17"></eye-icon>
</div>
<div class="text-label">
{{ $t("context_menu.detail") }}
</div>
</li>
<li class="menu-option" @click="downloadItem" v-if="!isFolder">
<div class="icon">
<download-cloud-icon size="17"></download-cloud-icon>
</div>
<div class="text-label">
{{ $t("context_menu.download") }}
</div>
</li>
</ul>
</div>
<!--ContextMenu for Base location with MASTER permission-->
<div
v-if="
$isThisLocation(['base', 'participant_uploads', 'latest']) &&
$checkPermission('master')
"
id="menu-list"
class="menu-options"
>
<ul
class="menu-option-group"
v-if="!$isThisLocation(['participant_uploads', 'latest'])"
<!--ContextMenu for trash location-->
<div
v-if="
$isThisLocation(['trash', 'trash-root']) && $checkPermission('master')
"
id="menu-list"
class="menu-options"
>
<li
class="menu-option"
@click="addToFavourites"
v-if="item && isFolder"
<ul class="menu-option-group">
<li
class="menu-option"
@click="$store.dispatch('restoreItem', item)"
v-if="item"
>
<div class="icon">
<life-buoy-icon size="17"></life-buoy-icon>
</div>
<div class="text-label">
{{ $t("context_menu.restore") }}
</div>
</li>
<li class="menu-option" @click="deleteItem" v-if="item">
<div class="icon">
<trash-2-icon size="17"></trash-2-icon>
</div>
<div class="text-label">
{{ $t("context_menu.delete") }}
</div>
</li>
<li class="menu-option" @click="$store.dispatch('emptyTrash')">
<div class="icon">
<trash-icon size="17"></trash-icon>
</div>
<div class="text-label">
{{ $t("context_menu.empty_trash") }}
</div>
</li>
</ul>
<ul class="menu-option-group" v-if="item">
<li class="menu-option" @click="ItemDetail">
<div class="icon">
<eye-icon size="17"></eye-icon>
</div>
<div class="text-label">
{{ $t("context_menu.detail") }}
</div>
</li>
<li class="menu-option" @click="downloadItem" v-if="!isFolder">
<div class="icon">
<download-cloud-icon size="17"></download-cloud-icon>
</div>
<div class="text-label">
{{ $t("context_menu.download") }}
</div>
</li>
</ul>
</div>
<!--ContextMenu for Base location with MASTER permission-->
<div
v-if="$isThisLocation(['shared']) && $checkPermission('master')"
id="menu-list"
class="menu-options"
>
<ul class="menu-option-group" v-if="item && isFolder">
<li class="menu-option" @click="addToFavourites">
<div class="icon">
<star-icon size="17"></star-icon>
</div>
<div class="text-label">
{{
isInFavourites
? $t("context_menu.remove_from_favourites")
: $t("context_menu.add_to_favourites")
}}
</div>
</li>
</ul>
<ul class="menu-option-group" v-if="item">
<li class="menu-option" @click="shareItem">
<div class="icon">
<link-icon size="17"></link-icon>
</div>
<div class="text-label">
{{
item.shared
? $t("context_menu.share_edit")
: $t("context_menu.share")
}}
</div>
</li>
<li class="menu-option" @click="deleteItem">
<div class="icon">
<trash-2-icon size="17"></trash-2-icon>
</div>
<div class="text-label">
{{ $t("context_menu.delete") }}
</div>
</li>
</ul>
<ul class="menu-option-group" v-if="item">
<li class="menu-option" @click="ItemDetail" v-if="item">
<div class="icon">
<eye-icon size="17"></eye-icon>
</div>
<div class="text-label">
{{ $t("context_menu.detail") }}
</div>
</li>
<li class="menu-option" @click="downloadItem" v-if="!isFolder">
<div class="icon">
<download-cloud-icon size="17"></download-cloud-icon>
</div>
<div class="text-label">
{{ $t("context_menu.download") }}
</div>
</li>
</ul>
</div>
<!--ContextMenu for Base location with MASTER permission-->
<div
v-if="
$isThisLocation(['base', 'participant_uploads', 'latest']) &&
$checkPermission('master')
"
id="menu-list"
class="menu-options"
>
<ul
class="menu-option-group"
v-if="!$isThisLocation(['participant_uploads', 'latest'])"
>
<div class="icon">
<star-icon size="17"></star-icon>
</div>
<div class="text-label">
{{
isInFavourites
? $t("context_menu.remove_from_favourites")
: $t("context_menu.add_to_favourites")
}}
</div>
</li>
<li class="menu-option" @click="createFolder">
<div class="icon">
<folder-plus-icon size="17"></folder-plus-icon>
</div>
<div class="text-label">
{{ $t("context_menu.create_folder") }}
</div>
</li>
</ul>
<ul class="menu-option-group" v-if="item">
<li class="menu-option" @click="moveItem">
<div class="icon">
<corner-down-right-icon size="17"></corner-down-right-icon>
</div>
<div class="text-label">
{{ $t("context_menu.move") }}
</div>
</li>
<li class="menu-option" @click="shareItem">
<div class="icon">
<link-icon size="17"></link-icon>
</div>
<div class="text-label">
{{
item.shared
? $t("context_menu.share_edit")
: $t("context_menu.share")
}}
</div>
</li>
<li class="menu-option" @click="deleteItem">
<div class="icon">
<trash-2-icon size="17"></trash-2-icon>
</div>
<div class="text-label">
{{ $t("context_menu.delete") }}
</div>
</li>
</ul>
<ul class="menu-option-group" v-if="item">
<li class="menu-option" @click="ItemDetail">
<div class="icon">
<eye-icon size="17"></eye-icon>
</div>
<div class="text-label">
{{ $t("context_menu.detail") }}
</div>
</li>
<li class="menu-option" @click="downloadItem" v-if="!isFolder">
<div class="icon">
<download-cloud-icon size="17"></download-cloud-icon>
</div>
<div class="text-label">
{{ $t("context_menu.download") }}
</div>
</li>
</ul>
</div>
<li
class="menu-option"
@click="addToFavourites"
v-if="item && isFolder"
>
<div class="icon">
<star-icon size="17"></star-icon>
</div>
<div class="text-label">
{{
isInFavourites
? $t("context_menu.remove_from_favourites")
: $t("context_menu.add_to_favourites")
}}
</div>
</li>
<li class="menu-option" @click="createFolder">
<div class="icon">
<folder-plus-icon size="17"></folder-plus-icon>
</div>
<div class="text-label">
{{ $t("context_menu.create_folder") }}
</div>
</li>
</ul>
<ul class="menu-option-group" v-if="item">
<li class="menu-option" @click="moveItem">
<div class="icon">
<corner-down-right-icon size="17"></corner-down-right-icon>
</div>
<div class="text-label">
{{ $t("context_menu.move") }}
</div>
</li>
<li class="menu-option" @click="shareItem">
<div class="icon">
<link-icon size="17"></link-icon>
</div>
<div class="text-label">
{{
item.shared
? $t("context_menu.share_edit")
: $t("context_menu.share")
}}
</div>
</li>
<li class="menu-option" @click="deleteItem">
<div class="icon">
<trash-2-icon size="17"></trash-2-icon>
</div>
<div class="text-label">
{{ $t("context_menu.delete") }}
</div>
</li>
</ul>
<ul class="menu-option-group" v-if="item">
<li class="menu-option" @click="ItemDetail">
<div class="icon">
<eye-icon size="17"></eye-icon>
</div>
<div class="text-label">
{{ $t("context_menu.detail") }}
</div>
</li>
<li class="menu-option" @click="downloadItem" v-if="!isFolder">
<div class="icon">
<download-cloud-icon size="17"></download-cloud-icon>
</div>
<div class="text-label">
{{ $t("context_menu.download") }}
</div>
</li>
</ul>
</div>
<!--ContextMenu for Base location with EDITOR permission-->
<div
v-if="$isThisLocation(['base', 'public']) && $checkPermission('editor')"
id="menu-list"
class="menu-options"
>
<ul class="menu-option-group">
<li class="menu-option" @click="createFolder">
<div class="icon">
<folder-plus-icon size="17"></folder-plus-icon>
</div>
<div class="text-label">
{{ $t("context_menu.create_folder") }}
</div>
</li>
</ul>
<ul class="menu-option-group" v-if="item">
<li class="menu-option" @click="moveItem">
<div class="icon">
<corner-down-right-icon size="17"></corner-down-right-icon>
</div>
<div class="text-label">
{{ $t("context_menu.move") }}
</div>
</li>
<li class="menu-option" @click="deleteItem">
<div class="icon">
<trash-2-icon size="17"></trash-2-icon>
</div>
<div class="text-label">
{{ $t("context_menu.delete") }}
</div>
</li>
</ul>
<ul class="menu-option-group" v-if="item">
<li class="menu-option" @click="ItemDetail">
<div class="icon">
<eye-icon size="17"></eye-icon>
</div>
<div class="text-label">
{{ $t("context_menu.detail") }}
</div>
</li>
<li class="menu-option" @click="downloadItem" v-if="!isFolder">
<div class="icon">
<download-cloud-icon size="17"></download-cloud-icon>
</div>
<div class="text-label">
{{ $t("context_menu.download") }}
</div>
</li>
</ul>
</div>
<!--ContextMenu for Base location with EDITOR permission-->
<div
v-if="$isThisLocation(['base', 'public']) && $checkPermission('editor')"
id="menu-list"
class="menu-options"
>
<ul class="menu-option-group">
<li class="menu-option" @click="createFolder">
<div class="icon">
<folder-plus-icon size="17"></folder-plus-icon>
</div>
<div class="text-label">
{{ $t("context_menu.create_folder") }}
</div>
</li>
</ul>
<ul class="menu-option-group" v-if="item">
<li class="menu-option" @click="moveItem">
<div class="icon">
<corner-down-right-icon size="17"></corner-down-right-icon>
</div>
<div class="text-label">
{{ $t("context_menu.move") }}
</div>
</li>
<li class="menu-option" @click="deleteItem">
<div class="icon">
<trash-2-icon size="17"></trash-2-icon>
</div>
<div class="text-label">
{{ $t("context_menu.delete") }}
</div>
</li>
</ul>
<ul class="menu-option-group" v-if="item">
<li class="menu-option" @click="ItemDetail">
<div class="icon">
<eye-icon size="17"></eye-icon>
</div>
<div class="text-label">
{{ $t("context_menu.detail") }}
</div>
</li>
<li class="menu-option" @click="downloadItem" v-if="!isFolder">
<div class="icon">
<download-cloud-icon size="17"></download-cloud-icon>
</div>
<div class="text-label">
{{ $t("context_menu.download") }}
</div>
</li>
</ul>
</div>
<!--ContextMenu for Base location with VISITOR permission-->
<div
v-if="$isThisLocation(['base', 'public']) && $checkPermission('visitor')"
id="menu-list"
class="menu-options"
>
<ul class="menu-option-group" v-if="item">
<li class="menu-option" @click="ItemDetail">
<div class="icon">
<eye-icon size="17"></eye-icon>
</div>
<div class="text-label">
{{ $t("context_menu.detail") }}
</div>
</li>
<li class="menu-option" @click="downloadItem" v-if="!isFolder">
<div class="icon">
<download-cloud-icon size="17"></download-cloud-icon>
</div>
<div class="text-label">
{{ $t("context_menu.download") }}
</div>
</li>
</ul>
<!--ContextMenu for Base location with VISITOR permission-->
<div
v-if="
$isThisLocation(['base', 'public']) && $checkPermission('visitor')
"
id="menu-list"
class="menu-options"
>
<ul class="menu-option-group" v-if="item">
<li class="menu-option" @click="ItemDetail">
<div class="icon">
<eye-icon size="17"></eye-icon>
</div>
<div class="text-label">
{{ $t("context_menu.detail") }}
</div>
</li>
<li class="menu-option" @click="downloadItem" v-if="!isFolder">
<div class="icon">
<download-cloud-icon size="17"></download-cloud-icon>
</div>
<div class="text-label">
{{ $t("context_menu.download") }}
</div>
</li>
</ul>
</div>
</div>
</div>
</template>
@@ -303,6 +345,7 @@ import {
FolderPlusIcon,
LifeBuoyIcon,
Trash2Icon,
Edit2Icon,
TrashIcon,
StarIcon,
LinkIcon,
@@ -319,6 +362,7 @@ export default {
FolderPlusIcon,
LifeBuoyIcon,
Trash2Icon,
Edit2Icon,
TrashIcon,
LinkIcon,
StarIcon,
@@ -349,13 +393,33 @@ export default {
},
data() {
return {
showFromPreview: false,
item: undefined,
isVisible: false,
positionX: 0,
positionY: 0,
};
},
methods: {
renameItem() {
let itemName = prompt(this.$t("popup_rename.title"), this.item.name);
if (itemName && itemName !== "") {
let item = {
unique_id: this.item.unique_id,
type: this.item.type,
name: itemName,
};
this.$store.dispatch("renameItem", item);
// Change item name if is mobile device or prompted
if (this.$isMobile()) {
events.$emit("change:name", item);
}
}
},
moveItem() {
// Open move item popup
events.$emit("popup:open", { name: "move", item: this.item });
@@ -449,8 +513,37 @@ export default {
// Show context menu
this.isVisible = true;
},
showFilePreviewMenu() {
let container = document.getElementById("fast-preview-menu");
if (container) {
this.positionX = container.offsetLeft + 16;
this.positionY = container.offsetTop + 51;
}
},
},
watch: {
item(newValue, oldValue) {
if (oldValue != undefined && this.showFromPreview) {
this.showFromPreview = false;
}
},
},
mounted() {
events.$on("actualShowingImage:ContextMenu", (item) => {
this.item = item;
});
},
created() {
events.$on("showContextMenuPreview:show", (item) => {
if (!this.showFromPreview) {
this.item = item;
this.showFromPreview = !this.showFromPreview;
this.showFilePreviewMenu();
} else if (this.showFromPreview) {
this.showFromPreview = false;
this.item = undefined;
}
});
events.$on("contextMenu:show", (event, item) => {
// Store item
this.item = item;
@@ -476,6 +569,10 @@ export default {
@import "@assets/vue-file-manager/_variables";
@import "@assets/vue-file-manager/_mixins";
.filePreviewFixed {
position: fixed !important;
}
.menu-option {
display: flex;
align-items: center;

142
resources/js/components/FilesView/DesktopMediaPreviewMenu.vue
View File

@@ -1,142 +0,0 @@
<template >
<div v-if="showMenu && $checkPermission('master')" class="menu-wrapper">
<div class="item-list">
<li @click="renameItem">
<p><edit-2-icon class="icon" size="19" /> Rename</p>
</li>
<li @click="moveItem">
<corner-down-right-icon class="icon" size="19" />
<p>Move</p>
</li>
<li @click="deleteItem">
<trash-2-icon class="icon" size="19" />
<p>Delete</p>
</li>
</div>
</div>
</template>
<script>
import { Trash2Icon, Edit2Icon, CornerDownRightIcon } from "vue-feather-icons";
import ToolbarButton from "@/components/FilesView/ToolbarButton";
import { events } from "@/bus";
export default {
components: {
ToolbarButton,
Trash2Icon,
Edit2Icon,
CornerDownRightIcon,
},
props: ["fileInfoDetail"],
data() {
return {
showMenu: false,
};
},
created() {
events.$on("desktopMediaMenu:show", () => {
this.showMenu = !this.showMenu;
});
},
methods: {
closeMenu() {
this.showMenu = false;
},
deleteItem() {
this.$store.dispatch("deleteItem", this.fileInfoDetail);
},
moveItem() {
// Open move item popup
events.$emit("popup:open", { name: "move", item: this.fileInfoDetail });
},
renameItem() {
let itemName = prompt(
this.$t("popup_rename.title"),
this.fileInfoDetail.name
);
if (itemName && itemName !== "") {
let item = {
unique_id: this.fileInfoDetail.unique_id,
type: this.fileInfoDetail.type,
name: itemName,
};
this.$store.dispatch("renameItem", item);
// Change item name if is mobile device or prompted
if (this.$isMobile()) {
events.$emit("change:name", item);
}
}
},
},
};
</script>
<style lang="scss" scoped>
@import "@assets/vue-file-manager/_variables";
@import "@assets/vue-file-manager/_mixins";
.menu-wrapper {
width: 250px;
position: absolute;
top: 7%;
z-index: 2;
@include widget-card();
padding: 0px;
}
.item-list {
list-style: none;
color: $text;
li {
width: 100%;
height: 49px;
margin: auto;
display: flex;
align-items: center;
padding: 15px 20px;
.icon {
margin-right: 20px;
}
p {
@include font-size(16);
}
&:hover {
background-color: $light_background;
color: $theme !important;
p,
.icon {
color: $theme;
stroke: $theme !important;
}
}
}
}
.item-list {
&:first-child() {
border-top-left-radius: 8px !important;
border-top-right-radius: 8px !important;
}
&:last-child {
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
}
}
@media (prefers-color-scheme: dark) {
.menu-wrapper {
background-color: $dark_mode_foreground;
}
.item-list {
color: $dark_mode_text_primary;
li:hover {
background-color: rgba($theme, 0.1);
}
}
}
</style>

701
resources/js/components/FilesView/DesktopToolbar.vue
View File

@@ -1,366 +1,411 @@
<template>
<div id="desktop-toolbar">
<div class="toolbar-wrapper">
<div id="desktop-toolbar">
<div class="toolbar-wrapper">
<!-- Go back-->
<div class="toolbar-go-back" v-if="homeDirectory">
<div @click="goBack" class="go-back-button">
<chevron-left-icon
size="17"
:class="{ 'is-active': browseHistory.length > 1 }"
class="icon-back"
></chevron-left-icon>
<!-- Go back-->
<div class="toolbar-go-back" v-if="homeDirectory">
<div @click="goBack" class="go-back-button">
<chevron-left-icon size="17" :class="{'is-active': browseHistory.length > 1}" class="icon-back"></chevron-left-icon>
<span class="back-directory-title">
{{ directoryName }}
</span>
<span class="back-directory-title">
{{ directoryName }}
</span>
<span @click.stop="folderActions" v-if="browseHistory.length > 1 && $isThisLocation(['base', 'public'])" class="folder-options" id="folder-actions">
<more-horizontal-icon size="14" class="icon-more"></more-horizontal-icon>
</span>
</div>
</div>
<!-- Tools-->
<div class="toolbar-tools">
<!--Search bar-->
<div class="toolbar-button-wrapper">
<SearchBar/>
</div>
<!--Files controlls-->
<div class="toolbar-button-wrapper" v-if="$checkPermission(['master', 'editor'])">
<ToolbarButtonUpload
:class="{'is-inactive': canUploadInView || ! hasCapacity}"
:action="$t('actions.upload')"
/>
<ToolbarButton
:class="{'is-inactive': canCreateFolderInView}"
@click.native="createFolder"
source="folder-plus"
:action="$t('actions.create_folder')"
/>
</div>
<div class="toolbar-button-wrapper" v-if="$checkPermission(['master', 'editor'])">
<ToolbarButton
source="move"
:class="{'is-inactive': canMoveInView}"
:action="$t('actions.move')"
@click.native="moveItem"
/>
<ToolbarButton
v-if="! $isThisLocation(['public'])"
source="share"
:class="{'is-inactive': canShareInView}"
:action="$t('actions.share')"
@click.native="shareItem"
/>
<ToolbarButton
source="trash"
:class="{'is-inactive': canDeleteInView}"
:action="$t('actions.delete')"
@click.native="deleteItem"
/>
</div>
<!--View options-->
<div class="toolbar-button-wrapper">
<ToolbarButton
:source="preview"
:action="$t('actions.preview')"
@click.native="$store.dispatch('changePreviewType')"
/>
<ToolbarButton
:class="{ active: fileInfoVisible }"
@click.native="$store.dispatch('fileInfoToggle')"
source="info"
/>
</div>
</div>
<span
@click.stop="folderActions"
v-if="
browseHistory.length > 1 && $isThisLocation(['base', 'public'])
"
class="folder-options"
id="folder-actions"
>
<more-horizontal-icon
size="14"
class="icon-more"
></more-horizontal-icon>
</span>
</div>
<UploadProgress />
</div>
<!-- Tools-->
<div class="toolbar-tools">
<!--Search bar-->
<div class="toolbar-button-wrapper">
<SearchBar />
</div>
<!--Files controlls-->
<div
class="toolbar-button-wrapper"
v-if="$checkPermission(['master', 'editor'])"
>
<ToolbarButtonUpload
:class="{ 'is-inactive': canUploadInView || !hasCapacity }"
:action="$t('actions.upload')"
/>
<ToolbarButton
:class="{ 'is-inactive': canCreateFolderInView }"
@click.native="createFolder"
source="folder-plus"
:action="$t('actions.create_folder')"
/>
</div>
<div
class="toolbar-button-wrapper"
v-if="$checkPermission(['master', 'editor'])"
>
<ToolbarButton
source="move"
:class="{ 'is-inactive': canMoveInView }"
:action="$t('actions.move')"
@click.native="moveItem"
/>
<ToolbarButton
v-if="!$isThisLocation(['public'])"
source="share"
:class="{ 'is-inactive': canShareInView }"
:action="$t('actions.share')"
@click.native="shareItem"
/>
<ToolbarButton
source="trash"
:class="{ 'is-inactive': canDeleteInView }"
:action="$t('actions.delete')"
@click.native="deleteItem"
/>
</div>
<!--View options-->
<div class="toolbar-button-wrapper">
<ToolbarButton
:source="preview"
:action="$t('actions.preview')"
@click.native="$store.dispatch('changePreviewType')"
/>
<ToolbarButton
:class="{ active: fileInfoVisible }"
@click.native="$store.dispatch('fileInfoToggle')"
source="info"
/>
</div>
</div>
</div>
<UploadProgress />
</div>
</template>
<script>
import ToolbarButtonUpload from '@/components/FilesView/ToolbarButtonUpload'
import { ChevronLeftIcon, MoreHorizontalIcon } from 'vue-feather-icons'
import UploadProgress from '@/components/FilesView/UploadProgress'
import ToolbarButton from '@/components/FilesView/ToolbarButton'
import SearchBar from '@/components/FilesView/SearchBar'
import {mapGetters} from 'vuex'
import {events} from '@/bus'
import {last} from 'lodash'
import ToolbarButtonUpload from "@/components/FilesView/ToolbarButtonUpload";
import { ChevronLeftIcon, MoreHorizontalIcon } from "vue-feather-icons";
import UploadProgress from "@/components/FilesView/UploadProgress";
import ToolbarButton from "@/components/FilesView/ToolbarButton";
import SearchBar from "@/components/FilesView/SearchBar";
import { mapGetters } from "vuex";
import { events } from "@/bus";
import { last } from "lodash";
export default {
name: 'ToolBar',
components: {
ToolbarButtonUpload,
MoreHorizontalIcon,
ChevronLeftIcon,
UploadProgress,
ToolbarButton,
SearchBar
},
computed: {
...mapGetters([
'FilePreviewType',
'fileInfoVisible',
'fileInfoDetail',
'currentFolder',
'browseHistory',
'homeDirectory',
]),
hasCapacity() {
export default {
name: "ToolBar",
components: {
ToolbarButtonUpload,
MoreHorizontalIcon,
ChevronLeftIcon,
UploadProgress,
ToolbarButton,
SearchBar,
},
computed: {
...mapGetters([
"FilePreviewType",
"fileInfoVisible",
"fileInfoDetail",
"currentFolder",
"browseHistory",
"homeDirectory",
]),
hasCapacity() {
// Check if set storage limitation
if (!this.$store.getters.config.storageLimit) return true;
// Check if set storage limitation
if (! this.$store.getters.config.storageLimit)
return true
// Check if is loaded user
if (!this.$store.getters.user) return true;
// Check if is loaded user
if (! this.$store.getters.user )
return true
// Check if user has storage
return (
this.$store.getters.user.relationships.storage.data.attributes.used <=
100
);
},
directoryName() {
return this.currentFolder
? this.currentFolder.name
: this.homeDirectory.name;
},
preview() {
return this.FilePreviewType === "list" ? "th" : "th-list";
},
canCreateFolderInView() {
return !this.$isThisLocation(["base", "public"]);
},
canDeleteInView() {
return !this.$isThisLocation([
"trash",
"trash-root",
"base",
"participant_uploads",
"latest",
"shared",
"public",
]);
},
canUploadInView() {
return !this.$isThisLocation(["base", "public"]);
},
canMoveInView() {
return !this.$isThisLocation([
"base",
"participant_uploads",
"latest",
"shared",
"public",
]);
},
canShareInView() {
return !this.$isThisLocation([
"base",
"participant_uploads",
"latest",
"shared",
"public",
]);
},
},
methods: {
goBack() {
// Get previous folder
let previousFolder = last(this.browseHistory);
// Check if user has storage
return this.$store.getters.user.relationships.storage.data.attributes.used <= 100
},
directoryName() {
return this.currentFolder ? this.currentFolder.name : this.homeDirectory.name
},
preview() {
return this.FilePreviewType === 'list' ? 'th' : 'th-list'
},
canCreateFolderInView() {
return ! this.$isThisLocation(['base', 'public'])
},
canDeleteInView() {
return ! this.$isThisLocation(['trash', 'trash-root', 'base', 'participant_uploads', 'latest', 'shared', 'public'])
},
canUploadInView() {
return ! this.$isThisLocation(['base', 'public'])
},
canMoveInView() {
return ! this.$isThisLocation(['base', 'participant_uploads', 'latest', 'shared', 'public'])
},
canShareInView() {
return ! this.$isThisLocation(['base', 'participant_uploads', 'latest', 'shared', 'public'])
}
},
methods: {
goBack() {
// Get previous folder
let previousFolder = last(this.browseHistory)
if (!previousFolder) return;
if (! previousFolder)
return
if (previousFolder.location === 'trash-root') {
this.$store.dispatch('getTrash')
} else if (previousFolder.location === 'shared') {
this.$store.dispatch('getShared')
} else {
if ( this.$isThisLocation('public') ) {
this.$store.dispatch('browseShared', [{folder: previousFolder, back: true, init: false}])
} else {
this.$store.dispatch('getFolder', [{folder: previousFolder, back: true, init: false}])
}
}
},
folderActions() {
events.$emit('folder:actions', this.currentFolder)
},
deleteItem() {
events.$emit('items:delete')
},
createFolder() {
this.$createFolder()
},
moveItem() {
events.$emit('popup:open', {name: 'move', item: this.fileInfoDetail})
},
shareItem() {
if (this.fileInfoDetail.shared) {
events.$emit('popup:open', {name: 'share-edit', item: this.fileInfoDetail})
} else {
events.$emit('popup:open', {name: 'share-create', item: this.fileInfoDetail})
}
}
},
}
if (previousFolder.location === "trash-root") {
this.$store.dispatch("getTrash");
} else if (previousFolder.location === "shared") {
this.$store.dispatch("getShared");
} else {
if (this.$isThisLocation("public")) {
this.$store.dispatch("browseShared", [
{ folder: previousFolder, back: true, init: false },
]);
} else {
this.$store.dispatch("getFolder", [
{ folder: previousFolder, back: true, init: false },
]);
}
}
},
folderActions() {
events.$emit("folder:actions", this.currentFolder);
},
deleteItem() {
events.$emit("items:delete");
},
createFolder() {
this.$createFolder();
},
moveItem() {
events.$emit("popup:open", { name: "move", item: this.fileInfoDetail });
},
shareItem() {
if (this.fileInfoDetail) {
//ADD BY M
if (this.fileInfoDetail.shared) {
events.$emit("popup:open", {
name: "share-edit",
item: this.fileInfoDetail,
});
} else {
events.$emit("popup:open", {
name: "share-create",
item: this.fileInfoDetail,
});
}
}
},
},
};
</script>
<style scoped lang="scss">
@import '@assets/vue-file-manager/_variables';
@import '@assets/vue-file-manager/_mixins';
@import "@assets/vue-file-manager/_variables";
@import "@assets/vue-file-manager/_mixins";
.toolbar-wrapper {
padding-top: 10px;
padding-bottom: 10px;
display: flex;
position: relative;
z-index: 2;
.toolbar-wrapper {
padding-top: 10px;
padding-bottom: 10px;
display: flex;
position: relative;
z-index: 2;
> div {
flex-grow: 1;
align-self: center;
white-space: nowrap;
}
> div {
flex-grow: 1;
align-self: center;
white-space: nowrap;
}
}
.directory-name {
vertical-align: middle;
@include font-size(17);
color: $text;
font-weight: 700;
max-width: 220px;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
}
.icon-back {
vertical-align: middle;
cursor: pointer;
margin-right: 6px;
opacity: 0.15;
pointer-events: none;
@include transition(150ms);
&.is-active {
opacity: 1;
pointer-events: initial;
}
}
.toolbar-go-back {
cursor: pointer;
.folder-options {
vertical-align: middle;
margin-left: 6px;
padding: 1px 4px;
line-height: 0;
border-radius: 3px;
@include transition(150ms);
svg circle {
@include transition(150ms);
}
.directory-name {
vertical-align: middle;
@include font-size(17);
color: $text;
font-weight: 700;
max-width: 220px;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
&:hover {
background: $light_background;
svg circle {
stroke: $theme;
}
}
.icon-back {
vertical-align: middle;
cursor: pointer;
margin-right: 6px;
opacity: 0.15;
pointer-events: none;
@include transition(150ms);
.icon-more {
vertical-align: middle;
}
}
&.is-active {
opacity: 1;
pointer-events: initial;
.back-directory-title {
@include font-size(15);
line-height: 1;
font-weight: 700;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
vertical-align: middle;
color: $text;
}
}
.toolbar-position {
text-align: center;
span {
@include font-size(17);
font-weight: 600;
}
}
.toolbar-tools {
text-align: right;
.toolbar-button-wrapper {
margin-left: 28px;
display: inline-block;
vertical-align: middle;
&:first-child {
margin-left: 0 !important;
}
}
.button {
margin-left: 5px;
&.active {
/deep/ svg {
line,
circle {
stroke: $theme;
}
}
}
.toolbar-go-back {
cursor: pointer;
.folder-options {
vertical-align: middle;
margin-left: 6px;
padding: 1px 4px;
line-height: 0;
border-radius: 3px;
@include transition(150ms);
svg circle {
@include transition(150ms);
}
&:hover {
background: $light_background;
svg circle {
stroke: $theme;
}
}
.icon-more {
vertical-align: middle;
}
}
.back-directory-title {
@include font-size(15);
line-height: 1;
font-weight: 700;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
vertical-align: middle;
color: $text;
}
&.is-inactive {
opacity: 0.25;
pointer-events: none;
}
.toolbar-position {
text-align: center;
&:first-child {
margin-left: 0;
}
}
}
span {
@include font-size(17);
font-weight: 600;
}
@media only screen and (max-width: 1024px) {
.toolbar-go-back .back-directory-title {
max-width: 120px;
}
.toolbar-tools {
.button {
margin-left: 0;
height: 40px;
width: 40px;
}
.toolbar-tools {
text-align: right;
.toolbar-button-wrapper {
margin-left: 25px;
}
}
}
.toolbar-button-wrapper {
margin-left: 28px;
display: inline-block;
vertical-align: middle;
@media only screen and (max-width: 960px) {
#desktop-toolbar {
display: none;
}
}
&:first-child {
margin-left: 0 !important;
}
}
@media (prefers-color-scheme: dark) {
.toolbar .directory-name {
color: $dark_mode_text_primary;
}
.button {
margin-left: 5px;
&.active {
/deep/ svg {
line, circle {
stroke: $theme;
}
}
}
&.is-inactive {
opacity: 0.25;
pointer-events: none;
}
&:first-child {
margin-left: 0;
}
}
.toolbar-go-back {
.back-directory-title {
color: $dark_mode_text_primary;
}
@media only screen and (max-width: 1024px) {
.toolbar-go-back .back-directory-title {
max-width: 120px;
}
.toolbar-tools {
.button {
margin-left: 0;
height: 40px;
width: 40px;
}
.toolbar-button-wrapper {
margin-left: 25px;
}
}
}
@media only screen and (max-width: 960px) {
#desktop-toolbar {
display: none;
}
}
@media (prefers-color-scheme: dark) {
.toolbar .directory-name {
color: $dark_mode_text_primary;
}
.toolbar-go-back {
.back-directory-title {
color: $dark_mode_text_primary;
}
.folder-options {
&:hover {
background: $dark_mode_foreground;
}
}
}
.folder-options {
&:hover {
background: $dark_mode_foreground;
}
}
}
}
</style>

42
resources/js/components/FilesView/FileFullPreview.vue
View File

@@ -3,8 +3,15 @@
class="file-full-preview-wrapper"
v-if="showFullPreview"
id="fileFullPreview"
ref="filePreview"
tabindex="-1"
@keydown.esc="showFullPreview = false"
@keydown.right="next"
@keydown.left="prev"
>
<FilePreviewNavigationPanel />
<MediaFullPreview v-if="isMedia" />
<FilePreviewActions />
</div>
</template>
@@ -13,21 +20,46 @@ import { events } from "@/bus";
import { mapGetters } from "vuex";
import MediaFullPreview from "@/components/FilesView/MediaFullPreview";
import FilePreviewActions from "@/components/FilesView/FilePreviewActions";
import FilePreviewNavigationPanel from "@/components/FilesView/FilePreviewNavigationPanel";
export default {
components: { MediaFullPreview },
components: {
MediaFullPreview,
FilePreviewNavigationPanel,
FilePreviewActions,
},
data() {
return {
showFullPreview: false,
};
},
methods: {
next: function () {
events.$emit("filePreviewAction:next");
},
prev: function () {
events.$emit("filePreviewAction:prev");
},
},
updated() {
if (this.showFullPreview) {
this.$refs.filePreview.focus();
}
},
computed: {
...mapGetters(["fileInfoDetail"]),
isMedia() {
return this.fileInfoDetail === "image" || "video";
return this.fileInfoDetail === "image" || "video" || "audio";
},
},
mounted() {
if (this.showFullPreview) {
let preview = document.getElementById("file-wrapper-preview");
preview.addEventListener("click", this.hideMenu);
}
events.$on("fileFullPreview:show", () => {
this.showFullPreview = true;
});
@@ -35,6 +67,12 @@ export default {
this.showFullPreview = false;
});
},
methods: {
hideMenu() {
events.$emit("showContextMenuPreview:hide");
console.log("aaaa");
},
},
};
</script>

7
resources/js/components/FilesView/FileItemList.vue
View File

@@ -136,6 +136,9 @@ export default {
isVideo() {
return this.data.type === "video";
},
isAudio() {
return this.data.type === "audio";
},
canEditName() {
return (
!this.$isMobile() &&
@@ -229,12 +232,12 @@ export default {
return;
},
goToItem() {
if (this.isImage || this.isVideo) {
if (this.isImage || this.isVideo || this.isAudio) {
// this.$openImageOnNewTab(this.data.file_url)
events.$emit("fileFullPreview:show");
}
if (this.isFile && !this.isPdf && !this.isVideo) {
if (this.isFile && !this.isPdf && !this.isVideo && !this.isAudio) {
this.$downloadFile(
this.data.file_url,
this.data.name + "." + this.data.mimetype

73
resources/js/components/FilesView/FilePreviewActions.vue Normal file
View File

@@ -0,0 +1,73 @@
<template>
<div>
<chevron-left-icon
class="prev"
@click.prevent="prev"
size="17"
></chevron-left-icon>
<chevron-right-icon
class="next"
@click.prevent="next"
size="17"
></chevron-right-icon>
</div>
</template>
<script>
import { events } from "@/bus";
import { ChevronLeftIcon, ChevronRightIcon } from "vue-feather-icons";
export default {
components: {
ChevronLeftIcon,
ChevronRightIcon,
},
methods: {
next: function () {
events.$emit("filePreviewAction:next");
},
prev: function () {
events.$emit("filePreviewAction:prev");
},
},
};
</script>
<style lang="scss" scoped>
@import "@assets/vue-file-manager/_variables";
.icon-wrapper {
width: 40px;
height: 40px;
}
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
display: flex;
justify-content: center;
background-color: white;
color: $text;
border-radius: 50%;
text-decoration: none;
user-select: none;
}
.next {
right: 0;
}
.prev {
left: 0;
}
@media (prefers-color-scheme: dark) {
.prev,
.next {
color: $light-text;
background-color: $dark_mode_background;
}
}
</style>

327
resources/js/components/FilesView/FilePreviewNavigationPanel.vue Normal file
View File

@@ -0,0 +1,327 @@
<template>
<!-- <div class="navigation-wrapper"> -->
<div class="navigation-panel" v-if="fileInfoDetail">
<div class="name-wrapper">
<x-icon @click="closeFullPreview" size="17" class="icon-close"></x-icon>
<div class="name-count-wrapper">
<p class="title">{{ formatedName }}</p>
<span class="file-count">
({{
showImageIndex +
" " +
$t("pronouns.of") +
" " +
filteredFiles.length
}})
</span>
</div>
<span
id="fast-preview-menu"
class="fast-menu-icon"
@click="menuOpen"
v-if="$checkPermission('master', 'editor')"
>
<more-horizontal-icon class="more-icon" size="14">
</more-horizontal-icon>
</span>
</div>
<!-- </div> -->
<div class="created_at-wrapper">
<p>{{ fileInfoDetail.filesize }}, {{ fileInfoDetail.created_at }}</p>
</div>
<div class="navigation-icons">
<div class="navigation-tool-wrapper">
<ToolbarButton
source="download"
@click.native="downloadItem"
:action="$t('actions.download')"
/>
<ToolbarButton
source="share"
:class="{ 'is-inactive': canShareInView }"
:action="$t('actions.share')"
@click.native="shareItem"
/>
<ToolbarButton
v-if="this.fileInfoDetail.type === 'image'"
source="print"
:action="$t('actions.print')"
@click.native="printMethod()"
/>
</div>
</div>
</div>
<!-- </div> -->
</template>
<script>
import { events } from "@/bus";
import { mapGetters } from "vuex";
import { XIcon, MoreHorizontalIcon } from "vue-feather-icons";
import ToolbarButton from "@/components/FilesView/ToolbarButton";
export default {
components: { ToolbarButton, XIcon, MoreHorizontalIcon },
data() {
return {
showContextMenu: false,
};
},
computed: {
...mapGetters(["fileInfoDetail", "data"]),
filteredFiles() {
let files = [];
this.data.filter((element) => {
if (element.type == this.fileInfoDetail.type) {
files.push(element);
}
});
return files;
},
showImageIndex() {
let activeIndex = "";
this.filteredFiles.filter((element, index) => {
if (element.unique_id == this.fileInfoDetail.unique_id) {
activeIndex = index + 1;
}
});
return activeIndex;
},
formatedName() {
let name = this.fileInfoDetail.name;
if (name.lastIndexOf(".") > -1) {
return _.truncate(name.substring(0, name.lastIndexOf(".")), {
length: 20,
});
} else {
return _.truncate(name, {
length: 18,
});
}
},
canShareInView() {
return !this.$isThisLocation([
"base",
"participant_uploads",
"latest",
"shared",
"public",
]);
},
},
methods: {
printMethod() {
var tab = document.getElementById("image");
var win = window.open("", "", "height=700,width=700");
win.document.write(tab.outerHTML);
win.document.close();
win.print();
},
downloadItem() {
// Download file
this.$downloadFile(
this.fileInfoDetail.file_url,
this.fileInfoDetail.name + "." + this.fileInfoDetail.mimetype
);
},
shareItem() {
if (this.fileInfoDetail.shared) {
events.$emit("popup:open", {
name: "share-edit",
item: this.fileInfoDetail,
});
} else {
events.$emit("popup:open", {
name: "share-create",
item: this.fileInfoDetail,
});
}
},
menuOpen() {
if (this.$isMobile()) {
events.$emit("mobileMenu:show", "showFromMediaPreview");
} else {
events.$emit("showContextMenuPreview:show", this.fileInfoDetail);
}
},
closeFullPreview() {
events.$emit("fileFullPreview:hide");
events.$emit("showContextMenuPreview:hide");
},
},
};
</script>
<style lang="scss" scoped>
@import "@assets/vue-file-manager/_variables";
@import "@assets/vue-file-manager/_mixins";
.name-wrapper {
width: 33%;
height: 22px;
display: flex;
position: relative;
align-items: center;
.name-count-wrapper {
display: flex;
.file-count {
@include font-size(15);
margin-left: 6px;
line-height: 1;
font-weight: 700;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
vertical-align: middle;
color: $text;
}
.title {
@include font-size(15);
line-height: 1;
font-weight: 700;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
vertical-align: middle;
color: $text;
}
}
.icon-close {
vertical-align: middle;
cursor: pointer;
margin-right: 6px;
color: $text;
@include transition(150ms);
}
.fast-menu-icon {
height: 24px;
display: flex;
align-items: center;
vertical-align: middle;
margin-left: 6px;
padding: 1px 4px;
line-height: 0;
border-radius: 3px;
cursor: pointer;
@include transition(150ms);
svg circle {
@include transition(150ms);
}
&:hover {
background: white;
svg circle {
stroke: $theme;
}
}
.more-icon {
vertical-align: middle;
cursor: pointer;
}
}
}
.context-menu {
min-width: 250px;
position: absolute;
z-index: 99;
box-shadow: $shadow;
background: white;
border-radius: 8px;
overflow: hidden;
top: 29px;
&.showed {
display: block;
}
}
@media (min-width: 420px) and (max-width: 890px) {
.name-wrapper {
width: 67%;
}
}
@media (max-width: 523px) {
.name-wrapper {
width: 100%;
justify-content: space-between;
}
}
.created_at-wrapper {
width: 33%;
height: 100%;
display: flex;
text-align: center;
justify-content: center;
p {
display: flex;
align-items: center;
@include font-size(11);
}
@media (max-width: 890px) {
display: none;
}
}
.navigation-icons {
width: 33%;
text-align: right;
.navigation-tool-wrapper {
margin-left: 28px;
display: inline-block;
vertical-align: middle;
}
.button {
margin-left: 5px;
&:hover {
background: white;
}
}
@media (max-width: 523px) {
display: none;
}
}
.navigation-panel {
height: 6.7%;
min-height: 63px;
padding: 10px 15px;
display: flex;
position: relative;
background-color: $light-background;
color: $text;
> div {
flex-grow: 1;
align-self: center;
white-space: nowrap;
}
}
@media (prefers-color-scheme: dark) {
.navigation-panel {
background-color: $dark_mode_foreground;
color: $light-text;
.icon-close {
color: $light-text;
}
.fast-menu-icon:hover {
background: $dark_mode_background;
}
}
.name-wrapper {
.title,
.file-count {
color: $light-text !important;
}
}
.navigation-icons {
.button:hover {
background: $dark_mode_background;
}
}
}
</style>

262
resources/js/components/FilesView/MediaFullPreview.vue
View File

@@ -1,59 +1,20 @@
<template>
<div class="media-full-preview" @keydown.esc="closeFullPreview">
<div class="navigation-panel">
<div class="name-wrapper">
<div @click="closeFullPreview" class="icon-close">&#215;</div>
<div class="name">
<p>{{ formatedName }}</p>
<p class="file-count">
({{
this.currentIndex +
1 +
" " +
$t("pronouns.of") +
" " +
this.sliderFile.length
}})
</p>
</div>
<div class="fast-menu" @click="menuOpen()">
<p>...</p>
<DesktopMediaPreviewMenu :fileInfoDetail="this.fileInfoDetail" />
</div>
</div>
<div class="created_at-wrapper">
<p>{{ currentFile.filesize }}, {{ currentFile.created_at }}</p>
</div>
<div class="navigation-icons">
<ToolbarButton
source="download"
@click.native="downloadItem"
:action="$t('actions.download')"
/>
<ToolbarButton
source="share"
:class="{ 'is-inactive': canShareInView }"
:action="$t('actions.share')"
@click.native="shareItem"
/>
<ToolbarButton
v-if="this.fileInfoDetail.type === 'image'"
source="print"
:action="$t('actions.print')"
@click.native="printMethod()"
/>
</div>
</div>
<div class="file-wrapper-preview" v-for="i in [currentIndex]" :key="i">
<div class="file-wrapper">
<audio
class="file"
v-if="fileInfoDetail.type == 'audio'"
:src="fileInfoDetail.file_url"
controlsList="nodownload"
controls
></audio>
<img
v-if="fileInfoDetail.type === 'image' && currentFile.thumbnail"
class="file"
id="image"
:src="currentFile.thumbnail"
:src="currentFile.file_url"
:style="{ width: sizeWidth, height: sizeHeight }"
v-on:load="onLoaded"
v-show="loaded"
@@ -71,8 +32,6 @@
<spinner v-if="!loaded && fileInfoDetail.type === 'image'" />
</div>
</div>
<a class="prev" @click.prevent="prev" href="#">&#10094; </a>
<a class="next" @click.prevent="next" href="#">&#10095; </a>
</div>
</template>
@@ -80,11 +39,10 @@
import { events } from "@/bus";
import { mapGetters } from "vuex";
import ToolbarButton from "@/components/FilesView/ToolbarButton";
import DesktopMediaPreviewMenu from "@/components/FilesView/DesktopMediaPreviewMenu";
import Spinner from "@/components/FilesView/Spinner";
export default {
components: { ToolbarButton, DesktopMediaPreviewMenu, Spinner },
components: { ToolbarButton, Spinner },
data() {
return {
currentIndex: 1,
@@ -92,7 +50,6 @@ export default {
loaded: false,
sizeWidth: "",
sizeHeight: "",
showingFile: "",
};
},
computed: {
@@ -103,18 +60,6 @@ export default {
Math.abs(this.currentIndex) % this.sliderFile.length
];
},
formatedName() {
let name = this.currentFile.name;
if (name.lastIndexOf(".") > -1) {
return _.truncate(name.substring(0, name.lastIndexOf(".")), {
length: 20,
});
} else {
return _.truncate(name, {
length: 20,
});
}
},
canShareInView() {
return !this.$isThisLocation([
@@ -126,15 +71,32 @@ export default {
]);
},
},
mounted() {
events.$on("filePreviewAction:next", () => {
this.currentIndex += 1;
if (this.currentIndex > this.sliderFile.length - 1) {
this.currentIndex = 0;
}
});
events.$on("filePreviewAction:prev", () => {
this.currentIndex -= 1;
if (this.currentIndex < 0) {
this.currentIndex = this.sliderFile.length - 1;
}
});
},
created() {
this.filteredFiles();
this.imageSizing();
},
watch: {
currentFile() {
//HANDLE ACUTAL VIEW IMAGE IN FIELINFODETAIL
this.$store.commit("GET_FILEINFO_DETAIL", this.currentFile);
events.$emit("actualShowingImage:ContextMenu", this.currentFile);
},
fileInfoDetail() {
//FILE DELETE HANDLING
if (!this.fileInfoDetail) {
if (this.data.length == 0) {
events.$emit("fileFullPreview:hide");
@@ -143,11 +105,11 @@ export default {
this.$store.commit("GET_FILEINFO_DETAIL", this.currentFile);
this.sliderFile = [];
this.filteredFiles();
this.$forceUpdate();
}
}
},
data(newValue, oldValue) {
//MOVE ITEM HANDLING
if (newValue != oldValue) {
this.sliderFile = [];
this.filteredFiles();
@@ -164,23 +126,10 @@ export default {
this.sizeHeight = "100%";
}
},
menuOpen() {
if (this.$isMobile()) {
events.$emit("mobileMenu:show", "showFromMediaPreview");
} else {
events.$emit("desktopMediaMenu:show");
}
},
closeFullPreview() {
events.$emit("fileFullPreview:hide");
},
printMethod() {
var tab = document.getElementById("image");
var win = window.open("", "", "height=700,width=700");
win.document.write(tab.outerHTML);
win.document.close();
win.print();
},
filteredFiles() {
this.data.filter((element) => {
if (element.type == this.fileInfoDetail.type) {
@@ -199,40 +148,6 @@ export default {
}
});
},
downloadItem() {
// Download file
this.$downloadFile(
this.currentFile.file_url,
this.currentFile.name + "." + this.currentFile.mimetype
);
},
next: function () {
this.currentIndex += 1;
if (this.currentIndex > this.sliderFile.length - 1) {
this.currentIndex = 0;
}
},
prev: function () {
this.currentIndex -= 1;
if (this.currentIndex < 0) {
this.currentIndex = this.sliderFile.length - 1;
}
},
shareItem() {
if (this.fileInfoDetail.shared) {
events.$emit("popup:open", {
name: "share-edit",
item: this.currentFile,
});
} else {
events.$emit("popup:open", {
name: "share-create",
item: this.currentFile,
});
}
},
},
};
</script>
@@ -242,84 +157,10 @@ export default {
@import "@assets/vue-file-manager/_mixins";
.media-full-preview {
height: 100%;
height: 93%;
position: relative;
}
.name-wrapper {
width: 33%;
height: 100%;
display: flex;
align-items: center;
@include font-size(15);
font-weight: 700;
.name {
display: flex;
}
.icon-close {
@include font-size(15);
font-weight: 700;
display: flex;
align-items: center;
margin-right: 10px;
color: $text;
cursor: pointer;
}
.fast-menu {
cursor: pointer;
margin-left: 10px;
p {
margin-top: -10px;
}
p:hover {
color: $theme;
}
}
}
@media (min-width: 420px) and (max-width: 750px) {
.name-wrapper {
width: 67%;
}
}
@media (max-width: 430px) {
.name-wrapper {
width: 100%;
justify-content: space-between;
}
}
.created_at-wrapper {
width: 33%;
height: 100%;
display: flex;
text-align: center;
justify-content: center;
p {
display: flex;
align-items: center;
@include font-size(11);
}
@media (max-width: 750px) {
display: none;
}
}
.navigation-icons {
width: 33%;
height: 100%;
list-style: none;
display: flex;
align-items: center;
justify-content: flex-end;
& > * {
margin-left: 5px;
}
@media (max-width: 430px) {
display: none;
}
}
.navigation-panel {
width: 100%;
height: 7%;
@@ -340,7 +181,7 @@ export default {
.file-wrapper-preview {
width: 100%;
height: 93%;
height: 100%;
padding: 30px 0px;
display: flex;
overflow: hidden;
@@ -360,47 +201,8 @@ export default {
}
}
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: 40px;
height: 40;
display: flex;
justify-content: center;
background-color: white;
padding: 8px;
color: $text;
font-weight: bold;
font-size: 18px;
// border-radius: 0 4px 4px 0;
border-radius: 50%;
text-decoration: none;
user-select: none;
}
.next {
right: 0;
}
.prev {
left: 0;
}
.prev:hover,
.next:hover {
color: $theme;
}
@media (prefers-color-scheme: dark) {
.navigation-panel {
background-color: $dark_mode_foreground;
color: $light-text;
.icon-close {
color: $light-text;
}
}
.prev,
.next {
color: $light-text;
.file-wrapper-preview {
background-color: $dark_mode_background;
}
}

481
resources/js/store/modules/fileFunctions.js vendored
View File

@@ -1,245 +1,270 @@
import i18n from '@/i18n/index'
import router from '@/router'
import {events} from '@/bus'
import {last} from 'lodash'
import axios from 'axios'
import i18n from "@/i18n/index";
import router from "@/router";
import { events } from "@/bus";
import { last } from "lodash";
import axios from "axios";
const actions = {
moveItem: ({commit, getters, dispatch}, [item_from, to_item]) => {
moveItem: ({ commit, getters, dispatch }, [item_from, to_item]) => {
// Get route
let route =
getters.sharedDetail && !getters.sharedDetail.protected
? "/api/move/" +
item_from.unique_id +
"/public/" +
router.currentRoute.params.token
: "/api/move/" + item_from.unique_id;
// Get route
let route = getters.sharedDetail && ! getters.sharedDetail.protected
? '/api/move/' + item_from.unique_id + '/public/' + router.currentRoute.params.token
: '/api/move/' + item_from.unique_id
axios
.patch(route, {
from_type: item_from.type,
to_unique_id: to_item.unique_id,
})
.then(() => {
commit("REMOVE_ITEM", item_from.unique_id);
commit("INCREASE_FOLDER_ITEM", to_item.unique_id);
axios
.patch(route, {
from_type: item_from.type,
to_unique_id: to_item.unique_id
})
.then(() => {
commit('REMOVE_ITEM', item_from.unique_id)
commit('INCREASE_FOLDER_ITEM', to_item.unique_id)
if (
item_from.type === "folder" &&
getters.currentFolder.location !== "public"
)
dispatch("getAppData");
})
.catch(() => isSomethingWrong());
},
createFolder: ({ commit, getters, dispatch }, folderName) => {
// Get route
let route =
getters.sharedDetail && !getters.sharedDetail.protected
? "/api/create-folder/public/" + router.currentRoute.params.token
: "/api/create-folder";
if (item_from.type === 'folder' && getters.currentFolder.location !== 'public')
dispatch('getAppData')
axios
.post(route, {
parent_id: getters.currentFolder.unique_id,
name: folderName,
})
.then((response) => {
commit("ADD_NEW_FOLDER", response.data);
})
.catch(() => isSomethingWrong())
},
createFolder: ({commit, getters, dispatch}, folderName) => {
events.$emit("scrollTop");
// Get route
let route = getters.sharedDetail && ! getters.sharedDetail.protected
? '/api/create-folder/public/' + router.currentRoute.params.token
: '/api/create-folder'
axios
.post(route, {
parent_id: getters.currentFolder.unique_id,
name: folderName
})
.then(response => {
commit('ADD_NEW_FOLDER', response.data)
events.$emit('scrollTop')
if ( getters.currentFolder.location !== 'public' ) {
dispatch('getAppData')
}
})
.catch(() => isSomethingWrong())
},
renameItem: ({commit, getters, dispatch}, data) => {
// Updated name in favourites panel
if (getters.permission === 'master' && data.type === 'folder')
commit('UPDATE_NAME_IN_FAVOURITES', data)
// Get route
let route = getters.sharedDetail && ! getters.sharedDetail.protected
? '/api/rename-item/' + data.unique_id + '/public/' + router.currentRoute.params.token
: '/api/rename-item/' + data.unique_id
axios
.patch(route, {
name: data.name,
type: data.type,
})
.then(response => {
commit('CHANGE_ITEM_NAME', response.data)
if (data.type === 'folder' && getters.currentFolder.location !== 'public')
dispatch('getAppData')
})
.catch(() => isSomethingWrong())
},
uploadFiles: ({commit, getters}, {form, fileSize, totalUploadedSize}) => {
return new Promise((resolve, reject) => {
// Get route
let route = getters.sharedDetail && ! getters.sharedDetail.protected
? '/api/upload/public/' + router.currentRoute.params.token
: '/api/upload'
axios
.post(route, form, {
headers: {
'Content-Type': 'application/octet-stream'
},
onUploadProgress: event => {
var percentCompleted = Math.floor(((totalUploadedSize + event.loaded) / fileSize) * 100)
commit('UPLOADING_FILE_PROGRESS', percentCompleted >= 100 ? 100 : percentCompleted)
if (percentCompleted >= 100) {
commit('PROCESSING_FILE', true)
}
}
})
.then(response => {
commit('PROCESSING_FILE', false)
// Check if user is in uploading folder, if yes, than show new file
if (response.data.folder_id == getters.currentFolder.unique_id)
commit('ADD_NEW_ITEMS', response.data)
resolve(response)
})
.catch(error => {
commit('PROCESSING_FILE', false)
reject(error)
switch (error.response.status) {
case 423:
events.$emit('alert:open', {
emoji: '😬',
title: i18n.t('popup_exceed_limit.title'),
message: i18n.t('popup_exceed_limit.message')
})
break;
case 413:
events.$emit('alert:open', {
emoji: '😟',
title: i18n.t('popup_paylod_error.title'),
message: i18n.t('popup_paylod_error.message')
})
break;
default:
events.$emit('alert:open', {
title: i18n.t('popup_error.title'),
message: i18n.t('popup_error.message'),
})
break;
}
// Reset uploader
commit('UPDATE_FILE_COUNT_PROGRESS', undefined)
})
})
},
restoreItem: ({commit, getters}, item) => {
let restoreToHome = false
// Check if file can be restored to home directory
if (getters.currentFolder.location === 'trash')
restoreToHome = true
// Remove file
commit('REMOVE_ITEM', item.unique_id)
// Remove file preview
commit('CLEAR_FILEINFO_DETAIL')
axios
.patch(getters.api + '/restore-item/' + item.unique_id, {
type: item.type,
to_home: restoreToHome,
})
.catch(() => isSomethingWrong())
},
deleteItem: ({commit, getters, dispatch}, data) => {
// Remove file
commit('REMOVE_ITEM', data.unique_id)
// Remove item from sidebar
if (getters.permission === 'master') {
if (data.type === 'folder')
commit('REMOVE_ITEM_FROM_FAVOURITES', data)
if (getters.currentFolder.location !== "public") {
dispatch("getAppData");
}
})
.catch(() => isSomethingWrong());
},
renameItem: ({ commit, getters, dispatch }, data) => {
// Updated name in favourites panel
if (getters.permission === "master" && data.type === "folder")
commit("UPDATE_NAME_IN_FAVOURITES", data);
// Get route
let route =
getters.sharedDetail && !getters.sharedDetail.protected
? "/api/rename-item/" +
data.unique_id +
"/public/" +
router.currentRoute.params.token
: "/api/rename-item/" + data.unique_id;
axios
.patch(route, {
name: data.name,
type: data.type,
})
.then((response) => {
commit("CHANGE_ITEM_NAME", response.data);
if (
data.type === "folder" &&
getters.currentFolder.location !== "public"
)
dispatch("getAppData");
})
.catch(() => isSomethingWrong());
},
uploadFiles: ({ commit, getters }, { form, fileSize, totalUploadedSize }) => {
return new Promise((resolve, reject) => {
// Get route
let route =
getters.sharedDetail && !getters.sharedDetail.protected
? "/api/upload/public/" + router.currentRoute.params.token
: "/api/upload";
axios
.post(route, form, {
headers: {
"Content-Type": "application/octet-stream",
},
onUploadProgress: (event) => {
var percentCompleted = Math.floor(
((totalUploadedSize + event.loaded) / fileSize) * 100
);
commit(
"UPLOADING_FILE_PROGRESS",
percentCompleted >= 100 ? 100 : percentCompleted
);
if (percentCompleted >= 100) {
commit("PROCESSING_FILE", true);
}
},
})
.then((response) => {
commit("PROCESSING_FILE", false);
// Check if user is in uploading folder, if yes, than show new file
if (response.data.folder_id == getters.currentFolder.unique_id)
commit("ADD_NEW_ITEMS", response.data);
resolve(response);
})
.catch((error) => {
commit("PROCESSING_FILE", false);
reject(error);
switch (error.response.status) {
case 423:
events.$emit("alert:open", {
emoji: "😬",
title: i18n.t("popup_exceed_limit.title"),
message: i18n.t("popup_exceed_limit.message"),
});
break;
case 413:
events.$emit("alert:open", {
emoji: "😟",
title: i18n.t("popup_paylod_error.title"),
message: i18n.t("popup_paylod_error.message"),
});
break;
default:
events.$emit("alert:open", {
title: i18n.t("popup_error.title"),
message: i18n.t("popup_error.message"),
});
break;
}
// Reset uploader
commit("UPDATE_FILE_COUNT_PROGRESS", undefined);
});
});
},
restoreItem: ({ commit, getters }, item) => {
let restoreToHome = false;
// Check if file can be restored to home directory
if (getters.currentFolder.location === "trash") restoreToHome = true;
// Remove file
commit("REMOVE_ITEM", item.unique_id);
// Remove file preview
commit("CLEAR_FILEINFO_DETAIL");
axios
.patch(getters.api + "/restore-item/" + item.unique_id, {
type: item.type,
to_home: restoreToHome,
})
.catch(() => isSomethingWrong());
},
deleteItem: ({ commit, getters, dispatch }, data) => {
if (data) {
//ADD BY M
// Remove file
commit("REMOVE_ITEM", data.unique_id);
// Remove item from sidebar
if (getters.permission === "master") {
if (data.type === "folder") commit("REMOVE_ITEM_FROM_FAVOURITES", data);
}
// Remove file preview
commit("CLEAR_FILEINFO_DETAIL");
// Get route
let route =
getters.sharedDetail && !getters.sharedDetail.protected
? "/api/remove-item/" +
data.unique_id +
"/public/" +
router.currentRoute.params.token
: "/api/remove-item/" + data.unique_id;
axios
.delete(route, {
data: {
type: data.type,
force_delete: data.deleted_at ? true : false,
},
})
.then(() => {
// If is folder, update app data
if (data.type === "folder") {
if (data.unique_id === getters.currentFolder.unique_id) {
if (getters.currentFolder.location === "public") {
dispatch("browseShared", [
{
folder: last(getters.browseHistory),
back: true,
init: false,
},
]);
} else {
dispatch("getFolder", [
{
folder: last(getters.browseHistory),
back: true,
init: false,
},
]);
}
}
if (getters.currentFolder.location !== "public")
dispatch("getAppData");
}
})
.catch(() => isSomethingWrong());
}
},
emptyTrash: ({ commit, getters }) => {
// Clear file browser
commit("LOADING_STATE", { loading: true, data: [] });
axios
.delete(getters.api + "/empty-trash")
.then(() => {
commit("LOADING_STATE", { loading: false, data: [] });
events.$emit("scrollTop");
// Remove file preview
commit('CLEAR_FILEINFO_DETAIL')
commit("CLEAR_FILEINFO_DETAIL");
// Get route
let route = getters.sharedDetail && ! getters.sharedDetail.protected
? '/api/remove-item/' + data.unique_id + '/public/' + router.currentRoute.params.token
: '/api/remove-item/' + data.unique_id
axios
.delete(route, {
data: {
type: data.type,
force_delete: data.deleted_at ? true : false
}
})
.then(() => {
// If is folder, update app data
if (data.type === 'folder') {
if (data.unique_id === getters.currentFolder.unique_id) {
if ( getters.currentFolder.location === 'public' ) {
dispatch('browseShared', [{folder: last(getters.browseHistory), back: true, init: false}])
} else {
dispatch('getFolder', [{folder: last(getters.browseHistory), back: true, init: false}])
}
}
if ( getters.currentFolder.location !== 'public' )
dispatch('getAppData')
}
})
.catch(() => isSomethingWrong())
},
emptyTrash: ({commit, getters}) => {
// Clear file browser
commit('LOADING_STATE', {loading: true, data: []})
axios
.delete(getters.api + '/empty-trash')
.then(() => {
commit('LOADING_STATE', {loading: false, data: []})
events.$emit('scrollTop')
// Remove file preview
commit('CLEAR_FILEINFO_DETAIL')
// Show success message
events.$emit('success:open', {
title: i18n.t('popup_trashed.title'),
message: i18n.t('popup_trashed.message'),
})
})
.catch(() => isSomethingWrong())
},
}
// Show success message
events.$emit("success:open", {
title: i18n.t("popup_trashed.title"),
message: i18n.t("popup_trashed.message"),
});
})
.catch(() => isSomethingWrong());
},
};
// Show error message
function isSomethingWrong() {
events.$emit('alert:open', {
title: i18n.t('popup_error.title'),
message: i18n.t('popup_error.message'),
})
events.$emit("alert:open", {
title: i18n.t("popup_error.title"),
message: i18n.t("popup_error.message"),
});
}
export default {
actions,
}
actions,
};

503
resources/js/views/Shared/SharedPage.vue
View File

@@ -1,272 +1,309 @@
<template>
<div id="shared">
<div id="shared">
<!-- File Preview -->
<FileFullPreview />
<!--Loading Spinenr-->
<Spinner v-if="isPageLoading"/>
<!--Loading Spinenr-->
<Spinner v-if="isPageLoading" />
<!--Move item setup-->
<MoveItem />
<!--Move item setup-->
<MoveItem />
<!--Mobile Menu-->
<MobileMenu/>
<!--Mobile Menu-->
<MobileMenu />
<!--System alerts-->
<Alert />
<!--System alerts-->
<Alert />
<!--Background vignette-->
<Vignette/>
<!--Background vignette-->
<Vignette />
<!--Password verification-->
<div v-if="currentPage === 'page-password'" id="password-view">
<!--Password verification-->
<div v-if="currentPage === 'page-password'" id="password-view">
<!--Verify share link by password-->
<AuthContent class="center" name="password" :visible="true">
<img class="logo" :src="config.app_logo" :alt="config.app_name" />
<h1>{{ $t("page_shared.title") }}</h1>
<h2>{{ $t("page_shared.subtitle") }}</h2>
<!--Verify share link by password-->
<AuthContent class="center" name="password" :visible="true">
<img class="logo" :src="config.app_logo" :alt="config.app_name">
<h1>{{ $t('page_shared.title') }}</h1>
<h2>{{ $t('page_shared.subtitle') }}</h2>
<ValidationObserver
@submit.prevent="authenticateProtected"
ref="authenticateProtected"
v-slot="{ invalid }"
tag="form"
class="form inline-form"
>
<ValidationProvider
tag="div"
mode="passive"
class="input-wrapper"
name="Password"
rules="required"
v-slot="{ errors }"
>
<input
v-model="password"
:placeholder="$t('page_shared.placeholder_pass')"
type="password"
:class="{ 'is-error': errors[0] }"
/>
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
<ValidationObserver @submit.prevent="authenticateProtected" ref="authenticateProtected" v-slot="{ invalid }" tag="form" class="form inline-form">
<AuthButton
icon="chevron-right"
:text="$t('page_shared.submit')"
:loading="isLoading"
:disabled="isLoading"
/>
</ValidationObserver>
</AuthContent>
</div>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Password" rules="required" v-slot="{ errors }">
<input v-model="password" :placeholder="$t('page_shared.placeholder_pass')" type="password" :class="{'is-error': errors[0]}"/>
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
<!--File browser-->
<div v-if="currentPage === 'page-files'" id="files-view">
<div id="single-file" v-if="sharedDetail.type === 'file'">
<div class="single-file-wrapper">
<FileItemGrid
v-if="sharedFile"
:data="sharedFile"
:context-menu="false"
/>
<AuthButton icon="chevron-right" :text="$t('page_shared.submit')" :loading="isLoading" :disabled="isLoading" />
</ValidationObserver>
</AuthContent>
<ButtonBase
@click.native="download"
class="download-button"
button-style="theme"
>
{{ $t("page_shared.download_file") }}
</ButtonBase>
</div>
</div>
<div
v-if="sharedDetail.type === 'folder'"
@contextmenu.prevent.capture="contextMenu($event, undefined)"
@click="fileViewClick"
>
<!--Context menu-->
<ContextMenu />
<!--Desktop Toolbar-->
<DesktopToolbar />
<!--File browser-->
<div v-if="currentPage === 'page-files'" id="files-view">
<div id="single-file" v-if="sharedDetail.type === 'file'">
<div class="single-file-wrapper">
<FileItemGrid v-if="sharedFile" :data="sharedFile" :context-menu="false"/>
<ButtonBase @click.native="download" class="download-button" button-style="theme">
{{ $t('page_shared.download_file') }}
</ButtonBase>
</div>
</div>
<div v-if="sharedDetail.type === 'folder'" @contextmenu.prevent.capture="contextMenu($event, undefined)" @click="fileViewClick">
<!--Context menu-->
<ContextMenu/>
<!--Desktop Toolbar-->
<DesktopToolbar/>
<!--File browser-->
<FileBrowser/>
</div>
</div>
<FileBrowser />
</div>
</div>
</div>
</template>
<script>
import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
import DesktopToolbar from '@/components/FilesView/DesktopToolbar'
import FileItemGrid from '@/components/FilesView/FileItemGrid'
import FileBrowser from '@/components/FilesView/FileBrowser'
import ContextMenu from '@/components/FilesView/ContextMenu'
import ButtonBase from '@/components/FilesView/ButtonBase'
import MobileMenu from '@/components/FilesView/MobileMenu'
import AuthContent from '@/components/Auth/AuthContent'
import AuthButton from '@/components/Auth/AuthButton'
import Spinner from '@/components/FilesView/Spinner'
import MoveItem from '@/components/Others/MoveItem'
import Vignette from '@/components/Others/Vignette'
import Alert from '@/components/FilesView/Alert'
import {required} from 'vee-validate/dist/rules'
import {mapGetters} from 'vuex'
import {events} from '@/bus'
import axios from 'axios'
import {
ValidationProvider,
ValidationObserver,
} from "vee-validate/dist/vee-validate.full";
import FileFullPreview from "@/components/FilesView/FileFullpreview";
import DesktopToolbar from "@/components/FilesView/DesktopToolbar";
import FileItemGrid from "@/components/FilesView/FileItemGrid";
import FileBrowser from "@/components/FilesView/FileBrowser";
import ContextMenu from "@/components/FilesView/ContextMenu";
import ButtonBase from "@/components/FilesView/ButtonBase";
import MobileMenu from "@/components/FilesView/MobileMenu";
import AuthContent from "@/components/Auth/AuthContent";
import AuthButton from "@/components/Auth/AuthButton";
import Spinner from "@/components/FilesView/Spinner";
import MoveItem from "@/components/Others/MoveItem";
import Vignette from "@/components/Others/Vignette";
import Alert from "@/components/FilesView/Alert";
import { required } from "vee-validate/dist/rules";
import { mapGetters } from "vuex";
import { events } from "@/bus";
import axios from "axios";
export default {
name: 'SharedPage',
components: {
ValidationProvider,
ValidationObserver,
DesktopToolbar,
FileItemGrid,
AuthContent,
FileBrowser,
ContextMenu,
AuthButton,
MobileMenu,
ButtonBase,
MoveItem,
required,
Vignette,
Spinner,
Alert,
},
computed: {
...mapGetters(['config', 'sharedDetail', 'sharedFile']),
},
data() {
return {
checkedAccount: undefined,
password: '',
isLoading: false,
isPageLoading: true,
currentPage: undefined
}
},
methods: {
async authenticateProtected() {
export default {
name: "SharedPage",
components: {
ValidationProvider,
ValidationObserver,
FileFullPreview,
DesktopToolbar,
FileItemGrid,
AuthContent,
FileBrowser,
ContextMenu,
AuthButton,
MobileMenu,
ButtonBase,
MoveItem,
required,
Vignette,
Spinner,
Alert,
},
computed: {
...mapGetters(["config", "sharedDetail", "sharedFile"]),
},
data() {
return {
checkedAccount: undefined,
password: "",
isLoading: false,
isPageLoading: true,
currentPage: undefined,
};
},
methods: {
async authenticateProtected() {
// Validate fields
const isValid = await this.$refs.authenticateProtected.validate();
// Validate fields
const isValid = await this.$refs.authenticateProtected.validate();
if (!isValid) return;
if (!isValid) return;
// Start loading
this.isLoading = true;
// Start loading
this.isLoading = true
// Send request to get verify account
axios
.post("/api/shared/authenticate/" + this.$route.params.token, {
password: this.password,
})
.then(() => {
// End loading
this.isLoading = false;
// Send request to get verify account
axios
.post('/api/shared/authenticate/' + this.$route.params.token, {
password: this.password
}).then(() => {
// Redirect to file browser page
this.currentPage = "page-files";
// End loading
this.isLoading = false
// Get protected files
this.getFiles();
})
.catch((error) => {
if (error.response.status == 401) {
this.$refs.authenticateProtected.setErrors({
Password: [error.response.data.message],
});
}
// Redirect to file browser page
this.currentPage = 'page-files'
// End loading
this.isLoading = false;
});
},
getFiles() {
// Show folder
if (this.sharedDetail.type === "folder") {
let homeDirectory = {
unique_id: this.sharedDetail.item_id,
name: this.$t("locations.home"),
location: "public",
};
// Get protected files
this.getFiles();
// Load folder
this.$store.dispatch("browseShared", [
{ folder: homeDirectory, back: false, init: true },
]);
}
}).catch(error => {
// Get file
if (this.sharedDetail.type === "file") {
this.$store.dispatch("getSingleFile");
}
},
download() {
this.$downloadFile(
this.sharedFile.file_url,
this.sharedFile.name + "." + this.sharedFile.mimetype
);
},
fileViewClick() {
events.$emit("contextMenu:hide");
},
contextMenu(event, item) {
events.$emit("contextMenu:show", event, item);
},
},
created() {
axios
.get("/api/shared/" + this.$route.params.token)
.then((response) => {
// Commit shared item options
this.$store.commit("SET_SHARED_DETAIL", response.data.data.attributes);
this.$store.commit(
"SET_PERMISSION",
response.data.data.attributes.permission
);
if (error.response.status == 401) {
// Hide page spinner
this.isPageLoading = false;
this.$refs.authenticateProtected.setErrors({
'Password': [error.response.data.message]
});
}
// End loading
this.isLoading = false
})
},
getFiles() {
// Show folder
if (this.sharedDetail.type === 'folder') {
let homeDirectory = {
unique_id: this.sharedDetail.item_id,
name: this.$t('locations.home'),
location: 'public',
}
// Load folder
this.$store.dispatch('browseShared', [{folder: homeDirectory, back: false, init: true}])
}
// Get file
if (this.sharedDetail.type === 'file') {
this.$store.dispatch('getSingleFile')
}
},
download() {
this.$downloadFile(this.sharedFile.file_url, this.sharedFile.name + '.' + this.sharedFile.mimetype)
},
fileViewClick() {
events.$emit('contextMenu:hide')
},
contextMenu(event, item) {
events.$emit('contextMenu:show', event, item)
},
},
created() {
axios
.get('/api/shared/' + this.$route.params.token, )
.then(response => {
// Commit shared item options
this.$store.commit('SET_SHARED_DETAIL', response.data.data.attributes)
this.$store.commit('SET_PERMISSION', response.data.data.attributes.permission)
// Hide page spinner
this.isPageLoading = false
// Show password page
if (response.data.data.attributes.protected) {
this.currentPage = 'page-password'
} else {
this.currentPage = 'page-files'
this.getFiles()
}
})
.catch(error => {
if (error.response.status == 404) {
this.$router.push({name: 'NotFoundShared'})
}
})
// Show password page
if (response.data.data.attributes.protected) {
this.currentPage = "page-password";
} else {
this.currentPage = "page-files";
this.getFiles();
}
}
})
.catch((error) => {
if (error.response.status == 404) {
this.$router.push({ name: "NotFoundShared" });
}
});
},
};
</script>
<style lang="scss" scoped>
@import '@assets/vue-file-manager/_variables';
@import '@assets/vue-file-manager/_mixins';
@import '@assets/vue-file-manager/_auth-form';
@import '@assets/vue-file-manager/_auth';
@import "@assets/vue-file-manager/_variables";
@import "@assets/vue-file-manager/_mixins";
@import "@assets/vue-file-manager/_auth-form";
@import "@assets/vue-file-manager/_auth";
#shared {
height: 100%;
#shared {
height: 100%;
}
#password-view {
display: grid;
height: inherit;
.center {
margin: auto;
}
}
#single-file {
position: absolute;
bottom: 0;
right: 0;
left: 0;
top: 0;
display: grid;
height: 100%;
.single-file-wrapper {
margin: auto;
text-align: center;
.download-button {
margin-top: 15px;
margin-left: auto;
margin-right: auto;
}
}
#password-view {
display: grid;
height: inherit;
/deep/ .file-wrapper {
.file-item {
width: 290px;
.center {
margin: auto;
}
&:hover,
&.is-clicked {
background: transparent;
}
.item-shared {
display: none;
}
}
#single-file {
position: absolute;
bottom: 0;
right: 0;
left: 0;
top: 0;
display: grid;
height: 100%;
.single-file-wrapper {
margin: auto;
text-align: center;
.download-button {
margin-top: 15px;
margin-left: auto;
margin-right: auto;
}
}
/deep/ .file-wrapper {
.file-item {
width: 290px;
&:hover, &.is-clicked {
background: transparent;
}
.item-shared {
display: none;
}
}
}
}
}
}
</style>