nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-05-16 10:15:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

V 1.1 Beta

Browse Source
This commit is contained in:
MakingCG
2020-03-11 10:36:10 +01:00
parent 3285a7e1c2
commit 2deca027cd
33 changed files with 837 additions and 1148 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/App.vue
+1 -12
View File
@@ -1,6 +1,6 @@
<template>
<div id="app">
<VueFileManager :config="config" style="height: 100%; width: 100%"/>
<VueFileManager style="height: 100%; width: 100%"/>
</div>
</template>
@@ -12,21 +12,10 @@
components: {
VueFileManager
},
data() {
return {
config: {
//api: 'https://vuefilemanager.hi5ve.digital/api'
api: 'http://localhost:8000/api'
//api: 'http://172.20.10.5:8000/api'
//api: 'http://192.168.1.131:8000/api'
}
}
}
}
</script>
<style lang="scss">
@import "@assets/app.scss";
#app {
height: 100%;
resources/js/components/VueFileManager.vue
+1 -2
View File
@@ -5,6 +5,7 @@
<Auth v-if="isGuest" />
<div v-if="isLogged" id="auth">
<!--System alerts-->
<Alert />
@@ -31,11 +32,9 @@
import Auth from '@/components/VueFileManagerComponents/Auth'
import {ResizeSensor} from 'css-element-queries'
import {mapGetters} from 'vuex'
import {events} from '@/bus'
export default {
name: 'VueFileManager',
props: ['config'],
components: {
UserSettings,
FilesView,
resources/js/components/VueFileManagerComponents/Auth.vue
+32 -25
View File
@@ -19,7 +19,7 @@
<AuthButton icon="chevron-right" text="Next Step" :loading="isLoading" :disabled="isLoading"/>
</ValidationObserver>
<span class="additional-link">Don’t have an account? <b
<span v-if="config.userRegistration" class="additional-link">Don’t have an account? <b
@click="goToAuthPage('sign-up')">Register account.</b></span>
</AuthContent>
@@ -98,10 +98,10 @@
</div>
<div class="block-wrapper">
<label>Confirm your new password:</label>
<label>Confirm new password:</label>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Confirm Password"
rules="required" v-slot="{ errors }">
<input v-model="recoverPassword.newPasswordConfirm" placeholder="Confirm your new password"
<input v-model="recoverPassword.newPasswordConfirm" placeholder="Confirm new password"
type="password" :class="{'is-error': errors[0]}"/>
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
@@ -198,7 +198,7 @@
import AuthContent from '@/components/VueFileManagerComponents/Auth/AuthContent'
import AuthButton from '@/components/VueFileManagerComponents/Auth/AuthButton'
import {required} from 'vee-validate/dist/rules'
import {events} from '@/bus'
import {mapGetters} from 'vuex'
import axios from 'axios'
export default {
@@ -211,24 +211,32 @@
AuthButton,
required,
},
computed: {
...mapGetters(['config']),
},
watch: {
loginEmail(val) {
this.recoverEmail = val
}
},
data() {
return {
isLoading: false,
checkedAccount: undefined,
loginPassword: 'vuefilemanager',
loginEmail: 'peterpapp@makingcg.com',
recoverEmail: 'peterpapp@makingcg.com',
loginPassword: '',
loginEmail: '',
recoverEmail: '',
recoverPassword: {
token: undefined,
email: 'peterpapp@makingcg.com',
newPassword: 'vuefilemanager',
newPasswordConfirm: 'vuefilemanager',
email: '',
newPassword: '',
newPasswordConfirm: '',
},
register: {
name: 'Hi5Ve Digital',
email: 'peterpapp@makingcg.com',
password: 'vuefilemanager',
password_confirmation: 'vuefilemanager',
name: '',
email: '',
password: '',
password_confirmation: '',
},
}
},
@@ -299,7 +307,7 @@
email: this.loginEmail,
password: this.loginPassword,
})
.then(response => {
.then(() => {
// End loading
this.isLoading = false
@@ -335,7 +343,7 @@
.post(this.$store.getters.api + '/password/email', {
email: this.recoverEmail
})
.then(response => {
.then(() => {
// End loading
this.isLoading = false
@@ -371,7 +379,7 @@
password: this.recoverPassword.newPassword,
password_confirmation: this.recoverPassword.newPasswordConfirm,
})
.then(response => {
.then(() => {
// End loading
this.isLoading = false
@@ -414,16 +422,13 @@
// Send request to get user token
axios
.post(this.$store.getters.api + '/user/register', this.register)
.then(response => {
.then(() => {
// End loading
this.isLoading = false
// Store token to localstorage
localStorage.setItem('access_token', response.data.access_token)
// Store token to vuex
this.$store.commit('RETRIEVE_TOKEN', response.data.access_token)
// Set login state
this.$store.commit('SET_AUTHORIZED', true)
})
.catch(error => {
@@ -467,7 +472,6 @@
<style scoped lang="scss">
@import "@assets/app.scss";
//@import "@/assets/scss/_forms.scss";
.auth-form {
text-align: center;
@@ -506,6 +510,10 @@
.block-form {
margin-left: auto;
margin-right: auto;
.block-wrapper label {
text-align: right;
}
}
.additional-link {
@@ -535,7 +543,6 @@
@media only screen and (max-width: 690px) {
.auth-form {
//font-size: 90%;
width: 100%;
h1 {
resources/js/components/VueFileManagerComponents/FilesView/Alert.vue
+1 -1
View File
@@ -109,7 +109,7 @@
right: 0;
left: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.5);
background: rgba(0, 0, 0, 0.25);
}
}
resources/js/components/VueFileManagerComponents/Others/UserImageInput.vue
+1 -1
View File
@@ -11,7 +11,7 @@
ref="image"
:src="imagePreview"
class="image-preview"
v-if="data || imagePreview"
v-if="imagePreview"
/>
</div>
</template>
resources/js/components/VueFileManagerComponents/Sidebar.vue
+34 -35
View File
@@ -55,13 +55,13 @@
<TextLabel>Last Uploads</TextLabel>
<p class="empty-list" v-if="app.latest_uploads.length == 0">You don't have any latest uploads.</p>
<FileListItemThumbnail @dblclick.native="downloadFile(item)" @click.native="showFileDetail(item)"
:file="item" v-for="item in app.latest_uploads" :key="item.unique_id"/>
<FileListItemThumbnail @dblclick.native="downloadFile(item)" @click.native="showFileDetail(item)" :file="item" v-for="item in app.latest_uploads" :key="item.unique_id"/>
</div>
</div>
<!--Storage Size Info-->
<StorageSize/>
<StorageSize v-if="config.storageLimit"/>
<div v-if="isSmallAppSize" class="log-out-button">
<ButtonBase @click.native="$store.dispatch('logOut')" button-style="danger">Log Out</ButtonBase>
@@ -89,7 +89,7 @@
TextLabel,
},
computed: {
...mapGetters(['homeDirectory', 'app', 'appSize']),
...mapGetters(['homeDirectory', 'app', 'appSize', 'config']),
isSmallAppSize() {
return this.appSize === 'small'
}
@@ -174,7 +174,6 @@
<style scoped lang="scss">
@import "@assets/app.scss";
#sidebar {
position: relative;
flex: 0 0 295px;
@@ -201,39 +200,11 @@
.menu-list-wrapper {
margin-bottom: 25px;
&.favourites {
&.is-dragenter {
.menu-list {
border: 2px dashed $theme;
border-radius: 8px;
}
}
.menu-list {
border: 2px dashed transparent;
.menu-list-item {
padding: 10px 13px;
.icon {
@include font-size(20);
width: 20px;
path {
fill: $theme;
}
}
}
}
}
.menu-list {
.menu-list-item {
display: block;
padding: 10px 13px;
padding: 10px 15px;
@include transition(150ms);
cursor: pointer;
position: relative;
@@ -261,7 +232,7 @@
.icon {
@include font-size(13);
width: 15px;
margin-right: 15px;
margin-right: 9px;
vertical-align: middle;
path {
@@ -295,6 +266,34 @@
}
}
&.favourites {
&.is-dragenter {
.menu-list {
border: 2px dashed $theme;
border-radius: 8px;
}
}
.menu-list {
border: 2px dashed transparent;
.menu-list-item {
padding: 10px 13px;
.icon {
@include font-size(20);
width: 20px;
path {
fill: $theme;
}
}
}
}
}
.empty-list {
@include font-size(12);
color: $text-muted;
resources/js/components/VueFileManagerComponents/Sidebar/StorageSize.vue
+8 -1
View File
@@ -4,7 +4,7 @@
<span class="title">Storage</span>
<span class="size">{{ app.storage.used }} of {{ app.storage.capacity }} Used</span>
</div>
<ProgressBar :progress="app.storage.percentage"/>
<ProgressBar :progress="app.storage.percentage" :class="{'is-exceeded': app.storage.percentage > 100}"/>
</div>
</template>
@@ -57,6 +57,13 @@
}
}
.progress-bar {
&.is-exceeded /deep/ span {
background: $danger;
}
}
@media only screen and (max-width: 690px) {
.storage-size {
resources/js/components/VueFileManagerComponents/Sidebar/UserHeadline.vue
+1 -1
View File
@@ -103,7 +103,7 @@
.email {
@include font-size(13);
color: $light_text;
color: $theme;
display: block;
margin-top: 2px;
}
resources/js/components/VueFileManagerComponents/UserSettings.vue
+2 -15
View File
@@ -100,6 +100,8 @@
},
watch: {
name: debounce(function (val) {
if (val === '') return
this.$store.commit('UPDATE_NAME', val)
}, 300),
},
@@ -119,19 +121,11 @@
if (!isValid) return;
// Start loading
//this.isLoading = true
// Send request to get user reset link
axios
.post(this.$store.getters.api + '/user/password', {
password: this.newPassword,
password_confirmation: this.newPasswordConfirmation,
},
{
headers: {
'Authorization': 'Bearer ' + this.$store.getters.token
}
})
.then(() => {
@@ -147,9 +141,6 @@
title: 'Your password was changed!',
message: 'So now, you have awesome new password.',
})
// End loading
//this.isLoading = false
})
.catch(error => {
@@ -162,9 +153,6 @@
});
}
}
// End loading
//this.isLoading = false
})
}
},
@@ -178,7 +166,6 @@
<style lang="scss">
@import "@assets/app.scss";
.avatar-upload {
display: flex;
align-items: center;
resources/js/helpers.js
Vendored
+23 -14
View File
@@ -14,16 +14,15 @@ const Helpers = {
Vue.prototype.$updateText = debounce(function (route, name, value) {
axios.put(this.$store.getters.api + route, {name, value}, {
headers: {
'Authorization': 'Bearer ' + this.$store.getters.token
}
})
.then(response => {
console.log('done!');
})
if (value === '') return
axios.put(this.$store.getters.api + route, {name, value})
.catch(error => {
console.log('shit!');
events.$emit('alert:open', {
title: 'Whooops, something went wrong :(',
message:
"Something went wrong and we can't continue. Please contact us."
})
})
}, 300)
@@ -39,14 +38,14 @@ const Helpers = {
axios.post(this.$store.getters.api + route, formData, {
headers: {
'Content-Type': 'multipart/form-data',
'Authorization': 'Bearer ' + this.$store.getters.token,
}
})
.then(response => {
console.log('done!');
})
.catch(error => {
console.log('shit!');
events.$emit('alert:open', {
title: 'Whooops, something went wrong :(',
message:
"Something went wrong and we can't continue. Please contact us."
})
})
}
@@ -64,6 +63,16 @@ const Helpers = {
// Prevent submit empty files
if (files && files.length == 0) return
if (this.$store.getters.app.storage.percentage >= 100) {
events.$emit('alert:open', {
title: 'Whooops, you exceed your storage limit :(',
message:
"Please contact your administrator to change your limit."
})
return
}
let fileCount = files.length
let fileCountSucceed = 1
resources/js/store/modules/filesView.js
Vendored
+20 -6
View File
@@ -175,18 +175,21 @@ const actions = {
})
})
},
removeItem: (context, data) => {
removeItem: ({commit, state, getters}, data) => {
// Remove file
context.commit('REMOVE_ITEM', data.unique_id)
if (data.type === 'file') context.commit('REMOVE_ITEM_FROM_RECENT_UPLOAD', data.unique_id)
if (data.type === 'folder') context.commit('REMOVE_ITEM_FROM_FAVOURITES', data.unique_id)
commit('REMOVE_ITEM', data.unique_id)
if (data.type === 'file' || data.type === 'image')
commit('REMOVE_ITEM_FROM_RECENT_UPLOAD', data.unique_id)
if (data.type === 'folder')
commit('REMOVE_ITEM_FROM_FAVOURITES', data.unique_id)
// Remove file preview
context.commit('CLEAR_FILEINFO_DETAIL')
commit('CLEAR_FILEINFO_DETAIL')
axios
.post(context.getters.api + '/remove-item', {
.post(getters.api + '/remove-item', {
type: data.type,
unique_id: data.unique_id,
force_delete: data.deleted_at ? true : false
@@ -201,6 +204,12 @@ const actions = {
})
},
restoreItem: (context, item) => {
let restoreToHome = false
// Check if file can be restored to home directory
if (context.state.currentFolder.location === 'trash' && item.type !== 'folder') restoreToHome = true
// Remove file
context.commit('REMOVE_ITEM', item.unique_id)
@@ -211,6 +220,7 @@ const actions = {
.post(context.getters.api + '/restore-item', {
type: item.type,
unique_id: item.unique_id,
to_home: restoreToHome,
})
.catch(() => {
// Show error message
@@ -243,6 +253,10 @@ const actions = {
.then(response => {
context.commit('ADD_NEW_ITEMS', response.data)
context.commit('UPDATE_RECENT_UPLOAD', response.data)
context.commit(
'UPLOADING_FILE_PROGRESS',
0
)
resolve(response)
})
.catch(error => {
resources/js/store/modules/userAuth.js
Vendored
+4 -3
View File
@@ -21,13 +21,14 @@ const actions = {
}
)
},
logOut: (context) => {
logOut: ({getters, commit}) => {
axios
.get(context.getters.api + '/logout')
.get(getters.api + '/logout')
.then(() => {
// Commit Remove Access Token from vuex storage
context.commit('DESTROY_DATA')
commit('DESTROY_DATA')
commit('SET_CURRENT_VIEW', 'files')
})
},
addToFavourites: (context, folder_unique_id) => {
resources/sass/app.scss
Vendored
+1 -1
View File
@@ -4,4 +4,4 @@
// Variables
@import 'vue-file-manager/_variables';
@import 'vue-file-manager/_mixins';
@import 'vue-file-manager/_forms';
//@import 'vue-file-manager/_forms';
resources/views/index.blade.php
+3 -1
View File
@@ -16,8 +16,10 @@
<script>
let config = {
hasAuthCookie: {{ Cookie::has('token') ? 1 : 0 }},
api: '{{ url('/api') }}',
hasAuthCookie: {{ Cookie::has('token') ? 1 : 0 }},
userRegistration: {{ config('vuefilemanager.registration') ? 1 : 0 }},
storageLimit: {{ config('vuefilemanager.limit_storage_by_capacity') ? 1 : 0 }},
}
</script>