lucia-frontend/src/components/Discover/Conformance/ConformanceSidebar/ConformanceRadioGroup.vue

<template>
  <section class="space-y-2  text-sm">
    <!-- Rule Type -->
    <div id="cyp-conformance-type-radio">
      <p class="h2">Rule Type</p>
      <div v-for="rule in ruleType" :key="rule.id" class="ml-4 mb-2">
        <RadioButton v-model="selectedRuleType" :inputId="rule.id + rule.name" name="ruleType" :value="rule.name" @change="changeRadio"/>
        <label :for="rule.id + rule.name" class="ml-2">{{ rule.name }}</label>
      </div>
    </div>
    <!-- Activity Sequence (2 item) -->
    <div v-show="selectedRuleType === 'Activity sequence'" id="cyp-conformance-sequence-radio">
      <p class="h2">Activity Sequence</p>
      <div v-for="act in activitySequence" :key="act.id" class="ml-4 mb-2">
        <RadioButton v-model="selectedActivitySequence" :inputId="act.id + act.name" name="activitySequence" :value="act.name" @change="changeRadioSeq"/>
        <label :for="act.id + act.name" class="ml-2">{{ act.name }}</label>
      </div>
    </div>
    <!-- Mode -->
    <div v-show="selectedRuleType === 'Activity sequence' && selectedActivitySequence === 'Sequence'" id="cyp-conformance-Mode-radio">
      <p class="h2">Mode</p>
      <div v-for="mode in mode" :key="mode.id" class="ml-4 mb-2">
        <RadioButton v-model="selectedMode" :inputId="mode.id + mode.name" name="mode" :value="mode.name" />
        <label :for="mode.id + mode.name" class="ml-2">{{ mode.name }}</label>
      </div>
    </div>
    <!-- Process Scope -->
    <div v-show="selectedRuleType === 'Processing time' || selectedRuleType === 'Waiting time'" id="cyp-conformance-procss-radio">
      <p class="h2">Process Scope</p>
      <div v-for="pro in processScope" :key="pro.id" class="ml-4 mb-2">
        <RadioButton v-model="selectedProcessScope" :inputId="pro.id + pro.name" name="processScope" :value="pro.name" @change="changeRadioProcessScope"/>
        <label :for="pro.id + pro.name" class="ml-2">{{ pro.name }}</label>
      </div>
    </div>
    <!-- Activity Sequence (4 item) -->
    <div v-show="(selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end') || (selectedRuleType === 'Waiting time' && selectedProcessScope === 'End to end') || selectedRuleType === 'Cycle time'"  id="cyp-conformance-actseq-radio">
      <p class="h2">Activity Sequence</p>
      <div v-for="act in actSeqMore" :key="act.id" class="ml-4 mb-2">
        <RadioButton v-model="selectedActSeqMore" :inputId="act.id + act.name" name="activitySequenceMore" :value="act.name" @change="changeRadioActSeqMore"/>
        <label :for="act.id + act.name" class="ml-2">{{ act.name }}</label>
      </div>
    </div>
    <!-- Activity Sequence (3 item) -->
    <div v-show="(selectedRuleType === 'Processing time' && selectedProcessScope === 'Partial') || (selectedRuleType === 'Waiting time' && selectedProcessScope === 'Partial')" id="cyp-conformance-actseqfromto-radio">
      <p class="h2">Activity Sequence</p>
      <div v-for="act in actSeqFromTo" :key="act.id" class="ml-4 mb-2">
        <RadioButton v-model="selectedActSeqFromTo" :inputId="act.id + act.name" name="activitySequenceFromTo" :value="act.name" @change="changeRadioActSeqFromTo"/>
        <label :for="act.id + act.name" class="ml-2">{{ act.name }}</label>
      </div>
    </div>
  </section>
</template>
<script setup>
// The Lucia project.
// Copyright 2023-2026 DSP, inc.  All rights reserved.
// Authors:
//   chiayin.kuo@dsp.im (chiayin), 2023/1/31
//   imacat.yang@dsp.im (imacat), 2023/9/23
/**
 * @module components/Discover/Conformance/ConformanceSidebar/ConformanceRadioGroup
 *   Radio button groups for conformance rule type, activity
 *   sequence, mode, and process scope selection.
 */

import { storeToRefs } from 'pinia';
import { useConformanceStore } from '@/stores/conformance';
import emitter from '@/utils/emitter';

const conformanceStore = useConformanceStore();
const { selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore, selectedActSeqFromTo } = storeToRefs(conformanceStore);

const ruleType = [
  {id: 1, name: 'Have activity'},
  {id: 2, name: 'Activity sequence'},
  {id: 3, name: 'Activity duration'},
  {id: 4, name: 'Processing time'},
  {id: 5, name: 'Waiting time'},
  {id: 6, name: 'Cycle time'},
];
const activitySequence = [
  {id: 1, name: 'Start & End'},
  {id: 2, name: 'Sequence'},
];
const mode = [
  {id: 1, name: 'Directly follows'},
  {id: 2, name: 'Eventually follows'},
  {id: 3, name: 'Short loop(s)'},
  {id: 4, name: 'Self loop(s)'},
];
const processScope = [
  {id: 1, name: 'End to end'},
  {id: 2, name: 'Partial'},
];
const actSeqMore = [
  {id: 1, name: 'All'},
  {id: 2, name: 'Start'},
  {id: 3, name: 'End'},
  {id: 4, name: 'Start & End'},
];
const actSeqFromTo = [
  {id: 1, name: 'From'},
  {id: 2, name: 'To'},
  {id: 3, name: 'From & To'},
];

/** Resets dependent selections when the rule type radio changes. */
function changeRadio() {
  selectedActivitySequence.value = 'Start & End';
  selectedMode.value = 'Directly follows';
  selectedProcessScope.value = 'End to end';
  selectedActSeqMore.value = 'All';
  selectedActSeqFromTo.value = 'From';
  emitter.emit('isRadioChange', true); // Radio 切換時，資料要清空
}
/** Emits event when the activity sequence radio changes. */
function changeRadioSeq() {
  emitter.emit('isRadioSeqChange',true);
}
/** Emits event when the process scope radio changes. */
function changeRadioProcessScope() {
  emitter.emit('isRadioProcessScopeChange', true);
}
/** Emits event when the extended activity sequence radio changes. */
function changeRadioActSeqMore() {
  emitter.emit('isRadioActSeqMoreChange', true);
}
/** Emits event when the from/to activity sequence radio changes. */
function changeRadioActSeqFromTo() {
  emitter.emit('isRadioActSeqFromToChange', true);
}
</script>