multi email input refactoring

config/language-translations.php

@@ -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.',

resources/js/components/Admin/AppInputText.vue

@@ -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>
 

resources/js/components/Others/CreateUploadRequestPopup.vue

@@ -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

resources/js/components/Others/Forms/MultiEmailInput.vue

@@ -1,35 +1,33 @@
 <template>
-    <div class="wrapper">
+    <div
-        <!--<label class="input-label">{{ label }}:</label>-->
+		class="focus-border-theme input-dark focus-within-border-theme"
-        <div
+		:class="{'!border-rose-600':isError, '!py-3.5': !emails.length, '!px-2 !pt-[10px] !pb-0.5': emails.length}"
-            class="input-wrapper focus-within-border-theme"
+	>
-            :class="{ 'is-error': isError }"
+		<div @click="$refs.input.focus()" class="flex flex-wrap cursor-text items-center" style="grid-template-columns: auto minmax(0,1fr);">
-            @click="$refs.input.focus()"
+			<div
-        >
+				class="whitespace-nowrap flex items-center rounded-lg bg-theme-100 mr-2 mb-2 py-1 px-2 cursor-pointer w-fit"
-            <div class="email-list">
+				@click="removeEmail(email)"
-                <div
+				v-for="(email, i) in emails"
-                    class="email-tag bg-theme-100"
+				:key="i"
-                    :class="{ 'mb-offset': getCharactersLength > 45 }"
+			>
-                    v-for="(email, i) in emails"
+				<small class="text-sm text-theme mr-1">
-                    :key="i"
+					{{ email }}
-                >
+				</small>
-                    <span class="text-theme">{{ email }}</span>
+				<x-icon class="vue-feather text-theme" size="14" />
-                    <x-icon @click="removeEmail(email)" class="icon" size="14" />
+			</div>
-                </div>
+			<input
-                <input
+				@keydown.delete="removeLastEmail($event)"
-                    @keydown.delete="removeLastEmail($event)"
+				@keyup="handleEmail()"
-                    @keyup="handleEmail()"
+				v-model="email"
-                    v-model="email"
+				:size="inputSize"
-                    :size="inputSize"
+				class="w-auto font-bold text-sm bg-transparent"
-                    class="email-input"
+				:class="{'mb-2': emails.length}"
-                    :placeholder="placeHolder"
+				:placeholder="placeHolder"
-                    autocomplete="new-password"
+				autocomplete="new-password"
-                    ref="input"
+				ref="input"
-                />
+			/>
-            </div>
+		</div>
-        </div>
+	</div>
-        <span class="error-message" v-if="isError">{{ isError }}</span>
-    </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) {
+            if (! this.email.length)
-                // Get index of @ and last dot
+				return;
-                let lastDot = this.email.lastIndexOf('.')
-                let at = this.email.indexOf('@')
 
-                // Check if is after @ some dot, if email have @ anf if dont have more like one
+			// Get index of @ and last dot
-                if (lastDot < at || at === -1 || this.email.match(/@/g).length > 1) return
+			let lastDot = this.email.lastIndexOf('.')
+			let at = this.email.indexOf('@')
 
-                // First email dont need to be separated by comma or space to be sended
+			// Check if is after @ some dot, if email have @ anf if dont have more like one
-                if (this.emails.length === 0) events.$emit('emailsInputValues', [this.email])
+			if (lastDot < at || at === -1 || this.email.match(/@/g).length > 1) return
 
-                // After come or backspace push the single email to array or emails
+			// First email dont need to be separated by comma or space to be sended
-                if (this.email.includes(',') || this.email.includes(' ')) {
+			if (this.emails.length === 0) events.$emit('emailsInputValues', [this.email])
-                    let email = this.email.replace(/[","," "]/, '')
 
-                    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.email = ''
-                    this.emails.push(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>

resources/js/components/Others/ShareCreatePopup.vue

@@ -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
+						<AppInputText :error="errors[0]" class="-mt-2" :is-last="true">
-                            rules="required"
+							<MultiEmailInput
-                            v-model="shareOptions.emails"
+								rules="required"
-                            :label="$t('shared_form.recipients_label')"
+								v-model="shareOptions.emails"
-                            :isError="errors[0]"
+								:label="$t('shared_form.recipients_label')"
-                        />
+								:is-error="errors[0]"
+							/>
+						</AppInputText>
                     </ValidationProvider>
                 </div>
             </ValidationObserver>

resources/js/components/Others/ShareEditPopup.vue

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

resources/js/views/Profile.vue

@@ -20,8 +20,8 @@
         <CreatePersonalTokenPopup />
 
         <!--Payments Popup-->
-        <SelectPlanSubscriptionPopup />
+        <SelectPlanSubscriptionPopup v-if="config.subscriptionType === 'fixed'" />
-        <SelectSingleChargeMethodPopup />
+        <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',

src/App/Users/Resources/UserStorageResource.php

@@ -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,
         ]);