Sid Gifari File Manager
🏠 Root
/
home2
/
nuveprin
/
nomascuartosvacios.org
/
wp-content
/
plugins
/
wp-user-frontend
/
assets
/
js
/
components
/
Editing: Subscriptions.vue
<script setup> import {provide, onBeforeMount, ref, watch} from 'vue'; import {storeToRefs} from 'pinia'; import { useComponentStore } from '../stores/component'; import {HollowDotsSpinner} from 'epic-spinners'; import Header from './Header.vue'; import SidebarMenu from './subscriptions/SidebarMenu.vue'; import List from './subscriptions/List.vue'; import Empty from './subscriptions/Empty.vue'; import Edit from './subscriptions/Edit.vue'; import New from './subscriptions/New.vue'; import Preferences from './subscriptions/Preferences.vue'; import QuickEdit from './subscriptions/QuickEdit.vue'; import {useQuickEditStore} from '../stores/quickEdit'; import Notice from './subscriptions/Notice.vue'; import {useSubscriptionStore} from '../stores/subscription'; import Unsaved from './subscriptions/Unsaved.vue'; import {useNoticeStore} from '../stores/notice'; import ContentHeader from './subscriptions/ContentHeader.vue'; const componentStore = useComponentStore(); const subscriptionStore = useSubscriptionStore(); const quickEditStore = useQuickEditStore(); const noticeStore = useNoticeStore(); const {notices} = storeToRefs( noticeStore ); const component = ref( null ); const tempSubscriptionStatus = ref( 'all' ); const tempNavigationTarget = ref( null ); const componentKey = ref( 0 ); const noticeKey = ref( 0 ); provide( 'wpufSubscriptions', wpufSubscriptions ); onBeforeMount( () => { const promiseResult = subscriptionStore.setSubscriptionsByStatus( subscriptionStore.currentSubscriptionStatus ); promiseResult.then( ( result ) => { if (subscriptionStore.subscriptionList) { componentStore.setCurrentComponent( 'List' ); } else { componentStore.setCurrentComponent( 'Empty' ); } componentKey.value += 1; } ); subscriptionStore.getSubscriptionCount(); } ); const checkIsDirty = ( subscriptionStatus = 'all' ) => { if (subscriptionStatus === 'preferences') { // Handle preferences separately if (subscriptionStore.isDirty) { subscriptionStore.isUnsavedPopupOpen = true; tempNavigationTarget.value = 'preferences'; // Keep current subscription status for list navigation tempSubscriptionStatus.value = subscriptionStore.currentSubscriptionStatus || 'all'; } else { componentStore.setCurrentComponent( 'Preferences' ); subscriptionStore.currentSubscriptionStatus = 'preferences'; } } else if (subscriptionStore.isDirty) { subscriptionStore.isUnsavedPopupOpen = true; tempSubscriptionStatus.value = subscriptionStatus; tempNavigationTarget.value = null; } else { subscriptionStore.isDirty = false; subscriptionStore.isUnsavedPopupOpen = false; subscriptionStore.setSubscriptionsByStatus( subscriptionStatus ); componentStore.setCurrentComponent( 'List' ); subscriptionStore.setCurrentSubscription(null); subscriptionStore.getSubscriptionCount(); subscriptionStore.currentPageNumber = 1; } }; const goToList = () => { subscriptionStore.isDirty = false; subscriptionStore.isUnsavedPopupOpen = false; // Check if we're navigating to preferences if (tempNavigationTarget.value === 'preferences') { componentStore.setCurrentComponent( 'Preferences' ); subscriptionStore.currentSubscriptionStatus = 'preferences'; tempNavigationTarget.value = null; } else { subscriptionStore.setSubscriptionsByStatus( tempSubscriptionStatus.value ); componentStore.setCurrentComponent( 'List' ); subscriptionStore.setCurrentSubscription(null); subscriptionStore.currentPageNumber = 1; } }; const removeNotice = ( index ) => { noticeStore.removeNotice( index ); noticeKey.value += 1; }; watch( () => componentStore.currentComponent, ( newComponent ) => { switch ( newComponent ) { case 'List': component.value = List; break; case 'Edit': component.value = Edit; break; case 'New': component.value = New; break; case 'Preferences': component.value = Preferences; break; default: component.value = Empty; } subscriptionStore.resetErrors(); } ); </script> <template> <div> <Header utm="wpuf-subscription"/> <div v-if="subscriptionStore.isSubscriptionLoading || component === null" class="wpuf-flex wpuf-h-svh wpuf-items-center wpuf-justify-center"> <hollow-dots-spinner :animation-duration="1000" :dot-size="20" :dots-num="3" :color="'#7DC442'" /> </div> <div v-if="quickEditStore.isQuickEdit" @click="[quickEditStore.setQuickEditStatus(false), subscriptionStore.errors = {}]" class="wpuf-absolute wpuf-w-full wpuf-h-screen wpuf-z-10 wpuf-left-[-20px]"></div> <template v-if="quickEditStore.isQuickEdit"> <QuickEdit /> </template> <ContentHeader /> <div v-if="!subscriptionStore.isSubscriptionLoading" :class="quickEditStore.isQuickEdit ? 'wpuf-blur' : ''" class="wpuf-flex wpuf-pt-[40px] wpuf-pr-[20px] wpuf-pl-[20px]"> <div class="wpuf-basis-1/5 wpuf-border-r-2 wpuf-border-gray-200"> <keep-alive> <SidebarMenu @check-is-dirty="checkIsDirty" /> </keep-alive> </div> <div class="wpuf-basis-4/5"> <component :key="componentKey" :is="component" @go-to-list="goToList" @check-is-dirty="checkIsDirty" /> </div> <Unsaved v-if="subscriptionStore.isUnsavedPopupOpen" @close-popup="subscriptionStore.isUnsavedPopupOpen = false" @goToList="goToList" /> </div> <div class="wpuf-fixed wpuf-top-20 wpuf-right-8 wpuf-z-10"> <template v-if="noticeStore.display"> <Notice v-for="(notice, index) in notices" :key="`notice-${index}`" :index="index" :type="notice.type" :message="notice.message" @removeNotice="removeNotice(index)" /> </template> </div> </div> </template>
Save
Cancel