104 lines
2.5 KiB
Vue
104 lines
2.5 KiB
Vue
<script setup>
|
|
import { computed } from 'vue';
|
|
import CheckBox from 'v3/components/Form/CheckBox.vue';
|
|
import { ALERT_EVENTS, EVENT_TYPES } from './constants';
|
|
|
|
const props = defineProps({
|
|
label: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
value: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
});
|
|
|
|
const emit = defineEmits(['update']);
|
|
|
|
const alertEvents = ALERT_EVENTS;
|
|
const alertEventValues = Object.values(EVENT_TYPES);
|
|
|
|
const selectedValue = computed({
|
|
get: () => {
|
|
// maintain backward compatibility
|
|
if (props.value === 'none') return [];
|
|
if (props.value === 'mine') return [EVENT_TYPES.ASSIGNED];
|
|
if (props.value === 'all') return [...alertEventValues];
|
|
|
|
const validValues = props.value
|
|
.split('+')
|
|
.filter(value => alertEventValues.includes(value));
|
|
|
|
return [...new Set(validValues)];
|
|
},
|
|
set: value => {
|
|
const sortedValues = value.filter(Boolean).sort();
|
|
const uniqueValues = [...new Set(sortedValues)];
|
|
|
|
if (uniqueValues.length === 0) {
|
|
emit('update', 'none');
|
|
return;
|
|
}
|
|
|
|
emit('update', uniqueValues.join('+'));
|
|
},
|
|
});
|
|
|
|
const setValue = (isChecked, value) => {
|
|
let updatedValue = selectedValue.value;
|
|
if (isChecked) {
|
|
updatedValue.push(value);
|
|
} else {
|
|
updatedValue = updatedValue.filter(item => item !== value);
|
|
}
|
|
|
|
selectedValue.value = updatedValue;
|
|
};
|
|
|
|
const alertDescription = computed(() => {
|
|
const base =
|
|
'PROFILE_SETTINGS.FORM.AUDIO_NOTIFICATIONS_SECTION.ALERT_COMBINATIONS.';
|
|
|
|
if (props.value === '' || props.value === 'none') {
|
|
return base + 'NONE';
|
|
}
|
|
|
|
return base + selectedValue.value.join('+').toUpperCase();
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<label class="pb-1 text-sm font-medium leading-6 text-n-slate-12">
|
|
{{ label }}
|
|
</label>
|
|
<div class="grid gap-3 mt-2">
|
|
<div
|
|
v-for="option in alertEvents"
|
|
:key="option.value"
|
|
class="flex items-center gap-2"
|
|
>
|
|
<CheckBox
|
|
:id="`checkbox-${option.value}`"
|
|
:is-checked="selectedValue.includes(option.value)"
|
|
@update="(_val, isChecked) => setValue(isChecked, option.value)"
|
|
/>
|
|
<label
|
|
:for="`checkbox-${option.value}`"
|
|
class="text-sm text-n-slate-12 font-normal"
|
|
>
|
|
{{
|
|
$t(
|
|
`PROFILE_SETTINGS.FORM.AUDIO_NOTIFICATIONS_SECTION.ALERT_TYPES.${option.label.toUpperCase()}`
|
|
)
|
|
}}
|
|
</label>
|
|
</div>
|
|
<div class="text-n-slate-11 text-sm font-medium mt-2">
|
|
{{ $t(alertDescription) }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|