{"id":7475,"date":"2025-06-03T08:53:13","date_gmt":"2025-06-03T08:53:13","guid":{"rendered":"https:\/\/division.iium.edu.my\/itd\/?page_id=7475"},"modified":"2025-06-03T08:53:13","modified_gmt":"2025-06-03T08:53:13","slug":"staff-directory","status":"publish","type":"page","link":"https:\/\/division.iium.edu.my\/itd\/staff-directory\/","title":{"rendered":"Staff Directory"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"7475\" class=\"elementor elementor-7475\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-2f78c0f elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"2f78c0f\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-c9637af\" data-id=\"c9637af\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-5916f57 elementor-widget elementor-widget-shortcode\" data-id=\"5916f57\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">    <div id=\"directory-filters\">\n        <div class=\"row my-directory-widget\">\n            <div class=\"col-md-3 form-group\">\n            <label for=\"inputEmail4\">Name<\/label>\n            <input type=\"text\" id=\"name\" class=\"form-control-directory my-field\" placeholder=\"Search By Name\" \/>\n            <\/div>\n            <div class=\"col-md-3\" style=\"display:none;\">\n            <label for=\"inputEmail4\">KCDIOM<\/label>\n            <select id=\"dept\" class=\"form-control-directory my-field\">\n            <option value=\"\">All Departments<\/option>\n        <\/select>\n            <\/div>\n            <div class=\"col-md-3 form-group\">\n            <label for=\"inputEmail4\">Sort By<\/label>\n            <select id=\"sort\" class=\"form-control-directory my-field\">\n            <option value=\"01\">Grade<\/option>\n            <option value=\"02\">Alphabet<\/option>\n        <\/select>\n            <\/div>\n            <div class=\"col-md-3 form-group\">\n            <label for=\"inputEmail4\">Type of Staff<\/label>\n            <select id=\"type\" class=\"form-control-directory my-field\">\n            <option value=\"\">ALL<\/option>\n            <option value=\"ACADEMIC\">Academic<\/option>\n            <option value=\"ADMINISTRATIVE\">Administrative<\/option>\n        <\/select>\n            <\/div>\n            <div class=\"col-md-3\">\n                <label for=\"inputEmail4\"><\/label>\n                \n                                    <input type=\"submit\" class=\"my-button\" onclick=\"loadDirectory(1)\" value=\"Search\">\n                                \n            <\/div>\n  <\/div>\n  <!-- <div class=\"col-sm-12\"> -->\n                        <!-- <div class=\"row my-directory-widget\">\n                            <div class=\"col-sm-9\"><\/div>\n                            <div class=\"col-sm-3 text-right\">\n                                <div class=\"form-group\">\n                                    <input type=\"submit\" class=\"my-button\" onclick=\"loadDirectory(1)\" value=\"Search\">\n                                <\/div>\n                            <\/div>\n                        <\/div> -->\n                    <!-- <\/div> -->\n        <!-- <div class=\"my-directory-widget\"> -->\n    \n    \n        \n<div class=\"col-sm-4 text-right\">\n        <!-- <input type=\"text\" id=\"name\" placeholder=\"Name\"> -->\n        <input type=\"hidden\" id=\"expertise\" placeholder=\"Expertise\">\n        \n        <!-- <input type=\"text\" id=\"type\" placeholder=\"Type\"> -->\n        \n        <!-- <button class=\"btn btn-block btn-primary\" onclick=\"loadDirectory(1)\">Search<\/button> -->\n    <\/div>\n\n    <div id=\"loading-spinner\" style=\"display: none;\"><div class=\"spinner\"><\/div><\/div>\n    <div id=\"directory-results\" class=\"row\"><\/div>\n    <div id=\"directory-pagination\"><\/div>\n\n    <script>\n    const AUTH_TOKEN = \"Bearer abcdef123456789\";\n    const DEPARTMENTS = [];\n    const DEFAULT_DEPT = \"157\";\n    const PER_PAGE = 25;\n    const SHOW_FILTERS = \"no\";\n\n    function showSpinner() {\n        document.getElementById('loading-spinner').style.display = 'flex';\n    }\n    function hideSpinner() {\n        document.getElementById('loading-spinner').style.display = 'none';\n    }\n\n    \/\/ function loadDepartments() {\n    \/\/     const deptSelect = document.getElementById(\"dept\");\n    \/\/     DEPARTMENTS.forEach(dept => {\n    \/\/         const opt = document.createElement(\"option\");\n    \/\/         opt.value = dept.kcdio_code;\n    \/\/         opt.textContent = dept.kcdio_desc;\n    \/\/         deptSelect.appendChild(opt);\n    \/\/     });\n    \/\/ }\n\n    async function loadDepartments() {\n        try {\n            const res = await fetch(\"https:\/\/api-endpoint.iium.edu.my\/collabs\/v1\/isdsapi\/public\/api\/kcdiom\", {\n                headers: { \"Authorization\": AUTH_TOKEN }\n            });\n            const data = await res.json();\n\n            const deptSelect = document.getElementById(\"dept\");\n            data.forEach(dept => {\n                const opt = document.createElement(\"option\");\n                opt.value = dept.kcdio_code;\n                opt.textContent = dept.kcdio_desc;\n                deptSelect.appendChild(opt);\n            });\n        } catch (err) {\n            console.error(\"Failed to load departments:\", err);\n        }\n    }\n\n    async function loadDirectory(page = 1, overrideDept = '') {\n        showSpinner();\n\n        const name = document.getElementById('name').value;\n        const expertise = document.getElementById('expertise').value;\n        const dept = overrideDept || document.getElementById('dept').value;\n        const type = document.getElementById('type').value;\n        const sort = document.getElementById('sort').value;\n\n        const params = new URLSearchParams({\n            letter: '',\n            name: name,\n            expertise: expertise,\n            kcdiom: dept,\n            type: type,\n            sort: sort,\n            page: page\n        });\n        console.log(`https:\/\/www.iium.edu.my\/directory\/api\/staff?${params.toString()}`);\n        const apiUrl = `https:\/\/www.iium.edu.my\/directory\/api\/staff?${params.toString()}`;\n\n        try {\n            const response = await fetch(apiUrl, {\n                headers: {\n                    'Authorization': AUTH_TOKEN,\n                    'Accept': 'application\/json'\n                }\n            });\n            const data = await response.json();\n\n            const resultsContainer = document.getElementById('directory-results');\n            const paginationContainer = document.getElementById('directory-pagination');\n\n            resultsContainer.innerHTML = '';\n            paginationContainer.innerHTML = '';\n\n            if (data && data.data && data.data.length > 0) {\n                data.data.forEach(item => {\n                    resultsContainer.innerHTML += `\n                        <div class=\"col-md-3\" style=\"padding-top:15px; padding-bottom:15px\">\n                \n                <a href=\"https:\/\/www.iium.edu.my\/directory\/show\/${item.staff_id}\" target=\"_blank\" style=\"text-decoration:none; color:#000\">\n                    <div class=\"card iiumcard\">\n                                                    <img decoding=\"async\" src=\"https:\/\/xcess.iium.edu.my\/packages\/card\/printing\/camera\/uploads\/original\/${item.staff_id}.jpeg\" class=\"card-img-top\" alt=\"Zuraida Bt. Hassan\">\n                                                <div class=\"card-body\">\n                            <h5 class=\"card-title\" style=\"min-height:80px\">${item.staff_name}<\/h5>\n                            <p>\n                                <b>${item.staff_position_name}<\/b><br\/>\n                                ${item.staff_location_name}\n                            <\/p>\n                            <p class=\"card-text\">\n                                ${item.staff_department_name}\n                                <hr>\n                                <div class=\"row\">\n                                    <div class=\"col-md-2\">\n                                        <i class=\"fa fa-envelope\" aria-hidden=\"true\"><\/i>\n                                    <\/div>\n                                    <div class=\"col-md-10\">\n                                        ${item.staff_email}\n                                    <\/div>\n                                    <div class=\"col-sm-2\">\n                                        <i class=\"fa fa-phone\" aria-hidden=\"true\"><\/i>\n                                    <\/div>\n                                    <div class=\"col-sm-10\">\n                                        4966\n                                    <\/div>\n                                <\/div>\n                            <\/p>\n                        <\/div>\n                    <\/div>\n                <\/a>\n            <\/div>\n                    `;\n                });\n                \/\/ resultsContainer.innerHTML += '<\/div>';\n                const currentPage = data.current_page || page;\n                const totalPages = data.total || 1;\n\n                if (currentPage > 1) {\n                    paginationContainer.innerHTML += `<button onclick=\"loadDirectory(${currentPage - 1})\">Previous<\/button>`;\n                }\n\n                paginationContainer.innerHTML += `<span> Page ${currentPage} of ${totalPages} <\/span>`;\n\n                if (currentPage < totalPages) {\n                    paginationContainer.innerHTML += `<button onclick=\"loadDirectory(${currentPage + 1})\">Next<\/button>`;\n                }\n            } else {\n                resultsContainer.innerHTML = '<p>No results found.<\/p>';\n            }\n        } catch (err) {\n            console.error(\"Failed to load directory:\", err);\n            document.getElementById('directory-results').innerHTML = '<p>Error fetching data.<\/p>';\n        } finally {\n            hideSpinner();\n        }\n    }\n\n    document.addEventListener('DOMContentLoaded', () => {\n        \/\/ loadDepartments();\n        loadDepartments().then(() => {\n            if (DEFAULT_DEPT) {\n                document.getElementById(\"dept\").value = DEFAULT_DEPT;\n            }\n        });\n        \/\/ loadDirectory();\n        loadDirectory(1, DEFAULT_DEPT);\n    });\n    <\/script>\n\n    <style>\n    #directory-filters input, #directory-filters select {\n        margin: 5px;\n        padding: 5px;\n    }\n    .staff-card {\n        padding: 10px;\n        border: 1px solid #ccc;\n        margin: 10px 0;\n    }\n    #loading-spinner {\n        display: none;\n        justify-content: center;\n        align-items: center;\n        margin: 20px 0;\n    }\n    .spinner {\n        width: 40px;\n        height: 40px;\n        border: 4px solid #ddd;\n        border-top-color: #333;\n        border-radius: 50%;\n        animation: spin 1s linear infinite;\n    }\n    .my-directory-widget .form-control-directory {\n    border: 1px solid #ccc;\n    font-size: 14px;\n    }\n    \/* Avoid theme overrides *\/\n    .my-directory-widget h3 {\n        font-weight: bold;\n    }\n\n    .my-directory-widget .my-field {\n    width: 100%;\n    max-width: 300px; \/* or whatever fixed size you want *\/\n    height: 40px;\n    padding: 6px 12px;\n    font-size: 14px;\n    border-radius: 4px;\n    box-sizing: border-box;\n    }\n\n    .my-directory-widget .my-button {\n    width: 100%;\n    max-width: 300px; \/* or whatever fixed size you want *\/\n    height: 40px;\n    }\n    @keyframes spin {\n        to { transform: rotate(360deg); }\n    }\n    <\/style>\n    <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":{"1":"page","2":"type-page","3":"status-publish","4":"hentry"},"_links":{"self":[{"href":"https:\/\/division.iium.edu.my\/itd\/wp-json\/wp\/v2\/pages\/7475","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/division.iium.edu.my\/itd\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/division.iium.edu.my\/itd\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/division.iium.edu.my\/itd\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/division.iium.edu.my\/itd\/wp-json\/wp\/v2\/comments?post=7475"}],"version-history":[{"count":4,"href":"https:\/\/division.iium.edu.my\/itd\/wp-json\/wp\/v2\/pages\/7475\/revisions"}],"predecessor-version":[{"id":7479,"href":"https:\/\/division.iium.edu.my\/itd\/wp-json\/wp\/v2\/pages\/7475\/revisions\/7479"}],"wp:attachment":[{"href":"https:\/\/division.iium.edu.my\/itd\/wp-json\/wp\/v2\/media?parent=7475"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}