117 lines
3.0 KiB
Vue
117 lines
3.0 KiB
Vue
<template>
|
|
<div
|
|
class="h-full bg-neutral-10 border border-neutral-300 rounded-xl ml-4 p-4 space-y-2"
|
|
>
|
|
<p class="h2 pl-2 border-b mb-3">{{ title }}</p>
|
|
<div
|
|
class="flex flex-wrap justify-start content-start gap-4 px-2 overflow-y-auto scrollbar h-[calc(100%_-_48px)]"
|
|
>
|
|
<div
|
|
class="flex items-center w-[166px]"
|
|
v-for="(act, index) in sortData"
|
|
:key="index"
|
|
:title="act"
|
|
>
|
|
<RadioButton
|
|
v-model="selectedRadio"
|
|
:inputId="index + act"
|
|
:name="select"
|
|
:value="act"
|
|
@change="actRadioData"
|
|
/>
|
|
<label
|
|
:for="index + act"
|
|
class="ml-2 p-2 whitespace-nowrap break-keep text-ellipsis overflow-hidden"
|
|
>{{ act }}</label
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
// The Lucia project.
|
|
// Copyright 2023-2026 DSP, inc. All rights reserved.
|
|
// Authors:
|
|
// chiayin.kuo@dsp.im (chiayin), 2023/1/31
|
|
// cindy.chang@dsp.im (Cindy Chang), 2024/5/30
|
|
// imacat.yang@dsp.im (imacat), 2023/9/23
|
|
/**
|
|
* @module components/Discover/Conformance/ConformanceSidebar/ActRadio
|
|
* Radio-button activity selector for conformance checking
|
|
* start/end activity input.
|
|
*/
|
|
|
|
import { ref, computed, watch, onBeforeUnmount } from "vue";
|
|
import { useConformanceInputStore } from "@/stores/conformanceInput";
|
|
import { sortNumEngZhtw } from "@/module/sortNumEngZhtw.js";
|
|
import emitter from "@/utils/emitter";
|
|
|
|
const props = defineProps([
|
|
"title",
|
|
"select",
|
|
"data",
|
|
"category",
|
|
"task",
|
|
"isSubmit",
|
|
]);
|
|
const emit = defineEmits(["selected-task"]);
|
|
|
|
const conformanceInputStore = useConformanceInputStore();
|
|
|
|
const sortData = ref([]);
|
|
const localSelect = ref(null);
|
|
const selectedRadio = ref(null);
|
|
|
|
watch(
|
|
() => props.data,
|
|
(newValue) => {
|
|
sortData.value = sortNumEngZhtw(newValue);
|
|
},
|
|
{ immediate: true },
|
|
);
|
|
|
|
watch(
|
|
() => props.task,
|
|
(newValue) => {
|
|
selectedRadio.value = newValue;
|
|
},
|
|
);
|
|
|
|
const inputActivityRadioData = computed(() => ({
|
|
category: props.category,
|
|
task: selectedRadio.value,
|
|
}));
|
|
|
|
/** Emits the selected activity via event bus and updates the store. */
|
|
function actRadioData() {
|
|
localSelect.value = null;
|
|
emitter.emit("actRadioData", inputActivityRadioData.value);
|
|
emit("selected-task", selectedRadio.value);
|
|
conformanceInputStore.setActivityRadioStartEndData(
|
|
inputActivityRadioData.value.task,
|
|
);
|
|
}
|
|
|
|
/** Sets the global activity radio data state in the conformance input store. */
|
|
function setGlobalActivityRadioDataState() {
|
|
//this.title: value might be "From" or "To"
|
|
conformanceInputStore.setActivityRadioStartEndData(
|
|
inputActivityRadioData.value.task,
|
|
props.title,
|
|
);
|
|
}
|
|
|
|
// created
|
|
sortNumEngZhtw(sortData.value);
|
|
localSelect.value = props.isSubmit ? props.select : null;
|
|
selectedRadio.value = localSelect.value;
|
|
emitter.on("reset", (data) => {
|
|
selectedRadio.value = data;
|
|
});
|
|
setGlobalActivityRadioDataState();
|
|
|
|
onBeforeUnmount(() => {
|
|
emitter.off("reset");
|
|
});
|
|
</script>
|