Merge pull request #8 from ntut-xuan/sort-on-datetime

對於「比賽經歷」、「資安證照／檢定」、「活動參與」與「實習經歷」表格，自動根據日期進行排序
is1ab · Jul 8, 2024 · e82c3bd · e82c3bd
2 parents b0f48b4 + a8002bd
commit e82c3bd
Showing 1 changed file with 33 additions and 9 deletions.
diff --git a/src/member/Sample.tsx b/src/member/Sample.tsx
@@ -67,6 +67,10 @@ export const Sample = (props: {
     conferences: MemberArticleType[]
     techConfs: MemberArticleType[]
 }) => {
+    const experiences = props.experiences.sort((a, b) => b.datetime.toString().localeCompare(a.datetime.toString()))
+    const certificates = props.certificates.sort((a, b) => b.datetime.toString().localeCompare(a.datetime.toString()))
+    const participates = props.participates.sort((a, b) => b.datetime.toString().localeCompare(a.datetime.toString()))
+    const interns = props.intern.sort((a, b) => b.datetime.toString().localeCompare(a.datetime.toString()))
     const TitleName = () => {
         if(props.enName === undefined){
             return <h1 className="text-white">{props.zhName}</h1>
@@ -120,52 +124,72 @@ export const Sample = (props: {
                     }
                 </div>
             </div>
-            { props.experiences.length > 0 &&
+            { experiences.length > 0 &&
                 <div className="w-100 d-flex flex-row" style={{gap: "3rem"}}>
 
                         <div className="w-100">
                             <div className="p-3 w-100" style={{backgroundColor: "#7a1b1b"}}>
                                 <h5 className="fw-bold text-white m-0">比賽經歷</h5>
                             </div>
                             <div className="p-3 w-100">
-                                <Table columns={experienceColumns} dataSource={props.experiences} bordered pagination={false}></Table>
+                                <Table 
+                                    columns={experienceColumns} 
+                                    dataSource={experiences} 
+                                    bordered 
+                                    pagination={false}
+                                ></Table>
                             </div>
                         </div>
                 </div>
             }
-            { props.certificates.length > 0 &&
+            { certificates.length > 0 &&
                 <div className="w-100 d-flex flex-row" style={{gap: "3rem"}}>
                         <div className="w-100">
                             <div className="p-3 w-100" style={{backgroundColor: "#7a1b1b"}}>
                                 <h5 className="fw-bold text-white m-0">資安證照／檢定</h5>
                             </div>
                             <div className="p-3 w-100">
-                                <Table columns={titleDateTimeColumns} dataSource={props.certificates} bordered pagination={false}></Table>
+                                <Table 
+                                    columns={titleDateTimeColumns} 
+                                    dataSource={certificates} 
+                                    bordered 
+                                    pagination={false}
+                                ></Table>
                             </div>
                         </div>
                 </div>
             }
-            { props.participates.length > 0 &&
+            { participates.length > 0 &&
                 <div className="w-100 d-flex flex-row" style={{gap: "3rem"}}>
                         <div className="w-100">
                             <div className="p-3 w-100" style={{backgroundColor: "#7a1b1b"}}>
                                 <h5 className="fw-bold text-white m-0">活動參與</h5>
                             </div>
                             <div className="p-3 w-100">
-                                <Table columns={titleDateTimeColumns} dataSource={props.participates} bordered pagination={false}></Table>
+                                <Table 
+                                    columns={titleDateTimeColumns} 
+                                    dataSource={participates} 
+                                    bordered 
+                                    pagination={false}
+                                ></Table>
                             </div>
                         </div>
                 </div>
             }
-            { props.intern.length > 0 &&
+            { interns.length > 0 &&
                 <div className="w-100 d-flex flex-row" style={{gap: "3rem"}}>
                         <div className="w-100">
                             <div className="p-3 w-100" style={{backgroundColor: "#7a1b1b"}}>
                                 <h5 className="fw-bold text-white m-0">實習經歷</h5>
                             </div>
                             <div className="p-3 w-100">
-                                    <Table columns={internColumns} dataSource={props.intern} bordered pagination={false}></Table>
-                                </div>
+                                <Table 
+                                    columns={internColumns} 
+                                    dataSource={interns} 
+                                    bordered 
+                                    pagination={false}
+                                ></Table>
+                            </div>
                         </div>
                 </div>
             }