mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-18 08:12:15 +00:00
added CreateTeamFolderPopup.vue
This commit is contained in:
Peter Papp
@@ -0,0 +1,73 @@
|
||||
<template>
|
||||
<div @click="togglePermission" class="permission-toggle">
|
||||
<b class="privilege">{{ teamPermissions[permission] }}</b>
|
||||
<refresh-cw-icon size="14" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {RefreshCwIcon} from 'vue-feather-icons'
|
||||
import {mapGetters} from "vuex";
|
||||
|
||||
export default {
|
||||
name: "PermissionToggleButton",
|
||||
props: [
|
||||
'item'
|
||||
],
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'teamPermissions'
|
||||
])
|
||||
},
|
||||
components: {
|
||||
RefreshCwIcon,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
permission: undefined,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
togglePermission() {
|
||||
let index = Object
|
||||
.keys(this.teamPermissions)
|
||||
.map(i => i)
|
||||
.indexOf(this.permission)
|
||||
|
||||
if (index === (Object.keys(this.teamPermissions).length - 1)) {
|
||||
this.permission = Object.keys(this.teamPermissions)[0]
|
||||
} else {
|
||||
this.permission = Object.keys(this.teamPermissions)[index + 1]
|
||||
}
|
||||
|
||||
this.$emit('input', this.permission)
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.permission = this.item.permission
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "resources/sass/vuefilemanager/_inapp-forms.scss";
|
||||
@import '/resources/sass/vuefilemanager/_forms';
|
||||
|
||||
.permission-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
|
||||
.privilege {
|
||||
white-space: nowrap;
|
||||
@include font-size(13);
|
||||
color: $text-muted;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
polyline, path {
|
||||
color: $light_text;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
123
resources/js/components/Teams/Components/TeamMemberList.vue
Normal file
123
resources/js/components/Teams/Components/TeamMemberList.vue
Normal file
@@ -0,0 +1,123 @@
|
||||
<template>
|
||||
<ul class="member-list">
|
||||
<li v-for="(member, i) in members" :key="i" class="member-item">
|
||||
<div @click="deleteMember(member)" class="terminate">
|
||||
<x-icon size="14" class="close-icon" />
|
||||
</div>
|
||||
<div class="member-preview">
|
||||
<div class="avatar">
|
||||
<img :src="member.avatar">
|
||||
</div>
|
||||
<div class="info">
|
||||
<b class="name">{{ member.name ? member.name : member.email }}</b>
|
||||
<span v-if="member.name" class="email">{{ member.email }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="action">
|
||||
<PermissionToggleButton @input="updateMemberPermission(member, $event)" :item="member" />
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PermissionToggleButton from "./PermissionToggleButton";
|
||||
import {XIcon} from 'vue-feather-icons'
|
||||
|
||||
export default {
|
||||
name: "TeamMemberList",
|
||||
props: [
|
||||
'value',
|
||||
],
|
||||
components: {
|
||||
PermissionToggleButton,
|
||||
XIcon,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
members: undefined
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateMemberPermission(member, value) {
|
||||
this.members.map(e => e === member ? e.permission = value : e)
|
||||
|
||||
this.emitMembers()
|
||||
},
|
||||
deleteMember(member) {
|
||||
this.members = this.members.filter(m => m !== member)
|
||||
|
||||
this.emitMembers()
|
||||
},
|
||||
emitMembers() {
|
||||
this.$emit('input', this.members)
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.members = this.value
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "resources/sass/vuefilemanager/_inapp-forms.scss";
|
||||
@import '/resources/sass/vuefilemanager/_forms';
|
||||
|
||||
.member-list {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.member-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 8px 0;
|
||||
|
||||
.terminate {
|
||||
line-height: 0;
|
||||
cursor: pointer;
|
||||
|
||||
line {
|
||||
color: $light_text;
|
||||
}
|
||||
}
|
||||
|
||||
.member-preview {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.avatar {
|
||||
padding: 0 12px;
|
||||
|
||||
img {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
border-radius: 8px;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
|
||||
.name {
|
||||
@include font-size(15);
|
||||
font-weight: 700;
|
||||
display: block;
|
||||
max-width: 190px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.email {
|
||||
@include font-size(12);
|
||||
color: $text-muted;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.action {
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
162
resources/js/components/Teams/CreateTeamFolderPopup.vue
Normal file
162
resources/js/components/Teams/CreateTeamFolderPopup.vue
Normal file
@@ -0,0 +1,162 @@
|
||||
<template>
|
||||
<PopupWrapper name="create-team-folder">
|
||||
|
||||
<!--Title-->
|
||||
<PopupHeader :title="popupTitle" icon="users" />
|
||||
|
||||
<!--Content-->
|
||||
<PopupContent>
|
||||
|
||||
<!--Item Thumbnail-->
|
||||
<ThumbnailItem class="item-thumbnail" :item="item" info="metadata" />
|
||||
|
||||
<!--Form to set team folder-->
|
||||
<ValidationObserver @submit.prevent="createTeamFolder" ref="teamFolderForm" v-slot="{ invalid }" tag="form" class="form-wrapper">
|
||||
|
||||
<!--Add Member-->
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Email" rules="required" v-slot="{ errors }">
|
||||
<label class="input-label">{{ $t('Add Member') }}:</label>
|
||||
<input @keypress.enter.stop="addMember" v-model="email" :class="{'is-error': errors[0]}" type="email" class="focus-border-theme" :placeholder="$t('Type member email...')">
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
|
||||
<TeamMemberList v-model="members" />
|
||||
|
||||
<InfoBox style="margin-bottom: 0">
|
||||
<p v-html="$t('Your folder will be moved into Team Folders.')"></p>
|
||||
</InfoBox>
|
||||
</ValidationObserver>
|
||||
|
||||
</PopupContent>
|
||||
|
||||
<!--Actions-->
|
||||
<PopupActions>
|
||||
<ButtonBase
|
||||
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"
|
||||
>{{ popupSubmit }}
|
||||
</ButtonBase>
|
||||
</PopupActions>
|
||||
</PopupWrapper>
|
||||
</template>
|
||||
|
||||
<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 TeamMemberList from "./Components/TeamMemberList";
|
||||
import {required} from 'vee-validate/dist/rules'
|
||||
import InfoBox from "../Others/Forms/InfoBox";
|
||||
import {events} from '/resources/js/bus'
|
||||
|
||||
export default {
|
||||
name: 'CreateTeamFolderPopup',
|
||||
components: {
|
||||
ValidationProvider,
|
||||
ValidationObserver,
|
||||
TeamMemberList,
|
||||
ThumbnailItem,
|
||||
PopupWrapper,
|
||||
PopupActions,
|
||||
PopupContent,
|
||||
PopupHeader,
|
||||
ButtonBase,
|
||||
required,
|
||||
InfoBox,
|
||||
},
|
||||
computed: {
|
||||
popupTitle() {
|
||||
return this.item ? this.$t('Move into a Team Folder') : this.$t('Create Team Folder')
|
||||
},
|
||||
popupSubmit() {
|
||||
return this.item ? this.$t('Move & Invite Members') : this.$t('Create Team Folder')
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
members: [
|
||||
{
|
||||
id: 1,
|
||||
name: 'Jane Doe',
|
||||
email: 'jane@doe.com',
|
||||
avatar: '/temp/avatar-01.png',
|
||||
permission: 'can-edit',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: 'Emma Willis',
|
||||
email: 'dawn_mcglynn@adams.tv',
|
||||
avatar: '/temp/avatar-02.png',
|
||||
permission: 'can-view',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: 'Barry Erickson',
|
||||
email: 'ulatid@jabo.edu',
|
||||
avatar: '/temp/avatar-03.png',
|
||||
permission: 'can-view-and-download',
|
||||
},
|
||||
],
|
||||
item: {
|
||||
type: 'folder',
|
||||
name: 'Shared Folder',
|
||||
created_at: '19. Feb. 2020 at 08:53',
|
||||
},
|
||||
email: undefined
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
createTeamFolder() {
|
||||
|
||||
},
|
||||
addMember() {
|
||||
let email = this.email.match(/^[^\s@]+@[^\s@]+\.[^\s@]+$/)[0]
|
||||
|
||||
if (! email) {
|
||||
this.$refs.teamFolderForm.setErrors({
|
||||
'Email': this.$t("You have to type valid email")
|
||||
});
|
||||
}
|
||||
|
||||
this.$refs.teamFolderForm.reset()
|
||||
|
||||
this.members.push({
|
||||
id: Math.floor(Math.random() * 10000000),
|
||||
email: this.email,
|
||||
avatar: '/assets/images/default-avatar.png',
|
||||
permission: 'can-edit',
|
||||
})
|
||||
|
||||
this.email = undefined
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
events.$on('popup:open', item => {
|
||||
|
||||
if (name !== 'create-team-folder') return
|
||||
|
||||
this.item = item
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "resources/sass/vuefilemanager/_inapp-forms.scss";
|
||||
@import '/resources/sass/vuefilemanager/_forms';
|
||||
|
||||
.item-thumbnail {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user