Update and release v1

sadekd · sadekd · commit ff504817a50f · 2020-04-12T17:12:23.000+02:00
- Fix bugs
- Add lang
- Update readme
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,8 @@
+root = true
+
+[*]
+charset = utf-8
+insert_final_newline = true
+indent_style = space
+indent_size = 4
+trim_trailing_whitespace = true
diff --git a/README.md b/README.md
@@ -2,7 +2,9 @@
 
 Laravel Nova custom field for [Spatie Opening Hours](https://github.com/spatie/opening-hours)
 
-![screenshot](screenshot.png)
+![Screenshot Index](screenshot-index.png)
+
+![Screenshot Form](screenshot-form.png)
 
 ## Installation
 
@@ -14,6 +16,13 @@ composer require sadekd/nova-opening-hours-field
 
 ## Usage
 
+Laravel Migration
+
+```php
+$table->json('opening_hours');
+```
+
+
 Laravel Model
 
 ```php
@@ -25,12 +34,7 @@ protected $casts = [
 Nova Resource
 
 ```php
-public function fields(Request $request)
-{
-    return [
-        ID::make(),
-        NovaOpeningHoursField::make('opening_hours'),
-        ...
+NovaOpeningHoursField::make('opening_hours'),
 ```
 
 ## TODO
diff --git a/composer.json b/composer.json
@@ -1,13 +1,14 @@
 {
     "name": "sadekd/nova-opening-hours-field",
-    "description": "A Laravel Nova field.",
+    "description": "Laravel Nova custom field for Spatie Opening Hours",
     "keywords": [
         "laravel",
-        "nova"
+        "nova",
+        "opening hours"
     ],
     "license": "MIT",
     "require": {
-        "php": ">=7.1.0"
+        "php": "^7.2"
     },
     "autoload": {
         "psr-4": {
@@ -17,13 +18,8 @@
     "extra": {
         "laravel": {
             "providers": [
-                "Sadekd\\NovaOpeningHoursField\\FieldServiceProvider"
+                "SadekD\\NovaOpeningHoursField\\FieldServiceProvider"
             ]
         }
-    },
-    "config": {
-        "sort-packages": true
-    },
-    "minimum-stability": "dev",
-    "prefer-stable": true
+    }
 }
diff --git a/dist/js/field.js b/dist/js/field.js
diff --git a/resources/js/components/DetailField.vue b/resources/js/components/DetailField.vue
@@ -2,28 +2,33 @@
     <panel-item :field="field">
         <template slot="value">
             <table class="table w-full">
-                <tr v-for="day in weekDays">
-                    <td>{{ day }}</td>
-                    <td>
-                        {{ openingHours[day].join(', ') }}
-                    </td>
+                <tr v-for="(intervals, dayNameAsKey) in openingHours">
+                    <td>{{ __(dayNameAsKey) }}</td>
+                    <td v-if="intervals.length">{{ intervals.join(', ') }}</td>
+                    <td v-else>{{ __('Closed')}}</td>
                 </tr>
             </table>
         </template>
     </panel-item>
 </template>
 
 <script>
-    import "../field"
-    import {WEEKDAYS} from "../const";
+    import {EMPTY_WEEK} from "../const";
 
     export default {
+
         props: ['resource', 'resourceName', 'resourceId', 'field'],
 
         data: () => ({
-            // openingHours: [],
-            // exceptions: [],
-            weekDays: WEEKDAYS
-        })
+            openingHours: {},
+            // exceptions: {},
+        }),
+
+        created() {
+            this.field.value = this.field.value || {}
+
+            this.openingHours = {...EMPTY_WEEK, ..._.omit(this.field.value, 'exceptions')}
+            // this.exceptions = this.field.value.exceptions || {}
+        },
     }
 </script>
diff --git a/resources/js/components/FormField.vue b/resources/js/components/FormField.vue
@@ -2,20 +2,23 @@
     <default-field :field="field" :errors="errors">
         <template slot="field">
             <table class="openingHours table w-full">
-                <tr v-for="(intervals, dayNameIndex) in openingHours">
-                    <td>{{ dayNameIndex }}</td>
-                    <td>
+                <tr v-for="(intervals, dayNameAsKey) in openingHours">
+                    <td>{{ __(dayNameAsKey) }}</td>
+                    <td v-if="intervals.length">
                         <div v-for="(interval, intervalIndex) in intervals" class="interval">
-                            <input class="form-control form-input form-input-bordered" v-model="openingHours[dayNameIndex][intervalIndex]">
-                            <!--<input class="form-control form-input form-input-bordered" type="time">-->
-                            <!-- - -->
-                            <!--<input class="form-control form-input form-input-bordered" type="time">-->
-                            <button class="btn btn-default btn-danger" @click.prevent="removeInterval(dayNameIndex, intervalIndex)">-
+                            <input class="form-control form-input form-input-bordered"
+                                   v-model="openingHours[dayNameAsKey][intervalIndex]"
+                                   pattern="^(2[0-3]|[01]?[0-9]):([0-5]?[0-9])-(2[0-3]|[01]?[0-9]):([0-5]?[0-9])$"
+                                   required
+                            >
+                            <button class="btn btn-default btn-danger"
+                                    @click.prevent="removeInterval(dayNameAsKey, intervalIndex)">-
                             </button>
                         </div>
                     </td>
+                    <td v-else>{{ __('Closed')}}</td>
                     <td>
-                        <button class="btn btn-default btn-primary" @click.prevent="addInterval(dayNameIndex)">+
+                        <button class="btn btn-default btn-primary" @click.prevent="addInterval(dayNameAsKey)">+
                         </button>
                     </td>
                 </tr>
@@ -26,67 +29,43 @@
 
 <script>
     import {FormField, HandlesValidationErrors} from 'laravel-nova'
-    import {WEEKDAYS} from "../const";
-    import * as _ from "lodash";
+    import {EMPTY_WEEK} from "../const";
 
     export default {
-        mixins: [FormField, HandlesValidationErrors],
 
-        data: () => ({
-            openingHours: [],
-            exceptions: [],
-            weekDays: WEEKDAYS
-        }),
+        mixins: [FormField, HandlesValidationErrors],
 
         props: ['resourceName', 'resourceId', 'field'],
 
-        methods: {
-            /*
-             * Set the initial, internal value for the field.
-             */
-            setInitialValue() {
-                this.value = this.field.value || []
-
-                // console.log(this.field.value.(word => word.length > 6));
+        data: () => ({
+            openingHours: {},
+            // exceptions: {},
+        }),
 
-                this.openingHours = _.omit(this.value, ['exceptions'])
-                this.exceptions = _.pick(this.value, ['exceptions'])
+        created() {
+            this.field.value = this.field.value || {}
 
-                // console.log(this)
-            },
+            this.openingHours = {...EMPTY_WEEK, ..._.omit(this.field.value, 'exceptions')}
+            // this.exceptions = this.field.value.exceptions || {}
+        },
 
-            /**
-             * Fill the given FormData object with the field's internal value.
-             */
+        methods: {
             fill(formData) {
-                // formData.append(this.field.attribute, this.value || [])
-                formData.append(
+                formData.set(
                     this.field.attribute,
                     JSON.stringify({
                         ...this.openingHours,
-                        exceptions: this.exceptions,
-                    }) || [])
-            },
-
-            /**
-             * Update the field's internal value.
-             */
-            handleChange(value) {
-                this.value = value
+                        // exceptions: this.exceptions,
+                    }))
             },
 
             addInterval(dayName) {
-                this.openingHours[dayName.toLowerCase()].push("08:00-16:00")
-                // this.handleChange(this.value)
+                this.openingHours[dayName].push("08:00-16:00")
             },
 
             removeInterval(dayName, index) {
-                this.openingHours[dayName.toLowerCase()].splice(index, 1)
+                this.openingHours[dayName].splice(index, 1)
             },
-
-            // changeInterval(dayName, index, value) {
-            //     this.openingHours[dayName.toLowerCase()][index] = value;
-            // }
         },
     }
 </script>
diff --git a/resources/js/components/IndexField.vue b/resources/js/components/IndexField.vue
@@ -1,9 +1,49 @@
 <template>
-    <index-boolean-field :field="field"/>
+    <div :class="`text-${field.textAlign}`">
+        <boolean-icon v-for="k in openingsForWeek" :key="k.name" :value="k.value" />
+    </div>
 </template>
 
 <script>
+    import {EMPTY_WEEK} from "../const";
+
     export default {
+
         props: ['resourceName', 'field'],
+
+        data: () => ({
+            openingHours: {},
+        }),
+
+        created() {
+            this.field.value = this.field.value || {}
+
+            this.openingHours = {...EMPTY_WEEK, ..._.omit(this.field.value, 'exceptions')}
+        },
+        computed: {
+            openingsForWeek() {
+                return _.map(this.openingHours, (i, k) => {
+                    return {
+                        name: k,
+                        label: k,
+                        value: i.length > 0 || false,
+                    }
+                })
+
+                // return {
+                //     value: _.map(this.openingHours, (i, k) => {
+                //         return {
+                //             [k]: i.length > 0 || false,
+                //         }
+                //     }),
+                //     options: _.map(this.openingHours, (i, k) => {
+                //         return {
+                //             name: k,
+                //             label: k,
+                //         }
+                //     })
+                // };
+            },
+        },
     }
 </script>
diff --git a/resources/js/const.js b/resources/js/const.js
@@ -1 +1,9 @@
-export const WEEKDAYS = ['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday']
+export const EMPTY_WEEK = {
+    monday: [],
+    tuesday: [],
+    wednesday: [],
+    thursday: [],
+    friday: [],
+    saturday: [],
+    sunday: [],
+}
diff --git a/resources/lang/en.json b/resources/lang/en.json
@@ -0,0 +1,10 @@
+{
+    "monday": "Monday",
+    "tuesday": "Tuesday",
+    "wednesday": "Wednesday",
+    "thursday": "Thursday",
+    "friday": "Friday",
+    "saturday": "Saturday",
+    "sunday": "Sunday",
+    "closed": "Closed"
+}
diff --git a/screenshot-form.png b/screenshot-form.png
diff --git a/screenshot-index.png b/screenshot-index.png
diff --git a/screenshot.png b/screenshot.png
diff --git a/src/FieldServiceProvider.php b/src/FieldServiceProvider.php
@@ -1,6 +1,6 @@
 <?php
 
-namespace Sadekd\NovaOpeningHoursField;
+namespace SadekD\NovaOpeningHoursField;
 
 use Laravel\Nova\Nova;
 use Laravel\Nova\Events\ServingNova;
@@ -13,6 +13,7 @@ public function boot()
         Nova::serving(function (ServingNova $event) {
             Nova::script('nova-opening-hours-field', __DIR__ . '/../dist/js/field.js');
             Nova::style('nova-opening-hours-field', __DIR__ . '/../dist/css/field.css');
+            Nova::translations(__DIR__ . '/../resources/lang/en.json');
         });
     }
 
diff --git a/src/NovaOpeningHoursField.php b/src/NovaOpeningHoursField.php
@@ -1,6 +1,6 @@
 <?php
 
-namespace Sadekd\NovaOpeningHoursField;
+namespace SadekD\NovaOpeningHoursField;
 
 use Laravel\Nova\Fields\Field;
 use Laravel\Nova\Http\Requests\NovaRequest;
