nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-21 01:12:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

TeamMembersPreview refactoring

Browse Source
This commit is contained in:
Peter Papp
2021-08-30 14:43:52 +02:00
parent e751a6bc90
commit 2bfdf5c311
21 changed files with 434 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
resources/js/components/Teams/Components/PermissionToggleButton.vue
View File

@@ -44,11 +44,7 @@
}
},
created() {
if (this.item.pivot) {
this.permission = this.item.pivot.permission
} else {
this.permission = this.item.permission
}
this.permission = this.item.permission
}
}
</script>

20
resources/js/components/Teams/Components/TeamFolderPreview.vue
View File

@@ -3,31 +3,25 @@
<div class="info">
<b class="title">The Team Project</b>
<span class="subtitle">Last update a week ago</span>
<TeamMembersPreview :members="fullMembers" class="members" />
<TeamMembersPreview :folder="clipboard[0]" class="members" />
</div>
</div>
</template>
<script>
import TeamMembersPreview from "./TeamMembersPreview";
import {mapGetters} from "vuex";
export default {
name: "TeamFolderPreview",
components: {
TeamMembersPreview,
},
data() {
return {
fullMembers: [
'/temp/avatar-01.png',
'/temp/avatar-02.png',
'/temp/avatar-03.png',
'/temp/avatar-01.png',
'/temp/avatar-02.png',
'/temp/avatar-03.png',
],
}
},
computed: {
...mapGetters([
'clipboard'
])
}
}
</script>

25
resources/js/components/Teams/Components/TeamList.vue
View File

@@ -1,25 +1,26 @@
<template>
<ul class="member-list">
<li v-if="Object.values(members).length > 0" v-for="(member, i) in members" :key="i" class="member-item">
<div @click="deleteMember(member)" class="terminate">
<li v-if="Object.values(members).length > 0" v-for="(entry, i) in members" :key="i" class="member-item">
<div @click="deleteMember(entry)" class="terminate">
<x-icon size="14" class="close-icon" />
</div>
<div class="member-preview">
<div class="avatar">
<img :src="member.settings ? member.settings.avatar : '/assets/images/default-avatar.png'">
<img :src="entry.type === 'member' ? entry.avatar : '/assets/images/default-avatar.png'" alt="avatar">
</div>
<div class="info">
<b class="name">{{ member.settings ? member.settings.name : member.email }}</b>
<span v-if="member.settings" class="email">{{ member.email }}</span>
<div v-if="entry.type === 'member'" class="info">
<b class="title">{{ entry.name }}</b>
<span class="subtitle">{{ entry.email }}</span>
</div>
<div v-if="entry.type === 'invitation'" class="info">
<b class="title">{{ entry.email }}</b>
<span v-if="entry.id" class="subtitle">{{ $t('Waiting for accept invitation...') }}</span>
</div>
</div>
<div class="action">
<PermissionToggleButton @input="updateMemberPermission(member, $event)" :item="member" />
<PermissionToggleButton @input="updateMemberPermission(entry, $event)" :item="entry" />
</div>
</li>
<li v-if="Object.values(members).length === 0">
<p class="input-help">{{ $t('Please add some member into your Team Folder.') }}</p>
</li>
</ul>
</template>
@@ -103,7 +104,7 @@
.info {
.name {
.title {
@include font-size(15);
font-weight: 700;
display: block;
@@ -112,7 +113,7 @@
text-overflow: ellipsis;
}
.email {
.subtitle {
@include font-size(12);
color: $text-muted;
display: block;

49
resources/js/components/Teams/Components/TeamMembersButton.vue Normal file
View File

@@ -0,0 +1,49 @@
<template>
<div class="team-folder-wrapper">
<div v-if="! clipboard[0]" class="empty-state">
<span>Not selected</span>
</div>
<TeamMembersPreview v-else :folder="clipboard[0]" :limit="true" class="widget" />
</div>
</template>
<script>
import {mapGetters} from "vuex";
import TeamMembersPreview from "./TeamMembersPreview";
export default {
name: "TeamMembersButton",
components: {
TeamMembersPreview
},
computed: {
...mapGetters([
'clipboard'
])
},
}
</script>
<style lang="scss" scoped>
@import "resources/sass/vuefilemanager/_variables";
@import "resources/sass/vuefilemanager/_mixins";
.team-folder-wrapper {
width: 107px;
.widget {
justify-content: flex-end;
}
}
.empty-state {
text-align: center;
span {
@include font-size(12);
color: $text-muted;
opacity: 0.7;
margin-right: 7px;
}
}
</style>

51
resources/js/components/Teams/Components/TeamMembersPreview.vue
View File

@@ -1,22 +1,39 @@
<template>
<div class="team-folder">
<span v-if="count" class="member-count">
{{ count }}
<span v-if="limit" class="member-count">
{{ membersCount > 3 ? '3+' : membersCount }}
</span>
<div class="members">
<img v-for="member in members" :src="member" class="member" alt="">
<div v-for="member in members" class="member-preview">
<img v-if="member.data.attributes.avatar" :src="member.data.attributes.avatar" class="member" alt="avatar">
<img v-else src="/assets/images/default-avatar.png" class="member" alt="avatar">
</div>
</div>
</div>
</template>
<script>
export default {
name: "TeamMembersPreview",
props: [
'members',
'count',
]
}
name: "TeamMembersPreview",
props: [
'folder',
'limit',
],
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)
}
return allMembers
}
}
}
</script>
<style lang="scss" scoped>
@@ -32,22 +49,28 @@ export default {
color: $text-muted;
margin-right: 3px;
opacity: 0.7;
min-width: 14px;
text-align: left;
}
.members {
display: flex;
.member-preview {
margin-left: -10px;
&:first-child {
margin-left: 0;
}
}
.member {
width: 32px;
height: 32px;
object-fit: cover;
border-radius: 10px;
margin-left: -10px;
border: 2px solid white;
vertical-align: middle;
&:first-child {
margin-left: 0;
}
}
}
}

3
resources/js/components/Teams/CreateTeamFolderPopup.vue
View File

@@ -32,6 +32,7 @@
<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" />
<p v-if="Object.values(invitations).length === 0" class="input-help">{{ $t('Please add at least one member into your Team Folder.') }}</p>
</ValidationProvider>
<InfoBox v-if="! isNewFolderTeamCreation" style="margin-bottom: 0">
@@ -163,8 +164,8 @@
this.$refs.teamFolderForm.reset()
this.invitations.push({
type: 'invitation',
email: this.email,
avatar: '/assets/images/default-avatar.png',
permission: 'can-edit',
})

49
resources/js/components/Teams/EditTeamFolderPopup.vue
View File

@@ -21,11 +21,12 @@
</ValidationProvider>
<!--Member list-->
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Members" rules="required" v-slot="{ errors }">
<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="input-help">{{ $t('Please add at least one member into your Team Folder.') }}</p>
</ValidationProvider>
</ValidationObserver>
@@ -42,9 +43,9 @@
<ButtonBase
class="popup-button"
@click.native="updateTeamFolder"
button-style="theme"
:button-style="isDisabledSubmit ? 'secondary' : 'theme'"
:loading="isLoading"
:disabled="isLoading"
:disabled="isLoading || isDisabledSubmit"
>{{ $t('Update Team Folder') }}
</ButtonBase>
</PopupActions>
@@ -81,7 +82,9 @@
InfoBox,
},
computed: {
//
isDisabledSubmit() {
return Object.values(this.members).length === 0 && Object.values(this.invitations).length === 0
}
},
data() {
return {
@@ -102,20 +105,24 @@
this.isLoading = true
axios
.patch(`/api/teams/folders/${this.item.id}`, {
.patch(`/api/teams/folders/${this.item.data.id}`, {
members: this.members,
invitations: this.invitations,
})
.then(response => {
// todo: update view
this.$store.commit('UPDATE_ITEM', response.data)
this.$store.dispatch('getAppData')
events.$emit('toaster', {
type: 'success',
message: this.$t('Your team folder was updated'),
})
})
.catch(() => this.$isSomethingWrong())
.finally(() => {
this.isLoading = false
this.name = undefined
this.invitations = undefined
this.members = undefined
this.$closePopup()
})
@@ -132,8 +139,8 @@
this.$refs.teamFolderForm.reset()
this.invitations.push({
type: 'invitation',
email: this.email,
avatar: '/assets/images/default-avatar.png',
permission: 'can-edit',
})
@@ -144,13 +151,27 @@
events.$on('popup:open', args => {
if (args.name !== 'update-team-folder') return
console.log(args.item);
this.item = args.item
if (args.item) {
this.item = args.item
this.members = args.item.team_members
this.invitations = args.item.team_invitations
}
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,
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,
permission: member.data.attributes.permission,
}
})
})
events.$on('popup:close', () => {