6ba071dc98
the aim is to make the tests more about the behavior rather than implementation, add some missing tests, and improve the code.
38 lines
1.0 KiB
Vue
38 lines
1.0 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue';
|
|
|
|
import Spinner from '@/components/base/icons/AppSpinner.vue';
|
|
import AppRoundIndicator from '@/components/base/round-indicator/AppRoundIndicator.vue';
|
|
import { STATUS } from '@/interfaces/http';
|
|
|
|
interface StatusIndicatorProps {
|
|
status: STATUS;
|
|
}
|
|
|
|
const props = defineProps<StatusIndicatorProps>();
|
|
|
|
const variants = {
|
|
[STATUS.INFORMATION]: 'text-zinc-500',
|
|
[STATUS.SUCCESS]: 'text-emerald-600',
|
|
[STATUS.REDIRECT]: 'text-blue-500',
|
|
[STATUS.CLIENT_ERROR]: 'text-amber-500',
|
|
[STATUS.SERVER_ERROR]: 'text-rose-500',
|
|
[STATUS.OTHER]: 'text-zinc-500',
|
|
[STATUS.EMPTY]: 'text-zinc-900',
|
|
[STATUS.PENDING]: '',
|
|
};
|
|
|
|
const indicatorColor = computed<string>(() => {
|
|
return variants[props.status];
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<Spinner
|
|
v-if="props.status === STATUS.PENDING"
|
|
data-testid="pending-request-spinner"
|
|
class="text-accent-foreground size-4 animate-spin"
|
|
/>
|
|
<AppRoundIndicator v-else :class="indicatorColor" />
|
|
</template>
|