|
|
|
|
@ -156,7 +156,7 @@ a {
|
|
|
|
|
font-size: 1.1rem;
|
|
|
|
|
color: #000;
|
|
|
|
|
padding: 10px;
|
|
|
|
|
border-radius: 10px;
|
|
|
|
|
border-radius: 50px;
|
|
|
|
|
}
|
|
|
|
|
.sidebar--items a:hover,
|
|
|
|
|
.sidebar--bottom-items a:hover {
|
|
|
|
|
@ -221,6 +221,13 @@ a {
|
|
|
|
|
.main::-webkit-scrollbar-thumb:hover, .sidebar::-webkit-scrollbar-thumb:hover {
|
|
|
|
|
background: #555;
|
|
|
|
|
}
|
|
|
|
|
.sidebar-link.active {
|
|
|
|
|
background-color: #007bff;
|
|
|
|
|
color: white !important;
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</style>
|
|
|
|
|
<title>Dashboard</title>
|
|
|
|
|
@ -250,65 +257,55 @@ a {
|
|
|
|
|
<div class="sidebar">
|
|
|
|
|
<ul class="sidebar--items">
|
|
|
|
|
<li>
|
|
|
|
|
<a href="#" id="active--link">
|
|
|
|
|
<span class="icon icon-0"><i class="fas fa-tachometer-alt"></i></span>
|
|
|
|
|
<span class="sidebar--item">Dashboard</span>
|
|
|
|
|
</a>
|
|
|
|
|
</li>
|
|
|
|
|
<li>
|
|
|
|
|
<a href="#" id="newJobPosting" onclick="loadUserPage('/new_job_posting/', '{{ user_id }}');">
|
|
|
|
|
<a href="#" id="newJobPosting" class="sidebar-link" onclick="activateSidebarLink(this); loadUserPage('/new_job_posting/', '{{ user_id }}');">
|
|
|
|
|
<span class="icon icon-3"><i class="far fa-calendar-alt"></i></span>
|
|
|
|
|
<span class="sidebar--item" style="white-space: nowrap;">New Jobs Postings</span>
|
|
|
|
|
</a>
|
|
|
|
|
</li>
|
|
|
|
|
<!-- <li>-->
|
|
|
|
|
<!-- <a href="#">-->
|
|
|
|
|
<!-- <span class="icon icon-4"><i class="fa-solid fa-address-card"></i></span>-->
|
|
|
|
|
<!-- <span class="sidebar--item"> Add Recruiter</span>-->
|
|
|
|
|
<!-- </a>-->
|
|
|
|
|
<!-- </li>-->
|
|
|
|
|
<!-- <li>-->
|
|
|
|
|
<!-- <a href="#">-->
|
|
|
|
|
<!-- <span class="icon icon-4"><i class="fa-solid fa-person"></i></span>-->
|
|
|
|
|
<!-- <span class="sidebar--item">Recruiter List</span>-->
|
|
|
|
|
<!-- </a>-->
|
|
|
|
|
<!-- </li>-->
|
|
|
|
|
|
|
|
|
|
<li>
|
|
|
|
|
<a href="#" id="allJobPosting" onclick="loadUserPage('/all_job_postings/', '{{ user_id }}');">
|
|
|
|
|
<a href="#" id="allJobPosting" class="sidebar-link" onclick="activateSidebarLink(this); loadUserPage('/all_job_postings/', '{{ user_id }}');">
|
|
|
|
|
<span class="icon icon-2"><i class="far fa-calendar-alt"></i></span>
|
|
|
|
|
<span class="sidebar--item">All Jobs Postings</span>
|
|
|
|
|
</a>
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
<li>
|
|
|
|
|
<a href="#" id="Messages" onclick="loadUserPage('/messages/', '{{ user_id }}');">
|
|
|
|
|
<a href="#" id="Messages" class="sidebar-link" onclick="activateSidebarLink(this); loadUserPage('/messages/', '{{ user_id }}');">
|
|
|
|
|
<span id="messageNotificationBadge" style="position: absolute;right: 100px; background-color: red;color: white;font-size: 12px;font-weight: bold;border-radius: 50%; padding: 5px 8px;width: auto;height: auto;text-align: center;display: none;"></span>
|
|
|
|
|
<span class="icon icon-4"><i class="fas fa-envelope"></i></span>
|
|
|
|
|
<span class="sidebar--item">Messages</span>
|
|
|
|
|
</a>
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
<li>
|
|
|
|
|
<a href="#">
|
|
|
|
|
<a href="#" class="sidebar-link" >
|
|
|
|
|
<span class="icon icon-4"><i class="fa-regular fa-clock"></i></span>
|
|
|
|
|
<span class="sidebar--item">Pending Process</span>
|
|
|
|
|
</a>
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
<li>
|
|
|
|
|
<a href="#">
|
|
|
|
|
<a href="#" class="sidebar-link" >
|
|
|
|
|
<span class="icon icon-5"><i class="fa fa-paper-plane"></i></span>
|
|
|
|
|
<span class="sidebar--item">Submitted Resumes</span>
|
|
|
|
|
</a>
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
<li>
|
|
|
|
|
<a href="#">
|
|
|
|
|
<a href="#" class="sidebar-link" >
|
|
|
|
|
<span class="icon icon-6"><i class="fa-solid fa-person"></i></span>
|
|
|
|
|
<span class="sidebar--item">Client Details</span>
|
|
|
|
|
</a>
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
<li>
|
|
|
|
|
<a href="#">
|
|
|
|
|
<a href="#" class="sidebar-link" >
|
|
|
|
|
<span class="icon icon-6"><i class="fas fa-chart-bar"></i></span>
|
|
|
|
|
<span class="sidebar--item">Activity Report</span>
|
|
|
|
|
</a>
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
</ul>
|
|
|
|
|
<ul class="sidebar--bottom-items">
|
|
|
|
|
<li>
|
|
|
|
|
@ -328,6 +325,7 @@ a {
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="dynamicContentContainer">
|
|
|
|
|
<input type="hidden" id="user_id" name="user_id" value="{{ user_id }}">
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
@ -344,28 +342,41 @@ a {
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
function activateSidebarLink(selectedLink) {
|
|
|
|
|
// Remove 'active' from all sidebar links
|
|
|
|
|
document.querySelectorAll('.sidebar-link').forEach(link => {
|
|
|
|
|
link.classList.remove('active');
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// Add 'active' class to clicked link
|
|
|
|
|
selectedLink.classList.add('active');
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// messages //
|
|
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
|
|
|
const userId = document.getElementById('user_id').value;
|
|
|
|
|
fetch(`/unread_message_count/?user_id=${encodeURIComponent(userId)}`)
|
|
|
|
|
.then(response => {
|
|
|
|
|
if (!response.ok) {
|
|
|
|
|
throw new Error(`HTTP error! Status: ${response.status}`);
|
|
|
|
|
}
|
|
|
|
|
return response.json();
|
|
|
|
|
})
|
|
|
|
|
function updateMessageNotification() {
|
|
|
|
|
fetch(`/unread_message_count/?user_id=${userId}`)
|
|
|
|
|
.then(response => response.json())
|
|
|
|
|
.then(data => {
|
|
|
|
|
console.log("unread count", data);
|
|
|
|
|
return data
|
|
|
|
|
console.log(data.unread_count);
|
|
|
|
|
const notificationBadge = document.getElementById('messageNotificationBadge');
|
|
|
|
|
if (data.unread_count > 0) {
|
|
|
|
|
notificationBadge.textContent = data.unread_count ;
|
|
|
|
|
notificationBadge.style.display = 'inline-flex'; // Show badge if there are unread messages
|
|
|
|
|
} else {
|
|
|
|
|
notificationBadge.style.display = 'none'; // Hide badge if no unread messages
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
.catch(error => {
|
|
|
|
|
console.error('Error fetching main message ID:', error);
|
|
|
|
|
});
|
|
|
|
|
.catch(error => console.error('Error fetching unread message count:', error));
|
|
|
|
|
}
|
|
|
|
|
updateMessageNotification();
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function findMainMessageId(message_id) {
|
|
|
|
|
console.log(message_id);
|
|
|
|
|
const userId = document.getElementById('user_id').value;
|
|
|
|
|
@ -601,12 +612,35 @@ function showMessageDetails(message_id) {
|
|
|
|
|
|
|
|
|
|
function updateMessageReadStatus(message_id) {
|
|
|
|
|
const messageRow = document.querySelector(`[data-message-id="${message_id}"]`);
|
|
|
|
|
console.log(messageRow);
|
|
|
|
|
if (messageRow) {
|
|
|
|
|
messageRow.style.backgroundColor = '#fff';
|
|
|
|
|
// Update background color for read messages
|
|
|
|
|
messageRow.style.backgroundColor = '#efeded';
|
|
|
|
|
|
|
|
|
|
// Remove bold styling from sender, subject, and timestamp
|
|
|
|
|
const sender = messageRow.querySelector('.emailRow__title');
|
|
|
|
|
const subject = messageRow.querySelector('.emailRow__message h4');
|
|
|
|
|
const timestamp = messageRow.querySelector('.emailRow__time');
|
|
|
|
|
|
|
|
|
|
if (sender) sender.style.fontWeight = 'normal';
|
|
|
|
|
if (subject) subject.style.fontWeight = 'normal';
|
|
|
|
|
if (timestamp) timestamp.style.fontWeight = 'normal';
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
fetch(`/unread_message_count/?user_id=${userId}`)
|
|
|
|
|
.then(response => response.json())
|
|
|
|
|
.then(data => {
|
|
|
|
|
console.log(data.unread_count);
|
|
|
|
|
const notificationBadge = document.getElementById('messageNotificationBadge');
|
|
|
|
|
if (data.unread_count > 0) {
|
|
|
|
|
notificationBadge.textContent = data.unread_count ;
|
|
|
|
|
notificationBadge.style.display = 'inline-flex'; // Show badge if there are unread messages
|
|
|
|
|
} else {
|
|
|
|
|
notificationBadge.style.display = 'none'; // Hide badge if no unread messages
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
.catch(error => console.error('Error fetching unread message count:', error));
|
|
|
|
|
|
|
|
|
|
const repliesContainer = document.getElementById(`replies_${parentMessageId}`);
|
|
|
|
|
console.log(repliesContainer);
|
|
|
|
|
repliesContainer.innerHTML = ''; // Clear existing replies
|
|
|
|
|
@ -755,6 +789,8 @@ function HideMessageDetails() {
|
|
|
|
|
messageDetailsContainer.style.display = 'none';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function backToInbox(event) {
|
|
|
|
|
event.preventDefault();
|
|
|
|
|
const inboxContainer = document.getElementById('InboxContainer');
|
|
|
|
|
@ -765,6 +801,8 @@ function backToInbox(event) {
|
|
|
|
|
messageDetailsContainer.style.display = 'none';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function replyMessage(event, message_id, type) {
|
|
|
|
|
event.preventDefault();
|
|
|
|
|
console.log(message_id);
|
|
|
|
|
@ -990,7 +1028,7 @@ function renderReplies(replies, container) {
|
|
|
|
|
renderReplies(reply.replies, nestedRepliesContainer);
|
|
|
|
|
|
|
|
|
|
const toggleRepliesButton = document.getElementById('toggleReplies');
|
|
|
|
|
console.log(toggleRepliesButton)
|
|
|
|
|
<!-- console.log(toggleRepliesButton)-->
|
|
|
|
|
toggleRepliesButton.textContent = 'View Replies';
|
|
|
|
|
toggleRepliesButton.style.marginTop = '20px';
|
|
|
|
|
toggleRepliesButton.style.padding = '5px 10px';
|
|
|
|
|
@ -1299,16 +1337,17 @@ function renderSentMessages() {
|
|
|
|
|
if (data.sent_messages.length === 0) {
|
|
|
|
|
inboxContainer.innerHTML = `<h2>No messages found</h2>`;
|
|
|
|
|
} else {
|
|
|
|
|
// Clear duplicates by grouping messages by the latest message ID
|
|
|
|
|
const uniqueMessages = {};
|
|
|
|
|
data.sent_messages.forEach(message => {
|
|
|
|
|
uniqueMessages[message.latest_message.message_id] = message;
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// Render only the latest message for each group
|
|
|
|
|
Object.values(uniqueMessages).forEach(message => {
|
|
|
|
|
const latestMessage = message.latest_message;
|
|
|
|
|
const rowStyle = 'background-color: #fff;';
|
|
|
|
|
|
|
|
|
|
// ✅ Set all sent messages as read (light grey background)
|
|
|
|
|
const rowStyle = 'background-color: #efeded;';
|
|
|
|
|
const textStyle = 'font-weight: normal; color: #555;';
|
|
|
|
|
|
|
|
|
|
const emailRow = `
|
|
|
|
|
<div class="emailRow" data-message-id="${latestMessage.message_id}" style="border-bottom: 1px solid #ddd; padding: 10px; ${rowStyle}" onclick="showMessageDetails('${latestMessage.message_id}')">
|
|
|
|
|
@ -1316,17 +1355,17 @@ function renderSentMessages() {
|
|
|
|
|
<input type="checkbox" id="checkbox" data-message-id="${latestMessage.message_id}" onchange="toggleDeleteButton()" onclick="event.stopPropagation()" />
|
|
|
|
|
</div>
|
|
|
|
|
${latestMessage.recipient_fullnames.join(',').length > 15 ?
|
|
|
|
|
`<h3 class="emailRow__title" style="font-weight: bold;">To: ${latestMessage.recipient_fullnames.join(',').substring(0, 15)}...</h3>`
|
|
|
|
|
: `<h3 class="emailRow__title" style="font-weight: bold;">To: ${latestMessage.recipient_fullnames.join(',')}</h3>`}
|
|
|
|
|
<div class="emailRow__message" style="font-size: 0.9em; color: #555;">
|
|
|
|
|
`<h3 class="emailRow__title" style="${textStyle}">To: ${latestMessage.recipient_fullnames.join(',').substring(0, 15)}...</h3>`
|
|
|
|
|
: `<h3 class="emailRow__title" style="${textStyle}">To: ${latestMessage.recipient_fullnames.join(',')}</h3>`}
|
|
|
|
|
<div class="emailRow__message" style="font-size: 0.9em; ${textStyle}">
|
|
|
|
|
${latestMessage.subject ? `
|
|
|
|
|
<h4>${latestMessage.subject}
|
|
|
|
|
<h4 style="${textStyle}">${latestMessage.subject}
|
|
|
|
|
<span class="emailRow__description"> - ${latestMessage.body.substring(0, 50)}...</span>
|
|
|
|
|
</h4>`
|
|
|
|
|
: `<span class="emailRow__description"> ${latestMessage.body.substring(0, 50)}...</span>`}
|
|
|
|
|
<span id="deleteButton" class="material-icons" style="display: none; z-index: 1000;" onclick="deleteMessage(event)">delete</span>
|
|
|
|
|
</div>
|
|
|
|
|
<p class="emailRow__time" style="color: #aaa; font-size: 0.8em;">${latestMessage.sent_at}</p>
|
|
|
|
|
<p class="emailRow__time" style="color: black; font-size: 0.8em; ${textStyle}">${latestMessage.sent_at}</p>
|
|
|
|
|
</div>
|
|
|
|
|
`;
|
|
|
|
|
inboxContainer.innerHTML += emailRow;
|
|
|
|
|
@ -1341,6 +1380,8 @@ function renderSentMessages() {
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function renderInbox() {
|
|
|
|
|
const inboxContainer = document.getElementById('InboxContainer');
|
|
|
|
|
inboxContainer.innerHTML = '';
|
|
|
|
|
@ -1368,25 +1409,32 @@ function renderInbox() {
|
|
|
|
|
// Render only the latest message for each group
|
|
|
|
|
Object.values(uniqueMessages).forEach(message => {
|
|
|
|
|
const latestMessage = message.latest_message;
|
|
|
|
|
const rowStyle = !latestMessage.is_read
|
|
|
|
|
? 'background-color: #efeded; font-weight: bold;'
|
|
|
|
|
: 'background-color: #fff;';
|
|
|
|
|
const isUnread = !latestMessage.is_read;
|
|
|
|
|
|
|
|
|
|
const rowStyle = isUnread
|
|
|
|
|
? 'background-color: #fff;'
|
|
|
|
|
: 'background-color: #efeded;';
|
|
|
|
|
|
|
|
|
|
const textStyle = isUnread ? 'font-weight: bold;' : 'font-weight: normal;';
|
|
|
|
|
|
|
|
|
|
const emailRow = `
|
|
|
|
|
<div class="emailRow" data-message-id="${latestMessage.message_id}" style="border-bottom: 1px solid #ddd; padding: 10px; ${rowStyle}" onclick="showMessageDetails('${latestMessage.message_id}')">
|
|
|
|
|
<div class="emailRow__options">
|
|
|
|
|
<input type="checkbox" id="checkbox" data-message-id="${latestMessage.message_id}" onchange="toggleDeleteButton()" onclick="event.stopPropagation()" />
|
|
|
|
|
<input type="checkbox" id="checkbox_${latestMessage.message_id}" data-message-id="${latestMessage.message_id}" onchange="toggleDeleteButton()" onclick="event.stopPropagation()" />
|
|
|
|
|
</div>
|
|
|
|
|
<h3 class="emailRow__title" style="font-weight: bold;">From: ${latestMessage.sender_fullname}</h3>
|
|
|
|
|
<h3 class="emailRow__title" style="${textStyle}">From: ${latestMessage.sender_fullname}</h3>
|
|
|
|
|
<div class="emailRow__message" style="font-size: 0.9em; color: #555;">
|
|
|
|
|
${latestMessage.subject ? `
|
|
|
|
|
<h4>${latestMessage.subject}
|
|
|
|
|
<h4 style="${textStyle}">${latestMessage.subject}
|
|
|
|
|
<span class="emailRow__description"> - ${latestMessage.body.substring(0, 50)}...</span>
|
|
|
|
|
</h4>`
|
|
|
|
|
: `<span class="emailRow__description"> ${latestMessage.body.substring(0, 50)}...</span>`}
|
|
|
|
|
<span id="deleteButton" class="material-icons" style="display: none; z-index: 1000;" onclick="deleteMessage(event)">delete</span>
|
|
|
|
|
<span id="delete_${latestMessage.message_id}" class="material-icons" style="display: none; cursor: pointer; color: gray; transition: color 0.2s ease-in-out, transform 0.2s ease-in-out; position: absolute; right: 230px;" onclick="deleteMessage(event, '${latestMessage.message_id}')"
|
|
|
|
|
onmouseover="this.style.color='red'; this.style.transform='scale(1.2)';" onmouseout="this.style.color='gray'; this.style.transform='scale(1)';">
|
|
|
|
|
delete </span>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
<p class="emailRow__time" style="color: #aaa; font-size: 0.8em;">${latestMessage.sent_at}</p>
|
|
|
|
|
<p class="emailRow__time" style="color: black; font-size: 0.8em; ${textStyle}">${latestMessage.sent_at}</p>
|
|
|
|
|
</div>
|
|
|
|
|
`;
|
|
|
|
|
inboxContainer.innerHTML += emailRow;
|
|
|
|
|
@ -1403,27 +1451,6 @@ function renderInbox() {
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function updateMessageNotification() {
|
|
|
|
|
const userId = document.getElementById('user_id').value;
|
|
|
|
|
fetch(`/unread_message_count/?user_id=${userId}`)
|
|
|
|
|
.then(response => response.json())
|
|
|
|
|
.then(data => {
|
|
|
|
|
console.log(data.unread_count);
|
|
|
|
|
const notificationBadge = document.getElementById('messageNotificationBadge');
|
|
|
|
|
if (data.unread_count > 0) {
|
|
|
|
|
notificationBadge.textContent = data.unread_count ;
|
|
|
|
|
notificationBadge.style.display = 'inline'; // Show badge if there are unread messages
|
|
|
|
|
} else {
|
|
|
|
|
notificationBadge.style.display = 'none'; // Hide badge if no unread messages
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
.catch(error => console.error('Error fetching unread message count:', error));
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Call updateMessageNotification every 30 seconds
|
|
|
|
|
<!--setInterval(updateMessageNotification, 30000);-->
|
|
|
|
|
|
|
|
|
|
function sendMessage(event) {
|
|
|
|
|
event.preventDefault();
|
|
|
|
|
|
|
|
|
|
|
