Time component added

packages/Webkul/BookingProduct/src/Models/BookingProduct.php

@@ -8,7 +8,7 @@ use Webkul\BookingProduct\Contracts\BookingProduct as BookingProductContract;
 
 class BookingProduct extends Model implements BookingProductContract
 {
-    protected $fillable = ['location', 'show_location', 'type', 'available_every_week', 'available_from', 'available_to', 'product_id'];
+    protected $fillable = ['location', 'show_location', 'type', 'qty', 'available_every_week', 'available_from', 'available_to', 'product_id'];
 
     protected $with = ['default_slot', 'appointment_slot', 'event_tickets', 'rental_slot', 'table_slot'];
 

packages/Webkul/BookingProduct/src/Resources/views/admin/catalog/products/accordians/booking.blade.php

@@ -36,6 +36,14 @@
                 <label>{{ __('bookingproduct::app.admin.catalog.products.location') }}</label>
                 <input type="text" name="booking[location]" v-model="location" class="control"/>
             </div>
+        
+            <div class="control-group" :class="[errors.has('booking[qty]') ? 'has-error' : '']">
+                <label class="required">{{ __('bookingproduct::app.admin.catalog.products.qty') }}</label>
+
+                <input type="text" v-validate="'required|numeric|min:0'" name="booking[qty]" v-model="qty" class="control"/>
+                    
+                <span class="control-error" v-if="errors.has('booking[qty]')">@{{ errors.first('booking[qty]') }}</span>
+            </div>
 
             <div v-if="booking_type == 'appointment' || booking_type == 'event' || booking_type == 'rental' || booking_type == 'table'">
                 <div class="control-group" v-if="booking_type != 'event'" :class="[errors.has('booking[available_every_week]') ? 'has-error' : '']">
@@ -110,6 +118,8 @@
 
                     location: '',
 
+                    qty: 0,
+
                     available_every_week: bookingProduct.available_every_week,
 
                     available_from: bookingProduct.available_from,

packages/Webkul/Ui/src/Resources/assets/js/app.js

@@ -19,6 +19,7 @@ import Code from './directives/code';
 import Alert from './directives/alert';
 import DatetimeComponent from './components/datetime';
 import DateComponent from './components/date';
+import TimeComponent from './components/time';
 import SwatchPicker from './components/swatch-picker';
 import Debounce from './directives/debounce';
 
@@ -41,6 +42,7 @@ Vue.directive('code', Code);
 Vue.directive('alert', Alert);
 Vue.component('datetime', DatetimeComponent);
 Vue.component('date', DateComponent);
+Vue.component("time-component", TimeComponent);
 Vue.component('swatch-picker', SwatchPicker);
 Vue.directive('debounce', Debounce);
 Vue.filter('truncate', function (value, limit, trail) {

packages/Webkul/Ui/src/Resources/assets/js/components/time.vue

@@ -0,0 +1,39 @@
+<template>
+	<span>
+		<slot>
+			<input type="text" :name="name" class="control" :value="value" data-input>
+		</slot>
+	</span>
+</template>
+
+<script>
+import Flatpickr from "flatpickr";
+
+export default {
+	props: {
+		name: String,
+		value: String
+	},
+
+	data() {
+		return {
+			datepicker: null
+		};
+	},
+
+	mounted() {
+		var this_this = this;
+
+		var element = this.$el.getElementsByTagName("input")[0];
+		this.datepicker = new Flatpickr(element, {
+			enableTime: true,
+			noCalendar: true,
+			dateFormat: "H:i",
+			time_24hr: true,
+			onChange: function(selectedDates, dateStr, instance) {
+				this_this.$emit('onChange', dateStr)
+			},
+		});
+  	}
+};
+</script>