mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-18 08:12:15 +00:00
Create share record popup changes
This commit is contained in:
Peter Papp
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<label class="input-label">{{ label }}:</label>
|
||||
<!--<label class="input-label">{{ label }}:</label>-->
|
||||
<div class="input-wrapper focus-within-border-theme" :class="{'is-error' : isError}" @click="$refs.input.focus()">
|
||||
<div class="email-list">
|
||||
<div class="email-tag bg-theme-100" :class="{'mb-offset': getCharactersLength > 45}" v-for="(email, i) in emails" :key="i">
|
||||
|
||||
@@ -9,27 +9,8 @@
|
||||
<!--Item Thumbnail-->
|
||||
<ThumbnailItem class="item-thumbnail" :item="pickedItem" info="metadata" />
|
||||
|
||||
<!-- Infobox for successful send email -->
|
||||
<InfoBox v-if="isGeneratedShared && sharedViaEmail" class="info-box-wrapper">
|
||||
<p v-html="$t('shared_form.email_successfully_send_message')"></p>
|
||||
</InfoBox>
|
||||
|
||||
<!--Form to set sharing-->
|
||||
<ValidationObserver @submit.prevent v-if="! isGeneratedShared" ref="shareForm" v-slot="{ invalid }" tag="form" class="form-wrapper">
|
||||
|
||||
<TabWrapper>
|
||||
|
||||
<!-- Share via link -->
|
||||
<TabOption :selected="true" :title="$t('shared_form.share_by_link')" icon="link" />
|
||||
|
||||
<!-- Share via Email -->
|
||||
<TabOption :title="$t('shared_form.share_by_email')" icon="email">
|
||||
<ValidationProvider tag="div" mode="passive" name="Email" rules="required" v-slot="{ errors }">
|
||||
<MultiEmailInput rules="required" v-model="shareOptions.emails" :label="$t('shared_form.recipients_label')" :isError="errors[0]" />
|
||||
</ValidationProvider>
|
||||
</TabOption>
|
||||
|
||||
</TabWrapper>
|
||||
<ValidationObserver v-if="! isGeneratedShared" @submit.prevent ref="shareForm" v-slot="{ invalid }" tag="form" class="form block-form form-wrapper">
|
||||
|
||||
<!--Permission Select-->
|
||||
<ValidationProvider v-if="isFolder" tag="div" mode="passive" class="input-wrapper" name="Permission" rules="required" v-slot="{ errors }">
|
||||
@@ -39,38 +20,65 @@
|
||||
</ValidationProvider>
|
||||
|
||||
<!--Password Switch-->
|
||||
<div class="input-wrapper">
|
||||
<div class="inline-wrapper">
|
||||
<label class="input-label">{{ $t('shared_form.label_password_protection') }}:</label>
|
||||
<SwitchInput v-model="shareOptions.isPassword" class="switch" :state="0" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="switch-wrapper">
|
||||
<div class="input-wrapper">
|
||||
<div class="inline-wrapper">
|
||||
<div class="switch-label">
|
||||
<label class="input-label">{{ $t('shared_form.label_password_protection') }}:</label>
|
||||
<small class="input-help">{{ $t('Protect your item by your custom password.') }}</small>
|
||||
</div>
|
||||
<SwitchInput v-model="shareOptions.isPassword" class="switch" :state="0" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--Set password-->
|
||||
<ValidationProvider v-if="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" class="focus-border-theme" :placeholder="$t('page_sign_in.placeholder_password')">
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
<!--Set password-->
|
||||
<ValidationProvider v-if="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" class="focus-border-theme" :placeholder="$t('page_sign_in.placeholder_password')">
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
|
||||
<!--More options-->
|
||||
<div class="more-options" v-if="isMoreOptions">
|
||||
<!--Expiration switch-->
|
||||
<div class="switch-wrapper">
|
||||
<div class="input-wrapper">
|
||||
<div class="inline-wrapper">
|
||||
<div class="switch-label">
|
||||
<label class="input-label">{{ $t('Expiration') }}:</label>
|
||||
<small class="input-help">{{ $t('Your link expire after exact period of time.') }}</small>
|
||||
</div>
|
||||
<SwitchInput v-model="isExpiration" class="switch" :state="0" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--Set expiration-->
|
||||
<div class="input-wrapper">
|
||||
<label class="input-label">{{ $t('shared_form.label_expiration') }}:</label>
|
||||
<div v-if="isExpiration" class="input-wrapper">
|
||||
<SelectBoxInput v-model="shareOptions.expiration" :data="$translateSelectOptions(expirationList)" class="box" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ActionButton @click.native="moreOptions" :icon="isMoreOptions ? 'x' : 'pencil-alt'">
|
||||
{{ moreOptionsTitle }}
|
||||
</ActionButton>
|
||||
<!--Send on emails switch-->
|
||||
<div class="switch-wrapper">
|
||||
<div class="input-wrapper">
|
||||
<div class="inline-wrapper">
|
||||
<div class="switch-label">
|
||||
<label class="input-label">{{ $t('Send on Emails') }}:</label>
|
||||
<small class="input-help">{{ $t('Send your share link via email to many recipients.') }}</small>
|
||||
</div>
|
||||
<SwitchInput v-model="isEmailSharing" class="switch" :state="0" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--Set expiration-->
|
||||
<ValidationProvider v-if="isEmailSharing" class="input-wrapper" tag="div" mode="passive" name="Email" rules="required" v-slot="{ errors }">
|
||||
<MultiEmailInput rules="required" v-model="shareOptions.emails" :label="$t('shared_form.recipients_label')" :isError="errors[0]" />
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
</ValidationObserver>
|
||||
|
||||
<!--Copy generated link-->
|
||||
<div v-if="isGeneratedShared" class="form-wrapper">
|
||||
<div class="input-wrapper">
|
||||
<label class="input-label">{{ this.sharedViaEmail ? $t('shared_form.label_share_vie_email') : $t('shared_form.label_shared_url') }}:</label>
|
||||
<label class="input-label">{{ $t('shared_form.label_share_vie_email') }}:</label>
|
||||
<CopyShareLink size="small" :item="pickedItem" />
|
||||
</div>
|
||||
</div>
|
||||
@@ -148,13 +156,17 @@ export default {
|
||||
},
|
||||
submitButtonText() {
|
||||
return this.isGeneratedShared ? this.$t('shared_form.button_done') : this.$t('shared_form.button_generate')
|
||||
},
|
||||
moreOptionsTitle() {
|
||||
return this.isMoreOptions ? this.$t('shared_form.button_close_options') : this.$t('shared_form.button_more_options')
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
isExpiration(val) {
|
||||
if (! val) this.shareOptions.expiration = undefined
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isExpiration: false,
|
||||
isEmailSharing: false,
|
||||
shareOptions: {
|
||||
isPassword: false,
|
||||
expiration: undefined,
|
||||
@@ -167,17 +179,10 @@ export default {
|
||||
pickedItem: undefined,
|
||||
isGeneratedShared: false,
|
||||
isLoading: false,
|
||||
isMoreOptions: false,
|
||||
sharedViaEmail: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
moreOptions() {
|
||||
this.isMoreOptions = !this.isMoreOptions
|
||||
|
||||
if (!this.isMoreOptions)
|
||||
this.shareOptions.expiration = undefined
|
||||
},
|
||||
async submitShareOptions() {
|
||||
|
||||
// If shared was generated, then close popup
|
||||
@@ -199,10 +204,6 @@ export default {
|
||||
.post(`/api/share`, this.shareOptions)
|
||||
.then(response => {
|
||||
|
||||
// Show infobox and reset emails container
|
||||
if (this.shareOptions.emails)
|
||||
this.sharedViaEmail = true
|
||||
|
||||
// End loading
|
||||
this.isGeneratedShared = true
|
||||
|
||||
@@ -224,7 +225,7 @@ export default {
|
||||
},
|
||||
mounted() {
|
||||
|
||||
events.$on('emailsInputValues', (emails) => this.shareOptions.emails = emails)
|
||||
events.$on('emailsInputValues', emails => this.shareOptions.emails = emails)
|
||||
|
||||
// Show popup
|
||||
events.$on('popup:open', args => {
|
||||
@@ -243,18 +244,18 @@ export default {
|
||||
|
||||
// Restore data
|
||||
setTimeout(() => {
|
||||
this.shareOptions = {
|
||||
permission: undefined,
|
||||
password: undefined,
|
||||
isPassword: false,
|
||||
expiration: undefined,
|
||||
type: undefined,
|
||||
id: undefined,
|
||||
emails: undefined
|
||||
}
|
||||
this.isGeneratedShared = false
|
||||
this.isMoreOptions = false
|
||||
this.sharedViaEmail = false
|
||||
this.isGeneratedShared = false
|
||||
this.isExpiration = false
|
||||
this.isEmailSharing = false
|
||||
this.shareOptions = {
|
||||
isPassword: false,
|
||||
expiration: undefined,
|
||||
password: undefined,
|
||||
permission: undefined,
|
||||
type: undefined,
|
||||
id: undefined,
|
||||
emails: undefined
|
||||
}
|
||||
}, 150)
|
||||
})
|
||||
}
|
||||
@@ -265,10 +266,6 @@ export default {
|
||||
@import "resources/sass/vuefilemanager/_inapp-forms.scss";
|
||||
@import '/resources/sass/vuefilemanager/_forms';
|
||||
|
||||
.more-options {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.input-wrapper {
|
||||
|
||||
&.password {
|
||||
|
||||
@@ -9,64 +9,69 @@
|
||||
<!--Item Thumbnail-->
|
||||
<ThumbnailItem class="item-thumbnail" :item="pickedItem" info="metadata"/>
|
||||
|
||||
<!-- Infobox for successfull sended email -->
|
||||
<InfoBox v-if="sendToRecipientsMenu && isEmailSended" class="info-box-wrapper">
|
||||
<p v-html="$t('shared_form.email_successfully_send_message')"></p>
|
||||
</InfoBox>
|
||||
|
||||
<!--Get share link-->
|
||||
<div v-if="! sendToRecipientsMenu || (sendToRecipientsMenu && isEmailSended)" class="input-wrapper copy-input">
|
||||
<label class="input-label">{{ $t('shared_form.label_share_vie_email') }}:</label>
|
||||
<CopyShareLink size="small" :item="pickedItem" />
|
||||
</div>
|
||||
|
||||
<!--Share via email-->
|
||||
<ValidationObserver @submit.prevent v-if="sendToRecipientsMenu && !isEmailSended" v-slot="{ invalid }" ref="shareEmail" tag="form" class="form-wrapper">
|
||||
|
||||
<ValidationProvider tag="div" mode="passive" name="Email" rules="required" v-slot="{ errors }">
|
||||
<MultiEmailInput rules="required" v-model="emails" :label="$t('shared_form.label_send_to_recipients')" :isError="errors[0]" />
|
||||
</ValidationProvider>
|
||||
|
||||
</ValidationObserver>
|
||||
|
||||
<!--Form to set sharing-->
|
||||
<ValidationObserver @submit.prevent v-if="! sendToRecipientsMenu" ref="shareForm" v-slot="{ invalid }" tag="form" class="form-wrapper">
|
||||
<ValidationObserver @submit.prevent v-if="! sendToRecipientsMenu" ref="shareForm" v-slot="{ invalid }" tag="form" class="form block-form form-wrapper">
|
||||
|
||||
<!--Permision Select-->
|
||||
<!--Permission Select-->
|
||||
<ValidationProvider v-if="isFolder" tag="div" mode="passive" class="input-wrapper" name="Permission" rules="required" v-slot="{ errors }">
|
||||
<label class="input-label">{{ $t('shared_form.label_permission') }}:</label>
|
||||
<SelectInput v-model="shareOptions.permission" :options="$translateSelectOptions(permissionOptions)" :default="shareOptions.permission" :placeholder="$t('shared_form.placeholder_permission')" :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">{{ $t('shared_form.label_password_protection') }}:</label>
|
||||
<SwitchInput v-model="shareOptions.isProtected" :state="shareOptions.isProtected" class="switch"/>
|
||||
</div>
|
||||
<ActionButton v-if="(pickedItem.shared.is_protected && canChangePassword) && shareOptions.isProtected" @click.native="changePassword" class="change-password">
|
||||
<!--Password Switch-->
|
||||
<div class="switch-wrapper">
|
||||
<div class="input-wrapper">
|
||||
<div class="inline-wrapper">
|
||||
<div class="switch-label">
|
||||
<label class="input-label">{{ $t('shared_form.label_password_protection') }}:</label>
|
||||
<small class="input-help">{{ $t('Protect your item by your custom password.') }}</small>
|
||||
</div>
|
||||
<SwitchInput v-model="shareOptions.isProtected" class="switch" :state="shareOptions.isProtected" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ActionButton v-if="(pickedItem.shared.is_protected && canChangePassword) && shareOptions.isProtected" @click.native="changePassword" class="change-password">
|
||||
{{ $t('popup_share_edit.change_pass') }}
|
||||
</ActionButton>
|
||||
</div>
|
||||
|
||||
<!--Set password-->
|
||||
<ValidationProvider v-if="shareOptions.isProtected && ! canChangePassword" 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" class="focus-border-theme" :placeholder="$t('page_sign_in.placeholder_password')">
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
<!--Set password-->
|
||||
<ValidationProvider v-if="shareOptions.isProtected && ! canChangePassword" 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" class="focus-border-theme" :placeholder="$t('page_sign_in.placeholder_password')">
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
|
||||
<!--More options-->
|
||||
<div class="more-options" v-if="isMoreOptions">
|
||||
<!--Expiration switch-->
|
||||
<div class="switch-wrapper">
|
||||
<div class="input-wrapper">
|
||||
<div class="inline-wrapper">
|
||||
<div class="switch-label">
|
||||
<label class="input-label">{{ $t('Expiration') }}:</label>
|
||||
<small class="input-help">{{ $t('Your link expire after exact period of time.') }}</small>
|
||||
</div>
|
||||
<SwitchInput v-model="shareOptions.expiration" class="switch" :state="shareOptions.expiration ? 1 : 0" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--Set expiration-->
|
||||
<div class="input-wrapper">
|
||||
<label class="input-label">{{ $t('shared_form.label_expiration') }}:</label>
|
||||
<SelectBoxInput v-model="shareOptions.expiration" :data="$translateSelectOptions(expirationList)" :value="shareOptions.expiration" class="box"/>
|
||||
<!--Set expiration-->
|
||||
<div v-if="shareOptions.expiration" class="input-wrapper">
|
||||
<SelectBoxInput v-model="shareOptions.expiration" :data="$translateSelectOptions(expirationList)" :value="shareOptions.expiration" class="box" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ActionButton @click.native="moreOptions" :icon="isMoreOptions || shareOptions.expiration ? 'x' : 'pencil-alt'">
|
||||
{{ moreOptionsTitle }}
|
||||
</ActionButton>
|
||||
</div>
|
||||
|
||||
</ValidationObserver>
|
||||
|
||||
@@ -164,36 +169,31 @@
|
||||
|
||||
if(this.sendToRecipientsMenu)
|
||||
return this.isEmailSended ? this.$t('shared_form.button_done') : this.$t('popup_share_edit.send_to_recipients')
|
||||
|
||||
},
|
||||
isSharedLocation() {
|
||||
return this.currentFolder && this.currentFolder.location === 'shared'
|
||||
},
|
||||
moreOptionsTitle() {
|
||||
return this.isMoreOptions ? this.$t('shared_form.button_close_options') : this.$t('shared_form.button_more_options')
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'shareOptions.expiration': function (val) {
|
||||
if (!val) {
|
||||
this.shareOptions.expiration = undefined
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isExpiration: false,
|
||||
sendToRecipientsMenu: false,
|
||||
isConfirmedDestroy: false,
|
||||
canChangePassword: false,
|
||||
shareOptions: undefined,
|
||||
pickedItem: undefined,
|
||||
emails:undefined,
|
||||
isMoreOptions: false,
|
||||
isEmailSended:false,
|
||||
isDeleting: false,
|
||||
emails:undefined,
|
||||
isLoading: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
moreOptions() {
|
||||
this.isMoreOptions = ! this.isMoreOptions
|
||||
|
||||
if (! this.isMoreOptions)
|
||||
this.shareOptions.expiration = undefined
|
||||
},
|
||||
changePassword() {
|
||||
this.canChangePassword = false
|
||||
},
|
||||
@@ -216,11 +216,8 @@
|
||||
.finally(() => {
|
||||
|
||||
this.isEmailSended = true
|
||||
|
||||
// End loading
|
||||
this.isLoading = false
|
||||
})
|
||||
|
||||
},
|
||||
async destroySharing() {
|
||||
|
||||
@@ -333,7 +330,7 @@
|
||||
}
|
||||
|
||||
if (args.item.shared.expire_in)
|
||||
this.isMoreOptions = true
|
||||
this.isExpiration = true
|
||||
|
||||
if (args.sentToEmail)
|
||||
this.sendToRecipientsMenu = true
|
||||
@@ -348,11 +345,12 @@
|
||||
// Restore data
|
||||
setTimeout(() => {
|
||||
this.sendToRecipientsMenu = false
|
||||
this.isEmailSended = false
|
||||
this.isConfirmedDestroy = false
|
||||
this.canChangePassword = false
|
||||
this.pickedItem = undefined
|
||||
this.shareOptions = undefined
|
||||
this.pickedItem = undefined
|
||||
this.isEmailSended = false
|
||||
this.isExpiration = false
|
||||
}, 150)
|
||||
})
|
||||
}
|
||||
@@ -377,6 +375,7 @@
|
||||
.change-password {
|
||||
opacity: 0.7;
|
||||
text-decoration: underline;
|
||||
margin-top: -8px;
|
||||
}
|
||||
|
||||
.item-thumbnail {
|
||||
|
||||
Reference in New Issue
Block a user