add to create share link a send share vie email option

2026-04-28 11:00:39 +00:00 · 2021-01-11 21:11:09 +01:00
parent 04990fcf7b
commit 3285af3603
12 changed files with 621 additions and 7 deletions
@@ -0,0 +1,152 @@
+<template>
+    <div class="wrapper">
+        <label class="input-label">{{$t('shared_form.recipients_label')}}</label>
+        <div class="input-wrapper">
+            <div class="email-list" v-for="(email, index) in emails" :key="index">
+                <span> 
+                    <p>{{email}} </p>
+                    <x-icon @click="removeEmail(index)" class="icon" size="14" /> 
+                </span>
+            </div>
+            <input@keydown.delete=removeLastEmail($event) @keyup="handleEmail()" v-model="singleEmail" class="emails" :placeholder="placeHolder" autocomplete="new-password" />
+        </div>
+    </div>
+</template>
+
+<script>
+    import {XIcon } from 'vue-feather-icons'
+    import {events} from '@/bus'
+    export default {
+        name: "EmailsInput",
+        components: {XIcon},
+        computed: {
+            placeHolder() {
+                if(! this.emails.length)
+                    return this.$t('shared_form.email_placeholder')
+            }
+        },
+        data () {
+            return {
+                emails: [],
+                singleEmail: undefined
+            }
+        },
+        methods: {
+            removeEmail (email) {
+                // Remove email forom array of emails 
+                this.emails.shift(email)
+            },
+            removeLastEmail(event) {
+
+                  // If is input empty and presse backspace remove last email from array
+                if(event.code === 'Backspace' && this.singleEmail === '' )
+                    this.emails.pop()
+            },
+            handleEmail() {
+
+
+                // Get index of @ and last dot 
+                let lastDot = this.singleEmail.lastIndexOf('.')
+                let at = this.singleEmail.indexOf('@')
+
+                // Check if is after @ some dot, if email have @ anf if dont have more like one 
+                if(lastDot < at || at === -1 || this.singleEmail.match(/@/g).length > 1 ) return
+               
+                
+                // After come or backspace push the single email to array or emails
+                if(this.singleEmail.includes(',') || this.singleEmail.includes(' ') ) {
+                    
+                    let email = this.singleEmail.replace(/[","," "]/, "")
+
+                    // Push single email to aray of emails
+                    this.emails.push(email)
+
+                    this.singleEmail = ""
+
+                    events.$emit('emailsInputValues', this.emails)
+                }
+            }
+        }
+    }
+</script>
+
+<style scoped lang="scss">
+    @import "@assets/vue-file-manager/_inapp-forms.scss";
+    @import '@assets/vue-file-manager/_forms';
+
+    .wrapper {
+        margin-bottom: 20px;
+        padding: 0px 20px;
+    }
+
+    .input-label {
+        @include font-size(14);
+        font-weight: 700;
+        margin-bottom: 8px;
+    }
+
+    .input-wrapper   {
+        background: white;
+        display: flex;
+        align-items: center;
+        min-height: 50px;
+        border-radius: 8px;
+        padding: 13px 20px;
+        box-shadow: 0 1px 5px rgba(0, 0, 0, 0.12);
+        overflow-x: auto;
+        overflow-y: none;
+
+        &:focus-within{
+            border:1px solid $theme;
+            box-shadow: 0 1px 5px rgba($theme, 0.3);
+        }
+        .email-list {
+            white-space: nowrap;
+            span {
+                display: flex;
+                padding: 5px;
+                background: rgba($theme, .1); 
+                border-radius: 8px;
+                margin-right: 5px;
+                align-items: center;
+                p {
+                    color: $theme;
+                    font-weight: 700;
+                    @include font-size(16);
+                }
+                .icon {
+                    cursor: pointer;
+                    margin: 0px 4px;
+                }
+            }
+        }
+        .emails {
+            min-width: 100px;
+            border: none ;
+            font-weight: 700;
+            @include font-size(16);
+            appearance: none;
+
+            &::placeholder {
+                color:rgba($text-muted, .5)
+            }
+        }
+    }
+
+     @media (prefers-color-scheme: dark) {
+        .input-wrapper {
+            background: $dark_mode_foreground;
+            .emails {
+                background: $dark_mode_foreground;
+                color: $dark_mode_text_primary;
+
+                &::placeholder {
+                color:$dark_mode_text_secondary;
+            }
+            }
+        }
+    }
+    
+
+
+</style>