54 lines
1.6 KiB
Vue
54 lines
1.6 KiB
Vue
<script
|
|
setup
|
|
lang="ts"
|
|
>
|
|
import { useShiftStore } from 'src/stores/shift-store';
|
|
import { computed, ref } from 'vue';
|
|
|
|
const shift_store = useShiftStore();
|
|
const is_counting_error_display_time = ref(false);
|
|
|
|
const is_showing_errors = computed(() => {
|
|
if (shift_store.shift_errors.length > 0 && !is_counting_error_display_time.value) {
|
|
onShowingErrorMessage();
|
|
}
|
|
|
|
return shift_store.shift_errors.length > 0;
|
|
});
|
|
|
|
const onShowingErrorMessage = () => {
|
|
is_counting_error_display_time.value = true;
|
|
|
|
setTimeout(() => {
|
|
is_counting_error_display_time.value = false
|
|
shift_store.shift_errors = [];
|
|
}, 5000);
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<q-slide-transition>
|
|
<div
|
|
clickable
|
|
v-if="is_showing_errors"
|
|
class="full-width q-px-md q-mb-sm"
|
|
@click="shift_store.shift_errors = []"
|
|
>
|
|
<q-list>
|
|
<q-item
|
|
clickable
|
|
dense
|
|
v-for="error, index in shift_store.shift_errors"
|
|
:key="index"
|
|
class="row items-center full-width bg-dark shadow-2 rounded-5 q-my-xs"
|
|
style="border: 2px solid var(--q-negative)"
|
|
>
|
|
<q-item-label class="text-weight-medium text-caption q-ml-md">
|
|
{{ $t('timesheet.errors.' + error) }}
|
|
</q-item-label>
|
|
</q-item>
|
|
</q-list>
|
|
|
|
</div>
|
|
</q-slide-transition>
|
|
</template> |