Jeppe Bundgaard
0f37b0632a
- Introduced `PosDesktopOrderBookingSelectorModal.vue` to streamline booking selection for desktop POS. - Added `orderBookingDisplay.js` utility for handling booking display and reference value normalization. - Created unit test `select-vehicle-form-pos.spec.js` to validate booking selection flow and registration matching. - Implemented `run-playwright-ci-parallel.mjs` script to optimize Playwright CI with parallel testing. - Updated styles and responsiveness for enhanced booking modal UX.
106 lines
3.0 KiB
Vue
106 lines
3.0 KiB
Vue
<script setup lang="ts">
|
|
import { popups } from '../objects/PosDepartmentStepMobileFlow.vue';
|
|
import WhiteBoxCard from "@/components/displays/boxes/WhiteBoxCard.vue";
|
|
import UnknownCustomer from "@/components/viewport/elements/icons/UnknownCustomer.vue";
|
|
import { popupComponentKeyToComponent } from "@/components/displays/department/pos/steps/mobile/objects/PosPopup.vue";
|
|
</script>
|
|
|
|
<template>
|
|
<div class="popup-container" data-testid="pos-mobile-popup" :data-popup-id="popups.get()?.id || undefined" v-if="popups.isSet.value">
|
|
<div class="popup-content" :style="{ ...(popups.get()?.style || {}) }">
|
|
<!-- Icon? and title? -->
|
|
<WhiteBoxCard :defaultOpen="true" :hideHeader="popups.get()?.hideHeader || false">
|
|
<template #header>
|
|
<div class="card-header-icon">
|
|
<UnknownCustomer/>
|
|
</div>
|
|
<div class="card-header-title">
|
|
{{ popups.get()?.title || 'Default Title' }}
|
|
</div>
|
|
</template>
|
|
<template #content>
|
|
<component :is="popupComponentKeyToComponent(popups.get()?.component)" @close="popups.clear()" :style="{... popups.get()?.style || {} }"/>
|
|
</template>
|
|
<template #footer v-if="!popups.get()?.hideFooter && (popups.get()?.actionButtons && popups.get()?.actionButtons.length > 0)">
|
|
<template
|
|
v-for="(actionButton, index) in popups.get().actionButtons"
|
|
:key="index"
|
|
>
|
|
<a class="card-footer-item"
|
|
:class="'is-' + (actionButton?.color || 'primary')"
|
|
:data-testid="actionButton.testId"
|
|
@click="actionButton.onClick ? actionButton.onClick() : null">
|
|
{{ actionButton.label }}
|
|
</a>
|
|
</template>
|
|
</template>
|
|
</WhiteBoxCard>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.popup-container {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: flex-start;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
z-index: 1000;
|
|
padding: max(4.5rem, env(safe-area-inset-top, 0px) + 1rem) 1rem max(1rem, env(safe-area-inset-bottom, 0px) + 0.75rem);
|
|
overflow-y: auto;
|
|
overscroll-behavior: contain;
|
|
}
|
|
.popup-content {
|
|
background-color: white;
|
|
border: 0;
|
|
border-radius: 12px;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
width: min(92vw, 26rem);
|
|
max-width: 26rem;
|
|
max-height: min(80dvh, calc(100vh - 6rem));
|
|
display: flex;
|
|
flex-direction: column;
|
|
box-shadow: 0 20px 60px rgba(7, 18, 46, 0.32);
|
|
}
|
|
.popup-content h2 {
|
|
}
|
|
|
|
.popup-content :deep(.white-box) {
|
|
height: 100%;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.popup-content :deep(.card) {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
}
|
|
|
|
.popup-content :deep(.card-header) {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.popup-content :deep(.card-content) {
|
|
flex: 1 1 auto;
|
|
min-height: 0;
|
|
overflow-y: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
.popup-content :deep(.card-footer) {
|
|
flex-shrink: 0;
|
|
background: #fff;
|
|
border-top: 1px solid #e5ebf3;
|
|
}
|
|
|
|
.popup-content :deep(.card-footer-item) {
|
|
font-weight: 700;
|
|
}
|
|
</style>
|