nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-27 10:40:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

UI changes for team folders

Browse Source
This commit is contained in:
Peter Papp
2021-08-19 18:14:38 +02:00
parent 58b7e6d584
commit e13a2cd18f
10 changed files with 289 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/components/FilesView/ContextMenu.vue
+5 -1
View File
@@ -82,10 +82,14 @@
<OptionGroup v-if="item && isMultiSelectContextMenu">
<Option @click.native="$renameFileOrFolder(item)" :title="$t('context_menu.rename')" icon="rename" />
<Option @click.native="$moveFileOrFolder(item)" v-if="!$isThisLocation(['latest'])" :title="$t('context_menu.move')" icon="move-item" />
<Option @click.native="$shareFileOrFolder(item)" :title="item.shared ? $t('context_menu.share_edit') : $t('context_menu.share')" icon="share" />
<Option @click.native="$deleteFileOrFolder(item)" :title="$t('context_menu.delete')" icon="trash" />
</OptionGroup>
<OptionGroup v-if="item && isMultiSelectContextMenu">
<Option @click.native="$shareFileOrFolder(item)" :title="item.shared ? $t('context_menu.share_edit') : $t('context_menu.share')" icon="share" />
<Option @click.native="$updateTeamFolder(item)" v-if="isFolder" :title="$t('Convert as Team Folder')" icon="users" />
</OptionGroup>
<OptionGroup v-if="item && isMultiSelectContextMenu ">
<Option @click.native="ItemDetail" :title="$t('context_menu.detail')" icon="detail" />
<Option @click.native="downloadItem" :title="$t('context_menu.download')" icon="download" />
resources/js/components/FilesView/DesktopToolbar.vue
+16 -3
View File
@@ -28,6 +28,9 @@
<PopoverItem name="desktop-create" side="left">
<OptionGroup>
<OptionUpload :class="{'is-inactive': canUploadInView || !hasCapacity }" :title="$t('actions.upload')" />
</OptionGroup>
<OptionGroup>
<Option @click.stop.native="$createTeamFolder" :title="$t('Create Team Folder')" icon="users" />
<Option @click.stop.native="createFolder" :class="{'is-inactive': canCreateFolderInView }" :title="$t('actions.create_folder')" icon="folder-plus" />
</OptionGroup>
</PopoverItem>
@@ -43,13 +46,13 @@
<PopoverItem name="team-folder" side="left">
<TeamFolderPreview />
<OptionGroup>
<Option :title="$t('Edit Members')" icon="rename" />
<Option :title="$t('Dissolve Team')" icon="trash" />
<Option @click.native="$updateTeamFolder(clipboard[0])" :title="$t('Edit Members')" icon="rename" />
<Option @click.native="dissolveTeamFolder(clipboard[0])" :title="$t('Dissolve Team')" icon="trash" />
</OptionGroup>
</PopoverItem>
</PopoverWrapper>
<ToolbarButton v-if="false" @click.native="shareItem" :class="{'is-inactive': ! canCreateTeamFolderInView }" source="user-plus" :action="$t('actions.convert_into_team_folder')" />
<ToolbarButton v-if="false" @click.native="$createTeamFolder" source="user-plus" :action="$t('actions.convert_into_team_folder')" />
<ToolbarButton @click.native="shareItem" :class="{'is-inactive': canShareInView }" source="share" :action="$t('actions.share')" />
</ToolbarGroup>
@@ -205,6 +208,16 @@
showSortingMenu() {
events.$emit('popover:open', 'desktop-sorting')
},
dissolveTeamFolder() {
events.$emit('confirm:open', {
title: this.$t('Are you sure you want to dissolve this team?'),
message: this.$t('All team members will lose access to your files and existing folder will be moved into your "Files" section.'),
action: {
id: 'token.id',
operation: 'dissolve-team-folder'
}
})
},
goBack() {
let previousFolder = last(this.browseHistory)
resources/js/components/FilesView/Option.vue
+3
View File
@@ -22,6 +22,7 @@
<upload-cloud-icon v-if="icon === 'upload-cloud'" size="17" class="group-hover-text-theme" :class="{'text-theme': isActive}"/>
<users-icon v-if="icon === 'users'" size="17" class="group-hover-text-theme" :class="{'text-theme': isActive}"/>
<user-icon v-if="icon === 'user'" size="17" class="group-hover-text-theme" :class="{'text-theme': isActive}"/>
<user-plus-icon v-if="icon === 'user-plus'" size="17" class="group-hover-text-theme" :class="{'text-theme': isActive}"/>
<settings-icon v-if="icon === 'settings'" size="17" class="group-hover-text-theme" :class="{'text-theme': isActive}"/>
<power-icon v-if="icon === 'power'" size="17" class="group-hover-text-theme" :class="{'text-theme': isActive}"/>
<lock-icon v-if="icon === 'lock'" size="17" class="group-hover-text-theme" :class="{'text-theme': isActive}"/>
@@ -48,6 +49,7 @@
<script>
import AlphabetIcon from '/resources/js/components/FilesView/Icons/AlphabetIcon'
import {
UserPlusIcon,
ArrowUpIcon,
ArrowDownIcon,
ChevronRightIcon,
@@ -92,6 +94,7 @@ import {
'icon'
],
components: {
UserPlusIcon,
ArrowUpIcon,
ArrowDownIcon,
BoxIcon,
resources/js/components/Others/CreateFolderPopup.vue
+1 -1
View File
@@ -10,7 +10,7 @@
<!--Form to set sharing-->
<ValidationObserver @submit.prevent="createFolder" ref="createForm" v-slot="{ invalid }" tag="form" class="form-wrapper">
<!--Set password-->
<!--Set folder name-->
<ValidationProvider tag="div" mode="passive" class="input-wrapper password" name="Title" rules="required" v-slot="{ errors }">
<label class="input-label">{{ $t('popup_create_folder.label') }}:</label>
<input v-model="name" :class="{'is-error': errors[0]}" type="text" ref="input" :placeholder="$t('popup_create_folder.placeholder')">
resources/js/components/Teams/Components/TeamMemberList.vue
+6 -1
View File
@@ -1,6 +1,6 @@
<template>
<ul class="member-list">
<li v-for="(member, i) in members" :key="i" class="member-item">
<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">
<x-icon size="14" class="close-icon" />
</div>
@@ -17,6 +17,9 @@
<PermissionToggleButton @input="updateMemberPermission(member, $event)" :item="member" />
</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>
@@ -65,6 +68,8 @@
.member-list {
margin-bottom: 20px;
max-height: 270px;
overflow-y: scroll;
}
.member-item {
resources/js/components/Teams/CreateTeamFolderPopup.vue
+64 -18
View File
@@ -8,22 +8,34 @@
<PopupContent>
<!--Item Thumbnail-->
<ThumbnailItem class="item-thumbnail" :item="item" info="metadata" />
<ThumbnailItem v-if="! isNewFolderTeamCreation" 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">
<!--Set folder name-->
<ValidationProvider v-if="isNewFolderTeamCreation" tag="div" mode="passive" class="input-wrapper password" name="Name" rules="required" v-slot="{ errors }">
<label class="input-label">{{ $t('popup_create_folder.label') }}:</label>
<input v-model="name" :class="{'is-error': errors[0]}" type="text" ref="input" :placeholder="$t('popup_create_folder.placeholder')">
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
<!--Add Member-->
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Email" rules="required" v-slot="{ errors }">
<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="addMember" v-model="email" :class="{'is-error': errors[0]}" type="email" class="focus-border-theme" :placeholder="$t('Type member email...')">
<input @keypress.enter.stop.prevent="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" />
<!--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>
<TeamMemberList v-model="members" />
</ValidationProvider>
<InfoBox style="margin-bottom: 0">
<p v-html="$t('Your folder will be moved into Team Folders.')"></p>
<InfoBox v-if="! isNewFolderTeamCreation" style="margin-bottom: 0">
<p v-html="$t('popup.move_into_team_disclaimer')"></p>
</InfoBox>
</ValidationObserver>
@@ -41,6 +53,8 @@
class="popup-button"
@click.native="createTeamFolder"
button-style="theme"
:loading="isLoading"
:disabled="isLoading"
>{{ popupSubmit }}
</ButtonBase>
</PopupActions>
@@ -59,6 +73,7 @@
import {required} from 'vee-validate/dist/rules'
import InfoBox from "../Others/Forms/InfoBox";
import {events} from '/resources/js/bus'
import axios from "axios";
export default {
name: 'CreateTeamFolderPopup',
@@ -82,6 +97,9 @@
popupSubmit() {
return this.item ? this.$t('Move & Invite Members') : this.$t('Create Team Folder')
},
isNewFolderTeamCreation() {
return ! this.item
}
},
data() {
return {
@@ -108,17 +126,36 @@
permission: 'can-view-and-download',
},
],
item: {
type: 'folder',
name: 'Shared Folder',
created_at: '19. Feb. 2020 at 08:53',
},
email: undefined
item: undefined,
name: undefined,
email: undefined,
isLoading: false,
}
},
methods: {
createTeamFolder() {
async createTeamFolder() {
const isValid = await this.$refs.teamFolderForm.validate()
if (!isValid) return
this.isLoading = true
let route = this.name ? `/api/teams` : `/api/teams/${this.item.id}`
axios
.post(route, {
name: this.name,
members: this.members,
})
.then(response => {
})
.catch(() => this.$isSomethingWrong())
.finally(() => {
this.isLoading = false
this.name = undefined
this.members = undefined
})
},
addMember() {
let email = this.email.match(/^[^\s@]+@[^\s@]+\.[^\s@]+$/)[0]
@@ -132,7 +169,6 @@
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',
@@ -142,12 +178,22 @@
}
},
mounted() {
events.$on('popup:open', item => {
events.$on('popup:open', args => {
if (args.name !== 'create-team-folder') return
if (name !== 'create-team-folder') return
this.item = item
if (args.item) {
this.item = args.item[0]
}
})
events.$on('popup:close', () => {
setTimeout(() => {
this.email = undefined
this.name = undefined
this.item = undefined
this.members = []
}, 150)
})
}
}
</script>