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>
import { storeToRefs } from 'pinia';
import { useConformanceStore } from '@/stores/conformance';

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

    return { selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore, selectedActSeqFromTo }
  },
  data() {
    return {
      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'},
      ],
      activitySequence: [
        {id: 1, name: 'Start & End'},
        {id: 2, name: 'Sequence'},
      ],
      mode: [
        {id: 1, name: 'Directly follows'},
        {id: 2, name: 'Eventually follows'},
        {id: 3, name: 'Short loop(s)'},
        {id: 4, name: 'Self loop(s)'},
      ],
      processScope: [
        {id: 1, name: 'End to end'},
        {id: 2, name: 'Partial'},
      ],
      actSeqMore: [
        {id: 1, name: 'All'},
        {id: 2, name: 'Start'},
        {id: 3, name: 'End'},
        {id: 4, name: 'Start & End'},
      ],
      actSeqFromTo: [
        {id: 1, name: 'From'},
        {id: 2, name: 'To'},
        {id: 3, name: 'From & To'},
      ]
    }
  },
  methods: {
    /**
     * 切換 Rule Type 的選項時的行為
     */
    changeRadio() {
      this.selectedActivitySequence = 'Start & End';
      this.selectedMode = 'Directly follows';
      this.selectedProcessScope = 'End to end';
      this.selectedActSeqMore = 'All';
      this.selectedActSeqFromTo = 'From';
      this.$emitter.emit('isRadioChange', true); // Radio 切換時，資料要清空
    },
    /**
     * 切換 Activity sequence 的選項時的行為
     */
    changeRadioSeq() {
      this.$emitter.emit('isRadioSeqChange',true);
    },
    /**
     * 切換 Processing time 的選項時的行為
     */
    changeRadioProcessScope() {
      this.$emitter.emit('isRadioProcessScopeChange', true);
    },
    /**
     * 切換 Process Scope 的選項時的行為
     */
    changeRadioActSeqMore() {
      this.$emitter.emit('isRadioActSeqMoreChange', true);
    },
    /**
     * 切換 Activity Sequence 的選項時的行為
     */
    changeRadioActSeqFromTo() {
      this.$emitter.emit('isRadioActSeqFromToChange', true);
    },
  }
}
</script>