fix(chatbot, approvals): fix display of warning labels, add vacation and holiday to graphs, fix chatbot UI issues.

This commit is contained in:
Nic D 2026-01-14 11:56:04 -05:00
parent 550dcbc3ba
commit 582335e082
4 changed files with 34 additions and 17 deletions

View File

@ -14,8 +14,9 @@
const text = ref(''); const text = ref('');
const handleSend = async () => { const handleSend = async () => {
await chatbot_api.sendMessage(text.value.trim()); const message = text.value.trim();
text.value = ''; text.value = '';
await chatbot_api.sendMessage(message);
}; };
onMounted(() => { onMounted(() => {
@ -27,8 +28,8 @@
<q-drawer <q-drawer
v-model="chatbot_store.is_showing_chatbot" v-model="chatbot_store.is_showing_chatbot"
overlay overlay
elevated
side="right" side="right"
:width="500"
class="column justify-end no-wrap" class="column justify-end no-wrap"
> >
<div class="col q-px-md relative-position"> <div class="col q-px-md relative-position">
@ -69,7 +70,9 @@
</template> </template>
<style scoped> <style scoped>
:deep(.q-drawer) { :deep(.q-drawer--right) {
background: rgba(0, 0, 0, 0.3); background: rgba(0, 0, 0, 0.6);
width: 50vw !important;
} }
</style> </style>

View File

@ -14,7 +14,7 @@
watch(chatbot_store.messages, () => { watch(chatbot_store.messages, () => {
if (scroll_area.value) { if (scroll_area.value) {
scroll_area.value.setScrollPercentage('vertical', 1.0, 500); scroll_area.value.setScrollPosition('vertical', 999999999, 300);
} }
}) })
</script> </script>
@ -24,24 +24,28 @@
<div <div
v-for="(msg, index) in chatbot_store.messages" v-for="(msg, index) in chatbot_store.messages"
:key="index" :key="index"
class="q-px-md" class="column q-px-md no-wrap"
> >
<DialoguePhrase <DialoguePhrase
v-if="!msg.isThinking" v-if="!msg.isThinking"
:message="msg" :message="msg"
class="col-auto"
/> />
<!-- thinking bubble while awaiting chatbot reply --> <!-- thinking bubble while awaiting chatbot reply -->
<div <q-chat-message
v-else v-else
class="row flex-center q-px-md q-py-sm" name="TargoBot"
bg-color="white"
:stamp="$t('chatbot.chat_thinking')"
> >
<q-spinner-dots <div class="row flex-center">
size="20px" <q-spinner-dots
color="primary" size="20px"
/> color="primary"
<span class="q-ml-sm text-grey-7">{{ $t('chatbot.chat_thinking') }}</span> class="col-auto self-center"
</div> />
</div>
</q-chat-message>
</div> </div>
</q-scroll-area> </q-scroll-area>
</template> </template>

View File

@ -12,7 +12,7 @@
import { getHoursMinutesStringFromHoursFloat } from 'src/utils/date-and-time-utils'; import { getHoursMinutesStringFromHoursFloat } from 'src/utils/date-and-time-utils';
interface ChartConfigHoursWorked { interface ChartConfigHoursWorked {
key: keyof Pick<TotalHours, 'regular' | 'evening' | 'emergency' | 'overtime'>; key: keyof Pick<TotalHours, 'regular' | 'evening' | 'emergency' | 'overtime'| 'vacation' | 'holiday'>;
label: string; label: string;
color: string; color: string;
} }
@ -50,6 +50,16 @@ import { getHoursMinutesStringFromHoursFloat } from 'src/utils/date-and-time-uti
label: t('shared.shift_type.overtime'), label: t('shared.shift_type.overtime'),
color: colors.getPaletteColor('negative'), color: colors.getPaletteColor('negative'),
}, },
{
key: 'holiday',
label: t('shared.shift_type.holiday'),
color: colors.getPaletteColor('purple-5'),
},
{
key: 'vacation',
label: t('shared.shift_type.vacation'),
color: colors.getPaletteColor('deep-orange-5'),
},
]; ];
const hours_worked_labels = ref<string[]>(all_days.map(day => day.date.slice(-5,))); const hours_worked_labels = ref<string[]>(all_days.map(day => day.date.slice(-5,)));

View File

@ -90,7 +90,7 @@
const getListViewTimeCss = (column_name: OverviewColumns, value: number): { classes: string, style: string } => { const getListViewTimeCss = (column_name: OverviewColumns, value: number): { classes: string, style: string } => {
if (WARNING_COLUMNS.includes(column_name) && value > 0) if (WARNING_COLUMNS.includes(column_name) && value > 0)
return { classes: 'bg-warning text-white rounded-5', style: '' }; return { classes: 'bg-warning text-white text-bold rounded-5', style: '' };
if (NEGATIVE_COLUMNS.includes(column_name) && value > 0) if (NEGATIVE_COLUMNS.includes(column_name) && value > 0)
return { classes: 'bg-negative text-white text-bold rounded-5', style: '' }; return { classes: 'bg-negative text-white text-bold rounded-5', style: '' };