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); // Clear data when switching radio buttons
}
/** 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>