Skip to content

Commit

Permalink
feat: added git status
Browse files Browse the repository at this point in the history
  • Loading branch information
@tikazyq
tikazyq committed Jun 18, 2024
1 parent 121feb8 commit 4a06a08
Show file tree
Hide file tree
Showing 17 changed files with 344 additions and 194 deletions.
84 changes: 84 additions & 0 deletions src/components/git/GitStatus.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,84 @@
<script setup lang="ts">
import { computed } from 'vue';
import {
GIT_STATUS_PENDING,
GIT_STATUS_READY,
GIT_STATUS_ERROR,
GIT_STATUS_CLONING,
} from '@/constants/git';
import { useI18n } from 'vue-i18n';
const props = defineProps<{
status: GitStatus;
size?: BasicSize;
error?: string;
}>();
const emit = defineEmits<{
(e: 'click', _: void): void;
}>();
const { t } = useI18n();
const data = computed<TagData>(() => {
const { status, error } = props;
switch (status) {
case GIT_STATUS_PENDING:
return {
label: t('components.git.status.label.pending'),
tooltip: t('components.git.status.tooltip.pending'),
type: '',
icon: ['fa', 'hourglass-start'],
spinning: true,
};
case GIT_STATUS_CLONING:
return {
label: t('components.git.status.label.cloning'),
tooltip: t('components.git.status.tooltip.cloning'),
type: 'warning',
icon: ['fa', 'spinner'],
spinning: true,
};
case GIT_STATUS_READY:
return {
label: t('components.git.status.label.ready'),
tooltip: t('components.git.status.tooltip.ready'),
type: 'success',
icon: ['fa', 'check'],
};
case GIT_STATUS_ERROR:
return {
label: t('components.git.status.label.error'),
tooltip: `${t('components.git.status.tooltip.error')}<br><span style="color: 'var(--cl-red)">${error}</span>`,
type: 'danger',
icon: ['fa', 'times'],
};
default:
return {
label: t('components.git.status.label.unknown'),
tooltip: t('components.git.status.tooltip.unknown'),
type: 'info',
icon: ['fa', 'question'],
};
}
});
</script>

<template>
<cl-tag
:key="data"
:icon="data.icon"
:label="data.label"
:size="size"
:spinning="data.spinning"
:tooltip="data.tooltip"
:type="data.type"
@click="emit('click')"
>
<template #tooltip>
<div v-html="data.tooltip" />
</template>
</cl-tag>
</template>

<style lang="scss" scoped></style>
149 changes: 63 additions & 86 deletions src/components/node/NodeStatus.vue
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,5 @@
<template>
<cl-tag
:key="data"
:icon="data.icon"
:label="data.label"
:size="size"
:spinning="data.spinning"
:tooltip="data.tooltip"
:type="data.type"
@click="$emit('click')"
/>
</template>

<script lang="ts">
import { computed, defineComponent, PropType } from 'vue';
import Tag from '@/components/tag/Tag.vue';
<script setup lang="ts">
import { computed } from 'vue';
import {
NODE_STATUS_OFFLINE,
NODE_STATUS_ONLINE,
Expand All @@ -22,79 +8,70 @@ import {
} from '@/constants/node';
import { useI18n } from 'vue-i18n';
export default defineComponent({
name: 'NodeStatus',
props: {
status: {
type: String as PropType<TaskStatus>,
required: false,
},
size: {
type: String as PropType<BasicSize>,
required: false,
default: 'default',
},
},
emits: ['click'],
setup(props: NodeStatusProps, { emit }) {
const { t } = useI18n();
const props = defineProps<{
status: NodeStatus;
size?: BasicSize;
}>();
const emit = defineEmits<{
(e: 'click', _: void): void;
}>();
const data = computed<TagData>(() => {
const { status } = props;
switch (status) {
case NODE_STATUS_UNREGISTERED:
return {
label: t('components.node.nodeStatus.label.unregistered'),
tooltip: t('components.node.nodeStatus.tooltip.unregistered'),
type: 'danger',
icon: ['fa', 'exclamation'],
};
case NODE_STATUS_REGISTERED:
return {
label: t('components.node.nodeStatus.label.registered'),
tooltip: t('components.node.nodeStatus.tooltip.registered'),
type: 'warning',
icon: ['far', 'check-square'],
};
case NODE_STATUS_ONLINE:
return {
label: t('components.node.nodeStatus.label.online'),
tooltip: t('components.node.nodeStatus.tooltip.online'),
type: 'success',
icon: ['fa', 'check'],
};
case NODE_STATUS_OFFLINE:
return {
label: t('components.node.nodeStatus.label.offline'),
tooltip: t('components.node.nodeStatus.tooltip.offline'),
type: 'info',
icon: ['fa', 'times'],
};
default:
return {
label: t('components.node.nodeStatus.label.unknown'),
tooltip: t('components.node.nodeStatus.tooltip.unknown'),
type: 'info',
icon: ['fa', 'question'],
};
}
});
const { t } = useI18n();
return {
data,
};
},
const data = computed<TagData>(() => {
const { status } = props;
switch (status) {
case NODE_STATUS_UNREGISTERED:
return {
label: t('components.node.nodeStatus.label.unregistered'),
tooltip: t('components.node.nodeStatus.tooltip.unregistered'),
type: 'danger',
icon: ['fa', 'exclamation'],
};
case NODE_STATUS_REGISTERED:
return {
label: t('components.node.nodeStatus.label.registered'),
tooltip: t('components.node.nodeStatus.tooltip.registered'),
type: 'warning',
icon: ['far', 'check-square'],
};
case NODE_STATUS_ONLINE:
return {
label: t('components.node.nodeStatus.label.online'),
tooltip: t('components.node.nodeStatus.tooltip.online'),
type: 'success',
icon: ['fa', 'check'],
};
case NODE_STATUS_OFFLINE:
return {
label: t('components.node.nodeStatus.label.offline'),
tooltip: t('components.node.nodeStatus.tooltip.offline'),
type: 'info',
icon: ['fa', 'times'],
};
default:
return {
label: t('components.node.nodeStatus.label.unknown'),
tooltip: t('components.node.nodeStatus.tooltip.unknown'),
type: 'info',
icon: ['fa', 'question'],
};
}
});
</script>

<style lang="scss" scoped>
.task-status {
width: 80px;
cursor: default;
<template>
<cl-tag
:key="data"
:icon="data.icon"
:label="data.label"
:size="size"
:spinning="data.spinning"
:tooltip="data.tooltip"
:type="data.type"
@click="emit('click')"
/>
</template>

.icon {
width: 10px;
margin-right: 5px;
}
}
</style>
<style lang="scss" scoped></style>
Loading

0 comments on commit 4a06a08

Please sign in to comment.