bagus-arie05
147 lines
3.2 KiB
Vue
147 lines
3.2 KiB
Vue
<template>
|
|
<div>
|
|
<div v-for="(ruang, index) in rooms" :key="index" class="ruang-item">
|
|
<v-row dense align="center">
|
|
<v-col cols="1">
|
|
<div class="ruang-badge body-3">{{ index + 1 }}</div>
|
|
</v-col>
|
|
|
|
<v-col cols="3">
|
|
<v-text-field
|
|
label="No. Ruang"
|
|
v-model="ruang.nomorRuang"
|
|
variant="outlined"
|
|
density="compact"
|
|
hide-details
|
|
placeholder="1"
|
|
class="input-field"
|
|
@update:model-value="emitUpdate"
|
|
/>
|
|
</v-col>
|
|
|
|
<v-col cols="4">
|
|
<v-text-field
|
|
label="Nama Ruang"
|
|
v-model="ruang.namaRuang"
|
|
variant="outlined"
|
|
density="compact"
|
|
hide-details
|
|
placeholder="Ruang Konsultasi"
|
|
class="input-field"
|
|
@update:model-value="emitUpdate"
|
|
/>
|
|
</v-col>
|
|
|
|
<v-col cols="3">
|
|
<v-text-field
|
|
label="No. Screen"
|
|
v-model="ruang.nomorScreen"
|
|
variant="outlined"
|
|
density="compact"
|
|
hide-details
|
|
placeholder="101"
|
|
class="input-field"
|
|
@update:model-value="emitUpdate"
|
|
/>
|
|
</v-col>
|
|
|
|
<v-col cols="1">
|
|
<v-btn
|
|
v-if="rooms.length > 1"
|
|
icon
|
|
size="small"
|
|
variant="text"
|
|
@click="removeRoom(index)"
|
|
class="btn-delete-ruang"
|
|
>
|
|
<v-icon size="18">mdi-delete</v-icon>
|
|
</v-btn>
|
|
</v-col>
|
|
</v-row>
|
|
</div>
|
|
|
|
<v-btn
|
|
variant="outlined"
|
|
size="small"
|
|
@click="addRoom"
|
|
class="btn-add-ruang mt-2"
|
|
>
|
|
<v-icon left size="18">mdi-plus</v-icon>
|
|
Tambah Ruang
|
|
</v-btn>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
const props = defineProps({
|
|
rooms: {
|
|
type: Array,
|
|
required: true
|
|
}
|
|
});
|
|
|
|
const emit = defineEmits(['update:rooms', 'add-room', 'remove-room']);
|
|
|
|
const emitUpdate = () => {
|
|
emit('update:rooms', props.rooms);
|
|
};
|
|
|
|
const addRoom = () => {
|
|
emit('add-room');
|
|
};
|
|
|
|
const removeRoom = (index) => {
|
|
emit('remove-room', index);
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
$neutral-100: #FFFFFF;
|
|
$neutral-300: #F5F7FA;
|
|
$neutral-500: #ABBED1;
|
|
$success-600: #009262;
|
|
$success-700: #1B6E53;
|
|
$danger-600: #E02B1D;
|
|
$font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
$font-weight-semibold: 600;
|
|
|
|
.ruang-item {
|
|
background: $neutral-300;
|
|
padding: 12px;
|
|
border-radius: 8px;
|
|
margin-bottom: 8px;
|
|
border: 1px solid $neutral-500;
|
|
}
|
|
|
|
.ruang-badge {
|
|
background: linear-gradient(135deg, $success-600 0%, $success-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;
|
|
}
|
|
|
|
.input-field {
|
|
font-size: 14px;
|
|
line-height: 20px;
|
|
}
|
|
|
|
.btn-delete-ruang {
|
|
color: $danger-600 !important;
|
|
}
|
|
|
|
.btn-add-ruang {
|
|
border-color: $success-600 !important;
|
|
color: $success-600 !important;
|
|
text-transform: none;
|
|
font-weight: $font-weight-semibold;
|
|
font-size: 14px;
|
|
line-height: 20px;
|
|
}
|
|
</style> |