- 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-->
<div class="text-center">
<!--Item Title-->
<b
class="inline-block w-full overflow-hidden text-ellipsis whitespace-nowrap text-sm leading-3 tracking-tight md:px-6"
<span
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 }"
ref="name"
@input="renameItem"
@keydown.delete.stop
@click.stop
@keydown.enter="$refs.name.blur()"
:contenteditable="canEditName"
>
{{ itemName }}
</b>
</span>
<!--Item sub line-->
<div class="flex items-center justify-center">

View File

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

View File

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

View File

@@ -94,25 +94,17 @@ export default {
return
// Move item
if (!this.isSelectedItem) {
this.$store.dispatch('moveItem', {
to_item: this.selectedFolder,
isSelectedItem: null,
})
}
if (this.isSelectedItem) {
this.$store.dispatch('moveItem', {
to_item: this.selectedFolder,
isSelectedItem: this.pickedItem,
})
}
this.$store.dispatch('moveItem', {
to_item: this.selectedFolder,
noSelectedItem: this.isSelectedItem ? this.pickedItem : null,
})
// Close popup
events.$emit('popup:close')
// 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() {

View File

@@ -213,6 +213,11 @@
size="18"
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">
{{ result.title }}
@@ -534,6 +539,13 @@ export default {
value: 'create-team-folder',
},
},
{
title: this.$t('Create File Request'),
action: {
type: 'function',
value: 'create-file-request',
},
},
]
let functionList = [
@@ -745,6 +757,10 @@ export default {
if (arg.action.value === 'create-team-folder') {
this.$createTeamFolder()
}
if (arg.action.value === 'create-file-request') {
this.$createFileRequest()
}
}
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', {
name: 'create-upload-request',
name: 'create-file-request',
item: entry,
})
}

View File

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

View File

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

View File

@@ -6,7 +6,7 @@
v-if="invitation"
:title="$t('Invitation To Join Team Folder')"
: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,
})
"

View File

@@ -19,7 +19,7 @@ class MoveItemInUploadRequestController extends Controller
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);

View File

@@ -40,12 +40,19 @@ class UploadRequestNotification extends Notification implements ShouldQueue
*/
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
return (new MailMessage)
->subject("{$this->uploadRequest->user->settings->first_name} Request You for File Upload")
->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}.")
->action('Upload Files', url("/request/{$this->uploadRequest->id}/upload"))
->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}.")
->line($message)
->action('Upload your Files', url("/request/{$this->uploadRequest->id}/upload"))
->line('Thank you for using our application!');
}