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

added plan synchronization button

Browse Source
This commit is contained in:
Čarodej
2022-05-09 09:57:25 +02:00
parent 0b2d05a899
commit 2c933c65a7
8 changed files with 248 additions and 301 deletions
Download Patch File Download Diff File Expand all files Collapse all files

134
resources/js/components/Popups/ProcessingPopup.vue
View File

@@ -1,13 +1,27 @@
<template>
<transition name="popup">
<div class="popup" v-if="processingPopup">
<div class="popup-wrapper">
<div class="popup-content">
<div class="spinner-wrapper">
<Spinner />
<div
v-if="processingPopup"
class="popup fixed top-0 left-0 right-0 bottom-0 z-50 grid h-full overflow-y-auto p-10 lg:absolute"
>
<div
class="fixed top-0 bottom-0 left-0 right-0 z-10 m-auto w-full bg-white shadow-xl dark:bg-dark-foreground md:relative md:w-[490px] md:rounded-xl"
>
<div
class="flex h-full -translate-y-7 transform items-center justify-center px-8 text-center md:translate-y-0"
>
<div>
<div class="relative pb-16 pt-10">
<Spinner />
</div>
<h1 v-if="processingPopup.title" class="mb-2 text-2xl font-bold">
{{ processingPopup.title }}
</h1>
<p v-if="processingPopup.message" class="mb-4 text-sm">
{{ processingPopup.message }}
</p>
</div>
<h1 class="title">{{ processingPopup.title }}</h1>
<p class="message">{{ processingPopup.message }}</p>
</div>
</div>
</div>
@@ -17,10 +31,12 @@
<script>
import Spinner from '../UI/Others/Spinner'
import { mapGetters } from 'vuex'
import PopupWrapper from './Components/PopupWrapper'
export default {
name: 'ProcessingPopup',
components: {
PopupWrapper,
Spinner,
},
computed: {
@@ -28,107 +44,3 @@ export default {
},
}
</script>
<style scoped lang="scss">
@import '../../../sass/vuefilemanager/variables';
@import '../../../sass/vuefilemanager/mixins';
.spinner-wrapper {
padding-bottom: 90px;
position: relative;
}
.popup {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 20;
overflow: auto;
height: 100%;
}
.popup-wrapper {
z-index: 12;
position: absolute;
left: 0;
right: 0;
max-width: 480px;
top: 50%;
transform: translateY(-50%) scale(1);
margin: 0 auto;
padding: 20px;
box-shadow: $light_mode_popup_shadow;
border-radius: 8px;
text-align: center;
background: white;
}
.popup-content {
.title {
@include font-size(22);
font-weight: 700;
color: $text;
}
.message {
@include font-size(16);
color: #333;
margin-top: 5px;
}
}
@media only screen and (max-width: 690px) {
.popup-wrapper {
padding: 20px;
left: 15px;
right: 15px;
}
.popup-content {
.title {
@include font-size(19);
}
.message {
@include font-size(15);
}
}
}
.dark {
.popup-wrapper {
background: $dark_mode_foreground;
}
.popup-content {
.title {
color: $dark_mode_text_primary;
}
.message {
color: $dark_mode_text_secondary;
}
}
}
// Animations
.popup-enter-active {
animation: popup-in 0.35s 0.15s ease both;
}
.popup-leave-active {
animation: popup-in 0.15s ease reverse;
}
@keyframes popup-in {
0% {
opacity: 0;
transform: scale(0.7);
}
100% {
opacity: 1;
transform: scale(1);
}
}
</style>

3
resources/js/views/Admin.vue
View File

@@ -15,6 +15,7 @@
<!--ConfirmPopup Popup-->
<ConfirmPopup />
<ProcessingPopup />
<!-- Create language popup -->
<CreateLanguage />
@@ -88,6 +89,7 @@ import CreateUploadRequestPopup from "../components/UploadRequest/CreateUploadRe
import CreateTeamFolderPopup from "../components/Teams/CreateTeamFolderPopup";
import NotificationsPopup from "../components/Notifications/NotificationsPopup";
import RemoteUploadPopup from "../components/RemoteUpload/RemoteUploadPopup";
import ProcessingPopup from "../components/Popups/ProcessingPopup";
export default {
name: 'Admin',
@@ -192,6 +194,7 @@ export default {
},
},
components: {
ProcessingPopup,
RemoteUploadPopup,
NotificationsPopup,
CreateTeamFolderPopup,

35
resources/js/views/Admin/Plans.vue
View File

@@ -9,6 +9,9 @@
{{ $t('create_plan') }}
</MobileActionButton>
</router-link>
<MobileActionButton @click.native="synchronizePlans" icon="refresh">
{{ $t('synchronize_plans') }}
</MobileActionButton>
</div>
<!--Datatable-->
@@ -202,6 +205,7 @@ import ButtonBase from '../../components/UI/Buttons/ButtonBase'
import ColorLabel from '../../components/UI/Labels/ColorLabel'
import { Trash2Icon, Edit2Icon } from 'vue-feather-icons'
import { mapGetters } from 'vuex'
import {events} from "../../bus";
export default {
name: 'Plans',
@@ -296,5 +300,36 @@ export default {
}[this.config.subscriptionType]
},
},
methods: {
synchronizePlans() {
let processingPopup = setTimeout(() => {
this.$store.commit('PROCESSING_POPUP', {
title: this.$t('synchronizing_plans'),
message: this.$t('plans_are_synchronizing'),
})
}, 300)
axios.get('/api/subscriptions/admin/plans/synchronize')
.then(() => {
events.$emit('toaster', {
type: 'success',
message: this.$t('plans_was_synchronized'),
})
})
.catch((error) => {
if (error.response.status === 500 && error.response.data.type) {
events.$emit('alert:open', {
title: error.response.data.title,
message: error.response.data.message,
})
}
})
.finally(() => {
clearTimeout(processingPopup)
this.$store.commit('PROCESSING_POPUP', undefined)
})
}
}
}
</script>