rejuvallife/resources/js/pages/book-slot.vue

<script setup>
import axios from '@axios';
// import VDatePicker from 'v-date-picker';
import { ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
const router = useRouter()
const route = useRoute()
const picker = ref();
const isDialogVisible = ref(false)
const isLoadingVisible = ref(false)
const isSuccessVisible = ref(false)
const selectedDate = ref();
const isDisabled = ref(true)
const chooseDate = ref([]);

const datepick = () => {
  console.log('Test');
  // isLoadingVisible.value = true;
  chooseDate.value = '';
  selectedDate.value = '';

  if (picker.value) {
    const selectedDate = new Date(picker.value);
    const dateWithoutTime = new Date(selectedDate.getFullYear(), selectedDate.getMonth(), selectedDate.getDate());
    // Format the date as needed
    const formattedDate = dateWithoutTime.toISOString().slice(0, 10);
    console.log("formattedDate", formattedDate);

    if (formattedDate) {
      console.log('in');
      axios.get('/agent/api/available-slots/' + formattedDate)
        .then(response => {
          console.log("Data", response.data.available_slots);
          chooseDate.value = Object.values(response.data.available_slots);
          isLoadingVisible.value = false;
          // console.log(chooseDate);
        })
        .catch(error => {
          console.error(error.response.data);
        });
    } else {
      chooseDate.value = [];
    }

  }
}

const isBookSlotDisabled = computed(() => {
  // Check if a date is selected
  return !selectedDate.value;
});

const bookSlot = () => {
  isLoadingVisible.value = true;
  console.log("selectedData", selectedDate.value);
  if (selectedDate.value) {
    const userData = localStorage.getItem('userData');
    isLoadingVisible.value = false;
    axios.post('/api/book-appointment/', {
      patient_id: userData,
      appointment_time: selectedDate.value
    })
      .then(response => {
        console.log(response.data.message);
        isDialogVisible.value = true;
        isSuccessVisible.value = true;
        chooseDate.value = '';
        selectedDate.value = '';
      })
      .catch(error => {
        console.error(error.response.data);
        isLoadingVisible.value = false;
      });
  }
}

const done = () => {
  isDialogVisible.value = false;
  isLoadingVisible.value = true;
  router.replace(route.query.to && route.query.to != '/login' ? String(route.query.to) : '/appointments')
}
</script>
<template>
  <VRow>
    <VCol>
      <VCard>
        <div class="d-flex flex-wrap flex-md-wrap flex-column  flex-md-row book-slo">
          <div class="">

            <v-date-picker v-model="picker" @update:modelValue="datepick"></v-date-picker>
          </div>

          <VDivider :vertical="$vuetify.display.mdAndUp" />

          <VCol>
            <VCardItem>
              <VCardTitle class="mb-5">Available Slot</VCardTitle>
              <VDialog v-model="isLoadingVisible" width="110" height="150" color="primary">

                <VCardText class="" style="color: white !important;">
                  <div class="demo-space-x">
                    <VProgressCircular :size="40" color="primary" indeterminate />
                  </div>
                </VCardText>

              </VDialog>
              <v-flex xs12 sm6 d-flex>
                <v-select v-model="selectedDate" :items="chooseDate" label="Slots" width="1000"></v-select>
              </v-flex>
              <div class="text-xs-center mt-5">
                <v-btn outline color="primary" @click=bookSlot :disabled="isBookSlotDisabled">
                  Book Slot
                </v-btn>
              </div>
            </VCardItem>
          </VCol>
        </div>
      </VCard>

    </VCol>
    <VDialog v-model="isDialogVisible" refs="myDialog" persistent width="500">
      <!-- Activator -->
      <!-- Dialog Content -->
      <VCard>
        <VCardItem class="justify-center">
          <VCardTitle class=" mb-4 font-weight-bold text-primary">
            HGH
          </VCardTitle>
        </VCardItem>
        <!-- <DialogCloseBtn variant="text" size="small" @click="isDialogVisible = false" /> -->
        <v-sheet elevation="12" max-width="600" rounded="lg" width="100%" class="pa-2 text-center mx-auto">
          <v-icon class="mb-0" color="primary" icon="mdi-check-circle" size="112"></v-icon>

          <h2 class="text-h5 mb-6" v-if="isSuccessVisible">Appointment Booked Successfully</h2>
          <v-divider class="mb-4"></v-divider>

          <div class="text-end">
            <v-btn class="text-none text-white" color="primary" rounded variant="flat" width="90" @click="done">
              OK
            </v-btn>
          </div>
        </v-sheet>
      </VCard>
    </VDialog>
  </VRow>
</template>

<style>
.book-slot {
  min-height: 460px;
}
</style>