web-antrean/components/features/master/ruang/FormDialogRuang.vue

<template>
  <v-dialog v-model="dialogModel" max-width="700px" persistent scrollable>
    <v-card class="dialog-card">
      <v-card-title class="dialog-header">
        <span class="headline-4">{{ isEdit ? 'Edit Klinik Ruang' : 'Tambah Klinik Ruang' }}</span>
        <v-btn icon variant="text" @click="handleClose" size="small" class="btn-close">
          <v-icon>mdi-close</v-icon>
        </v-btn>
      </v-card-title>

      <v-divider/>

      <v-card-text class="dialog-content">
        <v-form ref="formRef">
          <!-- Pilih Klinik -->
          <FormFieldGroup title="Pilih Klinik" icon="mdi-hospital-building">
            <v-autocomplete
              label="Kode Klinik"
              v-model="formModel.kodeKlinik"
              :items="klinikList"
              item-title="nama"
              item-value="kode"
              variant="outlined"
              density="compact"
              :rules="[v => !!v || 'Kode klinik harus dipilih']"
              hide-details="auto"
              placeholder="Pilih Klinik"
              @update:model-value="handleKlinikChange"
              class="mb-3 input-field"
            >
              <template v-slot:item="{ props, item }">
                <v-list-item v-bind="props">
                  <template v-slot:prepend>
                    <v-chip size="x-small" class="chip-success-small">{{ item.raw.kode }}</v-chip>
                  </template>
                  <v-list-item-title class="body-3">{{ item.raw.nama }}</v-list-item-title>
                </v-list-item>
              </template>
            </v-autocomplete>
          </FormFieldGroup>

          <v-divider class="my-4 divider-section"/>

          <!-- Daftar Ruangan -->
          <FormFieldGroup title="Daftar Ruangan" icon="mdi-door">
            <RoomListManager
              :rooms="formModel.ruangList"
              @update:rooms="formModel.ruangList = $event"
              @add-room="addRoom"
              @remove-room="removeRoom"
            />
          </FormFieldGroup>
        </v-form>
      </v-card-text>

      <v-divider/>

      <v-card-actions class="dialog-actions">
        <v-spacer/>
        <v-btn
          variant="outlined"
          @click="handleClose"
          class="btn-cancel"
        >
          <v-icon left size="18">mdi-close</v-icon>
          Batal
        </v-btn>
        <v-btn
          variant="flat"
          @click="handleSubmit"
          class="btn-submit"
        >
          <v-icon left size="18">mdi-content-save</v-icon>
          Simpan
        </v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<script setup>
import { ref, computed } from 'vue';
import FormFieldGroup from '@/components/common/FormFieldGroup.vue';
import RoomListManager from '@/components/master/RoomListManager.vue';

const props = defineProps({
  modelValue: {
    type: Boolean,
    required: true
  },
  isEdit: {
    type: Boolean,
    default: false
  },
  formData: {
    type: Object,
    required: true
  },
  klinikList: {
    type: Array,
    default: () => []
  }
});

const emit = defineEmits(['update:modelValue', 'update:formData', 'submit', 'close', 'klinik-change']);

const formRef = ref(null);

const dialogModel = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
});

const formModel = computed({
  get: () => props.formData,
  set: (value) => emit('update:formData', value)
});

const handleKlinikChange = (kode) => {
  emit('klinik-change', kode);
};

const addRoom = () => {
  formModel.value.ruangList.push({
    nomorRuang: '',
    namaRuang: '',
    nomorScreen: ''
  });
};

const removeRoom = (index) => {
  if (formModel.value.ruangList.length > 1) {
    formModel.value.ruangList.splice(index, 1);
  }
};

const handleClose = () => {
  emit('close');
};

const handleSubmit = async () => {
  const { valid } = await formRef.value.validate();
  
  if (!valid) return;

  if (formModel.value.ruangList.length === 0) {
    // Emit validation error
    emit('validation-error', 'Tambahkan minimal 1 ruangan');
    return;
  }

  emit('submit', formModel.value);
};
</script>

<style scoped lang="scss">
$neutral-100: #FFFFFF;
$neutral-300: #F5F7FA;
$neutral-400: #E5F7FA;
$neutral-600: #89939E;
$neutral-700: #717171;
$neutral-800: #4D4D4D;
$success-600: #009262;
$success-700: #1B6E53;
$font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
$font-weight-regular: 400;
$font-weight-semibold: 600;

.dialog-card {
  font-family: $font-family-base;
}

.dialog-header {
  background: linear-gradient(135deg, $success-600 0%, $success-700 100%);
  color: $neutral-100;
  padding: 20px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.headline-4 {
  font-size: 20px;
  line-height: 28px;
  font-weight: $font-weight-semibold;
  margin: 0;
}

.btn-close {
  color: $neutral-100 !important;
}

.dialog-content {
  padding: 24px !important;
  background: $neutral-300;
}

.dialog-actions {
  padding: 16px 24px;
  background: $neutral-300;
}

.body-3 {
  font-size: 14px;
  line-height: 20px;
  font-weight: $font-weight-regular;
}

.input-field {
  font-size: 14px;
  line-height: 20px;
}

.divider-section {
  border-color: $neutral-400 !important;
}

.chip-success-small {
  background-color: $success-600 !important;
  color: $neutral-100 !important;
  font-weight: $font-weight-semibold;
  font-size: 12px;
  line-height: 16px;
}

.btn-cancel {
  border-color: $neutral-600 !important;
  color: $neutral-800 !important;
  text-transform: none;
  font-weight: $font-weight-semibold;
  font-size: 16px;
  line-height: 24px;
  min-width: 100px;
}

.btn-submit {
  background-color: $success-600 !important;
  color: $neutral-100 !important;
  text-transform: none;
  font-weight: $font-weight-semibold;
  font-size: 16px;
  line-height: 24px;
  min-width: 100px;
}
</style>