nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-28 11:00:39 +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
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>