mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-19 00:22:15 +00:00
vue frontend update
This commit is contained in:
carodej
@@ -0,0 +1,237 @@
|
||||
<template>
|
||||
<PopupWrapper name="share-edit">
|
||||
<!--Title-->
|
||||
<PopupHeader title="Update sharing options" />
|
||||
|
||||
<!--Content-->
|
||||
<PopupContent>
|
||||
|
||||
<!--Item Thumbnail-->
|
||||
<ThumbnailItem class="item-thumbnail" :item="pickedItem" info="metadata"/>
|
||||
|
||||
<!--Form to set sharing-->
|
||||
<ValidationObserver ref="shareForm" v-slot="{ invalid }" tag="form" class="form-wrapper">
|
||||
|
||||
<!--Share link-->
|
||||
<div class="input-wrapper">
|
||||
<label class="input-label">Share url:</label>
|
||||
<CopyInput size="small" :value="shareLink" />
|
||||
</div>
|
||||
|
||||
<!--Permision Select-->
|
||||
<ValidationProvider v-if="isFolder" tag="div" mode="passive" class="input-wrapper" name="Permission" rules="required" v-slot="{ errors }">
|
||||
<label class="input-label">Permission:</label>
|
||||
<SelectInput v-model="shareOptions.permission" :options="permissionOptions" default="visitor" :isError="errors[0]"/>
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
|
||||
<!--Password Switch-->
|
||||
<div class="input-wrapper">
|
||||
<div class="inline-wrapper">
|
||||
<label class="input-label">Password Protected:</label>
|
||||
<SwitchInput v-model="shareOptions.isPassword" class="switch" :state="0"/>
|
||||
</div>
|
||||
<ActionButton @click.native="changePassword" v-if="isPasswordChangeButton" icon="pencil-alt">Change Password</ActionButton>
|
||||
</div>
|
||||
|
||||
<!--Set password-->
|
||||
<ValidationProvider v-if="isPasswordInput || shareOptions.isPassword" tag="div" mode="passive" class="input-wrapper password" name="Password" rules="required" v-slot="{ errors }">
|
||||
<input v-model="shareOptions.password" :class="{'is-error': errors[0]}" type="text" placeholder="Type your password">
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
|
||||
</ValidationObserver>
|
||||
|
||||
</PopupContent>
|
||||
|
||||
<!--Actions-->
|
||||
<PopupActions>
|
||||
<ButtonBase
|
||||
class="popup-button"
|
||||
@click.native="destroySharing"
|
||||
:button-style="destroyButtonStyle"
|
||||
>{{ destroyButtonText }}
|
||||
</ButtonBase>
|
||||
<ButtonBase
|
||||
class="popup-button"
|
||||
@click.native="submitShareOptions"
|
||||
button-style="theme"
|
||||
:loading="isLoading"
|
||||
:disabled="isLoading"
|
||||
>Save Changes
|
||||
</ButtonBase>
|
||||
</PopupActions>
|
||||
</PopupWrapper>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PopupWrapper from '@/components/VueFileManagerComponents/Others/Popup/PopupWrapper'
|
||||
import PopupActions from '@/components/VueFileManagerComponents/Others/Popup/PopupActions'
|
||||
import PopupContent from '@/components/VueFileManagerComponents/Others/Popup/PopupContent'
|
||||
import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
|
||||
import PopupHeader from '@/components/VueFileManagerComponents/Others/Popup/PopupHeader'
|
||||
import SwitchInput from '@/components/VueFileManagerComponents/Others/Forms/SwitchInput'
|
||||
import SelectInput from '@/components/VueFileManagerComponents/Others/Forms/SelectInput'
|
||||
import ThumbnailItem from '@/components/VueFileManagerComponents/Others/ThumbnailItem'
|
||||
import ActionButton from '@/components/VueFileManagerComponents/Others/ActionButton'
|
||||
import CopyInput from '@/components/VueFileManagerComponents/Others/Forms/CopyInput'
|
||||
import ButtonBase from '@/components/VueFileManagerComponents/FilesView/ButtonBase'
|
||||
import {required} from 'vee-validate/dist/rules'
|
||||
import {mapGetters} from 'vuex'
|
||||
import {events} from '@/bus'
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
name: 'ShareEdit',
|
||||
components: {
|
||||
ValidationProvider,
|
||||
ValidationObserver,
|
||||
ThumbnailItem,
|
||||
ActionButton,
|
||||
PopupWrapper,
|
||||
PopupActions,
|
||||
PopupContent,
|
||||
PopupHeader,
|
||||
SelectInput,
|
||||
SwitchInput,
|
||||
ButtonBase,
|
||||
CopyInput,
|
||||
required,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['app']),
|
||||
isFolder() {
|
||||
return this.pickedItem && this.pickedItem.type === 'folder'
|
||||
},
|
||||
destroyButtonText() {
|
||||
return this.isConfirmedDestroy ? 'Confirm' : 'Stop Sharing'
|
||||
},
|
||||
destroyButtonStyle() {
|
||||
return this.isConfirmedDestroy ? 'danger-solid' : 'secondary'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
shareOptions: {
|
||||
isPassword: false,
|
||||
password: undefined,
|
||||
permission: undefined,
|
||||
},
|
||||
permissionOptions: [
|
||||
{
|
||||
label: 'Can edit and upload files',
|
||||
value: 'editor',
|
||||
icon: 'user-edit',
|
||||
},
|
||||
{
|
||||
label: 'Can only view and download',
|
||||
value: 'visitor',
|
||||
icon: 'user',
|
||||
},
|
||||
],
|
||||
pickedItem: undefined,
|
||||
isLoading: false,
|
||||
isPasswordInput: false,
|
||||
isPasswordChangeButton: true,
|
||||
isConfirmedDestroy: false,
|
||||
shareLink: 'http://192.168.1.131:8000/shared?token=3ZlQLIoCR8izoc0PemekHNq3UIMj6OrC0aQ2zowclfjFYa8P6go8fMKPnXTJomvz'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changePassword() {
|
||||
this.isPasswordInput = true
|
||||
this.isPasswordChangeButton = false
|
||||
},
|
||||
destroySharing() {
|
||||
|
||||
if (! this.isConfirmedDestroy) {
|
||||
this.isConfirmedDestroy = true
|
||||
|
||||
return
|
||||
} else {
|
||||
|
||||
this.$closePopup()
|
||||
}
|
||||
},
|
||||
async submitShareOptions() {
|
||||
|
||||
// If shared was generated, then close popup
|
||||
if (this.isGeneratedShared) {
|
||||
events.$emit('popup:close')
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
// Validate fields
|
||||
const isValid = await this.$refs.shareForm.validate();
|
||||
|
||||
if (!isValid) return;
|
||||
|
||||
this.isLoading = true
|
||||
|
||||
// Send request to get share link
|
||||
axios
|
||||
.post('/api/share/generate', this.shareOptions)
|
||||
.then(response => {
|
||||
|
||||
// End loading
|
||||
this.isLoading = false
|
||||
|
||||
this.shareLink = response.data
|
||||
this.isGeneratedShared = true
|
||||
})
|
||||
.catch(error => {
|
||||
|
||||
// todo: catch errors
|
||||
|
||||
// End loading
|
||||
this.isLoading = false
|
||||
})
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
|
||||
// Show popup
|
||||
events.$on('popup:open', args => {
|
||||
|
||||
if (args.name !== 'share-edit') return
|
||||
|
||||
// Store picked item
|
||||
this.pickedItem = args.item
|
||||
})
|
||||
|
||||
// Close popup
|
||||
events.$on('popup:close', () => {
|
||||
|
||||
// Restore data
|
||||
setTimeout(() => {
|
||||
this.isConfirmedDestroy = false
|
||||
this.isPasswordInput = false
|
||||
this.isPasswordChangeButton = true
|
||||
//this.shareLink = undefined
|
||||
this.shareOptions = {
|
||||
permission: undefined,
|
||||
password: undefined,
|
||||
isPassword: false,
|
||||
}
|
||||
}, 150)
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@assets/app.scss";
|
||||
@import "@assets/vue-file-manager/_inapp-forms.scss";
|
||||
|
||||
.input-wrapper {
|
||||
|
||||
&.password {
|
||||
margin-top: -10px;
|
||||
}
|
||||
}
|
||||
|
||||
.item-thumbnail {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user