mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-18 16:22:14 +00:00
vue components refactoring
This commit is contained in:
Čarodej
@@ -0,0 +1,161 @@
|
||||
<template>
|
||||
<article
|
||||
class="delay-[3000ms] duration-700 transition-all relative z-[11] mb-1.5 flex items-start space-x-4 rounded-xl p-2.5"
|
||||
:class="{'dark:bg-4x-dark-foreground bg-light-background/80': isUnread}"
|
||||
>
|
||||
<gift-icon
|
||||
v-if="notification.data.attributes.category === 'gift'"
|
||||
size="22"
|
||||
class="vue-feather text-theme shrink-0"
|
||||
/>
|
||||
<user-plus-icon
|
||||
v-if="notification.data.attributes.category === 'team-invitation'"
|
||||
size="22"
|
||||
class="vue-feather text-theme shrink-0"
|
||||
/>
|
||||
<trending-up-icon
|
||||
v-if="notification.data.attributes.category === 'subscription-created'"
|
||||
size="22"
|
||||
class="vue-feather text-theme shrink-0"
|
||||
/>
|
||||
<alert-triangle-icon
|
||||
v-if="['billing-alert', 'insufficient-balance'].includes(notification.data.attributes.category)"
|
||||
size="22"
|
||||
class="vue-feather text-theme shrink-0"
|
||||
/>
|
||||
<upload-cloud-icon
|
||||
v-if="['file-request', 'remote-upload-done'].includes(notification.data.attributes.category)"
|
||||
size="22"
|
||||
class="vue-feather text-theme shrink-0"
|
||||
/>
|
||||
|
||||
<div>
|
||||
<b class="mb-1.5 block font-extrabold">
|
||||
{{ notification.data.attributes.title }}
|
||||
</b>
|
||||
|
||||
<p class="mb-1.5 text-sm dark:text-gray-500">
|
||||
{{ notification.data.attributes.description }}
|
||||
</p>
|
||||
|
||||
<div class="flex items-center">
|
||||
<!--<MemberAvatar class="mr-2" :size="22" :is-border="false" :member="user" />-->
|
||||
<time class="block text-xs text-gray-400 dark:text-gray-400">
|
||||
{{ notification.data.attributes.created_at }}
|
||||
</time>
|
||||
</div>
|
||||
|
||||
<!--Accept or decline team invitation-->
|
||||
<div v-if="action && action.type === 'invitation'" class="flex items-center space-x-3 mt-4">
|
||||
<div
|
||||
@click="acceptAction"
|
||||
class="relative flex cursor-pointer items-center rounded-xl py-1.5 px-2 transition-colors bg-green-100 dark:bg-green-900"
|
||||
>
|
||||
<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="relative flex cursor-pointer items-center rounded-xl py-1.5 px-2 transition-colors bg-rose-100 dark:bg-rose-900"
|
||||
>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<!--Go to route-->
|
||||
<router-link
|
||||
@click.native="closeCenter"
|
||||
v-if="action && action.type === 'route'"
|
||||
:to="{ name: action.params.route, params: { id: action.params.id } }"
|
||||
class="mt-4 flex items-center"
|
||||
>
|
||||
<span class="mr-2 whitespace-nowrap text-xs font-bold">
|
||||
{{ action.params.button }}
|
||||
</span>
|
||||
<chevron-right-icon size="16" class="text-theme vue-feather" />
|
||||
</router-link>
|
||||
</div>
|
||||
</article>
|
||||
</template>
|
||||
<script>
|
||||
import { RefreshCwIcon, TrendingUpIcon, GiftIcon, CheckIcon, XIcon, MailIcon, UserPlusIcon, UploadCloudIcon, ChevronRightIcon, AlertTriangleIcon } from 'vue-feather-icons'
|
||||
import MemberAvatar from '../../UI/Others/MemberAvatar'
|
||||
import {events} from "../../../bus";
|
||||
|
||||
export default {
|
||||
name: 'Notification',
|
||||
props: ['notification'],
|
||||
components: {
|
||||
MemberAvatar,
|
||||
AlertTriangleIcon,
|
||||
ChevronRightIcon,
|
||||
UploadCloudIcon,
|
||||
TrendingUpIcon,
|
||||
RefreshCwIcon,
|
||||
UserPlusIcon,
|
||||
CheckIcon,
|
||||
GiftIcon,
|
||||
MailIcon,
|
||||
XIcon,
|
||||
},
|
||||
computed: {
|
||||
action() {
|
||||
return this.notification.data.attributes.action
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
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)
|
||||
|
||||
events.$emit('toaster', {
|
||||
type: 'success',
|
||||
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)
|
||||
|
||||
events.$emit('toaster', {
|
||||
type: 'success',
|
||||
message: this.$t('you_decline_invitation'),
|
||||
})
|
||||
})
|
||||
.finally(() => this.isDeclining = false)
|
||||
},
|
||||
closeCenter() {
|
||||
this.$store.commit('CLOSE_NOTIFICATION_CENTER')
|
||||
this.$closePopup()
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.isUnread = this.notification.data.attributes.read_at === null
|
||||
|
||||
setTimeout(() => this.isUnread = false, 1000)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user