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

package/src/components/meeting/components/OMeetingCalendarList.vue

@@ -0,0 +1,609 @@
+<script setup lang="ts">
+import {
+  isClient,
+  OCollapse,
+  OCollapseItem,
+  ODivider,
+  OIcon,
+  OButton,
+  OTag,
+  useMessage,
+} from '@opensig/opendesign';
+import OMeetingDetail from './OMeetingDetail.vue';
+import { computed, nextTick, ref, watch } from 'vue';
+import IconCopy from '~icons/meeting/icon-copy.svg';
+import { CalendarDataType, CycleSubItemT, MeetingGroupType, MeetingItemT, ObsDataItemT } from '../types.ts';
+import IconChevronRight from '~icons/components/icon-chevron-right.svg';
+import { INTERVAL_DAY, INTERVAL_MONTH, INTERVAL_WEEK } from '../config.ts';
+import { formatDate } from '../utils.ts';
+import { useMeetingConfig } from '../composables/useMeetingConfig';
+import { useActivityConfig } from '@/components/activity/composables/useActivityConfig';
+
+const { activityTypeMap } = useActivityConfig();
+
+const props = withDefaults(defineProps<{
+  list: MeetingItemT[];
+  groupType?: MeetingGroupType;
+  disableFormat?: boolean;
+}>(), {
+  list: () => [],
+});
+const { t, locale, getConfig, getPointStr } = useMeetingConfig();
+const detailRefs = ref<any[]>([]);
+const message = useMessage(null);
+const copyInfo = async (idx: number) => {
+  const instance = detailRefs.value[idx];
+  await instance.copyInfo();
+  message.success({
+    content: t('common.copySuccess'),
+  });
+};
+
+const collapseNames = ref<number[]>([]);
+const i18n = computed(() => {
+  return {
+    SIG_GROUP: `${ props.groupType === MeetingGroupType.GROUP ? t('meeting.groups') : t('meeting.sigs') }: `,
+    NEW_DATE: t('meeting.latestMeeting'),
+    EMPTY_TEXT: t('meeting.meetingEmptyText'),
+    LEARN_MORE: t('common.seeMore'),
+    JOIN_MEETING: t('meeting.joinMeeting'),
+    SIGN: t('meeting.sign'),
+    DETAILS: t('meeting.detail'),
+  };
+});
+
+// -------------------- 监听尺寸变化 --------------------
+const meetInfoRef = ref<HTMLDivElement[]>();
+
+let resizeObserver: ResizeObserver | null = null;
+watch(
+  [() => props.list, () => isClient],
+  () => {
+    if (props.list.length === 1) {
+      collapseNames.value = [props.list[0].id];
+    } else {
+      collapseNames.value = [];
+    }
+    if (isClient) {
+      nextTick(() => {
+        if (!resizeObserver) {
+          resizeObserver = new ResizeObserver((entries) => {
+            for (let entry of entries) {
+              const { height } = entry.contentRect;
+              entry.target.classList.remove('hidden-divider');
+              if (height >= 30) {
+                entry.target.classList.add('hidden-divider');
+              }
+            }
+          });
+        } else {
+          resizeObserver.disconnect();
+        }
+        meetInfoRef.value?.forEach((targetDiv) => {
+          resizeObserver!.observe(targetDiv);
+        });
+      });
+    }
+  },
+);
+
+const computedList = computed<any[]>(() => {
+  return props.list.map((v: any) => {
+    const type = v.type;
+    let dateRange = '';
+    let start_date_time = '';
+    let end_date_time = '';
+    if (type !== CalendarDataType.MEETING) {
+      let activity_type = activityTypeMap.value.get(v.activity_type)?.label;
+      const isSameDay = v.start_date && (v.start_date === v.end_date || !v.end_date);
+      if (v.start_date) {
+        dateRange = props.disableFormat ? v.start_date : formatDate(v.start_date);
+      }
+      if (isSameDay) {
+        if (v.start) {
+          dateRange += `${ dateRange ? ' ' : '' }${ v.start }`;
+          if (v.end) {
+            dateRange += `${ dateRange ? ' - ' : '' }${ v.end }`;
+          }
+        }
+      } else {
+        if (v.start) {
+          dateRange += `${ dateRange ? ' ' : '' }${ v.start }`;
+        }
+        if (v.end_date) {
+          dateRange += `${ dateRange ? ' - ' : '' }${ props.disableFormat ? v.end_date : formatDate(v.end_date) }`;
+          if (v.end) {
+            dateRange += `${ dateRange ? ' ' : '' }${ v.end }`;
+          }
+        }
+      }
+      if (v.start_date) {
+        start_date_time = props.disableFormat ? v.start_date : formatDate(v.start_date);
+      }
+      if (v.start) {
+        start_date_time += `${ start_date_time ? ' ' : '' }${ v.start }`;
+      }
+      if (v.end_date) {
+        end_date_time = props.disableFormat ? v.end_date : formatDate(v.end_date);
+      }
+      if (v.end) {
+        end_date_time += `${ end_date_time ? ' ' : '' }${ v.end }`;
+      }
+
+      return {
+        ...v,
+        activity_type,
+        dateRange,
+        start_date_time,
+        end_date_time,
+      };
+    }
+    const {
+      is_cycle,
+      date,
+      start,
+      end,
+      cycle_start_date,
+      cycle_end_date,
+      cycle_start,
+      cycle_end,
+      cycle_type,
+      cycle_interval,
+      cycle_point,
+    } = v;
+    dateRange = props.disableFormat ? date : formatDate(date);
+    if (start && end) {
+      dateRange += `${ dateRange ? ' ' : '' }${ start } - ${ end }`;
+    } else if (start || end) {
+      dateRange += `${ dateRange ? ' ' : '' }${ start || end }`;
+    }
+    if (is_cycle) {
+      dateRange = `${ props.disableFormat ? cycle_start_date : formatDate(cycle_start_date) } - ${ props.disableFormat ? cycle_end_date : formatDate(cycle_end_date) }`;
+    }
+
+    let timeRange = '';
+    if (start && end) {
+      timeRange = `${ start } - ${ end }`;
+    } else {
+      if (start) {
+        timeRange = start;
+      }
+      if (end) {
+        timeRange = end;
+      }
+    }
+    let replay_url = null;
+    let hasObsData = false;
+    const obsData = v.obs_data?.filter((v: ObsDataItemT) => v.text_video_url) || [];
+
+    if (is_cycle) {
+      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 as unknown as number[]), cycle_interval]);
+        } else {
+          cycleType = t('meeting.cycleWeek.one', [getPointStr(cycle_type, cycle_point as unknown as number[])]);
+        }
+      }
+      if (cycle_type === INTERVAL_MONTH) {
+        cycleType = t('meeting.cycleMonth', [getPointStr(cycle_type, cycle_point as unknown as number[])]);
+      }
+      timeRange = t('meeting.cycleMeetingText2', {
+        startDate: cycle_start_date,
+        endDate: cycle_end_date,
+        startTime: cycle_start,
+        endTime: cycle_end,
+        cycleType,
+      });
+      hasObsData = obsData.some((t: ObsDataItemT) => t.sub_id === v.cycle_sub.find((z: CycleSubItemT) => z.date === date)?.sub_id);
+    } else {
+      hasObsData = obsData.length > 0;
+    }
+    if (hasObsData) {
+      replay_url = `${ location.origin }/${ locale.value }/video/${ v.group_name }/${ v.mid }/${ date }`;
+    }
+
+    return {
+      ...v,
+      dateRange,
+      timeRange,
+      replay_url,
+    };
+  });
+});
+</script>
+
+<template>
+  <div class="o-meeting-calendar-list" :class="!computedList?.length ? 'is-empty':''">
+    <slot name="empty" v-if="!computedList?.length"></slot>
+    <OCollapse v-else v-model="collapseNames" :style="{ '--collapse-padding': '0' }">
+      <OCollapseItem v-for="(item, index) in computedList" :key="item.id" :value="item.id">
+        <template #title>
+          <div class="meet-title-left">
+            <div class="meet-title" :title="item.topic || item.name || item.title">
+              <OIcon
+                :style="{
+                  backgroundColor: `${getConfig(item.type, 'color')}`
+                }"
+              >
+                <component :is="getConfig(item.type, 'icon')" />
+              </OIcon>
+              <div class="text">
+                {{ item.topic || item.name || item.title }}
+              </div>
+              <div class="tag-wrapper" v-if="item.is_cycle">
+                <OTag color="primary" variant="outline">{{ t('meeting.cycle') }}</OTag>
+              </div>
+            </div>
+            <div class="meet-info" ref="meetInfoRef">
+            <span class="start-time">
+              <span>{{ item.dateRange }}</span>
+            </span>
+              <ODivider v-if="item.group_name || item.activity_type" direction="v" />
+              <div>
+                <template v-if="item.group_name">{{ i18n.SIG_GROUP }} {{ item.group_name }}</template>
+                <template v-if="item.activity_type">{{ item.activity_type }}</template>
+              </div>
+            </div>
+            <OButton
+              variant="text"
+              v-if="item.url"
+              :href="item.url"
+              target="_blank"
+              class="jump-detail-link"
+            >
+              <span>{{ i18n.LEARN_MORE }}</span>
+              <template #suffix>
+                <OIcon>
+                  <IconChevronRight />
+                </OIcon>
+              </template>
+            </OButton>
+            <OButton
+              variant="text"
+              v-if="item.join_url"
+              :href="item.join_url"
+              target="_blank"
+              class="jump-detail-link"
+            >
+              <span>{{ i18n.JOIN_MEETING }}</span>
+              <template #suffix>
+                <OIcon>
+                  <IconChevronRight />
+                </OIcon>
+              </template>
+            </OButton>
+            <OButton
+              variant="text"
+              v-if="item.content_url"
+              :href="item.content_url"
+              target="_blank"
+              class="jump-detail-link"
+            >
+              <span>{{ i18n.DETAILS }}</span>
+              <template #suffix>
+                <OIcon>
+                  <IconChevronRight />
+                </OIcon>
+              </template>
+            </OButton>
+            <OButton
+              variant="text"
+              v-if="item.register_url"
+              :href="item.register_url"
+              target="_blank"
+              class="jump-detail-link"
+            >
+              <span>{{ i18n.SIGN }}</span>
+              <template #suffix>
+                <OIcon>
+                  <IconChevronRight />
+                </OIcon>
+              </template>
+            </OButton>
+          </div>
+          <OIcon @click.stop="() => copyInfo(index)" class="copy-icon">
+            <IconCopy />
+          </OIcon>
+        </template>
+        <div class="calendar-info">
+          <OMeetingDetail
+            :show="collapseNames.includes(item.id)"
+            :data="item"
+            :ref="(insRef) => (detailRefs[index] = insRef)"
+            from="home"
+          />
+        </div>
+      </OCollapseItem>
+    </OCollapse>
+  </div>
+</template>
+
+<style lang="scss">
+.o-meeting-calendar-list {
+
+
+  &.is-empty {
+    min-height: 400px;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+
+  .o-collapse {
+    --icon-size2: 24px;
+    --icon-right: 12px;
+    @include respond('<=pad') {
+      --icon-size2: 20px;
+    }
+    @include respond('<=pad_v') {
+      --icon-right: 8px;
+    }
+    @include respond('phone') {
+      --icon-right: 4px;
+    }
+
+    .o-collapse-item {
+      position: relative;
+      border-top: none;
+      border-bottom: none;
+
+      &::after {
+        position: absolute;
+        content: '';
+        bottom: 0;
+        left: 50%;
+        transform: translateX(-50%);
+        width: calc(100% - 2 * 24px);
+        height: 1px;
+        background-color: var(--collapse-division-color);
+      }
+
+      &:last-child::after {
+        display: none;
+      }
+
+      @include hover {
+        .text {
+          color: var(--o-color-primary1);
+        }
+      }
+      @include respond('<=pad_v') {
+        &::after {
+          width: calc(100% - 2 * 16px);
+        }
+        &:last-child {
+          &::after {
+            display: none;
+          }
+        }
+      }
+
+      &.o-collapse-item-expanded {
+        .o-collapse-item-header {
+          padding-bottom: var(--o-gap-2);
+
+          .o-collapse-item-title {
+            .copy-icon {
+              opacity: 1;
+              visibility: visible;
+            }
+          }
+        }
+
+      }
+    }
+
+    .o-collapse-item-icon {
+      height: min-content;
+    }
+
+    .o-collapse-item-header {
+      align-items: center;
+      padding: var(--o-gap-4) var(--o-gap-5);
+      position: relative;
+
+      @include respond('>pad_v') {
+        &:hover {
+          .o-collapse-item-title {
+            .copy-icon {
+              opacity: 1;
+              visibility: visible;
+            }
+          }
+        }
+      }
+      @include respond('<=pad_v') {
+        padding: 12px 16px;
+      }
+
+      .o-collapse-item-title {
+        flex-grow: 1;
+        min-width: 0;
+        margin-bottom: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: var(--o-gap-4);
+        padding-right: var(--o-gap-5);
+
+        .meet-title-left {
+          flex-grow: 1;
+          min-width: 0;
+        }
+
+        .copy-icon {
+          flex-shrink: 0;
+          display: inline-flex;
+          opacity: 0;
+          visibility: hidden;
+          color: var(--o-color-info1);
+
+          &:hover {
+            color: var(--o-color-primary1);
+          }
+
+          svg path {
+            fill: currentColor;
+          }
+        }
+      }
+
+
+      .o-collapse-item-icon {
+        .o-svg-icon {
+          &:hover {
+            color: var(--o-color-primary1);
+          }
+        }
+      }
+
+    }
+
+    .o-collapse-item-body {
+      margin-bottom: 0;
+      padding: 0 12px 16px 12px;
+
+      a {
+        word-break: break-all;
+      }
+
+      .calendar-info {
+        display: flex;
+        color: var(--o-color-info3);
+        flex-direction: column;
+        background-color: color-mix(in srgb, var(--o-color-control2-light) 40%, transparent);
+        padding: 16px 16px 16px calc(var(--icon-right) + var(--icon-size2) + var(--o-gap-5) - 12px);
+        border-radius: var(--meeting-card-radius);
+        @include tip1;
+
+        @include respond('<=pad_v') {
+          padding: 16px 16px 16px calc(var(--icon-right) + var(--icon-size2) + 16px - 12px);
+
+        }
+        @include respond('phone') {
+          padding: 12px 16px;
+        }
+
+        .info-item {
+          display: flex;
+          margin-top: 8px;
+
+          .item-title {
+            min-width: 110px;
+          }
+        }
+
+        .info-item:first-child {
+          margin-top: 0;
+        }
+      }
+
+    }
+
+    .jump-detail-link {
+      padding-left: calc(var(--icon-right) + var(--icon-size2));
+      margin-top: var(--o-gap-1);
+      color: var(--o-color-info2);
+      font-weight: 400;
+      @include tip1;
+
+      &:hover {
+        color: var(--o-color-primary1);
+      }
+
+      .o-icon {
+        font-size: 16px;
+
+        svg path {
+          fill: currentColor;
+        }
+      }
+    }
+
+    .jump-detail-link + .jump-detail-link {
+      padding-left: 24px;
+    }
+
+    .meet-title {
+      display: flex;
+      align-items: center;
+      width: 100%;
+      color: var(--o-color-info2);
+      @include text2;
+
+      @include respond('<=pad_v') {
+        @include h3;
+      }
+
+      .tag-wrapper {
+        margin-left: var(--o-gap-2);
+
+        .o-tag {
+          background-color: var(--o-color-control2-light);
+          border: none;
+          font-weight: 400;
+        }
+      }
+
+      .o-icon {
+        flex-shrink: 0;
+        border-radius: 50%;
+        overflow: hidden;
+        color: var(--o-color-white);
+        margin-right: var(--icon-right);
+        width: var(--icon-size2);
+        height: var(--icon-size2);
+        font-size: calc(var(--icon-size2) - 2px);
+
+        svg path {
+          fill: currentColor;
+        }
+      }
+
+      .text {
+        display: block;
+        font-weight: 600;
+        min-width: 0;
+        flex: 1;
+        @include text-truncate(1);
+      }
+    }
+
+    .meet-info {
+      display: flex;
+      margin-left: calc(var(--icon-right) + var(--icon-size2));
+      margin-top: var(--o-gap-2);
+      flex-wrap: wrap;
+      align-items: center;
+      color: var(--o-color-info3);
+      text-decoration: none;
+      font-weight: 400;
+      @include tip1;
+
+      .o-divider {
+        @include tip1;
+      }
+
+      &.hidden-divider {
+        .start-time {
+          padding-right: 24px;
+        }
+
+        .o-divider {
+          display: none;
+        }
+      }
+    }
+
+
+
+  }
+}
+
+</style>