171 lines
3.7 KiB
Vue
171 lines
3.7 KiB
Vue
<template>
|
|
<div>
|
|
<div v-for="(shift, index) in shifts" :key="index" class="shift-item">
|
|
<v-row dense align="center">
|
|
<v-col cols="2">
|
|
<div class="shift-badge body-3">Shift {{ index + 1 }}</div>
|
|
</v-col>
|
|
|
|
<v-col cols="3">
|
|
<v-text-field
|
|
v-model="shift.dari"
|
|
label="Mulai"
|
|
type="time"
|
|
variant="outlined"
|
|
density="compact"
|
|
hide-details
|
|
class="input-field"
|
|
@update:model-value="emitUpdate"
|
|
/>
|
|
</v-col>
|
|
|
|
<v-col cols="3">
|
|
<v-text-field
|
|
v-model="shift.sampai"
|
|
label="Selesai"
|
|
type="time"
|
|
variant="outlined"
|
|
density="compact"
|
|
hide-details
|
|
class="input-field"
|
|
@update:model-value="emitUpdate"
|
|
/>
|
|
</v-col>
|
|
|
|
<v-col cols="3">
|
|
<v-text-field
|
|
v-model.number="shift.kuota"
|
|
label="Kuota"
|
|
type="number"
|
|
variant="outlined"
|
|
density="compact"
|
|
hide-details
|
|
placeholder="0"
|
|
class="input-field"
|
|
@update:model-value="emitUpdate"
|
|
/>
|
|
</v-col>
|
|
|
|
<v-col cols="1">
|
|
<v-btn
|
|
v-if="shifts.length > 1"
|
|
icon
|
|
size="small"
|
|
variant="text"
|
|
class="btn-delete-shift"
|
|
@click="removeShift(index)"
|
|
>
|
|
<v-icon size="18">mdi-delete</v-icon>
|
|
</v-btn>
|
|
</v-col>
|
|
</v-row>
|
|
</div>
|
|
|
|
<div class="total-badge">
|
|
<v-icon size="18" class="icon-success">mdi-sigma</v-icon>
|
|
<span class="body-3 text-medium">Total Kuota:</span>
|
|
<v-chip size="small" variant="flat" class="chip-success">
|
|
{{ totalQuota }}
|
|
</v-chip>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed } from 'vue';
|
|
|
|
const props = defineProps({
|
|
shifts: {
|
|
type: Array,
|
|
required: true
|
|
}
|
|
});
|
|
|
|
const emit = defineEmits(['update:shifts', 'remove-shift']);
|
|
|
|
const totalQuota = computed(() => {
|
|
return props.shifts.reduce((total, shift) => {
|
|
return total + (parseInt(shift.kuota) || 0);
|
|
}, 0);
|
|
});
|
|
|
|
const emitUpdate = () => {
|
|
emit('update:shifts', props.shifts);
|
|
};
|
|
|
|
const removeShift = (index) => {
|
|
emit('remove-shift', index);
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
$neutral-100: #FFFFFF;
|
|
$neutral-300: #F5F7FA;
|
|
$neutral-500: #ABBED1;
|
|
$neutral-700: #717171;
|
|
$secondary-600: #0671E0;
|
|
$secondary-700: #0053AD;
|
|
$success-200: #F1FBF8;
|
|
$success-300: #84DFC1;
|
|
$success-600: #009262;
|
|
$danger-600: #E02B1D;
|
|
$font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
$font-weight-medium: 500;
|
|
$font-weight-semibold: 600;
|
|
|
|
.shift-item {
|
|
background: $neutral-300;
|
|
padding: 12px;
|
|
border-radius: 8px;
|
|
margin-bottom: 8px;
|
|
border: 1px solid $neutral-500;
|
|
}
|
|
|
|
.shift-badge {
|
|
background: linear-gradient(135deg, $secondary-600 0%, $secondary-700 100%);
|
|
color: $neutral-100;
|
|
padding: 8px;
|
|
border-radius: 6px;
|
|
text-align: center;
|
|
font-weight: $font-weight-semibold;
|
|
}
|
|
|
|
.body-3 {
|
|
font-size: 14px;
|
|
line-height: 20px;
|
|
}
|
|
|
|
.text-medium {
|
|
font-weight: $font-weight-medium !important;
|
|
}
|
|
|
|
.input-field {
|
|
font-size: 14px;
|
|
line-height: 20px;
|
|
}
|
|
|
|
.btn-delete-shift {
|
|
color: $danger-600 !important;
|
|
}
|
|
|
|
.total-badge {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 10px;
|
|
background: $success-200;
|
|
border-radius: 8px;
|
|
margin-top: 8px;
|
|
border: 1px solid $success-300;
|
|
}
|
|
|
|
.icon-success {
|
|
color: $success-600 !important;
|
|
}
|
|
|
|
.chip-success {
|
|
background-color: $success-600 !important;
|
|
color: $neutral-100 !important;
|
|
font-weight: $font-weight-semibold;
|
|
}
|
|
</style> |