fix them de

2026-07-13 11:12:55 +07:00
parent 84ad60841c
commit 120ff1f3c8
3 changed files with 76 additions and 38 deletions
--- a/management/src/components/ExamRoomWorkspace.tsx
+++ b/management/src/components/ExamRoomWorkspace.tsx
@@ -77,8 +77,7 @@ export const ExamRoomWorkspace: React.FC<Props> = ({ examId, onBack }) => {
  const [searchHits, setSearchHits] = useState<{ studentRkId: number; fullName: string; studentCode: string; email: string; classCodes: string }[]>([]);
  const [selectedPickerRkIds, setSelectedPickerRkIds] = useState<number[]>([]);
  const [paperTitle, setPaperTitle] = useState('');
-  const [packagePdf, setPackagePdf] = useState<File | null>(null);
-  const [packageResources, setPackageResources] = useState<File[]>([]);
+  const [packagePdfs, setPackagePdfs] = useState<File[]>([]);
  const [creatingPackage, setCreatingPackage] = useState(false);
  const [sendSchedule, setSendSchedule] = useState('');
  const [msg, setMsg] = useState('');
@@ -294,21 +293,35 @@ export const ExamRoomWorkspace: React.FC<Props> = ({ examId, onBack }) => {
    }
  };

-  const createPackage = async () => {
-    if (!packagePdf) {
-      setErr('Chọn file PDF cho gói đề');
+  const createPackagesBulk = async () => {
+    if (!packagePdfs.length) {
+      setErr('Chọn ít nhất một file PDF đề chính');
      return;
    }
    setErr('');
    setCreatingPackage(true);
    try {
-      const title = paperTitle.trim() || packagePdf.name.replace(/\.pdf$/i, '') || 'Gói đề';
-      const resCount = packageResources.length;
-      await apiExam.uploadPackage(examId, title, packagePdf, packageResources);
+      const prefix = paperTitle.trim();
+      const createdTitle = packagePdfs.length === 1
+        ? (prefix || packagePdfs[0].name.replace(/\.pdf$/i, '') || 'Gói đề')
+        : '';
+      let created = 0;
+      for (let i = 0; i < packagePdfs.length; i++) {
+        const pdf = packagePdfs[i];
+        const baseName = pdf.name.replace(/\.pdf$/i, '') || 'Gói đề';
+        const title = packagePdfs.length === 1
+          ? (prefix || baseName)
+          : baseName;
+        await apiExam.uploadPackage(examId, title, pdf, []);
+        created++;
+      }
      setPaperTitle('');
-      setPackagePdf(null);
-      setPackageResources([]);
-      setMsg(`Đã tạo gói đề "${title}" (1 PDF${resCount ? ` + ${resCount} tài nguyên` : ''})`);
+      setPackagePdfs([]);
+      setMsg(
+        created === 1
+          ? `Đã tạo gói đề "${createdTitle}". Bổ sung tài nguyên bên dưới nếu cần.`
+          : `Đã tạo ${created} gói đề. Bổ sung tài nguyên cho từng gói bên dưới nếu cần.`,
+      );
      await load();
    } catch (e: any) {
      setErr(e?.message || 'Tạo gói đề thất bại');
@@ -317,6 +330,10 @@ export const ExamRoomWorkspace: React.FC<Props> = ({ examId, onBack }) => {
    }
  };

+  const removePackagePdf = (index: number) => {
+    setPackagePdfs((prev) => prev.filter((_, i) => i !== index));
+  };
+
  const uploadResource = async (paperId: number, e: React.ChangeEvent<HTMLInputElement>) => {
    const files = Array.from(e.target.files || []);
    if (!files.length) return;
@@ -805,7 +822,7 @@ export const ExamRoomWorkspace: React.FC<Props> = ({ examId, onBack }) => {
              <div className="config-card config-card-flat">
                <div className="card-header-title">Gói đề & gửi cho sinh viên</div>
                <p className="config-card-desc">
-                  Mỗi gói đề gồm <strong>1 file PDF</strong> (đề chính) và <strong>tài nguyên kèm</strong> (ảnh, zip, doc…). Chia ngẫu nhiên sẽ gán cả gói cho từng sinh viên.
+                  Chọn <strong>nhiều PDF đề chính</strong> cùng lúc để tạo gói hàng loạt. Sau đó bổ sung <strong>tài nguyên kèm</strong> (ảnh, zip, doc…) cho từng gói bên dưới.
                </p>
                {!canModifyPapers && (
                  <p className="config-card-desc" style={{ color: 'var(--danger)' }}>
@@ -816,44 +833,61 @@ export const ExamRoomWorkspace: React.FC<Props> = ({ examId, onBack }) => {
                  <div style={{ display: 'flex', flexDirection: 'column', gap: '0.65rem', marginBottom: '0.75rem' }}>
                    <input
                      className="search-input"
-                      placeholder="Tên gói đề (VD: Gói A)"
+                      placeholder="Tên gói đề (tùy chọn, chỉ khi tạo 1 PDF)"
                      value={paperTitle}
                      onChange={(e) => setPaperTitle(e.target.value)}
                    />
                    <label className="login-field">
-                      <span>PDF đề chính (bắt buộc)</span>
+                      <span>PDF đề chính (chọn nhiều file)</span>
                      <input
                        type="file"
                        accept=".pdf"
-                        onChange={(e) => setPackagePdf(e.target.files?.[0] || null)}
-                      />
-                    </label>
-                    <label className="login-field">
-                      <span>Tài nguyên kèm (tùy chọn, many files)</span>
-                      <input
-                        type="file"
                        multiple
-                        onChange={(e) => setPackageResources(Array.from(e.target.files || []))}
+                        onChange={(e) => {
+                          const files = Array.from(e.target.files || []).filter((f) => /\.pdf$/i.test(f.name));
+                          if (!files.length) {
+                            setPackagePdfs([]);
+                            return;
+                          }
+                          setPackagePdfs(files);
+                          e.target.value = '';
+                        }}
                      />
                    </label>
-                    {packageResources.length > 0 && (
-                      <p className="config-card-desc" style={{ margin: 0 }}>
-                        {packageResources.length} tài nguyên: {packageResources.map((f) => f.name).join(', ')}
-                      </p>
+                    {packagePdfs.length > 0 && (
+                      <div style={{ display: 'flex', flexDirection: 'column', gap: '0.35rem' }}>
+                        <p className="config-card-desc" style={{ margin: 0 }}>
+                          Đã chọn {packagePdfs.length} PDF — mỗi file sẽ thành 1 gói đề:
+                        </p>
+                        <ul className="config-card-desc" style={{ margin: 0, paddingLeft: '1.1rem' }}>
+                          {packagePdfs.map((f, i) => (
+                            <li key={`${f.name}-${i}`} style={{ display: 'flex', justifyContent: 'space-between', gap: '0.5rem', alignItems: 'center' }}>
+                              <span>📄 {paperTitle.trim() && packagePdfs.length === 1 ? paperTitle.trim() : f.name.replace(/\.pdf$/i, '')}</span>
+                              <button type="button" className="btn btn-ghost btn-sm" onClick={() => removePackagePdf(i)}>
+                                Bỏ
+                              </button>
+                            </li>
+                          ))}
+                        </ul>
+                      </div>
                    )}
                    <button
                      type="button"
                      className="btn btn-primary"
                      style={{ width: '100%' }}
-                      disabled={creatingPackage || !packagePdf}
-                      onClick={createPackage}
+                      disabled={creatingPackage || packagePdfs.length === 0}
+                      onClick={createPackagesBulk}
                    >
-                      {creatingPackage ? 'Đang tạo...' : 'Tạo gói đề'}
+                      {creatingPackage
+                        ? 'Đang tạo...'
+                        : packagePdfs.length > 1
+                          ? `Tạo ${packagePdfs.length} gói đề`
+                          : 'Tạo gói đề'}
                    </button>
                  </div>
                )}
                {papers.length === 0 ? (
-                  <p className="config-card-desc">Chưa có gói đề. Tạo gói gồm PDF + tài nguyên.</p>
+                  <p className="config-card-desc">Chưa có gói đề. Chọn nhiều PDF để tạo hàng loạt.</p>
                ) : (
                  <div style={{ display: 'flex', flexDirection: 'column', gap: '0.65rem' }}>
                    {papers.map((p) => (
--- a/management/src/components/WorkspaceSeatingChart.tsx
+++ b/management/src/components/WorkspaceSeatingChart.tsx
@@ -422,8 +422,8 @@ export const WorkspaceSeatingChart: React.FC<WorkspaceSeatingChartProps> = ({
                  </button>
                )}
                <StudentAvatar fullName={student.fullName} avatar={student.avatar} isOnline={isOnline} size={40} />
-                <span className="seating-seat-name">
-                  {student.fullName.split(' ').pop()}
+                <span className="seating-seat-name" title={student.fullName}>
+                  {student.fullName}
                </span>
                <span className="seating-seat-code">
                  {student.studentCode}
--- a/management/src/index.css
+++ b/management/src/index.css
@@ -2582,8 +2582,8 @@ input:checked + .slider:before {
 }

 .seating-grid-board {
-  --seating-cell-min-width: 136px;
-  --seating-cell-min-height: 156px;
+  --seating-cell-min-width: 148px;
+  --seating-cell-min-height: 176px;
  display: grid;
  gap: 10px;
  flex: 1;
@@ -2646,15 +2646,19 @@ input:checked + .slider:before {
 }

 .seating-seat-name {
-  font-size: 0.8rem;
+  font-size: 0.72rem;
  font-weight: 700;
  margin-top: 2px;
-  white-space: nowrap;
+  white-space: normal;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
  overflow: hidden;
-  text-overflow: ellipsis;
+  word-break: break-word;
  width: 100%;
  padding: 0 2px;
-  line-height: 1.2;
+  line-height: 1.25;
+  max-height: 3.75em;
 }

 .seating-seat-code {