diff --git a/aleksis/apps/alsijil/frontend/components/coursebook/personal_notes/TardinessChip.vue b/aleksis/apps/alsijil/frontend/components/coursebook/personal_notes/TardinessChip.vue new file mode 100644 index 0000000000000000000000000000000000000000..b78825aa00fd30e620e772a4b8391d5c6a0c4b7e --- /dev/null +++ b/aleksis/apps/alsijil/frontend/components/coursebook/personal_notes/TardinessChip.vue @@ -0,0 +1,40 @@ +<script> + +export default { + name: "TardinessChip", + props: { + tardiness: { + type: Number, + required: false, + default: 0, + }, + loading: { + type: Boolean, + required: false, + default: false, + }, + }, + extends: "v-chip", +}; +</script> + +<template> + <v-chip + dense + outlined + v-bind="$attrs" + v-on="$listeners" + > + <v-avatar left> + <v-icon small>mdi-clock-alert-outline</v-icon> + </v-avatar> + <slot name="prepend" /> + <slot> + {{ $tc("alsijil.personal_notes.minutes_late", tardiness) }} + </slot> + <slot name="append" /> + <v-avatar right v-if="loading"> + <v-progress-circular indeterminate :size="16" :width="2" /> + </v-avatar> + </v-chip> +</template>