Page History

<!-- فونت وزیر -->
<link href="https://cdn.jsdelivr.net/gh/rastikerdar/vazir-font@v30.1.0/dist/font-face.css" rel="stylesheet" type="text/css" />

<h2 style="text-align:center; font-family:Vazir, Tahoma; color:#333; font-weight:600; margin-top:20px;">
  مستندات اعتباربخشی
</h2>

<!-- فیلترهای زیبا -->
<div id="search-filters" style="
     display:flex; justify-content:center; flex-wrap:wrap; 
     gap:10px; margin:25px 0; direction:rtl;">

  <select id="filterAxis" onchange="updateSubAxis(); filterTable()"
          style="flex:0 1 160px; padding:10px 15px; border-radius:25px; 
          border:1px solid #ccc; font-family:Vazir, Tahoma; font-size:14px;
          background:#fff; cursor:pointer;">
    <option value="">انتخاب محور</option>
    <option value="modiriyat">رهبری و مدیریت</option>
    <option value="mored">مراقبت و درمان</option>
    <option value="hemayat">حمایت از گیرنده خدمت</option>
  </select>

  <select id="filterSubAxis" onchange="filterTable()"
          style="flex:0 1 160px; padding:10px 15px; border-radius:25px; 
          border:1px solid #ccc; font-family:Vazir, Tahoma; font-size:14px;
          background:#fff; cursor:pointer;">
    <option value="">انتخاب زیرمحور</option>
  </select>

</div>

<!-- جدول اصلی -->
<table id="myTablearchiveTable" border="1" cellpadding="5" cellspacing="0">
<thead>
<tr>
<th>محور</th>
<th>زیر محور</th>
<th>کمیته</th>
>
    <thead>
        <tr>
            <th>محور</th>
            <th>زیرمحور</th>
            <th>کمیته</th>
            <th>عنوان سند</th>
            <th>نوع سند</th>
            <th>تاریخ ثبت اولیه</th>
            <th>تاریخ آخرین بازنگری</th>
            <th>تاریخ ویرایش</th>
            <th>کد ویرایش</th>
            <th>فایل</th>
        </tr>
    </thead>
<tbody>
<!-- ردیف‌ها توسط JS پر می‌شوند -->
<<tbody id="archiveBody"></tbody>
</table>

<!-- CSS جدول زیبا -->
<style>
#myTable#archiveTable {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
  width: 100%;
  font-family: Vazir, Tahoma;
    direction: rtl;
    box-shadow: 0 2px4px 8px12px rgba(0,0,0,0.108);
    border-radius: 10px12px;
    overflow: hidden;
    margin-bottom: 30px;
}

#myTable#archiveTable thead th {
    background-color: #f2f2f2: linear-gradient(90deg, #4facfe, #00f2fe);
  padding  color: 10px#fff;
    font-weight: 600;
    text-align: center;
}

#archiveTable thead th {
    padding: 12px 10px;
    border-bottom: 1px solid #dddrgba(255,255,255,0.3);
}
#myTable
#archiveTable tbody td {
    padding: 12px 10px;
    text-align: center;
    border-bottom: 1px solid #eee#f0f0f0;
}
#myTable
#archiveTable tbody tr:nth-child(even) {
    background-color: #fafafa#f9f9f9;
}

#myTable#archiveTable tbody tr:hover {
    background-color: #e6f7ff#e0f7ff;
    transition: background-color 0.3s;
}
#myTable
#archiveTable theadtbody tr:first-child th:first-child { border-top-right-radius: 10px; }
#myTable thead tr:first-child th:last-child { border-top-left-radius: 10px; }
#myTable tbody tr:last-child td:first-child { border-bottom-right-radius: 10px; }
#myTable tbody tr:last-child td:last-child { border-bottom-left-radius: 10px; }
 td a {
    color: #007bff;
    text-decoration: none;
    font-weight: 500;
}

#archiveTable tbody tr td a:hover {
    text-decoration: underline;
}

#search-filters select {
    transition: all 0.3s; 
}

#search-filters select:hover {
    box-shadow: 0 2px 6px8px rgba(0,0,0,0.15); 
}
</style>

<!-- JS داینامیک جدول و فیلتر -->
<script>
//async JSON داده‌ها
const documents = [function loadArchive() {
  { axis:"رهبری وconst مدیریت", subAxis:"رهبری و مدیریت کیفیت", committee:"کمیته مدیریت کیفیت", title:"مثال 1", type:"Word", lastRevision:"2025-11-29", editDate:"2025-11-28", editCode:"001" },
  { axis:"رهبری و مدیریت", subAxis:"مدیریت خطر، حوادث و بلایا", committee:"کمیته مدیریت بحران", title:"مثال 4", type:"PDF", lastRevision:"2025-11-25", editDate:"2025-11-24", editCode:"004" },
  { axis:"مراقبت و درمان", subAxis:"مراقبت‌های عمومی بالینی", committee:"کمیته درمان", title:"مثال 2", type:"PDF", lastRevision:"2025-11-28", editDate:"2025-11-27", editCode:"002" },
  { axis:"مراقبت و درمان", subAxis:"پیشگیری و کنترل عفونت", committee:"کمیته بهداشت", title:"مثال 5", type:"Word", lastRevision:"2025-11-26", editDate:"2025-11-25", editCode:"005" },
  { axis:"حمایت از گیرنده خدمت", subAxis:"تأمین تسهیلات برای گیرنده خدمت", committee:"کمیته پشتیبانی", title:"مثال 3", type:"Excel", lastRevision:"2025-11-27", editDate:"2025-11-26", editCode:"003" },
  { axis:"حمایت از گیرنده خدمت", subAxis:"احترام به حقوق گیرنده خدمت", committee:"کمیته حقوق گیرنده خدمت", title:"مثال 6", type:"PDF", lastRevision:"2025-11-24", editDate:"2025-11-23", editCode:"006" }
];

// پر کردن جدول
function populateTable() {
  pageIdArchive = "85045557";
    const archiveName = "archive.json";

    const res = await fetch(`/rest/api/content/${pageIdArchive}/child/attachment?filename=${archiveName}`, {
        credentials: 'include',
        headers: { 'Accept': 'application/json' }
    });

    const data = await res.json();
    if (!data.results || !data.results.length) return [];

    const txt = await fetch(data.results[0]._links.download, {
        credentials: 'include'
    }).then(r => r.text());

    return JSON.parse(txt);
}

async function populateArchiveTable() {
    const tbody = document.querySelector("#myTable tbody"getElementById('archiveBody');
    tbody.innerHTML = "";
  documents.forEach(doc => {
    const trarchive = document.createElement("tr"await loadArchive();

    const tr.innerHTMLaxisMap = `{
      <td>${doc.axis}</td>
  modiriyat: "رهبری   <td>${doc.subAxis}</td>و مدیریت",
      <td>${doc.committee}</td>
  mored: "مراقبت   <td>${doc.title}</td>و درمان",
      <td>${doc.type}</td>
  hemayat: "حمایت از  <td>${doc.lastRevision}</td>گیرنده خدمت"
      <td>${doc.editDate}</td>};

    archive.forEach(r => <td>${doc.editCode}</td>
     `;
   const tbody.appendChild(trtr = document.createElement("tr");
  });
}

// استخراج زیرمحورها از داده‌ها
function getSubAxes(axis) {
  return documents
    .filter(doc => doc.axis === axis)
 const mahvarTitle = axisMap[r.mahvar] || "-";

        tr.map(docinnerHTML => doc.subAxis)`
     .filter((v, i, a) => a.indexOf(v) === i);
}

// پر کردن زیرمحورها هنگام انتخاب محور
function updateSubAxis() {
  const axisSelect = document.getElementById("filterAxis");
  const subAxisSelect = document.getElementById("filterSubAxis");
  const axisText = axisSelect.options[axisSelect.selectedIndex].text;
  subAxisSelect.innerHTML = '<option value="">همه</option>';

  if (axisText) {
    const subs = getSubAxes(axisText);
    subs.forEach(sub => {       <td>${mahvarTitle}</td>
            <td>${r.zirmohvar || "-"}</td>
            <td>${r.komiteh || "-"}</td>
            <td>${r.document_name || "-"}</td>
      const option = document.createElement("option");
      option.value = sub;<td>${r.noe_sanad || "-"}</td>

      option.textContent = sub;
      subAxisSelect.appendChild(option);
    });
  }
}

// فیلتر جدول
function filterTable() {
  const axisSelect = document.getElementById("filterAxis");
  const subAxisSelect = document.getElementById("filterSubAxis");
  const axisText = axisSelect.options[axisSelect.selectedIndex].text;
  const subText = subAxisSelect.value;
  const rows = document.querySelectorAll("#myTable tbody tr");

  rows.forEach(row => {
    const rowAxis = row.children[0].textContent.trim();
    const rowSub = row.children[1].textContent.trim();
    const axisMatch = !axisText || rowAxis === axisText;
    const subMatch = !subText || rowSub === subText;
    row.style.display = axisMatch && subMatch ? "" : "none";
<td>${r.date_initial || "-"}</td>
            <td>${r.date_revision || "-"}</td>
            <td>${r.date_update || "-"}</td>

            <td>${r.revision_code || "00"}</td>
            <td><a href="${r.file}" target="_blank">دانلود</a></td>
        `;

        tbody.appendChild(tr);
    });
}

// اجرا هنگام لود صفحه
document.addEventListener("DOMContentLoaded", () => {
  populateTable();
}populateArchiveTable);
</script>