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);
});