upload request prototype UI

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

@@ -1,6 +1,11 @@
 <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">
+        <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" />
@@ -13,7 +18,10 @@
 
                 <!--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">
+                    <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">
@@ -23,7 +31,10 @@
 
                 <!--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">
+                    <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">

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

@@ -5,7 +5,13 @@
                 {{ $t('Not selected') }}
             </span>
         </div>
-        <TeamMembersPreview v-else :folder="teamFolder" :limit="true" :avatar-size="size" class="justify-end md:justify-center" />
+        <TeamMembersPreview
+            v-else
+            :folder="teamFolder"
+            :limit="true"
+            :avatar-size="size"
+            class="justify-end md:justify-center"
+        />
     </div>
 </template>
 

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

@@ -2,7 +2,12 @@
     <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">
+            <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>
@@ -20,10 +25,15 @@ export default {
     },
     computed: {
         membersCount() {
-            return this.folder.data.relationships.members.data.length + this.folder.data.relationships.invitations.data.length
+            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)
+            let allMembers = this.folder.data.relationships.members.data.concat(
+                this.folder.data.relationships.invitations.data
+            )
 
             if (this.limit) {
                 return allMembers.slice(0, 3)

resources/js/components/Teams/CreateTeamFolderPopup.vue

@@ -11,7 +11,14 @@
             <!--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 }">
+                <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"
@@ -50,16 +57,16 @@
 
                 <!--Member list-->
                 <ValidationProvider tag="div" mode="passive" name="Members" rules="required" v-slot="{ errors }">
-					<AppInputText :title="$t('Your Members')" :error="errors[0]" :is-last="true">
-						<span v-if="errors[0]" class="error-message" style="margin-top: -5px">
-							{{ $t('Please add at least one member.') }}
-						</span>
+                    <AppInputText :title="$t('Your Members')" :error="errors[0]" :is-last="true">
+                        <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 Folders.') }}
-						</p>
+                        <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 Folders.') }}
+                        </p>
                     </AppInputText>
                 </ValidationProvider>
 
@@ -71,8 +78,17 @@
 
         <!--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>

resources/js/components/Teams/EditTeamFolderPopup.vue

@@ -39,11 +39,16 @@
                 <!--Member list-->
                 <ValidationProvider tag="div" mode="passive" 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>
+                    <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">
+                    <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>
@@ -52,7 +57,9 @@
 
         <!--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"