Conformance: Have activity Layout done.

src/components/Discover/Conformance/ConformanceSidebar/ConformanceRadioGroup.vue

@@ -0,0 +1,94 @@
+<template>
+  <section class="space-y-2  text-sm">
+    <!-- Rule Type -->
+    <div>
+      <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" />
+        <label :for="rule.id + rule.name" class="ml-2">{{ rule.name }}</label>
+      </div>
+    </div>
+    <!-- Activity Sequence (2 item) -->
+    <div v-show="selectedRuleType === 'Activity sequence'">
+      <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" />
+        <label :for="act.id + act.name" class="ml-2">{{ act.name }}</label>
+      </div>
+    </div>
+    <!-- Mode -->
+    <div v-show="selectedRuleType === 'Activity sequence' && selectedActivitySequence === 'Sequence'">
+      <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'">
+      <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" />
+        <label :for="pro.id + pro.name" class="ml-2">{{ pro.name }}</label>
+      </div>
+    </div>
+    <!-- Activity Sequence (4 item) -->
+    <div v-show="selectedRuleType === 'Processing time' || selectedRuleType === 'Cycle time'">
+      <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" />
+        <label :for="act.id + act.name" class="ml-2">{{ act.name }}</label>
+      </div>
+    </div>
+  </section>
+</template>
+<script>
+import { storeToRefs } from 'pinia';
+import ConformanceStore from '@/stores/conformance.js';
+
+export default {
+  setup() {
+    const conformanceStore = ConformanceStore();
+    const { selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore } = storeToRefs(conformanceStore);
+
+    return { selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore }
+  },
+  data() {
+    return {
+      // selectedRuleType: '',
+      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'},
+      ],
+      // selectedActivitySequence: '',
+      activitySequence: [
+        {id: 1, name: 'Start & End'},
+        {id: 2, name: 'Sequence'},
+      ],
+      // selectedMode: '',
+      mode: [
+        {id: 1, name: 'Directly follows'},
+        {id: 2, name: 'Eventually follows'},
+        {id: 3, name: 'Short loop(s)'},
+        {id: 4, name: 'Self loop(s)'},
+      ],
+      // selectedProcessScope: '',
+      processScope: [
+        {id: 1, name: 'End to end'},
+        {id: 2, name: 'Partial'},
+      ],
+      // selectedActSeqMore: '',
+      actSeqMore: [
+        {id: 1, name: 'All'},
+        {id: 2, name: 'Start'},
+        {id: 3, name: 'End'},
+        {id: 4, name: 'Start & End '},
+      ],
+    }
+  }
+}
+</script>