Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 | 7x 5x 5x 5x 35x 5x 30x 35x | <script>
import { PRESET_TYPES } from 'ee/oncall_schedules/constants';
import CommonMixin from 'ee/oncall_schedules/mixins/common_mixin';
export default {
PRESET_TYPES,
mixins: [CommonMixin],
props: {
timeframeItem: {
type: Date,
required: true,
},
},
computed: {
headerSubItems() {
const timeframeItem = new Date(this.timeframeItem.getTime());
const headerSubItems = new Array(7)
.fill()
.map(
(val, i) =>
new Date(
timeframeItem.getFullYear(),
timeframeItem.getMonth(),
timeframeItem.getDate() + i,
),
);
return headerSubItems;
},
},
methods: {
getSubItemValueClass(subItem) {
// Show dark color text only for the current date
if (subItem.getTime() === this.$options.currentDate.getTime()) {
return 'gl-text-gray-900! gl-font-weight-bold';
}
return '';
},
getSubItemValue(subItem) {
return subItem.getDate();
},
},
};
</script>
<template>
<div class="item-sublabel week-item-sublabel gl-pb-3 gl-relative gl-display-flex">
<span
v-for="(subItem, index) in headerSubItems"
:key="index"
ref="weeklyDayCell"
:class="getSubItemValueClass(subItem)"
class="sublabel-value gl-text-gray-700 gl-font-weight-normal gl-text-center gl-flex-grow-1 gl-flex-basis-0"
data-testid="sublabel-value"
>{{ getSubItemValue(subItem) }}</span
>
<span
v-if="hasToday"
:style="getIndicatorStyles($options.PRESET_TYPES.WEEKS, timeframeItem)"
class="current-day-indicator-header preset-weeks gl-absolute gl-bottom-0 gl-rounded-full gl-bg-red-500"
></span>
</div>
</template>
|