I’m relatively new to VUE JS.
I have a menu, opening onclick of a button inside a component – SelectionMatrix.vue
Inside the menu, I have
- one select box at the top which has options of 5 different processes, Processa, Processb,Processc, Processd and Processd
- 32 checkboxes one below another say banana, apple, orange as in the code.
I have an endpoint which gives me the response below:
{
"processName": "processa",
"debugMask": {
"processa": "3221225472",
"processb": "3221225472",
"processc": "3221225472",
"processd": "3221225472",
"processe": "3221225472"
}
}
Here’s what I want to do:
- Update the selectedvalue of the selectbox to “processName” from response. In this case – processa
- Pick the key value from debugMask, corresponding to the processname selected. In this case – 3221225472
- Convert the key value picked into a 32 bit binary string (pre pend with zeros after binary conversion to make it 32) –
In this case – 11000000000000000000000000000000
In this string, each index corresponds to a bit 1/0 and these decide the whether the checkboxes should be checked – banana and apple checkboxes should be checked
Here’s the code:
<template>
<v-menu v-model="menu" :close-on-content-click="false" location="bottom">
<template v-slot:activator="{ props }">
<v-btn :color="btnColor" v-bind="props" @click="toggleColor">
DEBUG SELECTION
</v-btn>
</template>
<v-card min-width="300" class="compact-card" dense>
<v-list dense>
<v-list-item dense>
<v-select
:items="['Processa', 'Processb', 'Processc','Processd','Processe']"
v-model="selectedProcess"
label="Select Process Name"
></v-select>
<v-checkbox
v-model="selectAll"
label="Select All"
@click="selectAllCheckboxes"
dense
class="compact-checkbox"
></v-checkbox>
</v-list-item>
<v-list-item dense v-for="(item, index) in debugOptions" :key="index">
<v-checkbox
v-model="item.checked"
:label="item.label"
:id="item.id"
:value="item.value"
:style="item.style"
dense
class="compact-checkbox"
></v-checkbox>
</v-list-item>
</v-list>
<v-divider></v-divider>
<v-row class="justify-end">
<v-col cols="3" class="ma-3">
<v-btn
block
color="black"
rounded="2"
@click="clearTraceMaskChanges()"
>Clear all
</v-btn>
</v-col>
<v-col cols="3" class="ma-3">
<v-btn block color="black" rounded="2" @click="selectAll()"
>Select all
</v-btn>
</v-col>
<v-col cols="3" class="ma-3">
<v-btn
block
color="black"
rounded="3"
@click="handleShowConfirmationDialog()"
>Apply
</v-btn>
</v-col>
</v-row>
</v-card>
</v-menu>
<BaseConfirmationBox
v-model="showConfirmation"
@confirm="applyMaskChanges"
@cancel="handleCancel"
:message="confirmationMessage"
/>
</template>
<script setup lang="ts">
import { ref, watch} from 'vue'
import { onMounted } from 'vue'
import { storeToRefs } from 'pinia'
import AppUtils from '@/utils/appUtils'
import { useLogsStore } from '../stores/logsStore'
import BaseConfirmationBox from '@/components/BaseConfirmationBox.vue'
const menu = ref(false)
const checkedData = ref([''])
const selectedProcess = ref('Configurator')
const { getTraceMasks, applyTraceMaskChanges } = useLogsStore()
const { traceMaskData } = storeToRefs(useLogsStore())
const showConfirmation = ref(false)
const confirmationMessage = ref('Are you sure?')
const appUtils = new AppUtils()
const btnColor = ref('black')
const selectAll = ref(false)
const debugOptions = ref([
{ id: 'banana', label: 'BANANA', value: 'BANANA', checked: true },
{ id: 'apple', label: 'APPLE', value: 'APPLE', checked: true },
{ id: 'orange', label: 'ORANGE', value: 'ORANGE', checked: true },
{ id: 'grape', label: 'GRAPE', value: 'GRAPE', checked: true },
{ id: 'mango', label: 'MANGO', value: 'MANGO', checked: true },
{ id: 'pineapple', label: 'PINEAPPLE', value: 'PINEAPPLE', checked: true },
{ id: 'unused1', label: 'UNUSED_1', value: 'UNUSED_1', checked: true, style: 'color:blue;' },
{ id: 'kiwi', label: 'KIWI', value: 'KIWI', checked: true },
{ id: 'pear', label: 'PEAR', value: 'PEAR', checked: true },
{ id: 'peach', label: 'PEACH', value: 'PEACH', checked: true },
{ id: 'unused2', label: 'UNUSED_2', value: 'UNUSED_2', checked: true, style: 'color:blue;' },
{ id: 'plum', label: 'PLUM', value: 'PLUM', checked: true },
{ id: 'cherry', label: 'CHERRY', value: 'CHERRY', checked: true },
{ id: 'unused3', label: 'UNUSED_3', value: 'UNUSED_3', checked: true, style: 'color:blue;' },
{ id: 'strawberry', label: 'STRAWBERRY', value: 'STRAWBERRY', checked: true },
{ id: 'unused4', label: 'UNUSED_4', value: 'UNUSED_4', checked: true, style: 'color:blue;' },
{ id: 'blueberry', label: 'BLUEBERRY', value: 'BLUEBERRY', checked: true },
{ id: 'raspberry', label: 'RASPBERRY', value: 'RASPBERRY', checked: true },
{ id: 'blackberry', label: 'BLACKBERRY', value: 'BLACKBERRY', checked: true },
{ id: 'watermelon', label: 'WATERMELON', value: 'WATERMELON', checked: true },
{ id: 'melon', label: 'MELON', value: 'MELON', checked: true },
{ id: 'papaya', label: 'PAPAYA', value: 'PAPAYA', checked: true },
{ id: 'dragonfruit', label: 'DRAGONFRUIT', value: 'DRAGONFRUIT', checked: true },
{ id: 'lychee', label: 'LYCHEE', value: 'LYCHEE', checked: true },
{ id: 'pomegranate', label: 'POMEGRANATE', value: 'POMEGRANATE', checked: true },
{ id: 'fig', label: 'FIG', value: 'FIG', checked: true },
{ id: 'date', label: 'DATE', value: 'DATE', checked: true },
{ id: 'coconut', label: 'COCONUT', value: 'COCONUT', checked: true },
{ id: 'avocado', label: 'AVOCADO', value: 'AVOCADO', checked: true },
{ id: 'guava', label: 'GUAVA', value: 'GUAVA', checked: true },
{ id: 'jackfruit', label: 'JACKFRUIT', value: 'JACKFRUIT', checked: true },
{ id: 'durian', label: 'DURIAN', value: 'DURIAN', checked: true },
]);
const selectAllCheckboxes=() =>{
debugOptions.value.forEach(option => {
option.checked = selectAll.value;
});
}
const handleShowConfirmationDialog = () => {
confirmationMessage.value = 'Are you sure you want to apply changes?'
showConfirmation.value = true
}
const handleCancel = () => {
confirmationMessage.value = ''
showConfirmation.value = false
}
function toggleColor() {
if (btnColor.value === 'black') btnColor.value = 'primary'
else btnColor.value = 'black'
getTraceMasks().then(()=>{
fillCheckBoxData()
})
}
const fillCheckBoxData = () => {
let result;
console.log('TraceMaskData>>>>>>>>>>>>',traceMaskData.value.debugMask)
console.log('selectedProcess>>>>>>',selectedProcess.value)
const number = traceMaskData.value.debugMask[selectedProcess.value.toLowerCase()];
console.log('number for the process>>>>>>>>>>>>>>',number)
// let number = parseInt(traceMaskData.value[key as keyof typeof traceMaskData.value])
result = parseInt(number).toString(2)
console.log("Result>>>>>>>>>>>>", result)
if (result.length < 32) {
for (var i = result.length; i < 32; i++) {
result = '0' + result
}
}
const updatedOptions = debugOptions.value.map((item, index) => {
return {
...item,
checked: result[index] === '1'
};
});
debugOptions.value = [...updatedOptions];
console.log('updated checkbox values>>>>>>>>>',debugOptions.value)
}
const tracelogMaskDataTmp = ref({})
tracelogMaskDataTmp.value = traceMaskData
// Watch for changes in the `menu` state to reset button color when menu closes
watch(menu, (newValue) => {
if (!newValue) {
btnColor.value = 'black';
}
});
onMounted(() => {
getTraceMasks().then(()=>{
console.log('Tracemasks value inside component>>>>>>>>>>>>>>>',traceMaskData.value)
if (traceMaskData.value.debugMask) {
selectedProcess.value = traceMaskData.value.processName;
console.log('selected process>>>>>>>>>>>>',selectedProcess.value)
fillCheckBoxData();
}
// selectedProcess.value=traceMaskData.value.processName
// console.log('selected process>>>>>>>>>>>>',selectedProcess.value)
// fillCheckBoxData()
})
})
</script>
<style scoped>
:deep() .v-table .v-table__wrapper > table > tbody > tr > td:not(:last-child),
.v-table .v-table__wrapper > table > tbody > tr > th:not(:last-child) {
border-right: thin solid rgba(var(--v-border-color), var(--v-border-opacity));
}
:deep() .v-table .v-table__wrapper > table > tbody > tr > td {
width: 150px !important;
}
:deep(.v-input__details) {
display: none;
}
.v-card.compact-card :deep(.v-input) {
--v-input-control-height: 20px; /* Makes the checkbox height smaller */
--v-input-padding-top: 4px;
--v-input-padding-bottom: 4px;
}
</style>
- The binary conversion is working fine.
- console.log(‘updated checkbox values>>>>>>>>>’,debugOptions.value) and the watch works correctly. And I have verified the value of debugOptions
changing after the GET request.
However this change in debugOptions isn’t reflecting in the UI. The checkboxes aren’t getting checked.
What am I missing here?
