https://www.arda.or.th/assets/api/component/cardbannercircle.js?v=1790289360

1const createFilebannercircle = (components) => {
2    const datacomponent_files = components.filter(
3        ({ type }) => type === "file"
4    );
5    const datacomponent_link = components.filter(({ type }) => type === "link");
6    let newData = datacomponent_files.concat(datacomponent_link);
7
8    return newData
9        .map((content) => {
10            const newdatareference = components.filter(
11                ({ reference_key }) => reference_key === content.reference_key
12            );
13            const img = newdatareference.find(
14                ({ type }) => type === "banner"
15            ).id;
16
17            const linkObj = newdatareference.find(
18                ({ type }) => type === "link"
19            );
20            let newLink = linkObj
21                ? linkObj.link
22                : newdatareference.find(({ type }) => type === "file").link;
23
24            let typeFile = "";
25            if (content.path != null) {
26                typeFile = content.path.split("/").last().split(".").last();
27            }
28
29            const link =
30                content.link != null
31                    ? `href="${newLink}"`
32                    : `href="/api/component-file/image/${content.id}/o"`;
33            const linkDownload =
34                content.link != null
35                    ? ""
36                    : `download="${content.name_display}.${typeFile}"`;
37            const linkText =
38                content.link != null ? "รายละเอียดเพิ่มเติม" : "ดาวน์โหลด";
39            const linkIcon = content.link != null ? "" : "fas fa-download me-2";
40            const linkClass = "font-14 text-blue p-3 btn-download text-center";
41            const linkTarget = content.link != null ? 'target="_blank"' : "";
42
43            return `
44      <div class="col-lg-4 col-md-6 col-sm-12">
45        <div class="d-flex justify-content-center align-items-center">
46            <div class="card border-0">
47            <div class="card-body">
48                <a ${link} target="_blank">
49                    <img class="card-img-top rounded-circle img-filebannercircle" src="/api/component-file/image/${img}/o" onerror="this.onerror=null;this.src='${imgNoData}';" alt="Image"></img>
50                </a>
51                <a ${link} target="_blank">
52                    <h5 class="card-title text-center text-blue mt-4 mb-4">${content.name_display}</h5>
53                </a>
54                <a ${link} ${linkDownload} class="${linkClass} ms-4" ${linkTarget}><i class=" ${linkIcon}"></i> ${linkText} </a>
55            </div>
56            </div>
57        </div>
58      </div>
59    `;
60        })
61        .join("");
62};
63
64const createFilebannercircleRow = (title, titleCom, components) => `
65    ${createFilebannercircleNew(components).join("")}
66
67  `;
68
69const createFilebannercircleNew = (data) => {
70    let dataRender = data.filter((i) => i).sort((a, b) => a.position - b.position);
71    return dataRender.map(
72        (content) => `
73        <section id="cardbannercircle${content.id}">
74            <h6 class="mt-5 text-blue">${
75                content.component_languages.find(
76                    ({ language }) => language === pageLang
77                )?.title ||
78                content.component_languages.find(
79                    ({ language }) => language === "TH"
80                )?.title ||
81                ""
82            }</h6>
83            <div class="row">${createFilebannercircle(
84                content.component_files
85            )}</div>
86        </section>
87    `
88    );
89};
90
91const componentCardbannercircle = ({ components, template_languages }) => {
92    const title =
93        template_languages.find(({ language }) => language === pageLang)
94            ?.title ||
95        template_languages.find(({ language }) => language === "TH")?.title ||
96        "";
97
98    const thLanguage =
99        components[0].component_languages.find(
100            ({ language }) => language === pageLang
101        ).title ||
102        components[0].component_languages.find(
103            ({ language }) => language === "TH"
104        ).title ||
105        "";
106
107    return createFilebannercircleRow(title, thLanguage, components);
108};