13467125422

Committed 21 Feb 2025 11:41PM UTC coverage: 97.288%. Remained the same

Build # 13467125422

Build Type

Pull #269

github

Committed by

web-flow

Commit Message

Merge 8ec4f6867 into 1e81b86d4

Pull Request Pull Request #269: chore(deps): update dependency @types/node to v22

Run Details

914 of 979 branches covered (93.36%)

Branch coverage included in aggregate %.

6439 of 6579 relevant lines covered (97.87%)

87.81 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

89.1

/src/components/week/FullDayEvent.vue

<template>
  <div
    v-if="scheduleEvent"
    :id="`${eventElementIdPrefix}${scheduleEvent.id}`"
    class="week-timeline__event is-event"
    :style="{
      width: eventWidth,
      color: eventColor,
      backgroundColor: eventBackgroundColor,
      zIndex: 1,
    }"
    @click="handleClickOnEvent"
  >
    {{ scheduleEvent.title }}
  </div>

  <div
    v-else
    class="week-timeline__event"
  />
</template>

<script lang="ts">
import { defineComponent, type PropType } from 'vue';
import { type eventInterface } from '../../typings/interfaces/event.interface';
import { type configInterface } from '../../typings/config.interface';
import { EVENT_COLORS } from '../../constants';
import { type modeType } from '../../typings/types';

interface extendedEventInterface extends eventInterface {
  nDays: number;
}

export default defineComponent({
  name: 'FullDayEvent',

  props: {
    scheduleEvent: {
      type: Object as PropType<extendedEventInterface>,
      default: null,
    },
    config: {
      type: Object as PropType<configInterface>,
      required: true,
    },
    mode: {
      type: String as PropType<modeType>,
      required: true,
    },
  },

  emits: ['event-was-clicked'],

  data() {
    return {
      colors: EVENT_COLORS as { [key: string]: string },
      eventColor: '#fff',
      eventBackgroundColor: '',
      eventElementIdPrefix: 'week-timeline__event-id-',
    };
  },

  computed: {
    eventWidth() {
      if (this.mode !== 'day')
        return `calc(${this.scheduleEvent.nDays * 100}% - 6px)`;

      return 'calc(100% - 6px)';
    },
  },

  mounted() {
    this.setColors();
  },

  methods: {
    setColors() {
      // First, if the event has a customColorScheme, and the name of that
      if (
        this.scheduleEvent?.colorScheme &&
        this.config.style?.colorSchemes &&
        this.config.style.colorSchemes[this.scheduleEvent.colorScheme]
      ) {
        this.eventColor =
          this.config.style.colorSchemes[this.scheduleEvent.colorScheme].color;
        return (this.eventBackgroundColor =
          this.config.style.colorSchemes[
            this.scheduleEvent.colorScheme
          ].backgroundColor);
      }

      if (this.scheduleEvent?.color) {
        this.eventColor = '#fff';
        return (this.eventBackgroundColor =
          this.colors[this.scheduleEvent.color]);
      }

      return (this.eventBackgroundColor = this.colors.blue);
    },

    handleClickOnEvent() {
      const eventElement = document.getElementById(
        this.eventElementIdPrefix + this.scheduleEvent.id
      );

      this.$emit('event-was-clicked', {
        clickedEvent: this.scheduleEvent,
        eventElement,
      });
    },
  },
});
</script>

<style lang="scss" scoped>
.week-timeline__event {
  position: relative;

  // If the variable changes, so does the hard coded value of the 100% - (padding * 2), in computed property above
  --event-padding: 3px;

  display: flex;
  align-items: center;
  height: 0.9rem;
  width: calc(100% - #{var(--event-padding)});
  font-size: var(--qalendar-font-2xs);
  border-radius: 4px;
  padding: var(--event-padding);
  margin-bottom: 0.25em;
  text-align: left;
  cursor: pointer;
  user-select: none;
  overflow: hidden;

  &:active {
    cursor: not-allowed;
  }
}
</style>

1	<template>	1✔
2	<div	1✔
3	v-if="scheduleEvent"	1✔
4	:id="`${eventElementIdPrefix}${scheduleEvent.id}`"	6✔
5	class="week-timeline__event is-event"	6✔
6	:style="{	6✔
7	width: eventWidth,	6✔
8	color: eventColor,	6✔
9	backgroundColor: eventBackgroundColor,	6✔
10	zIndex: 1,	6✔
11	}"	6✔
12	@click="handleClickOnEvent"	6✔
13	>	1✔
14	{{ scheduleEvent.title }}	1✔
15	</div>	1✔
16		1✔
17	<div	1✔
18	v-else	1✔
19	class="week-timeline__event"	1✔
20	/>	1✔
21	</template>	1✔
22		1✔
23	<script lang="ts">	1✔
24	import { defineComponent, type PropType } from 'vue';	1✔
25	import { type eventInterface } from '../../typings/interfaces/event.interface';	1✔
26	import { type configInterface } from '../../typings/config.interface';	1✔
27	import { EVENT_COLORS } from '../../constants';	1✔
28	import { type modeType } from '../../typings/types';	1✔
29		1✔
30	interface extendedEventInterface extends eventInterface {	1✔
31	nDays: number;	1✔
32	}	1✔
33		1✔
34	export default defineComponent({	1✔
35	name: 'FullDayEvent',	1✔
36		1✔
37	props: {	1✔
38	scheduleEvent: {	1✔
39	type: Object as PropType<extendedEventInterface>,	1✔
40	default: null,	1✔
41	},	1✔
42	config: {	1✔
43	type: Object as PropType<configInterface>,	1✔
44	required: true,	1✔
45	},	1✔
46	mode: {	1✔
47	type: String as PropType<modeType>,	1✔
48	required: true,	1✔
49	},	1✔
50	},	1✔
51		1✔
52	emits: ['event-was-clicked'],	1✔
53		1✔
54	data() {	1✔
55	return {	4✔
56	colors: EVENT_COLORS as { [key: string]: string },	4✔
57	eventColor: '#fff',	4✔
58	eventBackgroundColor: '',	4✔
59	eventElementIdPrefix: 'week-timeline__event-id-',	4✔
60	};	4✔
61	},	4✔
62		1✔
63	computed: {	1✔
64	eventWidth() {	1✔
65	if (this.mode !== 'day')	3✔
66	return `calc(${this.scheduleEvent.nDays * 100}% - 6px)`;	3✔
67		1✔
68	return 'calc(100% - 6px)';	1✔
69	},	3✔
70	},	1✔
71		1✔
72	mounted() {	1✔
73	this.setColors();	4✔
74	},	4✔
75		1✔
76	methods: {	1✔
77	setColors() {	1✔
78	// First, if the event has a customColorScheme, and the name of that	4✔
79	if (	4✔
80	this.scheduleEvent?.colorScheme &&	4!
81	this.config.style?.colorSchemes &&	×
82	this.config.style.colorSchemes[this.scheduleEvent.colorScheme]	×
83	) {	4!
84	this.eventColor =	×
85	this.config.style.colorSchemes[this.scheduleEvent.colorScheme].color;	×
86	return (this.eventBackgroundColor =	×
87	this.config.style.colorSchemes[	×
88	this.scheduleEvent.colorScheme	×
89	].backgroundColor);	×
90	}	×
91		4✔
92	if (this.scheduleEvent?.color) {	4!
93	this.eventColor = '#fff';	×
94	return (this.eventBackgroundColor =	×
95	this.colors[this.scheduleEvent.color]);	×
96	}	×
97		4✔
98	return (this.eventBackgroundColor = this.colors.blue);	4✔
99	},	4✔
100		1✔
101	handleClickOnEvent() {	1✔
102	const eventElement = document.getElementById(	1✔
103	this.eventElementIdPrefix + this.scheduleEvent.id	1✔
104	);	1✔
105		1✔
106	this.$emit('event-was-clicked', {	1✔
107	clickedEvent: this.scheduleEvent,	1✔
108	eventElement,	1✔
109	});	1✔
110	},	1✔
111	},	1✔
112	});	1✔
113	</script>	1✔
114		1✔
115	<style lang="scss" scoped>	1✔
116	.week-timeline__event {	1✔
117	position: relative;	1✔
118		1✔
119	// If the variable changes, so does the hard coded value of the 100% - (padding * 2), in computed property above	1✔
120	--event-padding: 3px;	1✔
121		1✔
122	display: flex;	1✔
123	align-items: center;	1✔
124	height: 0.9rem;	1✔
125	width: calc(100% - #{var(--event-padding)});	1✔
126	font-size: var(--qalendar-font-2xs);	1✔
127	border-radius: 4px;	1✔
128	padding: var(--event-padding);	1✔
129	margin-bottom: 0.25em;	1✔
130	text-align: left;	1✔
131	cursor: pointer;	1✔
132	user-select: none;	1✔
133	overflow: hidden;	1✔
134		1✔
135	&:active {	1✔
136	cursor: not-allowed;	1✔
137	}	1✔
138	}	1✔
139	</style>	1✔

tomosterlund / qalendar / 13467125422

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous