This commit is contained in:
Julien Fastré 2025-04-15 14:46:00 +02:00
parent 75932b0e29
commit 5632697c05
Signed by: julienfastre
GPG Key ID: BDE2190974723FCB
2 changed files with 31 additions and 29 deletions

View File

@ -1,47 +1,49 @@
import { createApp } from "vue";
import AccompanyingPeriodWorkSelectorModal from "../../vuejs/_components/AccompanyingPeriodWorkSelector/AccompanyingPeriodWorkSelectorModal.vue";
import {AccompanyingPeriodWork} from "../../types";
import { AccompanyingPeriodWork } from "../../types";
document.addEventListener("DOMContentLoaded", () => {
const elements = document.querySelectorAll<HTMLDivElement>('div[data-pick-entities-type="acpw"]');
elements.forEach(el => {
const elements = document.querySelectorAll<HTMLDivElement>(
'div[data-pick-entities-type="acpw"]',
);
elements.forEach((el) => {
const uniqid = el.dataset.inputUniqid;
if (undefined === uniqid) {
throw 'Uniqid not found on this element';
throw "Uniqid not found on this element";
}
const input = document.querySelector<HTMLInputElement>(`input[data-input-uniqid="${uniqid}"]`);
const input = document.querySelector<HTMLInputElement>(
`input[data-input-uniqid="${uniqid}"]`,
);
if (null === input) {
throw 'Element with uniqid not found: ' + uniqid;
throw "Element with uniqid not found: " + uniqid;
}
const accompanyingPeriodIdAsString = input.dataset.accompanyingPeriodId;
if (undefined === accompanyingPeriodIdAsString) {
throw 'accompanying period id not found';
throw "accompanying period id not found";
}
const accompanyingPeriodId = Number.parseInt(accompanyingPeriodIdAsString);
const app = createApp(
{
template:
'<accompanying-period-work-selector-modal :accompanying-period-id="accompanyingPeriodId" @pickWork="pickWork"></accompanying-period-work-selector-modal>',
components: {AccompanyingPeriodWorkSelectorModal},
data() {
return { accompanyingPeriodId };
},
methods: {
pickWork: function(payload: {work: AccompanyingPeriodWork}) {
console.log("payload", payload);
input.value = payload.work.id.toString();
}
}
});
const app = createApp({
template:
'<accompanying-period-work-selector-modal :accompanying-period-id="accompanyingPeriodId" @pickWork="pickWork"></accompanying-period-work-selector-modal>',
components: { AccompanyingPeriodWorkSelectorModal },
data() {
return { accompanyingPeriodId };
},
methods: {
pickWork: function (payload: { work: AccompanyingPeriodWork }) {
console.log("payload", payload);
input.value = payload.work.id.toString();
},
},
});
app.mount(el);
})
});
});

View File

@ -48,7 +48,7 @@
</template>
<script setup lang="ts">
import { ref, watch, onMounted } from "vue";
import { ref, onMounted } from "vue";
import Modal from "ChillMainAssets/vuejs/_components/Modal.vue";
import AccompanyingPeriodWorkList from "./AccompanyingPeriodWorkList.vue";
import { AccompanyingPeriodWork } from "../../../types";
@ -59,9 +59,9 @@ import {
} from "translator";
import { makeFetch } from "ChillMainAssets/lib/api/apiMethods";
type AccompanyingPeriodWorkSelectorModalProps = {
interface AccompanyingPeriodWorkSelectorModalProps {
accompanyingPeriodId: number;
};
}
const selectedAcpw = ref<AccompanyingPeriodWork | null>(null);
const showModal = ref(false);
@ -69,7 +69,7 @@ const accompanyingPeriodWorks = ref<AccompanyingPeriodWork[]>([]);
const props = defineProps<AccompanyingPeriodWorkSelectorModalProps>();
const emit = defineEmits<{
pickWork: [payload: {work: AccompanyingPeriodWork|null}],
pickWork: [payload: { work: AccompanyingPeriodWork | null }];
}>();
onMounted(() => {
@ -94,7 +94,7 @@ const getAccompanyingPeriodWorks = (periodId: number) => {
const openModal = () => (showModal.value = true);
const closeModal = () => (showModal.value = false);
const confirmSelection = () => {
emit('pickWork', {work: selectedAcpw.value});
emit("pickWork", { work: selectedAcpw.value });
closeModal();
};
</script>