mirror of
https://github.com/unraid/api.git
synced 2026-02-18 05:58:28 -06:00
refactor(web): KeyActions extensibility
This commit is contained in:
@@ -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()"
|
||||
/>
|
||||
|
||||
@@ -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.')"
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user