nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-06 02:33:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

multi email input refactoring

Browse Source
This commit is contained in:
Čarodej
2022-02-28 17:06:41 +01:00
parent dee1614297
commit 8ae24a9a6e
8 changed files with 69 additions and 173 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
config/language-translations.php
View File

@@ -742,7 +742,7 @@ return [
'actions.create' => 'Create Something',
'actions.search' => 'Search',
'mobile.create' => 'Create',
'popup.share.email_send' => 'Send link to Email',
'popup.share.email_send' => 'Send link by Email',
'popup.share.email_description' => 'Send your share link via email to many recipients.',
'expiration' => 'Expiration',
'popup.share.expiration_description' => 'Your link expire after exact period of time.',

2
resources/js/components/Admin/AppInputText.vue
View File

@@ -9,7 +9,7 @@
<slot />
<!--Input Description-->
<span v-if="error" class="pt-2 text-xs text-red-800">
<span v-if="error" class="pt-2 text-xs text-rose-600">
{{ error }}
</span>

6
resources/js/components/Others/CreateUploadRequestPopup.vue
View File

@@ -191,10 +191,10 @@ export default {
},
created() {
events.$on('popup:open', (args) => {
if (args.name === 'create-file-request')
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

197
resources/js/components/Others/Forms/MultiEmailInput.vue
View File

@@ -1,35 +1,33 @@
<template>
<div class="wrapper">
<!--<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"
>
<span class="text-theme">{{ email }}</span>
<x-icon @click="removeEmail(email)" class="icon" size="14" />
</div>
<input
@keydown.delete="removeLastEmail($event)"
@keyup="handleEmail()"
v-model="email"
:size="inputSize"
class="email-input"
:placeholder="placeHolder"
autocomplete="new-password"
ref="input"
/>
</div>
</div>
<span class="error-message" v-if="isError">{{ isError }}</span>
</div>
<div
class="focus-border-theme input-dark focus-within-border-theme"
:class="{'!border-rose-600':isError, '!py-3.5': !emails.length, '!px-2 !pt-[10px] !pb-0.5': emails.length}"
>
<div @click="$refs.input.focus()" class="flex flex-wrap cursor-text items-center" style="grid-template-columns: auto minmax(0,1fr);">
<div
class="whitespace-nowrap flex items-center rounded-lg bg-theme-100 mr-2 mb-2 py-1 px-2 cursor-pointer w-fit"
@click="removeEmail(email)"
v-for="(email, i) in emails"
:key="i"
>
<small class="text-sm text-theme mr-1">
{{ email }}
</small>
<x-icon class="vue-feather text-theme" size="14" />
</div>
<input
@keydown.delete="removeLastEmail($event)"
@keyup="handleEmail()"
v-model="email"
:size="inputSize"
class="w-auto font-bold text-sm bg-transparent"
:class="{'mb-2': emails.length}"
:placeholder="placeHolder"
autocomplete="new-password"
ref="input"
/>
</div>
</div>
</template>
<script>
@@ -41,9 +39,6 @@ export default {
components: { XIcon },
props: ['isError', 'label'],
computed: {
getCharactersLength() {
return this.emails.join('').length
},
placeHolder() {
return !this.emails.length ? this.$t('shared_form.email_placeholder') : ''
},
@@ -61,7 +56,7 @@ export default {
removeEmail(email) {
this.emails = this.emails.filter((item) => item !== email)
// After romove email send new emails list to parent
// After remove email send new emails list to parent
events.$emit('emailsInputValues', this.emails)
},
removeLastEmail(event) {
@@ -69,29 +64,30 @@ export default {
if (event.code === 'Backspace' && this.email === '') this.emails.pop()
},
handleEmail() {
if (this.email.length > 0) {
// Get index of @ and last dot
let lastDot = this.email.lastIndexOf('.')
let at = this.email.indexOf('@')
if (! this.email.length)
return;
// Check if is after @ some dot, if email have @ anf if dont have more like one
if (lastDot < at || at === -1 || this.email.match(/@/g).length > 1) return
// Get index of @ and last dot
let lastDot = this.email.lastIndexOf('.')
let at = this.email.indexOf('@')
// First email dont need to be separated by comma or space to be sended
if (this.emails.length === 0) events.$emit('emailsInputValues', [this.email])
// Check if is after @ some dot, if email have @ anf if dont have more like one
if (lastDot < at || at === -1 || this.email.match(/@/g).length > 1) return
// After come or backspace push the single email to array or emails
if (this.email.includes(',') || this.email.includes(' ')) {
let email = this.email.replace(/[","," "]/, '')
// First email dont need to be separated by comma or space to be sended
if (this.emails.length === 0) events.$emit('emailsInputValues', [this.email])
this.email = ''
// After come or backspace push the single email to array or emails
if (this.email.includes(',') || this.email.includes(' ')) {
let email = this.email.replace(/[","," "]/, '')
// Push single email to aray of emails
this.emails.push(email)
this.email = ''
events.$emit('emailsInputValues', this.emails)
}
}
// Push single email to aray of emails
this.emails.push(email)
events.$emit('emailsInputValues', this.emails)
}
},
},
created() {
@@ -101,100 +97,3 @@ export default {
},
}
</script>
<style scoped lang="scss">
@import '../../../../sass/vuefilemanager/inapp-forms';
@import '../../../../sass/vuefilemanager/forms';
.input-label {
@include font-size(14);
font-weight: 700;
margin-bottom: 8px;
}
.input-wrapper {
margin-bottom: 0;
background: white;
max-width: 100%;
display: flex;
min-height: 50px;
border-radius: 8px;
padding: 6px 10px;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.12);
cursor: text;
border: 1px solid transparent;
@include transition(150ms);
&.is-error {
border: 1px solid $danger;
box-shadow: 0 0 7px rgba($danger, 0.3);
}
&:focus-within {
//border: 1px solid $theme;
//box-shadow: 0 1px 5px rgba($theme, 0.3);
}
.email-list {
display: flex;
flex-wrap: wrap;
.email-input {
font-size: 14px;
}
}
.email-tag {
white-space: nowrap;
display: flex;
padding: 5px 10px;
border-radius: 8px;
margin-right: 5px;
align-items: center;
&.mb-offset {
margin-top: 3px;
margin-bottom: 3px;
}
span {
font-weight: 700;
@include font-size(14);
}
.icon {
cursor: pointer;
margin-left: 4px;
}
}
.email-input {
width: auto;
border: none;
font-weight: 700;
@include font-size(16);
padding-left: 11px;
&::placeholder {
color: rgba($text-muted, 0.5);
}
}
}
.dark {
.input-wrapper {
background: lighten($dark_mode_foreground, 3%);
.email-list {
.email-input {
background: lighten($dark_mode_foreground, 3%);
color: $dark_mode_text_primary;
&::placeholder {
color: $dark_mode_text_secondary;
}
}
}
}
}
</style>

18
resources/js/components/Others/ShareCreatePopup.vue
View File

@@ -95,7 +95,7 @@
<SwitchInput v-model="isEmailSharing" class="switch" :state="isEmailSharing" />
</AppInputSwitch>
<!--Set expiration-->
<!--Emails-->
<ValidationProvider
v-if="isEmailSharing"
tag="div"
@@ -103,14 +103,16 @@
name="Email"
rules="required"
v-slot="{ errors }"
class="-mt-2"
class="-mt-2 mb-1"
>
<MultiEmailInput
rules="required"
v-model="shareOptions.emails"
:label="$t('shared_form.recipients_label')"
:isError="errors[0]"
/>
<AppInputText :error="errors[0]" class="-mt-2" :is-last="true">
<MultiEmailInput
rules="required"
v-model="shareOptions.emails"
:label="$t('shared_form.recipients_label')"
:is-error="errors[0]"
/>
</AppInputText>
</ValidationProvider>
</div>
</ValidationObserver>

1
resources/js/components/Others/ShareEditPopup.vue
View File

@@ -35,6 +35,7 @@
rules="required"
v-model="emails"
:label="$t('shared_form.label_send_to_recipients')"
:is-error="errors[0]"
/>
</AppInputText>
</ValidationProvider>

12
resources/js/views/Profile.vue
View File

@@ -20,8 +20,8 @@
<CreatePersonalTokenPopup />
<!--Payments Popup-->
<SelectPlanSubscriptionPopup />
<SelectSingleChargeMethodPopup />
<SelectPlanSubscriptionPopup v-if="config.subscriptionType === 'fixed'" />
<SelectSingleChargeMethodPopup v-if="config.subscriptionType === 'metered'" />
<SidebarNavigation />
@@ -124,12 +124,6 @@ export default {
subscriptionColor() {
return this.user.data.relationships.subscription ? 'green' : 'purple'
},
canShowUpgradeWarning() {
return this.config.storageLimit && this.user.data.attributes.storage.used > 95
},
canShowIncompletePayment() {
return this.user.data.attributes.incomplete_payment
},
pages() {
let list = [
{
@@ -147,7 +141,7 @@ export default {
]
// Push billing item if subscription is set
if (['fixed', 'metered'].includes(this.config.subscriptionType)) {
if (this.config.subscriptionType !== 'none') {
list.push({
title: this.$t('Billing'),
route: 'Billing',

4
src/App/Users/Resources/UserStorageResource.php
View File

@@ -142,7 +142,7 @@ class UserStorageResource extends JsonResource
$upload = $mappedTrafficRecords->map(fn($record) => [
'created_at' => $record->created_at,
'amount' => Metric::bytes($record->upload)->format(),
'percentage' => $uploadMax !== 0
'percentage' => intval($uploadMax) !== 0
? round(($record->upload / $uploadMax) * 100, 2)
: 0,
]);
@@ -150,7 +150,7 @@ class UserStorageResource extends JsonResource
$download = $mappedTrafficRecords->map(fn($record) => [
'created_at' => $record->created_at,
'amount' => Metric::bytes($record->download)->format(),
'percentage' => $downloadMax !== 0
'percentage' => intval($downloadMax) !== 0
? round(($record->download / $downloadMax) * 100, 2)
: 0,
]);