feat: create rooms
This commit is contained in:
SD
parent
5b8ba1b5c4
commit
c0feea48e5
|
|
@ -0,0 +1,42 @@
|
|||
'use client'
|
||||
|
||||
import { useCallback, useEffect, useState } from 'react';
|
||||
import { useLocalStorage } from '../../hooks/useLocalStorage';
|
||||
import { AUTH_TOKEN_KEY } from '../../constants/common';
|
||||
import { Room } from '../../types/rooms';
|
||||
import { getRoomDetails } from '../rooms';
|
||||
|
||||
export const useRoomDetails = (locale: string, roomId: number) => {
|
||||
const [jwt] = useLocalStorage(AUTH_TOKEN_KEY, '');
|
||||
const [room, setRoom] = useState<Room>();
|
||||
const [errorData, setErrorData] = useState<any>();
|
||||
const [loading, setLoading] = useState<boolean>(false);
|
||||
|
||||
const fetchData = useCallback(() => {
|
||||
setLoading(true);
|
||||
setErrorData(undefined);
|
||||
setRoom(undefined);
|
||||
|
||||
getRoomDetails(locale, jwt, roomId)
|
||||
.then((room) => {
|
||||
setRoom(room);
|
||||
})
|
||||
.catch((err) => {
|
||||
setErrorData(err);
|
||||
})
|
||||
.finally(() => {
|
||||
setLoading(false);
|
||||
})
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
fetchData();
|
||||
}, []);
|
||||
|
||||
return {
|
||||
fetchData,
|
||||
loading,
|
||||
room,
|
||||
errorData
|
||||
};
|
||||
};
|
||||
|
|
@ -0,0 +1,109 @@
|
|||
import { apiRequest } from './helpers';
|
||||
import {GetUsersForRooms, Room, RoomEdit, RoomEditDTO} from '../types/rooms';
|
||||
|
||||
export const getUpcomingRooms = (locale: string, token: string): Promise<Room[]> => apiRequest({
|
||||
url: '/home/upcomingsessionsall',
|
||||
method: 'post',
|
||||
data: {
|
||||
sessionType: 'room'
|
||||
},
|
||||
locale,
|
||||
token
|
||||
});
|
||||
|
||||
export const getRecentRooms = (locale: string, token: string): Promise<Room[]> => apiRequest({
|
||||
url: '/home/historicalmeetings',
|
||||
method: 'post',
|
||||
data: {
|
||||
sessionType: 'room'
|
||||
},
|
||||
locale,
|
||||
token
|
||||
});
|
||||
|
||||
export const getRoomDetails = (locale: string, token: string, id: number): Promise<Room> => apiRequest({
|
||||
url: '/home/room',
|
||||
method: 'post',
|
||||
data: { id },
|
||||
locale,
|
||||
token
|
||||
});
|
||||
|
||||
export const deleteRoomClient = (locale: string, token: string, data: { sessionId: number, clientUserId: number }): Promise<any> => apiRequest({
|
||||
url: '/home/deleteclientfromroom',
|
||||
method: 'post',
|
||||
data,
|
||||
locale,
|
||||
token
|
||||
});
|
||||
|
||||
export const deleteRoomSupervisor = (locale: string, token: string, data: { sessionId: number, supervisorUserId: number }): Promise<any> => apiRequest({
|
||||
url: '/home/deletesupervisorfromroom',
|
||||
method: 'post',
|
||||
data,
|
||||
locale,
|
||||
token
|
||||
});
|
||||
|
||||
export const becomeRoomClient = (locale: string, token: string, data: { sessionId: number, clientUserId: number }): Promise<any> => apiRequest({
|
||||
url: '/home/becomeroomclient',
|
||||
method: 'post',
|
||||
data,
|
||||
locale,
|
||||
token
|
||||
});
|
||||
|
||||
export const becomeRoomSupervisor = (locale: string, token: string, data: { sessionId: number, supervisorUserId: number }): Promise<any> => apiRequest({
|
||||
url: '/home/becomeroomsupervisor',
|
||||
method: 'post',
|
||||
data,
|
||||
locale,
|
||||
token
|
||||
});
|
||||
|
||||
export const getUsersList = (locale: string, token: string, data: { template: string }): Promise<GetUsersForRooms> => apiRequest({
|
||||
url: '/home/findusersforroom',
|
||||
method: 'post',
|
||||
data,
|
||||
locale,
|
||||
token
|
||||
});
|
||||
|
||||
export const addClient = (locale: string, token: string, data: { sessionId: number, clientUserId: number }): Promise<any> => apiRequest({
|
||||
url: '/home/addclienttoroom',
|
||||
method: 'post',
|
||||
data,
|
||||
locale,
|
||||
token
|
||||
});
|
||||
|
||||
export const addSupervisor = (locale: string, token: string, data: { sessionId: number, supervisorUserId: number }): Promise<any> => apiRequest({
|
||||
url: '/home/addsupervisortoroom',
|
||||
method: 'post',
|
||||
data,
|
||||
locale,
|
||||
token
|
||||
});
|
||||
|
||||
export const createRoom = (locale: string, token: string): Promise<any> => apiRequest({
|
||||
url: '/home/createroom',
|
||||
method: 'post',
|
||||
locale,
|
||||
token
|
||||
});
|
||||
|
||||
export const updateRoom = (locale: string, token: string, data: RoomEdit): Promise<any> => apiRequest({
|
||||
url: '/home/updateroom',
|
||||
method: 'post',
|
||||
data,
|
||||
locale,
|
||||
token
|
||||
});
|
||||
|
||||
export const getRoomById = (locale: string, token: string, id: number): Promise<RoomEditDTO> => apiRequest({
|
||||
url: '/home/getroomforedit',
|
||||
method: 'post',
|
||||
data: { id },
|
||||
locale,
|
||||
token
|
||||
});
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
import React, { Suspense } from 'react';
|
||||
import { unstable_setRequestLocale } from 'next-intl/server';
|
||||
import { notFound } from 'next/navigation';
|
||||
import { AccountMenu, RoomDetails, RoomsTabs } from '../../../../../../components/Account';
|
||||
import { RoomsType } from '../../../../../../types/rooms';
|
||||
|
||||
const ROOMS_ROUTES = [RoomsType.UPCOMING, RoomsType.RECENT, RoomsType.NEW];
|
||||
|
||||
export async function generateStaticParams({
|
||||
params: { locale },
|
||||
}: { params: { locale: string } }) {
|
||||
return [{ locale, slug: [RoomsType.UPCOMING] }];
|
||||
}
|
||||
|
||||
export default function RoomsDetailItem({ params: { locale, slug } }: { params: { locale: string, slug?: string[] } }) {
|
||||
unstable_setRequestLocale(locale);
|
||||
const roomType: string = slug?.length > 0 && slug[0] || '';
|
||||
const roomId: number | null = slug?.length > 1 && Number(slug[1]) || null;
|
||||
|
||||
if (!slug?.length || slug?.length > 2) {
|
||||
notFound();
|
||||
}
|
||||
|
||||
if (ROOMS_ROUTES.includes(roomType as RoomsType) && Number.isInteger(roomId)) {
|
||||
return (
|
||||
<Suspense fallback={<p>Loading...</p>}>
|
||||
<RoomDetails
|
||||
locale={locale}
|
||||
roomId={roomId || 0}
|
||||
activeType={roomType as RoomsType}
|
||||
/>
|
||||
</Suspense>
|
||||
);
|
||||
}
|
||||
|
||||
if (ROOMS_ROUTES.includes(roomType as RoomsType) && !Number.isInteger(roomId)) {
|
||||
return (
|
||||
<>
|
||||
<div className="col-xl-3 col-lg-4 d-none d-lg-block">
|
||||
<AccountMenu locale={locale}/>
|
||||
</div>
|
||||
<div className="col-xl-9 col-lg-8 ">
|
||||
<div className="page-account__inner">
|
||||
<Suspense fallback={<p>Loading...</p>}>
|
||||
<RoomsTabs
|
||||
locale={locale}
|
||||
activeTab={roomType as RoomsType}
|
||||
/>
|
||||
</Suspense>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
return notFound();
|
||||
};
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
'use client';
|
||||
|
||||
import { redirect } from 'next/navigation';
|
||||
import { useLocalStorage } from '../../../../../hooks/useLocalStorage';
|
||||
import { AUTH_TOKEN_KEY } from '../../../../../constants/common';
|
||||
import { RoomsType } from '../../../../../types/rooms';
|
||||
|
||||
export default function RoomsMainPage() {
|
||||
const [token] = useLocalStorage(AUTH_TOKEN_KEY, '');
|
||||
|
||||
return token ? redirect(`rooms/${RoomsType.UPCOMING}`) : null;
|
||||
};
|
||||
|
|
@ -37,7 +37,7 @@ export const Agora = ({ sessionId, secret, stopCalling, remoteUser }: AgoraProps
|
|||
};
|
||||
|
||||
return (
|
||||
<div className="b-agora__wrap">
|
||||
<div className="b-agora__wrap b-agora__wrap__single">
|
||||
<RemoteUserPanel calling={calling} user={remoteUser} />
|
||||
<div className="b-agora__panel">
|
||||
<MediaControl
|
||||
|
|
|
|||
|
|
@ -0,0 +1,54 @@
|
|||
'use client'
|
||||
|
||||
import { useJoin } from 'agora-rtc-react';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { MediaControl } from './view';
|
||||
import { UsersGroupPanel } from './components';
|
||||
|
||||
type AgoraProps = {
|
||||
roomId: number;
|
||||
secret?: string;
|
||||
stopCalling: () => void;
|
||||
};
|
||||
|
||||
export const AgoraGroup = ({ roomId, secret, stopCalling }: AgoraProps) => {
|
||||
const [calling, setCalling] = useState(false);
|
||||
const [micOn, setMic] = useState(false);
|
||||
const [cameraOn, setCamera] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setCalling(true);
|
||||
}, []);
|
||||
|
||||
useJoin(
|
||||
{
|
||||
appid: process.env.NEXT_PUBLIC_AGORA_APPID,
|
||||
channel: `${roomId}-${secret}`,
|
||||
token: null,
|
||||
},
|
||||
calling,
|
||||
);
|
||||
|
||||
const stop = () => {
|
||||
stopCalling();
|
||||
setCalling(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="b-agora__wrap">
|
||||
<UsersGroupPanel calling={calling} micOn={micOn} cameraOn={cameraOn}/>
|
||||
</div>
|
||||
<div className="b-agora__panel_group">
|
||||
<MediaControl
|
||||
calling={calling}
|
||||
cameraOn={cameraOn}
|
||||
micOn={micOn}
|
||||
setCalling={stop}
|
||||
setCamera={() => setCamera(a => !a)}
|
||||
setMic={() => setMic(a => !a)}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
import {
|
||||
type IRemoteVideoTrack,
|
||||
useIsConnected, useLocalCameraTrack, useLocalMicrophoneTrack, usePublish,
|
||||
useRemoteAudioTracks,
|
||||
useRemoteUsers,
|
||||
useRemoteVideoTracks
|
||||
} from 'agora-rtc-react';
|
||||
import { LocalUser } from './LocalUser';
|
||||
import { RemoteVideoPlayer } from './RemoteVideoPlayer';
|
||||
|
||||
type UsersGroupPanelProps = {
|
||||
calling: boolean;
|
||||
micOn: boolean;
|
||||
cameraOn: boolean;
|
||||
};
|
||||
|
||||
export const UsersGroupPanel = ({ calling, micOn, cameraOn }: UsersGroupPanelProps) => {
|
||||
const isConnected = useIsConnected();
|
||||
const remoteUsers = useRemoteUsers();
|
||||
const { localMicrophoneTrack } = useLocalMicrophoneTrack(micOn);
|
||||
const { localCameraTrack } = useLocalCameraTrack(cameraOn);
|
||||
const { audioTracks } = useRemoteAudioTracks(remoteUsers);
|
||||
|
||||
usePublish([localMicrophoneTrack, localCameraTrack]);
|
||||
audioTracks.map(track => track.play());
|
||||
|
||||
return calling && isConnected && remoteUsers ? (
|
||||
<div className={`b-agora__remote_groups gr-${remoteUsers.length + 1}`}>
|
||||
<div>
|
||||
<LocalUser
|
||||
audioTrack={localMicrophoneTrack}
|
||||
cameraOn={cameraOn}
|
||||
micOn={micOn}
|
||||
videoTrack={localCameraTrack}
|
||||
/>
|
||||
</div>
|
||||
{remoteUsers.length > 0 && remoteUsers.map(({ uid, videoTrack }) => (
|
||||
<div key={uid}>
|
||||
<RemoteVideoPlayer track={videoTrack} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : null;
|
||||
}
|
||||
|
|
@ -3,3 +3,4 @@ export * from './UserCover';
|
|||
export * from './RemoteUsers';
|
||||
export * from './LocalUserPanel';
|
||||
export * from './RemoteUserPanel';
|
||||
export * from './UsersGroupPanel';
|
||||
|
|
|
|||
|
|
@ -2,7 +2,9 @@
|
|||
|
||||
import AgoraRTC, { AgoraRTCProvider } from 'agora-rtc-react';
|
||||
import { Session } from '../../../types/sessions';
|
||||
import { Room } from '../../../types/rooms';
|
||||
import { Agora } from './Agora';
|
||||
import { AgoraGroup } from './AgoraGroup';
|
||||
|
||||
export const AgoraClient = ({ session, stopCalling, isCoach }: { session?: Session, stopCalling: () => void, isCoach: boolean }) => {
|
||||
const remoteUser = isCoach ? (session?.clients?.length ? session?.clients[0] : undefined) : session?.coach;
|
||||
|
|
@ -20,3 +22,17 @@ export const AgoraClient = ({ session, stopCalling, isCoach }: { session?: Sessi
|
|||
</AgoraRTCProvider>
|
||||
) : null;
|
||||
};
|
||||
|
||||
export const AgoraClientGroup = ({ room, stopCalling }: { room?: Room, stopCalling: () => void }) => {
|
||||
return room ? (
|
||||
<AgoraRTCProvider client={AgoraRTC.createClient({ mode: "rtc", codec: "vp8" })}>
|
||||
{room && (
|
||||
<AgoraGroup
|
||||
roomId={room.id}
|
||||
secret={room.secret}
|
||||
stopCalling={stopCalling}
|
||||
/>
|
||||
)}
|
||||
</AgoraRTCProvider>
|
||||
) : null;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -3,3 +3,4 @@
|
|||
export { AccountMenu } from './AccountMenu';
|
||||
export { ProfileSettings } from './ProfileSettings';
|
||||
export * from './sessions';
|
||||
export * from './rooms';
|
||||
|
|
|
|||
|
|
@ -0,0 +1,46 @@
|
|||
'use client'
|
||||
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { EditRoomForm } from './EditRoomForm';
|
||||
import debounce from 'lodash/debounce';
|
||||
import { createRoom } from '../../../actions/rooms';
|
||||
import { Loader } from '../../view/Loader';
|
||||
import { useRouter } from '../../../navigation';
|
||||
import { RoomsType } from '../../../types/rooms';
|
||||
|
||||
|
||||
export const CreateRoom = ({ locale, jwt }: { locale: string, jwt: string }) => {
|
||||
const [roomId, setRoomId] = useState<number>();
|
||||
const [loading, setLoading] = useState<boolean>(false);
|
||||
const router = useRouter();
|
||||
|
||||
const getRoom = debounce(() => {
|
||||
setRoomId(2556);
|
||||
// createRoom(locale, jwt)
|
||||
// .then((data) => {
|
||||
// setRoomId(data);
|
||||
// })
|
||||
// .finally(() => {
|
||||
// setLoading(false);
|
||||
// })
|
||||
}, 500);
|
||||
|
||||
useEffect(() => {
|
||||
// setLoading(true);
|
||||
getRoom();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Loader isLoading={loading}>
|
||||
{roomId && (
|
||||
<EditRoomForm
|
||||
roomId={roomId}
|
||||
locale={locale}
|
||||
jwt={jwt}
|
||||
mode="create"
|
||||
afterSubmit={() => router.push(`/account/rooms/${RoomsType.UPCOMING}`)}
|
||||
/>
|
||||
)}
|
||||
</Loader>
|
||||
)
|
||||
};
|
||||
|
|
@ -0,0 +1,220 @@
|
|||
import React, { useCallback, useEffect, useState } from 'react';
|
||||
import { Button, Form, Input, notification } from 'antd';
|
||||
import dayjs, { Dayjs } from 'dayjs';
|
||||
import { i18nText } from '../../../i18nKeys';
|
||||
import { Tag } from '../../../types/tags';
|
||||
import { Slot } from '../../../types/experts';
|
||||
import { RoomEdit, RoomEditDTO } from '../../../types/rooms';
|
||||
import { getRoomById, updateRoom } from '../../../actions/rooms';
|
||||
import { Loader } from '../../view/Loader';
|
||||
import { CustomInput } from '../../view/CustomInput';
|
||||
import { CustomSelect } from '../../view/CustomSelect';
|
||||
import { CustomSwitch } from '../../view/CustomSwitch';
|
||||
import { CustomMultiSelect } from '../../view/CustomMultiSelect';
|
||||
import { CustomDatePicker } from '../../view/CustomDatePicker';
|
||||
|
||||
type EditRoomFormProps = {
|
||||
roomId: number,
|
||||
locale: string,
|
||||
jwt: string,
|
||||
mode: 'create' | 'edit';
|
||||
afterSubmit?: () => void;
|
||||
}
|
||||
|
||||
type RoomFormState = {
|
||||
title?: string;
|
||||
description?: string;
|
||||
date?: Dayjs;
|
||||
maxCount?: number;
|
||||
startAt?: string;
|
||||
supervisor?: boolean;
|
||||
tags?: number[];
|
||||
};
|
||||
|
||||
export const EditRoomForm = ({ roomId, locale, jwt, mode, afterSubmit }: EditRoomFormProps) => {
|
||||
const [form] = Form.useForm<RoomFormState>();
|
||||
const [editingRoom, setEditingRoom] = useState<RoomEditDTO>();
|
||||
const dateValue = Form.useWatch('date', form);
|
||||
const [loading, setLoading] = useState<boolean>(false);
|
||||
const [fetchLoading, setFetchLoading] = useState<boolean>(false);
|
||||
|
||||
useEffect(() => {
|
||||
setFetchLoading(true);
|
||||
getRoomById(locale, jwt, roomId)
|
||||
.then((data) => {
|
||||
setEditingRoom(data);
|
||||
const { item } = data || {};
|
||||
|
||||
if (mode === 'edit' && item) {
|
||||
form.setFieldsValue({
|
||||
title: item.title,
|
||||
description: item.description,
|
||||
date: item?.scheduledStartAtUtc ? dayjs(item.scheduledStartAtUtc) : undefined,
|
||||
maxCount: item.maxClients,
|
||||
startAt: item?.scheduledStartAtUtc,
|
||||
supervisor: item.isNeedSupervisor,
|
||||
tags: item.tagIds || undefined
|
||||
})
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
setFetchLoading(false);
|
||||
})
|
||||
}, []);
|
||||
|
||||
const getAvailableSlots = useCallback((): string[] => {
|
||||
const dateList = new Set<string>();
|
||||
if (editingRoom?.availableSlots) {
|
||||
editingRoom.availableSlots.forEach(({ startTime }) => {
|
||||
const [date] = startTime.split('T');
|
||||
dateList.add(date);
|
||||
});
|
||||
|
||||
return Array.from(dateList);
|
||||
}
|
||||
|
||||
return [];
|
||||
}, [editingRoom?.availableSlots]);
|
||||
|
||||
const getTimeOptions = (slots?: Slot[], curDate?: Dayjs) => {
|
||||
const date = curDate ? curDate.utc().format('YYYY-MM-DD') : '';
|
||||
if (slots && slots?.length && date) {
|
||||
return slots.filter(({ startTime }) => startTime.indexOf(date) > -1)
|
||||
.map(({ startTime, endTime }) => ({ value: startTime, label: `${dayjs(startTime).format('HH:mm')} - ${dayjs(endTime).format('HH:mm')}` }));
|
||||
}
|
||||
|
||||
return [];
|
||||
}
|
||||
|
||||
const getTagsOptions = (tags?: Tag[]) => {
|
||||
if (tags) {
|
||||
return tags.map(({ id, name }) => ({ value: id, label: <span>{name}</span> })) || [];
|
||||
}
|
||||
|
||||
return [];
|
||||
}
|
||||
|
||||
const onSubmit = () => {
|
||||
setLoading(true);
|
||||
const { title, description, startAt, maxCount, tags, supervisor } = form.getFieldsValue();
|
||||
const result: RoomEdit = {
|
||||
...editingRoom,
|
||||
id: roomId,
|
||||
title,
|
||||
scheduledStartAtUtc: startAt,
|
||||
maxClients: maxCount,
|
||||
isNeedSupervisor: supervisor,
|
||||
tagIds: tags || []
|
||||
};
|
||||
|
||||
if (description) {
|
||||
result.description = description;
|
||||
}
|
||||
|
||||
updateRoom(locale, jwt, result)
|
||||
.then(() => {
|
||||
afterSubmit && afterSubmit();
|
||||
})
|
||||
.catch((err) => {
|
||||
notification.error({
|
||||
message: 'Error',
|
||||
description: err?.response?.data?.errMessage
|
||||
});
|
||||
})
|
||||
.finally(() => {
|
||||
setLoading(false)
|
||||
});
|
||||
}
|
||||
|
||||
const disabledDate = (current: Dayjs) => current && !getAvailableSlots().includes(current.format('YYYY-MM-DD'));
|
||||
|
||||
return (
|
||||
<Loader isLoading={fetchLoading}>
|
||||
<Form
|
||||
form={form}
|
||||
autoComplete="off"
|
||||
style={{ display: 'flex', gap: 16, flexDirection: 'column' }}
|
||||
onFinish={onSubmit}
|
||||
className="b-room-form"
|
||||
>
|
||||
<Form.Item
|
||||
name="title"
|
||||
rules={[{ required: true }]}
|
||||
noStyle
|
||||
>
|
||||
<CustomInput
|
||||
size="small"
|
||||
placeholder={i18nText('title', locale)}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item name="description">
|
||||
<Input.TextArea
|
||||
className="b-textarea"
|
||||
rows={4}
|
||||
maxLength={1000}
|
||||
placeholder={i18nText('description', locale)}
|
||||
/>
|
||||
</Form.Item>
|
||||
<div className="b-room-form__grid">
|
||||
<Form.Item
|
||||
name="date"
|
||||
rules={[{ required: true }]}
|
||||
noStyle
|
||||
>
|
||||
<CustomDatePicker
|
||||
locale={locale}
|
||||
label={i18nText('room.date', locale)}
|
||||
disabledDate={disabledDate}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name="startAt"
|
||||
rules={[{ required: true }]}
|
||||
noStyle
|
||||
>
|
||||
<CustomSelect
|
||||
label={i18nText('room.time', locale)}
|
||||
options={getTimeOptions(editingRoom?.availableSlots, dateValue)}
|
||||
disabled={!dateValue}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name="maxCount"
|
||||
rules={[{ required: true }]}
|
||||
noStyle
|
||||
>
|
||||
<CustomSelect
|
||||
label={i18nText('room.maxParticipants', locale)}
|
||||
options={Array.from({ length: 16 }).map((_, i) => ({ value: i+1, label: i+1 }))}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name="supervisor"
|
||||
valuePropName="checked"
|
||||
label={i18nText('room.presenceOfSupervisor', locale)}
|
||||
className="b-room-switch"
|
||||
>
|
||||
<CustomSwitch />
|
||||
</Form.Item>
|
||||
</div>
|
||||
<Form.Item
|
||||
name="tags"
|
||||
noStyle
|
||||
>
|
||||
<CustomMultiSelect
|
||||
label={i18nText('topics', locale)}
|
||||
options={getTagsOptions(editingRoom?.tags)}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Button
|
||||
className="card-detail__apply"
|
||||
htmlType="submit"
|
||||
loading={loading}
|
||||
disabled={loading}
|
||||
>
|
||||
{i18nText('room.save', locale)}
|
||||
</Button>
|
||||
</Form>
|
||||
</Loader>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
'use client'
|
||||
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { RoomsType } from '../../../types/rooms';
|
||||
import { useSessionTracking } from '../../../actions/hooks/useSessionTracking';
|
||||
import { AccountMenu } from '../AccountMenu';
|
||||
import { Loader } from '../../view/Loader';
|
||||
import { RoomDetailsContent } from './RoomDetailsContent';
|
||||
import { useRoomDetails } from '../../../actions/hooks/useRoomDetails';
|
||||
import { AgoraClientGroup } from '../agora';
|
||||
|
||||
type RoomDetailsProps = {
|
||||
locale: string;
|
||||
roomId: number;
|
||||
activeType: RoomsType;
|
||||
};
|
||||
|
||||
export const RoomDetails = ({ roomId, locale, activeType }: RoomDetailsProps) => {
|
||||
const { room, errorData, loading, fetchData } = useRoomDetails(locale, roomId);
|
||||
const tracking = useSessionTracking(locale, roomId);
|
||||
const [isCalling, setIsCalling] = useState<boolean>(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (isCalling) {
|
||||
tracking.start();
|
||||
} else {
|
||||
tracking.stop();
|
||||
}
|
||||
}, [isCalling]);
|
||||
|
||||
const stopCalling = () => {
|
||||
setIsCalling(false);
|
||||
fetchData();
|
||||
}
|
||||
|
||||
return isCalling
|
||||
? (
|
||||
<AgoraClientGroup
|
||||
room={room}
|
||||
stopCalling={stopCalling}
|
||||
/>
|
||||
) : (
|
||||
<>
|
||||
<div className="col-xl-3 col-lg-4 d-none d-lg-block">
|
||||
<AccountMenu locale={locale} />
|
||||
</div>
|
||||
<div className="col-xl-9 col-lg-8 ">
|
||||
<div className="page-account__inner">
|
||||
<Loader
|
||||
isLoading={loading}
|
||||
errorData={errorData}
|
||||
refresh={fetchData}
|
||||
>
|
||||
<RoomDetailsContent
|
||||
locale={locale}
|
||||
room={room}
|
||||
activeType={activeType}
|
||||
startRoom={() => setIsCalling(true)}
|
||||
refresh={fetchData}
|
||||
/>
|
||||
</Loader>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,355 @@
|
|||
'use client'
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import { Button, notification, Tag } from 'antd';
|
||||
import { DeleteOutlined, LeftOutlined } from '@ant-design/icons';
|
||||
import dayjs from 'dayjs';
|
||||
import Image from 'next/image';
|
||||
import { useRouter } from '../../../navigation';
|
||||
import { Room, RoomsType } from '../../../types/rooms';
|
||||
import { i18nText } from '../../../i18nKeys';
|
||||
import { LinkButton } from '../../view/LinkButton';
|
||||
import {
|
||||
addClient,
|
||||
addSupervisor,
|
||||
becomeRoomClient,
|
||||
becomeRoomSupervisor,
|
||||
deleteRoomClient,
|
||||
deleteRoomSupervisor
|
||||
} from '../../../actions/rooms';
|
||||
import { AUTH_TOKEN_KEY, AUTH_USER } from '../../../constants/common';
|
||||
import { useLocalStorage } from '../../../hooks/useLocalStorage';
|
||||
import { UserListModal } from '../../Modals/UsersListModal';
|
||||
import { SessionState } from '../../../types/sessions';
|
||||
import { EditRoomForm } from './EditRoomForm';
|
||||
|
||||
type RoomDetailsContentProps = {
|
||||
locale: string;
|
||||
activeType: RoomsType;
|
||||
room?: Room;
|
||||
startRoom: () => void;
|
||||
refresh: () => void;
|
||||
};
|
||||
|
||||
export const RoomDetailsContent = ({ room, startRoom, locale, activeType, refresh }: RoomDetailsContentProps) => {
|
||||
const [jwt] = useLocalStorage(AUTH_TOKEN_KEY, '');
|
||||
const [userData] = useLocalStorage(AUTH_USER, '');
|
||||
const { id: userId = 0 } = userData ? JSON.parse(userData) : {};
|
||||
const router = useRouter();
|
||||
const [showModal, setShowModal] = useState<boolean>(false);
|
||||
const [forSupervisor, setForSupervisor] = useState<boolean>(false);
|
||||
const startDate = room?.scheduledStartAtUtc ? dayjs(room?.scheduledStartAtUtc).locale(locale) : null;
|
||||
const endDate = room?.scheduledEndAtUtc ? dayjs(room?.scheduledEndAtUtc).locale(locale) : null;
|
||||
const today = startDate ? dayjs().format('YYYY-MM-DD') === startDate.format('YYYY-MM-DD') : false;
|
||||
const isCreator = room?.coach && room.coach.id === +userId || false;
|
||||
const isSupervisor = room?.supervisor && room.supervisor.id === +userId || false;
|
||||
const isClient = room?.clients && room.clients.length > 0 && room.clients.map(({ id }) => id).includes(+userId) || false;
|
||||
const isTimeBeforeStart = room?.scheduledStartAtUtc ? dayjs() < dayjs(room.scheduledStartAtUtc) : false;
|
||||
const [isEdit, setIsEdit] = useState<boolean>(false);
|
||||
|
||||
const goBack = () => router.push(`/account/rooms/${activeType}`);
|
||||
|
||||
const checkUserApply = (): boolean => (!room?.supervisor || !isSupervisor) && (!room?.clients || room?.clients && room?.clients.length === 0 || !isClient);
|
||||
|
||||
const deleteClient = (clientUserId: number) => {
|
||||
if (room?.id) {
|
||||
deleteRoomClient(locale, jwt, { sessionId: room.id, clientUserId })
|
||||
.then(() => {
|
||||
refresh();
|
||||
})
|
||||
.catch((err) => {
|
||||
notification.error({
|
||||
message: 'Error',
|
||||
description: err?.response?.data?.errMessage
|
||||
});
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const deleteSupervisor = (supervisorUserId?: number) => {
|
||||
if (room?.id && supervisorUserId) {
|
||||
deleteRoomSupervisor(locale, jwt, { sessionId: room.id, supervisorUserId })
|
||||
.then(() => {
|
||||
refresh();
|
||||
})
|
||||
.catch((err) => {
|
||||
notification.error({
|
||||
message: 'Error',
|
||||
description: err?.response?.data?.errMessage
|
||||
});
|
||||
})
|
||||
}
|
||||
};
|
||||
|
||||
const becomeClient = () => {
|
||||
if (room?.id && userId) {
|
||||
becomeRoomClient(locale, jwt, { sessionId: room.id, clientUserId: +userId })
|
||||
.then(() => {
|
||||
refresh();
|
||||
})
|
||||
.catch((err) => {
|
||||
notification.error({
|
||||
message: 'Error',
|
||||
description: err?.response?.data?.errMessage
|
||||
});
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const becomeSupervisor = () => {
|
||||
if (room?.id && userId) {
|
||||
becomeRoomSupervisor(locale, jwt, { sessionId: room.id, supervisorUserId: +userId })
|
||||
.then(() => {
|
||||
refresh();
|
||||
})
|
||||
.catch((err) => {
|
||||
notification.error({
|
||||
message: 'Error',
|
||||
description: err?.response?.data?.errMessage
|
||||
});
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const onInviteSupervisor = () => {
|
||||
setForSupervisor(true)
|
||||
setShowModal(true);
|
||||
};
|
||||
|
||||
const onAddUser = (id: number) => {
|
||||
if (room?.id) {
|
||||
setShowModal(false);
|
||||
|
||||
if (forSupervisor) {
|
||||
addSupervisor(locale, jwt, { sessionId: room.id, supervisorUserId: id })
|
||||
.then(() => {
|
||||
refresh();
|
||||
})
|
||||
.catch((err) => {
|
||||
notification.error({
|
||||
message: 'Error',
|
||||
description: err?.response?.data?.errMessage
|
||||
});
|
||||
});
|
||||
} else {
|
||||
addClient(locale, jwt, { sessionId: room.id, clientUserId: id })
|
||||
.then(() => {
|
||||
refresh();
|
||||
})
|
||||
.catch((err) => {
|
||||
notification.error({
|
||||
message: 'Error',
|
||||
description: err?.response?.data?.errMessage
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const afterEditing = () => {
|
||||
setIsEdit(false);
|
||||
refresh();
|
||||
}
|
||||
|
||||
return !isEdit ? (
|
||||
<div className="card-detail">
|
||||
<div>
|
||||
<Button
|
||||
className="card-detail__back"
|
||||
type="link"
|
||||
icon={<LeftOutlined/>}
|
||||
onClick={goBack}
|
||||
>
|
||||
{i18nText('back', locale)}
|
||||
</Button>
|
||||
</div>
|
||||
<div className="card-detail__name">{room?.title || ''}</div>
|
||||
<div
|
||||
className={`card-detail__date${today ? ' chosen' : ''}${activeType === RoomsType.RECENT ? ' history' : ''}`}>
|
||||
{today
|
||||
? `${i18nText('today', locale)} ${startDate?.format('HH:mm')} - ${endDate?.format('HH:mm')}`
|
||||
: `${startDate?.format('D MMMM')} ${startDate?.format('HH:mm')} - ${endDate?.format('HH:mm')}`}
|
||||
</div>
|
||||
{room?.themesTags && room.themesTags.length > 0 && (
|
||||
<div className="card-detail__skills">
|
||||
<div className="skills__list">
|
||||
{room.themesTags.map((skill) => <Tag key={skill?.id}
|
||||
className="skills__list__item">{skill?.name}</Tag>)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{room?.description && <div className="card-profile__desc">{room.description}</div>}
|
||||
{activeType === RoomsType.UPCOMING && (isCreator || isSupervisor || isClient) && (
|
||||
<div className="card-detail__actions">
|
||||
{(isCreator || isClient || isSupervisor) && (
|
||||
<Button
|
||||
className="card-detail__apply"
|
||||
onClick={startRoom}
|
||||
>
|
||||
{isCreator ? i18nText('session.start', locale) : i18nText('session.join', locale)}
|
||||
</Button>
|
||||
)}
|
||||
{isCreator && isTimeBeforeStart && room?.state === SessionState.COACH_APPROVED && (
|
||||
<Button
|
||||
className="card-detail__filled"
|
||||
onClick={() => setIsEdit(true)}
|
||||
>
|
||||
{i18nText('room.editRoom', locale)}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<div className="card-detail__profile">
|
||||
<div className="card-detail__profile_title">
|
||||
<div>{i18nText('room.roomCreator', locale)}</div>
|
||||
</div>
|
||||
<div className="card-detail__profile_list">
|
||||
<div className="card-detail__profile_item">
|
||||
<div className="card-detail__portrait card-detail__portrait_small">
|
||||
<Image src={room?.coach?.faceImageUrl || '/images/user-avatar.png'} width={86} height={86} alt=""/>
|
||||
</div>
|
||||
<div className="card-detail__inner">
|
||||
<div className="card-detail__name">{`${room?.coach?.name} ${room?.coach?.surname || ''}`}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{room?.isNeedSupervisor && (
|
||||
<div className="card-detail__profile">
|
||||
<div className="card-detail__profile_title">
|
||||
<div>{i18nText('room.supervisor', locale)}</div>
|
||||
</div>
|
||||
{room?.supervisor && (
|
||||
<div className="card-detail__profile_list">
|
||||
<div className="card-detail__profile_item">
|
||||
<div className="card-detail__portrait card-detail__portrait_small">
|
||||
<Image src={room?.supervisor?.faceImageUrl || '/images/user-avatar.png'} width={86}
|
||||
height={86}
|
||||
alt=""/>
|
||||
</div>
|
||||
<div className="card-detail__inner">
|
||||
<div
|
||||
className="card-detail__name">{`${room?.supervisor?.name} ${room?.supervisor?.surname || ''}`}</div>
|
||||
</div>
|
||||
{isCreator && activeType === RoomsType.UPCOMING && isTimeBeforeStart && room?.state === SessionState.COACH_APPROVED && (
|
||||
<LinkButton
|
||||
type="link"
|
||||
style={{alignSelf: 'flex-start'}}
|
||||
danger
|
||||
icon={<DeleteOutlined/>}
|
||||
onClick={() => deleteSupervisor(room?.supervisor?.id)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{room?.supervisor && activeType === RoomsType.RECENT && (
|
||||
<>
|
||||
{room?.supervisorComment && (
|
||||
<div className="card-detail__supervisor-comment">{room.supervisorComment}</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
{isTimeBeforeStart && room?.state === SessionState.COACH_APPROVED && !room?.supervisor && isCreator && activeType === RoomsType.UPCOMING && (
|
||||
<Button
|
||||
className="card-detail__filled"
|
||||
onClick={onInviteSupervisor}
|
||||
>
|
||||
{i18nText('room.inviteSupervisor', locale)}
|
||||
</Button>
|
||||
)}
|
||||
{isTimeBeforeStart && room?.state === SessionState.COACH_APPROVED && !room?.supervisor && !isCreator && activeType === RoomsType.UPCOMING && checkUserApply() && (
|
||||
<Button
|
||||
className="card-detail__apply"
|
||||
onClick={becomeSupervisor}
|
||||
>
|
||||
{i18nText('room.joinSupervisor', locale)}
|
||||
</Button>
|
||||
)}
|
||||
{!room?.supervisor && !isCreator && !checkUserApply() && (
|
||||
<div className="card-profile__desc">{i18nText('noData', locale)}</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<div className="card-detail__profile">
|
||||
<div className="card-detail__profile_title">
|
||||
<div>{i18nText('room.participants', locale)}</div>
|
||||
<div>{`${room?.clients?.length || 0}/${room?.maxClients}`}</div>
|
||||
</div>
|
||||
{room?.clients && room?.clients?.length > 0 && (
|
||||
<div className="card-detail__profile_list">
|
||||
{room.clients.map(({id, faceImageUrl, name, surname}) => (
|
||||
<div key={id} className="card-detail__profile_item">
|
||||
<div className="card-detail__portrait card-detail__portrait_small">
|
||||
<Image src={faceImageUrl || '/images/user-avatar.png'} width={86}
|
||||
height={86}
|
||||
alt=""/>
|
||||
</div>
|
||||
<div className="card-detail__inner">
|
||||
<div
|
||||
className="card-detail__name">{`${name} ${surname || ''}`}</div>
|
||||
</div>
|
||||
{isCreator && room?.state === SessionState.COACH_APPROVED && activeType === RoomsType.UPCOMING && isTimeBeforeStart && (
|
||||
<LinkButton
|
||||
type="link"
|
||||
style={{alignSelf: 'flex-start'}}
|
||||
danger
|
||||
icon={<DeleteOutlined/>}
|
||||
onClick={() => deleteClient(id)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{isTimeBeforeStart && room?.state === SessionState.COACH_APPROVED && isCreator && activeType === RoomsType.UPCOMING && (!room?.clients || (room?.clients && room?.clients?.length < room.maxClients)) && (
|
||||
<Button
|
||||
className="card-detail__filled"
|
||||
onClick={() => setShowModal(true)}
|
||||
>
|
||||
{i18nText('room.inviteParticipant', locale)}
|
||||
</Button>
|
||||
)}
|
||||
{isTimeBeforeStart && room?.state === SessionState.COACH_APPROVED && !isCreator && activeType === RoomsType.UPCOMING && (!room?.clients || (room?.clients && room?.clients?.length < room.maxClients)) && checkUserApply() && (
|
||||
<Button
|
||||
className="card-detail__apply"
|
||||
onClick={becomeClient}
|
||||
>
|
||||
{i18nText('room.joinParticipant', locale)}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
{room && (
|
||||
<UserListModal
|
||||
locale={locale}
|
||||
jwt={jwt}
|
||||
isOpen={showModal}
|
||||
handleCancel={() => setShowModal(false)}
|
||||
submit={onAddUser}
|
||||
afterCloseModal={() => setForSupervisor(false)}
|
||||
room={room}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="card-detail">
|
||||
<div>
|
||||
<Button
|
||||
className="card-detail__back"
|
||||
type="link"
|
||||
icon={<LeftOutlined/>}
|
||||
onClick={() => setIsEdit(false)}
|
||||
>
|
||||
{i18nText('back', locale)}
|
||||
</Button>
|
||||
</div>
|
||||
<EditRoomForm
|
||||
roomId={room?.id || 0}
|
||||
locale={locale}
|
||||
jwt={jwt}
|
||||
mode="edit"
|
||||
afterSubmit={afterEditing}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,173 @@
|
|||
'use client';
|
||||
|
||||
import React, { MouseEvent, useCallback, useEffect, useState } from 'react';
|
||||
import { Empty, Space } from 'antd';
|
||||
import dayjs from 'dayjs';
|
||||
import 'dayjs/locale/ru';
|
||||
import 'dayjs/locale/en';
|
||||
import 'dayjs/locale/de';
|
||||
import 'dayjs/locale/it';
|
||||
import 'dayjs/locale/fr';
|
||||
import 'dayjs/locale/es';
|
||||
import { RoomsType } from '../../../types/rooms';
|
||||
import { getRecentRooms, getUpcomingRooms } from '../../../actions/rooms';
|
||||
import { Loader } from '../../view/Loader';
|
||||
import { useLocalStorage } from '../../../hooks/useLocalStorage';
|
||||
import { AUTH_TOKEN_KEY } from '../../../constants/common';
|
||||
import { usePathname, useRouter } from '../../../navigation';
|
||||
import { i18nText } from '../../../i18nKeys';
|
||||
import { CreateRoom } from './CreateRoom';
|
||||
|
||||
type RoomsTabsProps = {
|
||||
locale: string;
|
||||
activeTab: RoomsType;
|
||||
};
|
||||
|
||||
export const RoomsTabs = ({ locale, activeTab }: RoomsTabsProps) => {
|
||||
const [sort, setSort] = useState<string>();
|
||||
const [rooms, setRooms] = useState<any>();
|
||||
const [loading, setLoading] = useState<boolean>(true);
|
||||
const [errorData, setErrorData] = useState<any>();
|
||||
const [jwt] = useLocalStorage(AUTH_TOKEN_KEY, '');
|
||||
const router = useRouter();
|
||||
const pathname = usePathname();
|
||||
|
||||
const fetchData = () => {
|
||||
setErrorData(undefined);
|
||||
setLoading(true);
|
||||
Promise.all([
|
||||
getUpcomingRooms(locale, jwt),
|
||||
getRecentRooms(locale, jwt)
|
||||
])
|
||||
.then(([upcoming, recent]) => {
|
||||
setRooms({
|
||||
[RoomsType.UPCOMING]: upcoming || [],
|
||||
[RoomsType.RECENT]: recent || []
|
||||
});
|
||||
})
|
||||
.catch((err) => {
|
||||
setErrorData(err);
|
||||
})
|
||||
.finally(() => {
|
||||
setLoading(false);
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchData();
|
||||
}, []);
|
||||
|
||||
const onChangeSort = useCallback((value: string) => {
|
||||
setSort(value);
|
||||
}, [sort]);
|
||||
|
||||
const onClickSession = (event: MouseEvent<HTMLDivElement>, id: number) => {
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
router.push(`${pathname}/${id}`);
|
||||
};
|
||||
|
||||
const getChildren = (list?: any[]) => (
|
||||
<>
|
||||
{/* <div className="filter-session">
|
||||
<div className="filter-session__item">
|
||||
<CustomSelect
|
||||
label="Topic"
|
||||
value={sort}
|
||||
onChange={onChangeSort}
|
||||
options={[
|
||||
{ value: 'topic1', label: 'Topic 1' },
|
||||
{ value: 'topic2', label: 'Topic 2' },
|
||||
{ value: 'topic3', label: 'Topic 3' },
|
||||
{ value: 'topic4', label: 'Topic 4' }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</div> */}
|
||||
<div className="list-session">
|
||||
{list && list?.length > 0 ? list?.map(({ id, scheduledStartAtUtc, scheduledEndAtUtc, title, coach, clients, supervisor, maxClients }) => {
|
||||
const startDate = dayjs(scheduledStartAtUtc).locale(locale);
|
||||
const endDate = dayjs(scheduledEndAtUtc).locale(locale);
|
||||
const today = dayjs().format('YYYY-MM-DD') === startDate.format('YYYY-MM-DD');
|
||||
|
||||
return (
|
||||
<div key={id} className="card-profile session__item" onClick={(e: MouseEvent<HTMLDivElement>) => onClickSession(e, id)}>
|
||||
<div className="card-profile__header">
|
||||
<div className="card-profile__header__portrait">
|
||||
<img src={coach?.faceImageUrl || '/images/person.png'} className="" alt="" />
|
||||
</div>
|
||||
<div className="card-profile__header__inner">
|
||||
<div>
|
||||
<div className="card-profile__header__name">{`${coach?.name} ${coach?.surname || ''}`}</div>
|
||||
<div className="card-profile__header__title">{title}</div>
|
||||
<div className={`card-profile__header__date${activeTab === RoomsType.RECENT ? ' history' : (today ? ' chosen' : '')}`}>
|
||||
{today
|
||||
? `${i18nText('today', locale)} ${startDate.format('HH:mm')} - ${endDate.format('HH:mm')}`
|
||||
: `${startDate.format('D MMMM')} ${startDate.format('HH:mm')} - ${endDate.format('HH:mm')}`}
|
||||
</div>
|
||||
<div className="card-room__details">
|
||||
{supervisor && (
|
||||
<>
|
||||
<div>{i18nText('room.supervisor', locale)}</div>
|
||||
<div>{`${supervisor?.name} ${supervisor?.surname || ''}`}</div>
|
||||
</>
|
||||
)}
|
||||
<div>{i18nText('room.members', locale)}</div>
|
||||
<div>{`${clients.length}/${maxClients}`}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}) : (
|
||||
<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={i18nText('noData', locale)} />
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
const tabs = [
|
||||
{
|
||||
key: RoomsType.UPCOMING,
|
||||
label: (
|
||||
<>
|
||||
{i18nText('room.upcoming', locale)}
|
||||
{rooms?.upcoming && rooms?.upcoming?.length > 0 ? (<span className="count">{rooms?.upcoming.length}</span>) : null}
|
||||
</>
|
||||
),
|
||||
children: getChildren(rooms?.upcoming)
|
||||
},
|
||||
{
|
||||
key: RoomsType.RECENT,
|
||||
label: i18nText('room.recent', locale),
|
||||
children: getChildren(rooms?.recent)
|
||||
},
|
||||
{
|
||||
key: RoomsType.NEW,
|
||||
label: i18nText('room.newRoom', locale),
|
||||
children: <CreateRoom locale={locale} jwt={jwt} />
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<Loader
|
||||
isLoading={loading}
|
||||
errorData={errorData}
|
||||
refresh={fetchData}
|
||||
>
|
||||
<div className="tabs-session">
|
||||
{tabs.map(({ key, label }) => (
|
||||
<Space
|
||||
key={key}
|
||||
className={`tabs-session__item ${key === activeTab ? 'active' : ''}`}
|
||||
onClick={() => router.push(`/account/rooms/${key}`)}
|
||||
>
|
||||
{label}
|
||||
</Space>
|
||||
))}
|
||||
</div>
|
||||
{tabs.filter(({ key }) => key === activeTab)[0].children}
|
||||
</Loader>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
'use client'
|
||||
|
||||
export * from './RoomDetails';
|
||||
export * from './RoomsTabs';
|
||||
export * from './RoomDetailsContent';
|
||||
export * from './CreateRoom';
|
||||
|
|
@ -81,7 +81,7 @@ export const SessionDetailsContent = ({ session, locale, activeType, startSessio
|
|||
const CoachCard = (coach?: PublicUser) => coach ? (
|
||||
<div className="card-detail__expert">
|
||||
<div className="card-detail__portrait">
|
||||
<Image src={coach?.faceImageUrl || '/images/person.png'} width={140} height={140} alt="" />
|
||||
<Image src={coach?.faceImageUrl || '/images/user-avatar.png'} width={140} height={140} alt="" />
|
||||
</div>
|
||||
<div className="card-detail__inner">
|
||||
<Link href={`/experts/${coach?.id}` as any} target="_blank">
|
||||
|
|
@ -106,7 +106,7 @@ export const SessionDetailsContent = ({ session, locale, activeType, startSessio
|
|||
<div className="card-detail__skills">
|
||||
<div className="skills__list">
|
||||
{session?.themesTags?.slice(0, 2).map((skill) => <Tag key={skill?.id} className="skills__list__item">{skill?.name}</Tag>)}
|
||||
{session?.themesTags?.length > 2
|
||||
{session?.themesTags && session?.themesTags?.length > 2
|
||||
? (
|
||||
<Tag className="skills__list__more">
|
||||
<Link href={`/experts/${coach?.id}` as any} target="_blank">
|
||||
|
|
@ -128,7 +128,7 @@ export const SessionDetailsContent = ({ session, locale, activeType, startSessio
|
|||
const StudentCard = (student?: PublicUser | null) => student ? (
|
||||
<div className="card-detail__expert">
|
||||
<div className="card-detail__portrait">
|
||||
<Image src={student?.faceImageUrl || '/images/person.png'} width={140} height={140} alt="" />
|
||||
<Image src={student?.faceImageUrl || '/images/user-avatar.png'} width={140} height={140} alt="" />
|
||||
</div>
|
||||
<div className="card-detail__inner">
|
||||
<div className="card-detail__name">{`${student?.name} ${student?.surname || ''}`}</div>
|
||||
|
|
|
|||
|
|
@ -55,8 +55,6 @@ export const ExpertsAdditionalFilter = ({
|
|||
};
|
||||
const search = getSearchParamsString(newFilter);
|
||||
|
||||
console.log('here1');
|
||||
|
||||
router.push(search ? `${basePath}?${search}#filter` : `${basePath}#filter`);
|
||||
|
||||
// router.push({
|
||||
|
|
|
|||
|
|
@ -1,20 +1,20 @@
|
|||
'use client';
|
||||
|
||||
import React, { FC, useEffect, useState } from 'react';
|
||||
import {Modal, Button, message, Form, Collapse, GetProp, UploadProps} from 'antd';
|
||||
import React, { FC, useState } from 'react';
|
||||
import { Modal, Button, message, Form, Collapse } from 'antd';
|
||||
import type { CollapseProps } from 'antd';
|
||||
import { CloseOutlined } from '@ant-design/icons';
|
||||
import { i18nText } from '../../i18nKeys';
|
||||
import { PracticePersonData, PracticeDTO, PracticeData, PracticeCase } from '../../types/practice';
|
||||
import { PracticePersonData } from '../../types/practice';
|
||||
import { AUTH_TOKEN_KEY } from '../../constants/common';
|
||||
import { useLocalStorage } from '../../hooks/useLocalStorage';
|
||||
import { setEducation } from '../../actions/profile';
|
||||
import {Certificate, Details, EducationData, EducationDTO, Experience} from "../../types/education";
|
||||
import {CertificatesContent} from "./educationModalContent/Certificates";
|
||||
import {EducationsContent} from "./educationModalContent/Educations";
|
||||
import {TrainingsContent} from "./educationModalContent/Trainings";
|
||||
import {MbasContent} from "./educationModalContent/Mbas";
|
||||
import {ExperiencesContent} from "./educationModalContent/Experiences";
|
||||
import { EducationData, EducationDTO } from '../../types/education';
|
||||
import { CertificatesContent } from './educationModalContent/Certificates';
|
||||
import { EducationsContent } from './educationModalContent/Educations';
|
||||
import { TrainingsContent } from './educationModalContent/Trainings';
|
||||
import { MbasContent } from './educationModalContent/Mbas';
|
||||
import { ExperiencesContent } from './educationModalContent/Experiences';
|
||||
|
||||
type EditExpertEducationModalProps = {
|
||||
open: boolean;
|
||||
|
|
|
|||
|
|
@ -6,12 +6,6 @@ import { Modal, Menu, Calendar, Radio, Button, Input, message, Form } from 'antd
|
|||
import type { CalendarProps, MenuProps } from 'antd';
|
||||
import { ArrowLeftOutlined } from '@ant-design/icons';
|
||||
import { CloseOutlined } from '@ant-design/icons';
|
||||
import locale_ru from 'antd/lib/calendar/locale/ru_RU';
|
||||
import locale_en from 'antd/lib/calendar/locale/en_GB';
|
||||
import locale_de from 'antd/lib/calendar/locale/de_DE';
|
||||
import locale_it from 'antd/lib/calendar/locale/it_IT';
|
||||
import locale_es from 'antd/lib/calendar/locale/es_ES';
|
||||
import locale_fr from 'antd/lib/calendar/locale/fr_FR';
|
||||
import dayjs, { Dayjs } from 'dayjs';
|
||||
import 'dayjs/locale/ru';
|
||||
import 'dayjs/locale/en';
|
||||
|
|
@ -19,6 +13,7 @@ import 'dayjs/locale/de';
|
|||
import 'dayjs/locale/it';
|
||||
import 'dayjs/locale/fr';
|
||||
import 'dayjs/locale/es';
|
||||
import { getLocale } from '../../utils/locale';
|
||||
import { AUTH_TOKEN_KEY, SESSION_DATA } from '../../constants/common';
|
||||
import { ExpertScheduler, SignupSessionData } from '../../types/experts';
|
||||
import { Tag } from '../../types/tags';
|
||||
|
|
@ -42,27 +37,6 @@ type ScheduleModalProps = {
|
|||
|
||||
type MenuItem = Required<MenuProps>['items'][number];
|
||||
|
||||
const getLocale = (locale: string) => {
|
||||
if (locale) {
|
||||
switch (locale) {
|
||||
case 'ru':
|
||||
return locale_ru;
|
||||
case 'de':
|
||||
return locale_de;
|
||||
case 'fr':
|
||||
return locale_fr;
|
||||
case 'it':
|
||||
return locale_it;
|
||||
case 'es':
|
||||
return locale_es;
|
||||
default:
|
||||
return locale_en;
|
||||
}
|
||||
}
|
||||
|
||||
return locale_en;
|
||||
};
|
||||
|
||||
const getCalendarMenu = (start: Dayjs): MenuItem[] => Array.from({ length: 3 })
|
||||
.map((_: unknown, index: number) => {
|
||||
const date = index ? start.add(index, 'M') : start.clone();
|
||||
|
|
|
|||
|
|
@ -0,0 +1,113 @@
|
|||
'use client';
|
||||
|
||||
import React, { useCallback, useState } from 'react';
|
||||
import { Button, Modal, notification } from 'antd';
|
||||
import { CloseOutlined } from '@ant-design/icons';
|
||||
import debounce from 'lodash/debounce';
|
||||
import Image from 'next/image';
|
||||
import { i18nText } from '../../i18nKeys';
|
||||
import { getUsersList } from '../../actions/rooms';
|
||||
import { PublicUser } from '../../types/sessions';
|
||||
import { Room } from '../../types/rooms';
|
||||
import { CustomInput } from '../view/CustomInput';
|
||||
import { Loader } from '../view/Loader';
|
||||
|
||||
type UserListModalProps = {
|
||||
room: Room;
|
||||
isOpen: boolean;
|
||||
locale: string;
|
||||
handleCancel: () => void;
|
||||
jwt: string;
|
||||
submit: (id: number) => void;
|
||||
afterCloseModal?: () => void;
|
||||
};
|
||||
|
||||
export const UserListModal = ({ room, isOpen, locale, handleCancel, jwt, submit, afterCloseModal }: UserListModalProps) => {
|
||||
const [users, setUsers] = useState<PublicUser[] | undefined>();
|
||||
const [loading, seLoading] = useState<boolean>(false);
|
||||
|
||||
const onSearch = useCallback(debounce((e: any) => {
|
||||
if (e?.target?.value) {
|
||||
seLoading(true);
|
||||
getUsersList(locale, jwt, { template: e.target.value })
|
||||
.then(({ items }) => {
|
||||
const clients = room?.clients?.map(({ id }) => id);
|
||||
setUsers(items
|
||||
? items.filter(({ id }) => !(clients?.length && clients.includes(id) || id === room?.supervisor?.id || id === room?.coach?.id))
|
||||
: undefined);
|
||||
})
|
||||
.catch((err: any) => {
|
||||
notification.error({
|
||||
message: 'Error',
|
||||
description: err?.response?.data?.errMessage
|
||||
});
|
||||
})
|
||||
.finally(() => {
|
||||
seLoading(false);
|
||||
});
|
||||
} else {
|
||||
setUsers(undefined);
|
||||
}
|
||||
|
||||
}, 300), []);
|
||||
|
||||
const onAfterClose = () => {
|
||||
setUsers(undefined);
|
||||
if (afterCloseModal) afterCloseModal();
|
||||
}
|
||||
|
||||
return (
|
||||
<Modal
|
||||
className="b-modal"
|
||||
open={isOpen}
|
||||
title={undefined}
|
||||
onOk={undefined}
|
||||
onCancel={handleCancel}
|
||||
footer={false}
|
||||
width={498}
|
||||
closeIcon={<CloseOutlined style={{ fontSize: 20, color: '#000' }}/>}
|
||||
afterClose={onAfterClose}
|
||||
>
|
||||
<div className="b-modal__users-list__content">
|
||||
<CustomInput
|
||||
placeholder={i18nText('search', locale)}
|
||||
onChange={onSearch}
|
||||
allowClear
|
||||
/>
|
||||
{users && (
|
||||
<div className="b-users-list__wrapper">
|
||||
<Loader isLoading={loading}>
|
||||
{users.length > 0 ? (
|
||||
<div className="b-users-list">
|
||||
{users.map(({ id, name, surname, faceImageUrl }) => (
|
||||
<div className="b-users-list-item" key={id}>
|
||||
<div>
|
||||
<div className="card-detail__portrait card-detail__portrait_small">
|
||||
<Image src={faceImageUrl || '/images/user-avatar.png'} width={86}
|
||||
height={86}
|
||||
alt=""/>
|
||||
</div>
|
||||
<div className="card-detail__inner">
|
||||
<div
|
||||
className="card-detail__name">{`${name} ${surname || ''}`}</div>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
className="card-detail__filled"
|
||||
onClick={() => submit(id)}
|
||||
>
|
||||
{i18nText('room.invite', locale)}
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="b-users-list__empty">{i18nText('noData', locale)}</div>
|
||||
)}
|
||||
</Loader>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
'use client'
|
||||
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { DatePicker } from 'antd';
|
||||
import { CalendarOutlined } from '@ant-design/icons';
|
||||
import dayjs from 'dayjs';
|
||||
import 'dayjs/locale/ru';
|
||||
import 'dayjs/locale/en';
|
||||
import 'dayjs/locale/de';
|
||||
import 'dayjs/locale/it';
|
||||
import 'dayjs/locale/fr';
|
||||
import 'dayjs/locale/es';
|
||||
import { getLocale } from '../../utils/locale';
|
||||
|
||||
export const CustomDatePicker = (props: any) => {
|
||||
const { label, value, locale, ...other } = props;
|
||||
const [isActiveLabel, setIsActiveLabel] = useState<boolean>(false);
|
||||
|
||||
dayjs.locale(locale);
|
||||
|
||||
useEffect(() => {
|
||||
if (label) {
|
||||
setIsActiveLabel(!!value);
|
||||
} else {
|
||||
setIsActiveLabel(false);
|
||||
}
|
||||
}, [value]);
|
||||
|
||||
const onOpenChange = (open: boolean) => {
|
||||
if (open) {
|
||||
if (!isActiveLabel) setIsActiveLabel(true)
|
||||
} else {
|
||||
setIsActiveLabel(!!value)
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={`b-datepicker-wrap ${isActiveLabel ? 'b-datepicker__active' : ''}`}>
|
||||
<div className="b-datepicker-label">
|
||||
<span>{label}</span>
|
||||
</div>
|
||||
<DatePicker
|
||||
className="b-datepicker"
|
||||
format="YYYY-MM-DD"
|
||||
locale={getLocale(locale)}
|
||||
value={value}
|
||||
showNow={false}
|
||||
onOpenChange={onOpenChange}
|
||||
needConfirm={false}
|
||||
placeholder=""
|
||||
variant="filled"
|
||||
allowClear={false}
|
||||
popupClassName="b-datepicker-popup"
|
||||
minDate={dayjs().startOf('month')}
|
||||
suffixIcon={<CalendarOutlined style={{ color: '#2c7873', fontSize: 20 }} />}
|
||||
{...other}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
export default {
|
||||
accountMenu: {
|
||||
sessions: 'Kommende & letzte Sitzungen',
|
||||
rooms: 'Zimmer',
|
||||
notifications: 'Benachrichtigung',
|
||||
support: 'Hilfe & Support',
|
||||
information: 'Rechtliche Informationen',
|
||||
|
|
@ -48,7 +49,23 @@ export default {
|
|||
upcoming: 'Zukünftige Räume',
|
||||
requested: 'Angeforderte Räume',
|
||||
recent: 'Kürzliche Räume',
|
||||
newRoom: 'Neuer Raum'
|
||||
newRoom: 'Neuer Raum',
|
||||
editRoom: 'Raum bearbeiten',
|
||||
date: 'Datum',
|
||||
time: 'Zeit',
|
||||
maxParticipants: 'Max. erlaubte Teilnehmer',
|
||||
presenceOfSupervisor: 'Anwesenheit eines Supervisors',
|
||||
supervisor: 'Supervisor',
|
||||
members: 'Mitglieder',
|
||||
participants: 'Teilnehmer',
|
||||
roomCreator: 'Raum-Ersteller',
|
||||
inviteSupervisor: 'Supervisor einladen',
|
||||
joinSupervisor: 'Als Supervisor beitreten',
|
||||
inviteParticipant: 'Teilnehmer einladen',
|
||||
joinParticipant: 'Als Teilnehmer beitreten',
|
||||
rapport: 'Rapport',
|
||||
invite: 'Invite',
|
||||
save: 'Raum speichern'
|
||||
},
|
||||
agreementText: 'Folgendes habe ich gelesen und erkläre mich damit einverstanden: Benutzervereinbarung,',
|
||||
userAgreement: 'Benutzervereinbarung',
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
export default {
|
||||
accountMenu: {
|
||||
sessions: 'Upcoming & Recent Sessions',
|
||||
rooms: 'Rooms',
|
||||
notifications: 'Notification',
|
||||
support: 'Help & Support',
|
||||
information: 'Legal Information',
|
||||
|
|
@ -48,7 +49,23 @@ export default {
|
|||
upcoming: 'Upcoming Rooms',
|
||||
requested: 'Rooms Requested',
|
||||
recent: 'Recent Rooms',
|
||||
newRoom: 'New Room'
|
||||
newRoom: 'New Room',
|
||||
editRoom: 'Edit Room',
|
||||
date: 'Date',
|
||||
time: 'Time',
|
||||
maxParticipants: 'Max Participants Allowed',
|
||||
presenceOfSupervisor: 'Presence of a Supervisor',
|
||||
supervisor: 'Supervisor',
|
||||
members: 'Members',
|
||||
participants: 'Participants',
|
||||
roomCreator: 'Room Creator',
|
||||
inviteSupervisor: 'Invite Supervisor',
|
||||
joinSupervisor: 'Join As A Supervisor',
|
||||
inviteParticipant: 'Invite Participant',
|
||||
joinParticipant: 'Join as a participant',
|
||||
rapport: 'Rapport',
|
||||
invite: 'Invite',
|
||||
save: 'Save room'
|
||||
},
|
||||
agreementText: 'I have read and agree with the terms of the User Agreement,',
|
||||
userAgreement: 'User Agreement',
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
export default {
|
||||
accountMenu: {
|
||||
sessions: 'Próximas y recientes sesiones',
|
||||
rooms: 'Habitaciones',
|
||||
notifications: 'Notificación',
|
||||
support: 'Ayuda y asistencia',
|
||||
information: 'Información jurídica',
|
||||
|
|
@ -48,7 +49,23 @@ export default {
|
|||
upcoming: 'Próximas salas',
|
||||
requested: 'Salas solicitadas',
|
||||
recent: 'Salas recientes',
|
||||
newRoom: 'Nueva sala'
|
||||
newRoom: 'Nueva sala',
|
||||
editRoom: 'Editar la sala',
|
||||
date: 'Fecha',
|
||||
time: 'Tiempo',
|
||||
maxParticipants: 'Máximo de participantes permitidos',
|
||||
presenceOfSupervisor: 'Presencia de un supervisor',
|
||||
supervisor: 'Supervisor',
|
||||
members: 'Miembros',
|
||||
participants: 'Participantes',
|
||||
roomCreator: 'Creador de salas',
|
||||
inviteSupervisor: 'Invitar al supervisor',
|
||||
joinSupervisor: 'Unirse como supervisor',
|
||||
inviteParticipant: 'Invitar a un participante',
|
||||
joinParticipant: 'Unirse como participante',
|
||||
rapport: 'Buena relación',
|
||||
invite: 'Invitar',
|
||||
save: 'Guardar sala'
|
||||
},
|
||||
agreementText: 'He leído y acepto las condiciones del Acuerdo de usuario,',
|
||||
userAgreement: 'Acuerdo de usuario',
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
export default {
|
||||
accountMenu: {
|
||||
sessions: 'Sessions futures et récentes',
|
||||
rooms: 'Chambres',
|
||||
notifications: 'Notification',
|
||||
support: 'Aide et support',
|
||||
information: 'Informations légales',
|
||||
|
|
@ -48,7 +49,23 @@ export default {
|
|||
upcoming: 'Salles futures',
|
||||
requested: 'Salles demandées',
|
||||
recent: 'Salles récentes',
|
||||
newRoom: 'Nouvelle salle'
|
||||
newRoom: 'Nouvelle salle',
|
||||
editRoom: 'Modifier la salle',
|
||||
date: 'Date',
|
||||
time: 'Temps',
|
||||
maxParticipants: 'Max de participants autorisés',
|
||||
presenceOfSupervisor: 'Présence d\'un superviseur',
|
||||
supervisor: 'Superviseur',
|
||||
members: 'Membres',
|
||||
participants: 'Participants',
|
||||
roomCreator: 'Créateur de la salle',
|
||||
inviteSupervisor: 'Inviter un superviseur',
|
||||
joinSupervisor: 'Rejoindre en tant que superviseur',
|
||||
inviteParticipant: 'Inviter un participant',
|
||||
joinParticipant: 'Rejoindre en tant que participant',
|
||||
rapport: 'Rapport',
|
||||
invite: 'Inviter',
|
||||
save: 'Sauvegarder la salle'
|
||||
},
|
||||
agreementText: 'J\'ai lu et j\'accepte les dispositions de l\'Accord Utilisateur et de la',
|
||||
userAgreement: '',
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
export default {
|
||||
accountMenu: {
|
||||
sessions: 'Prossime e recenti sessioni',
|
||||
rooms: 'Stanze',
|
||||
notifications: 'Notifica',
|
||||
support: 'Assistenza e supporto',
|
||||
information: 'Informazioni legali',
|
||||
|
|
@ -48,7 +49,23 @@ export default {
|
|||
upcoming: 'Prossime sale',
|
||||
requested: 'Sale richieste',
|
||||
recent: 'Sale recenti',
|
||||
newRoom: 'Nuova sala'
|
||||
newRoom: 'Nuova sala',
|
||||
editRoom: 'Modifica sala',
|
||||
date: 'Data',
|
||||
time: 'Tempo',
|
||||
maxParticipants: 'Numero massimo di partecipanti consentiti',
|
||||
presenceOfSupervisor: 'Presenza di un relatore',
|
||||
supervisor: 'Relatore',
|
||||
members: 'Iscritti',
|
||||
participants: 'Partecipanti',
|
||||
roomCreator: 'Creatore sala',
|
||||
inviteSupervisor: 'Invita relatore',
|
||||
joinSupervisor: 'Partecipa come relatore',
|
||||
inviteParticipant: 'Invita partecipante',
|
||||
joinParticipant: 'Partecipa come partecipante',
|
||||
rapport: 'Rapporto',
|
||||
invite: 'Invita',
|
||||
save: 'Salva sala'
|
||||
},
|
||||
agreementText: 'Ho letto e accetto i termini dell\'Accordo con l\'utente,',
|
||||
userAgreement: '',
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
export default {
|
||||
accountMenu: {
|
||||
sessions: 'Предстоящие и недавние сессии',
|
||||
rooms: 'Комнаты',
|
||||
notifications: 'Уведомления',
|
||||
support: 'Служба поддержки',
|
||||
information: 'Юридическая информация',
|
||||
|
|
@ -48,7 +49,23 @@ export default {
|
|||
upcoming: 'Предстоящие комнаты',
|
||||
requested: 'Запрошенные комнаты',
|
||||
recent: 'Недавние комнаты',
|
||||
newRoom: 'Новая комната'
|
||||
newRoom: 'Новая комната',
|
||||
editRoom: 'Изменить комнату',
|
||||
date: 'Дата',
|
||||
time: 'Время',
|
||||
maxParticipants: 'Макс. кол-во участников',
|
||||
presenceOfSupervisor: 'Присутствие супервизора',
|
||||
supervisor: 'Супервайзер',
|
||||
members: 'Участники',
|
||||
participants: 'Участники',
|
||||
roomCreator: 'Создатель комнаты',
|
||||
inviteSupervisor: 'Пригласить супервизора',
|
||||
joinSupervisor: 'Присоединиться как супервизор',
|
||||
inviteParticipant: 'Пригласить участника',
|
||||
joinParticipant: 'Присоединиться как участник',
|
||||
rapport: 'Раппорт',
|
||||
invite: 'Пригласить',
|
||||
save: 'Сохранить комнату'
|
||||
},
|
||||
agreementText: 'Я прочитал и согласен с условиями Пользовательского соглашения,',
|
||||
userAgreement: 'Пользовательского соглашения',
|
||||
|
|
|
|||
|
|
@ -668,6 +668,7 @@ a {
|
|||
& > div {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
padding-left: 1px;
|
||||
|
||||
&:first-child {
|
||||
flex-direction: column;
|
||||
|
|
|
|||
|
|
@ -82,6 +82,13 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__users-list__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 40px;
|
||||
gap: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-modal-mask {
|
||||
|
|
|
|||
|
|
@ -931,6 +931,10 @@
|
|||
&.chosen {
|
||||
color: #D93E5C;
|
||||
}
|
||||
|
||||
&.history {
|
||||
color: #c4c4c4;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,9 +2,12 @@
|
|||
&__wrap {
|
||||
width: 100%;
|
||||
height: 716px;
|
||||
border-radius: 16px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&__single {
|
||||
border-radius: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
&__container {
|
||||
|
|
@ -25,6 +28,16 @@
|
|||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
z-index: 2;
|
||||
|
||||
&_group {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
background: rgba(0, 59, 70, 0.4);
|
||||
padding: 16px;
|
||||
border-radius: 16px;
|
||||
margin-top: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
&__controls {
|
||||
|
|
@ -126,6 +139,44 @@
|
|||
position: absolute;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&_groups {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 16px;
|
||||
justify-content: center;
|
||||
|
||||
& > div {
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
|
||||
video {
|
||||
object-fit: contain !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.gr-1 {
|
||||
& > div {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&.gr-2, &.gr-3, &.gr-4 {
|
||||
& > div {
|
||||
flex: calc((100% - 16px) / 2) 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.gr-5, &.gr-6, &.gr-7, &.gr-8, &.gr-9 {
|
||||
flex: calc((100% - 16px) / 3) 0;
|
||||
}
|
||||
|
||||
&.gr-10, &.gr-11, &.gr-12, &.gr-13, &.gr-14, &.gr-15, &.gr-16 {
|
||||
flex: calc((100% - 16px) / 4) 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__video {
|
||||
|
|
|
|||
|
|
@ -18,6 +18,11 @@
|
|||
background: lightgray 50%;
|
||||
box-shadow: 0 8px 16px 0 rgba(102, 165, 173, 0.32);
|
||||
overflow: hidden;
|
||||
|
||||
&_small {
|
||||
width: 86px;
|
||||
height: 86px;
|
||||
}
|
||||
}
|
||||
|
||||
&__inner {
|
||||
|
|
@ -41,6 +46,17 @@
|
|||
line-height: 120%;
|
||||
}
|
||||
|
||||
&__supervisor-comment {
|
||||
width: 100%;
|
||||
background: #E4F5FA;
|
||||
padding: 8px;
|
||||
border-radius: 0 8px 8px 8px;
|
||||
color: #66A5AD;
|
||||
@include rem(13);
|
||||
font-weight: 500;
|
||||
line-height: 120%;
|
||||
}
|
||||
|
||||
&__comments {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -200,6 +216,31 @@
|
|||
}
|
||||
}
|
||||
|
||||
&__filled {
|
||||
user-select: none;
|
||||
outline: none !important;
|
||||
border: none !important;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
border-radius: 8px !important;
|
||||
background: #66A5AD !important;
|
||||
box-shadow: none !important;
|
||||
display: flex;
|
||||
height: 54px !important;
|
||||
padding: 15px 24px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #fff !important;
|
||||
@include rem(15);
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 160%;
|
||||
|
||||
&:hover, &:active {
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
|
||||
&__header {
|
||||
display: flex;
|
||||
padding-bottom: 8px;
|
||||
|
|
@ -268,6 +309,54 @@
|
|||
overflow: hidden;
|
||||
}
|
||||
|
||||
&__profile {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
padding-top: 16px;
|
||||
align-items: flex-start;
|
||||
border-top: 1px solid #C4DFE6;
|
||||
|
||||
&_title {
|
||||
width: 100%;
|
||||
gap: 16px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
div {
|
||||
@include rem(18);
|
||||
font-weight: 600;
|
||||
line-height: 150%;
|
||||
color: #6FB98F;
|
||||
|
||||
&:first-child {
|
||||
color: #003B46;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&_list {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
&_item {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
justify-content: space-between;
|
||||
|
||||
.card-detail__inner {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.card-detail__name {
|
||||
color: #2C7873;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
|
|
|||
|
|
@ -48,7 +48,6 @@
|
|||
opacity: 1 !important;
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
th, td {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,128 @@
|
|||
.b-datepicker {
|
||||
width: 100% !important;
|
||||
height: 54px !important;
|
||||
|
||||
&.ant-picker-filled {
|
||||
background: transparent !important;
|
||||
z-index: 1;
|
||||
padding-top: 22px !important;
|
||||
padding-left: 16px !important;
|
||||
|
||||
&:hover {
|
||||
border-color: #2c7873 !important;
|
||||
}
|
||||
|
||||
.ant-picker-input {
|
||||
input {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ant-picker-suffix {
|
||||
margin-top: -20px;
|
||||
}
|
||||
|
||||
&-wrap {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
background-color: #F8F8F7;
|
||||
border-radius: 8px;
|
||||
|
||||
&.b-datepicker__active .b-datepicker-label {
|
||||
font-size: 12px;
|
||||
font-weight: 300;
|
||||
line-height: 14px;
|
||||
top: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
&-label {
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
color: #000;
|
||||
opacity: .3;
|
||||
position: absolute;
|
||||
left: 16px;
|
||||
top: 15px;
|
||||
right: 22px;
|
||||
z-index: 0;
|
||||
transition: all .1s ease;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
span {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
&-popup {
|
||||
padding: 16px !important;
|
||||
|
||||
.ant-picker-date-panel {
|
||||
padding: 16px 8px !important;
|
||||
}
|
||||
|
||||
.ant-picker-header-view {
|
||||
color: #2c7873 !important;
|
||||
}
|
||||
|
||||
.ant-picker-header {
|
||||
border: none !important;
|
||||
|
||||
.ant-picker-header-super-prev-btn, .ant-picker-header-super-next-btn {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-picker-cell {
|
||||
opacity: 0 !important;
|
||||
padding: 0 !important;
|
||||
|
||||
&:not(.ant-picker-cell-disabled) {
|
||||
color: #66A5AD !important;
|
||||
|
||||
&:hover {
|
||||
.ant-picker-cell-inner {
|
||||
color: #6FB98F !important;
|
||||
background: transparent !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-selected:not(.ant-picker-cell-disabled) .ant-picker-cell-inner {
|
||||
color: #6FB98F !important;
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
&-disabled {
|
||||
color: rgba(0, 0, 0, 0.25) !important;
|
||||
|
||||
&::before {
|
||||
background: transparent !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.ant-picker-cell-in-view {
|
||||
opacity: 1 !important;
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.ant-picker-cell-inner::before {
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
th, td {
|
||||
vertical-align: middle !important;
|
||||
height: 36px !important;
|
||||
}
|
||||
|
||||
th {
|
||||
color: #66A5AD !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,86 @@
|
|||
.card-room {
|
||||
&__details {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: 120px auto;
|
||||
gap: 4px 8px;
|
||||
|
||||
div {
|
||||
@include rem(13);
|
||||
font-weight: 500;
|
||||
line-height: 120%;
|
||||
color: #2C7873;
|
||||
|
||||
&:nth-child(2n) {
|
||||
color: #6FB98F;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.b-users-list {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
padding: 0 16px;
|
||||
|
||||
&__empty {
|
||||
color: gray;
|
||||
}
|
||||
|
||||
&-item {
|
||||
padding: 0 0 16px;
|
||||
border-bottom: 1px solid #C4DFE6;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
& > div {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.b-room-form {
|
||||
&__grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 16px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.ant-form-item {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.card-detail__apply {
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.b-room-switch {
|
||||
label {
|
||||
margin-right: 24px;
|
||||
&:after {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
& > div {
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ant-select-item-option-content {
|
||||
span {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
}
|
||||
|
|
@ -8,6 +8,7 @@
|
|||
border-radius: 8px !important;
|
||||
padding: 22px 16px 8px !important;
|
||||
box-shadow: none !important;
|
||||
z-index: 1;
|
||||
|
||||
.ant-select-selection-item {
|
||||
font-size: 15px !important;
|
||||
|
|
@ -53,7 +54,7 @@
|
|||
}
|
||||
|
||||
&-label {
|
||||
font-size: 15px;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
|
||||
.ant-picker-input {
|
||||
input {
|
||||
font-size: 15px !important;
|
||||
font-size: 14px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,6 +9,8 @@
|
|||
@import "_practice.scss";
|
||||
@import "_collapse.scss";
|
||||
@import "_timepicker.scss";
|
||||
@import "_datepicker.scss";
|
||||
@import "_calendar.scss";
|
||||
@import "_schedule.scss";
|
||||
@import "_radio.scss";
|
||||
@import "_room.scss";
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
import type { ChainModifiers, Entry, EntryFieldTypes, EntrySkeletonType, LocaleCode } from 'contentful'
|
||||
import {BlogPostFields} from "./blogPost";
|
||||
import {ContentImage} from "../lib/contentful/contentImage";
|
||||
|
||||
export interface AuthorFields {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,44 @@
|
|||
import { PublicUser, Session, SessionState } from './sessions';
|
||||
import { Tag } from './tags';
|
||||
import { Slot } from './experts';
|
||||
|
||||
export enum RoomsType {
|
||||
UPCOMING = 'upcoming',
|
||||
RECENT = 'recent',
|
||||
NEW = 'new',
|
||||
}
|
||||
|
||||
export type Record = {
|
||||
id: number;
|
||||
sessionId: number;
|
||||
sid?: string;
|
||||
resourceId?: string;
|
||||
readyForLoad?: boolean;
|
||||
cname?: string;
|
||||
}
|
||||
|
||||
export type Room = Session & { recordings?: Record[] };
|
||||
|
||||
export type GetUsersForRooms = {
|
||||
items?: PublicUser[],
|
||||
isTooManyResults?: boolean;
|
||||
}
|
||||
|
||||
export type RoomEdit = {
|
||||
id: number,
|
||||
scheduledStartAtUtc?: string,
|
||||
scheduledEndAtUtc?: string,
|
||||
state?: SessionState,
|
||||
cost?: number,
|
||||
maxClients?: number,
|
||||
title?: string,
|
||||
description?: string,
|
||||
isNeedSupervisor?: boolean,
|
||||
tagIds?: number[]
|
||||
};
|
||||
|
||||
export type RoomEditDTO = {
|
||||
item: RoomEdit;
|
||||
tags?: Tag[];
|
||||
availableSlots: Slot[];
|
||||
};
|
||||
|
|
@ -6,6 +6,8 @@ export type PublicUser = {
|
|||
name?: string;
|
||||
surname?: string;
|
||||
faceImageUrl?: string;
|
||||
coachBotId?: number;
|
||||
parentId?: number;
|
||||
};
|
||||
|
||||
// type User = {
|
||||
|
|
@ -148,6 +150,7 @@ export type Session = {
|
|||
themesTags?: SessionTag[];
|
||||
coachComments?: SessionComment[];
|
||||
clientComments?: SessionComment[];
|
||||
creatorId?: number;
|
||||
};
|
||||
|
||||
export enum SessionType {
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import { message } from 'antd';
|
|||
import type { UploadFile } from 'antd';
|
||||
import { i18nText } from '../i18nKeys';
|
||||
|
||||
const ROUTES = ['sessions', 'notifications', 'support', 'information', 'settings', 'messages', 'expert-profile'];
|
||||
const ROUTES = ['sessions', 'rooms', 'notifications', 'support', 'information', 'settings', 'messages', 'expert-profile'];
|
||||
const COUNTS: Record<string, number> = {
|
||||
sessions: 12,
|
||||
notifications: 5,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,28 @@
|
|||
import locale_ru from 'antd/lib/calendar/locale/ru_RU';
|
||||
import locale_en from 'antd/lib/calendar/locale/en_GB';
|
||||
import locale_de from 'antd/lib/calendar/locale/de_DE';
|
||||
import locale_it from 'antd/lib/calendar/locale/it_IT';
|
||||
import locale_es from 'antd/lib/calendar/locale/es_ES';
|
||||
import locale_fr from 'antd/lib/calendar/locale/fr_FR';
|
||||
|
||||
// for calendars
|
||||
export const getLocale = (locale: string) => {
|
||||
if (locale) {
|
||||
switch (locale) {
|
||||
case 'ru':
|
||||
return locale_ru;
|
||||
case 'de':
|
||||
return locale_de;
|
||||
case 'fr':
|
||||
return locale_fr;
|
||||
case 'it':
|
||||
return locale_it;
|
||||
case 'es':
|
||||
return locale_es;
|
||||
default:
|
||||
return locale_en;
|
||||
}
|
||||
}
|
||||
|
||||
return locale_en;
|
||||
};
|
||||
Loading…
Reference in New Issue