refactor: errors for server

This commit is contained in:
Zack Spear
2023-07-12 13:54:22 -07:00
committed by Zack Spear
parent a46f5a3cb4
commit 1dd717be2e
13 changed files with 100 additions and 56 deletions
+2 -2
View File
@@ -7,10 +7,10 @@ import { useServerStore } from '~/store/server';
const dropdownStore = useDropdownStore()
const { dropdownVisible } = storeToRefs(dropdownStore);
const { pluginInstalled, registered, state } = storeToRefs(useServerStore());
const { pluginInstalled, registered, state, stateDataError, serverErrors } = storeToRefs(useServerStore());
const showDefaultContent = computed(() => !showLaunchpad.value);
const showLaunchpad = computed(() => state.value === 'ENOKEYFILE' || (pluginInstalled.value && !registered.value));
const showLaunchpad = computed(() => state.value === 'ENOKEYFILE' || (pluginInstalled.value && !registered.value) && !stateDataError.value);
</script>
<template>
+2 -2
View File
@@ -84,7 +84,7 @@ const links = computed(():UserProfileLink[] => {
<UpcDropdownError />
<UpcDropdownConnectStatus v-if="!stateData.error && registered && pluginInstalled" class="mt-8px" />
<li class="m-8px">
<li v-if="keyActions || links.length" class="m-8px">
<UpcKeyline />
</li>
@@ -94,7 +94,7 @@ const links = computed(():UserProfileLink[] => {
</li>
</template>
<template v-if="links">
<template v-if="links.length">
<li v-for="(link, index) in links" :key="`link_${index}`">
<UpcDropdownItem :item="link" />
</li>
+3 -23
View File
@@ -1,35 +1,15 @@
<script setup lang="ts">
import { storeToRefs } from 'pinia';
// import {
// ExclamationCircleIcon,
// ExclamationTriangleIcon,
// ShieldExclamationIcon,
// } from '@heroicons/vue/24/solid';
import { useErrorsStore, type Error } from '~/store/errors';
import { useServerStore } from '~/store/server';
import { useErrorsStore } from '~/store/errors';
const errorsStore = useErrorsStore();
const { errors } = storeToRefs(errorsStore);
const { stateData } = storeToRefs(useServerStore());
const computedErrors = computed(() => {
if (stateData.value?.error) {
return [
{
heading: stateData.value.heading,
level: 'error',
message: stateData.value.message,
},
];
};
return errors.value;
});
</script>
<template>
<ul v-if="computedErrors" class="text-white bg-unraid-red/90 font-semibold list-reset flex flex-col gap-y-8px mb-4px py-12px px-16px rounded">
<li v-for="(error, index) in computedErrors" :key="index" class="flex flex-col gap-8px">
<ul v-if="errors.length" class="text-white bg-unraid-red/90 font-semibold list-reset flex flex-col gap-y-8px mb-4px py-12px px-16px rounded">
<li v-for="(error, index) in errors" :key="index" class="flex flex-col gap-8px">
<h3 class="text-18px">
<span>{{ error.heading }}</span>
</h3>
+1 -1
View File
@@ -24,7 +24,7 @@ const showExpireTime = computed(() => {
</script>
<template>
<div class="flex flex-col gap-y-24px w-full min-w-300px md:min-w-[500px] max-w-4xl p-16px">
<div class="flex flex-col gap-y-24px w-full min-w-300px md:min-w-[500px] max-w-xl p-16px">
<header :class="{ 'text-center': showConnectCopy }">
<h2 class="text-24px text-center font-semibold" v-html="heading" />
<div v-html="subheading" class="flex flex-col gap-y-8px" />
+6 -4
View File
@@ -1,6 +1,6 @@
<script setup lang="ts">
import { storeToRefs } from 'pinia';
import { InformationCircleIcon, ExclamationTriangleIcon } from '@heroicons/vue/24/solid';
import { InformationCircleIcon, ExclamationTriangleIcon, ShieldExclamationIcon } from '@heroicons/vue/24/solid';
import { useDropdownStore } from '~/store/dropdown';
import { useErrorsStore } from '~/store/errors';
import { useServerStore } from '~/store/server';
@@ -10,7 +10,6 @@ const { dropdownVisible } = storeToRefs(dropdownStore);
const { errors } = storeToRefs(useErrorsStore());
const {
pluginInstalled,
pluginOutdated,
registered,
state,
stateData,
@@ -40,8 +39,11 @@ const title = computed((): string => {
class="group text-18px hover:text-alpha focus:text-alpha border border-transparent relative flex flex-row justify-end items-center h-full gap-x-8px outline-none focus:outline-none"
:title="title"
>
<InformationCircleIcon v-if="pluginOutdated" class="text-unraid-red fill-current relative w-24px h-24px" />
<ExclamationTriangleIcon v-else-if="showErrorIcon" class="text-unraid-red fill-current relative w-24px h-24px" />
<template v-if="errors.length && errors[0].level">
<InformationCircleIcon v-if="errors[0].level === 'info'" class="text-unraid-red fill-current relative w-24px h-24px" />
<ExclamationTriangleIcon v-if="errors[0].level === 'warning'" class="text-unraid-red fill-current relative w-24px h-24px" />
<ShieldExclamationIcon v-if="errors[0].level === 'error'" class="text-unraid-red fill-current relative w-24px h-24px" />
</template>
<span v-if="text" class="relative leading-none">
<span>{{ text }}</span>
<span class="absolute bottom-[-3px] inset-x-0 h-2px w-full bg-gradient-to-r from-unraid-red to-orange rounded opacity-0 group-hover:opacity-100 group-focus:opacity-100 transition-opacity"></span>