tuikit-atomicx-vue3 4.4.0 → 4.5.1

package/src/components/ScheduleRoomPanel/RoomDetail.vue

@@ -0,0 +1,240 @@
+<template>
+  <div class="room-detail">
+    <div v-if="!roomInfo" class="room-detail-empty">
+      {{ t('No room information') }}
+    </div>
+    <div v-else class="room-detail-content">
+      <div class="detail-item">
+        <div class="detail-label">
+          {{ t('Room Name') }}
+        </div>
+        <div class="detail-value">
+          {{ roomInfo.roomName }}
+        </div>
+      </div>
+
+      <div class="detail-item">
+        <div class="detail-label">
+          {{ t('Room ID') }}
+        </div>
+        <div class="detail-value">
+          {{ roomInfo.roomId }}
+          <IconCopy class="copy-icon" @click="() => copy(roomInfo?.roomId || '')" />
+        </div>
+      </div>
+
+      <div v-if="roomInfo.password" class="detail-item">
+        <div class="detail-label">
+          {{ t('Room Password') }}
+        </div>
+        <div class="detail-value">
+          {{ roomInfo.password }}
+          <IconCopy class="copy-icon" @click="() => copy(roomInfo?.password || '')" />
+        </div>
+      </div>
+
+      <div class="detail-item">
+        <div class="detail-label">
+          {{ t('Room Time') }}
+        </div>
+        <div class="detail-value">
+          {{ formatDateTime(roomInfo.scheduledStartTime) }} - {{ formatDateTime(roomInfo.scheduledEndTime) }}
+          <span v-if="roomInfo.roomStatus" :class="['status-badge', roomInfo.roomStatus === RoomStatus.Running && 'running']">
+            {{ getRoomStatusText(roomInfo.roomStatus) }}
+          </span>
+        </div>
+      </div>
+
+      <div class="detail-item">
+        <div class="detail-label">
+          {{ t('Creator') }}
+        </div>
+        <div class="detail-value">
+          {{ roomInfo.roomOwner.userName || roomInfo.roomOwner.userId }}
+        </div>
+      </div>
+
+      <div class="detail-item">
+        <div class="detail-label">
+          {{ t('Attendees') }}
+        </div>
+        <div class="detail-value">
+          <div v-if="isLoadingAttendees" class="attendees-loading">
+            <IconLoadingSchedule class="loading-icon" size="16" />
+            <span>{{ t('Loading...') }}</span>
+          </div>
+          <div
+            v-else-if="roomInfo.scheduleAttendees && roomInfo.scheduleAttendees.length > 0"
+            class="attendees-list"
+            :title="roomInfo.scheduleAttendees.map((attendee) => attendee.userName || attendee.userId).join(', ')"
+          >
+            {{ roomInfo.scheduleAttendees.map((attendee) => attendee.userName || attendee.userId).join(', ') }}
+          </div>
+          <div v-else class="no-attendees">
+            {{ t('No scheduled members') }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { IconCopy, IconLoadingSchedule, TUIToast, useUIKit } from '@tencentcloud/uikit-base-component-vue3';
+import { RoomStatus } from '../../types';
+import { copyText } from './utils';
+import type { RoomInfo } from '../../types';
+
+const { t } = useUIKit();
+
+interface Props {
+  roomInfo: RoomInfo | null;
+  isLoadingAttendees?: boolean;
+}
+
+withDefaults(defineProps<Props>(), {
+  isLoadingAttendees: false,
+});
+
+const formatDateTime = (timestamp?: number): string => {
+  if (!timestamp) {
+    return '--';
+  }
+
+  const date = new Date(timestamp * 1000);
+  const year = date.getFullYear();
+  const month = (date.getMonth() + 1).toString().padStart(2, '0');
+  const day = date.getDate().toString().padStart(2, '0');
+  const hours = date.getHours().toString().padStart(2, '0');
+  const minutes = date.getMinutes().toString().padStart(2, '0');
+
+  return `${year}-${month}-${day} ${hours}:${minutes}`;
+};
+
+const getRoomStatusText = (status: RoomStatus): string => {
+  switch (status) {
+    case RoomStatus.Scheduled:
+      return t('Not Started');
+    case RoomStatus.Running:
+      return t('In Progress');
+    default:
+      return t('Unknown Status');
+  }
+};
+
+const copy = async (value: string) => {
+  const success = await copyText(value);
+  if (success) {
+    TUIToast.success({ message: t('Copy Success') });
+  } else {
+    TUIToast.error({ message: t('Copy Failed') });
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.room-detail {
+  padding: 20px 0;
+  user-select: text;
+
+  .room-detail-empty {
+    text-align: center;
+    color: var(--text-color-secondary);
+    padding: 40px 0;
+  }
+
+  .room-detail-content {
+    .detail-item {
+      display: flex;
+      margin-bottom: 20px;
+
+      .detail-label {
+        min-width: 80px;
+        color: var(--text-color-secondary);
+        font-size: 14px;
+        line-height: 22px;
+      }
+
+      .detail-value {
+        flex: 1;
+        color: var(--text-color-primary);
+        font-size: 14px;
+        line-height: 22px;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+
+        .copy-icon {
+          cursor: pointer;
+          color: var(--text-color-link);
+
+          &:hover {
+            color: var(--text-color-link-hover);
+          }
+        }
+
+        .status-badge {
+          padding: 2px 8px;
+          border-radius: 4px;
+          font-size: 12px;
+          background-color: var(--background-color-secondary);
+          color: var(--text-color-secondary);
+
+          &.running {
+            background-color: var(--background-color-success);
+            color: var(--text-color-success);
+          }
+        }
+      }
+    }
+
+    .attendees-loading {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      color: var(--text-color-secondary);
+
+      .loading-icon {
+        animation: rotate 1s linear infinite;
+      }
+
+      @keyframes rotate {
+        from {
+          transform: rotate(0deg);
+        }
+        to {
+          transform: rotate(360deg);
+        }
+      }
+    }
+
+    .attendees-list {
+      display: flex;
+      flex-direction: row;
+      gap: 8px;
+      max-height: 66px; // 3 lines * 22px line-height
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-line-clamp: 3;
+      -webkit-box-orient: vertical;
+      word-break: break-all;
+
+      .attendee-item {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+
+        .attendee-name {
+          font-size: 14px;
+        }
+      }
+    }
+
+    .no-attendees {
+      color: var(--text-color-secondary);
+      font-style: italic;
+    }
+  }
+}
+</style>

package/src/components/ScheduleRoomPanel/RoomEdit.vue

@@ -0,0 +1,473 @@
+<template>
+  <div class="room-edit">
+    <div class="edit-form">
+      <div class="form-item">
+        <div class="form-label">
+          {{ t('Room Name') }}
+        </div>
+        <TUIInput
+          v-model="internalForm.roomName"
+          :placeholder="t('please enter the room name')"
+          class="form-input"
+        />
+      </div>
+
+      <div class="form-item">
+        <div class="form-label">
+          {{ t('Starting time') }}
+        </div>
+        <div class="datetime-group">
+          <Datepicker v-model="internalForm.startDate" />
+          <Timepicker v-model="internalForm.startTime" />
+        </div>
+      </div>
+
+      <div class="form-item">
+        <div class="form-label">
+          {{ t('Room duration') }}
+        </div>
+        <DurationSelector v-model="internalForm.duration" />
+      </div>
+
+      <div class="form-item">
+        <div class="form-label">
+          {{ t('Time Zone') }}
+        </div>
+        <TimezoneSelector v-model="internalForm.timezone" />
+      </div>
+
+      <div :class="['form-item', { 'flex-start': internalForm.selectedUserList?.length > 0 }]">
+        <div class="form-label">
+          {{ t('Participants') }}
+        </div>
+        <div class="form-participants">
+          <TUIInput
+            v-model="searchUserId"
+            :search="handleUserSearchChange"
+            :select="handleSearchResultItemClick"
+            :placeholder="t('Please enter participant names')"
+            :emptyText="t('No relevant members found')"
+          >
+            <template #suffix>
+              <IconManageMember @click="userPickerVisible = true" />
+            </template>
+            <template #searchResultItem="{ data }">
+              <div class="search-result-item">
+                <Avatar
+                  class="search-result-item-avatar"
+                  :size="20"
+                  :src="data.avatarUrl"
+                />
+                <p class="search-result-item-name" :title="data.label">
+                  {{ data.label }}
+                </p>
+              </div>
+            </template>
+          </TUIInput>
+          <div v-if="internalForm.selectedUserList?.length > 0" class="form-attendees">
+            <span
+              v-for="user in internalForm.selectedUserList"
+              :key="user.key"
+              class="form-attendees-item"
+            >
+              <Avatar
+                class="form-attendees-item-avatar"
+                :src="user.avatarUrl"
+                :size="20"
+              />
+              <p class="form-attendees-item-name" :title="user.label">
+                {{ user.label }}
+              </p>
+              <IconClose1 class="form-attendees-item-remove" @click="removeSelectUser(user)" />
+            </span>
+            <span class="form-attendees-item form-attendees-count">
+              {{ `${internalForm.selectedUserList?.length || 0} ${t('people')}` }}
+            </span>
+          </div>
+        </div>
+        <TUIDialog
+          v-model:visible="userPickerVisible"
+          :cancel-text="t('Cancel')"
+          :confirm-text="t('Confirm')"
+          :title="t('Contacts')"
+        >
+          <UserPicker
+            ref="userPickerRef"
+            class="room-user-picker"
+            :data-source="userPickerData"
+            :defaultSelectedItems="internalForm.selectedUserList"
+            display-mode="list"
+          />
+          <template #footer>
+            <div class="user-picker-footer">
+              <TUIButton @click="userPickerVisible = false">
+                {{ t('Cancel') }}
+              </TUIButton>
+              <TUIButton type="primary" @click="handleUserPickerConfirm">
+                {{ t('Confirm') }}
+              </TUIButton>
+            </div>
+          </template>
+        </TUIDialog>
+      </div>
+    </div>
+
+    <div class="form-actions">
+      <TUIButton
+        type="default"
+        @click="handleCancel"
+      >
+        {{ t('Cancel') }}
+      </TUIButton>
+      <TUIButton
+        type="primary"
+        @click="handleSave"
+      >
+        {{ t('Save') }}
+      </TUIButton>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch, computed } from 'vue';
+import {
+  TUIButton,
+  TUIInput,
+  TUIToast,
+  TUIDialog,
+  IconManageMember,
+  IconClose1,
+  useUIKit,
+} from '@tencentcloud/uikit-base-component-vue3';
+import { useContactListState } from '../../states/ContactListState';
+import { Avatar } from '../Avatar';
+import { UserPicker } from '../UserPicker';
+import Datepicker from './Datepicker.vue';
+import DurationSelector from './DurationSelector.vue';
+import Timepicker from './Timepicker.vue';
+import TimezoneSelector from './TimezoneSelector.vue';
+import { convertTimezoneToUTC, convertTimeBetweenTimezones } from './utils';
+import type { EditFormData } from './type';
+import type { RoomInfo } from '../../types';
+import type { UserPickerDataSource, UserPickerRow } from '../UserPicker';
+
+const { t } = useUIKit();
+
+interface Props {
+  roomInfo: RoomInfo | null;
+}
+
+interface Emits {
+  (e: 'cancel'): void;
+  (e: 'save', data: EditFormData): void;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits<Emits>();
+
+const internalForm = ref({
+  roomName: '',
+  startDate: 0,
+  startTime: 0,
+  duration: 1800,
+  timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+  selectedUserList: [] as UserPickerDataSource,
+});
+
+const { friendList } = useContactListState();
+const userPickerRef = ref();
+const userPickerVisible = ref(false);
+const searchUserId = ref('');
+
+const userPickerData = computed(() =>
+  friendList.value.map(item => ({
+    key: item.userID,
+    label: item.nick,
+    avatarUrl: item.avatar,
+    extraData: item,
+  })),
+);
+
+const scheduleStartTime = computed(() => {
+  const dateObj = new Date(internalForm.value.startDate * 1000);
+  const timeObj = new Date(internalForm.value.startTime * 1000);
+
+  return convertTimezoneToUTC(
+    dateObj.getFullYear(),
+    dateObj.getMonth(),
+    dateObj.getDate(),
+    timeObj.getHours(),
+    timeObj.getMinutes(),
+    internalForm.value.timezone,
+  );
+});
+
+const scheduleEndTime = computed(() => scheduleStartTime.value + internalForm.value.duration);
+
+const initializeForm = () => {
+  if (!props.roomInfo) {
+    return;
+  }
+
+  const duration = props.roomInfo.scheduledEndTime && props.roomInfo.scheduledStartTime
+    ? props.roomInfo.scheduledEndTime - props.roomInfo.scheduledStartTime
+    : 1800;
+
+  const selectedUserList = props.roomInfo.scheduleAttendees?.map(attendee => ({
+    key: attendee.userId,
+    label: attendee.userName || attendee.userId,
+    avatarUrl: attendee.avatarUrl || '',
+    extraData: attendee,
+  })) || [];
+
+  const startDateTime = new Date((props.roomInfo.scheduledStartTime || 0) * 1000);
+  const startDate = new Date(startDateTime);
+  startDate.setHours(0, 0, 0, 0);
+
+  internalForm.value = {
+    roomName: props.roomInfo.roomName || '',
+    startDate: Math.floor(startDate.getTime() / 1000),
+    startTime: Math.floor(startDateTime.getTime() / 1000),
+    duration,
+    timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+    selectedUserList,
+  };
+};
+
+watch(() => props.roomInfo, () => {
+  initializeForm();
+}, { immediate: true });
+
+watch(() => internalForm.value.timezone, (newTimezone, oldTimezone) => {
+  if (newTimezone && oldTimezone && newTimezone !== oldTimezone) {
+    const convertedTime = convertTimeBetweenTimezones(
+      internalForm.value.startDate,
+      internalForm.value.startTime,
+      oldTimezone,
+      newTimezone,
+    );
+
+    internalForm.value.startDate = convertedTime.startDate;
+    internalForm.value.startTime = convertedTime.startTime;
+  }
+});
+
+const validateForm = (): boolean => {
+  if (!internalForm.value.roomName.trim()) {
+    TUIToast.error({ message: t('The room name cannot be empty') });
+    return false;
+  }
+
+  const currentUtcTimestamp = Math.floor(Date.now() / 1000);
+
+  if (scheduleStartTime.value <= currentUtcTimestamp) {
+    TUIToast.error({ message: t('The start time cannot be earlier than the current time') });
+    return false;
+  }
+
+  return true;
+};
+
+const handleUserSearchChange = (value: string) => userPickerData.value
+  .filter((item) => {
+    // Filter by search value
+    if (!item.label.includes(value)) {
+      return false;
+    }
+    // Filter out already selected users
+    return !internalForm.value.selectedUserList.some(selected => selected.key === item.key);
+  })
+  .map(item => ({
+    label: item.label,
+    value: item.key,
+    avatarUrl: item.extraData.avatar,
+    extraData: item.extraData,
+  }));
+
+const handleSearchResultItemClick = (data: { label?: string; value: string | number; [key: string]: unknown }) => {
+  // Type guard to ensure required properties exist
+  const avatarUrl = data.avatarUrl as string | undefined;
+  const extraData = data.extraData as unknown;
+  if (!data.label || !data.value || !extraData) {
+    return;
+  }
+
+  const userRow: UserPickerRow = {
+    key: String(data.value),
+    label: data.label,
+    avatarUrl,
+    extraData,
+  };
+
+  if (internalForm.value.selectedUserList.some(item => item.key === userRow.key)) {
+    return;
+  }
+
+  internalForm.value.selectedUserList = [...internalForm.value.selectedUserList, userRow];
+  searchUserId.value = '';
+};
+
+const handleUserPickerConfirm = () => {
+  internalForm.value.selectedUserList = userPickerRef.value.getSelectedItems();
+  userPickerVisible.value = false;
+};
+
+const removeSelectUser = (user: UserPickerRow) => {
+  internalForm.value.selectedUserList = internalForm.value.selectedUserList.filter(item => item.key !== user.key);
+};
+
+const handleCancel = () => {
+  emit('cancel');
+};
+
+const handleSave = () => {
+  if (!validateForm()) {
+    return;
+  }
+
+  const saveData: EditFormData = {
+    roomId: props.roomInfo?.roomId || '',
+    roomName: internalForm.value.roomName,
+    scheduleStartTime: scheduleStartTime.value,
+    scheduleEndTime: scheduleEndTime.value,
+    scheduleAttendees: internalForm.value.selectedUserList.map(user => user.key),
+  };
+
+  emit('save', saveData);
+};
+</script>
+
+<style lang="scss" scoped>
+.room-edit {
+    width: 100%;
+
+  .edit-form {
+    .form-item {
+      display: flex;
+      align-items: center;
+      margin-bottom: 20px;
+
+      .form-label {
+        min-width: 80px;
+        color: var(--text-color-secondary);
+        font-size: 14px;
+        margin-right: 16px;
+      }
+
+      .form-input,
+      .form-select {
+        width: 100%;
+        flex: 1;
+      }
+
+      .datetime-group {
+        display: flex;
+        gap: 8px;
+        width: 100%;
+        flex: 1;
+      }
+
+      &.flex-start {
+        align-items: flex-start;
+      }
+    }
+  }
+
+  .form-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 12px;
+    margin-top: 32px;
+    padding-top: 20px;
+    border-top: 1px solid var(--border-color-light);
+  }
+}
+
+.room-user-picker {
+  height: 400px;
+  width: 600px;
+}
+
+.user-picker-footer {
+  display: flex;
+  justify-content: center;
+  gap: 12px;
+}
+
+.form-participants {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.search-result-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+
+  &-avatar {
+    width: 20px;
+    height: 20px;
+    flex-shrink: 0;
+  }
+
+  &-name {
+    flex: 1;
+    margin: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
+.form-attendees {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 2px;
+  max-height: 100px;
+  margin-top: 6px;
+  overflow: hidden;
+
+  &:hover {
+    overflow: auto;
+  }
+
+  &-item {
+    box-sizing: border-box;
+    display: flex;
+    flex-basis: calc(33.3333% - 2px);
+    align-items: center;
+    padding: 2px 8px;
+    overflow: hidden;
+    background-color: var(--bg-color-bubble-own);
+    border-radius: 4px;
+
+    &-avatar {
+      width: 20px;
+      height: 20px;
+      margin-right: 6px;
+      flex-shrink: 0;
+    }
+
+    &-name {
+      flex: 1;
+      margin: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    &-remove {
+      margin-left: auto;
+      color: var(--uikit-color-gray-7);
+      cursor: pointer;
+      flex-shrink: 0;
+    }
+  }
+
+  &-count {
+    flex-basis: content;
+  }
+}
+</style>