7152627641

Committed 09 Dec 2023 05:37PM UTC coverage: 97.26% (-0.3%) from 97.577%

Build # 7152627641

Build Type

push

github

Committed by

web-flow

Commit Message

feat: enable resize of weekday event slot (#222)

* rearranged stuff in template

* fix: remove redundant wrapping element in DayEvent.vue

* test: add new mac screenshots

* add new linux snapshots

* test: add new linux screenshots

---------

Co-authored-by: Tom Österlund <tom.osterlund1@gmail.com>

Run Details

890 of 939 branches covered (0.0%)

Branch coverage included in aggregate %.

24 of 24 new or added lines in 1 file covered. (100.0%)

27 existing lines in 1 file now uncovered.

6387 of 6543 relevant lines covered (97.62%)

102.14 hits per line

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

93.45

/src/components/partials/EventFlyout.vue

<template>
  <div
    class="event-flyout"
    :class="{ 'is-visible': isVisible, 'is-not-editable': !isEditable }"
    :style="eventFlyoutInlineStyles"
  >
    <div
      v-if="!config.eventDialog || !config.eventDialog.isCustom"
      class="event-flyout__relative-wrapper"
    >
      <div class="event-flyout__menu">
        <span
          v-if="isEditable"
          class="event-flyout__menu-editable"
        >
          <font-awesome-icon
            class="event-flyout__menu-item is-edit-icon"
            :icon="icons.edit"
            @click="editEvent"
          />

          <font-awesome-icon
            class="event-flyout__menu-item is-trash-icon"
            :icon="icons.trash"
            @click="deleteEvent"
          />
        </span>

        <span class="event-flyout__menu-close">
          <font-awesome-icon
            class="event-flyout__menu-item is-times-icon"
            :icon="icons.times"
            @click="closeFlyout"
          />
        </span>
      </div>

      <div
        v-if="calendarEvent"
        class="event-flyout__info-wrapper"
      >
        <div
          v-if="calendarEvent.title"
          class="event-flyout__row is-title"
        >
          <div
            class="event-flyout__color-icon"
            :style="{ backgroundColor: eventBackgroundColor }"
          />
          {{ calendarEvent.title }}
        </div>

        <div
          v-if="calendarEvent.time"
          class="event-flyout__row is-time"
        >
          {{ getEventTime }}
        </div>

        <div
          v-if="calendarEvent.location"
          class="event-flyout__row is-location"
        >
          <font-awesome-icon :icon="icons.location" />
          {{ calendarEvent.location }}
        </div>

        <div
          v-if="calendarEvent.with"
          class="event-flyout__row is-with"
        >
          <font-awesome-icon :icon="icons.user" />
          {{ calendarEvent.with }}
        </div>

        <div
          v-if="calendarEvent.topic"
          class="event-flyout__row is-topic"
        >
          <font-awesome-icon
            :icon="icons.topic"
            class="calendar-week__event-icon"
          />
          {{ calendarEvent.topic }}
        </div>

        <div
          v-if="calendarEvent.description"
          class="event-flyout__row is-description"
        >
          <font-awesome-icon
            :icon="icons.description"
            class="calendar-week__event-icon"
          />
          <!-- eslint-disable vue/no-v-html -->
          <p v-html="calendarEvent.description" />
          <!--eslint-enable-->
        </div>
      </div>
    </div>

    <slot
      v-else
      :event-dialog-data="calendarEvent"
      :close-event-dialog="closeFlyout"
    />
  </div>
</template>

<script lang="ts">
import {defineComponent, type PropType} from 'vue';
import {EVENT_TYPE, type eventInterface} from '../../typings/interfaces/event.interface';
import EventFlyoutPosition, {EVENT_FLYOUT_WIDTH,} from '../../helpers/EventFlyoutPosition';
import {faMapMarkerAlt, faTimes} from '@fortawesome/free-solid-svg-icons';
import {
  faClock,
  faComment,
  faEdit,
  faQuestionCircle,
  faTrashAlt,
  faUser,
} from '@fortawesome/free-regular-svg-icons';
import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome';
import type {configInterface} from '../../typings/config.interface';
import Time from '../../helpers/Time';
import {EVENT_COLORS,} from '../../constants';
import Helpers from "../../helpers/Helpers";

const eventFlyoutPositionHelper = new EventFlyoutPosition();

export default defineComponent({
  name: 'EventFlyout',

  components: {
    FontAwesomeIcon,
  },

  props: {
    calendarEventProp: {
      type: Object as PropType<eventInterface | null>,
      default: () => ({}),
    },
    eventElement: {
      type: Object as PropType<HTMLElement | any>,
      default: null,
    },
    time: {
      type: Object as PropType<Time>,
      required: true,
    },
    config: {
      type: Object as PropType<configInterface>,
      required: true,
    },
  },

  emits: ['hide', 'edit-event', 'delete-event'],

  data() {
    return {
      isVisible: false,
      top: 0 as number | null,
      left: 0 as number | null,
      icons: {
        clock: faClock,
        user: faUser,
        description: faComment,
        trash: faTrashAlt,
        edit: faEdit,
        times: faTimes,
        topic: faQuestionCircle,
        location: faMapMarkerAlt,
      },
      calendarEvent: this.calendarEventProp,
      flyoutWidth: EVENT_FLYOUT_WIDTH + 'px',
      colors: EVENT_COLORS,
    };
  },

  computed: {
    getEventTime() {
      if (!this.calendarEvent || !this.calendarEvent.time) return null;

      const eventType = Helpers.getEventType(this.calendarEvent, this.time);

      if ([EVENT_TYPE.MULTI_DAY_TIMED].includes(eventType)) {
        const startLocalizedString = this.getDateFromDateString(
          this.calendarEvent.time.start
        ) + ' ' + this.time.getLocalizedTime(this.calendarEvent.time.start)
        const endLocalizedString = this.getDateFromDateString(
          this.calendarEvent.time.end
        ) + ' ' + this.time.getLocalizedTime(this.calendarEvent.time.end)

        return `${startLocalizedString} - ${endLocalizedString}`;
      }

      if ([EVENT_TYPE.SINGLE_DAY_FULL_DAY, EVENT_TYPE.MULTI_DAY_FULL_DAY].includes(eventType)) {
        const startDate = this.getDateFromDateString(this.calendarEvent.time.start);
        const endDate = this.getDateFromDateString(this.calendarEvent.time.end);

        if (startDate === endDate) return startDate;

        return `${startDate} - ${endDate}`;
      }

      const dateString = this.getDateFromDateString(this.calendarEvent.time.start);
      const timeString = this.time.getLocalizedTimeRange(
        this.calendarEvent.time.start,
        this.calendarEvent.time.end
      );

      return `${dateString} ⋅ ${timeString}`;
    },

    eventFlyoutInlineStyles() {
      if (typeof this.top === 'number' && !this.left) {
        return {
          top: this.top + 'px',
          left: '50%',
          position: 'fixed' as const,
          transform: 'translateX(-50%)',
        };
      }

      return {
        top: this.top + 'px',
        left: this.left + 'px',
        position: 'fixed' as const, // casting, since tsc otherwise thinks we're casting 'string' to 'PositionProperty'
      };
    },

    isEditable() {
      return this.calendarEventProp?.isEditable || false;
    },

    eventBackgroundColor() {
      // First, if the event has a customColorScheme, and the name of that
      if (
        this.calendarEvent?.colorScheme &&
        this.config.style?.colorSchemes &&
        this.config.style.colorSchemes[this.calendarEvent.colorScheme]
      ) {
        return this.config.style.colorSchemes[this.calendarEvent.colorScheme]
          .backgroundColor;
      }

      return this.colors[this.calendarEvent?.color || 'blue'];
    },
  },

  watch: {
    calendarEventProp: {
      deep: true,
      handler(value) {
        // Set the values with a timeout.
        // Otherwise, the click listener for closing the flyout will believe that the flyout is already open
        // When it is in fact just being opened
        setTimeout(() => {
          this.calendarEvent = value;
          this.isVisible = !!value;
          this.$nextTick(() => this.setFlyoutPosition());
        }, 10);
      },
    },
  },

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

  beforeUnmount() {
    document.removeEventListener('click', this.closeFlyoutOnClickOutside);
  },

  methods: {
    setFlyoutPosition() {
      const calendar = this.eventElement?.closest('.calendar-root');
      const flyout = document.querySelector('.event-flyout');

      if (!this.eventElement) return;

      const flyoutPosition = eventFlyoutPositionHelper.calculateFlyoutPosition(
        this.eventElement?.getBoundingClientRect(),
        {
          height: flyout?.clientHeight || 300,
          width: flyout?.clientWidth || 0,
        },
        calendar ? calendar.getBoundingClientRect() : null
      );

      this.top = typeof flyoutPosition?.top === 'number' ? flyoutPosition.top : null;
      this.left = typeof flyoutPosition?.left === 'number' ? flyoutPosition.left : null;
    },

    editEvent() {
      this.$emit('edit-event', this.calendarEvent?.id);
      this.closeFlyout();
    },

    deleteEvent() {
      this.$emit('delete-event', this.calendarEvent?.id);
      this.closeFlyout();
    },

    closeFlyout() {
      this.isVisible = false;

      setTimeout(() => {
        this.$emit('hide');
      }, 100);
    },

    getDateFromDateString(dateString: string) {
      const { year, month, date } =
        this.time.getAllVariablesFromDateTimeString(dateString);

      return new Date(year, month, date).toLocaleDateString(
        this.time.CALENDAR_LOCALE,
        {
          year: 'numeric',
          month: 'long',
          day: 'numeric',
        }
      );
    },

    listenForClickOutside() {
      document.addEventListener('click', this.closeFlyoutOnClickOutside);
    },

    closeFlyoutOnClickOutside(e: any) {
      const flyout = document.querySelector('.event-flyout');
      if (!flyout || !this.isVisible) return;

      const isClickOutside = !flyout.contains(e.target);
      const isClickOnEvent = !!e.target.closest('.is-event');
      const closeOnClickOutside = this.config.eventDialog?.closeOnClickOutside ?? true;

      if (this.isVisible && isClickOutside && !isClickOnEvent && closeOnClickOutside) {
        this.closeFlyout();
      }
    },
  },
});
</script>

<style scoped lang="scss">
@use '../../styles/mixins' as mixins;

.event-flyout {
  position: fixed;
  z-index: 50;
  background-color: #fff;
  max-height: 100%;
  width: v-bind(flyoutWidth);
  max-width: 98%;
  border: var(--qalendar-border-gray-thin);
  border-radius: 8px;
  box-shadow: 0 12px 24px rgb(0 0 0 / 9%), 0 6px 12px rgb(0 0 0 / 18%);
  overflow: hidden;
  transition: all 0.2s ease;
  transition-property: opacity, transform;
  transform: translateY(-40px);
  opacity: 0;
  pointer-events: none;

  @include mixins.dark-mode {
    background-color: var(--qalendar-dark-mode-elevated-surface);
    border-color: transparent;
  }

  &.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: initial;
  }

  &__relative-wrapper {
    position: relative;
  }

  &__menu {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .event-flyout__menu-editable,
    .event-flyout__menu-close {
      padding: var(--qalendar-spacing) var(--qalendar-spacing) 0
        var(--qalendar-spacing);
      display: flex;
      grid-gap: 20px;
    }

    .event-flyout__menu-close {
      .is-not-editable & {
        position: absolute;
        top: 0;
        right: 0;
      }
    }
  }

  &__menu-item {
    font-size: var(--qalendar-font-l);
    color: gray;

    @include mixins.dark-mode {
      color: var(--qalendar-dark-mode-text-hint);
    }

    &:hover {
      color: var(--qalendar-theme-color);
      cursor: pointer;
    }
  }

  .is-trash-icon {
    &:hover {
      color: red;
    }
  }

  &__info-wrapper {
    padding: var(--qalendar-spacing);
  }

  &__row {
    display: flex;
    grid-gap: var(--qalendar-spacing);
    margin-bottom: 0.25em;
    font-weight: 400;

    p {
      margin: 0;
      padding: 0;
    }

    svg {
      margin-top: 0.1rem;
      color: #5f6368;
      width: 14px;

      @include mixins.dark-mode {
        color: var(--qalendar-dark-mode-text-hint);
      }
    }
  }

  &__color-icon {
    --icon-height: 16px;

    border-radius: 50%;
    height: var(--icon-height);
    width: var(--icon-height);
  }

  .is-title {
    font-size: var(--qalendar-font-l);
    align-items: center;

    .is-not-editable & {
      max-width: 90%;
    }
  }

  .is-time {
    font-size: var(--qalendar-font-s);
    margin-bottom: 0.75em;
  }
}
</style>

1	<template>	1✔
2	<div	1✔
3	class="event-flyout"	1✔
4	:class="{ 'is-visible': isVisible, 'is-not-editable': !isEditable }"	1✔
5	:style="eventFlyoutInlineStyles"	1✔
6	>	1✔
7	<div	1✔
8	v-if="!config.eventDialog \|\| !config.eventDialog.isCustom"	1✔
9	class="event-flyout__relative-wrapper"	211✔
10	>	211✔
11	<div class="event-flyout__menu">	211✔
12	<span	211✔
13	v-if="isEditable"	211✔
14	class="event-flyout__menu-editable"	211✔
15	>	211✔
16	<font-awesome-icon	211✔
17	class="event-flyout__menu-item is-edit-icon"	211✔
18	:icon="icons.edit"	211✔
19	@click="editEvent"	211✔
20	/>	211✔
21		211✔
22	<font-awesome-icon	211✔
23	class="event-flyout__menu-item is-trash-icon"	211✔
24	:icon="icons.trash"	211✔
25	@click="deleteEvent"	211✔
26	/>	211✔
27	</span>	211✔
28		211✔
29	<span class="event-flyout__menu-close">	211✔
30	<font-awesome-icon	211✔
31	class="event-flyout__menu-item is-times-icon"	211✔
32	:icon="icons.times"	211✔
33	@click="closeFlyout"	211✔
34	/>	211✔
35	</span>	211✔
36	</div>	211✔
37		211✔
38	<div	211✔
39	v-if="calendarEvent"	211✔
40	class="event-flyout__info-wrapper"	211✔
41	>	211✔
42	<div	211✔
43	v-if="calendarEvent.title"	211✔
44	class="event-flyout__row is-title"	211✔
45	>	211✔
46	<div	211✔
47	class="event-flyout__color-icon"	211✔
48	:style="{ backgroundColor: eventBackgroundColor }"	211✔
49	/>	211✔
50	{{ calendarEvent.title }}	211✔
51	</div>	211✔
52		211✔
53	<div	211✔
54	v-if="calendarEvent.time"	211✔
55	class="event-flyout__row is-time"	211✔
56	>	211✔
57	{{ getEventTime }}	211!
58	</div>	211✔
59		211✔
60	<div	211✔
61	v-if="calendarEvent.location"	211✔
62	class="event-flyout__row is-location"	1✔
63	>	1✔
64	<font-awesome-icon :icon="icons.location" />	1✔
65	{{ calendarEvent.location }}	1✔
66	</div>	211✔
67		211✔
68	<div	211✔
69	v-if="calendarEvent.with"	211✔
70	class="event-flyout__row is-with"	1✔
71	>	1✔
72	<font-awesome-icon :icon="icons.user" />	1✔
73	{{ calendarEvent.with }}	1✔
74	</div>	211✔
75		211✔
76	<div	211✔
77	v-if="calendarEvent.topic"	211✔
78	class="event-flyout__row is-topic"	1✔
79	>	1✔
80	<font-awesome-icon	1✔
81	:icon="icons.topic"	1✔
82	class="calendar-week__event-icon"	1✔
83	/>	1✔
84	{{ calendarEvent.topic }}	1✔
85	</div>	211✔
86		211✔
87	<div	211✔
88	v-if="calendarEvent.description"	211✔
89	class="event-flyout__row is-description"	1✔
90	>	1✔
91	<font-awesome-icon	1✔
92	:icon="icons.description"	1✔
93	class="calendar-week__event-icon"	1✔
94	/>	1✔
95	<!-- eslint-disable vue/no-v-html -->	1✔
96	<p v-html="calendarEvent.description" />	1✔
97	<!--eslint-enable-->	1✔
98	</div>	211✔
99	</div>	211✔
100	</div>	211✔
101		211✔
102	<slot	211✔
103	v-else	1✔
104	:event-dialog-data="calendarEvent"	1✔
105	:close-event-dialog="closeFlyout"	1✔
106	/>	1✔
107	</div>	1✔
108	</template>	1✔
109		1✔
110	<script lang="ts">	1✔
111	import {defineComponent, type PropType} from 'vue';	1✔
112	import {EVENT_TYPE, type eventInterface} from '../../typings/interfaces/event.interface';	1✔
113	import EventFlyoutPosition, {EVENT_FLYOUT_WIDTH,} from '../../helpers/EventFlyoutPosition';	1✔
114	import {faMapMarkerAlt, faTimes} from '@fortawesome/free-solid-svg-icons';	1✔
115	import {	1✔
116	faClock,	1✔
117	faComment,	1✔
118	faEdit,	1✔
119	faQuestionCircle,	1✔
120	faTrashAlt,	1✔
121	faUser,	1✔
122	} from '@fortawesome/free-regular-svg-icons';	1✔
123	import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome';	1✔
124	import type {configInterface} from '../../typings/config.interface';	1✔
125	import Time from '../../helpers/Time';	1✔
126	import {EVENT_COLORS,} from '../../constants';	1✔
127	import Helpers from "../../helpers/Helpers";	1✔
128		1✔
129	const eventFlyoutPositionHelper = new EventFlyoutPosition();	1✔
130		1✔
131	export default defineComponent({	1✔
132	name: 'EventFlyout',	1✔
133		1✔
134	components: {	1✔
135	FontAwesomeIcon,	1✔
136	},	1✔
137		1✔
138	props: {	1✔
139	calendarEventProp: {	1✔
140	type: Object as PropType<eventInterface \| null>,	1✔
141	default: () => ({}),	1✔
142	},	1✔
143	eventElement: {	1✔
144	type: Object as PropType<HTMLElement \| any>,	1✔
145	default: null,	1✔
146	},	1✔
147	time: {	1✔
148	type: Object as PropType<Time>,	1✔
149	required: true,	1✔
150	},	1✔
151	config: {	1✔
152	type: Object as PropType<configInterface>,	1✔
153	required: true,	1✔
154	},	1✔
155	},	1✔
156		1✔
157	emits: ['hide', 'edit-event', 'delete-event'],	1✔
158		1✔
159	data() {	1✔
160	return {	110✔
161	isVisible: false,	110✔
162	top: 0 as number \| null,	110✔
163	left: 0 as number \| null,	110✔
164	icons: {	110✔
165	clock: faClock,	110✔
166	user: faUser,	110✔
167	description: faComment,	110✔
168	trash: faTrashAlt,	110✔
169	edit: faEdit,	110✔
170	times: faTimes,	110✔
171	topic: faQuestionCircle,	110✔
172	location: faMapMarkerAlt,	110✔
173	},	110✔
174	calendarEvent: this.calendarEventProp,	110✔
175	flyoutWidth: EVENT_FLYOUT_WIDTH + 'px',	110✔
176	colors: EVENT_COLORS,	110✔
177	};	110✔
178	},	110✔
179		1✔
180	computed: {	1✔
181	getEventTime() {	1✔
182	if (!this.calendarEvent \|\| !this.calendarEvent.time) return null;	19!
183		19✔
184	const eventType = Helpers.getEventType(this.calendarEvent, this.time);	19✔
185		19✔
186	if ([EVENT_TYPE.MULTI_DAY_TIMED].includes(eventType)) {	19✔
187	const startLocalizedString = this.getDateFromDateString(	1✔
188	this.calendarEvent.time.start	1✔
189	) + ' ' + this.time.getLocalizedTime(this.calendarEvent.time.start)	1✔
190	const endLocalizedString = this.getDateFromDateString(	1✔
191	this.calendarEvent.time.end	1✔
192	) + ' ' + this.time.getLocalizedTime(this.calendarEvent.time.end)	1✔
193		1✔
194	return `${startLocalizedString} - ${endLocalizedString}`;	1✔
195	}	1✔
196		18✔
197	if ([EVENT_TYPE.SINGLE_DAY_FULL_DAY, EVENT_TYPE.MULTI_DAY_FULL_DAY].includes(eventType)) {	19✔
198	const startDate = this.getDateFromDateString(this.calendarEvent.time.start);	2✔
199	const endDate = this.getDateFromDateString(this.calendarEvent.time.end);	2✔
200		2✔
201	if (startDate === endDate) return startDate;	2✔
202		1✔
203	return `${startDate} - ${endDate}`;	1✔
204	}	1✔
205		16✔
206	const dateString = this.getDateFromDateString(this.calendarEvent.time.start);	16✔
207	const timeString = this.time.getLocalizedTimeRange(	16✔
208	this.calendarEvent.time.start,	16✔
209	this.calendarEvent.time.end	16✔
210	);	16✔
211		16✔
212	return `${dateString} ⋅ ${timeString}`;	16✔
213	},	19✔
214		1✔
215	eventFlyoutInlineStyles() {	1✔
216	if (typeof this.top === 'number' && !this.left) {	110✔
217	return {	110✔
218	top: this.top + 'px',	110✔
219	left: '50%',	110✔
220	position: 'fixed' as const,	110✔
221	transform: 'translateX(-50%)',	110✔
222	};	110✔
223	}	110!
UNCOV 224		×
UNCOV 225	return {	×
UNCOV 226	top: this.top + 'px',	×
UNCOV 227	left: this.left + 'px',	×
UNCOV 228	position: 'fixed' as const, // casting, since tsc otherwise thinks we're casting 'string' to 'PositionProperty'	×
UNCOV 229	};	×
230	},	110✔
231		1✔
232	isEditable() {	1✔
233	return this.calendarEventProp?.isEditable \|\| false;	114✔
234	},	114✔
235		1✔
236	eventBackgroundColor() {	1✔
237	// First, if the event has a customColorScheme, and the name of that	14✔
238	if (	14✔
239	this.calendarEvent?.colorScheme &&	14✔
240	this.config.style?.colorSchemes &&	1✔
241	this.config.style.colorSchemes[this.calendarEvent.colorScheme]	1✔
242	) {	14✔
243	return this.config.style.colorSchemes[this.calendarEvent.colorScheme]	1✔
244	.backgroundColor;	1✔
245	}	1✔
246		13✔
247	return this.colors[this.calendarEvent?.color \|\| 'blue'];	14✔
248	},	14✔
249	},	1✔
250		1✔
251	watch: {	1✔
252	calendarEventProp: {	1✔
253	deep: true,	1✔
254	handler(value) {	1✔
255	// Set the values with a timeout.	8✔
256	// Otherwise, the click listener for closing the flyout will believe that the flyout is already open	8✔
257	// When it is in fact just being opened	8✔
258	setTimeout(() => {	8✔
UNCOV 259	this.calendarEvent = value;	×
UNCOV 260	this.isVisible = !!value;	×
UNCOV 261	this.$nextTick(() => this.setFlyoutPosition());	×
262	}, 10);	8✔
263	},	8✔
264	},	1✔
265	},	1✔
266		1✔
267	mounted() {	1✔
268	this.listenForClickOutside();	110✔
269	},	110✔
270		1✔
271	beforeUnmount() {	1✔
272	document.removeEventListener('click', this.closeFlyoutOnClickOutside);	36✔
273	},	36✔
274		1✔
275	methods: {	1✔
276	setFlyoutPosition() {	1✔
UNCOV 277	const calendar = this.eventElement?.closest('.calendar-root');	×
UNCOV 278	const flyout = document.querySelector('.event-flyout');	×
UNCOV 279		×
UNCOV 280	if (!this.eventElement) return;	×
UNCOV 281		×
UNCOV 282	const flyoutPosition = eventFlyoutPositionHelper.calculateFlyoutPosition(	×
UNCOV 283	this.eventElement?.getBoundingClientRect(),	×
UNCOV 284	{	×
UNCOV 285	height: flyout?.clientHeight \|\| 300,	×
UNCOV 286	width: flyout?.clientWidth \|\| 0,	×
UNCOV 287	},	×
UNCOV 288	calendar ? calendar.getBoundingClientRect() : null	×
UNCOV 289	);	×
UNCOV 290		×
UNCOV 291	this.top = typeof flyoutPosition?.top === 'number' ? flyoutPosition.top : null;	×
UNCOV 292	this.left = typeof flyoutPosition?.left === 'number' ? flyoutPosition.left : null;	×
UNCOV 293	},	×
294		1✔
295	editEvent() {	1✔
296	this.$emit('edit-event', this.calendarEvent?.id);	1!
297	this.closeFlyout();	1✔
298	},	1✔
299		1✔
300	deleteEvent() {	1✔
301	this.$emit('delete-event', this.calendarEvent?.id);	1!
302	this.closeFlyout();	1✔
303	},	1✔
304		1✔
305	closeFlyout() {	1✔
306	this.isVisible = false;	3✔
307		3✔
308	setTimeout(() => {	3✔
UNCOV 309	this.$emit('hide');	×
310	}, 100);	3✔
311	},	3✔
312		1✔
313	getDateFromDateString(dateString: string) {	1✔
314	const { year, month, date } =	22✔
315	this.time.getAllVariablesFromDateTimeString(dateString);	22✔
316		22✔
317	return new Date(year, month, date).toLocaleDateString(	22✔
318	this.time.CALENDAR_LOCALE,	22✔
319	{	22✔
320	year: 'numeric',	22✔
321	month: 'long',	22✔
322	day: 'numeric',	22✔
323	}	22✔
324	);	22✔
325	},	22✔
326		1✔
327	listenForClickOutside() {	1✔
328	document.addEventListener('click', this.closeFlyoutOnClickOutside);	110✔
329	},	110✔
330		1✔
331	closeFlyoutOnClickOutside(e: any) {	1✔
332	const flyout = document.querySelector('.event-flyout');	2✔
333	if (!flyout \|\| !this.isVisible) return;	2!
334		2✔
335	const isClickOutside = !flyout.contains(e.target);	2✔
336	const isClickOnEvent = !!e.target.closest('.is-event');	2✔
337	const closeOnClickOutside = this.config.eventDialog?.closeOnClickOutside ?? true;	2!
338		2✔
339	if (this.isVisible && isClickOutside && !isClickOnEvent && closeOnClickOutside) {	2✔
340	this.closeFlyout();	1✔
341	}	1✔
342	},	2✔
343	},	1✔
344	});	1✔
345	</script>	1✔
346		1✔
347	<style scoped lang="scss">	1✔
348	@use '../../styles/mixins' as mixins;	1✔
349		1✔
350	.event-flyout {	1✔
351	position: fixed;	1✔
352	z-index: 50;	1✔
353	background-color: #fff;	1✔
354	max-height: 100%;	1✔
355	width: v-bind(flyoutWidth);	1✔
356	max-width: 98%;	1✔
357	border: var(--qalendar-border-gray-thin);	1✔
358	border-radius: 8px;	1✔
359	box-shadow: 0 12px 24px rgb(0 0 0 / 9%), 0 6px 12px rgb(0 0 0 / 18%);	1✔
360	overflow: hidden;	1✔
361	transition: all 0.2s ease;	1✔
362	transition-property: opacity, transform;	1✔
363	transform: translateY(-40px);	1✔
364	opacity: 0;	1✔
365	pointer-events: none;	1✔
366		1✔
367	@include mixins.dark-mode {	1✔
368	background-color: var(--qalendar-dark-mode-elevated-surface);	1✔
369	border-color: transparent;	1✔
370	}	1✔
371		1✔
372	&.is-visible {	1✔
373	opacity: 1;	1✔
374	transform: translateY(0);	1✔
375	pointer-events: initial;	1✔
376	}	1✔
377		1✔
378	&__relative-wrapper {	1✔
379	position: relative;	1✔
380	}	1✔
381		1✔
382	&__menu {	1✔
383	display: flex;	1✔
384	justify-content: space-between;	1✔
385	align-items: center;	1✔
386		1✔
387	.event-flyout__menu-editable,	1✔
388	.event-flyout__menu-close {	1✔
389	padding: var(--qalendar-spacing) var(--qalendar-spacing) 0	1✔
390	var(--qalendar-spacing);	1✔
391	display: flex;	1✔
392	grid-gap: 20px;	1✔
393	}	1✔
394		1✔
395	.event-flyout__menu-close {	1✔
396	.is-not-editable & {	1✔
397	position: absolute;	1✔
398	top: 0;	1✔
399	right: 0;	1✔
400	}	1✔
401	}	1✔
402	}	1✔
403		1✔
404	&__menu-item {	1✔
405	font-size: var(--qalendar-font-l);	1✔
406	color: gray;	1✔
407		1✔
408	@include mixins.dark-mode {	1✔
409	color: var(--qalendar-dark-mode-text-hint);	1✔
410	}	1✔
411		1✔
412	&:hover {	1✔
413	color: var(--qalendar-theme-color);	1✔
414	cursor: pointer;	1✔
415	}	1✔
416	}	1✔
417		1✔
418	.is-trash-icon {	1✔
419	&:hover {	1✔
420	color: red;	1✔
421	}	1✔
422	}	1✔
423		1✔
424	&__info-wrapper {	1✔
425	padding: var(--qalendar-spacing);	1✔
426	}	1✔
427		1✔
428	&__row {	1✔
429	display: flex;	1✔
430	grid-gap: var(--qalendar-spacing);	1✔
431	margin-bottom: 0.25em;	1✔
432	font-weight: 400;	1✔
433		1✔
434	p {	1✔
435	margin: 0;	1✔
436	padding: 0;	1✔
437	}	1✔
438		1✔
439	svg {	1✔
440	margin-top: 0.1rem;	1✔
441	color: #5f6368;	1✔
442	width: 14px;	1✔
443		1✔
444	@include mixins.dark-mode {	1✔
445	color: var(--qalendar-dark-mode-text-hint);	1✔
446	}	1✔
447	}	1✔
448	}	1✔
449		1✔
450	&__color-icon {	1✔
451	--icon-height: 16px;	1✔
452		1✔
453	border-radius: 50%;	1✔
454	height: var(--icon-height);	1✔
455	width: var(--icon-height);	1✔
456	}	1✔
457		1✔
458	.is-title {	1✔
459	font-size: var(--qalendar-font-l);	1✔
460	align-items: center;	1✔
461		1✔
462	.is-not-editable & {	1✔
463	max-width: 90%;	1✔
464	}	1✔
465	}	1✔
466		1✔
467	.is-time {	1✔
468	font-size: var(--qalendar-font-s);	1✔
469	margin-bottom: 0.75em;	1✔
470	}	1✔
471	}	1✔
472	</style>	1✔

tomosterlund / qalendar / 7152627641

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