fix: dropdown content keyline conditional display

This commit is contained in:
Zack Spear
2023-07-14 12:21:17 -07:00
parent a1b7ee0800
commit 7f9412a758
2 changed files with 14 additions and 5 deletions

View File

@@ -29,7 +29,7 @@ const blacklistedGuid = '154B-00EE-0700-9B50CF819816';
// EBLACKLISTED1
// EBLACKLISTED2
// ENOCONN
const state: string = 'EGUID';
const state: string = 'BASIC';
const uptime = Date.now() - 60 * 60 * 1000; // 1 hour ago
let expireTime = 0;
@@ -55,7 +55,8 @@ const serverState = {
"license": "",
"locale": "en_US",
"name": "fuji",
"connectPluginInstalled": "dynamix.unraid.net.staging.plg",
// "connectPluginInstalled": "dynamix.unraid.net.staging.plg",
"connectPluginInstalled": "",
"registered": false,
"regGen": 0,
// "regGuid": "0781-5583-8355-81071A2B0211",

View File

@@ -3,6 +3,7 @@ import { storeToRefs } from 'pinia';
import { ArrowTopRightOnSquareIcon, CogIcon, InformationCircleIcon, } from '@heroicons/vue/24/solid';
import { ACCOUNT, CONNECT_DASHBOARD, PLUGIN_SETTINGS } from '~/helpers/urls';
import { useErrorsStore } from '~/store/errors';
import { usePromoStore } from '~/store/promo';
import { useServerStore } from '~/store/server';
import type { UserProfileLink } from '~/types/userProfile';
@@ -10,8 +11,11 @@ import type { UserProfileLink } from '~/types/userProfile';
const myServersEnv = ref<string>('Staging');
const devEnv = ref<string>('development');
const errorsStore = useErrorsStore();
const promoStore = usePromoStore();
const { keyActions, connectPluginInstalled, registered, stateData } = storeToRefs(useServerStore());
const { errors } = storeToRefs(errorsStore);
const signInAction = computed(() => stateData.value.actions?.filter((act: { name: string; }) => act.name === 'signIn') ?? []);
const signOutAction = computed(() => stateData.value.actions?.filter((act: { name: string; }) => act.name === 'signOut') ?? []);
@@ -66,6 +70,10 @@ const links = computed(():UserProfileLink[] => {
),
];
});
const showErrors = computed(() => errors.value.length);
const showConnectStatus = computed(() => !stateData.value.error && registered.value && connectPluginInstalled.value);
const showKeyline = computed(() => (showErrors.value || showConnectStatus.value) && keyActions.value?.length && links.value.length);
</script>
<template>
@@ -81,10 +89,10 @@ const links = computed(():UserProfileLink[] => {
</span>
</header>
<ul class="list-reset flex flex-col gap-y-4px p-0">
<UpcDropdownError />
<UpcDropdownConnectStatus v-if="!stateData.error && registered && connectPluginInstalled" class="mt-8px" />
<UpcDropdownError v-if="showErrors" />
<UpcDropdownConnectStatus v-if="showConnectStatus" class="mt-8px" />
<li v-if="keyActions || links.length" class="m-8px">
<li v-if="showKeyline" class="m-8px">
<UpcKeyline />
</li>