feat(timesheet): added timesheet page with comment popup

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

@@ -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>

src/modules/timesheets/components/timesheet/timesheet-shift-form.vue

@@ -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>

src/modules/timesheets/pages/timesheet-temp-page.vue

@@ -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();
@@ -56,7 +57,6 @@ import { useI18n } from 'vue-i18n';
                 {{ timesheet_label.end_date }}
             </div>
         </div>
-
-            <!-- insert here TimesheetTemp -->
+        <TimesheetShiftForm/>
     </q-page>
 </template>

src/modules/timesheets/timesheet-constants.ts

@@ -0,0 +1 @@
+//mock data