feat(timesheet): added timesheet page with comment popup
This commit is contained in:
Matthieu Haineault
parent
d20f970958
commit
42219171a9
|
|
@ -0,0 +1,58 @@
|
|||
<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">
|
||||
<div class="text-h6">Commentaire du quart</div>
|
||||
</div>
|
||||
<q-separator/>
|
||||
<div class="q-pa-md">
|
||||
<q-input
|
||||
v-model="text"
|
||||
type="textarea"
|
||||
autogrow
|
||||
filled
|
||||
label="Votre commentaire"
|
||||
: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="close"
|
||||
@click="close"
|
||||
/>
|
||||
<q-btn
|
||||
label="Sauvegarder"
|
||||
color="primary"
|
||||
@click="save"
|
||||
/>
|
||||
</div>
|
||||
</q-card>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,116 @@
|
|||
<!-- list of days with shifts infos-->
|
||||
|
||||
<script setup lang="ts">
|
||||
/* eslint-disable */
|
||||
import { ref } from 'vue';
|
||||
import TimesheetShiftComment from '../shift/timesheet-shift-comment.vue';
|
||||
|
||||
type ShiftRow = {
|
||||
type: string;
|
||||
start_time: string;
|
||||
end_time: string;
|
||||
comment: string;
|
||||
is_approved: boolean;
|
||||
}
|
||||
|
||||
//plug via findAll bank_codes
|
||||
const shift_type = ref<string[]> (['Régulier','Télétravail', 'Soir', 'Urgence', 'Férier', 'Vacance', 'Maladie']);
|
||||
|
||||
|
||||
const days = ['Dimanche', 'Lundi','Mardi','Mercredi','Jeudi','Vendredi','Samedi'];
|
||||
const default_rows = days.map(index => ({ index, type: '', start_time: '', end_time: '', comment: '', is_approved: false, }));
|
||||
|
||||
const rows = ref<ShiftRow[]>(default_rows);
|
||||
const empty_row = {
|
||||
type: '',
|
||||
start_time: '',
|
||||
end_time: '',
|
||||
comment: '',
|
||||
is_approved: false,
|
||||
}
|
||||
|
||||
const selected_row = ref<ShiftRow>(empty_row);
|
||||
const show_comment = ref(false);
|
||||
const onClickComment = (row: ShiftRow)=> {
|
||||
selected_row.value = row;
|
||||
show_comment.value = true;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-card class="q-pa-md q-ma-md">
|
||||
<q-dialog
|
||||
v-model="show_comment"
|
||||
transition-show="fade"
|
||||
transition-hide="fade"
|
||||
persistent
|
||||
>
|
||||
<TimesheetShiftComment
|
||||
:comment-string="selected_row.comment"
|
||||
@click-save="comment => selected_row.comment = comment"
|
||||
@click-close="show_comment = false"
|
||||
/>
|
||||
</q-dialog>
|
||||
<q-form autofocus >
|
||||
<div v-for="row, index in rows" :key="index" class="row q-gutter-sm">
|
||||
<span class="text-weight-medium col">{{ days[index] }}</span>
|
||||
<q-select
|
||||
v-model="row.type"
|
||||
:options="shift_type"
|
||||
:readonly="row.is_approved"
|
||||
class="col"
|
||||
label="Type de Quart"
|
||||
dense
|
||||
filled
|
||||
color="primary"
|
||||
standout="bg-primary text-white"
|
||||
options-dense
|
||||
map-options
|
||||
hide-dropdown-icon
|
||||
>
|
||||
<template v-slot:before>
|
||||
<q-btn
|
||||
icon="cleaning_services"
|
||||
flat
|
||||
dense
|
||||
class="q-pa-none q-ma-none"
|
||||
@click="rows[index] = empty_row"
|
||||
/>
|
||||
</template>
|
||||
</q-select>
|
||||
<q-input
|
||||
v-model="row.start_time"
|
||||
:readonly="row.is_approved"
|
||||
class="col"
|
||||
label="Entrée"
|
||||
dense
|
||||
filled
|
||||
color="primary"
|
||||
type="time"
|
||||
step="300"
|
||||
standout="bg-primary text-white"
|
||||
/>
|
||||
<q-input
|
||||
v-model="row.end_time"
|
||||
:readonly="row.is_approved"
|
||||
class="col"
|
||||
label="Sortie"
|
||||
dense
|
||||
filled
|
||||
clearable
|
||||
color="primary"
|
||||
type="time"
|
||||
step="300"
|
||||
standout="bg-primary text-white"
|
||||
/>
|
||||
<q-btn
|
||||
:icon="row.comment.length > 0 ? 'announcement':'chat_bubble_outline'"
|
||||
:color="row.comment.length > 0 ? 'primary' : 'grey-8'"
|
||||
:disable="row.is_approved"
|
||||
flat
|
||||
@click="onClickComment(row)"
|
||||
/>
|
||||
</div>
|
||||
</q-form>
|
||||
</q-card>
|
||||
</template>
|
||||
|
|
@ -4,6 +4,7 @@ import { useTimesheetStore } from 'src/stores/timesheet-store';
|
|||
import { useTimesheetApi } from '../composables/use-timesheet-api';
|
||||
import { computed, onMounted } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import TimesheetShiftForm from '../components/timesheet/timesheet-shift-form.vue';
|
||||
|
||||
|
||||
const { locale } = useI18n();
|
||||
|
|
@ -45,18 +46,17 @@ import { useI18n } from 'vue-i18n';
|
|||
<div class="text-h4 row justify-center q-mt-lg text-uppercase text-weight-bolder text-grey-8">
|
||||
{{ $t('pageTitles.timeSheets') }}
|
||||
</div>
|
||||
<div class="row items-center justify-center q-py-none q-my-none">
|
||||
<div class="text-primary text-h6 text-uppercase">
|
||||
{{ timesheet_label.start_date }}
|
||||
</div>
|
||||
<div class="text-grey-8 text-weight-bold text-uppercase q-mx-md">
|
||||
{{ $t('timeSheet.dateRangesTo') }}
|
||||
</div>
|
||||
<div class="text-primary text-h6 text-uppercase">
|
||||
{{ timesheet_label.end_date }}
|
||||
</div>
|
||||
<div class="row items-center justify-center q-py-none q-my-none">
|
||||
<div class="text-primary text-h6 text-uppercase">
|
||||
{{ timesheet_label.start_date }}
|
||||
</div>
|
||||
|
||||
<!-- insert here TimesheetTemp -->
|
||||
<div class="text-grey-8 text-weight-bold text-uppercase q-mx-md">
|
||||
{{ $t('timeSheet.dateRangesTo') }}
|
||||
</div>
|
||||
<div class="text-primary text-h6 text-uppercase">
|
||||
{{ timesheet_label.end_date }}
|
||||
</div>
|
||||
</div>
|
||||
<TimesheetShiftForm/>
|
||||
</q-page>
|
||||
</template>
|
||||
|
|
@ -0,0 +1 @@
|
|||
//mock data
|
||||
Loading…
Reference in New Issue
Block a user