@opendesign-plus/components 0.0.1-rc.3 → 0.0.1-rc.30

package/src/components/meeting/OMeetingMyCalendar.vue

@@ -0,0 +1,1536 @@
+<script setup lang="ts">
+import {
+  DialogActionT, OButton,
+  OCollapse,
+  OCollapseItem,
+  ODialog,
+  ODivider,
+  OIcon,
+  OIconArrowLeft,
+  OIconArrowRight,
+  OIconChevronLeft,
+  OIconChevronRight,
+  OLink,
+  ORadio,
+  ORadioGroup,
+  OScroller,
+  OTag,
+  useMessage,
+} from '@opensig/opendesign';
+import { ElCalendar } from 'element-plus';
+import { computed, nextTick, onMounted, ref, onUnmounted, watch } from 'vue';
+import OMeetingDetail from './components/OMeetingDetail.vue';
+import { CalendarDataType, MeetingGroupType, MeetingItemT, PageParamsT } from './types.ts';
+import dayjs from 'dayjs';
+import { INTERVAL_DAY, INTERVAL_MONTH, INTERVAL_WEEK } from './config.ts';
+import { formatDate, getDateNumber } from './utils.ts';
+import { useMeetingConfig } from './composables/useMeetingConfig';
+import { useDebounceFn } from '@vueuse/core';
+import { useScreen } from '@opendesign-plus/composables';
+import { Locales } from '@/i18n';
+import IconCopy from '~icons/meeting/icon-copy.svg';
+
+const message = useMessage(null);
+const tableLoading = ref(false); // 列表数据加载状态
+const currentPage = ref(1); // 分页-当前页
+const pageSize = ref(50); // 分页-每页数量
+const total = ref<number | null>(null); // 分页-总数
+const list = ref<MeetingItemT[]>([]); // 列表数据
+const originList = ref<MeetingItemT[]>([]); // 原始数据
+const canLoadMore = computed(() => total.value === null || originList.value.length < total.value);
+const reloadAll = ref(false); // 是否需要清空数据
+const { t, locale, getPointStr, getConfig, getWeekFromDate } = useMeetingConfig();
+const isEn = computed(() => locale.value === Locales.EN);
+
+const props = withDefaults(defineProps<{
+  cancelSubMeetingRequest: any;
+  deleteMeetingRequest: any;
+  getMeetingListRequest: any;
+  groupType: MeetingGroupType
+}>(), {
+  groupType: MeetingGroupType.SIG,
+});
+
+const dialogLoading = ref(false); // 弹窗按钮状态
+const { isPhone } = useScreen();
+const expanded = ref<(string | number)[]>([]); // 展开的数据， sub_id 或 id
+const emits = defineEmits(['edit']);
+// -------------------- 自动加载下一页 --------------------
+const nextLoading = ref(false);
+const bottomReached = ref(false);
+
+const getList = async () => {
+  if (!props.getMeetingListRequest) {
+    return;
+  }
+  if (nextLoading.value) {
+    return;
+  }
+  try {
+    if (total.value !== null && total.value > 0 && (currentPage.value - 1) * pageSize.value > total.value) {
+      return;
+    }
+    // 当月数据已加载完，手动切换下一月
+    if (!canLoadMore.value && isPhone.value) {
+      changeMonth('next-month');
+      return;
+    }
+    tableLoading.value = true;
+    nextLoading.value = true;
+    const res = await props.getMeetingListRequest({
+      page: currentPage.value,
+      size: pageSize.value,
+      order_by: 'date',
+      order_type: 'asc',
+      month: dayjs(selectedDate.value).format('YYYY-MM'),
+    } as unknown as PageParamsT);
+    const tempList = (res.data || [])
+      .map((item: MeetingItemT) => {
+        const {
+          is_cycle,
+          date,
+          start,
+          end,
+          cycle_sub,
+          cycle_start_date,
+          cycle_end_date,
+          cycle_start,
+          cycle_end,
+          cycle_type,
+          cycle_interval,
+          cycle_point,
+        } =
+          item;
+        if (is_cycle) {
+          let timeRange = '';
+          let cycleType = '';
+          if (cycle_type === INTERVAL_DAY) {
+            cycleType = t('meeting.cycleDay');
+          }
+          if (cycle_type === INTERVAL_WEEK) {
+            if (cycle_interval > 1) {
+              cycleType = t('meeting.cycleWeek.other', [getPointStr(cycle_type, cycle_point), cycle_interval]);
+            } else {
+              cycleType = t('meeting.cycleWeek.one', [getPointStr(cycle_type, cycle_point)]);
+            }
+          }
+          if (cycle_type === INTERVAL_MONTH) {
+            cycleType = t('meeting.cycleMonth', [getPointStr(cycle_type, cycle_point)]);
+          }
+          timeRange = t('meeting.cycleMeetingText2', {
+            startDate: cycle_start_date,
+            endDate: cycle_end_date,
+            startTime: cycle_start,
+            endTime: cycle_end,
+            cycleType,
+          });
+          const obsData = item.obs_data?.filter((v) => v.text_video_url) || [];
+          return cycle_sub
+            .filter((v) => {
+              return (
+                dayjs(v.date).isBefore(dayjs(selectedDate.value).add(1, 'month').format('YYYY-MM-01')) &&
+                !dayjs(v.date).isBefore(dayjs(selectedDate.value).format('YYYY-MM-01'))
+              );
+            })
+            .map(({ id: _id, ...sub }) => {
+              return {
+                ...item,
+                ...sub,
+                timeRange: timeRange,
+                dateRange: `${ sub.start }-${ sub.end }`,
+                hasObsData: obsData.find((v) => v.sub_id === sub.sub_id),
+                time: `${ sub.start }-${ sub.end }`,
+                isExpired: dayjs(`${ sub.date } ${ sub.start }`).isBefore(dayjs()),
+              };
+            });
+        }
+        return [
+          {
+            ...item,
+            dateRange: `${ start } - ${ end }`,
+            timeRange: `${ start } - ${ end }`,
+            hasObsData: !!item.obs_data?.filter((v) => v.text_video_url)?.length,
+            time: `${ start }-${ end }`,
+            isExpired: dayjs(`${ date } ${ start }`).isBefore(dayjs()),
+          },
+        ];
+      })
+      .flat()
+      .filter((v: MeetingItemT) => v.date.slice(0, 7) === formatDate(selectedDate.value, 'YYYY-MM-DD').slice(0, 7));
+    // 如果需要清空，则完全替换
+    // 如果页码为1，表示第一次加载
+    // 如果是移动端，则一直往里填充数据
+    if (reloadAll.value) {
+      originList.value = res.data || [];
+      list.value = tempList;
+    } else {
+      if (currentPage.value === 1 && !isPhone.value) {
+        originList.value = res.data || [];
+        list.value = tempList;
+      } else {
+        originList.value = [...originList.value, ...(res.data || [])];
+        list.value = [...list.value, ...tempList];
+      }
+    }
+    list.value.sort((a, b) => {
+      if (a.date === b.date) {
+        return getDateNumber(a.start) > getDateNumber(b.start) ? 1 : -1;
+      } else {
+        return dayjs(a.date).isAfter(dayjs(b.date)) ? 1 : -1;
+      }
+    });
+    total.value = res?.total || 0;
+    nextTick(() => {
+      getSelectedDate();
+      // 监听滚动事件以自动加载下一页
+      if (scrollerRef.value && !isPhone.value) {
+        updateScroller();
+      }
+    });
+  } finally {
+    tableLoading.value = false;
+    nextLoading.value = false;
+    bottomReached.value = false;
+    reloadAll.value = false;
+  }
+};
+
+const load = useDebounceFn(() => {
+  if (!canLoadMore.value) return;
+  if (isPhone.value) return;
+  bottomReached.value = true;
+  currentPage.value++;
+  getList();
+}, 200);
+const handleScroll = useDebounceFn(() => {
+  if (!canLoadMore.value) return;
+  if (!isPhone.value) return;
+  const scrollPosition = window.scrollY || window.pageYOffset;
+  // 检测是否接近底部
+  const windowHeight = window.innerHeight;
+  const docHeight = document.documentElement.scrollHeight;
+  const distanceToBottom = docHeight - (scrollPosition + windowHeight);
+  // 当距离底部300px时开始加载
+  if (distanceToBottom <= 300 && !nextLoading.value) {
+    bottomReached.value = true;
+    // 加载下一页
+    currentPage.value++;
+    getList();
+  }
+}, 200);
+const calcIfAllDeleted = (date: string) => {
+  const meetingsOfDate = list.value.filter((v) => v.date === date);
+  return meetingsOfDate.length && meetingsOfDate.every((v) => v.is_delete);
+};
+
+const scrollerScroll = (el: any) => {
+  const container = el.target;
+  if (!container) return;
+  const scrollTop = container.scrollTop; // 已经滚动的距离
+  const scrollHeight = container.scrollHeight; // 内容总高度
+  const clientHeight = container.clientHeight; // 容器可视高度
+  if (scrollTop + clientHeight >= scrollHeight) {
+    load();
+  }
+};
+const updateScroller = () => {
+  const scrollerContainerEl = scrollerRef.value.getContainerEl();
+  scrollerContainerEl.addEventListener('scroll', scrollerScroll);
+};
+
+const detailRefs = ref<Record<string, any>>({}); // 会议详情组件实例
+const getDetailRefs = (insRef: any, id: number) => {
+  if (insRef && id) {
+    detailRefs.value[id] = insRef;
+  }
+};
+const copyInfo = async (idx: number) => {
+  const instance = detailRefs.value[idx];
+  await instance.copyInfo();
+  message.success({
+    content: t('common.copySuccess'),
+  });
+};
+// -------------------- 取消 --------------------
+const cancelVisible = ref(false); // 取消弹窗
+const currentRow = ref<MeetingItemT | null>(null); // 当前激活行，用于取消事件
+// 打开编辑会议弹窗
+const editMeeting = (row: MeetingItemT) => {
+  emits('edit', row, 'whole');
+};
+// 打开取消会议弹窗
+const cancelMeeting = (row: MeetingItemT) => {
+  currentRow.value = row;
+  cancelVisible.value = true;
+};
+// 确定取消会议
+const confirmCancel = async () => {
+  if (!props.deleteMeetingRequest) {
+    return;
+  }
+  if (!currentRow.value) {
+    return;
+  }
+  try {
+    dialogLoading.value = true;
+    const flag = await props.deleteMeetingRequest(currentRow.value.id);
+    if (typeof flag === 'boolean' && !flag) {
+      return;
+    }
+    cancelVisible.value = false;
+    message.success({
+      content: `${ t('meeting.meetingCancel', [currentRow.value.topic]) }`,
+    });
+    reloadAll.value = true;
+    getList();
+  } finally {
+    dialogLoading.value = false;
+  }
+};
+const handleDialogVisible = ref(false);
+const handleDialogType = ref('');
+const handleDialogRow = ref<MeetingItemT | null>(null);
+const handleOptions = [
+  {
+    label: t('meeting.meetingSingle'),
+    value: 'single',
+  },
+  {
+    label: t('meeting.meetingCycle'),
+    value: 'whole',
+  },
+];
+
+const handleType = ref('single');
+const handleItem = (row: MeetingItemT, type: 'edit' | 'cancel') => {
+  if (row.is_cycle) {
+    handleDialogRow.value = row;
+    handleDialogType.value = type;
+    handleDialogVisible.value = true;
+  } else {
+    if (type === 'cancel') {
+      cancelMeeting(row);
+    } else {
+      editMeeting(row);
+    }
+  }
+};
+const cancelHandleItem = () => {
+  handleDialogVisible.value = false;
+  handleDialogRow.value = null;
+  handleDialogType.value = '';
+  handleType.value = 'single';
+};
+const confirmHandleItem = async () => {
+  const row = handleDialogRow.value;
+  if (!row) {
+    return;
+  }
+  if (handleDialogType.value === 'cancel') {
+    try {
+      let flag = undefined;
+      dialogLoading.value = true;
+      if (handleType.value === 'single' && row.is_cycle) {
+        if (!props.cancelSubMeetingRequest) {
+          return;
+        }
+        flag = await props.cancelSubMeetingRequest(row.sub_id);
+      } else {
+        if (!props.deleteMeetingRequest) {
+          return;
+        }
+        flag = await props.deleteMeetingRequest(row.id);
+      }
+      if (typeof flag === 'boolean' && !flag) {
+        return;
+      }
+      message.success({
+        content: `${ t('meeting.meetingCancel', [row.topic]) }`,
+      });
+      cancelHandleItem();
+      reloadAll.value = true;
+      getList();
+    } finally {
+      dialogLoading.value = false;
+    }
+  } else {
+    emits('edit', row, handleType.value);
+    cancelHandleItem();
+  }
+};
+
+// -------------------- 日历 --------------------
+const calendarRef = ref();
+const allDateList = computed<string[]>(() => [...new Set(list.value.map((v) => v.date))].sort((a, b) => (dayjs(a).isBefore(dayjs(b)) ? -1 : 1)));
+const dateList = computed<string[]>(() =>
+  [...new Set(list.value.filter((v) => !v.isExpired && !v.is_delete).map((v) => v.date))].sort((a, b) => (dayjs(a).isBefore(dayjs(b)) ? -1 : 1)),
+);
+const selectedDate = ref();
+
+const getSelectedDate = () => {
+  const latest = dateList.value.find((v) => !dayjs(v).isBefore(dayjs(new Date()).format('YYYY-MM-DD')));
+  if (latest) {
+    selectedDate.value = latest;
+  } else if (!selectedDate.value) {
+    selectedDate.value = dayjs().format('YYYY-MM-DD');
+  }
+  calendarRef.value?.pickDay(dayjs(selectedDate.value));
+  selectedDate.value = dayjs(selectedDate.value).format('YYYY-MM-DD');
+  // 根据天再计算出需要展开的最近的会议
+  const needExpand = list.value.find((v) => v.date === selectedDate.value && !v.isExpired && !v.is_delete);
+  if (needExpand) {
+    expanded.value = [needExpand.sub_id || needExpand.id];
+  }
+};
+
+const cellClick = (e: PointerEvent & any, clickable: boolean) => {
+  if (!clickable || !e.target?.className.includes('date-cell-text')) {
+    e.stopPropagation();
+    e.preventDefault();
+  }
+};
+
+const changeMonth = (val: string) => {
+  if (!calendarRef.value) return;
+  currentPage.value = 1;
+  total.value = null;
+  window.scrollTo({
+    top: 0,
+    behavior: 'smooth',
+  });
+  calendarRef.value.selectDate(val);
+  reloadAll.value = true;
+  nextTick(() => {
+    selectedDate.value = dayjs(calendarRef.value.selectedDay).format('YYYY-MM-DD');
+    getList();
+  });
+};
+// -------------------- 列表 --------------------
+interface GroupListItemT {
+  date: string;
+  list: MeetingItemT[];
+}
+
+const groupList = computed(() => {
+  return list.value.reduce((prev: GroupListItemT[], cur: MeetingItemT) => {
+    if (!prev.length) {
+      return [
+        {
+          date: cur.date,
+          list: [cur],
+        },
+      ];
+    } else {
+      const last = prev.at(-1);
+      if (last?.date === cur.date) {
+        last.list.push(cur);
+      } else {
+        prev.push({
+          date: cur.date,
+          list: [cur],
+        });
+      }
+      return prev;
+    }
+  }, []);
+});
+
+// -------------------- 处理滚动事件 --------------------
+const scrollerRef = ref();
+watch(
+  () => selectedDate.value,
+  () => {
+    scrollToSelectedDate(selectedDate.value);
+  },
+);
+const scrollToSelectedDate = (date: string) => {
+  const key = dayjs(date).format('YYYY-MM-DD');
+  const targetEle = document.querySelector(`#group-title-${ key }`);
+  if (targetEle) {
+    if (isPhone.value) {
+      window.scrollTo({
+        top: (targetEle.parentElement?.offsetTop || 0) - 52,
+        behavior: 'smooth',
+      });
+    } else {
+      scrollerRef.value?.scrollTo({
+        top: targetEle.parentElement?.offsetTop || 0,
+        behavior: 'smooth',
+      });
+    }
+  }
+};
+onMounted(() => {
+  getList();
+  // 添加滚动事件监听
+  window.addEventListener('scroll', handleScroll);
+  // 添加resize监听器
+  window.addEventListener('resize', handleScroll);
+});
+
+onUnmounted(() => {
+  window.removeEventListener('scroll', handleScroll);
+  window.removeEventListener('resize', handleScroll);
+  const scrollerContainerEl = scrollerRef.value?.getContainerEl();
+  scrollerContainerEl?.removeEventListener('scroll', scrollerScroll);
+});
+
+const formatYearMonth = (date: string) => {
+  const date2 = dayjs(date ? date : undefined);
+  if (isEn.value) {
+    return date2.format('MMMM YYYY');
+  } else {
+    return date2.format('YYYY MM月');
+  }
+};
+const handleActions = computed<DialogActionT[]>(() => {
+  return [
+    {
+      id: 'confirm',
+      color: 'primary',
+      label: t('common.confirm'),
+      variant: 'solid',
+      size: 'large',
+      round: 'pill',
+      loading: dialogLoading.value,
+      onClick: () => {
+        confirmHandleItem();
+      },
+    },
+    {
+      id: 'cancel',
+      color: 'primary',
+      label: t('common.cancel'),
+      variant: 'outline',
+      size: 'large',
+      round: 'pill',
+      onClick: () => {
+        cancelHandleItem();
+      },
+    },
+  ];
+});
+const cancelActions = computed<DialogActionT[]>(() => {
+  return [
+    {
+      id: 'confirm',
+      color: 'primary',
+      label: t('common.confirm'),
+      variant: 'solid',
+      size: 'large',
+      round: 'pill',
+      loading: dialogLoading.value,
+      onClick: () => {
+        confirmCancel();
+      },
+    },
+    {
+      id: 'cancel',
+      color: 'primary',
+      label: t('common.cancel'),
+      variant: 'outline',
+      size: 'large',
+      round: 'pill',
+      onClick: () => {
+        cancelVisible.value = false;
+      },
+    },
+  ];
+});
+</script>
+
+<template>
+  <div class="o-my-meeting-calendar">
+    <div class="meeting-list">
+      <div class="list-calendar-mb">
+        <span>{{ formatYearMonth(selectedDate) }}</span>
+        <span>
+          <OIcon @click="changeMonth('prev-month')"><OIconChevronLeft /></OIcon>
+          <OIcon @click="changeMonth('next-month')"><OIconChevronRight /></OIcon>
+        </span>
+      </div>
+      <div class="list-calendar">
+        <ElCalendar ref="calendarRef" v-model="selectedDate">
+          <template #header>
+            <span>{{ formatYearMonth(selectedDate) }}</span>
+            <div>
+              <OIcon @click="changeMonth('prev-month')">
+                <OIconChevronLeft />
+              </OIcon>
+              <OIcon @click="changeMonth('next-month')">
+                <OIconChevronRight />
+              </OIcon>
+            </div>
+          </template>
+          <template #date-cell="{ data }">
+            <div
+              @click="(e) => cellClick(e, allDateList.includes(data.day))"
+              :class="{
+                'date-cell': true,
+                'is-selected': data.isSelected,
+                'is-today': formatDate(data.day) === formatDate(),
+                clickable: allDateList.includes(data.day),
+                expired: dayjs(formatDate()).isAfter(dayjs(data.day)),
+                'all-deleted': calcIfAllDeleted(data.day),
+              }"
+              :style="{
+                '--dot-bg': `${getConfig(CalendarDataType.MEETING, 'color')}`
+              }"
+            >
+              <div class="date-cell-text">
+                {{ Number(data.day.split('-')[2]) }}
+              </div>
+            </div>
+          </template>
+        </ElCalendar>
+      </div>
+      <div class="list-wrapper" :class="!list.length ? 'is-empty' : ''">
+        <OScroller
+          ref="scrollerRef"
+          @scrollend="load"
+          v-if="list.length"
+          class="scroller-container"
+          show-type="hover"
+        >
+          <div class="list-body">
+            <OCollapse v-model="expanded" :accordion="isPhone">
+              <template v-for="(group, idx) in groupList" :key="group.date">
+                <div class="list-month-change prev-month" v-if="idx === 0" @click="changeMonth('prev-month')">
+                  <OIcon>
+                    <OIconArrowLeft />
+                  </OIcon>
+                  <span>{{ t('meeting.preMonth') }}</span>
+                </div>
+                <div class="group-item" :class="idx === groupList.length - 1 && 'last-item'">
+                  <div
+                    :class="{
+                      'group-bar': true,
+                      'is-active': dayjs(selectedDate).format('YYYY-MM-DD') === group.date,
+                      'is-end': group.list.every((row) => row.isExpired),
+                    }"
+                  >
+                    <div class="group-bar-line"></div>
+                    <div class="group-bar-dot"></div>
+                  </div>
+                  <div
+                    :class="{
+                      'group-title': true,
+                      'is-end': group.list.every((row) => row.isExpired),
+                    }"
+                    :id="`group-title-${dayjs(new Date(group.date)).format('YYYY-MM-DD')}`"
+                  >
+                    {{ dayjs(group.date).format('MM/DD') }} {{ getWeekFromDate(group.date) }}
+                  </div>
+                  <OCollapseItem
+                    v-for="(row, rowIdx) in group.list"
+                    :key="row.sub_id || row.id"
+                    :value="row.sub_id || row.id"
+                    :class="{
+                      'last-item': idx === groupList.length - 1 && rowIdx === group.list.length - 1,
+                      'is-delete': row.is_delete,
+                      'is-end': row.isExpired,
+                    }"
+                  >
+                    <template #title>
+                      <div class="item-header-left">
+                        <div
+                          class="meeting-icon"
+                          :style="{
+                            backgroundColor: `${row.is_delete ? 'var(--o-color-info4)' : getConfig(CalendarDataType.MEETING, 'color')}`
+                          }"
+                        >
+                          <OIcon>
+                            <component :is="getConfig(CalendarDataType.MEETING, 'icon')" />
+                          </OIcon>
+                        </div>
+                        <div class="header-info">
+                          <div class="meeting-title">
+                            <div v-if="row.is_delete">{{ t('meeting.meetingCancelled') }}</div>
+                            <div class="title-wrapper">
+                              <div class="title-text">{{ row.topic }}</div>
+                            </div>
+                            <div class="tag-wrapper" v-if="row.is_cycle">
+                              <OTag color="primary" variant="outline">{{ t('meeting.cycle') }}</OTag>
+                            </div>
+                          </div>
+                          <div class="meeting-info">
+                            <span>{{ row.dateRange }}</span>
+                            <ODivider direction="v" />
+                            <span>
+                              {{ groupType === MeetingGroupType.GROUP ? t('meeting.groups') : t('meeting.sigs')
+                              }}: {{ row.group_name }}
+                            </span>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="item-header-right" v-if="!row.is_delete">
+                        <OLink
+                          :hover-underline="false"
+                          v-if="!row.isExpired"
+                          target="_blank"
+                          :href="row.join_url"
+                          rel="noopener noreferrer"
+                        >
+                          {{ t('meeting.joinMeeting') }}
+                          <template #suffix>
+                            <OIcon>
+                              <OIconChevronRight></OIconChevronRight>
+                            </OIcon>
+                          </template>
+                        </OLink>
+                        <template v-else>
+                          <OLink
+                            :hover-underline="false"
+                            target="_blank"
+                            v-if="row.etherpad"
+                            :href="row.etherpad"
+                          >
+                            {{ t('meeting.meetingSummary') }}
+                            <template #suffix>
+                              <OIcon>
+                                <OIconChevronRight></OIconChevronRight>
+                              </OIcon>
+                            </template>
+                          </OLink>
+                          <OLink
+                            :hover-underline="false"
+                            target="_blank"
+                            :href="`/${locale}/video/${row.group_name}/${row.mid}/${row.date}`"
+                            v-if="row.hasObsData">
+                            {{ t('meeting.viewRecord') }}
+                            <template #suffix>
+                              <OIcon>
+                                <OIconChevronRight></OIconChevronRight>
+                              </OIcon>
+                            </template>
+                          </OLink>
+                        </template>
+                      </div>
+                      <OIcon @click.stop="() => copyInfo(rowIdx)" class="copy-icon">
+                        <IconCopy />
+                      </OIcon>
+                    </template>
+                    <div class="meeting-detail">
+                      <OMeetingDetail
+                        :show="expanded.includes(row.sub_id || row.id)"
+                        :data="row"
+                        :ref="(insRef) => getDetailRefs(insRef, row.id)"
+                        from="my"
+                      />
+                      <div class="meeting-btn" v-if="!row.isExpired && !row.is_delete">
+                        <OButton color="normal" variant="text" @click="handleItem(row, 'edit')">
+                          {{ t('meeting.editMeeting') }}
+                        </OButton>
+                        <OButton color="normal" variant="text" @click="handleItem(row, 'cancel')">
+                          {{ t('meeting.cancelMeeting') }}
+                        </OButton>
+                      </div>
+                    </div>
+                  </OCollapseItem>
+                  <div class="height-placeholder"></div>
+                </div>
+                <template v-if="idx === groupList.length - 1">
+                  <div class="load-text" v-if="bottomReached">{{ t('common.loading') }}</div>
+                  <div class="list-month-change next-month" @click="changeMonth('next-month')">
+                    <OIcon>
+                      <OIconArrowRight />
+                    </OIcon>
+                    <span>{{ t('meeting.nextMonth') }}</span>
+                  </div>
+                </template>
+              </template>
+            </OCollapse>
+          </div>
+        </OScroller>
+        <slot name="empty" v-else-if="!tableLoading"></slot>
+      </div>
+      <ODialog
+        v-model:visible="handleDialogVisible"
+        main-class="handle-dialog"
+        @close="cancelHandleItem"
+        :actions="handleActions"
+      >
+        <template #header>
+          {{
+            t('meeting.meetingHandleText', [handleDialogType === 'edit' ? t('meeting.edit') : t('meeting.cancel')])
+          }}
+        </template>
+        <ORadioGroup v-model="handleType">
+          <ORadio v-for="t in handleOptions" :value="t.value" :key="t.value">{{ t.label }}</ORadio>
+        </ORadioGroup>
+      </ODialog>
+      <ODialog v-model:visible="cancelVisible" main-class="cancel-dialog" :actions="cancelActions">
+        <template #header>{{ t('meeting.confirmCancel') }}</template>
+        <div class="dialog-content">{{ t('meeting.confirmCancelDesc', [currentRow?.topic]) }}</div>
+      </ODialog>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+.o-my-meeting-calendar {
+  --meeting-card-radius: var(--o-radius-xs);
+  --meeting-input-radius: var(--o-radius-xs);
+  --meeting-cell-radius: var(--o-radius-xs);
+
+  .header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .title {
+      font-weight: 500;
+      color: var(--o-color-info1);
+      @include h2;
+    }
+
+    .desc {
+      margin-top: 12px;
+      color: var(--o-color-info2);
+      @include tip1;
+    }
+  }
+
+  .meeting-list {
+    display: flex;
+    flex-wrap: nowrap;
+    gap: var(--o-gap-4);
+    height: 100%;
+    --phone-padding-top: 0;
+    @include respond('pad_v') {
+      flex-direction: column;
+      gap: var(--o-gap-4);
+    }
+    @include respond('phone') {
+      flex-direction: column;
+      gap: var(--o-gap-3);
+      --phone-padding-top: 56px;
+    }
+
+    .o-loading {
+      .o-layer-mask {
+        background-color: transparent;
+      }
+
+      .o-loading-icon {
+        color: var(--layer-mask);
+      }
+    }
+
+    .list-calendar-mb {
+      display: none;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0 var(--grid--layout-padding);
+
+      span:first-child {
+        @include display2;
+      }
+
+      span:last-child {
+        display: flex;
+        align-items: center;
+      }
+
+      .o-icon {
+        font-size: 24px;
+        cursor: pointer;
+
+        &:last-child {
+          margin-left: 24px;
+        }
+      }
+
+      @include respond('phone') {
+        background-color: var(--o-color-fill1);
+        display: flex;
+        position: fixed;
+        height: var(--phone-padding-top);
+        z-index: 1;
+        top: var(--layout-header-height);
+        left: 0;
+        right: 0;
+      }
+    }
+
+    .list-calendar {
+      flex-shrink: 0;
+      width: 334px;
+      background-color: color-mix(in srgb, var(--o-color-control2-light) 40%, transparent);
+
+      @include respond('pad_h') {
+        .el-calendar {
+          .el-calendar__body {
+            padding-left: 12px;
+            padding-right: 12px;
+
+            .el-calendar-table .date-cell {
+              height: 40px;
+              width: 28px;
+
+              .date-cell-text {
+                line-height: 24px;
+                @include tip2;
+              }
+            }
+          }
+        }
+      }
+      @include respond('pad_v') {
+        width: 100%;
+      }
+      @include respond('phone') {
+        display: none;
+      }
+      .el-calendar {
+        min-height: 460px;
+        height: calc(100% - 54px);
+        border-radius: var(--meeting-card-radius);
+        background-color: transparent;
+
+        .el-calendar__header {
+          border-bottom: 1px solid var(--o-color-control4);
+          color: var(--o-color-info1);
+
+          & > span {
+            font-weight: 500;
+            @include h1;
+          }
+
+          & > div {
+            display: flex;
+            align-items: center;
+            gap: var(--o-gap-5);
+
+            .o-icon {
+              font-size: 24px;
+              cursor: pointer;
+
+              &:hover {
+                color: var(--o-color-primary1);
+              }
+
+              svg path {
+                fill: currentColor;
+              }
+            }
+          }
+        }
+
+        .el-calendar__body {
+          .el-calendar-table {
+            display: table;
+
+            th {
+              text-align: center;
+              border: none;
+              --o-color-control3-light: transparent;
+            }
+
+            tr {
+              --o-color-fill2: transparent;
+            }
+
+            td {
+              background-color: transparent !important;
+              border: none;
+              text-align: center;
+              transition: none;
+              padding: 0;
+
+              .el-calendar-day {
+                padding: 0;
+                height: fit-content;
+              }
+
+              div {
+                cursor: default !important;
+              }
+
+              &:hover {
+                .el-calendar-day {
+                  background-color: transparent;
+                }
+              }
+            }
+
+            .date-cell {
+              height: 56px;
+              width: 34px;
+              position: relative;
+              cursor: default !important;
+
+              .date-cell-text {
+                font-size: 14px;
+                line-height: 34px;
+                border-radius: var(--meeting-cell-radius);
+                background-color: var(--o-color-control2-light);
+                border: 1px solid transparent;
+              }
+
+              .date-cell-text {
+                cursor: not-allowed !important;
+              }
+
+              &.clickable {
+                .date-cell-text {
+                  cursor: pointer !important;
+                }
+
+                &:not(.is-selected) {
+                  .date-cell-text:hover {
+                    background-color: var(--o-color-control3-light);
+                  }
+                }
+              }
+
+              &::after {
+                content: '';
+                position: absolute;
+                bottom: 5px;
+                left: 50%;
+                transform: translateX(-50%);
+                width: 8px;
+                height: 8px;
+                border-radius: 50%;
+              }
+
+              &.is-today {
+                .date-cell-text {
+                  color: var(--o-color-primary1);
+                  font-weight: bold;
+                  background-color: var(--o-color-control3-light);
+                }
+              }
+
+              &.is-selected {
+                .date-cell-text {
+                  background-color: var(--o-color-control3-light);
+                  border: 1px solid var(--o-color-primary1);
+                }
+              }
+
+              &.clickable {
+                &::after {
+                  background-color: var(--dot-bg);
+                }
+
+                &.expired::after {
+                  background-color: rgb(var(--o-grey-6));
+                }
+
+                &.all-deleted::after {
+                  background-color: rgb(var(--o-grey-6));
+                }
+              }
+            }
+
+          }
+        }
+      }
+
+    }
+
+    .list-wrapper {
+      flex-grow: 1;
+      background-color: var(--o-color-fill2);
+
+      @include respond('phone') {
+        margin-top: calc(var(--phone-padding-top) - var(--o-gap-4));
+      }
+      &.is-empty {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        min-height: 600px;
+      }
+
+
+      .o-scroller {
+        .o-scrollbar-rail {
+          right: -16px;
+          height: 100%;
+        }
+      }
+
+      .scroller-container {
+        height: 100%;
+        max-height: calc(var(--layout-left-height, 900px) - 4 * var(--o-gap-5) - var(--header-height, 64) * 1px);
+
+        @include respond('phone') {
+          max-height: fit-content;
+        }
+
+        .group-item {
+          padding-left: 24px;
+          position: relative;
+
+          @include respond('phone') {
+            padding-left: var(--o-gap-2);
+          }
+
+          &.last-item {
+            flex-grow: 1;
+          }
+
+          .group-bar {
+            position: absolute;
+            left: 0;
+            width: 16px;
+            top: 0;
+            bottom: 0;
+            overflow: hidden;
+
+            --active-color: var(--o-color-primary1);
+
+            &::before {
+              content: '';
+              width: 2px;
+              position: absolute;
+              top: 0;
+              bottom: 0;
+              left: 50%;
+              transform: translateX(-50%);
+              background-color: var(--o-color-control4);
+            }
+
+            .group-bar-dot {
+              width: 16px;
+              height: 26px;
+              position: relative;
+              @include respond('laptop') {
+                height: 24px;
+              }
+              @include respond('pad_h') {
+                height: 22px;
+              }
+              @include respond('<=pad_v') {
+                height: 22px;
+              }
+
+              &::before,
+              &::after {
+                content: '';
+                border-radius: 50%;
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                transform: translateY(-50%) translateX(-50%);
+              }
+
+              &::before {
+                width: 16px;
+                height: 16px;
+                background-color: transparent;
+              }
+
+              &::after {
+                width: 8px;
+                height: 8px;
+                background-color: var(--active-color);
+              }
+            }
+
+            &.is-active {
+              .group-bar-dot {
+                &::before {
+                  background-color: var(--active-color);
+                }
+
+                &::after {
+                  background-color: var(--o-color-fill2);
+                }
+              }
+            }
+
+            &.is-end {
+              --active-color: rgb(222, 222, 227);
+            }
+          }
+
+          .group-title {
+            font-weight: 500;
+            margin-bottom: var(--o-gap-2);
+            color: var(--o-color-info1);
+            @include text2;
+            @include respond('phone') {
+              padding-left: var(--o-gap-5);
+            }
+
+            &.is-end {
+              color: var(--o-color-info3);
+            }
+          }
+        }
+      }
+    }
+
+    .list-body {
+      height: 100%;
+
+      @include respond('phone') {
+        height: fit-content;
+        padding: var(--o-gap-4) !important;
+      }
+
+      .list-month-change {
+        flex-shrink: 0;
+        display: flex;
+        align-items: center;
+        gap: var(--o-gap-5);
+        cursor: pointer;
+        --btn-color: var(--o-color-primary1);
+        @include hover {
+          --btn-color: var(--o-color-primary2);
+        }
+
+        @include respond('phone') {
+          display: none;
+        }
+
+        &.prev-month {
+          margin-bottom: var(--o-gap-6);
+        }
+
+        &.next-month {
+          margin-top: var(--o-gap-6);
+          padding-bottom: 32px;
+        }
+
+        .o-icon {
+          font-size: 24px;
+          color: var(--btn-color);
+        }
+
+        span {
+          color: var(--btn-color);
+          @include text1;
+        }
+      }
+
+      .o-collapse {
+        padding: 0;
+        border-radius: 0;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+
+        .o-collapse-item-expanded + .o-collapse-item-expanded {
+          margin-top: var(--o-gap-4);
+        }
+
+        .height-placeholder {
+          height: var(--o-gap-4);
+        }
+
+
+        .o-collapse-item {
+          padding: var(--o-gap-4) var(--o-gap-5);
+          padding-bottom: calc(var(--o-gap-5) - var(--o-gap-4));
+          border-top: none;
+          border-radius: var(--meeting-card-radius);
+          transition: margin var(--o-easing-standard) var(--o-duration-s);
+          --copy-display: none;
+          --icon-size: 24px;
+          @include respond('<=pad_v') {
+            padding: var(--o-gap-3) var(--o-gap-4);
+          }
+
+          @include respond('phone') {
+            --icon-size: 20px;
+          }
+
+          &:hover {
+            .title-text {
+              color: var(--o-color-primary1);
+            }
+            @include respond('>pad_v') {
+              --copy-display: inline-flex;
+            }
+          }
+
+          &.last-item {
+            .o-collapse-item-header {
+              border-bottom: none;
+            }
+          }
+
+          &.is-delete,
+          &.is-end {
+
+            .meeting-title {
+              color: var(--o-color-info4);
+
+              .title-text {
+                color: var(--o-color-info4);
+              }
+            }
+          }
+
+          &.o-collapse-item-expanded {
+            border-bottom: none;
+            background-color: color-mix(in srgb, var(--o-color-control2-light) 40%, transparent) !important;
+
+            @include respond('<=pad_v') {
+              --copy-display: inline-flex;
+            }
+
+            .o-collapse-item-header {
+              border-bottom: 1px solid var(--o-color-control4);
+            }
+          }
+        }
+
+        .o-collapse-item-header {
+          border-bottom: none;
+          padding-top: 0;
+          padding-bottom: var(--o-gap-4);
+          display: flex;
+          align-items: center;
+          gap: var(--o-gap-4);
+          position: relative;
+
+          .o-collapse-item-icon {
+            position: relative;
+            top: 4px;
+            flex-shrink: 0;
+            @include respond('phone') {
+              position: absolute;
+              right: 0;
+              width: 20px;
+              height: 20px;
+              font-size: 20px;
+              top: 50%;
+              transform: translateY(-50%);
+            }
+          }
+
+          .o-collapse-item-title {
+            flex: 1;
+            width: 0;
+            display: flex;
+            flex-direction: column;
+            align-items: flex-start;
+            justify-content: space-between;
+            margin-bottom: 0;
+            .item-header-left {
+              display: flex;
+              align-items: flex-start;
+              gap: var(--o-gap-3);
+              width: 100%;
+              margin-bottom: var(--o-gap-2);
+              @include respond('phone') {
+                flex-grow: 1;
+                width: 100%;
+                align-self: stretch;
+                flex-shrink: 0;
+              }
+              .meeting-icon {
+                width: var(--icon-size);
+                height: var(--icon-size);
+                border-radius: 50%;
+                background-color: var(--o-color-primary1);
+                color: #fff;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                flex-shrink: 0;
+                --icon-size2: var(--icon-size);
+
+                .o-icon {
+                  font-size: calc(var(--icon-size2) - 2px);
+                  svg path {
+                    fill: currentColor;
+                  }
+                }
+
+              }
+
+              .header-info {
+                width: calc(100% - var(--o-gap-3) - var(--icon-size));
+
+                .meeting-title {
+                  font-weight: 500;
+                  display: flex;
+                  align-items: center;
+                  margin-bottom: var(--o-gap-2);
+                  @include text2;
+
+                  .tag-wrapper {
+                    flex: 10;
+                    margin-left: var(--o-gap-2);
+
+                    .o-tag {
+                      background-color: var(--o-color-control2-light);
+                      border: none;
+                      font-weight: 400;
+                    }
+                  }
+
+                  .title-wrapper {
+                    flex: 0 1 auto;
+                    min-width: 0;
+                    max-width: 100%;
+                  }
+
+                  .title-text {
+                    @include text-truncate(1);
+                  }
+                }
+
+                .meeting-info {
+                  color: var(--o-color-info3);
+                  display: flex;
+                  align-items: center;
+                  font-weight: 400;
+                  @include tip1;
+
+                  span:last-child {
+                    width: 0;
+                    flex: 1;
+                    @include text-truncate(1);
+                  }
+                }
+              }
+            }
+
+            .item-header-right {
+              display: flex;
+              align-items: center;
+              padding-left: calc(var(--o-gap-3) + var(--icon-size));
+              gap: var(--o-gap-4);
+              width: 100%;
+              font-weight: 400;
+
+              .o-link {
+                font-size: 14px;
+                line-height: 21px;
+                --link-color: var(--o-color-info2);
+              }
+              .o-icon {
+                font-size: 16px;
+              }
+            }
+
+            .copy-icon {
+              position: absolute;
+              top: 50%;
+              transform: translateY(-50%);
+              right: calc(var(--collapse-item-icon-size) + var(--o-gap-4));
+              font-size: 18px;
+              height: 18px;
+              width: 18px;
+              display: var(--copy-display);
+              color: var(--o-color-info1);
+              @include respond('phone') {
+                bottom: var(--o-gap-2);
+                right: calc(20px + var(--o-gap-2))
+              }
+
+              &:hover {
+                color: var(--o-color-primary1);
+              }
+
+
+              svg path {
+                fill: currentColor;
+              }
+            }
+          }
+        }
+
+        .o-collapse-item-body {
+          margin-bottom: 0;
+          padding: var(--o-gap-4) 0 0;
+
+          .meeting-detail {
+            padding-left: calc(var(--o-gap-3) + var(--icon-size));
+
+            @include respond('phone') {
+              padding-left: 0;
+            }
+
+            .meeting-btn {
+              border-top: 1px solid var(--o-color-control4);
+              margin-top: var(--o-gap-5);
+              padding-top: var(--o-gap-4);
+              padding-bottom: var(--o-gap-4);
+              display: flex;
+              align-items: center;
+              justify-content: flex-end;
+              gap: var(--o-gap-5);
+
+              .o-link {
+                --link-color: inherit;
+              }
+            }
+          }
+        }
+
+        .o-btn.o-btn-text {
+          padding-left: 0 !important;
+          padding-right: 0 !important;
+          min-width: auto;
+        }
+      }
+
+      .load-text {
+        text-align: center;
+        color: var(--o-color-info3);
+        @include tip1;
+      }
+    }
+  }
+
+  @include in-dark {
+    .group-bar.is-end {
+      --active-color: rgb(65, 65, 68) !important;
+    }
+    .meeting-list {
+
+      .is-today {
+        .date-cell-text {
+          color: #fff !important;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+.handle-dialog {
+  width: 450px;
+
+  .o-dlg-header {
+    margin-bottom: var(--o-gap-5);
+  }
+
+  .o-dlg-body-content {
+    display: flex;
+    justify-content: center;
+  }
+
+  .dialog-footer {
+    display: flex;
+    justify-content: center;
+    margin-top: var(--o-gap-4);
+    column-gap: var(--o-gap-4);
+  }
+}
+
+.cancel-dialog {
+  .dialog-content {
+    width: 384px;
+    text-align: center;
+  }
+
+  .dialog-footer {
+    display: flex;
+    justify-content: center;
+    margin-top: var(--o-gap-4);
+    column-gap: var(--o-gap-4);
+  }
+}
+
+</style>