e37ec79827
- Timesheet Approval's download menu has had its UI overhauled and the script has been streamlined to better match backend structure and logic - Details window in timesheet approval has a few bug and oversight fixes. - Refactored UI store to work with camelCase instead of snake_case
52 lines
1.8 KiB
Vue
52 lines
1.8 KiB
Vue
<script
|
|
setup
|
|
lang="ts"
|
|
>
|
|
import { computed } from 'vue';
|
|
import { date, useQuasar } from 'quasar';
|
|
|
|
const q = useQuasar();
|
|
const { extractDate } = date;
|
|
|
|
const { displayDate, dense = false, approved = false} = defineProps<{
|
|
displayDate: string;
|
|
dense?: boolean;
|
|
approved?: boolean;
|
|
}>();
|
|
|
|
const date_font_size = computed(() => dense ? '1.5em' : '2.5em');
|
|
const weekday_font_size = computed(() => dense ? '0.55em;' : '0.7em;');
|
|
const date_box_size = computed(() => dense || q.platform.is.mobile ? 'width: 40px; height: 75px;' : 'width: 75px; height: 75px;');
|
|
|
|
const display_date = extractDate(displayDate, 'YYYY-MM-DD');
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
class="column flex-center rounded-10 text-center self-center bg-transparent"
|
|
:style="date_box_size"
|
|
>
|
|
<span
|
|
v-if="!dense"
|
|
class="col-auto text-uppercase text-weight-bold"
|
|
:class="approved ? 'text-white' : ''"
|
|
:style="'font-size: ' + weekday_font_size"
|
|
>
|
|
{{ $d(display_date, { weekday: $q.platform.is.mobile ? 'short' : 'long'}) }}
|
|
</span>
|
|
<span
|
|
class="col-auto text-weight-bolder"
|
|
:class="approved ? 'text-white' : ''"
|
|
:style="'font-size: ' + date_font_size + '; line-height: 90% !important;'"
|
|
>
|
|
{{ display_date.getDate() }}
|
|
</span>
|
|
<span
|
|
class="col-auto text-uppercase text-weight-bold"
|
|
:class="approved ? 'text-white' : ''"
|
|
:style="'font-size: ' + weekday_font_size"
|
|
>
|
|
{{ $d(display_date, { month: $q.platform.is.mobile ? 'short' : 'long' }) }}
|
|
</span>
|
|
</div>
|
|
</template> |