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

View File

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