eamco_office_frontend/src/pages/service/calender/EventSidebar.vue

<template>
  <div class="w-1/4 p-4 border-r">
    <h2 class="text-xl font-bold mb-4">Schedule Service</h2>
    
    <form @submit.prevent="submitEvent">
      <div class="mb-4">
        <!-- CHANGED: Class updated to 'text-gray-200' for visibility on dark backgrounds -->
        <label for="event-label" class="block text-sm font-medium text-gray-200">Calendar Label</label>
        <input type="text" id="event-label" v-model="event.title" required class="mt-1 block w-full rounded-md border-gray-300 shadow-sm text-black">
      </div>

      <div class="mb-4">
        <!-- CHANGED: Class updated to 'text-gray-200' for visibility on dark backgrounds -->
        <label for="service_type" class="block text-sm font-medium text-gray-200">Type of Service</label>
        <select class="select select-bordered select-sm w-full max-w-xs bg-white text-black" id="service_type" v-model="selectedService" required>
          <option disabled value="">Please select one</option>
          <option v-for="option in serviceOptions" :key="option.value" :value="option.value">
            {{ option.text }}
          </option>
        </select>
      </div>

      <div class="mb-4">
        <!-- CHANGED: Class updated to 'text-gray-200' for visibility on dark backgrounds -->
        <label for="event-description" class="block text-sm font-medium text-gray-200">Description</label>
        <textarea id="event-description" v-model="event.description" rows="3" required class="mt-1 block w-full rounded-md border-gray-300 shadow-sm text-black"></textarea>
      </div>

      <div class="mb-4">
        <!-- CHANGED: Class updated to 'text-gray-200' for visibility on dark backgrounds -->
        <label for="event-date" class="block text-sm font-medium text-gray-200">Day / Month</label>
        <input type="date" id="event-date" v-model="event.date" required class="mt-1 block w-full rounded-md border-gray-300 shadow-sm text-black">
      </div>

      <div class="mb-4">
        <!-- CHANGED: Class updated to 'text-gray-200' for visibility on dark backgrounds -->
        <label for="event-time" class="block text-sm font-medium text-gray-200">Time (Hour)</label>
        <select id="event-time" v-model="event.time" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm text-black">
          <option v-for="hour in 24" :key="hour" :value="hour - 1">{{ (hour - 1).toString().padStart(2, '0') }}:00</option>
        </select>
      </div>

      <div class="mb-4">
        <!-- CHANGED: Class updated to 'text-gray-200' for visibility on dark backgrounds -->
        <label for="event-end-date" class="block text-sm font-medium text-gray-200">End Date (Optional for multi-day)</label>
        <input type="date" id="event-end-date" v-model="event.endDate" :min="event.date" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm text-black">
      </div>

      <button type="submit" class="w-full bg-green-600 text-white py-2 px-4 rounded-md hover:bg-green-700">
        Add Event
      </button>
    </form>

    <div v-if="customer" class="mt-10 border-t pt-4">
      <div class="font-bold text-lg">
        {{ customer.customer_first_name }} {{ customer.customer_last_name }}
      </div>
      <div>{{ customer.customer_address }}</div>
      <div v-if="customer.customer_apt">{{ customer.customer_apt }}</div>
      <div>
        <span>{{ customer.customer_town }},</span>
        <span class="pl-1">{{ customerStateName }}</span>
        <span class="pl-1">{{ customer.customer_zip }}</span>
      </div>
      <div>{{ customer.customer_phone_number }}</div>
      <div class="text-sm text-gray-500 mt-2">{{ customerHomeType }}</div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue';
import dayjs from 'dayjs';

interface Customer {
  id: number;
  customer_last_name: string;
  customer_first_name: string;
  customer_town: string;
  customer_state: number;
  customer_zip: string;
  customer_phone_number: string;
  customer_address: string;
  customer_home_type: number;
  customer_apt: string;
}

export default defineComponent({
  name: 'EventSidebar',
  props: {
    customer: {
      type: Object as PropType<Customer | null>,
      required: true,
    },
  },
  data() {
    return {
      selectedService: '' as string | number,
      serviceOptions: [
        { text: 'Tune-up', value: 0 },
        { text: 'No Heat', value: 1 },
        { text: 'Fix', value: 2 },
        { text: 'Tank Install', value: 3 },
        { text: 'Other', value: 4 },
      ],
      event: {
        title: '',
        description: '',
        date: dayjs().format('YYYY-MM-DD'),
        endDate: '',
        time: 12,
      },
    };
  },
  computed: {
    customerStateName(): string {
      if (!this.customer) return '';
      const stateMap: { [key: number]: string } = {
        0: 'Massachusetts', 1: 'Rhode Island', 2: 'New Hampshire',
        3: 'Maine', 4: 'Vermont', 5: 'Connecticut', 6: 'New York',
      };
      return stateMap[this.customer.customer_state] || 'Unknown';
    },
    customerHomeType(): string {
       if (!this.customer) return '';
      const homeTypeMap: { [key: number]: string } = {
          0: 'Residential', 1: 'Apartment', 2: 'Condo', 3: 'Commercial',
          4: 'Business', 5: 'Construction', 6: 'Container',
      };
      return homeTypeMap[this.customer.customer_home_type] || 'Unknown';
    }
  },
  methods: {
    submitEvent() {
      if (!this.customer) {
        alert("Cannot submit: No customer data is loaded.");
        return;
      }

      const startDateTime = dayjs(`${this.event.date} ${this.event.time}:00`).format('YYYY-MM-DDTHH:mm:ss');
      const endDateTime = this.event.endDate ? dayjs(this.event.endDate).add(1, 'day').format('YYYY-MM-DD') : undefined;

      const eventPayload = {
        title: this.event.title,
        start: startDateTime,
        type_service_call: this.selectedService,
        end: endDateTime,
        extendedProps: {
          description: this.event.description,
        },
      };

      this.$emit('event-scheduled', eventPayload);

      this.event.title = '';
      this.selectedService = '';
      this.event.description = '';
      this.event.endDate = '';
      this.event.date = dayjs().format('YYYY-MM-DD');
      this.event.time = 12;
    },
  },
});
</script>