vuefilemanager/resources/js/components/Others/ShareCreatePopup.vue

<template>
    <PopupWrapper name="share-create">
        <!--Title-->
        <PopupHeader :title="$t('popup_share_create.title', {item: itemTypeTitle})" icon="share" />

        <!--Content-->
        <PopupContent>

            <!--Item Thumbnail-->
            <ThumbnailItem class="mb-5" :item="pickedItem" />

            <!--Form to set sharing-->
            <ValidationObserver v-if="! isGeneratedShared" @submit.prevent ref="shareForm" v-slot="{ invalid }" tag="form">

                <!--Permission Select-->
				<ValidationProvider v-if="isFolder" tag="div" mode="passive" name="Permission" rules="required" v-slot="{ errors }">
					<AppInputText :title="$t('shared_form.label_permission')" :error="errors[0]">
						<SelectInput v-model="shareOptions.permission" :options="$translateSelectOptions(permissionOptions)" :placeholder="$t('shared_form.placeholder_permission')" :isError="errors[0]" />
					</AppInputText>
				</ValidationProvider>

                <!--Password Switch-->
				<div>
					<AppInputSwitch :title="$t('shared_form.label_password_protection')" :description="$t('popup.share.password_description')">
						<SwitchInput v-model="shareOptions.isPassword" class="switch" :state="shareOptions.isPassword" />
					</AppInputSwitch>

					<!--Set password-->
					<ValidationProvider v-if="shareOptions.isPassword" tag="div" mode="passive" name="Password" rules="required" v-slot="{ errors }">
						<AppInputText :error="errors[0]" class="-mt-2">
							<input v-model="shareOptions.password" :class="{'border-red': errors[0]}" type="text" class="focus-border-theme input-dark" :placeholder="$t('page_sign_in.placeholder_password')">
						</AppInputText>
					</ValidationProvider>
				</div>

                <!--Expiration switch-->
				<div>
					<AppInputSwitch :title="$t('expiration')" :description="$t('popup.share.expiration_description')">
						<SwitchInput v-model="isExpiration" class="switch" :state="isExpiration" />
					</AppInputSwitch>

                    <!--Set expiration-->
					<AppInputText v-if="isExpiration" class="-mt-2">
                        <SelectBoxInput v-model="shareOptions.expiration" :data="$translateSelectOptions(expirationList)" class="box" />
					</AppInputText>
				</div>

                <!--Send on emails switch-->
				<div>
					<AppInputSwitch :title="$t('popup.share.email_send')" :description="$t('popup.share.email_description')" :is-last="! isEmailSharing">
						<SwitchInput v-model="isEmailSharing" class="switch" :state="isEmailSharing" />
					</AppInputSwitch>

                    <!--Set expiration-->
                    <ValidationProvider v-if="isEmailSharing" tag="div" mode="passive" name="Email" rules="required" v-slot="{ errors }" class="-mt-2">
						<MultiEmailInput rules="required" v-model="shareOptions.emails" :label="$t('shared_form.recipients_label')" :isError="errors[0]" />
					</ValidationProvider>
				</div>
            </ValidationObserver>

            <!--Copy generated link-->
			<AppInputText v-if="isGeneratedShared" :title="$t('shared_form.label_share_vie_email')" :is-last="true">
				<CopyShareLink :item="pickedItem" />
			</AppInputText>
        </PopupContent>

        <!--Actions-->
        <PopupActions>
            <ButtonBase v-if="! isGeneratedShared" class="w-full" @click.native="$closePopup()" button-style="secondary">
                {{ $t('popup_move_item.cancel') }}
            </ButtonBase>
            <ButtonBase class="w-full" @click.native="submitShareOptions" button-style="theme" :loading="isLoading" :disabled="isLoading">
                {{ submitButtonText }}
            </ButtonBase>
        </PopupActions>
    </PopupWrapper>
</template>

<script>
import AppInputText from "../Admin/AppInputText";
import AppInputSwitch from "../Admin/AppInputSwitch";
import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
import SelectBoxInput from "./Forms/SelectBoxInput";
import PopupWrapper from "./Popup/PopupWrapper";
import PopupActions from './Popup/PopupActions'
import PopupContent from './Popup/PopupContent'
import PopupHeader from './Popup/PopupHeader'
import MultiEmailInput from "./Forms/MultiEmailInput";
import SwitchInput from "./Forms/SwitchInput";
import SelectInput from "./Forms/SelectInput";
import ThumbnailItem from "./ThumbnailItem";
import ActionButton from "./ActionButton";
import CopyShareLink from "./Forms/CopyShareLink";
import ButtonBase from "../FilesView/ButtonBase";
import InfoBox from "./Forms/InfoBox";
import {LinkIcon, MailIcon} from 'vue-feather-icons'
import {required} from 'vee-validate/dist/rules'
import {mapGetters} from 'vuex'
import {events} from '../../bus'
import axios from 'axios'

export default {
    name: 'ShareCreatePopup',
    components: {
        ValidationProvider,
        ValidationObserver,
		AppInputText,
		AppInputSwitch,
        SelectBoxInput,
        ThumbnailItem,
        ActionButton,
        PopupWrapper,
        PopupActions,
        PopupContent,
        PopupHeader,
        MultiEmailInput,
        SelectInput,
        SwitchInput,
        ButtonBase,
        CopyShareLink,
        MailIcon,
        required,
        LinkIcon,
        InfoBox
    },
    computed: {
        ...mapGetters([
            'permissionOptions',
            'expirationList'
        ]),
        itemTypeTitle() {
            return this.pickedItem && this.pickedItem.data.type === 'folder' ? this.$t('types.folder') : this.$t('types.file')
        },
        isFolder() {
            return this.pickedItem && this.pickedItem.data.type === 'folder'
        },
        submitButtonText() {
            return this.isGeneratedShared ? this.$t('shared_form.button_done') : this.$t('shared_form.button_generate')
        }
    },
	watch: {
		isExpiration(val) {
			if (! val) this.shareOptions.expiration = undefined
		}
	},
    data() {
        return {
        	isExpiration: false,
        	isEmailSharing: false,
            shareOptions: {
                isPassword: false,
                expiration: undefined,
                password: undefined,
                permission: undefined,
                type: undefined,
                id: undefined,
                emails: undefined
            },
            pickedItem: undefined,
            isGeneratedShared: false,
            isLoading: false,
            sharedViaEmail: false
        }
    },
    methods: {
        async submitShareOptions() {

            // If shared was generated, then close popup
            if (this.isGeneratedShared) {
                events.$emit('popup:close')

                return
            }

            // Validate fields
            const isValid = await this.$refs.shareForm.validate()

            if (!isValid) return

            this.isLoading = true

            // Send request to get share link
            axios
                .post(`/api/share`, this.shareOptions)
                .then(response => {

                    // End loading
                    this.isGeneratedShared = true

                    this.$store.commit('UPDATE_SHARED_ITEM', response.data)

					this.pickedItem.data.relationships.shared = response.data
                })
                .catch(() => {
                    events.$emit('alert:open', {
                        title: this.$t('popup_error.title'),
                        message: this.$t('popup_error.message'),
                    })

                    // End loading
                    this.isLoading = false
                })
                .finally(() => {
                    this.isLoading = false
                })
        }
    },
    mounted() {

        events.$on('emailsInputValues', emails => this.shareOptions.emails = emails)

        // Show popup
        events.$on('popup:open', args => {

            if (args.name !== 'share-create') return

            // Store picked item
            this.pickedItem = args.item

            this.shareOptions.type = args.item.data.type
            this.shareOptions.id = args.item.data.id
        })

        // Close popup
        events.$on('popup:close', () => {

            // Restore data
            setTimeout(() => {
					this.isGeneratedShared = false
					this.isExpiration = false
					this.isEmailSharing = false
					this.shareOptions = {
						isPassword: false,
						expiration: undefined,
						password: undefined,
						permission: undefined,
						type: undefined,
						id: undefined,
						emails: undefined
					}
            }, 150)
        })
    }
}
</script>