eCourt-note/app/tmpl/page.tsx

// app/page.tsx (ระบบ B)
'use client';
import type { ChangeEvent } from 'react';
// import { createDownloadFormAction } from './actions';
import DependentDropdown, { DropdownData } from '@/components/utils/DependentDropdown';



export default function HomePage() {
  const templateData: DropdownData = {
    T_X: ['T_no_warning', 'TF_no_warning_P2', 'TS_P2_IN'],
    T12_X: ['T12_b2_IN', 'T12_FD155_3s-long'],
  };
  const handleTmplSelect = (template: string, data: string) => {
    //console.log('Location Selected:', { template, data });
  };
  const handleInput = (e: ChangeEvent<HTMLInputElement>)=>{
    // console.log(e.target)
    return true;
  }
  return (
    <div style={{ padding: '2rem' }}>
      <div className="p-8 max-w-md mx-auto space-y-8 bg-gray-50 min-h-screen">
        <h1 className="text-xl font-bold text-center">ตัวอย่างการใช้ สร้างเอกสารจาก Template</h1>
        <div>
          ตัวอย่าง Frontend ส่งข้อมูลผ่าน &lt;form&gt;(POST) หรือ &lt;a&gt;(GET) 
          เพื่อรองรับ Vanilla JavaScript และ Classic Framework ใช้การเปลี่ยนหน้าเพื่อดาว์นโหลดไฟล์ 
          ต้องทำให้ ASP.NET มีฟังก์ชั่นเหมือน /docedit/api/template/download-docx
        </div>
        <div className="p-4 border rounded-xl bg-white shadow-sm">
          <form action="../api/template/download-docx" method="POST">
            <h2 className="font-semibold text-blue-600 mb-2">Form POST</h2>
            <DependentDropdown data={templateData} name1='tid' name2='fid'
              label1="Template(tid):" label2="ข้อมูล(fid):" onSelectChange={handleTmplSelect} />
            <div className="mb-2"></div>
            <div>
              uid:<input type="text" name="uid" className="p-2 mb-2 border border-gray-300 rounded-md" defaultValue="john"/>
            </div>
            <div>
              uname:<input type="text" name="uname" className="p-2 mb-2  border border-gray-300 rounded-md" defaultValue="John Doe"/>
            </div>
            <button
              type="submit"
              style={{
                padding: '10px 20px',
                backgroundColor: '#0070f3',
                color: '#fff',
                border: 'none',
                borderRadius: '5px',
                cursor: 'pointer',
              }}
            >
              ดาวน์โหลดเอกสาร MS Word
            </button>
          </form>
        </div>
        <div className="p-4 border rounded-xl bg-white shadow-sm">
          <h2 className="font-semibold text-blue-600 mb-2">A Link Get</h2>
          <a href="../api/template/download-docx?tid=T_X&fid=T_no_warning&uid=john&uname=John%20Doe">T_no_warning_john_xxx.docx</a><br/>
          <a href="../api/template/download-docx?tid=T_X&fid=TF_no_warning_P2&uid=john&uname=John%20Doe">TF_no_warning_P2_john_xxx.docx</a><br/>
          <a href="../api/template/download-docx?tid=T_X&fid=TS_P2_IN&uid=john&uname=John%20Doe">TS_P2_IN_john_xxx.docx</a><br/>

          <a href="../api/template/download-docx?tid=T12_X&fid=T12_b2_IN&uid=john&uname=John%20Doe">T12_b2_IN_john_xxx.docx</a><br/>
          <a href="../api/template/download-docx?tid=T12_X&fid=T12_FD155_3s-long&uid=john&uname=John%20Doe">T12_FD155_3s-long_john_xxx.docx</a><br/>
        </div>
        <div className="p-4 border rounded-xl bg-white shadow-sm">
          <h2 className="font-semibold text-blue-600 mb-2">Template & Data</h2>
          Template: <a href="../tmpl/T_X.docx">T_X.docx</a>, &nbsp;
          <a href="../tmpl/T12_X.docx">T12_X.docx</a><br/>
          Data: <a href="../tmpl/TF_no_warning_P2.json">TF_no_warning_P2.json</a>, &nbsp;
          <a href="../tmpl/T_no_warning.json">T_no_warning.json</a>, &nbsp;
          <a href="../tmpl/TS_P2_IN.json">TS_P2_IN.json</a><br/>
          <a href="../tmpl/T12_b2_IN.json">T12_b2_IN.json</a>, &nbsp;
          <a href="../tmpl/T12_FD155_3s-long.json">T12_FD155_3s-long.json</a>
        </div>
          <div className="p-4 border rounded-xl bg-white shadow-sm">
            <h2 className="font-semibold text-blue-600 mb-2">Flow</h2>
            <div className="text-xl font-bold text-center">
                  หน้านี้(เลือกไฟล์)<br/>
                  &darr; <br/>
                  download-docx(ตรวจสิทธิ์,ส่งเทมเพลต ID,ส่งข้อมูล)<br/>
                  &darr; <br/>
                  generate(เปิดเทมเพลต,สร้าง docx)<br/>
                  &darr; <br/>
                  ดาว์นโหลด docx เปิด MS Word อัตโนมัติ<br/>
                  &darr; <br/>
                  Add-ins ตรวจสอบไฟล์, ผู้ใช้แก้ไข docx<br/>
                  &darr; <br/>
                  Versioning(คุมเวอร์ชั่น)<br/>
                  &darr; <br/>
                  ecourt(อัปเดตฐานข้อมูลและไฟล์)<br/>
                  
            </div>
                  
          </div>

      </div>
    </div>
  );
}