232 lines
10 KiB
JavaScript
232 lines
10 KiB
JavaScript
import { inquiryCopy as copy } from "./inquiry-copy.js";
|
||
|
||
// Design preview only: all rows below are fictional fixtures.
|
||
// No API requests, authentication checks, uploads, storage, or submission are performed.
|
||
const SERVICES = { egbim: 'EG-BIM', gaia: 'GAIA', tova: 'TOVA' };
|
||
const CATEGORY_LABELS = copy.categories;
|
||
const STATUS_LABELS = copy.statuses;
|
||
const NOTICE_TITLES = copy.notices;
|
||
const SERVICE_QUESTIONS = copy.questions;
|
||
function message(key, values = {}) {
|
||
return copy[key].replace(/\{(\w+)\}/g, (_, name) => values[name] ?? '');
|
||
}
|
||
|
||
// Replace this fixture factory with developer-supplied data when integrating the board.
|
||
function createPreviewRows(service) {
|
||
const notices = NOTICE_TITLES.map((title, index) => ({
|
||
id: `${service}-notice-${index}`, number: copy.noticeNumber, category: 'notice', company: copy.company, team: copy.support, author: copy.admin,
|
||
title: `${SERVICES[service]} ${title}`, date: `2026-10-${String(25 - index).padStart(2, '0')}`, status: '', comments: index === 2 ? 1 : 0, mine: false,
|
||
content: message('noticeContent', {service: SERVICES[service]})
|
||
}));
|
||
const questions = Array.from({ length: 15 }, (_, index) => ({
|
||
id: `${service}-question-${index}`, number: 15 - index, category: ['error', 'improvement', 'general'][index % 3],
|
||
company: copy.placeholderCompany, team: copy.departments[index % 3], author: `${copy.userPrefix}${String(index + 1).padStart(2, '0')}`,
|
||
title: SERVICE_QUESTIONS[service][index % 5], date: `2026-10-${String(25 - index).padStart(2, '0')}`,
|
||
status: ['done', 'new', 'review', 'patch', 'done'][index % 5], comments: index % 3 ? 0 : 1, mine: index % 4 === 0,
|
||
content: message('questionContent', {service: SERVICES[service]})
|
||
}));
|
||
return [...notices, ...questions];
|
||
}
|
||
|
||
const pageSize = 10;
|
||
let service = Object.hasOwn(SERVICES, location.hash.slice(1)) ? location.hash.slice(1) : 'egbim';
|
||
let currentPage = 1;
|
||
let query = '';
|
||
const searchForm = document.querySelector('#inquiry-search');
|
||
const rowsElement = document.querySelector('#inquiry-rows');
|
||
const pagination = document.querySelector('#inquiry-pagination');
|
||
const tabs = [...document.querySelectorAll('.inquiry-tabs [role="tab"]')];
|
||
const detail = document.querySelector('#inquiry-detail');
|
||
const compose = document.querySelector('#inquiry-compose');
|
||
const composeForm = document.querySelector('#inquiry-compose-form');
|
||
let dialogOpener;
|
||
let previousPrevent;
|
||
|
||
function textCell(text, className = '') {
|
||
const cell = document.createElement('td');
|
||
cell.textContent = text;
|
||
cell.className = className;
|
||
return cell;
|
||
}
|
||
|
||
function renderRows() {
|
||
const category = searchForm.elements.category.value;
|
||
const mineOnly = searchForm.elements.mine.checked;
|
||
const filtered = createPreviewRows(service).filter(row =>
|
||
(category === 'all' || row.category === category)
|
||
&& (!mineOnly || row.mine)
|
||
&& `${row.title} ${row.content}`.toLocaleLowerCase().includes(query)
|
||
);
|
||
const pages = Math.max(1, Math.ceil(filtered.length / pageSize));
|
||
currentPage = Math.min(currentPage, pages);
|
||
rowsElement.replaceChildren();
|
||
const visible = filtered.slice((currentPage - 1) * pageSize, currentPage * pageSize);
|
||
for (const row of visible) {
|
||
const tr = document.createElement('tr');
|
||
if (row.category === 'notice') tr.className = 'inquiry-notice';
|
||
tr.append(textCell(row.number), textCell(CATEGORY_LABELS[row.category]), textCell(row.company), textCell(row.team), textCell(row.author));
|
||
const subject = textCell('', 'inquiry-subject');
|
||
const button = document.createElement('button');
|
||
button.type = 'button';
|
||
const title = document.createElement('span');
|
||
title.textContent = row.title;
|
||
button.append(title);
|
||
if (row.comments) {
|
||
const comments = document.createElement('span');
|
||
comments.className = 'inquiry-comments';
|
||
comments.setAttribute('aria-label', message('replies', {count: row.comments}));
|
||
comments.innerHTML = '<svg viewBox="0 0 20 20" aria-hidden="true"><path d="M10 2c-5 0-9 3-9 7 0 2 1 4 3 5l-1 4 5-2h2c5 0 9-3 9-7s-4-7-9-7Z"/></svg>';
|
||
comments.append(String(row.comments));
|
||
button.append(comments);
|
||
}
|
||
button.addEventListener('click', () => {
|
||
document.querySelector('#inquiry-detail-title').textContent = row.title;
|
||
document.querySelector('#inquiry-detail-meta').textContent = `${SERVICES[service]} · ${CATEGORY_LABELS[row.category]} · ${row.author} · ${row.date}`;
|
||
document.querySelector('#inquiry-detail-body').textContent = row.content;
|
||
openDialog(detail, button);
|
||
});
|
||
subject.append(button);
|
||
const status = textCell('');
|
||
if (row.status) {
|
||
const badge = document.createElement('span');
|
||
badge.className = `inquiry-status inquiry-status--${row.status}`;
|
||
badge.textContent = STATUS_LABELS[row.status];
|
||
status.append(badge);
|
||
}
|
||
tr.append(subject, textCell(row.date), status);
|
||
rowsElement.append(tr);
|
||
}
|
||
if (!visible.length) {
|
||
const tr = document.createElement('tr');
|
||
const cell = textCell(copy.empty, 'inquiry-empty');
|
||
cell.colSpan = 8;
|
||
tr.append(cell);
|
||
rowsElement.append(tr);
|
||
}
|
||
pagination.replaceChildren();
|
||
function pageButton(label, target, disabled = false) {
|
||
const button = document.createElement('button');
|
||
button.type = 'button';
|
||
button.textContent = label;
|
||
button.disabled = disabled;
|
||
button.setAttribute('aria-label', label === '‹' ? copy.previous : label === '›' ? copy.next : message('page', {page: target}));
|
||
if (String(target) === label && target === currentPage) button.setAttribute('aria-current', 'page');
|
||
button.addEventListener('click', () => {
|
||
currentPage = target;
|
||
renderRows();
|
||
pagination.querySelector('[aria-current="page"]')?.focus({ preventScroll: true });
|
||
});
|
||
pagination.append(button);
|
||
}
|
||
pageButton('‹', currentPage - 1, currentPage === 1);
|
||
for (let page = 1; page <= pages; page++) pageButton(String(page), page);
|
||
pageButton('›', currentPage + 1, currentPage === pages);
|
||
document.querySelector('#inquiry-results').textContent = message('results', {service: SERVICES[service], count: filtered.length, page: currentPage, pages});
|
||
window.ScrollTrigger?.refresh();
|
||
}
|
||
|
||
function selectService(next) {
|
||
service = next;
|
||
currentPage = 1;
|
||
query = '';
|
||
searchForm.reset();
|
||
tabs.forEach(tab => {
|
||
const active = tab.dataset.service === service;
|
||
tab.setAttribute('aria-selected', String(active));
|
||
tab.tabIndex = active ? 0 : -1;
|
||
});
|
||
document.querySelector('#inquiry-panel').setAttribute('aria-labelledby', `tab-${service}`);
|
||
document.querySelectorAll('[data-service-name]').forEach(el => { el.textContent = SERVICES[service]; });
|
||
updateLanguageLinks();
|
||
renderRows();
|
||
}
|
||
tabs.forEach((tab, index) => {
|
||
tab.addEventListener('click', () => {
|
||
selectService(tab.dataset.service);
|
||
history.replaceState(null, '', `#${service}`);
|
||
});
|
||
tab.addEventListener('keydown', event => {
|
||
let next;
|
||
if (event.key === 'ArrowRight') next = (index + 1) % tabs.length;
|
||
if (event.key === 'ArrowLeft') next = (index + tabs.length - 1) % tabs.length;
|
||
if (event.key === 'Home') next = 0;
|
||
if (event.key === 'End') next = tabs.length - 1;
|
||
if (next === undefined) return;
|
||
event.preventDefault();
|
||
tabs[next].focus();
|
||
tabs[next].click();
|
||
});
|
||
});
|
||
window.addEventListener('hashchange', () => {
|
||
const next = location.hash.slice(1);
|
||
if (Object.hasOwn(SERVICES, next)) selectService(next);
|
||
});
|
||
searchForm.addEventListener('submit', event => {
|
||
event.preventDefault();
|
||
query = searchForm.elements.keyword.value.trim().toLocaleLowerCase();
|
||
currentPage = 1;
|
||
renderRows();
|
||
});
|
||
searchForm.addEventListener('change', event => {
|
||
if (!['category', 'mine'].includes(event.target.name)) return;
|
||
currentPage = 1;
|
||
renderRows();
|
||
});
|
||
|
||
function openDialog(dialog, opener) {
|
||
dialogOpener = opener;
|
||
if (!document.documentElement.classList.contains('inquiry-modal-open')) {
|
||
previousPrevent = document.documentElement.getAttribute('data-lenis-prevent');
|
||
}
|
||
document.documentElement.setAttribute('data-lenis-prevent', '');
|
||
document.documentElement.classList.add('inquiry-modal-open');
|
||
dialog.showModal();
|
||
}
|
||
for (const dialog of [detail, compose]) {
|
||
dialog.querySelectorAll('[data-close]').forEach(button => button.addEventListener('click', () => dialog.close()));
|
||
dialog.addEventListener('click', event => {
|
||
const rect = dialog.getBoundingClientRect();
|
||
if (event.target === dialog && (event.clientX < rect.left || event.clientX > rect.right || event.clientY < rect.top || event.clientY > rect.bottom)) dialog.close();
|
||
});
|
||
dialog.addEventListener('close', () => {
|
||
if (document.querySelector('.inquiry-dialog[open]')) return;
|
||
document.documentElement.classList.remove('inquiry-modal-open');
|
||
if (previousPrevent === null) document.documentElement.removeAttribute('data-lenis-prevent');
|
||
else document.documentElement.setAttribute('data-lenis-prevent', previousPrevent);
|
||
dialogOpener?.focus({ preventScroll: true });
|
||
});
|
||
}
|
||
document.querySelector('#inquiry-write').addEventListener('click', event => {
|
||
composeForm.reset();
|
||
document.querySelector('#inquiry-compose-service').value = service;
|
||
document.querySelector('#inquiry-compose-feedback').textContent = '';
|
||
openDialog(compose, event.currentTarget);
|
||
});
|
||
composeForm.addEventListener('submit', event => {
|
||
event.preventDefault();
|
||
document.querySelector('#inquiry-compose-feedback').textContent = copy.submitPreview;
|
||
});
|
||
selectService(service);
|
||
// Run after the shared header's jQuery-ready title initialization.
|
||
window.jQuery(() => { document.title = copy.title; });
|
||
|
||
// Keep the current product selected when switching the inquiry page language.
|
||
function updateLanguageLinks() {
|
||
const links = [...document.querySelectorAll('#header .language a')];
|
||
const routes = document.querySelector('.inquiry-page').dataset;
|
||
for (const link of links) {
|
||
const language = link.textContent.trim();
|
||
const route = language === 'KR' ? routes.inquiryKo : language === 'EN' ? routes.inquiryEn : '';
|
||
if (route) link.setAttribute('href', route + '#' + service);
|
||
}
|
||
return links.length >= 2;
|
||
}
|
||
// Shared headers may be included asynchronously.
|
||
if (!updateLanguageLinks()) {
|
||
const header = document.querySelector('#header');
|
||
const observer = new MutationObserver(() => {
|
||
if (updateLanguageLinks()) observer.disconnect();
|
||
});
|
||
observer.observe(header, {childList: true, subtree: true});
|
||
}
|