tuikit-atomicx-vue3 4.4.0 → 4.5.0

package/dist/components/ScheduleRoomPanel/ScheduleRoomPanel.js

@@ -0,0 +1,385 @@
+import { defineComponent as te, ref as p, computed as T, watch as k, onMounted as ae, createElementBlock as h, openBlock as f, createElementVNode as l, createVNode as u, toDisplayString as i, unref as o, normalizeClass as se, createCommentVNode as R, withCtx as d, Fragment as le, renderList as oe, createTextVNode as b, createBlock as re, withDirectives as y, vModelCheckbox as w } from "vue";
+import { TUIErrorCode as ne } from "@tencentcloud/tuiroom-engine-js";
+import { useUIKit as ie, TUIInput as C, IconManageMember as ue, IconClose1 as me, TUIDialog as ce, TUIButton as U, TUIToast as N } from "@tencentcloud/uikit-base-component-vue3";
+import { useLoginState as de } from "../../states/LoginState.js";
+import { useRoomState as ve } from "../../states/RoomState/index.js";
+import A from "../Avatar/Avatar.js";
+import { UserPicker as pe } from "../UserPicker/index.js";
+import fe from "./Datepicker.js";
+import { _ as he } from "../../DurationSelector.vue_vue_type_script_setup_true_lang-RndH6NtJ.js";
+import be from "./Timepicker.js";
+import { _ as Ue } from "../../TimezoneSelector.vue_vue_type_script_setup_true_lang-C-lovW-l.js";
+import { convertTimezoneToUTC as _e, convertTimeBetweenTimezones as De, getCurrentTimeInTimezone as ge, getNext15MinuteInterval as Te } from "./utils.js";
+import { useContactListState as ke } from "../../states/ContactListState/ContactListState.js";
+import { useRoomModal as ye } from "../UIKitModal/useRoomModal/index.js";
+import { _ as we } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
+const Ce = { class: "schedule-room-panel" }, xe = { class: "panel-content" }, Ie = { class: "form" }, Me = { class: "form-item" }, Ve = { class: "label" }, Se = { class: "form-item" }, Pe = { class: "label" }, Re = { class: "datetime-group" }, Ne = { class: "form-item" }, Ae = { class: "label" }, Le = { class: "form-item" }, Fe = { class: "label" }, ze = { class: "label" }, Ee = { class: "form-participants" }, Oe = { class: "search-result-item" }, $e = ["title"], Be = {
+  key: 0,
+  class: "form-attendees"
+}, He = ["title"], Ze = { class: "form-attendees-item form-attendees-count" }, je = { class: "user-picker-footer" }, Xe = { class: "form-item flex-start" }, Ye = { class: "label" }, Ke = { class: "security-group" }, We = { class: "checkbox-item" }, qe = { class: "form-item flex-start" }, Ge = { class: "label" }, Je = { class: "member-group" }, Qe = { class: "checkbox-item" }, et = { class: "checkbox-item" }, tt = { class: "panel-footer" }, at = /* @__PURE__ */ te({
+  __name: "ScheduleRoomPanel",
+  props: {
+    visible: { type: Boolean, default: !1 },
+    userName: { default: "" }
+  },
+  emits: ["cancel", "confirm"],
+  setup(L, { emit: F }) {
+    const z = L, x = F, { t: r } = ie(), { loginUserInfo: E } = de(), { scheduleRoom: O, getRoomInfo: $ } = ve(), { friendList: B } = ke(), { handleErrorWithModal: H } = ye(), t = p({
+      roomName: "",
+      startDate: 0,
+      startTime: 0,
+      duration: 1800,
+      timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+      hasPassword: !1,
+      password: "",
+      isCameraDisableForAllUser: !1,
+      isMicrophoneDisableForAllUser: !1,
+      scheduleAttendees: "",
+      selectedUserList: []
+    }), I = p(), v = p(!1), _ = p(""), D = p(!1), M = T(
+      () => B.value.map((a) => ({
+        key: a.userID,
+        label: a.nick,
+        avatarUrl: a.avatar,
+        extraData: a
+      }))
+    ), g = T(() => {
+      const a = new Date(t.value.startDate * 1e3), e = new Date(t.value.startTime * 1e3);
+      return _e(
+        a.getFullYear(),
+        a.getMonth(),
+        a.getDate(),
+        e.getHours(),
+        e.getMinutes(),
+        t.value.timezone
+      );
+    }), Z = T(() => g.value + t.value.duration), j = () => {
+      const { roomName: a, hasPassword: e, password: n } = t.value;
+      if (!a.trim())
+        return r("The room name cannot be empty");
+      const m = /* @__PURE__ */ new Date(), c = new Date(Date.UTC(
+        m.getUTCFullYear(),
+        m.getUTCMonth(),
+        m.getUTCDate(),
+        m.getUTCHours(),
+        m.getUTCMinutes(),
+        0
+      )), s = Math.floor(c.getTime() / 1e3);
+      if (g.value <= s)
+        return r("The start time cannot be earlier than the current time");
+      const P = 15 * 60, ee = 24 * 3600;
+      if (t.value.duration < P)
+        return r("Meeting duration must be at least 15 minutes");
+      if (t.value.duration > ee)
+        return r("Meeting duration cannot exceed 24 hours");
+      if (e) {
+        if (!n)
+          return r("Password cannot be empty");
+        if (!/^\d{6}$/.test(n))
+          return r("Password must be 6 digits");
+      }
+      return null;
+    }, V = () => {
+      var c;
+      const a = t.value.timezone || Intl.DateTimeFormat().resolvedOptions().timeZone, e = ge(a), n = new Date(e);
+      n.setHours(0, 0, 0, 0);
+      const m = Te(e);
+      t.value = {
+        roomName: `${(c = E.value) == null ? void 0 : c.userName}${r("Temporary Meeting")}`,
+        startDate: Math.floor(n.getTime() / 1e3),
+        startTime: Math.floor(m.getTime() / 1e3),
+        duration: 1800,
+        timezone: a,
+        hasPassword: !1,
+        password: "",
+        isCameraDisableForAllUser: !1,
+        isMicrophoneDisableForAllUser: !1,
+        scheduleAttendees: "",
+        selectedUserList: []
+      };
+    }, X = async (a) => {
+      try {
+        await $({ roomId: a });
+      } catch (e) {
+        if (e.code === ne.ERR_ROOM_ID_NOT_EXIST)
+          return !1;
+      }
+      return !0;
+    }, S = async () => {
+      const a = String(Math.floor(Math.random() * 9e5) + 1e5);
+      return await X(a) ? S() : a;
+    }, Y = async () => {
+      const a = j();
+      if (a) {
+        N.error({ message: a });
+        return;
+      }
+      D.value = !0;
+      try {
+        const e = await S(), n = {
+          roomName: t.value.roomName,
+          scheduleStartTime: g.value,
+          scheduleEndTime: Z.value,
+          scheduleAttendees: t.value.selectedUserList.map((m) => m.key),
+          password: t.value.hasPassword ? t.value.password : "",
+          isAllMicrophoneDisabled: t.value.isMicrophoneDisableForAllUser,
+          isAllCameraDisabled: t.value.isCameraDisableForAllUser
+        };
+        await O({ roomId: e, options: n }), x("confirm", e, n);
+      } catch (e) {
+        console.error("Schedule meeting failed:", e), H(e), N.error({ message: r("Schedule meeting failed") });
+      } finally {
+        D.value = !1;
+      }
+    }, K = () => x("cancel"), W = (a) => M.value.filter((e) => e.label.includes(a) ? !t.value.selectedUserList.some((n) => n.key === e.key) : !1).map((e) => ({
+      label: e.label,
+      value: e.key,
+      avatarUrl: e.extraData.avatar,
+      extraData: e.extraData
+    })), q = (a) => {
+      const e = a.avatarUrl, n = a.extraData;
+      if (!a.label || !a.value || !n)
+        return;
+      const m = {
+        key: String(a.value),
+        label: a.label,
+        avatarUrl: e,
+        extraData: n
+      };
+      t.value.selectedUserList.some((c) => c.key === m.key) || (t.value.selectedUserList = [...t.value.selectedUserList, m], _.value = "");
+    }, G = () => {
+      const a = I.value.getSelectedItems();
+      t.value.selectedUserList = a.map((e) => ({
+        key: e.key,
+        label: e.label,
+        avatarUrl: e.avatarUrl,
+        extraData: e.extraData
+      })), v.value = !1;
+    }, J = (a) => {
+      t.value.selectedUserList = t.value.selectedUserList.filter((e) => e.key !== a.key);
+    }, Q = () => Math.floor(1e5 + Math.random() * 9e5).toString();
+    return k(() => t.value.hasPassword, (a) => {
+      a ? t.value.password || (t.value.password = Q()) : t.value.password = "";
+    }), k(() => t.value.timezone, (a, e) => {
+      if (a && e && a !== e) {
+        const n = De(
+          t.value.startDate,
+          t.value.startTime,
+          e,
+          a
+        );
+        t.value.startDate = n.startDate, t.value.startTime = n.startTime;
+      }
+    }), ae(V), k(() => z.visible, (a) => {
+      a && V();
+    }), (a, e) => {
+      var n, m, c;
+      return f(), h("div", Ce, [
+        l("div", xe, [
+          l("form", Ie, [
+            l("div", Me, [
+              l("label", Ve, i(o(r)("Room Name")), 1),
+              u(o(C), {
+                modelValue: t.value.roomName,
+                "onUpdate:modelValue": e[0] || (e[0] = (s) => t.value.roomName = s),
+                "max-length": 25,
+                placeholder: o(r)("please enter the room name")
+              }, null, 8, ["modelValue", "placeholder"])
+            ]),
+            l("div", Se, [
+              l("label", Pe, i(o(r)("Starting time")), 1),
+              l("div", Re, [
+                u(fe, {
+                  modelValue: t.value.startDate,
+                  "onUpdate:modelValue": e[1] || (e[1] = (s) => t.value.startDate = s)
+                }, null, 8, ["modelValue"]),
+                u(be, {
+                  modelValue: t.value.startTime,
+                  "onUpdate:modelValue": e[2] || (e[2] = (s) => t.value.startTime = s)
+                }, null, 8, ["modelValue"])
+              ])
+            ]),
+            l("div", Ne, [
+              l("label", Ae, i(o(r)("Room duration")), 1),
+              u(he, {
+                modelValue: t.value.duration,
+                "onUpdate:modelValue": e[3] || (e[3] = (s) => t.value.duration = s)
+              }, null, 8, ["modelValue"])
+            ]),
+            l("div", Le, [
+              l("label", Fe, i(o(r)("Time Zone")), 1),
+              u(Ue, {
+                modelValue: t.value.timezone,
+                "onUpdate:modelValue": e[4] || (e[4] = (s) => t.value.timezone = s)
+              }, null, 8, ["modelValue"])
+            ]),
+            l("div", {
+              class: se(["form-item", { "flex-start": ((n = t.value.selectedUserList) == null ? void 0 : n.length) > 0 }])
+            }, [
+              l("label", ze, i(o(r)("Participants")), 1),
+              l("div", Ee, [
+                u(o(C), {
+                  modelValue: _.value,
+                  "onUpdate:modelValue": e[6] || (e[6] = (s) => _.value = s),
+                  search: W,
+                  select: q,
+                  placeholder: o(r)("Please enter participant names"),
+                  emptyText: o(r)("No relevant members found")
+                }, {
+                  suffix: d(() => [
+                    u(o(ue), {
+                      onClick: e[5] || (e[5] = (s) => v.value = !0)
+                    })
+                  ]),
+                  searchResultItem: d(({ data: s }) => [
+                    l("div", Oe, [
+                      u(o(A), {
+                        class: "search-result-item-avatar",
+                        size: 20,
+                        src: s.avatarUrl
+                      }, null, 8, ["src"]),
+                      l("p", {
+                        class: "search-result-item-name",
+                        title: s.label
+                      }, i(s.label), 9, $e)
+                    ])
+                  ]),
+                  _: 1
+                }, 8, ["modelValue", "placeholder", "emptyText"]),
+                ((m = t.value.selectedUserList) == null ? void 0 : m.length) > 0 ? (f(), h("div", Be, [
+                  (f(!0), h(le, null, oe(t.value.selectedUserList, (s) => (f(), h("span", {
+                    key: s.key,
+                    class: "form-attendees-item"
+                  }, [
+                    u(o(A), {
+                      class: "form-attendees-item-avatar",
+                      size: 20,
+                      src: s.avatarUrl
+                    }, null, 8, ["src"]),
+                    l("p", {
+                      class: "form-attendees-item-name",
+                      title: s.label
+                    }, i(s.label), 9, He),
+                    u(o(me), {
+                      class: "form-attendees-item-remove",
+                      onClick: (P) => J(s)
+                    }, null, 8, ["onClick"])
+                  ]))), 128)),
+                  l("span", Ze, i(`${((c = t.value.selectedUserList) == null ? void 0 : c.length) || 0} ${o(r)("people")}`), 1)
+                ])) : R("", !0)
+              ]),
+              u(o(ce), {
+                visible: v.value,
+                "onUpdate:visible": e[8] || (e[8] = (s) => v.value = s),
+                title: o(r)("Contacts"),
+                "cancel-text": o(r)("Cancel"),
+                "confirm-text": o(r)("Confirm")
+              }, {
+                footer: d(() => [
+                  l("div", je, [
+                    u(o(U), {
+                      onClick: e[7] || (e[7] = (s) => v.value = !1)
+                    }, {
+                      default: d(() => [
+                        b(i(o(r)("Cancel")), 1)
+                      ]),
+                      _: 1
+                    }),
+                    u(o(U), {
+                      type: "primary",
+                      onClick: G
+                    }, {
+                      default: d(() => [
+                        b(i(o(r)("Confirm")), 1)
+                      ]),
+                      _: 1
+                    })
+                  ])
+                ]),
+                default: d(() => [
+                  u(o(pe), {
+                    ref_key: "userPickerRef",
+                    ref: I,
+                    class: "room-user-picker",
+                    "data-source": M.value,
+                    defaultSelectedItems: t.value.selectedUserList,
+                    "display-mode": "list"
+                  }, null, 8, ["data-source", "defaultSelectedItems"])
+                ]),
+                _: 1
+              }, 8, ["visible", "title", "cancel-text", "confirm-text"])
+            ], 2),
+            l("div", Xe, [
+              l("label", Ye, i(o(r)("Security")), 1),
+              l("div", Ke, [
+                l("label", We, [
+                  y(l("input", {
+                    "onUpdate:modelValue": e[9] || (e[9] = (s) => t.value.hasPassword = s),
+                    type: "checkbox"
+                  }, null, 512), [
+                    [w, t.value.hasPassword]
+                  ]),
+                  l("span", null, i(o(r)("Room Password")), 1)
+                ]),
+                t.value.hasPassword ? (f(), re(o(C), {
+                  key: 0,
+                  modelValue: t.value.password,
+                  "onUpdate:modelValue": e[10] || (e[10] = (s) => t.value.password = s),
+                  "max-length": 6,
+                  type: "number",
+                  showPassword: "",
+                  placeholder: o(r)("Enter 6-digit password"),
+                  class: "password-input"
+                }, null, 8, ["modelValue", "placeholder"])) : R("", !0)
+              ])
+            ]),
+            l("div", qe, [
+              l("label", Ge, i(o(r)("Member management")), 1),
+              l("div", Je, [
+                l("label", Qe, [
+                  y(l("input", {
+                    "onUpdate:modelValue": e[11] || (e[11] = (s) => t.value.isMicrophoneDisableForAllUser = s),
+                    type: "checkbox"
+                  }, null, 512), [
+                    [w, t.value.isMicrophoneDisableForAllUser]
+                  ]),
+                  l("span", null, i(o(r)("Disable all audios")), 1)
+                ]),
+                l("label", et, [
+                  y(l("input", {
+                    "onUpdate:modelValue": e[12] || (e[12] = (s) => t.value.isCameraDisableForAllUser = s),
+                    type: "checkbox"
+                  }, null, 512), [
+                    [w, t.value.isCameraDisableForAllUser]
+                  ]),
+                  l("span", null, i(o(r)("Disable all videos")), 1)
+                ])
+              ])
+            ])
+          ])
+        ]),
+        l("div", tt, [
+          u(o(U), { onClick: K }, {
+            default: d(() => [
+              b(i(o(r)("Cancel")), 1)
+            ]),
+            _: 1
+          }),
+          u(o(U), {
+            type: "primary",
+            loading: D.value,
+            onClick: Y
+          }, {
+            default: d(() => [
+              b(i(o(r)("Schedule")), 1)
+            ]),
+            _: 1
+          }, 8, ["loading"])
+        ])
+      ]);
+    };
+  }
+}), Ut = /* @__PURE__ */ we(at, [["__scopeId", "data-v-05ebded9"]]);
+export {
+  Ut as default
+};

package/dist/components/ScheduleRoomPanel/ScheduleRoomPanel.vue.d.ts

@@ -0,0 +1,40 @@
+import { ScheduleRoomOptions } from '../../types/room';
+
+interface Props {
+    visible?: boolean;
+    userName?: string;
+}
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
+    visible: boolean;
+    userName: string;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    cancel: () => void;
+    confirm: (roomId: string, scheduleOptions: ScheduleRoomOptions) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
+    visible: boolean;
+    userName: string;
+}>>> & Readonly<{
+    onCancel?: (() => any) | undefined;
+    onConfirm?: ((roomId: string, scheduleOptions: ScheduleRoomOptions) => any) | undefined;
+}>, {
+    visible: boolean;
+    userName: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};