feat: integrate Quill editor for internship journal entries, add retroactive field support, and enforce future date restrictions
This commit is contained in:
Ümit Tunç
@@ -722,14 +722,20 @@
|
||||
</div>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<div id="future-warning" class="hidden p-4 bg-amber-50/50 border border-amber-200 rounded-2xl text-xs text-amber-700 font-semibold leading-relaxed">
|
||||
<i class="uil uil-exclamation-triangle text-sm mr-1"></i> Bu staj günü henüz gerçekleşmediği için staj günlüğü yazılamaz veya düzenlenemez.
|
||||
</div>
|
||||
|
||||
<div id="editor-wrapper">
|
||||
<label class="block text-xs font-extrabold text-slate-500 uppercase tracking-wider mb-2">Günlük Çalışma Raporu</label>
|
||||
<textarea id="editor-content" rows="10" placeholder="Bu staj gününde yaptığınız çalışmaları detaylıca yazın..." class="w-full px-4 py-3 rounded-xl border border-slate-200 focus:border-blue-400 focus:ring-1 focus:ring-blue-400 focus:outline-none text-sm font-semibold text-slate-700 bg-white transition-all"></textarea>
|
||||
<div id="quill-editor-container" class="rounded-xl border border-slate-200 overflow-hidden">
|
||||
<div id="editor-content-quill" style="height: 250px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between items-center">
|
||||
<div id="save-status" class="text-xs font-semibold text-slate-400"></div>
|
||||
<button type="button" onclick="saveActiveDay()" class="px-5 py-2.5 bg-blue-600 hover:bg-blue-700 text-white font-bold rounded-xl text-xs transition-all shadow-md shadow-blue-500/10">
|
||||
<button type="button" id="save-btn" onclick="saveActiveDay()" class="px-5 py-2.5 bg-blue-600 hover:bg-blue-700 text-white font-bold rounded-xl text-xs transition-all shadow-md shadow-blue-500/10">
|
||||
Deftere Kaydet
|
||||
</button>
|
||||
</div>
|
||||
@@ -789,6 +795,8 @@
|
||||
</div>
|
||||
|
||||
@push('styles')
|
||||
<link href="https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.snow.css" rel="stylesheet" />
|
||||
<script src="https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.js"></script>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script>
|
||||
// Tab Switch Logic
|
||||
@@ -828,6 +836,57 @@
|
||||
});
|
||||
});
|
||||
|
||||
let quill;
|
||||
|
||||
// Tab Switch Logic
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Initialize Quill editor
|
||||
quill = new Quill('#editor-content-quill', {
|
||||
theme: 'snow',
|
||||
modules: {
|
||||
toolbar: [
|
||||
['bold', 'italic', 'underline', 'strike'], // toggled buttons
|
||||
[{ 'list': 'ordered'}, { 'list': 'bullet' }],
|
||||
['clean'] // remove formatting button
|
||||
]
|
||||
}
|
||||
});
|
||||
|
||||
const tabButtons = document.querySelectorAll('.tab-btn');
|
||||
const tabPanels = document.querySelectorAll('.tab-panel');
|
||||
|
||||
tabButtons.forEach(button => {
|
||||
button.addEventListener('click', () => {
|
||||
// Deactivate active tab
|
||||
tabButtons.forEach(btn => {
|
||||
btn.classList.remove('active', 'bg-blue-50', 'border-blue-100', 'text-blue-900');
|
||||
btn.classList.add('bg-transparent', 'border-transparent', 'text-slate-600');
|
||||
btn.querySelector('.tab-icon').classList.remove('bg-blue-600', 'text-white');
|
||||
btn.querySelector('.tab-icon').classList.add('bg-slate-50', 'text-slate-500');
|
||||
btn.setAttribute('aria-selected', 'false');
|
||||
});
|
||||
|
||||
// Hide active panels
|
||||
tabPanels.forEach(panel => {
|
||||
panel.classList.add('hidden');
|
||||
});
|
||||
|
||||
// Activate clicked tab
|
||||
button.classList.add('active', 'bg-blue-50', 'border-blue-100', 'text-blue-900');
|
||||
button.classList.remove('bg-transparent', 'border-transparent', 'text-slate-600');
|
||||
button.querySelector('.tab-icon').classList.add('bg-blue-600', 'text-white');
|
||||
button.querySelector('.tab-icon').classList.remove('bg-slate-50', 'text-slate-500');
|
||||
button.setAttribute('aria-selected', 'true');
|
||||
|
||||
// Show targets panel
|
||||
const targetId = button.getAttribute('data-tab-target');
|
||||
const targetPanel = document.getElementById(targetId + '-panel');
|
||||
if (targetPanel) {
|
||||
targetPanel.classList.remove('hidden');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Handle initial state of date logic
|
||||
calculateEndDateFrontend();
|
||||
|
||||
@@ -906,8 +965,40 @@
|
||||
|
||||
document.getElementById('editor-day-title').textContent = `${dayNum}. Gün`;
|
||||
document.getElementById('editor-day-date').textContent = dateFormatted;
|
||||
document.getElementById('editor-content').value = savedContent;
|
||||
|
||||
quill.root.innerHTML = savedContent || '';
|
||||
document.getElementById('save-status').textContent = '';
|
||||
|
||||
// Future validation
|
||||
const dateParts = dateVal.split('-');
|
||||
const selectedDate = new Date(dateParts[0], dateParts[1] - 1, dateParts[2]);
|
||||
const today = new Date();
|
||||
today.setHours(0,0,0,0);
|
||||
|
||||
const isFuture = selectedDate > today;
|
||||
const warningBlock = document.getElementById('future-warning');
|
||||
const saveBtn = document.getElementById('save-btn');
|
||||
const gitBtn = document.querySelector('button[onclick="fillFromGithub()"]');
|
||||
|
||||
if (isFuture) {
|
||||
warningBlock.classList.remove('hidden');
|
||||
quill.enable(false);
|
||||
saveBtn.disabled = true;
|
||||
saveBtn.classList.add('opacity-50', 'cursor-not-allowed');
|
||||
if (gitBtn) {
|
||||
gitBtn.disabled = true;
|
||||
gitBtn.classList.add('opacity-50', 'cursor-not-allowed');
|
||||
}
|
||||
} else {
|
||||
warningBlock.classList.add('hidden');
|
||||
quill.enable(true);
|
||||
saveBtn.disabled = false;
|
||||
saveBtn.classList.remove('opacity-50', 'cursor-not-allowed');
|
||||
if (gitBtn) {
|
||||
gitBtn.disabled = false;
|
||||
gitBtn.classList.remove('opacity-50', 'cursor-not-allowed');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -923,25 +1014,26 @@
|
||||
return;
|
||||
}
|
||||
|
||||
let commitText = "";
|
||||
let commitHtml = "<ul>";
|
||||
const sorted = [...dayCommits].reverse();
|
||||
sorted.forEach(c => {
|
||||
const msg = c.commit.message;
|
||||
const sha = c.sha.substring(0, 7);
|
||||
const authorDate = new Date(c.commit.author.date);
|
||||
const time = authorDate.toLocaleTimeString('tr-TR', { hour: '2-digit', minute: '2-digit' });
|
||||
commitText += `- [${time}] (${sha}) ${msg}\n`;
|
||||
commitHtml += `<li><strong>[${time}]</strong> (<em>${sha}</em>) ${msg}</li>`;
|
||||
});
|
||||
commitHtml += "</ul>";
|
||||
|
||||
const textarea = document.getElementById('editor-content');
|
||||
if (textarea.value.trim() !== "") {
|
||||
const currentHtml = quill.root.innerHTML.trim();
|
||||
if (currentHtml !== "" && currentHtml !== "<p><br></p>") {
|
||||
if (confirm("Mevcut rapor içeriğinizin sonuna bu günün commitlerini eklemek ister misiniz? (Hayır derseniz mevcut içerik silinip commitler yazılır.)")) {
|
||||
textarea.value = textarea.value.trim() + "\n\n" + commitText.trim();
|
||||
quill.root.innerHTML = currentHtml + "<br><br>" + commitHtml;
|
||||
} else {
|
||||
textarea.value = commitText.trim();
|
||||
quill.root.innerHTML = commitHtml;
|
||||
}
|
||||
} else {
|
||||
textarea.value = commitText.trim();
|
||||
quill.root.innerHTML = commitHtml;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -951,7 +1043,10 @@
|
||||
|
||||
const dayNum = btn.getAttribute('data-day-num');
|
||||
const dateVal = btn.getAttribute('data-date');
|
||||
const contentVal = document.getElementById('editor-content').value;
|
||||
let contentVal = quill.root.innerHTML;
|
||||
if (contentVal === '<p><br></p>') {
|
||||
contentVal = '';
|
||||
}
|
||||
const statusText = document.getElementById('save-status');
|
||||
|
||||
statusText.textContent = "Kaydediliyor...";
|
||||
|
||||
Reference in New Issue
Block a user