refactor(web): KeyActions extensibility

This commit is contained in:
Zack Spear
2023-09-28 15:39:50 -07:00
committed by Zack Spear
parent d3429f31a6
commit c299a794b2
3 changed files with 32 additions and 28 deletions

View File

@@ -1,15 +1,21 @@
<script lang="ts" setup>
import { ArrowTopRightOnSquareIcon } from '@heroicons/vue/24/solid';
import { storeToRefs } from 'pinia';
import { useServerStore } from '~/store/server';
import type { ServerStateDataAction } from '~/types/server';
const props = defineProps<{
actions: ServerStateDataAction[];
const props = withDefaults(defineProps<{
actions?: ServerStateDataAction[];
filterBy?: string[] | undefined;
filterOut?: string[] | undefined;
maxWidth?: boolean;
t: any;
}>();
}>(), {
filterBy: undefined,
filterOut: undefined,
maxWidth: false,
});
const { keyActions } = storeToRefs(useServerStore());
@@ -30,11 +36,16 @@ const filteredKeyActions = computed((): ServerStateDataAction[] | undefined => {
<ul v-if="filteredKeyActions" class="flex flex-col gap-y-8px">
<li v-for="action in filteredKeyActions" :key="action.name">
<BrandButton
class="w-full sm:max-w-300px"
:class="[
'w-full',
props.maxWidth ? 'sm:max-w-300px' : '',
]"
:disabled="action?.disabled"
:external="action?.external"
:href="action?.href"
:icon="action.icon"
:icon-right="ArrowTopRightOnSquareIcon"
:icon-right-hover="true"
:text="t(action.text)"
@click="action.click()"
/>

View File

@@ -68,6 +68,8 @@ onBeforeUnmount(() => {
:disabled="renewAction?.disabled"
:external="renewAction?.external"
:icon="renewAction.icon"
:icon-right="ArrowTopRightOnSquareIcon"
:icon-right-hover="true"
:text="t('Renew Key')"
@click="renewAction.click()"
:title="t('Renew your license key to continue receiving OS updates.')"

View File

@@ -41,30 +41,21 @@ const showExpireTime = computed(() => {
:t="t"
/>
</header>
<ul v-if="stateData.actions" class="list-reset flex flex-col gap-y-8px px-16px">
<li v-if="connectPluginInstalled && unraidApiStatus !== 'online'">
<BrandButton
class="w-full"
:disabled="unraidApiStatus === 'connecting' || unraidApiStatus === 'restarting'"
:icon="unraidApiStatus === 'restarting' ? BrandLoadingWhite : unraidApiRestartAction?.icon"
:text="unraidApiStatus === 'restarting' ? t('Restarting unraid-api…') : t('Restart unraid-api')"
:title="unraidApiStatus === 'restarting' ? t('Restarting unraid-api…') : t('Restart unraid-api')"
@click="unraidApiRestartAction?.click()"
/>
</li>
<li v-for="action in stateData.actions" :key="action.name">
<BrandButton
class="w-full"
:disabled="action?.disabled"
:external="action?.external"
:href="action?.href"
:icon="action.icon"
:text="t(action.text)"
:title="action?.title ? t(action?.title) : null"
@click="action.click()"
/>
</li>
</ul>
<template v-if="stateData.actions">
<ul v-if="connectPluginInstalled && unraidApiStatus !== 'online'" class="list-reset flex flex-col gap-y-8px px-16px">
<li>
<BrandButton
class="w-full"
:disabled="unraidApiStatus === 'connecting' || unraidApiStatus === 'restarting'"
:icon="unraidApiStatus === 'restarting' ? BrandLoadingWhite : unraidApiRestartAction?.icon"
:text="unraidApiStatus === 'restarting' ? t('Restarting unraid-api…') : t('Restart unraid-api')"
:title="unraidApiStatus === 'restarting' ? t('Restarting unraid-api…') : t('Restart unraid-api')"
@click="unraidApiRestartAction?.click()"
/>
</li>
</ul>
<KeyActions :actions="stateData.actions" :t="t" />
</template>
</div>
</template>