awo-hamburg-intranet/module/knowledgecenter_update/Views/post_cardform_contacts.php

<?php
// -------------------- Ansprechpartner für Post --------------------
$postContactsData = [];
$query = "SELECT id, name FROM main_contact ORDER BY name ASC";
$result = mysqli_query($GLOBALS['mysql_con'], $query);
while ($row = mysqli_fetch_assoc($result)) {
    $postContactsData[] = ['value' => $row['id'], 'name' => $row['name']];
}

$selectedPostContacts = [];
if ($postId != 0) {
    $querySelected = "SELECT mc.id, mc.name 
                      FROM knowledgecenter_post_contacts AS pc
                      JOIN main_contact AS mc ON pc.main_contact_id = mc.id
                      WHERE pc.post_id = $postId";
    $resultSelected = mysqli_query($GLOBALS['mysql_con'], $querySelected);
    while ($row = mysqli_fetch_assoc($resultSelected)) {
        $selectedPostContacts[] = ['value' => $row['id'], 'name' => $row['name']];
    }
}
?>

<div class="titlebar_small">
    <h2><?=$translation->get("Ansprechpartner")?></h2>
    <?php if (get_permission_state('r-wiki', $GLOBALS['main_contact']['master_mandant_id'], $GLOBALS['main_contact']['id']) == 1) { ?>
        <span data-toggle-target="contacts_form" class="toggle post-action-btn-small green ">+</span>
    <?php } ?>
</div>
<hr>
<?php if (get_permission_state('r-wiki', $GLOBALS['main_contact']['master_mandant_id'], $GLOBALS['main_contact']['id']) == 1) { ?>
<div data-toggle-target="contacts_form" class="toggle_container">
    <div class="settings_container">
        <input type="text" id="postContactTags" name="postContacts" placeholder="<?=$translation->get("Ansprechpartner_hinzufuegen")?>" />
        <span id="saveContacts" title="Speichern" class="post-action-btn green"><?= $saveIcon ?></span>
    </div>
</div>
<?php } ?>
<div id="contactCards"></div>




<script>
    var postContactsData = <?php echo json_encode($postContactsData); ?>;
    var selectedPostContacts = <?php echo json_encode($selectedPostContacts); ?>;

    // Ansprechpartner mit Tagify initialisieren
    var tagifyPostContacts = new Tagify(document.getElementById('postContactTags'), {
        whitelist: postContactsData,
        tagTextProp: 'name',
        enforceWhitelist: true,
        dropdown: {
            enabled: 0,
            maxItems: Infinity,
            searchKeys: ["name"]
        },
        templates: {
            dropdownItem: function (tagData) {
                return `<div ${this.getAttributes(tagData)} class="tagify__dropdown__item">
                            <span>${tagData.name}</span>
                        </div>`;
            }
        }
    });
    if (selectedPostContacts.length) {
        tagifyPostContacts.addTags(selectedPostContacts);
    }

    // Speichern der Kontakte via AJAX (wie bereits implementiert)
    $("#saveContacts").on("click", function () {
        $("#tab-contacts").addClass("blurred");
        var selectedContacts = tagifyPostContacts.value.map(tag => tag.value);
        $.post("/module/knowledgecenter_update/Ajax/Ajax.php", {
            action: "update_post_contacts",
            post_id: <?= $postId ?>,
            contacts: JSON.stringify(selectedContacts)
        }, "json")
            .done(function (response) {
                if (response.success) {
                    showMessage("Alle Daten erfolgreich gespeichert!", true);
                    location.reload();
                } else {
                    showMessage("Fehler beim Speichern: Ansprechpartner", false);
                }
            })
            .fail(function () {
                showMessage("Es ist ein Fehler beim Speichern aufgetreten!", false);
            })
            .always(function () {
                $("#tab-contacts").removeClass("blurred");
            });
    });

    <?php if ($postId > 0): ?>
    // Direktes Laden und Anzeigen der Visitenkarten per AJAX beim Laden der Seite
    $(document).ready(function () {
        $.post("/module/knowledgecenter_update/Ajax/Ajax.php", {
            action: "get_contact_cards",
            post_id: <?= $postId ?>
        }, "json")
            .done(function (response) {
                if (response.success) {
                    $("#contactCards").html(response.html);
                } else {
                    $("#contactCards").html('<p>Fehler: ' + response.error + '</p>');
                }
            })
            .fail(function () {
                $("#contactCards").html('<p>Ein Fehler ist aufgetreten.</p>');
            });
    });
    <?php endif; ?>
</script>