nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-05-13 08:45:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

- add button to email input in team popup

Browse Source
This commit is contained in:
Čarodej
2021-11-01 16:20:14 +01:00
parent 4e86e7dd4b
commit bf4d860bb8
2 changed files with 128 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/mix-manifest.json
+34 -2
View File
@@ -57,7 +57,7 @@
"/chunks/plan-settings.js": "/chunks/plan-settings.js?id=4b3d3d91faa908b876ac",
"/chunks/plan-subscribers.js": "/chunks/plan-subscribers.js?id=b5017d712135057283c9",
"/chunks/plans.js": "/chunks/plans.js?id=6fca685daa45f22e4c8f",
"/chunks/platform.js": "/chunks/platform.js?id=1bfb27954f1608451825",
"/chunks/platform.js": "/chunks/platform.js?id=fe765bee5f683ba2f611",
"/chunks/platform~chunks/settings-subscription~chunks/shared~chunks/user-subscription.js": "/chunks/platform~chunks/settings-subscription~chunks/shared~chunks/user-subscription.js?id=8656b69a97cace919251",
"/chunks/platform~chunks/shared.js": "/chunks/platform~chunks/shared.js?id=deeb9a69d518ff12d81e",
"/chunks/profile.js": "/chunks/profile.js?id=0638997b77c6f1246062",
@@ -785,5 +785,37 @@
"/chunks/platform~chunks/shared.c7496b49748df484cac6.hot-update.js": "/chunks/platform~chunks/shared.c7496b49748df484cac6.hot-update.js",
"/chunks/platform~chunks/shared.0b3bd148f3db3e44a8da.hot-update.js": "/chunks/platform~chunks/shared.0b3bd148f3db3e44a8da.hot-update.js",
"/chunks/platform~chunks/shared.77da06c091f786b87bb3.hot-update.js": "/chunks/platform~chunks/shared.77da06c091f786b87bb3.hot-update.js",
"/chunks/platform~chunks/shared.195a62287c751e19f499.hot-update.js": "/chunks/platform~chunks/shared.195a62287c751e19f499.hot-update.js"
"/chunks/platform~chunks/shared.195a62287c751e19f499.hot-update.js": "/chunks/platform~chunks/shared.195a62287c751e19f499.hot-update.js",
"/chunks/platform.06878e1e224fbb8c9a9b.hot-update.js": "/chunks/platform.06878e1e224fbb8c9a9b.hot-update.js",
"/chunks/platform.2cc32e92e324b0e88340.hot-update.js": "/chunks/platform.2cc32e92e324b0e88340.hot-update.js",
"/chunks/platform.e3c8128903052d335439.hot-update.js": "/chunks/platform.e3c8128903052d335439.hot-update.js",
"/chunks/platform.cd03e6e57a1d9b337ead.hot-update.js": "/chunks/platform.cd03e6e57a1d9b337ead.hot-update.js",
"/chunks/platform.533a17c896c0ce1b4f89.hot-update.js": "/chunks/platform.533a17c896c0ce1b4f89.hot-update.js",
"/chunks/platform.9c45e1d0fb3f3cbafbf0.hot-update.js": "/chunks/platform.9c45e1d0fb3f3cbafbf0.hot-update.js",
"/chunks/platform.75c5e01e9e413e38f056.hot-update.js": "/chunks/platform.75c5e01e9e413e38f056.hot-update.js",
"/chunks/platform.c9b1f98db5548ccb8672.hot-update.js": "/chunks/platform.c9b1f98db5548ccb8672.hot-update.js",
"/chunks/platform.6d7e33ea3460219d9c72.hot-update.js": "/chunks/platform.6d7e33ea3460219d9c72.hot-update.js",
"/chunks/platform.e5c1302912c51ebda523.hot-update.js": "/chunks/platform.e5c1302912c51ebda523.hot-update.js",
"/chunks/platform.c808c4bb824b994ad074.hot-update.js": "/chunks/platform.c808c4bb824b994ad074.hot-update.js",
"/chunks/platform.1a794152419f2af60d74.hot-update.js": "/chunks/platform.1a794152419f2af60d74.hot-update.js",
"/chunks/platform.e9a4257e91165d143823.hot-update.js": "/chunks/platform.e9a4257e91165d143823.hot-update.js",
"/chunks/platform.f79a5bbe692a762f3c61.hot-update.js": "/chunks/platform.f79a5bbe692a762f3c61.hot-update.js",
"/chunks/platform.0f7f01bc45bb93fc9889.hot-update.js": "/chunks/platform.0f7f01bc45bb93fc9889.hot-update.js",
"/chunks/platform.b0679a6ba1bd445d5f78.hot-update.js": "/chunks/platform.b0679a6ba1bd445d5f78.hot-update.js",
"/chunks/platform.c8fb7b4c42efea8d5631.hot-update.js": "/chunks/platform.c8fb7b4c42efea8d5631.hot-update.js",
"/chunks/platform.ebfd24f64f12ff13ecc2.hot-update.js": "/chunks/platform.ebfd24f64f12ff13ecc2.hot-update.js",
"/chunks/platform.b150a0ddb369822d9ff9.hot-update.js": "/chunks/platform.b150a0ddb369822d9ff9.hot-update.js",
"/chunks/platform.8c0c767c3eb5de6257e2.hot-update.js": "/chunks/platform.8c0c767c3eb5de6257e2.hot-update.js",
"/chunks/platform.2526245c0fa6da6bc8c2.hot-update.js": "/chunks/platform.2526245c0fa6da6bc8c2.hot-update.js",
"/chunks/platform.92e02167fc033c349d8a.hot-update.js": "/chunks/platform.92e02167fc033c349d8a.hot-update.js",
"/chunks/platform.d325bffa26f7c525bd8c.hot-update.js": "/chunks/platform.d325bffa26f7c525bd8c.hot-update.js",
"/chunks/platform.00cc8d5df831dcea53a8.hot-update.js": "/chunks/platform.00cc8d5df831dcea53a8.hot-update.js",
"/chunks/platform.1348226281f14a615d4e.hot-update.js": "/chunks/platform.1348226281f14a615d4e.hot-update.js",
"/chunks/platform.5f998ee5665feb813003.hot-update.js": "/chunks/platform.5f998ee5665feb813003.hot-update.js",
"/chunks/platform.44b1cae750cc5505d981.hot-update.js": "/chunks/platform.44b1cae750cc5505d981.hot-update.js",
"/chunks/platform.627df4469803b167cd28.hot-update.js": "/chunks/platform.627df4469803b167cd28.hot-update.js",
"/chunks/platform.f6a88786ee5a3bd2b5f1.hot-update.js": "/chunks/platform.f6a88786ee5a3bd2b5f1.hot-update.js",
"/chunks/platform.4846404e57f725f342f9.hot-update.js": "/chunks/platform.4846404e57f725f342f9.hot-update.js",
"/chunks/platform.6af4f0f008df9b69a334.hot-update.js": "/chunks/platform.6af4f0f008df9b69a334.hot-update.js",
"/chunks/platform.4158f79f7ac36092fb9a.hot-update.js": "/chunks/platform.4158f79f7ac36092fb9a.hot-update.js"
}
resources/js/components/Teams/CreateTeamFolderPopup.vue
+94 -74
View File
@@ -4,13 +4,13 @@
<!--Title-->
<PopupHeader :title="popupTitle" icon="user-plus" />
<!--Content-->
<!--Content-->
<PopupContent>
<!--Item Thumbnail-->
<ThumbnailItem v-if="! isNewFolderTeamCreation" class="item-thumbnail" :item="item" info="metadata" />
<!--Form to set team folder-->
<!--Form to set team folder-->
<ValidationObserver @submit.prevent="createTeamFolder" ref="teamFolderForm" v-slot="{ invalid }" tag="form" class="form-wrapper">
<!--Set folder name-->
@@ -20,19 +20,35 @@
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
<!--Add Member-->
<!--Add Member-->
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Email" v-slot="{ errors }">
<label class="input-label">{{ $t('Add Member') }}:</label>
<input @keypress.enter.stop.prevent="addMember" ref="email" v-model="email" :class="{'is-error': errors[0]}" type="email" class="focus-border-theme" :placeholder="$t('Type member email...')">
<div class="relative">
<span
v-if="email"
@click="addMember"
class="button-base theme absolute right-2 px-3 py-2 font-bold text-sm rounded-lg top-1/2 transform -translate-y-1/2 cursor-pointer"
>
Add
</span>
<input @keypress.enter.stop.prevent="addMember" ref="email" v-model="email" :class="{'is-error': errors[0]}" type="email" class="focus-border-theme" :placeholder="$t('Type member email...')">
</div>
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
<!--Member list-->
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Members" rules="required" v-slot="{ errors }">
<label class="input-label">{{ $t('Your Members') }}:</label>
<span v-if="errors[0]" class="error-message" style="margin-top: -5px">{{ $t('Please add at least one member.') }}</span>
<span v-if="errors[0]" class="error-message" style="margin-top: -5px">
{{ $t('Please add at least one member.') }}
</span>
<TeamList v-model="invitations" />
<p v-if="Object.values(invitations).length === 0" class="input-help">{{ $t('Please add at least one member into your Team Folder.') }}</p>
<p v-if="Object.values(invitations).length === 0" class="text-xs dark:text-gray-500">
{{ $t('Please add at least one member into your Team Folder.') }}
</p>
</ValidationProvider>
<InfoBox v-if="! isNewFolderTeamCreation" style="margin-bottom: 0">
@@ -42,21 +58,21 @@
</PopupContent>
<!--Actions-->
<!--Actions-->
<PopupActions>
<ButtonBase
class="popup-button"
@click.native="$closePopup()"
button-style="secondary"
>{{ $t('popup_move_item.cancel') }}
class="popup-button"
@click.native="$closePopup()"
button-style="secondary"
>{{ $t('popup_move_item.cancel') }}
</ButtonBase>
<ButtonBase
class="popup-button"
@click.native="createTeamFolder"
button-style="theme"
:loading="isLoading"
:disabled="isLoading"
>{{ popupSubmit }}
class="popup-button"
@click.native="createTeamFolder"
button-style="theme"
:loading="isLoading"
:disabled="isLoading"
>{{ popupSubmit }}
</ButtonBase>
</PopupActions>
</PopupWrapper>
@@ -64,55 +80,55 @@
<script>
import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
import PopupWrapper from '/resources/js/components/Others/Popup/PopupWrapper'
import PopupActions from '/resources/js/components/Others/Popup/PopupActions'
import PopupContent from '/resources/js/components/Others/Popup/PopupContent'
import PopupHeader from '/resources/js/components/Others/Popup/PopupHeader'
import ThumbnailItem from '/resources/js/components/Others/ThumbnailItem'
import ButtonBase from '/resources/js/components/FilesView/ButtonBase'
import PopupWrapper from '/resources/js/components/Others/Popup/PopupWrapper'
import PopupActions from '/resources/js/components/Others/Popup/PopupActions'
import PopupContent from '/resources/js/components/Others/Popup/PopupContent'
import PopupHeader from '/resources/js/components/Others/Popup/PopupHeader'
import ThumbnailItem from '/resources/js/components/Others/ThumbnailItem'
import ButtonBase from '/resources/js/components/FilesView/ButtonBase'
import TeamList from "./Components/TeamList";
import {required} from 'vee-validate/dist/rules'
import {required} from 'vee-validate/dist/rules'
import InfoBox from "../Others/Forms/InfoBox";
import {events} from '/resources/js/bus'
import {events} from '/resources/js/bus'
import axios from "axios";
export default {
name: 'CreateTeamFolderPopup',
components: {
ValidationProvider,
ValidationObserver,
export default {
name: 'CreateTeamFolderPopup',
components: {
ValidationProvider,
ValidationObserver,
TeamList,
ThumbnailItem,
PopupWrapper,
PopupActions,
PopupContent,
PopupHeader,
ButtonBase,
required,
ThumbnailItem,
PopupWrapper,
PopupActions,
PopupContent,
PopupHeader,
ButtonBase,
required,
InfoBox,
},
computed: {
},
computed: {
popupTitle() {
return this.item ? this.$t('Convert as Team Folder') : this.$t('Create Team Folder')
},
return this.item ? this.$t('Convert as Team Folder') : this.$t('Create Team Folder')
},
popupSubmit() {
return this.item ? this.$t('Move & Invite Members') : this.$t('Create Team Folder')
},
return this.item ? this.$t('Move & Invite Members') : this.$t('Create Team Folder')
},
isNewFolderTeamCreation() {
return ! this.item
return !this.item
}
},
data() {
return {
invitations: [],
item: undefined,
name: undefined,
},
data() {
return {
invitations: [],
item: undefined,
name: undefined,
email: undefined,
isLoading: false,
}
},
methods: {
async createTeamFolder() {
}
},
methods: {
async createTeamFolder() {
const isValid = await this.$refs.teamFolderForm.validate()
if (!isValid) return
@@ -141,12 +157,12 @@
if (isTeamFoldersLocation && this.$route.params.id) {
this.$router.push({name: 'TeamFolders', params: {id: response.data.data.id}})
// Add created team folder into Team Folder homepage view
} else if (isTeamFoldersLocation && ! this.$route.params.id) {
// Add created team folder into Team Folder homepage view
} else if (isTeamFoldersLocation && !this.$route.params.id) {
this.$store.commit('ADD_NEW_FOLDER', response.data)
// Redirect to Team Folders after converting simple folder
} else if (! isTeamFoldersLocation) {
// Redirect to Team Folders after converting simple folder
} else if (!isTeamFoldersLocation) {
this.$router.push({name: 'TeamFolders'})
}
@@ -160,19 +176,21 @@
this.$closePopup()
})
},
},
addMember() {
let email = this.email.match(/^[^\s@]+@[^\s@]+\.[^\s@]+$/)[0]
let email = this.email.match(/^[^\s@]+@[^\s@]+\.[^\s@]+$/)[0]
if (! email) {
if (!email) {
this.$refs.teamFolderForm.setErrors({
'Email': this.$t("You have to type valid email")
});
return
}
this.$refs.teamFolderForm.reset()
this.invitations.push({
this.invitations.push({
type: 'invitation',
email: this.email,
permission: 'can-edit',
@@ -180,22 +198,24 @@
this.email = undefined
}
},
mounted() {
events.$on('popup:open', args => {
if (args.name !== 'create-team-folder') return
},
mounted() {
events.$on('popup:open', args => {
if (args.name !== 'create-team-folder') return
this.item = args.item
this.$nextTick(() => {
if (this.$isMobile()) return
if (this.item)
this.$refs.email.focus()
if (! this.item)
if (!this.item)
this.$refs.name.focus()
})
})
})
events.$on('popup:close', () => {
setTimeout(() => {
@@ -205,15 +225,15 @@
this.invitations = []
}, 150)
})
}
}
}
}
</script>
<style scoped lang="scss">
@import "resources/sass/vuefilemanager/_inapp-forms.scss";
@import '/resources/sass/vuefilemanager/_forms';
@import '/resources/sass/vuefilemanager/_forms';
.item-thumbnail {
margin-bottom: 20px;
}
.item-thumbnail {
margin-bottom: 20px;
}
</style>