team folders page

resources/js/components/Teams/Components/PermissionToggleButton.vue

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

resources/js/components/Teams/Components/TeamList.vue

@@ -6,11 +6,11 @@
 			</div>
 			<div class="member-preview">
 				<div class="avatar">
-					<img :src="member.avatar">
+					<img :src="member.settings ? member.settings.avatar : '/assets/images/default-avatar.png'">
 				</div>
 				<div class="info">
-					<b class="name">{{ member.name ? member.name : member.email }}</b>
-					<span v-if="member.name" class="email">{{ member.email }}</span>
+					<b class="name">{{ member.settings ? member.settings.name : member.email }}</b>
+					<span v-if="member.settings" class="email">{{ member.email }}</span>
 				</div>
 			</div>
 			<div class="action">
@@ -28,7 +28,7 @@
 	import {XIcon} from 'vue-feather-icons'
 
 	export default {
-		name: "TeamMemberList",
+		name: "TeamList",
 		props: [
 			'value',
 		],
@@ -67,7 +67,6 @@
 	@import '/resources/sass/vuefilemanager/_forms';
 
 	.member-list {
-		margin-bottom: 20px;
 		max-height: 270px;
 		overflow-y: scroll;
 	}

resources/js/components/Teams/CreateTeamFolderPopup.vue

@@ -2,7 +2,7 @@
     <PopupWrapper name="create-team-folder">
 
         <!--Title-->
-        <PopupHeader :title="popupTitle" icon="users" />
+        <PopupHeader :title="popupTitle" icon="user-plus" />
 
         <!--Content-->
         <PopupContent>
@@ -31,7 +31,7 @@
 				<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" />
+					<TeamList v-model="invitations" />
 				</ValidationProvider>
 
 				<InfoBox v-if="! isNewFolderTeamCreation" style="margin-bottom: 0">
@@ -69,7 +69,7 @@
     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 TeamList from "./Components/TeamList";
     import {required} from 'vee-validate/dist/rules'
 	import InfoBox from "../Others/Forms/InfoBox";
     import {events} from '/resources/js/bus'
@@ -80,7 +80,7 @@
         components: {
             ValidationProvider,
             ValidationObserver,
-			TeamMemberList,
+			TeamList,
             ThumbnailItem,
             PopupWrapper,
             PopupActions,
@@ -92,7 +92,7 @@
         },
         computed: {
 			popupTitle() {
-                return this.item ? this.$t('Move into a 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')
@@ -103,29 +103,7 @@
         },
         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',
-					},
-				],
+            	invitations: [],
                 item: undefined,
                 name: undefined,
 				email: undefined,
@@ -140,21 +118,37 @@
 
 				this.isLoading = true
 
-				let route = this.name ? `/api/teams` : `/api/teams/${this.item.id}`
+				let route = this.name
+					? `/api/teams/folders`
+					: `/api/teams/convert/${this.item.id}`
+
+				let payload = this.name
+					? {
+						name: this.name,
+						invitations: this.invitations,
+					}
+					: {
+						invitations: this.invitations,
+					}
 
 				axios
-					.post(route, {
-						name: this.name,
-						members: this.members,
-					})
+					.post(route, payload)
 					.then(response => {
+						// todo: push to team folder
+						//this.$router.push({name: 'TeamFolders', params: {id: response.data.id}})
 
+						if (! this.$isThisRoute(this.$route, ['TeamFolders']))
+							this.$router.push({name: 'TeamFolders'})
+
+						this.$store.dispatch('getAppData')
 					})
 					.catch(() => this.$isSomethingWrong())
 					.finally(() => {
 						this.isLoading = false
 						this.name = undefined
-						this.members = undefined
+						this.invitations = undefined
+
+						this.$closePopup()
 					})
             },
 			addMember() {
@@ -168,7 +162,7 @@
 
 				this.$refs.teamFolderForm.reset()
 
-            	this.members.push({
+            	this.invitations.push({
 					email: this.email,
 					avatar: '/assets/images/default-avatar.png',
 					permission: 'can-edit',
@@ -191,7 +185,7 @@
 					this.email = undefined
 					this.name = undefined
 					this.item = undefined
-					this.members = []
+					this.invitations = []
 				}, 150)
 			})
         }

resources/js/components/Teams/EditTeamFolderPopup.vue

@@ -0,0 +1,176 @@
+<template>
+    <PopupWrapper name="update-team-folder">
+
+        <!--Title-->
+        <PopupHeader :title="$t('Edit Team Folder')" icon="user-plus" />
+
+        <!--Content-->
+        <PopupContent>
+
+			<!--Item Thumbnail-->
+            <ThumbnailItem class="item-thumbnail" :item="item" info="metadata" />
+
+            <!--Form to set team folder-->
+            <ValidationObserver @submit.prevent="updateTeamFolder" ref="teamFolderForm" v-slot="{ invalid }" tag="form" class="form-wrapper">
+
+                <!--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" 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>
+
+				<!--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="members" />
+					<TeamList v-model="invitations" />
+				</ValidationProvider>
+            </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="updateTeamFolder"
+                    button-style="theme"
+					:loading="isLoading"
+					:disabled="isLoading"
+            >{{ $t('Update Team Folder') }}
+            </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 TeamList from "./Components/TeamList";
+    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: 'UpdateTeamFolderPopup',
+        components: {
+            ValidationProvider,
+            ValidationObserver,
+			TeamList,
+            ThumbnailItem,
+            PopupWrapper,
+            PopupActions,
+            PopupContent,
+            PopupHeader,
+            ButtonBase,
+            required,
+			InfoBox,
+        },
+        computed: {
+			//
+        },
+        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
+
+				this.isLoading = true
+
+				axios
+					.patch(`/api/teams/folders/${this.item.id}`, {
+						members: this.members,
+						invitations: this.invitations,
+					})
+					.then(response => {
+						// todo: update view
+
+						this.$store.dispatch('getAppData')
+					})
+					.catch(() => this.$isSomethingWrong())
+					.finally(() => {
+						this.isLoading = false
+						this.name = undefined
+						this.invitations = undefined
+
+						this.$closePopup()
+					})
+            },
+			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.invitations.push({
+					email: this.email,
+					avatar: '/assets/images/default-avatar.png',
+					permission: 'can-edit',
+				})
+
+				this.email = undefined
+			}
+        },
+        mounted() {
+            events.$on('popup:open', args => {
+                if (args.name !== 'update-team-folder') return
+
+				console.log(args.item);
+
+				if (args.item) {
+					this.item = args.item
+					this.members = args.item.team_members
+					this.invitations = args.item.team_invitations
+				}
+            })
+
+			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 "resources/sass/vuefilemanager/_inapp-forms.scss";
+    @import '/resources/sass/vuefilemanager/_forms';
+
+    .item-thumbnail {
+        margin-bottom: 20px;
+    }
+</style>