chill-bundles/src/Bundle/ChillMainBundle/Resources/public/module/address-details/index.ts

import AddressDetailsButton from "../../vuejs/_components/AddressDetails/AddressDetailsButton.vue";
import { createApp } from "vue";
import { createI18n } from "vue-i18n";
import { _createI18n } from "../../vuejs/_js/i18n";
import { Address } from "../../types";

const i18n = _createI18n({});

document
    .querySelectorAll<HTMLSpanElement>("span[data-address-details]")
    .forEach((el) => {
        const dataset = el.dataset as {
            addressId: string;
            addressRefStatus: string;
        };

        const app = createApp({
            components: { AddressDetailsButton },
            data() {
                return {
                    addressId: Number.parseInt(dataset.addressId),
                    addressRefStatus: dataset.addressRefStatus,
                };
            },
            template:
                '<address-details-button :address_id="addressId" :address_ref_status="addressRefStatus" @update-address="onUpdateAddress"></address-details-button>',
            methods: {
                onUpdateAddress: (address: Address): void => {
                    if (
                        address.refStatus === "to_review" ||
                        address.refStatus === "reviewed"
                    ) {
                        // in this two case, the address content do not change
                        return;
                    }
                    if (
                        window.confirm(
                            "L'adresse a été modifiée. Vous pouvez continuer votre travail. Cependant, pour afficher les données immédiatement, veuillez recharger la page. \n\n Voulez-vous recharger la page immédiatement ?",
                        )
                    ) {
                        window.location.reload();
                    }
                },
            },
        });

        app.use(i18n);
        app.mount(el);
    });