Skip to content

Commit

Permalink
convert ProgressBar.vue to composition API + ts
Browse files Browse the repository at this point in the history
  • Loading branch information
ahmedhamidawan committed Aug 16, 2024
1 parent 13b08d8 commit be8f9b6
Showing 1 changed file with 39 additions and 47 deletions.
86 changes: 39 additions & 47 deletions client/src/components/ProgressBar.vue
Original file line number Diff line number Diff line change
@@ -1,58 +1,50 @@
<script setup lang="ts">
// Not really a very generic ProgressBar - consider renaming to StateProgressBar.
import { BProgress, BProgressBar } from "bootstrap-vue";
interface Props {
total: number;
note: string;
loading: boolean;
okCount: number;
runningCount: number;
newCount: number;
errorCount: number;
}
const props = withDefaults(defineProps<Props>(), {
total: 1,
note: undefined,
loading: false,
okCount: 0,
runningCount: 0,
newCount: 0,
errorCount: 0,
});
</script>

<template>
<div class="my-1 progressContainer">
<small v-if="note" class="progressNote">
{{ note }}<span v-if="loading">.<span class="blinking">..</span></span>
<div class="my-1 progress-container">
<small v-if="props.note" class="progress-note">
{{ props.note }}<span v-if="props.loading">.<span class="blinking">..</span></span>
</small>
<b-progress :max="total">
<b-progress-bar variant="success" :value="okCount" />
<b-progress-bar variant="danger" :value="errorCount" />
<b-progress-bar variant="warning" :value="runningCount" />
<b-progress-bar variant="warning" :value="newCount" />
</b-progress>
<BProgress :max="props.total">
<BProgressBar variant="success" :value="props.okCount" />
<BProgressBar variant="danger" :value="props.errorCount" />
<BProgressBar variant="warning" :value="props.runningCount" />
<BProgressBar variant="warning" :value="props.newCount" />
</BProgress>
</div>
</template>
<script>
// Not really a very generic ProgressBar - consider renaming to StateProgressBar.
export default {
props: {
total: {
type: Number,
default: 1,
},
note: {
type: String,
default: null,
},
loading: {
type: Boolean,
default: false,
},
okCount: {
type: Number,
default: 0,
},
runningCount: {
type: Number,
default: 0,
},
newCount: {
type: Number,
default: 0,
},
errorCount: {
type: Number,
default: 0,
},
},
};
</script>
<style lang="css" scoped>
.progressNote {

<style scoped>
.progress-note {
position: absolute;
text-align: center;
width: 100%;
}
.progressContainer {
.progress-container {
position: relative;
}
</style>

0 comments on commit be8f9b6

Please sign in to comment.