mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-18 08:12:15 +00:00
added prettier
This commit is contained in:
Čarodej
@@ -1,80 +1,75 @@
|
||||
<template>
|
||||
<div @click="togglePermission" class="permission-toggle">
|
||||
<b class="privilege">{{ teamPermissions[permission] }}</b>
|
||||
<refresh-cw-icon size="14" />
|
||||
</div>
|
||||
<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";
|
||||
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)
|
||||
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]
|
||||
}
|
||||
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
|
||||
}
|
||||
}
|
||||
this.$emit('input', this.permission)
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.permission = this.item.permission
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../../../sass/vuefilemanager/inapp-forms";
|
||||
@import '../../../../sass/vuefilemanager/forms';
|
||||
@import '../../../../sass/vuefilemanager/inapp-forms';
|
||||
@import '../../../../sass/vuefilemanager/forms';
|
||||
|
||||
.permission-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
.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;
|
||||
}
|
||||
.privilege {
|
||||
white-space: nowrap;
|
||||
@include font-size(13);
|
||||
color: $text-muted;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
polyline, path {
|
||||
color: $light_text;
|
||||
}
|
||||
}
|
||||
polyline,
|
||||
path {
|
||||
color: $light_text;
|
||||
}
|
||||
}
|
||||
|
||||
.dark {
|
||||
|
||||
.permission-toggle .privilege {
|
||||
color: $dark_mode_text_secondary;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
.dark {
|
||||
.permission-toggle .privilege {
|
||||
color: $dark_mode_text_secondary;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,49 +1,44 @@
|
||||
<template>
|
||||
<div class="team-folder-preview text-left py-3 px-5">
|
||||
<div class="info">
|
||||
<b class="title text-sm">
|
||||
{{ teamFolder.data.attributes.name }}
|
||||
</b>
|
||||
<span class="subtitle text-tiny block mb-2 dark:text-gray-500 text-gray-600">
|
||||
Created at {{ teamFolder.data.attributes.created_at }}
|
||||
</span>
|
||||
<TeamMembersPreview :folder="teamFolder" :avatar-size="32" class="members" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="team-folder-preview py-3 px-5 text-left">
|
||||
<div class="info">
|
||||
<b class="title text-sm">
|
||||
{{ teamFolder.data.attributes.name }}
|
||||
</b>
|
||||
<span class="subtitle mb-2 block text-tiny text-gray-600 dark:text-gray-500"> Created at {{ teamFolder.data.attributes.created_at }} </span>
|
||||
<TeamMembersPreview :folder="teamFolder" :avatar-size="32" class="members" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TeamMembersPreview from "./TeamMembersPreview";
|
||||
import {mapGetters} from "vuex";
|
||||
import TeamMembersPreview from './TeamMembersPreview'
|
||||
import { mapGetters } from 'vuex'
|
||||
|
||||
export default {
|
||||
name: "TeamFolderPreview",
|
||||
components: {
|
||||
TeamMembersPreview,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'currentTeamFolder',
|
||||
'clipboard',
|
||||
]),
|
||||
teamFolder() {
|
||||
return this.currentTeamFolder ? this.currentTeamFolder : this.clipboard[0]
|
||||
}
|
||||
}
|
||||
}
|
||||
export default {
|
||||
name: 'TeamFolderPreview',
|
||||
components: {
|
||||
TeamMembersPreview,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['currentTeamFolder', 'clipboard']),
|
||||
teamFolder() {
|
||||
return this.currentTeamFolder ? this.currentTeamFolder : this.clipboard[0]
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "resources/sass/vuefilemanager/_variables";
|
||||
@import "resources/sass/vuefilemanager/_mixins";
|
||||
@import 'resources/sass/vuefilemanager/_variables';
|
||||
@import 'resources/sass/vuefilemanager/_mixins';
|
||||
|
||||
.team-folder-preview {
|
||||
border-bottom: 1px solid $light_mode_border;
|
||||
}
|
||||
.team-folder-preview {
|
||||
border-bottom: 1px solid $light_mode_border;
|
||||
}
|
||||
|
||||
.dark {
|
||||
.team-folder-preview {
|
||||
border-color: $dark_mode_border_color;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
.dark {
|
||||
.team-folder-preview {
|
||||
border-color: $dark_mode_border_color;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,100 +1,84 @@
|
||||
<template>
|
||||
<ul>
|
||||
<li
|
||||
v-if="Object.values(members).length > 0 && entry.id !== user.data.id"
|
||||
v-for="(entry, i) in members"
|
||||
:key="i"
|
||||
class="flex items-center py-2"
|
||||
>
|
||||
<!--Remove Member-->
|
||||
<div @click="deleteMember(entry)" class="cursor-pointer leading-none py-2 px-1 -ml-1.5">
|
||||
<x-icon size="14" class="vue-feather dark:text-gray-600" />
|
||||
</div>
|
||||
<ul>
|
||||
<li v-if="Object.values(members).length > 0 && entry.id !== user.data.id" v-for="(entry, i) in members" :key="i" class="flex items-center py-2">
|
||||
<!--Remove Member-->
|
||||
<div @click="deleteMember(entry)" class="-ml-1.5 cursor-pointer py-2 px-1 leading-none">
|
||||
<x-icon size="14" class="vue-feather dark:text-gray-600" />
|
||||
</div>
|
||||
|
||||
<!--Member Preview-->
|
||||
<div class="flex items-center">
|
||||
<!--Member Preview-->
|
||||
<div class="flex items-center">
|
||||
<!--Avatar-->
|
||||
<MemberAvatar class="mr-3 ml-2" :is-border="false" :size="44" :member="$mapIntoMemberResource(entry)" />
|
||||
|
||||
<!--Avatar-->
|
||||
<MemberAvatar
|
||||
class="mr-3 ml-2"
|
||||
:is-border="false"
|
||||
:size="44"
|
||||
:member="$mapIntoMemberResource(entry)"
|
||||
/>
|
||||
<!--Member-->
|
||||
<div v-if="entry.type === 'member'" class="info">
|
||||
<b class="max-w-1 block overflow-hidden text-ellipsis whitespace-nowrap text-sm font-bold" style="max-width: 155px">
|
||||
{{ entry.name }}
|
||||
</b>
|
||||
<span class="block text-xs text-gray-600 dark:text-gray-500">
|
||||
{{ entry.email }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!--Member-->
|
||||
<div v-if="entry.type === 'member'" class="info">
|
||||
<b class="text-sm font-bold block max-w-1 overflow-hidden text-ellipsis whitespace-nowrap" style="max-width: 155px;">
|
||||
{{ entry.name }}
|
||||
</b>
|
||||
<span class="block text-xs dark:text-gray-500 text-gray-600">
|
||||
{{ entry.email }}
|
||||
</span>
|
||||
</div>
|
||||
<!--Invitation-->
|
||||
<div v-if="entry.type === 'invitation'" class="info">
|
||||
<b class="block max-w-xs overflow-hidden text-ellipsis whitespace-nowrap text-sm font-bold" style="max-width: 155px">
|
||||
{{ entry.email }}
|
||||
</b>
|
||||
<span v-if="entry.id" class="block text-xs text-gray-600 dark:text-gray-500">
|
||||
{{ $t('Waiting for accept invitation...') }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--Invitation-->
|
||||
<div v-if="entry.type === 'invitation'" class="info">
|
||||
<b class="text-sm font-bold block max-w-xs overflow-hidden text-ellipsis whitespace-nowrap" style="max-width: 155px;">
|
||||
{{ entry.email }}
|
||||
</b>
|
||||
<span v-if="entry.id" class="block text-xs dark:text-gray-500 text-gray-600">
|
||||
{{ $t('Waiting for accept invitation...') }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!--Set member permission-->
|
||||
<div class="ml-auto">
|
||||
<PermissionToggleButton @input="updateMemberPermission(entry, $event)" :item="entry" />
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<!--Set member permission-->
|
||||
<div class="ml-auto">
|
||||
<PermissionToggleButton @input="updateMemberPermission(entry, $event)" :item="entry" />
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PermissionToggleButton from "./PermissionToggleButton"
|
||||
import MemberAvatar from "../../FilesView/MemberAvatar";
|
||||
import {XIcon} from 'vue-feather-icons'
|
||||
import {mapGetters} from "vuex";
|
||||
import PermissionToggleButton from './PermissionToggleButton'
|
||||
import MemberAvatar from '../../FilesView/MemberAvatar'
|
||||
import { XIcon } from 'vue-feather-icons'
|
||||
import { mapGetters } from 'vuex'
|
||||
|
||||
export default {
|
||||
name: "TeamList",
|
||||
props: [
|
||||
'value',
|
||||
],
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'user'
|
||||
])
|
||||
},
|
||||
components: {
|
||||
PermissionToggleButton,
|
||||
MemberAvatar,
|
||||
XIcon,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
members: undefined
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateMemberPermission(member, value) {
|
||||
this.members.map(e => e === member ? e.permission = value : e)
|
||||
export default {
|
||||
name: 'TeamList',
|
||||
props: ['value'],
|
||||
computed: {
|
||||
...mapGetters(['user']),
|
||||
},
|
||||
components: {
|
||||
PermissionToggleButton,
|
||||
MemberAvatar,
|
||||
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()
|
||||
},
|
||||
deleteMember(member) {
|
||||
this.members = this.members.filter((m) => m !== member)
|
||||
|
||||
this.emitMembers()
|
||||
},
|
||||
emitMembers() {
|
||||
this.$emit('input', this.members)
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.members = this.value
|
||||
}
|
||||
}
|
||||
</script>
|
||||
this.emitMembers()
|
||||
},
|
||||
emitMembers() {
|
||||
this.$emit('input', this.members)
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.members = this.value
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,36 +1,29 @@
|
||||
<template>
|
||||
<div class="w-28">
|
||||
<div v-if="! teamFolder" class="md:text-center text-right">
|
||||
<span class="dark:text-gray-500 text-gray-600 md:mr-0.5 mr-3 text-tiny align-middle">
|
||||
{{ $t('Not selected') }}
|
||||
</span>
|
||||
</div>
|
||||
<TeamMembersPreview v-else :folder="teamFolder" :limit="true" :avatar-size="size" class="md:justify-center justify-end" />
|
||||
</div>
|
||||
<div class="w-28">
|
||||
<div v-if="!teamFolder" class="text-right md:text-center">
|
||||
<span class="mr-3 align-middle text-tiny text-gray-600 dark:text-gray-500 md:mr-0.5">
|
||||
{{ $t('Not selected') }}
|
||||
</span>
|
||||
</div>
|
||||
<TeamMembersPreview v-else :folder="teamFolder" :limit="true" :avatar-size="size" class="justify-end md:justify-center" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TeamMembersPreview from "./TeamMembersPreview"
|
||||
import {mapGetters} from "vuex"
|
||||
import TeamMembersPreview from './TeamMembersPreview'
|
||||
import { mapGetters } from 'vuex'
|
||||
|
||||
export default {
|
||||
name: "TeamMembersButton",
|
||||
components: {
|
||||
TeamMembersPreview,
|
||||
},
|
||||
props: [
|
||||
'size'
|
||||
],
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'currentTeamFolder',
|
||||
'clipboard',
|
||||
]),
|
||||
teamFolder() {
|
||||
return this.currentTeamFolder
|
||||
? this.currentTeamFolder
|
||||
: this.clipboard[0]
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
export default {
|
||||
name: 'TeamMembersButton',
|
||||
components: {
|
||||
TeamMembersPreview,
|
||||
},
|
||||
props: ['size'],
|
||||
computed: {
|
||||
...mapGetters(['currentTeamFolder', 'clipboard']),
|
||||
teamFolder() {
|
||||
return this.currentTeamFolder ? this.currentTeamFolder : this.clipboard[0]
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,96 +1,88 @@
|
||||
<template>
|
||||
<div class="team-folder">
|
||||
<span v-if="limit && membersCount > 3" class="member-count">
|
||||
+{{ membersCount - 3 }}
|
||||
</span>
|
||||
<div class="members">
|
||||
<div v-for="member in members" :key="member.data.id" :title="member.data.attributes.email" class="member-preview z-10">
|
||||
<MemberAvatar :is-border="true" :size="34" :member="member" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="team-folder">
|
||||
<span v-if="limit && membersCount > 3" class="member-count"> +{{ membersCount - 3 }} </span>
|
||||
<div class="members">
|
||||
<div v-for="member in members" :key="member.data.id" :title="member.data.attributes.email" class="member-preview z-10">
|
||||
<MemberAvatar :is-border="true" :size="34" :member="member" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MemberAvatar from "../../FilesView/MemberAvatar"
|
||||
import MemberAvatar from '../../FilesView/MemberAvatar'
|
||||
|
||||
export default {
|
||||
name: "TeamMembersPreview",
|
||||
props: [
|
||||
'folder',
|
||||
'limit',
|
||||
'avatarSize'
|
||||
],
|
||||
components: {
|
||||
MemberAvatar,
|
||||
},
|
||||
computed: {
|
||||
membersCount() {
|
||||
return this.folder.data.relationships.members.data.length + this.folder.data.relationships.invitations.data.length
|
||||
},
|
||||
members() {
|
||||
let allMembers = this.folder.data.relationships.members.data.concat(this.folder.data.relationships.invitations.data)
|
||||
export default {
|
||||
name: 'TeamMembersPreview',
|
||||
props: ['folder', 'limit', 'avatarSize'],
|
||||
components: {
|
||||
MemberAvatar,
|
||||
},
|
||||
computed: {
|
||||
membersCount() {
|
||||
return this.folder.data.relationships.members.data.length + this.folder.data.relationships.invitations.data.length
|
||||
},
|
||||
members() {
|
||||
let allMembers = this.folder.data.relationships.members.data.concat(this.folder.data.relationships.invitations.data)
|
||||
|
||||
if (this.limit) {
|
||||
return allMembers.slice(0, 3)
|
||||
}
|
||||
if (this.limit) {
|
||||
return allMembers.slice(0, 3)
|
||||
}
|
||||
|
||||
return allMembers
|
||||
}
|
||||
}
|
||||
}
|
||||
return allMembers
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "resources/sass/vuefilemanager/_variables";
|
||||
@import "resources/sass/vuefilemanager/_mixins";
|
||||
@import 'resources/sass/vuefilemanager/_variables';
|
||||
@import 'resources/sass/vuefilemanager/_mixins';
|
||||
|
||||
.team-folder {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.team-folder {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.member-count {
|
||||
@include font-size(12);
|
||||
color: $text-muted;
|
||||
margin-right: 3px;
|
||||
opacity: 0.7;
|
||||
min-width: 14px;
|
||||
text-align: left;
|
||||
}
|
||||
.member-count {
|
||||
@include font-size(12);
|
||||
color: $text-muted;
|
||||
margin-right: 3px;
|
||||
opacity: 0.7;
|
||||
min-width: 14px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.members {
|
||||
display: flex;
|
||||
.members {
|
||||
display: flex;
|
||||
|
||||
.member-preview {
|
||||
margin-left: -10px;
|
||||
.member-preview {
|
||||
margin-left: -10px;
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.member {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
object-fit: cover;
|
||||
border-radius: 10px;
|
||||
border: 2px solid white;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
.member {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
object-fit: cover;
|
||||
border-radius: 10px;
|
||||
border: 2px solid white;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dark {
|
||||
.dark {
|
||||
.team-folder {
|
||||
.member-count {
|
||||
color: $dark_mode_text_secondary;
|
||||
}
|
||||
|
||||
.team-folder {
|
||||
|
||||
.member-count {
|
||||
color: $dark_mode_text_secondary;
|
||||
}
|
||||
|
||||
.members .member {
|
||||
border-color: $dark_mode_foreground;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
.members .member {
|
||||
border-color: $dark_mode_foreground;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,261 +1,254 @@
|
||||
<template>
|
||||
<PopupWrapper name="create-team-folder">
|
||||
|
||||
<!--Title-->
|
||||
<PopupHeader :title="popupTitle" icon="user-plus" />
|
||||
|
||||
<!--Content-->
|
||||
<!--Content-->
|
||||
<PopupContent>
|
||||
<!--Item Thumbnail-->
|
||||
<ThumbnailItem v-if="!isNewFolderTeamCreation" class="mb-5" :item="item" />
|
||||
|
||||
<!--Item Thumbnail-->
|
||||
<ThumbnailItem v-if="! isNewFolderTeamCreation" class="mb-5" :item="item" />
|
||||
|
||||
<!--Form to set team folder-->
|
||||
<!--Form to set team folder-->
|
||||
<ValidationObserver @submit.prevent="createTeamFolder" ref="teamFolderForm" v-slot="{ invalid }" tag="form">
|
||||
|
||||
<!--Set folder name-->
|
||||
<ValidationProvider v-if="isNewFolderTeamCreation" tag="div" mode="passive" name="Name" rules="required" v-slot="{ errors }">
|
||||
<AppInputText :title="$t('popup_create_folder.label')" :error="errors[0]">
|
||||
<input v-model="name" :class="{'border-red': errors[0]}" type="text" ref="name" class="focus-border-theme input-dark" :placeholder="$t('popup_create_folder.placeholder')">
|
||||
</AppInputText>
|
||||
<AppInputText :title="$t('popup_create_folder.label')" :error="errors[0]">
|
||||
<input
|
||||
v-model="name"
|
||||
:class="{ 'border-red': errors[0] }"
|
||||
type="text"
|
||||
ref="name"
|
||||
class="focus-border-theme input-dark"
|
||||
:placeholder="$t('popup_create_folder.placeholder')"
|
||||
/>
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
|
||||
<!--Add Member-->
|
||||
<ValidationProvider tag="div" mode="passive" name="Email" v-slot="{ errors }">
|
||||
<AppInputText :title="$t('Add Member')" :error="errors[0]">
|
||||
<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="{'border-red': errors[0]}" type="email" class="focus-border-theme input-dark" :placeholder="$t('Type member email...')">
|
||||
</div>
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
<!--Add Member-->
|
||||
<ValidationProvider tag="div" mode="passive" name="Email" v-slot="{ errors }">
|
||||
<AppInputText :title="$t('Add Member')" :error="errors[0]">
|
||||
<div class="relative">
|
||||
<span
|
||||
v-if="email"
|
||||
@click="addMember"
|
||||
class="button-base theme absolute right-2 top-1/2 -translate-y-1/2 transform cursor-pointer rounded-lg px-3 py-2 text-sm font-bold"
|
||||
>
|
||||
Add
|
||||
</span>
|
||||
<input
|
||||
@keypress.enter.stop.prevent="addMember"
|
||||
ref="email"
|
||||
v-model="email"
|
||||
:class="{ 'border-red': errors[0] }"
|
||||
type="email"
|
||||
class="focus-border-theme input-dark"
|
||||
:placeholder="$t('Type member email...')"
|
||||
/>
|
||||
</div>
|
||||
</AppInputText>
|
||||
</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>
|
||||
<!--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>
|
||||
|
||||
<TeamList v-model="invitations" />
|
||||
<TeamList v-model="invitations" />
|
||||
|
||||
<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>
|
||||
<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">
|
||||
<p v-html="$t('popup.move_into_team_disclaimer')"></p>
|
||||
</InfoBox>
|
||||
<InfoBox v-if="!isNewFolderTeamCreation" style="margin-bottom: 0">
|
||||
<p v-html="$t('popup.move_into_team_disclaimer')"></p>
|
||||
</InfoBox>
|
||||
</ValidationObserver>
|
||||
|
||||
</PopupContent>
|
||||
|
||||
<!--Actions-->
|
||||
<!--Actions-->
|
||||
<PopupActions>
|
||||
<ButtonBase
|
||||
class="w-full"
|
||||
@click.native="$closePopup()"
|
||||
button-style="secondary"
|
||||
>{{ $t('popup_move_item.cancel') }}
|
||||
</ButtonBase>
|
||||
<ButtonBase
|
||||
class="w-full"
|
||||
@click.native="createTeamFolder"
|
||||
button-style="theme"
|
||||
:loading="isLoading"
|
||||
:disabled="isLoading"
|
||||
>{{ popupSubmit }}
|
||||
</ButtonBase>
|
||||
<ButtonBase class="w-full" @click.native="$closePopup()" button-style="secondary">{{ $t('popup_move_item.cancel') }} </ButtonBase>
|
||||
<ButtonBase class="w-full" @click.native="createTeamFolder" button-style="theme" :loading="isLoading" :disabled="isLoading">{{ popupSubmit }} </ButtonBase>
|
||||
</PopupActions>
|
||||
</PopupWrapper>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AppInputText from "../Admin/AppInputText";
|
||||
import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
|
||||
import PopupWrapper from "../Others/Popup/PopupWrapper";
|
||||
import PopupActions from "../Others/Popup/PopupActions";
|
||||
import PopupContent from "../Others/Popup/PopupContent";
|
||||
import PopupHeader from "../Others/Popup/PopupHeader";
|
||||
import ThumbnailItem from "../Others/ThumbnailItem";
|
||||
import ButtonBase from "../FilesView/ButtonBase";
|
||||
import TeamList from "./Components/TeamList";
|
||||
import {required} from 'vee-validate/dist/rules'
|
||||
import InfoBox from "../Others/Forms/InfoBox";
|
||||
import {events} from '../../bus'
|
||||
import axios from "axios";
|
||||
import {mapGetters} from "vuex";
|
||||
import AppInputText from '../Admin/AppInputText'
|
||||
import { ValidationProvider, ValidationObserver } from 'vee-validate/dist/vee-validate.full'
|
||||
import PopupWrapper from '../Others/Popup/PopupWrapper'
|
||||
import PopupActions from '../Others/Popup/PopupActions'
|
||||
import PopupContent from '../Others/Popup/PopupContent'
|
||||
import PopupHeader from '../Others/Popup/PopupHeader'
|
||||
import ThumbnailItem from '../Others/ThumbnailItem'
|
||||
import ButtonBase from '../FilesView/ButtonBase'
|
||||
import TeamList from './Components/TeamList'
|
||||
import { required } from 'vee-validate/dist/rules'
|
||||
import InfoBox from '../Others/Forms/InfoBox'
|
||||
import { events } from '../../bus'
|
||||
import axios from 'axios'
|
||||
import { mapGetters } from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'CreateTeamFolderPopup',
|
||||
components: {
|
||||
ValidationProvider,
|
||||
ValidationObserver,
|
||||
AppInputText,
|
||||
TeamList,
|
||||
ThumbnailItem,
|
||||
PopupWrapper,
|
||||
PopupActions,
|
||||
PopupContent,
|
||||
PopupHeader,
|
||||
ButtonBase,
|
||||
required,
|
||||
InfoBox,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'user'
|
||||
]),
|
||||
popupTitle() {
|
||||
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')
|
||||
},
|
||||
isNewFolderTeamCreation() {
|
||||
return !this.item
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
invitations: [],
|
||||
item: undefined,
|
||||
name: undefined,
|
||||
email: undefined,
|
||||
isLoading: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async createTeamFolder() {
|
||||
const isValid = await this.$refs.teamFolderForm.validate()
|
||||
export default {
|
||||
name: 'CreateTeamFolderPopup',
|
||||
components: {
|
||||
ValidationProvider,
|
||||
ValidationObserver,
|
||||
AppInputText,
|
||||
TeamList,
|
||||
ThumbnailItem,
|
||||
PopupWrapper,
|
||||
PopupActions,
|
||||
PopupContent,
|
||||
PopupHeader,
|
||||
ButtonBase,
|
||||
required,
|
||||
InfoBox,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['user']),
|
||||
popupTitle() {
|
||||
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')
|
||||
},
|
||||
isNewFolderTeamCreation() {
|
||||
return !this.item
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
invitations: [],
|
||||
item: undefined,
|
||||
name: undefined,
|
||||
email: undefined,
|
||||
isLoading: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async createTeamFolder() {
|
||||
const isValid = await this.$refs.teamFolderForm.validate()
|
||||
|
||||
if (!isValid) return
|
||||
if (!isValid) return
|
||||
|
||||
this.isLoading = true
|
||||
this.isLoading = true
|
||||
|
||||
let route = this.name
|
||||
? `/api/teams/folders`
|
||||
: `/api/teams/folders/${this.item.data.id}/convert`
|
||||
let route = this.name ? `/api/teams/folders` : `/api/teams/folders/${this.item.data.id}/convert`
|
||||
|
||||
let payload = this.name
|
||||
? {
|
||||
name: this.name,
|
||||
invitations: this.invitations,
|
||||
}
|
||||
: {
|
||||
invitations: this.invitations,
|
||||
}
|
||||
let payload = this.name
|
||||
? {
|
||||
name: this.name,
|
||||
invitations: this.invitations,
|
||||
}
|
||||
: {
|
||||
invitations: this.invitations,
|
||||
}
|
||||
|
||||
axios
|
||||
.post(route, payload)
|
||||
.then(response => {
|
||||
let isTeamFoldersLocation = this.$isThisRoute(this.$route, ['TeamFolders'])
|
||||
axios
|
||||
.post(route, payload)
|
||||
.then((response) => {
|
||||
let isTeamFoldersLocation = this.$isThisRoute(this.$route, ['TeamFolders'])
|
||||
|
||||
// Redirect into newly created team folder
|
||||
if (isTeamFoldersLocation && this.$route.params.id) {
|
||||
this.$router.push({name: 'TeamFolders', params: {id: response.data.data.id}})
|
||||
// Redirect into newly created team folder
|
||||
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) {
|
||||
this.$store.commit('ADD_NEW_FOLDER', response.data)
|
||||
// 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) {
|
||||
this.$router.push({name: 'TeamFolders'})
|
||||
}
|
||||
// Redirect to Team Folders after converting simple folder
|
||||
} else if (!isTeamFoldersLocation) {
|
||||
this.$router.push({ name: 'TeamFolders' })
|
||||
}
|
||||
|
||||
let toasterMessage = this.isNewFolderTeamCreation
|
||||
? this.$t('Your Team was invited successfully.')
|
||||
: this.$t('Your Team was invited and folder was moved into Team Folders section.')
|
||||
let toasterMessage = this.isNewFolderTeamCreation
|
||||
? this.$t('Your Team was invited successfully.')
|
||||
: this.$t('Your Team was invited and folder was moved into Team Folders section.')
|
||||
|
||||
events.$emit('toaster', {
|
||||
type: 'success',
|
||||
message: toasterMessage,
|
||||
})
|
||||
events.$emit('toaster', {
|
||||
type: 'success',
|
||||
message: toasterMessage,
|
||||
})
|
||||
|
||||
this.$store.dispatch('getAppData')
|
||||
})
|
||||
.catch(() => this.$isSomethingWrong())
|
||||
.finally(() => {
|
||||
this.isLoading = false
|
||||
this.name = undefined
|
||||
this.invitations = undefined
|
||||
this.$store.dispatch('getAppData')
|
||||
})
|
||||
.catch(() => this.$isSomethingWrong())
|
||||
.finally(() => {
|
||||
this.isLoading = false
|
||||
this.name = undefined
|
||||
this.invitations = undefined
|
||||
|
||||
this.$closePopup()
|
||||
})
|
||||
},
|
||||
addMember() {
|
||||
if (this.$isInvalidEmail(this.email)) {
|
||||
this.$refs.teamFolderForm.setErrors({
|
||||
'Email': this.$t("You have to type valid email")
|
||||
});
|
||||
return;
|
||||
}
|
||||
this.$closePopup()
|
||||
})
|
||||
},
|
||||
addMember() {
|
||||
if (this.$isInvalidEmail(this.email)) {
|
||||
this.$refs.teamFolderForm.setErrors({
|
||||
Email: this.$t('You have to type valid email'),
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
if ( this.$cantInviteMember(this.email, this.invitations) ) {
|
||||
this.$refs.teamFolderForm.setErrors({
|
||||
'Email': this.$t("You have to upgrade your account to add this new member.")
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (this.$cantInviteMember(this.email, this.invitations)) {
|
||||
this.$refs.teamFolderForm.setErrors({
|
||||
Email: this.$t('You have to upgrade your account to add this new member.'),
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
this.$refs.teamFolderForm.reset()
|
||||
this.$refs.teamFolderForm.reset()
|
||||
|
||||
this.invitations.unshift({
|
||||
type: 'invitation',
|
||||
email: this.email,
|
||||
permission: 'can-edit',
|
||||
})
|
||||
this.invitations.unshift({
|
||||
type: 'invitation',
|
||||
email: this.email,
|
||||
permission: 'can-edit',
|
||||
})
|
||||
|
||||
this.email = undefined
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
events.$on('popup:open', args => {
|
||||
if (args.name !== 'create-team-folder') return
|
||||
this.email = undefined
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
events.$on('popup:open', (args) => {
|
||||
if (args.name !== 'create-team-folder') return
|
||||
|
||||
this.item = args.item
|
||||
this.item = args.item
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.$nextTick(() => {
|
||||
if (this.$isMobile()) return
|
||||
|
||||
if (this.$isMobile()) return
|
||||
if (this.item) this.$refs.email.focus()
|
||||
|
||||
if (this.item)
|
||||
this.$refs.email.focus()
|
||||
if (!this.item) this.$refs.name.focus()
|
||||
})
|
||||
})
|
||||
|
||||
if (!this.item)
|
||||
this.$refs.name.focus()
|
||||
})
|
||||
})
|
||||
events.$on('popup:close', () => {
|
||||
setTimeout(() => {
|
||||
this.email = undefined
|
||||
this.name = undefined
|
||||
this.item = undefined
|
||||
this.invitations = []
|
||||
}, 150)
|
||||
})
|
||||
|
||||
events.$on('popup:close', () => {
|
||||
setTimeout(() => {
|
||||
this.email = undefined
|
||||
this.name = undefined
|
||||
this.item = undefined
|
||||
this.invitations = []
|
||||
}, 150)
|
||||
})
|
||||
|
||||
console.log(
|
||||
|
||||
);
|
||||
}
|
||||
}
|
||||
console.log()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import 'resources/sass/vuefilemanager/_inapp-forms.scss';
|
||||
@import '../../../sass/vuefilemanager/forms';
|
||||
@import 'resources/sass/vuefilemanager/_inapp-forms.scss';
|
||||
@import '../../../sass/vuefilemanager/forms';
|
||||
|
||||
.item-thumbnail {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.item-thumbnail {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,236 +1,231 @@
|
||||
<template>
|
||||
<PopupWrapper name="update-team-folder">
|
||||
|
||||
<!--Title-->
|
||||
<PopupHeader :title="$t('Edit Team Folder')" icon="user-plus" />
|
||||
|
||||
<!--Content-->
|
||||
<!--Content-->
|
||||
<PopupContent>
|
||||
|
||||
<!--Item Thumbnail-->
|
||||
<!--Item Thumbnail-->
|
||||
<ThumbnailItem class="mb-5" :item="item" />
|
||||
|
||||
<!--Form to set team folder-->
|
||||
<!--Form to set team folder-->
|
||||
<ValidationObserver @submit.prevent="updateTeamFolder" ref="teamFolderForm" v-slot="{ invalid }" tag="form">
|
||||
|
||||
<!--Add Member-->
|
||||
<ValidationProvider tag="div" mode="passive" name="Email" v-slot="{ errors }">
|
||||
<AppInputText :title="$t('Add Member')" :error="errors[0]">
|
||||
<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>
|
||||
<ValidationProvider tag="div" mode="passive" name="Email" v-slot="{ errors }">
|
||||
<AppInputText :title="$t('Add Member')" :error="errors[0]">
|
||||
<div class="relative">
|
||||
<span
|
||||
v-if="email"
|
||||
@click="addMember"
|
||||
class="button-base theme absolute right-2 top-1/2 -translate-y-1/2 transform cursor-pointer rounded-lg px-3 py-2 text-sm font-bold"
|
||||
>
|
||||
Add
|
||||
</span>
|
||||
|
||||
<!--TODO: Fix !pr-20 after JIT official release-->
|
||||
<input @keypress.enter.stop.prevent="addMember" ref="email" v-model="email" :class="{'border-red': errors[0]}" type="email" class="focus-border-theme !pr-20 input-dark" :placeholder="$t('Type member email...')">
|
||||
</div>
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
<!--TODO: Fix !pr-20 after JIT official release-->
|
||||
<input
|
||||
@keypress.enter.stop.prevent="addMember"
|
||||
ref="email"
|
||||
v-model="email"
|
||||
:class="{ 'border-red': errors[0] }"
|
||||
type="email"
|
||||
class="focus-border-theme input-dark !pr-20"
|
||||
:placeholder="$t('Type member email...')"
|
||||
/>
|
||||
</div>
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
|
||||
<!--Member list-->
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Members" 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>
|
||||
<TeamList v-model="members" />
|
||||
<TeamList v-model="invitations" />
|
||||
<!--Member list-->
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Members" 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>
|
||||
<TeamList v-model="members" />
|
||||
<TeamList v-model="invitations" />
|
||||
|
||||
<p v-if="Object.values(members).length === 0 && 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>
|
||||
<p v-if="Object.values(members).length === 0 && 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>
|
||||
</ValidationObserver>
|
||||
|
||||
</PopupContent>
|
||||
|
||||
<!--Actions-->
|
||||
<!--Actions-->
|
||||
<PopupActions>
|
||||
<ButtonBase class="w-full" @click.native="$closePopup()" button-style="secondary">{{ $t('popup_move_item.cancel') }} </ButtonBase>
|
||||
<ButtonBase
|
||||
class="w-full"
|
||||
@click.native="$closePopup()"
|
||||
button-style="secondary"
|
||||
>{{ $t('popup_move_item.cancel') }}
|
||||
</ButtonBase>
|
||||
<ButtonBase
|
||||
class="w-full"
|
||||
@click.native="updateTeamFolder"
|
||||
:button-style="isDisabledSubmit ? 'secondary' : 'theme'"
|
||||
:loading="isLoading"
|
||||
:disabled="isLoading || isDisabledSubmit"
|
||||
>{{ $t('Update Team Folder') }}
|
||||
class="w-full"
|
||||
@click.native="updateTeamFolder"
|
||||
:button-style="isDisabledSubmit ? 'secondary' : 'theme'"
|
||||
:loading="isLoading"
|
||||
:disabled="isLoading || isDisabledSubmit"
|
||||
>{{ $t('Update Team Folder') }}
|
||||
</ButtonBase>
|
||||
</PopupActions>
|
||||
</PopupWrapper>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AppInputText from "../Admin/AppInputText";
|
||||
import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
|
||||
import PopupWrapper from "../Others/Popup/PopupWrapper";
|
||||
import PopupActions from '../Others/Popup/PopupActions'
|
||||
import PopupContent from '../Others/Popup/PopupContent'
|
||||
import PopupHeader from '../Others/Popup/PopupHeader'
|
||||
import ThumbnailItem from "../Others/ThumbnailItem";
|
||||
import ButtonBase from "../FilesView/ButtonBase";
|
||||
import TeamList from "./Components/TeamList";
|
||||
import {required} from 'vee-validate/dist/rules'
|
||||
import InfoBox from "../Others/Forms/InfoBox";
|
||||
import {events} from "../../bus";
|
||||
import axios from "axios";
|
||||
import {mapGetters} from "vuex";
|
||||
import AppInputText from '../Admin/AppInputText'
|
||||
import { ValidationProvider, ValidationObserver } from 'vee-validate/dist/vee-validate.full'
|
||||
import PopupWrapper from '../Others/Popup/PopupWrapper'
|
||||
import PopupActions from '../Others/Popup/PopupActions'
|
||||
import PopupContent from '../Others/Popup/PopupContent'
|
||||
import PopupHeader from '../Others/Popup/PopupHeader'
|
||||
import ThumbnailItem from '../Others/ThumbnailItem'
|
||||
import ButtonBase from '../FilesView/ButtonBase'
|
||||
import TeamList from './Components/TeamList'
|
||||
import { required } from 'vee-validate/dist/rules'
|
||||
import InfoBox from '../Others/Forms/InfoBox'
|
||||
import { events } from '../../bus'
|
||||
import axios from 'axios'
|
||||
import { mapGetters } from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'EditTeamFolderPopup',
|
||||
components: {
|
||||
ValidationProvider,
|
||||
ValidationObserver,
|
||||
AppInputText,
|
||||
TeamList,
|
||||
ThumbnailItem,
|
||||
PopupWrapper,
|
||||
PopupActions,
|
||||
PopupContent,
|
||||
PopupHeader,
|
||||
ButtonBase,
|
||||
required,
|
||||
InfoBox,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'user'
|
||||
]),
|
||||
isDisabledSubmit() {
|
||||
return Object.values(this.members).length === 0 && Object.values(this.invitations).length === 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
invitations: [],
|
||||
members: [],
|
||||
item: undefined,
|
||||
name: undefined,
|
||||
email: undefined,
|
||||
isLoading: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async updateTeamFolder() {
|
||||
const isValid = await this.$refs.teamFolderForm.validate()
|
||||
export default {
|
||||
name: 'EditTeamFolderPopup',
|
||||
components: {
|
||||
ValidationProvider,
|
||||
ValidationObserver,
|
||||
AppInputText,
|
||||
TeamList,
|
||||
ThumbnailItem,
|
||||
PopupWrapper,
|
||||
PopupActions,
|
||||
PopupContent,
|
||||
PopupHeader,
|
||||
ButtonBase,
|
||||
required,
|
||||
InfoBox,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['user']),
|
||||
isDisabledSubmit() {
|
||||
return Object.values(this.members).length === 0 && Object.values(this.invitations).length === 0
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
invitations: [],
|
||||
members: [],
|
||||
item: undefined,
|
||||
name: undefined,
|
||||
email: undefined,
|
||||
isLoading: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async updateTeamFolder() {
|
||||
const isValid = await this.$refs.teamFolderForm.validate()
|
||||
|
||||
if (!isValid) return
|
||||
if (!isValid) return
|
||||
|
||||
this.isLoading = true
|
||||
this.isLoading = true
|
||||
|
||||
axios
|
||||
.patch(`/api/teams/folders/${this.item.data.id}`, {
|
||||
members: this.members,
|
||||
invitations: this.invitations,
|
||||
})
|
||||
.then(response => {
|
||||
this.$store.commit('UPDATE_ITEM', response.data)
|
||||
axios
|
||||
.patch(`/api/teams/folders/${this.item.data.id}`, {
|
||||
members: this.members,
|
||||
invitations: this.invitations,
|
||||
})
|
||||
.then((response) => {
|
||||
this.$store.commit('UPDATE_ITEM', response.data)
|
||||
|
||||
events.$emit('toaster', {
|
||||
type: 'success',
|
||||
message: this.$t('Your team folder was updated'),
|
||||
})
|
||||
})
|
||||
.catch(() => {
|
||||
events.$emit('toaster', {
|
||||
type: 'danger',
|
||||
message: this.$t('popup_error.title'),
|
||||
})
|
||||
})
|
||||
.finally(() => {
|
||||
this.isLoading = false
|
||||
this.name = undefined
|
||||
this.invitations = undefined
|
||||
this.members = undefined
|
||||
events.$emit('toaster', {
|
||||
type: 'success',
|
||||
message: this.$t('Your team folder was updated'),
|
||||
})
|
||||
})
|
||||
.catch(() => {
|
||||
events.$emit('toaster', {
|
||||
type: 'danger',
|
||||
message: this.$t('popup_error.title'),
|
||||
})
|
||||
})
|
||||
.finally(() => {
|
||||
this.isLoading = false
|
||||
this.name = undefined
|
||||
this.invitations = undefined
|
||||
this.members = undefined
|
||||
|
||||
this.$closePopup()
|
||||
})
|
||||
},
|
||||
addMember() {
|
||||
if (this.$isInvalidEmail(this.email)) {
|
||||
this.$refs.teamFolderForm.setErrors({
|
||||
'Email': this.$t("You have to type valid email")
|
||||
});
|
||||
return;
|
||||
}
|
||||
this.$closePopup()
|
||||
})
|
||||
},
|
||||
addMember() {
|
||||
if (this.$isInvalidEmail(this.email)) {
|
||||
this.$refs.teamFolderForm.setErrors({
|
||||
Email: this.$t('You have to type valid email'),
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
if ( this.$cantInviteMember(this.email, this.invitations) ) {
|
||||
this.$refs.teamFolderForm.setErrors({
|
||||
'Email': this.$t("You have to upgrade your account to add this new member.")
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (this.$cantInviteMember(this.email, this.invitations)) {
|
||||
this.$refs.teamFolderForm.setErrors({
|
||||
Email: this.$t('You have to upgrade your account to add this new member.'),
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
this.$refs.teamFolderForm.reset()
|
||||
this.$refs.teamFolderForm.reset()
|
||||
|
||||
this.invitations.unshift({
|
||||
type: 'invitation',
|
||||
email: this.email,
|
||||
permission: 'can-edit',
|
||||
})
|
||||
this.invitations.unshift({
|
||||
type: 'invitation',
|
||||
email: this.email,
|
||||
permission: 'can-edit',
|
||||
})
|
||||
|
||||
this.email = undefined
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
events.$on('popup:open', args => {
|
||||
if (args.name !== 'update-team-folder') return
|
||||
this.email = undefined
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
events.$on('popup:open', (args) => {
|
||||
if (args.name !== 'update-team-folder') return
|
||||
|
||||
this.item = args.item
|
||||
this.item = args.item
|
||||
|
||||
this.members = args.item.data.relationships.members.data.map(member => {
|
||||
return {
|
||||
type: 'member',
|
||||
id: member.data.id,
|
||||
email: member.data.attributes.email,
|
||||
name: member.data.attributes.name,
|
||||
avatar: member.data.attributes.avatar,
|
||||
color: member.data.attributes.color,
|
||||
permission: member.data.attributes.permission,
|
||||
}
|
||||
})
|
||||
this.members = args.item.data.relationships.members.data.map((member) => {
|
||||
return {
|
||||
type: 'member',
|
||||
id: member.data.id,
|
||||
email: member.data.attributes.email,
|
||||
name: member.data.attributes.name,
|
||||
avatar: member.data.attributes.avatar,
|
||||
color: member.data.attributes.color,
|
||||
permission: member.data.attributes.permission,
|
||||
}
|
||||
})
|
||||
|
||||
this.invitations = args.item.data.relationships.invitations.data.map(member => {
|
||||
return {
|
||||
id: member.data.id,
|
||||
type: 'invitation',
|
||||
email: member.data.attributes.email,
|
||||
color: member.data.attributes.color,
|
||||
permission: member.data.attributes.permission,
|
||||
}
|
||||
})
|
||||
this.invitations = args.item.data.relationships.invitations.data.map((member) => {
|
||||
return {
|
||||
id: member.data.id,
|
||||
type: 'invitation',
|
||||
email: member.data.attributes.email,
|
||||
color: member.data.attributes.color,
|
||||
permission: member.data.attributes.permission,
|
||||
}
|
||||
})
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.$nextTick(() => {
|
||||
if (this.$refs.email && !this.$isMobile()) this.$refs.email.focus()
|
||||
})
|
||||
})
|
||||
|
||||
if (this.$refs.email && !this.$isMobile())
|
||||
this.$refs.email.focus()
|
||||
})
|
||||
})
|
||||
|
||||
events.$on('popup:close', () => {
|
||||
setTimeout(() => {
|
||||
this.email = undefined
|
||||
this.name = undefined
|
||||
this.item = undefined
|
||||
this.invitations = []
|
||||
this.members = []
|
||||
}, 150)
|
||||
})
|
||||
}
|
||||
}
|
||||
events.$on('popup:close', () => {
|
||||
setTimeout(() => {
|
||||
this.email = undefined
|
||||
this.name = undefined
|
||||
this.item = undefined
|
||||
this.invitations = []
|
||||
this.members = []
|
||||
}, 150)
|
||||
})
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '../../../sass/vuefilemanager/inapp-forms';
|
||||
@import '../../../sass/vuefilemanager/forms';
|
||||
@import '../../../sass/vuefilemanager/inapp-forms';
|
||||
@import '../../../sass/vuefilemanager/forms';
|
||||
|
||||
.item-thumbnail {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.item-thumbnail {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user