targo-frontend/src/modules/timesheets/components/shift/timesheet-shift-comment.vue

58 lines
1.4 KiB
Vue

<script setup lang="ts">
import { ref } from 'vue';
/* eslint-disable */
const props = defineProps<{
commentString: string;
}>();
const emit = defineEmits<{
clickClose: [];
clickSave: [comment: string];
}>();
const text = ref(props.commentString);
const close = ()=> {
emit('clickClose');
text.value = '';
}
const save = ()=> {
emit('clickSave',text.value);
close();
}
</script>
<template>
<q-card class="full-width">
<div class="row items-center justify-between q-pa-md">
{{ $t('timesheet.fields.header_comment') }}
</div>
<q-separator/>
<div class="q-pa-md">
<q-input
v-model="text"
type="textarea"
autogrow
filled
:label= "$t('timesheet.fields.textarea_comment')"
:counter=true
maxlength="512"
color="primary"
/>
</div>
<div class="row justify-end q-gutter-sm q-pa-sm">
<q-btn
color="secondary"
text-color="grey-8"
:label="$t('timesheet.cancel_button')"
@click="close"
/>
<q-btn
:label="$t('timesheet.save_button')"
color="primary"
@click="save"
/>
</div>
</q-card>
</template>