chill-bundles/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons.vue

<template>
  <a
    class="btn"
    :class="getClassButton"
    :title="buttonTitle"
    @click="openModalChoose"
  >
    <span v-if="displayTextButton">{{ buttonTitle }}</span>
  </a>

  <person-choose-modal
    v-if="showModalChoose"
    :modal-title="modalTitle"
    :options="options"
    :suggested="suggested"
    :selected="selected"
    :modal-dialog-class="'modal-dialog-scrollable modal-xl'"
    :allow-create="props.allowCreate"
    @close="closeModalChoose"
    @addNewPersons="(payload) => emit('addNewPersons', payload)"
    @onAskForCreate="onAskForCreate"
  />

  <CreateModal
    v-if="creatableEntityTypes.length > 0 && showModalCreate"
    :allowed-types="creatableEntityTypes"
    :query="query"
    @close="closeModalCreate"
    @onPersonCreated="onPersonCreated"
  ></CreateModal>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";
import PersonChooseModal from "./AddPersons/PersonChooseModal.vue";
import type {
  Suggestion,
  SearchOptions,
  CreatableEntityType,
  EntityType,
  Person,
} from "ChillPersonAssets/types";
import { marked } from "marked";
import options = marked.options;
import CreateModal from "ChillMainAssets/vuejs/OnTheFly/components/CreateModal.vue";

interface AddPersonsConfig {
  suggested?: Suggestion[];
  selected?: Suggestion[];
  buttonTitle: string;
  modalTitle: string;
  options: SearchOptions;
  allowCreate?: boolean;
  types?: EntityType[] | undefined;
}

const props = withDefaults(defineProps<AddPersonsConfig>(), {
  suggested: () => [],
  selected: () => [],
  allowCreate: () => true,
  types: () => ["person"],
});

const emit =
  defineEmits<
    (e: "addNewPersons", payload: { selected: Suggestion[] }) => void
  >();

const showModalChoose = ref(false);
const showModalCreate = ref(false);
const query = ref("");

const getClassButton = computed(() => {
  const size = props.options?.button?.size ?? "";
  const type = props.options?.button?.type ?? "btn-create";
  return size ? `${size} ${type}` : type;
});

const displayTextButton = computed(() =>
  props.options?.button?.display !== undefined
    ? props.options.button.display
    : true,
);

const creatableEntityTypes = computed<CreatableEntityType[]>(() => {
  if (typeof props.options.type !== "undefined") {
    return props.options.type.filter(
      (e: EntityType) => e === "thirdparty" || e === "person",
    );
  }
  return props.types.filter(
    (e: EntityType) => e === "thirdparty" || e === "person",
  );
});

function onAskForCreate(payload: { query: string }) {
  query.value = payload.query;
  showModalChoose.value = false;
  showModalCreate.value = true;
}

function openModalChoose() {
  showModalChoose.value = true;
}

function closeModalChoose() {
  showModalChoose.value = false;
}

function closeModalCreate() {
  showModalCreate.value = false;
}

function onPersonCreated(payload: { person: Person }) {
  console.log("onPersonCreated", payload);
  showModalCreate.value = false;
  const suggestion = {
    result: payload.person,
    relevance: 999999,
    key: "person",
  };
  emit("addNewPersons", { selected: [suggestion] });
}
</script>

<style lang="scss" scoped>
/* Button styles can remain here if needed */
</style>