Classlist ve NewClassroom
This commit is contained in:
Sedat ÖZTÜRK
parent
9d88671c3a
commit
7e402d352c
2 changed files with 78 additions and 91 deletions
|
|
@ -10,7 +10,7 @@ export interface User {
|
|||
}
|
||||
|
||||
export interface ClassroomDto {
|
||||
id: string
|
||||
id?: string
|
||||
name: string
|
||||
description?: string
|
||||
subject?: string
|
||||
|
|
|
|||
|
|
@ -27,13 +27,20 @@ const ClassList: React.FC = () => {
|
|||
const navigate = useNavigate()
|
||||
const { user } = useStoreState((state) => state.auth)
|
||||
|
||||
const newClassEntity = {
|
||||
const newClassEntity: ClassroomDto = {
|
||||
id: crypto.randomUUID(),
|
||||
name: '',
|
||||
description: '',
|
||||
subject: '',
|
||||
teacherId: user.id,
|
||||
teacherName: user.name,
|
||||
scheduledStartTime: '',
|
||||
duration: 60,
|
||||
maxParticipants: 30,
|
||||
isActive: false,
|
||||
isScheduled: true,
|
||||
participantCount: 0,
|
||||
canJoin: false,
|
||||
settings: {
|
||||
allowHandRaise: true,
|
||||
allowStudentChat: true,
|
||||
|
|
@ -46,10 +53,7 @@ const ClassList: React.FC = () => {
|
|||
},
|
||||
}
|
||||
const [classList, setClassList] = useState<ClassroomDto[]>([])
|
||||
|
||||
const [newClassroom, setNewClassroom] = useState(newClassEntity)
|
||||
const [editingClass, setEditingClass] = useState<ClassroomDto | null>(null)
|
||||
const [deletingClass, setDeletingClass] = useState<ClassroomDto | null>(null)
|
||||
const [classroom, setClassroom] = useState<ClassroomDto>(newClassEntity)
|
||||
|
||||
const [showCreateModal, setShowCreateModal] = useState(false)
|
||||
const [showEditModal, setShowEditModal] = useState(false)
|
||||
|
|
@ -75,32 +79,16 @@ const ClassList: React.FC = () => {
|
|||
|
||||
const handleCreateClass = async (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
const newClass: ClassroomDto = {
|
||||
...newClassroom,
|
||||
id: crypto.randomUUID(),
|
||||
teacherId: user.id,
|
||||
teacherName: user.name,
|
||||
isActive: false,
|
||||
isScheduled: true,
|
||||
participantCount: 0,
|
||||
actualStartTime: '',
|
||||
canJoin: false,
|
||||
settings: {
|
||||
...newClassroom.settings,
|
||||
defaultMicrophoneState: newClassroom.settings.defaultMicrophoneState as 'muted' | 'unmuted',
|
||||
defaultCameraState: newClassroom.settings.defaultCameraState as 'on' | 'off',
|
||||
},
|
||||
}
|
||||
|
||||
try {
|
||||
await createClassroom(newClass)
|
||||
await createClassroom(newClassEntity)
|
||||
|
||||
getClassroomList()
|
||||
setShowCreateModal(false)
|
||||
setNewClassroom(newClassEntity)
|
||||
setClassroom(newClassEntity)
|
||||
|
||||
if (newClass.id) {
|
||||
navigate(ROUTES_ENUM.protected.admin.classroom.classroom.replace(':id', newClass.id))
|
||||
if (classroom.id) {
|
||||
navigate(ROUTES_ENUM.protected.admin.classroom.classroom.replace(':id', classroom.id))
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Sınıf oluştururken hata oluştu:', error)
|
||||
|
|
@ -109,14 +97,14 @@ const ClassList: React.FC = () => {
|
|||
|
||||
const handleEditClass = async (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
if (!editingClass) return
|
||||
if (!classroom) return
|
||||
|
||||
try {
|
||||
await updateClassroom(editingClass)
|
||||
await updateClassroom(classroom)
|
||||
|
||||
getClassroomList()
|
||||
setShowEditModal(false)
|
||||
setEditingClass(null)
|
||||
setClassroom(newClassEntity)
|
||||
resetForm()
|
||||
} catch (error) {
|
||||
console.error('Sınıf oluştururken hata oluştu:', error)
|
||||
|
|
@ -124,30 +112,30 @@ const ClassList: React.FC = () => {
|
|||
}
|
||||
|
||||
const openEditModal = (classSession: ClassroomDto) => {
|
||||
setEditingClass(classSession)
|
||||
setClassroom(classSession)
|
||||
setShowEditModal(true)
|
||||
}
|
||||
|
||||
const openDeleteModal = (classSession: ClassroomDto) => {
|
||||
setDeletingClass(classSession)
|
||||
setClassroom(classSession)
|
||||
setShowDeleteModal(true)
|
||||
}
|
||||
|
||||
const handleDeleteClass = async () => {
|
||||
if (!deletingClass) return
|
||||
if (!classroom) return
|
||||
|
||||
try {
|
||||
await deleteClassroom(deletingClass.id)
|
||||
await deleteClassroom(classroom.id!)
|
||||
getClassroomList()
|
||||
setShowDeleteModal(false)
|
||||
setDeletingClass(null)
|
||||
setClassroom(newClassEntity)
|
||||
} catch (error) {
|
||||
console.error('Sınıf silinirken hata oluştu:', error)
|
||||
}
|
||||
}
|
||||
|
||||
const resetForm = () => {
|
||||
setNewClassroom(newClassEntity)
|
||||
setClassroom(newClassEntity)
|
||||
}
|
||||
|
||||
const handleStartClass = (classSession: ClassroomDto) => {
|
||||
|
|
@ -422,7 +410,7 @@ const ClassList: React.FC = () => {
|
|||
</div>
|
||||
|
||||
{/* Class Modal (Create/Edit) */}
|
||||
{(showCreateModal || (showEditModal && editingClass)) && (
|
||||
{(showCreateModal || (showEditModal && classroom)) && (
|
||||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.95 }}
|
||||
|
|
@ -445,8 +433,8 @@ const ClassList: React.FC = () => {
|
|||
type="text"
|
||||
required
|
||||
autoFocus={showCreateModal}
|
||||
value={newClassroom.name}
|
||||
onChange={(e) => setNewClassroom({ ...newClassroom, name: e.target.value })}
|
||||
value={classroom.name}
|
||||
onChange={(e) => setClassroom({ ...classroom, name: e.target.value })}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
placeholder="Örn: Matematik 101 - Diferansiyel Denklemler"
|
||||
/>
|
||||
|
|
@ -455,10 +443,8 @@ const ClassList: React.FC = () => {
|
|||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">Açıklama</label>
|
||||
<textarea
|
||||
value={newClassroom.description}
|
||||
onChange={(e) =>
|
||||
setNewClassroom({ ...newClassroom, description: e.target.value })
|
||||
}
|
||||
value={classroom.description}
|
||||
onChange={(e) => setClassroom({ ...classroom, description: e.target.value })}
|
||||
rows={3}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
placeholder="Ders hakkında kısa açıklama..."
|
||||
|
|
@ -472,8 +458,8 @@ const ClassList: React.FC = () => {
|
|||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={newClassroom.subject}
|
||||
onChange={(e) => setNewClassroom({ ...newClassroom, subject: e.target.value })}
|
||||
value={classroom.subject}
|
||||
onChange={(e) => setClassroom({ ...classroom, subject: e.target.value })}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
placeholder="Örn: Matematik, Fizik, Kimya"
|
||||
/>
|
||||
|
|
@ -486,10 +472,12 @@ const ClassList: React.FC = () => {
|
|||
<input
|
||||
type="datetime-local"
|
||||
required
|
||||
value={newClassroom.scheduledStartTime}
|
||||
value={
|
||||
classroom.scheduledStartTime ? classroom.scheduledStartTime.slice(0, 16) : ''
|
||||
}
|
||||
onChange={(e) =>
|
||||
setNewClassroom({
|
||||
...newClassroom,
|
||||
setClassroom({
|
||||
...classroom,
|
||||
scheduledStartTime: e.target.value,
|
||||
})
|
||||
}
|
||||
|
|
@ -507,10 +495,10 @@ const ClassList: React.FC = () => {
|
|||
type="number"
|
||||
min="15"
|
||||
max="480"
|
||||
value={newClassroom.duration}
|
||||
value={classroom.duration}
|
||||
onChange={(e) =>
|
||||
setNewClassroom({
|
||||
...newClassroom,
|
||||
setClassroom({
|
||||
...classroom,
|
||||
duration: parseInt(e.target.value),
|
||||
})
|
||||
}
|
||||
|
|
@ -526,10 +514,10 @@ const ClassList: React.FC = () => {
|
|||
type="number"
|
||||
min="1"
|
||||
max="100"
|
||||
value={newClassroom.maxParticipants}
|
||||
value={classroom.maxParticipants}
|
||||
onChange={(e) =>
|
||||
setNewClassroom({
|
||||
...newClassroom,
|
||||
setClassroom({
|
||||
...classroom,
|
||||
maxParticipants: parseInt(e.target.value),
|
||||
})
|
||||
}
|
||||
|
|
@ -548,12 +536,12 @@ const ClassList: React.FC = () => {
|
|||
<label className="flex items-center space-x-3">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={newClassroom.settings.allowHandRaise}
|
||||
checked={classroom.settings?.allowHandRaise}
|
||||
onChange={(e) =>
|
||||
setNewClassroom({
|
||||
...newClassroom,
|
||||
setClassroom({
|
||||
...classroom,
|
||||
settings: {
|
||||
...newClassroom.settings,
|
||||
...classroom.settings!,
|
||||
allowHandRaise: e.target.checked,
|
||||
},
|
||||
})
|
||||
|
|
@ -565,12 +553,12 @@ const ClassList: React.FC = () => {
|
|||
<label className="flex items-center space-x-3">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={newClassroom.settings.allowStudentChat}
|
||||
checked={classroom.settings?.allowStudentChat}
|
||||
onChange={(e) =>
|
||||
setNewClassroom({
|
||||
...newClassroom,
|
||||
setClassroom({
|
||||
...classroom,
|
||||
settings: {
|
||||
...newClassroom.settings,
|
||||
...classroom.settings!,
|
||||
allowStudentChat: e.target.checked,
|
||||
},
|
||||
})
|
||||
|
|
@ -582,12 +570,12 @@ const ClassList: React.FC = () => {
|
|||
<label className="flex items-center space-x-3">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={newClassroom.settings.allowPrivateMessages}
|
||||
checked={classroom.settings?.allowPrivateMessages}
|
||||
onChange={(e) =>
|
||||
setNewClassroom({
|
||||
...newClassroom,
|
||||
setClassroom({
|
||||
...classroom,
|
||||
settings: {
|
||||
...newClassroom.settings,
|
||||
...classroom.settings!,
|
||||
allowPrivateMessages: e.target.checked,
|
||||
},
|
||||
})
|
||||
|
|
@ -599,12 +587,12 @@ const ClassList: React.FC = () => {
|
|||
<label className="flex items-center space-x-3">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={newClassroom.settings.allowStudentScreenShare}
|
||||
checked={classroom.settings?.allowStudentScreenShare}
|
||||
onChange={(e) =>
|
||||
setNewClassroom({
|
||||
...newClassroom,
|
||||
setClassroom({
|
||||
...classroom,
|
||||
settings: {
|
||||
...newClassroom.settings,
|
||||
...classroom.settings!,
|
||||
allowStudentScreenShare: e.target.checked,
|
||||
},
|
||||
})
|
||||
|
|
@ -623,12 +611,12 @@ const ClassList: React.FC = () => {
|
|||
Varsayılan mikrofon durumu
|
||||
</label>
|
||||
<select
|
||||
value={newClassroom.settings.defaultMicrophoneState}
|
||||
value={classroom.settings?.defaultMicrophoneState}
|
||||
onChange={(e) =>
|
||||
setNewClassroom({
|
||||
...newClassroom,
|
||||
setClassroom({
|
||||
...classroom,
|
||||
settings: {
|
||||
...newClassroom.settings,
|
||||
...classroom.settings!,
|
||||
defaultMicrophoneState: e.target.value as 'muted' | 'unmuted',
|
||||
},
|
||||
})
|
||||
|
|
@ -645,12 +633,12 @@ const ClassList: React.FC = () => {
|
|||
Varsayılan kamera durumu
|
||||
</label>
|
||||
<select
|
||||
value={newClassroom.settings.defaultCameraState}
|
||||
value={classroom.settings?.defaultCameraState}
|
||||
onChange={(e) =>
|
||||
setNewClassroom({
|
||||
...newClassroom,
|
||||
setClassroom({
|
||||
...classroom,
|
||||
settings: {
|
||||
...newClassroom.settings,
|
||||
...classroom.settings!,
|
||||
defaultCameraState: e.target.value as 'on' | 'off',
|
||||
},
|
||||
})
|
||||
|
|
@ -667,12 +655,12 @@ const ClassList: React.FC = () => {
|
|||
Varsayılan layout
|
||||
</label>
|
||||
<select
|
||||
value={newClassroom.settings.defaultLayout}
|
||||
value={classroom.settings?.defaultLayout}
|
||||
onChange={(e) =>
|
||||
setNewClassroom({
|
||||
...newClassroom,
|
||||
setClassroom({
|
||||
...classroom,
|
||||
settings: {
|
||||
...newClassroom.settings,
|
||||
...classroom.settings!,
|
||||
defaultLayout: e.target.value,
|
||||
},
|
||||
})
|
||||
|
|
@ -689,12 +677,12 @@ const ClassList: React.FC = () => {
|
|||
<label className="flex items-center space-x-3">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={newClassroom.settings.autoMuteNewParticipants}
|
||||
checked={classroom.settings?.autoMuteNewParticipants}
|
||||
onChange={(e) =>
|
||||
setNewClassroom({
|
||||
...newClassroom,
|
||||
setClassroom({
|
||||
...classroom,
|
||||
settings: {
|
||||
...newClassroom.settings,
|
||||
...classroom.settings!,
|
||||
autoMuteNewParticipants: e.target.checked,
|
||||
},
|
||||
})
|
||||
|
|
@ -714,7 +702,7 @@ const ClassList: React.FC = () => {
|
|||
if (showCreateModal) setShowCreateModal(false)
|
||||
if (showEditModal) {
|
||||
setShowEditModal(false)
|
||||
setEditingClass(null)
|
||||
setClassroom(newClassEntity)
|
||||
resetForm()
|
||||
}
|
||||
}}
|
||||
|
|
@ -735,7 +723,7 @@ const ClassList: React.FC = () => {
|
|||
)}
|
||||
|
||||
{/* Delete Confirmation Modal */}
|
||||
{showDeleteModal && deletingClass && (
|
||||
{showDeleteModal && classroom && (
|
||||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.95 }}
|
||||
|
|
@ -754,15 +742,14 @@ const ClassList: React.FC = () => {
|
|||
</div>
|
||||
|
||||
<p className="text-gray-700 mb-6">
|
||||
<strong>"{deletingClass.name}"</strong> adlı sınıfı silmek istediğinizden emin
|
||||
misiniz?
|
||||
<strong>"{classroom.name}"</strong> adlı sınıfı silmek istediğinizden emin misiniz?
|
||||
</p>
|
||||
|
||||
<div className="flex items-center justify-end space-x-4">
|
||||
<button
|
||||
onClick={() => {
|
||||
setShowDeleteModal(false)
|
||||
setDeletingClass(null)
|
||||
setClassroom(newClassEntity)
|
||||
}}
|
||||
className="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors"
|
||||
>
|
||||
|
|
|
|||
Loading…
Reference in a new issue