863 lines
31 KiB
TypeScript
863 lines
31 KiB
TypeScript
|
import React, { useState } from "react";
|
|||
|
|
import {
|
|||
|
|
FaEye,
|
|||
|
|
FaEdit,
|
|||
|
|
FaPlus,
|
|||
|
|
FaTimes,
|
|||
|
|
FaSave,
|
|||
|
|
FaTrash,
|
|||
|
|
FaQuestionCircle,
|
|||
|
|
} from "react-icons/fa";
|
|||
|
|
import {
|
|||
|
|
HrEvaluation360Template,
|
|||
|
|
HrQuestionGroup,
|
|||
|
|
HrEvaluationQuestion,
|
|||
|
|
QuestionTypeEnum,
|
|||
|
|
HrQuestionOption,
|
|||
|
|
AssessorTypeEnum,
|
|||
|
|
} from "../../../types/hr";
|
|||
|
|
import DataTable, { Column } from "../../../components/common/DataTable";
|
|||
|
|
import { mockEvaluation360Templates } from "../../../mocks/mockEvaluation360Templates";
|
|||
|
|
import Widget from "../../../components/common/Widget";
|
|||
|
|
|
|||
|
|
const Degree360Templates: React.FC = () => {
|
|||
|
|
const [templateSearchTerm, setTemplateSearchTerm] = useState("");
|
|||
|
|
|
|||
|
|
// Modal states
|
|||
|
|
const [showTemplateModal, setShowTemplateModal] = useState(false);
|
|||
|
|
const [showQuestionModal, setShowQuestionModal] = useState(false);
|
|||
|
|
const [showQuestionItemModal, setShowQuestionItemModal] = useState(false);
|
|||
|
|
const [selectedTemplate, setSelectedTemplate] =
|
|||
|
|
useState<HrEvaluation360Template | null>(null);
|
|||
|
|
const [selectedQuestionGroup, setSelectedQuestionGroup] =
|
|||
|
|
useState<HrQuestionGroup | null>(null);
|
|||
|
|
const [selectedQuestion, setSelectedQuestion] =
|
|||
|
|
useState<HrEvaluationQuestion | null>(null);
|
|||
|
|
const [isEditMode, setIsEditMode] = useState(false);
|
|||
|
|
|
|||
|
|
// Form states
|
|||
|
|
const [templateForm, setTemplateForm] = useState({
|
|||
|
|
name: "",
|
|||
|
|
description: "",
|
|||
|
|
isActive: true,
|
|||
|
|
assessorTypes: [] as AssessorTypeEnum[],
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const [questionGroupForm, setQuestionGroupForm] = useState({
|
|||
|
|
groupName: "",
|
|||
|
|
description: "",
|
|||
|
|
weight: 0,
|
|||
|
|
order: 0,
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const [questionForm, setQuestionForm] = useState({
|
|||
|
|
questionText: "",
|
|||
|
|
questionType: QuestionTypeEnum.Rating,
|
|||
|
|
isRequired: true,
|
|||
|
|
order: 0,
|
|||
|
|
weight: 0,
|
|||
|
|
options: [] as HrQuestionOption[],
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Filter templates
|
|||
|
|
const filteredTemplates = mockEvaluation360Templates.filter((template) => {
|
|||
|
|
const searchLower = templateSearchTerm.toLowerCase();
|
|||
|
|
return (
|
|||
|
|
template.name.toLowerCase().includes(searchLower) ||
|
|||
|
|
template.description.toLowerCase().includes(searchLower)
|
|||
|
|
);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Statistics
|
|||
|
|
const totalTemplates = mockEvaluation360Templates.length;
|
|||
|
|
const activeTemplates = mockEvaluation360Templates.filter(
|
|||
|
|
(t) => t.isActive
|
|||
|
|
).length;
|
|||
|
|
|
|||
|
|
// Event handlers
|
|||
|
|
const handleNewTemplate = () => {
|
|||
|
|
setTemplateForm({
|
|||
|
|
name: "",
|
|||
|
|
description: "",
|
|||
|
|
isActive: true,
|
|||
|
|
assessorTypes: [],
|
|||
|
|
});
|
|||
|
|
setSelectedTemplate(null);
|
|||
|
|
setIsEditMode(false);
|
|||
|
|
setShowTemplateModal(true);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleEditTemplate = (template: HrEvaluation360Template) => {
|
|||
|
|
setTemplateForm({
|
|||
|
|
name: template.name,
|
|||
|
|
description: template.description,
|
|||
|
|
isActive: template.isActive,
|
|||
|
|
assessorTypes: template.assessorTypes || [],
|
|||
|
|
});
|
|||
|
|
setSelectedTemplate(template);
|
|||
|
|
setIsEditMode(true);
|
|||
|
|
setShowTemplateModal(true);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleViewTemplate = (template: HrEvaluation360Template) => {
|
|||
|
|
setTemplateForm({
|
|||
|
|
name: template.name,
|
|||
|
|
description: template.description,
|
|||
|
|
isActive: template.isActive,
|
|||
|
|
assessorTypes: template.assessorTypes || [],
|
|||
|
|
});
|
|||
|
|
setSelectedTemplate(template);
|
|||
|
|
setShowTemplateModal(true);
|
|||
|
|
setIsEditMode(false);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleSaveTemplate = () => {
|
|||
|
|
console.log("Saving template:", templateForm);
|
|||
|
|
setShowTemplateModal(false);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleDeleteTemplate = (template: HrEvaluation360Template) => {
|
|||
|
|
if (
|
|||
|
|
confirm(
|
|||
|
|
`"${template.name}" şablonunu silmek istediğinizden emin misiniz?`
|
|||
|
|
)
|
|||
|
|
) {
|
|||
|
|
console.log("Deleting template:", template.id);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleAddQuestionGroup = () => {
|
|||
|
|
setQuestionGroupForm({
|
|||
|
|
groupName: "",
|
|||
|
|
description: "",
|
|||
|
|
weight: 0,
|
|||
|
|
order: 0,
|
|||
|
|
});
|
|||
|
|
setSelectedQuestionGroup(null);
|
|||
|
|
setShowQuestionModal(true);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleEditQuestionGroup = (group: HrQuestionGroup) => {
|
|||
|
|
setQuestionGroupForm({
|
|||
|
|
groupName: group.groupName,
|
|||
|
|
description: group.description || "",
|
|||
|
|
weight: group.weight,
|
|||
|
|
order: group.order,
|
|||
|
|
});
|
|||
|
|
setSelectedQuestionGroup(group);
|
|||
|
|
setShowQuestionModal(true);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleSaveQuestionGroup = () => {
|
|||
|
|
console.log("Saving question group:", questionGroupForm);
|
|||
|
|
setShowQuestionModal(false);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleAddQuestion = (group: HrQuestionGroup) => {
|
|||
|
|
setQuestionForm({
|
|||
|
|
questionText: "",
|
|||
|
|
questionType: QuestionTypeEnum.Rating,
|
|||
|
|
isRequired: true,
|
|||
|
|
order: 0,
|
|||
|
|
weight: 0,
|
|||
|
|
options: [],
|
|||
|
|
});
|
|||
|
|
setSelectedQuestion(null);
|
|||
|
|
setSelectedQuestionGroup(group);
|
|||
|
|
setShowQuestionItemModal(true);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleEditQuestion = (
|
|||
|
|
question: HrEvaluationQuestion,
|
|||
|
|
group: HrQuestionGroup
|
|||
|
|
) => {
|
|||
|
|
setQuestionForm({
|
|||
|
|
questionText: question.questionText,
|
|||
|
|
questionType: question.questionType,
|
|||
|
|
isRequired: question.isRequired,
|
|||
|
|
order: question.order,
|
|||
|
|
weight: question.weight,
|
|||
|
|
options: question.options || [],
|
|||
|
|
});
|
|||
|
|
setSelectedQuestion(question);
|
|||
|
|
setSelectedQuestionGroup(group);
|
|||
|
|
setShowQuestionItemModal(true);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleSaveQuestion = () => {
|
|||
|
|
console.log("Saving question:", questionForm);
|
|||
|
|
setShowQuestionItemModal(false);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// Table columns
|
|||
|
|
const templateColumns: Column<HrEvaluation360Template>[] = [
|
|||
|
|
{
|
|||
|
|
key: "name",
|
|||
|
|
header: "Şablon Adı",
|
|||
|
|
sortable: true,
|
|||
|
|
render: (template) => (
|
|||
|
|
<div>
|
|||
|
|
<div className="font-medium text-gray-900">{template.name}</div>
|
|||
|
|
<div className="text-sm text-gray-500">{template.description}</div>
|
|||
|
|
</div>
|
|||
|
|
),
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
key: "questionGroups",
|
|||
|
|
header: "Soru Grupları",
|
|||
|
|
render: (template) => (
|
|||
|
|
<span className="text-sm text-gray-600">
|
|||
|
|
{template.questionGroups?.length || 0} grup
|
|||
|
|
</span>
|
|||
|
|
),
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
key: "assessorTypes",
|
|||
|
|
header: "Değerlendirecekler",
|
|||
|
|
render: (template) => {
|
|||
|
|
const assessorLabels = {
|
|||
|
|
[AssessorTypeEnum.Self]: "Kendi",
|
|||
|
|
[AssessorTypeEnum.Manager]: "Yönetici",
|
|||
|
|
[AssessorTypeEnum.Peer]: "Meslektaş",
|
|||
|
|
[AssessorTypeEnum.Subordinate]: "Ast",
|
|||
|
|
[AssessorTypeEnum.Customer]: "Müşteri",
|
|||
|
|
[AssessorTypeEnum.OtherDepartment]: "Diğer Departman",
|
|||
|
|
[AssessorTypeEnum.HRUpperManagement]: "İK/Üst Yönetim",
|
|||
|
|
[AssessorTypeEnum.External]: "Dış Paydaş",
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const assessorTypes = template.assessorTypes || [];
|
|||
|
|
return (
|
|||
|
|
<div className="flex flex-wrap gap-1">
|
|||
|
|
{assessorTypes.map((type) => (
|
|||
|
|
<span
|
|||
|
|
key={type}
|
|||
|
|
className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800"
|
|||
|
|
>
|
|||
|
|
{assessorLabels[type] || type}
|
|||
|
|
</span>
|
|||
|
|
))}
|
|||
|
|
{assessorTypes.length === 0 && (
|
|||
|
|
<span className="text-sm text-gray-400">Belirtilmemiş</span>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
key: "isActive",
|
|||
|
|
header: "Durum",
|
|||
|
|
render: (template) => (
|
|||
|
|
<span
|
|||
|
|
className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
|
|||
|
|
template.isActive
|
|||
|
|
? "bg-green-100 text-green-800"
|
|||
|
|
: "bg-red-100 text-red-800"
|
|||
|
|
}`}
|
|||
|
|
>
|
|||
|
|
{template.isActive ? "Aktif" : "Pasif"}
|
|||
|
|
</span>
|
|||
|
|
),
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
key: "actions",
|
|||
|
|
header: "İşlemler",
|
|||
|
|
render: (template) => (
|
|||
|
|
<div className="flex items-center gap-2">
|
|||
|
|
<button
|
|||
|
|
onClick={() => handleViewTemplate(template)}
|
|||
|
|
className="text-blue-600 hover:text-blue-900"
|
|||
|
|
title="Görüntüle"
|
|||
|
|
>
|
|||
|
|
<FaEye className="w-4 h-4" />
|
|||
|
|
</button>
|
|||
|
|
<button
|
|||
|
|
onClick={() => handleEditTemplate(template)}
|
|||
|
|
className="text-green-600 hover:text-green-900"
|
|||
|
|
title="Düzenle"
|
|||
|
|
>
|
|||
|
|
<FaEdit className="w-4 h-4" />
|
|||
|
|
</button>
|
|||
|
|
<button
|
|||
|
|
onClick={() => handleDeleteTemplate(template)}
|
|||
|
|
className="text-red-600 hover:text-red-900"
|
|||
|
|
title="Sil"
|
|||
|
|
>
|
|||
|
|
<FaTrash className="w-4 h-4" />
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
),
|
|||
|
|
},
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="space-y-4 mt-2">
|
|||
|
|
{/* Header */}
|
|||
|
|
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
|
|||
|
|
<div>
|
|||
|
|
<h2 className="text-xl font-bold text-gray-900">360° Şablonlar</h2>
|
|||
|
|
<p className="text-sm text-gray-600 mt-1">
|
|||
|
|
360 derece değerlendirme şablonlarını yönetin
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<button
|
|||
|
|
onClick={handleNewTemplate}
|
|||
|
|
className="flex items-center gap-2 px-3 py-1.5 bg-purple-600 text-white rounded-md hover:bg-purple-700 ml-4 text-sm"
|
|||
|
|
>
|
|||
|
|
<FaPlus className="w-4 h-4" />
|
|||
|
|
Yeni Şablon
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Statistics */}
|
|||
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|||
|
|
<Widget
|
|||
|
|
title="Toplam Şablon"
|
|||
|
|
value={totalTemplates}
|
|||
|
|
color="purple"
|
|||
|
|
icon="FaClipboardList"
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
<Widget
|
|||
|
|
title="Aktif Şablon"
|
|||
|
|
value={activeTemplates}
|
|||
|
|
color="green"
|
|||
|
|
icon="FaClipboardList"
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
<Widget
|
|||
|
|
title="Pasif Şablon"
|
|||
|
|
value={totalTemplates - activeTemplates}
|
|||
|
|
color="red"
|
|||
|
|
icon="FaClipboardList"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="bg-white p-4 rounded-lg border">
|
|||
|
|
<div className="flex-1">
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
placeholder="Şablon adı veya açıklama ile ara..."
|
|||
|
|
value={templateSearchTerm}
|
|||
|
|
onChange={(e) => setTemplateSearchTerm(e.target.value)}
|
|||
|
|
className="w-full border border-gray-300 rounded-md px-3 py-1.5 text-sm focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Templates Table */}
|
|||
|
|
<DataTable data={filteredTemplates} columns={templateColumns} />
|
|||
|
|
|
|||
|
|
{/* Template Modal */}
|
|||
|
|
{showTemplateModal && (
|
|||
|
|
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
|||
|
|
<div className="bg-white rounded-lg p-6 w-full max-w-4xl max-h-[90vh] overflow-y-auto">
|
|||
|
|
<div className="flex justify-between items-center mb-4">
|
|||
|
|
<h2 className="text-lg font-bold">
|
|||
|
|
{isEditMode
|
|||
|
|
? "Şablon Düzenle"
|
|||
|
|
: selectedTemplate
|
|||
|
|
? "Şablon Detayı"
|
|||
|
|
: "Yeni Şablon"}
|
|||
|
|
</h2>
|
|||
|
|
<button
|
|||
|
|
onClick={() => setShowTemplateModal(false)}
|
|||
|
|
className="p-2 text-gray-500 hover:text-gray-700"
|
|||
|
|
>
|
|||
|
|
<FaTimes className="w-5 h-5" />
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="space-y-4">
|
|||
|
|
{/* Basic Information */}
|
|||
|
|
<div className="grid grid-cols-2 gap-4">
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|||
|
|
Şablon Adı
|
|||
|
|
</label>
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
value={templateForm.name}
|
|||
|
|
onChange={(e) =>
|
|||
|
|
setTemplateForm({ ...templateForm, name: e.target.value })
|
|||
|
|
}
|
|||
|
|
className="w-full border border-gray-300 rounded-md px-3 py-1.5 text-sm focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
|
|||
|
|
disabled={!isEditMode && !!selectedTemplate}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|||
|
|
Durum
|
|||
|
|
</label>
|
|||
|
|
<select
|
|||
|
|
value={templateForm.isActive ? "active" : "inactive"}
|
|||
|
|
onChange={(e) =>
|
|||
|
|
setTemplateForm({
|
|||
|
|
...templateForm,
|
|||
|
|
isActive: e.target.value === "active",
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
className="w-full border border-gray-300 rounded-md px-3 py-1.5 text-sm focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
|
|||
|
|
disabled={!isEditMode && !!selectedTemplate}
|
|||
|
|
>
|
|||
|
|
<option value="active">Aktif</option>
|
|||
|
|
<option value="inactive">Pasif</option>
|
|||
|
|
</select>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|||
|
|
Açıklama
|
|||
|
|
</label>
|
|||
|
|
<textarea
|
|||
|
|
value={templateForm.description}
|
|||
|
|
onChange={(e) =>
|
|||
|
|
setTemplateForm({
|
|||
|
|
...templateForm,
|
|||
|
|
description: e.target.value,
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
rows={3}
|
|||
|
|
className="w-full border border-gray-300 rounded-md px-3 py-1.5 text-sm focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
|
|||
|
|
disabled={!isEditMode && !!selectedTemplate}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Değerlendiriciler */}
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|||
|
|
Değerlendirecekler
|
|||
|
|
</label>
|
|||
|
|
<div className="grid grid-cols-2 gap-3">
|
|||
|
|
{Object.values(AssessorTypeEnum).map((type) => {
|
|||
|
|
const labels = {
|
|||
|
|
[AssessorTypeEnum.Self]: "Kendi",
|
|||
|
|
[AssessorTypeEnum.Manager]: "Yönetici",
|
|||
|
|
[AssessorTypeEnum.Peer]: "Meslektaş",
|
|||
|
|
[AssessorTypeEnum.Subordinate]: "Ast",
|
|||
|
|
[AssessorTypeEnum.Customer]: "Müşteri",
|
|||
|
|
[AssessorTypeEnum.OtherDepartment]: "Diğer Departman",
|
|||
|
|
[AssessorTypeEnum.HRUpperManagement]: "İK/Üst Yönetim",
|
|||
|
|
[AssessorTypeEnum.External]: "Dış Paydaş",
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<label key={type} className="flex items-center space-x-2">
|
|||
|
|
<input
|
|||
|
|
type="checkbox"
|
|||
|
|
checked={templateForm.assessorTypes.includes(type)}
|
|||
|
|
onChange={(e) => {
|
|||
|
|
if (e.target.checked) {
|
|||
|
|
setTemplateForm({
|
|||
|
|
...templateForm,
|
|||
|
|
assessorTypes: [
|
|||
|
|
...templateForm.assessorTypes,
|
|||
|
|
type,
|
|||
|
|
],
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
setTemplateForm({
|
|||
|
|
...templateForm,
|
|||
|
|
assessorTypes:
|
|||
|
|
templateForm.assessorTypes.filter(
|
|||
|
|
(t) => t !== type
|
|||
|
|
),
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}}
|
|||
|
|
className="rounded border-gray-300 text-purple-600 focus:ring-purple-500"
|
|||
|
|
disabled={!isEditMode && !!selectedTemplate}
|
|||
|
|
/>
|
|||
|
|
<span className="text-sm text-gray-700">
|
|||
|
|
{labels[type] || type}
|
|||
|
|
</span>
|
|||
|
|
</label>
|
|||
|
|
);
|
|||
|
|
})}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Question Groups */}
|
|||
|
|
{selectedTemplate && (
|
|||
|
|
<div>
|
|||
|
|
<div className="flex justify-between items-center mb-4">
|
|||
|
|
<h3 className="text-lg font-semibold">Soru Grupları</h3>
|
|||
|
|
{isEditMode && (
|
|||
|
|
<button
|
|||
|
|
onClick={handleAddQuestionGroup}
|
|||
|
|
className="flex items-center gap-2 px-2 py-1 bg-blue-600 text-white rounded-md hover:bg-blue-700 text-xs"
|
|||
|
|
>
|
|||
|
|
<FaPlus className="w-3 h-3" />
|
|||
|
|
Grup Ekle
|
|||
|
|
</button>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="space-y-3">
|
|||
|
|
{selectedTemplate.questionGroups?.map(
|
|||
|
|
(group, groupIndex) => (
|
|||
|
|
<div
|
|||
|
|
key={groupIndex}
|
|||
|
|
className="bg-gray-50 p-3 rounded-lg"
|
|||
|
|
>
|
|||
|
|
<div className="flex justify-between items-start mb-3">
|
|||
|
|
<div>
|
|||
|
|
<h4 className="font-medium">{group.groupName}</h4>
|
|||
|
|
<p className="text-sm text-gray-600">
|
|||
|
|
{group.description}
|
|||
|
|
</p>
|
|||
|
|
<p className="text-sm text-gray-600">
|
|||
|
|
Ağırlık: {group.weight}%
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
{isEditMode && (
|
|||
|
|
<div className="flex gap-2">
|
|||
|
|
<button
|
|||
|
|
onClick={() => handleEditQuestionGroup(group)}
|
|||
|
|
className="text-blue-600 hover:text-blue-900"
|
|||
|
|
>
|
|||
|
|
<FaEdit className="w-4 h-4" />
|
|||
|
|
</button>
|
|||
|
|
<button
|
|||
|
|
onClick={() => handleAddQuestion(group)}
|
|||
|
|
className="text-green-600 hover:text-green-900"
|
|||
|
|
>
|
|||
|
|
<FaQuestionCircle className="w-4 h-4" />
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Questions */}
|
|||
|
|
<div className="space-y-2">
|
|||
|
|
{group.questions?.map((question, questionIndex) => (
|
|||
|
|
<div
|
|||
|
|
key={questionIndex}
|
|||
|
|
className="bg-white p-2 rounded border"
|
|||
|
|
>
|
|||
|
|
<div className="flex justify-between items-start">
|
|||
|
|
<div className="flex-1">
|
|||
|
|
<p className="text-sm">
|
|||
|
|
{question.questionText}
|
|||
|
|
</p>
|
|||
|
|
<div className="flex gap-4 mt-1">
|
|||
|
|
<span className="text-xs text-gray-500">
|
|||
|
|
Tip:{" "}
|
|||
|
|
{question.questionType ===
|
|||
|
|
QuestionTypeEnum.Rating
|
|||
|
|
? "Puanlama"
|
|||
|
|
: question.questionType ===
|
|||
|
|
QuestionTypeEnum.MultipleChoice
|
|||
|
|
? "Çoktan Seçmeli"
|
|||
|
|
: question.questionType ===
|
|||
|
|
QuestionTypeEnum.Text
|
|||
|
|
? "Metin"
|
|||
|
|
: "Evet/Hayır"}
|
|||
|
|
</span>
|
|||
|
|
<span className="text-xs text-gray-500">
|
|||
|
|
Ağırlık: {question.weight}%
|
|||
|
|
</span>
|
|||
|
|
{question.isRequired && (
|
|||
|
|
<span className="text-xs text-red-500">
|
|||
|
|
Zorunlu
|
|||
|
|
</span>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
{isEditMode && (
|
|||
|
|
<button
|
|||
|
|
onClick={() =>
|
|||
|
|
handleEditQuestion(question, group)
|
|||
|
|
}
|
|||
|
|
className="text-blue-600 hover:text-blue-900"
|
|||
|
|
>
|
|||
|
|
<FaEdit className="w-4 h-4" />
|
|||
|
|
</button>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="flex justify-end gap-4 mt-4">
|
|||
|
|
<button
|
|||
|
|
onClick={() => setShowTemplateModal(false)}
|
|||
|
|
className="px-3 py-1.5 text-sm border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50"
|
|||
|
|
>
|
|||
|
|
{selectedTemplate && !isEditMode ? "Kapat" : "İptal"}
|
|||
|
|
</button>
|
|||
|
|
{(isEditMode || !selectedTemplate) && (
|
|||
|
|
<button
|
|||
|
|
onClick={handleSaveTemplate}
|
|||
|
|
className="flex items-center gap-2 px-3 py-1.5 text-sm bg-purple-600 text-white rounded-md hover:bg-purple-700"
|
|||
|
|
>
|
|||
|
|
<FaSave className="w-4 h-4" />
|
|||
|
|
Kaydet
|
|||
|
|
</button>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* Question Group Modal */}
|
|||
|
|
{showQuestionModal && (
|
|||
|
|
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
|||
|
|
<div className="bg-white rounded-lg p-6 w-full max-w-md">
|
|||
|
|
<div className="flex justify-between items-center mb-4">
|
|||
|
|
<h2 className="text-lg font-bold">
|
|||
|
|
{selectedQuestionGroup
|
|||
|
|
? "Soru Grubu Düzenle"
|
|||
|
|
: "Yeni Soru Grubu"}
|
|||
|
|
</h2>
|
|||
|
|
<button
|
|||
|
|
onClick={() => setShowQuestionModal(false)}
|
|||
|
|
className="p-2 text-gray-500 hover:text-gray-700"
|
|||
|
|
>
|
|||
|
|
<FaTimes className="w-5 h-5" />
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="space-y-4">
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|||
|
|
Grup Adı
|
|||
|
|
</label>
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
value={questionGroupForm.groupName}
|
|||
|
|
onChange={(e) =>
|
|||
|
|
setQuestionGroupForm({
|
|||
|
|
...questionGroupForm,
|
|||
|
|
groupName: e.target.value,
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
className="w-full border border-gray-300 rounded-md px-3 py-1.5 text-sm focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|||
|
|
Açıklama
|
|||
|
|
</label>
|
|||
|
|
<textarea
|
|||
|
|
value={questionGroupForm.description}
|
|||
|
|
onChange={(e) =>
|
|||
|
|
setQuestionGroupForm({
|
|||
|
|
...questionGroupForm,
|
|||
|
|
description: e.target.value,
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
rows={3}
|
|||
|
|
className="w-full border border-gray-300 rounded-md px-3 py-1.5 text-sm focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="grid grid-cols-2 gap-4">
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|||
|
|
Ağırlık (%)
|
|||
|
|
</label>
|
|||
|
|
<input
|
|||
|
|
type="number"
|
|||
|
|
min="0"
|
|||
|
|
max="100"
|
|||
|
|
value={questionGroupForm.weight}
|
|||
|
|
onChange={(e) =>
|
|||
|
|
setQuestionGroupForm({
|
|||
|
|
...questionGroupForm,
|
|||
|
|
weight: Number(e.target.value),
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
className="w-full border border-gray-300 rounded-md px-3 py-1.5 text-sm focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|||
|
|
Sıra
|
|||
|
|
</label>
|
|||
|
|
<input
|
|||
|
|
type="number"
|
|||
|
|
min="0"
|
|||
|
|
value={questionGroupForm.order}
|
|||
|
|
onChange={(e) =>
|
|||
|
|
setQuestionGroupForm({
|
|||
|
|
...questionGroupForm,
|
|||
|
|
order: Number(e.target.value),
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
className="w-full border border-gray-300 rounded-md px-3 py-1.5 text-sm focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="flex justify-end gap-4 mt-4">
|
|||
|
|
<button
|
|||
|
|
onClick={() => setShowQuestionModal(false)}
|
|||
|
|
className="px-3 py-1.5 text-sm border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50"
|
|||
|
|
>
|
|||
|
|
İptal
|
|||
|
|
</button>
|
|||
|
|
<button
|
|||
|
|
onClick={handleSaveQuestionGroup}
|
|||
|
|
className="flex items-center gap-2 px-3 py-1.5 text-sm bg-purple-600 text-white rounded-md hover:bg-purple-700"
|
|||
|
|
>
|
|||
|
|
<FaSave className="w-4 h-4" />
|
|||
|
|
Kaydet
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* Question Modal */}
|
|||
|
|
{showQuestionItemModal && (
|
|||
|
|
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
|||
|
|
<div className="bg-white rounded-lg p-6 w-full max-w-md">
|
|||
|
|
<div className="flex justify-between items-center mb-4">
|
|||
|
|
<h2 className="text-lg font-bold">
|
|||
|
|
{selectedQuestion ? "Soru Düzenle" : "Yeni Soru"}
|
|||
|
|
</h2>
|
|||
|
|
<button
|
|||
|
|
onClick={() => setShowQuestionItemModal(false)}
|
|||
|
|
className="p-2 text-gray-500 hover:text-gray-700"
|
|||
|
|
>
|
|||
|
|
<FaTimes className="w-5 h-5" />
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="space-y-4">
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|||
|
|
Soru Metni
|
|||
|
|
</label>
|
|||
|
|
<textarea
|
|||
|
|
value={questionForm.questionText}
|
|||
|
|
onChange={(e) =>
|
|||
|
|
setQuestionForm({
|
|||
|
|
...questionForm,
|
|||
|
|
questionText: e.target.value,
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
rows={3}
|
|||
|
|
className="w-full border border-gray-300 rounded-md px-3 py-1.5 text-sm focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|||
|
|
Soru Tipi
|
|||
|
|
</label>
|
|||
|
|
<select
|
|||
|
|
value={questionForm.questionType}
|
|||
|
|
onChange={(e) =>
|
|||
|
|
setQuestionForm({
|
|||
|
|
...questionForm,
|
|||
|
|
questionType: e.target.value as QuestionTypeEnum,
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
className="w-full border border-gray-300 rounded-md px-3 py-1.5 text-sm focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
|
|||
|
|
>
|
|||
|
|
<option value={QuestionTypeEnum.Rating}>Puanlama</option>
|
|||
|
|
<option value={QuestionTypeEnum.MultipleChoice}>
|
|||
|
|
Çoktan Seçmeli
|
|||
|
|
</option>
|
|||
|
|
<option value={QuestionTypeEnum.Text}>Metin</option>
|
|||
|
|
<option value={QuestionTypeEnum.YesNo}>Evet/Hayır</option>
|
|||
|
|
</select>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="grid grid-cols-2 gap-4">
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|||
|
|
Ağırlık (%)
|
|||
|
|
</label>
|
|||
|
|
<input
|
|||
|
|
type="number"
|
|||
|
|
min="0"
|
|||
|
|
max="100"
|
|||
|
|
value={questionForm.weight}
|
|||
|
|
onChange={(e) =>
|
|||
|
|
setQuestionForm({
|
|||
|
|
...questionForm,
|
|||
|
|
weight: Number(e.target.value),
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
className="w-full border border-gray-300 rounded-md px-3 py-1.5 text-sm focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|||
|
|
Sıra
|
|||
|
|
</label>
|
|||
|
|
<input
|
|||
|
|
type="number"
|
|||
|
|
min="0"
|
|||
|
|
value={questionForm.order}
|
|||
|
|
onChange={(e) =>
|
|||
|
|
setQuestionForm({
|
|||
|
|
...questionForm,
|
|||
|
|
order: Number(e.target.value),
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
className="w-full border border-gray-300 rounded-md px-3 py-1.5 text-sm focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="flex items-center">
|
|||
|
|
<input
|
|||
|
|
type="checkbox"
|
|||
|
|
id="isRequired"
|
|||
|
|
checked={questionForm.isRequired}
|
|||
|
|
onChange={(e) =>
|
|||
|
|
setQuestionForm({
|
|||
|
|
...questionForm,
|
|||
|
|
isRequired: e.target.checked,
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
className="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300 rounded"
|
|||
|
|
/>
|
|||
|
|
<label
|
|||
|
|
htmlFor="isRequired"
|
|||
|
|
className="ml-2 block text-sm text-gray-700"
|
|||
|
|
>
|
|||
|
|
Zorunlu soru
|
|||
|
|
</label>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="flex justify-end gap-4 mt-4">
|
|||
|
|
<button
|
|||
|
|
onClick={() => setShowQuestionItemModal(false)}
|
|||
|
|
className="px-3 py-1.5 text-sm border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50"
|
|||
|
|
>
|
|||
|
|
İptal
|
|||
|
|
</button>
|
|||
|
|
<button
|
|||
|
|
onClick={handleSaveQuestion}
|
|||
|
|
className="flex items-center gap-2 px-3 py-1.5 text-sm bg-purple-600 text-white rounded-md hover:bg-purple-700"
|
|||
|
|
>
|
|||
|
|
<FaSave className="w-4 h-4" />
|
|||
|
|
Kaydet
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
export default Degree360Templates;
|