Merge pull request #18 from sadekd/exceptions

V2

Author: sadekd

LICENCE.md renamed to LICENSE.md

@@ -1,14 +1,27 @@
 # Nova Opening Hours Field
 
-Laravel Nova custom field for [Spatie Opening Hours](https://github.com/spatie/opening-hours)
+[![Latest Stable Version](https://poser.pugx.org/sadekd/nova-opening-hours-field/v)](https://packagist.org/packages/sadekd/nova-opening-hours-field)
+[![Total Downloads](https://poser.pugx.org/sadekd/nova-opening-hours-field/downloads)](https://packagist.org/packages/sadekd/nova-opening-hours-field)
+[![License](https://poser.pugx.org/sadekd/nova-opening-hours-field/license)](https://packagist.org/packages/sadekd/nova-opening-hours-field)
+[![PHP Version Require](https://poser.pugx.org/sadekd/nova-opening-hours-field/require/php)](https://packagist.org/packages/sadekd/nova-opening-hours-field)
+
+[Laravel](https://laravel.com) [Nova](https://nova.laravel.com) custom field for [Spatie Opening Hours](https://github.com/spatie/opening-hours)
+
+### Index
 
 ![Screenshot Index](screenshot-index.png)
 
+### Form
+
 ![Screenshot Form](screenshot-form.png)
 
+### Detail
+
+![Screenshot Detail](screenshot-detail.png)
+
 ## Installation
 
-You can install the package in to a Laravel app that uses [Nova](https://nova.laravel.com) via composer:
+You can install the package in to a [Laravel](https://laravel.com) app that uses [Nova](https://nova.laravel.com) via composer:
 
 ```bash
 composer require sadekd/nova-opening-hours-field
@@ -19,10 +32,9 @@ composer require sadekd/nova-opening-hours-field
 Laravel Migration
 
 ```php
-$table->json('opening_hours');
+$table->json('opening_hours');  // can be ->nullable()
 ```
 
-
 Laravel Model
 
 ```php
@@ -34,15 +46,25 @@ protected $casts = [
 Nova Resource
 
 ```php
-NovaOpeningHoursField::make('opening_hours'),
+NovaOpeningHoursField::make(__('Opening Hours'), 'opening_hours'),
+// ->allowExceptions(FALSE)    // TRUE by default
+// ->allowOverflowMidnight(TRUE)  // FALSE by default
+// ->useTextInputs(TRUE)  // FALSE by default
 ```
 
+## Known issues
+
+- Lazy validation on time field - losing focus when live(help needed)
+- Editing date in exceptions causes row jumping - key from date(help needed)
+- Browser time input does not support 24:00
+- Browser date input does not support recurring format
+
 ## TODO
 
-- [ ] Explode interval input => time fields
-- [ ] Validation
-- [ ] Localization
-- [ ] Exceptions
+- [x] Explode interval input => time fields
+- [x] Validation
+- [x] Localization
+- [x] Exceptions
 - [ ] Tests
 
 ## License

README.md

@@ -8,7 +8,8 @@
     ],
     "license": "MIT",
     "require": {
-        "php": "^7.2|^8.0"
+        "php": "^7.2|^8.0",
+        "spatie/opening-hours": "^2.0"
     },
     "autoload": {
         "psr-4": {

composer.json

@@ -1,4 +1,3 @@
 {
-    "/js/field.js": "/js/field.js",
-    "/css/field.css": "/css/field.css"
+    "/js/field.js": "/js/field.js"
 }

dist/css/field.css

@@ -0,0 +1,62 @@
+<template>
+    <input
+        :type="useTextInputs ? 'text' : 'date'"
+        class="form-control form-input form-input-bordered"
+        :class="{ 'border-danger': !isValid }"
+        v-model="date"
+        :min="getMinDate()"
+        minlength="7"
+        maxlength="10"
+        required
+    />
+</template>
+
+<script>
+import {getTodayDate} from "../src/func";
+import {useTextInputsProp} from "../src/props";
+
+export default {
+    props:  {
+        dateProp: String,
+        ...useTextInputsProp,
+    },
+
+    emits: ['updateDate'],
+
+    data: function () {
+        return {
+            date: this.dateProp,
+        }
+    },
+
+    computed: {
+        isValid: function () {
+            const re = /([12]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01]))/;
+            // console.log(this.date, re.test(this.date))
+            return re.test(this.date);
+        }
+    },
+
+    methods: {
+        getMinDate() {
+            return getTodayDate()
+        },
+    },
+
+    watch: {
+        date(value) {
+            this.$emit('updateDate', value)
+        },
+    },
+}
+</script>
+
+<style scoped>
+input[type="text"] {
+    width: 125px;
+}
+
+input[type="date"] {
+    width: 175px;
+}
+</style>

dist/js/field.js

@@ -0,0 +1,60 @@
+<template>
+    <table class="openingHours exceptionsTable table mt-6 w-full">
+        <tr>
+            <th class="text-left font-bold" colspan="2">{{ __('Exceptions') }}</th>
+            <th v-if="editable">
+                <button class="btn btn-default btn-primary" @click.prevent="$emit('addException')">+</button>
+            </th>
+        </tr>
+        <tr v-for="exception in exceptions">
+            <td>
+                <div v-if="editable">
+                    <date-input
+                        :date-prop="exception.date"
+                        :use-text-inputs="useTextInputs"
+                        @updateDate="$emit('renameException', exception.date, $event)"
+                    />
+                </div>
+                <div v-else>{{ exception.date }}</div>
+            </td>
+            <td>
+                <div v-if="Object.values(exception.intervals).length">
+                    <div v-for="(interval, index) in exception.intervals">
+                        <div v-if="editable">
+                            <interval-input
+                                :interval-prop="interval"
+                                :use-text-inputs="useTextInputs"
+                                @updateInterval="$emit('updateInterval', 'exceptions', exception.date, index, $event)"
+                                @removeInterval="$emit('removeInterval', 'exceptions', exception.date, index)"
+                            />
+                        </div>
+                        <div v-else>{{ interval }}</div>
+                    </div>
+                </div>
+                <div v-else>{{ __('Closed') }}</div>
+            </td>
+            <td v-if="editable">
+                <button class="btn btn-default btn-primary" @click.prevent="$emit('addInterval', 'exceptions', exception.date)">+</button>
+                <button class="btn btn-default btn-danger" @click.prevent="$emit('removeException', exception.date)">-</button>
+            </td>
+        </tr>
+    </table>
+</template>
+
+<script>
+import IntervalInput from "./IntervalInput";
+import DateInput from "./DateInput";
+import {editableProp, exceptionsProp, useTextInputsProp} from "../src/props";
+
+export default {
+    components: { IntervalInput, DateInput },
+
+    props: {
+        ...exceptionsProp,
+        ...editableProp,
+        ...useTextInputsProp,
+    },
+
+    emits: ['updateInterval', 'removeInterval', 'addInterval', 'removeException', 'addException', 'renameException'],
+}
+</script>

dist/mix-manifest.json

@@ -0,0 +1,71 @@
+<template>
+    <div class="interval">
+        <time-input
+            :time-prop="from"
+            :use-text-inputs="useTextInputs"
+            @updateTime="from = $event"
+        />
+        -
+        <time-input
+            :time-prop="to"
+            :use-text-inputs="useTextInputs"
+            @updateTime="to = $event"
+        />
+        <button class="btn btn-default btn-danger" @click.prevent="$emit('removeInterval')">-</button>
+    </div>
+</template>
+
+<script>
+import {useTextInputsProp} from "../src/props";
+import TimeInput from "./TimeInput";
+
+export default {
+    components: {TimeInput},
+
+    props:  {
+        intervalProp: String,
+        ...useTextInputsProp,
+    },
+
+    emits: ['updateInterval', 'removeInterval'],
+
+    data: function () {
+        return {
+            interval: this.intervalProp,
+        }
+    },
+
+    computed: {
+        from: {
+            get() {
+                return this.interval.split('-')[0]
+            },
+            set(value) {
+                this.interval = [value, this.to].join('-')
+            },
+        },
+
+        to: {
+            get() {
+                return this.interval.split('-')[1]
+            },
+            set(value) {
+                this.interval = [this.from, value].join('-')
+            },
+        },
+    },
+
+    watch: {
+        interval(value) {
+            // if (value.length !== 11 || value === this.interval) return
+            this.$emit('updateInterval', value)
+        },
+    },
+}
+</script>
+
+<style scoped>
+.interval {
+    margin: 10px 0;
+}
+</style>