- added file request into the spotlight

- after enter stop editing item name
This commit is contained in:
Čarodej
2022-02-25 08:35:21 +01:00
parent 45dcdcce16
commit 293eb679fa
11 changed files with 179 additions and 136 deletions

View File

@@ -74,17 +74,18 @@
<!--Item Info--> <!--Item Info-->
<div class="text-center"> <div class="text-center">
<!--Item Title--> <!--Item Title-->
<b <span
class="inline-block w-full overflow-hidden text-ellipsis whitespace-nowrap text-sm leading-3 tracking-tight md:px-6" class="inline-block w-full overflow-hidden text-ellipsis whitespace-nowrap text-sm font-bold leading-3 tracking-tight md:px-6"
:class="{ 'hover:underline': canEditName }" :class="{ 'hover:underline': canEditName }"
ref="name" ref="name"
@input="renameItem" @input="renameItem"
@keydown.delete.stop @keydown.delete.stop
@click.stop @click.stop
@keydown.enter="$refs.name.blur()"
:contenteditable="canEditName" :contenteditable="canEditName"
> >
{{ itemName }} {{ itemName }}
</b> </span>
<!--Item sub line--> <!--Item sub line-->
<div class="flex items-center justify-center"> <div class="flex items-center justify-center">

View File

@@ -52,18 +52,19 @@
<!--Item Info--> <!--Item Info-->
<div class="pl-2"> <div class="pl-2">
<!--Item Title--> <!--Item Title-->
<b <span
class="mb-0.5 block overflow-hidden text-ellipsis whitespace-nowrap text-sm" class="mb-0.5 block overflow-hidden text-ellipsis whitespace-nowrap text-sm font-bold"
:class="{ 'hover:underline': canEditName }" :class="{ 'hover:underline': canEditName }"
style="max-width: 240px" style="max-width: 240px"
ref="name" ref="name"
@input="renameItem" @input="renameItem"
@keydown.delete.stop @keydown.delete.stop
@click.stop @click.stop
@keydown.enter="$refs.name.blur()"
:contenteditable="canEditName" :contenteditable="canEditName"
> >
{{ itemName }} {{ itemName }}
</b> </span>
<!--Item sub line--> <!--Item sub line-->
<div class="flex items-center"> <div class="flex items-center">

View File

@@ -1,94 +1,94 @@
<template> <template>
<PopupWrapper name="create-upload-request"> <PopupWrapper name="create-file-request">
<!--Title--> <!--Title-->
<PopupHeader :title="$t('Create Upload Request')" icon="upload" /> <PopupHeader :title="$t('Create File Request')" icon="upload" />
<!--Content--> <!--Content-->
<PopupContent> <PopupContent>
<!--Item Thumbnail--> <!--Item Thumbnail-->
<ThumbnailItem class="mb-5" :item="pickedItem" /> <ThumbnailItem v-if="pickedItem" class="mb-5" :item="pickedItem" />
<!--Form to set upload request--> <!--Form to set upload request-->
<ValidationObserver <ValidationObserver
v-if="!generatedUploadRequest" v-if="!generatedUploadRequest"
@submit.prevent="createUploadRequest" @submit.prevent="createUploadRequest"
ref="createForm" ref="createForm"
v-slot="{ invalid }" v-slot="{ invalid }"
tag="form" tag="form"
> >
<AppInputSwitch <AppInputSwitch
:title="$t('Send Request by Email')" :title="$t('Send Request by Email')"
:description="$t('Send your file request on recipients email')" :description="$t('Send your file request on recipients email')"
> >
<SwitchInput v-model="shareViaEmail" :state="shareViaEmail" class="switch" /> <SwitchInput v-model="shareViaEmail" :state="shareViaEmail" class="switch" />
</AppInputSwitch> </AppInputSwitch>
<!--Set email--> <!--Set email-->
<ValidationProvider <ValidationProvider
v-if="shareViaEmail" v-if="shareViaEmail"
tag="div" tag="div"
mode="passive" mode="passive"
name="Email" name="Email"
rules="required" rules="required"
v-slot="{ errors }" v-slot="{ errors }"
> >
<AppInputText :error="errors[0]"> <AppInputText :error="errors[0]" class="-mt-2">
<input <input
v-model="form.email" v-model="form.email"
:class="{ 'border-red': errors[0] }" :class="{ 'border-red': errors[0] }"
type="text" type="text"
ref="input" ref="input"
class="focus-border-theme input-dark" class="focus-border-theme input-dark"
:placeholder="$t('Type email...')" :placeholder="$t('Type email...')"
/> />
</AppInputText> </AppInputText>
</ValidationProvider> </ValidationProvider>
<!--Set note--> <!--Set note-->
<ValidationProvider tag="div" mode="passive" name="Note" v-slot="{ errors }"> <ValidationProvider tag="div" mode="passive" name="Note" v-slot="{ errors }">
<AppInputText :title="$t('Message (optional)')" :error="errors[0]" :is-last="true"> <AppInputText :title="$t('Message (optional)')" :description="$t('This message will be showed for your email recipient or in the upload page.')" :error="errors[0]" :is-last="true">
<textarea <textarea
v-model="form.notes" v-model="form.notes"
rows="2" rows="2"
:class="{ 'border-red': errors[0] }" :class="{ 'border-red': errors[0] }"
type="text" type="text"
ref="input" ref="input"
class="focus-border-theme input-dark" class="focus-border-theme input-dark"
:placeholder="$t('Type message for recipient...')" :placeholder="$t('Type message for recipient...')"
></textarea> ></textarea>
</AppInputText> </AppInputText>
</ValidationProvider> </ValidationProvider>
</ValidationObserver> </ValidationObserver>
<!--Copy generated link--> <!--Copy generated link-->
<AppInputText v-if="generatedUploadRequest" :title="$t('Copy your upload request link')" :is-last="true"> <AppInputText v-if="generatedUploadRequest" :title="$t('Copy your upload request link')" :is-last="true">
<CopyInput :str="generatedUploadRequest.data.attributes.url" /> <CopyInput :str="generatedUploadRequest.data.attributes.url" />
</AppInputText> </AppInputText>
</PopupContent> </PopupContent>
<!--Actions--> <!--Actions-->
<PopupActions v-if="!generatedUploadRequest"> <PopupActions v-if="!generatedUploadRequest">
<ButtonBase class="w-full" @click.native="$closePopup()" button-style="secondary" <ButtonBase class="w-full" @click.native="$closePopup()" button-style="secondary"
>{{ $t('popup_move_item.cancel') }} >{{ $t('popup_move_item.cancel') }}
</ButtonBase> </ButtonBase>
<ButtonBase class="w-full" @click.native="createUploadRequest" :loading="isLoading" button-style="theme" <ButtonBase class="w-full" @click.native="createUploadRequest" :loading="isLoading" button-style="theme"
>{{ $t('Create Request') }} >{{ $t('Create Request') }}
</ButtonBase> </ButtonBase>
</PopupActions> </PopupActions>
<!--Actions--> <!--Actions-->
<PopupActions v-if="generatedUploadRequest"> <PopupActions v-if="generatedUploadRequest">
<ButtonBase class="w-full" @click.native="$closePopup()" button-style="theme" <ButtonBase class="w-full" @click.native="$closePopup()" button-style="theme"
>{{ $t('shared_form.button_done') }} >{{ $t('shared_form.button_done') }}
</ButtonBase> </ButtonBase>
</PopupActions> </PopupActions>
</PopupWrapper> </PopupWrapper>
</template> </template>
<script> <script>
import { ValidationProvider, ValidationObserver } from 'vee-validate/dist/vee-validate.full' import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
import AppInputSwitch from '../Admin/AppInputSwitch' import AppInputSwitch from '../Admin/AppInputSwitch'
import { required } from 'vee-validate/dist/rules' import {required} from 'vee-validate/dist/rules'
import ButtonBase from '../FilesView/ButtonBase' import ButtonBase from '../FilesView/ButtonBase'
import AppInputText from '../Admin/AppInputText' import AppInputText from '../Admin/AppInputText'
import PopupWrapper from './Popup/PopupWrapper' import PopupWrapper from './Popup/PopupWrapper'
@@ -98,70 +98,88 @@ import PopupHeader from './Popup/PopupHeader'
import SwitchInput from './Forms/SwitchInput' import SwitchInput from './Forms/SwitchInput'
import ThumbnailItem from './ThumbnailItem' import ThumbnailItem from './ThumbnailItem'
import CopyInput from './Forms/CopyInput' import CopyInput from './Forms/CopyInput'
import { events } from '../../bus' import {events} from '../../bus'
import axios from 'axios' import axios from 'axios'
export default { export default {
name: 'CreateUploadRequestPopup', name: 'CreateUploadRequestPopup',
components: { components: {
ValidationProvider, ValidationProvider,
ValidationObserver, ValidationObserver,
AppInputSwitch, AppInputSwitch,
ThumbnailItem, ThumbnailItem,
AppInputText, AppInputText,
PopupWrapper, PopupWrapper,
PopupActions, PopupActions,
PopupContent, PopupContent,
SwitchInput, SwitchInput,
PopupHeader, PopupHeader,
ButtonBase, ButtonBase,
CopyInput, CopyInput,
required, required,
}, },
data() { data() {
return { return {
form: { form: {
email: undefined, email: undefined,
notes: undefined, notes: undefined,
folder_id: undefined, folder_id: undefined,
}, },
generatedUploadRequest: undefined, generatedUploadRequest: undefined,
shareViaEmail: false, shareViaEmail: false,
pickedItem: false, pickedItem: undefined,
isLoading: false, isLoading: false,
} }
}, },
methods: { methods: {
async createUploadRequest() { async createUploadRequest() {
// Validate fields // Validate fields
const isValid = await this.$refs.createForm.validate() const isValid = await this.$refs.createForm.validate()
if (!isValid) return if (!isValid) return
this.isLoading = true this.isLoading = true
// Send request to get share link // Send request to get share link
axios axios
.post(`/api/upload-request`, this.form) .post(`/api/upload-request`, this.form)
.then((response) => { .then((response) => {
this.generatedUploadRequest = response.data this.generatedUploadRequest = response.data
}) })
.catch(() => { .catch(() => {
events.$emit('alert:open', { events.$emit('alert:open', {
title: this.$t('popup_error.title'), title: this.$t('popup_error.title'),
message: this.$t('popup_error.message'), message: this.$t('popup_error.message'),
}) })
}) })
.finally(() => { .finally(() => {
this.isLoading = false this.isLoading = false
}) })
}, },
}, },
created() { created() {
events.$on('popup:open', (args) => { events.$on('popup:open', (args) => {
if (args.name === 'create-upload-request') this.pickedItem = args.item if (args.name === 'create-file-request') this.pickedItem = args.item
this.form.folder_id = args.item.data.id this.form.folder_id = args.item.data.id
}) })
},
// Close popup
events.$on('popup:close', () => {
// Restore data
setTimeout(() => {
this.generatedUploadRequest = undefined
this.pickedItem = undefined
this.shareViaEmail = false
this.form = {
email: undefined,
notes: undefined,
folder_id: undefined,
}
}, 150)
})
},
} }
</script> </script>

View File

@@ -94,25 +94,17 @@ export default {
return return
// Move item // Move item
if (!this.isSelectedItem) { this.$store.dispatch('moveItem', {
this.$store.dispatch('moveItem', { to_item: this.selectedFolder,
to_item: this.selectedFolder, noSelectedItem: this.isSelectedItem ? this.pickedItem : null,
isSelectedItem: null, })
})
}
if (this.isSelectedItem) {
this.$store.dispatch('moveItem', {
to_item: this.selectedFolder,
isSelectedItem: this.pickedItem,
})
}
// Close popup // Close popup
events.$emit('popup:close') events.$emit('popup:close')
// If is mobile, close the selecting mod after done the move action // If is mobile, close the selecting mod after done the move action
if (this.$isMobile()) this.$store.commit('DISABLE_MULTISELECT_MODE') if (this.$isMobile())
this.$store.commit('DISABLE_MULTISELECT_MODE')
}, },
}, },
mounted() { mounted() {

View File

@@ -213,6 +213,11 @@
size="18" size="18"
class="vue-feather text-theme" class="vue-feather text-theme"
/> />
<upload-cloud-icon
v-if="result.action.value === 'create-file-request'"
size="18"
class="vue-feather text-theme"
/>
<b class="ml-3.5 text-sm font-bold"> <b class="ml-3.5 text-sm font-bold">
{{ result.title }} {{ result.title }}
@@ -534,6 +539,13 @@ export default {
value: 'create-team-folder', value: 'create-team-folder',
}, },
}, },
{
title: this.$t('Create File Request'),
action: {
type: 'function',
value: 'create-file-request',
},
},
] ]
let functionList = [ let functionList = [
@@ -745,6 +757,10 @@ export default {
if (arg.action.value === 'create-team-folder') { if (arg.action.value === 'create-team-folder') {
this.$createTeamFolder() this.$createTeamFolder()
} }
if (arg.action.value === 'create-file-request') {
this.$createFileRequest()
}
} }
this.exitSpotlight() this.exitSpotlight()

View File

@@ -113,9 +113,9 @@ const itemHelpers = {
}) })
} }
Vue.prototype.$createUploadRequest = function (entry) { Vue.prototype.$createFileRequest = function (entry = undefined) {
events.$emit('popup:open', { events.$emit('popup:open', {
name: 'create-upload-request', name: 'create-file-request',
item: entry, item: entry,
}) })
} }

View File

@@ -136,9 +136,9 @@
icon="user-plus" icon="user-plus"
/> />
<Option <Option
@click.native="$createUploadRequest(item)" @click.native="$createFileRequest(item)"
v-if="isFolder" v-if="isFolder"
:title="$t('Create Upload Request')" :title="$t('File Request')"
icon="upload-cloud" icon="upload-cloud"
/> />
</OptionGroup> </OptionGroup>

View File

@@ -89,7 +89,7 @@
:size="26" :size="26"
/> />
<b class="text-theme ml-2 text-sm"> <b class="text-theme ml-2 text-sm">
{{ $t('Tell Jane you are done!') }} {{ $t('Tell {name} you are done!', {name: userName}) }}
</b> </b>
</button> </button>
@@ -137,10 +137,16 @@
<h1 class="title"> <h1 class="title">
{{ emptyPageTitle }} {{ emptyPageTitle }}
</h1> </h1>
<p class="description max-w-[420px] mx-auto"> <p class="description max-w-[420px] mx-auto">
{{ emptyPageDescription }} {{ emptyPageDescription }}
</p> </p>
<InfoBox class="max-w-[420px] mx-auto">
<b>{{ $t('{name} leave you a message', {name: userName}) }}: </b>
<p>{{ uploadRequest.data.attributes.notes }}</p>
</InfoBox>
<ButtonUpload v-if="uploadRequest.data.attributes.status === 'active'" button-style="theme"> <ButtonUpload v-if="uploadRequest.data.attributes.status === 'active'" button-style="theme">
{{ $t('empty_page.call_to_action') }} {{ $t('empty_page.call_to_action') }}
</ButtonUpload> </ButtonUpload>
@@ -169,10 +175,12 @@ import OptionGroup from '../../components/FilesView/OptionGroup'
import Option from '../../components/FilesView/Option' import Option from '../../components/FilesView/Option'
import {events} from '../../bus' import {events} from '../../bus'
import {mapGetters} from 'vuex' import {mapGetters} from 'vuex'
import InfoBox from "../../components/Others/Forms/InfoBox";
export default { export default {
name: 'Files', name: 'Files',
components: { components: {
InfoBox,
MobileMultiSelectToolbar, MobileMultiSelectToolbar,
MobileActionButton, MobileActionButton,
FileActionsMobile, FileActionsMobile,

View File

@@ -6,7 +6,7 @@
v-if="invitation" v-if="invitation"
:title="$t('Invitation To Join Team Folder')" :title="$t('Invitation To Join Team Folder')"
:description=" :description="
$t('Jane invite you to join with his team into shared team folder', { $t('{name} invite you to join with his team into shared team folder', {
name: invitation.data.relationships.inviter.data.attributes.name, name: invitation.data.relationships.inviter.data.attributes.name,
}) })
" "

View File

@@ -19,7 +19,7 @@ class MoveItemInUploadRequestController extends Controller
return response('Access Denied', 403); return response('Access Denied', 403);
} }
$item->update(['parent_id' => $request->input('to_id')]); $item->update(['parent_id' => $request->input('to_id') ?? $uploadRequest->id]);
} }
return response('Done.', 204); return response('Done.', 204);

View File

@@ -40,12 +40,19 @@ class UploadRequestNotification extends Notification implements ShouldQueue
*/ */
public function toMail($notifiable) public function toMail($notifiable)
{ {
// Format optional message
// TODO: add to language strings
$message = $this->uploadRequest->notes
? "PS: {$this->uploadRequest->user->settings->first_name} left you a message: {$this->uploadRequest->notes}"
: null;
// TODO: add to language strings // TODO: add to language strings
return (new MailMessage) return (new MailMessage)
->subject("{$this->uploadRequest->user->settings->first_name} Request You for File Upload") ->subject("{$this->uploadRequest->user->settings->first_name} Request You for File Upload")
->greeting('Hello') ->greeting('Hello')
->line("We are emailing you because {$this->uploadRequest->user->settings->first_name} needs files from you. Please click on the link below and upload your files for {$this->uploadRequest->user->settings->first_name}.") ->line("We are emailing you because {$this->uploadRequest->user->settings->first_name} requested files from you. Please click on the link below and upload your files for {$this->uploadRequest->user->settings->first_name}.")
->action('Upload Files', url("/request/{$this->uploadRequest->id}/upload")) ->line($message)
->action('Upload your Files', url("/request/{$this->uploadRequest->id}/upload"))
->line('Thank you for using our application!'); ->line('Thank you for using our application!');
} }