imacat/lucia-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Conformance: layout done.(not time range)

Browse Source
This commit is contained in:
chiayin
2023-07-12 09:56:23 +08:00
parent 466c6ea867
commit 9db7b73d2c
17 changed files with 805 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/components/Discover/Conformance/ConformanceSidebar.vue
View File

@@ -9,16 +9,18 @@
<div class="p-4 h-[calc(100%_-_40px)] flex">
<div class="h-full flex flex-col justify-between w-[268px]">
<!-- select -->
<div class="h-full overflow-y-auto scrollbar">
<!-- show and hidden button -->
<div class="flex items-center justify-between">
<p class="h2">Activity Select</p>
<span class="material-symbols-outlined cursor-pointer duration-300 hover:bg-primary/50 hover:rounded " @click="isShowBar = !isShowBar">{{ isShowBar ? 'keyboard_double_arrow_right' : 'keyboard_double_arrow_left' }}</span>
</div>
<div class="h-full overflow-y-auto scrollbar w-[268px]">
<!-- radio group -->
<ConformanceRadioGroup></ConformanceRadioGroup>
<!-- show and hidden button -->
<div class="flex items-center justify-between mr-1" :class="isShowBar ? 'text-primary' : ''">
<p class="h2">Activity Selector</p>
<span class="material-symbols-outlined cursor-pointer duration-300 hover:bg-primary/50 hover:rounded" @click="isShowBar = !isShowBar">{{ isShowBar ? 'keyboard_double_arrow_right' : 'keyboard_double_arrow_left' }}</span>
</div>
<!-- select result -->
<ConformanceSelectResult></ConformanceSelectResult>
<!-- time range -->
<ConformanceTimeRange v-if="selectedRuleType === 'Activity duration' || selectedRuleType === 'Processing time' || selectedRuleType === 'Waiting time' || selectedRuleType === 'Cycle time'"></ConformanceTimeRange>
</div>
<!-- button -->
<div class="space-x-4 p-4 flex justify-center items-content border-t border-neutral-300">
@@ -33,11 +35,20 @@
</template>
<script>
import { storeToRefs } from 'pinia';
import ConformanceStore from '@/stores/conformance.js';
import ConformanceRadioGroup from './ConformanceSidebar/ConformanceRadioGroup.vue';
import ConformanceShowBar from './ConformanceSidebar/ConformanceShowBar.vue';
import ConformanceTimeRange from './ConformanceSidebar/ConformanceTimeRange.vue';
import ConformanceSelectResult from './ConformanceSidebar/ConformanceSelectResult.vue';
export default {
setup() {
const conformanceStore = ConformanceStore();
const { selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore, selectedActSeqFromTo } = storeToRefs(conformanceStore);
return { selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore, selectedActSeqFromTo }
},
data() {
return {
isShowBar: false,
@@ -47,7 +58,16 @@ export default {
components: {
ConformanceRadioGroup,
ConformanceShowBar,
ConformanceTimeRange,
ConformanceSelectResult,
}
},
created() {
this.isShowBar = true;
},
}
</script>
<style>
.text-shadow{
text-shadow: 1.5px 1px 8px black;
}
</style>