Nicolas Drolet
33061ef2ab
Change timesheet UI to better fit current app model and avoid adding extra clicks and interactions to add new shifts and expenses. Also refactoring calls to backend to be more efficient and use recently-finalized OIDC implementation and integration.
63 lines
1.8 KiB
Vue
63 lines
1.8 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from 'vue';
|
|
import MenuHeader from 'src/modules/profile/components/shared/menu-header.vue';
|
|
|
|
const { firstName, lastName, initialMenu } = defineProps<{
|
|
firstName: string;
|
|
lastName: string;
|
|
initialMenu: string;
|
|
}>();
|
|
|
|
const current_menu = ref<string>(initialMenu);
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
:class="$q.screen.lt.md ? 'column no-wrap' : 'row'"
|
|
:style="$q.screen.lt.md ? 'width: 90vw;' : 'width: 40vw;'"
|
|
>
|
|
<MenuHeader
|
|
:user-first-name="firstName"
|
|
:user-last-name="lastName"
|
|
/>
|
|
|
|
<div
|
|
class="col-3 no-wrap"
|
|
:class="$q.screen.lt.md ? '' : 'column'"
|
|
>
|
|
<q-card
|
|
class="col-auto q-pa-xs"
|
|
:class="$q.screen.lt.md ? 'q-mb-sm' : 'q-mr-sm'"
|
|
>
|
|
<q-tabs
|
|
v-model="current_menu"
|
|
:vertical="$q.screen.gt.sm"
|
|
dense
|
|
active-color="primary"
|
|
indicator-color="primary"
|
|
>
|
|
<slot name="tabs"></slot>
|
|
</q-tabs>
|
|
</q-card>
|
|
<div class="col"></div>
|
|
</div>
|
|
|
|
<q-card
|
|
class="col"
|
|
:class="$q.screen.lt.md ? '' : 'q-ml-sm'"
|
|
>
|
|
<q-tab-panels
|
|
v-model="current_menu"
|
|
animated
|
|
vertical
|
|
transition-prev="jump-up"
|
|
transition-next="jump-up"
|
|
class="rounded-5"
|
|
style="height: 50vh;"
|
|
>
|
|
<slot name="panels"></slot>
|
|
</q-tab-panels>
|
|
</q-card>
|
|
|
|
</div>
|
|
</template> |