nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-05 18:23:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

added spinner into button when user accept or reject team invitation

Browse Source
This commit is contained in:
Čarodej
2022-04-07 12:05:14 +02:00
parent 76b32f551f
commit 60a3c46ffe
3 changed files with 30 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
config/language-translations.php
View File

@@ -707,7 +707,7 @@ return [
'register_with_email_and_get_folder' => 'Register account with your email {email} and get access to this Team Folder.',
'invite_to_join_team_folder' => 'Invitation To Join Team Folder',
'or_decline_your_invitation' => 'Or {0} your invitation.',
'decline' => 'decline',
'decline' => 'Decline',
'you_are_successfully_joined' => 'You are successfully joined',
'proceed_to_participate_with_team' => 'You can now proceed to your account and participate in team folder',
'proceed_to_your_account' => 'Proceed to your account',

20
public/mix-manifest.json
View File

@@ -16,29 +16,29 @@
"/chunks/not-found.js": "/chunks/not-found.js?id=9f6ce23ce5d969f1",
"/chunks/temporary-unavailable.js": "/chunks/temporary-unavailable.js?id=f564565faa09d6d6",
"/chunks/admin.js": "/chunks/admin.js?id=1f197d019e3493c8",
"/chunks/dashboard.js": "/chunks/dashboard.js?id=d2cfb9504b3e1c88",
"/chunks/invoices.js": "/chunks/invoices.js?id=1416cbf6d1a593ac",
"/chunks/subscriptions.js": "/chunks/subscriptions.js?id=5bf6704f5b599f36",
"/chunks/pages.js": "/chunks/pages.js?id=c8380d571e91e8be",
"/chunks/dashboard.js": "/chunks/dashboard.js?id=28169f03aee0e3a0",
"/chunks/invoices.js": "/chunks/invoices.js?id=a4785aea6257404e",
"/chunks/subscriptions.js": "/chunks/subscriptions.js?id=51b6098a72f1fcdb",
"/chunks/pages.js": "/chunks/pages.js?id=4529e647b15e5c98",
"/chunks/page-edit.js": "/chunks/page-edit.js?id=fb3f9eda3dc1d15c",
"/chunks/plans.js": "/chunks/plans.js?id=6e8c847c141e41e8",
"/chunks/users.js": "/chunks/users.js?id=ec687ee365c4248a",
"/chunks/plans.js": "/chunks/plans.js?id=64803e40b7a125e5",
"/chunks/users.js": "/chunks/users.js?id=8bc57edd89c4ca11",
"/chunks/user-create.js": "/chunks/user-create.js?id=8dd9d29f024132f5",
"/chunks/plan-create/fixed.js": "/chunks/plan-create/fixed.js?id=c994595021a98ce6",
"/chunks/plan-create/metered.js": "/chunks/plan-create/metered.js?id=d9f1bcb1fe44a6ae",
"/chunks/user.js": "/chunks/user.js?id=c191b906a0496fe5",
"/chunks/user-detail.js": "/chunks/user-detail.js?id=d53bfd58090b79e2",
"/chunks/user-storage.js": "/chunks/user-storage.js?id=a8e0bce4703232a0",
"/chunks/user-subscription.js": "/chunks/user-subscription.js?id=27d046c1122783ea",
"/chunks/user-subscription.js": "/chunks/user-subscription.js?id=3ef8231d279d83bb",
"/chunks/user-password.js": "/chunks/user-password.js?id=23d3aee39f539a3c",
"/chunks/user-delete.js": "/chunks/user-delete.js?id=6bea6f8cadf4d74f",
"/chunks/plan.js": "/chunks/plan.js?id=4b267375ea9f19b3",
"/chunks/plan-subscribers.js": "/chunks/plan-subscribers.js?id=a956ceca6865c50c",
"/chunks/plan-subscribers.js": "/chunks/plan-subscribers.js?id=fea2f8eaae2f3334",
"/chunks/plan-settings.js": "/chunks/plan-settings.js?id=715ee86991d5e4db",
"/chunks/plan-delete.js": "/chunks/plan-delete.js?id=1ad77372d342326f",
"/chunks/payments.js": "/chunks/payments.js?id=dc4586691c25de6f",
"/chunks/payments/billings.js": "/chunks/payments/billings.js?id=dd6c9d6a29a47808",
"/chunks/payments/settings.js": "/chunks/payments/settings.js?id=22bce2575affd7af",
"/chunks/payments/settings.js": "/chunks/payments/settings.js?id=022ba98937be861c",
"/chunks/app-settings.js": "/chunks/app-settings.js?id=55da23af2b076069",
"/chunks/app-appearance.js": "/chunks/app-appearance.js?id=a694a01f3641712c",
"/chunks/app-index.js": "/chunks/app-index.js?id=efdbfa062749ca00",
@@ -61,7 +61,7 @@
"/chunks/profile.js": "/chunks/profile.js?id=0eca231475e267ab",
"/chunks/settings-password.js": "/chunks/settings-password.js?id=3755d41eaf50a5b1",
"/chunks/settings-storage.js": "/chunks/settings-storage.js?id=994b669a56fd417b",
"/chunks/billing.js": "/chunks/billing.js?id=40e758c87bcf6e89",
"/chunks/billing.js": "/chunks/billing.js?id=a983c29d1a4f87ba",
"/chunks/platform.js": "/chunks/platform.js?id=adbd23bb1da95322",
"/chunks/files.js": "/chunks/files.js?id=99230d6e76d78e5f",
"/chunks/recent-uploads.js": "/chunks/recent-uploads.js?id=8ba6e0814135b24a",

27
resources/js/components/Notifications/Notification.vue
View File

@@ -49,20 +49,22 @@
<div v-if="action && action.type === 'invitation'" class="flex items-center space-x-3 mt-4">
<div
@click="acceptAction"
class="flex cursor-pointer items-center rounded-xl py-1.5 px-2 transition-colors hover:bg-green-100 dark:hover:bg-green-900"
class="relative flex cursor-pointer items-center rounded-xl py-1.5 px-2 transition-colors bg-green-100 dark:bg-green-900"
>
<check-icon size="16" class="vue-feather mr-2 text-green-600 dark:text-green-600" />
<span class="text-sm font-bold text-green-600 dark:text-green-600">
<refresh-cw-icon v-if="isAccepting" size="16" class="animate-spin left-0 right-0 mx-auto vue-feather text-green-600 dark:text-green-600 absolute justify-center" />
<check-icon size="16" class="vue-feather mr-1 text-green-600 dark:text-green-600" :class="{'opacity-0': isAccepting}" />
<span class="text-sm font-bold text-green-600 dark:text-green-600" :class="{'opacity-0': isAccepting}">
{{ $t('accept') }}
</span>
</div>
<div
@click="declineAction"
class="flex cursor-pointer items-center rounded-xl py-1.5 px-2 transition-colors hover:bg-rose-100 dark:hover:bg-rose-900"
class="relative flex cursor-pointer items-center rounded-xl py-1.5 px-2 transition-colors bg-rose-100 dark:bg-rose-900"
>
<x-icon size="16" class="vue-feather mr-2 text-rose-600 dark:text-rose-600" />
<span class="text-sm font-bold text-rose-600 dark:text-rose-600">
<refresh-cw-icon v-if="isDeclining" size="16" class="animate-spin left-0 right-0 mx-auto vue-feather text-rose-600 dark:text-rose-600 absolute justify-center" />
<x-icon size="16" class="vue-feather mr-1 text-rose-600 dark:text-rose-600" :class="{'opacity-0': isDeclining}" />
<span class="text-sm font-bold text-rose-600 dark:text-rose-600 capitalize" :class="{'opacity-0': isDeclining}">
{{ $t('decline') }}
</span>
</div>
@@ -84,7 +86,7 @@
</article>
</template>
<script>
import { TrendingUpIcon, GiftIcon, CheckIcon, XIcon, MailIcon, UserPlusIcon, UploadCloudIcon, ChevronRightIcon, AlertTriangleIcon } from 'vue-feather-icons'
import { RefreshCwIcon, TrendingUpIcon, GiftIcon, CheckIcon, XIcon, MailIcon, UserPlusIcon, UploadCloudIcon, ChevronRightIcon, AlertTriangleIcon } from 'vue-feather-icons'
import MemberAvatar from '../FilesView/MemberAvatar'
import {events} from "../../bus";
@@ -97,6 +99,7 @@ export default {
ChevronRightIcon,
UploadCloudIcon,
TrendingUpIcon,
RefreshCwIcon,
UserPlusIcon,
CheckIcon,
GiftIcon,
@@ -110,11 +113,15 @@ export default {
},
data() {
return {
isUnread: false
isUnread: false,
isAccepting: false,
isDeclining: false,
}
},
methods: {
acceptAction() {
this.isAccepting = true
axios.put(`/api/teams/invitations/${this.notification.data.attributes.action.params.id}`)
.then(() => {
this.$store.commit('CLEAR_NOTIFICATION_ACTION_DATA', this.notification.data.id)
@@ -124,8 +131,11 @@ export default {
message: this.$t('you_accepted_invitation'),
})
})
.finally(() => this.isAccepting = false)
},
declineAction() {
this.isDeclining = true
axios.delete(`/api/teams/invitations/${this.notification.data.attributes.action.params.id}`)
.then(() => {
this.$store.commit('CLEAR_NOTIFICATION_ACTION_DATA', this.notification.data.id)
@@ -135,6 +145,7 @@ export default {
message: this.$t('you_decline_invitation'),
})
})
.finally(() => this.isDeclining = false)
},
closeCenter() {
this.$store.commit('CLOSE_NOTIFICATION_CENTER')