Skip to content

Commit 8b5cd77

Browse files
sadekdsadekd
authored
Merge pull request #23 from fidum/nova-4
Adds Nova 4.x Support
2 parents 512885a + 14a2d6d commit 8b5cd77

19 files changed

+201
-104
lines changed

‎composer.json

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
"license": "MIT",
1010
"require": {
1111
"php": "^7.2|^8.0",
12+
"laravel/nova": "^4.0",
1213
"spatie/opening-hours": "^2.0"
1314
},
1415
"autoload": {
@@ -22,5 +23,11 @@
2223
"SadekD\\NovaOpeningHoursField\\FieldServiceProvider"
2324
]
2425
}
25-
}
26+
},
27+
"repositories": [
28+
{
29+
"type": "composer",
30+
"url": "https://nova.laravel.com"
31+
}
32+
]
2633
}

‎dist/css/field.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
.weekTable .closed{padding-bottom:1.125rem;padding-top:1.125rem}.dark .openingHours input::-webkit-calendar-picker-indicator{filter:invert(.75)}

‎dist/js/field.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/mix-manifest.json

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
{
2-
"/js/field.js": "/js/field.js"
3-
}
2+
"/js/field.js": "/js/field.js",
3+
"/css/field.css": "/css/field.css"
4+
}

‎package.json

Lines changed: 18 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,27 @@
11
{
22
"private": true,
33
"scripts": {
4-
"dev": "npm run development",
5-
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
6-
"watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
7-
"watch-poll": "npm run watch -- --watch-poll",
8-
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
9-
"prod": "npm run production",
10-
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
4+
"dev": "mix",
5+
"watch": "mix watch",
6+
"watch-poll": "mix watch -- --watch-options-poll=1000",
7+
"hot": "mix watch --hot",
8+
"prod": "mix --production"
119
},
1210
"devDependencies": {
13-
"cross-env": "^5.0.0",
14-
"laravel-mix": "^1.0",
15-
"laravel-nova": "^1.0"
11+
"@inertiajs/inertia": "^0.11.0",
12+
"@vue/babel-plugin-jsx": "^1.1.1",
13+
"form-backend-validation": "^2.4.0",
14+
"laravel-mix": "^6.0.43",
15+
"lodash": "^4.17.21",
16+
"postcss": "^8.4.12",
17+
"resolve-url-loader": "^4.0.0",
18+
"sass": "^1.49.11",
19+
"sass-loader": "^12.6.0",
20+
"vue-loader": "^17.0.0",
21+
"vue-template-compiler": "^2.6.14",
22+
"vuex": "^4.0.2"
1623
},
1724
"dependencies": {
18-
"vue": "^2.5.0"
25+
"vue": "^3.2.31"
1926
}
2027
}

‎resources/js/components/ExceptionsTable.vue

Lines changed: 47 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,62 @@
11
<template>
2-
<table class="openingHours exceptionsTable table mt-6 w-full">
3-
<tr>
4-
<th class="text-left font-bold" colspan="2">{{ __('Exceptions') }}</th>
5-
<th v-if="editable">
6-
<button class="btn btn-default btn-primary" @click.prevent="$emit('addException')">+</button>
7-
</th>
8-
</tr>
9-
<tr v-for="exception in exceptions">
10-
<td>
11-
<div v-if="editable">
12-
<date-input
13-
:date-prop="exception.date"
14-
:use-text-inputs="useTextInputs"
15-
@updateDate="$emit('renameException', exception.date, $event)"
16-
/>
17-
</div>
18-
<div v-else>{{ exception.date }}</div>
19-
</td>
20-
<td>
21-
<div v-if="Object.values(exception.intervals).length">
22-
<div v-for="(interval, index) in exception.intervals">
23-
<div v-if="editable">
24-
<interval-input
25-
:interval-prop="interval"
26-
:use-text-inputs="useTextInputs"
27-
@updateInterval="$emit('updateInterval', 'exceptions', exception.date, index, $event)"
28-
@removeInterval="$emit('removeInterval', 'exceptions', exception.date, index)"
29-
/>
2+
<table class="openingHours exceptionsTable table-default mt-6 w-full">
3+
<thead class="bg-gray-50 dark:bg-gray-800">
4+
<tr>
5+
<table-header colspan="2">
6+
{{ __('Exceptions') }}
7+
</table-header>
8+
<table-header v-if="editable" class="text-right">
9+
<default-button @click.prevent="$emit('addException')"><span class="px-1">+</span></default-button>
10+
</table-header>
11+
</tr>
12+
</thead>
13+
<tbody>
14+
<tr v-for="exception in exceptions" class="group">
15+
<table-column>
16+
<div v-if="editable">
17+
<date-input
18+
:date-prop="exception.date"
19+
:use-text-inputs="useTextInputs"
20+
@updateDate="$emit('renameException', exception.date, $event)"
21+
/>
22+
</div>
23+
<div v-else>{{ exception.date }}</div>
24+
</table-column>
25+
<table-column>
26+
<div v-if="Object.values(exception.intervals).length">
27+
<div v-for="(interval, index) in exception.intervals">
28+
<div v-if="editable">
29+
<interval-input
30+
:interval-prop="interval"
31+
:use-text-inputs="useTextInputs"
32+
@updateInterval="$emit('updateInterval', 'exceptions', exception.date, index, $event)"
33+
@removeInterval="$emit('removeInterval', 'exceptions', exception.date, index)"
34+
/>
35+
</div>
36+
<div v-else>{{ interval }}</div>
3037
</div>
31-
<div v-else>{{ interval }}</div>
3238
</div>
33-
</div>
34-
<div v-else>{{ __('Closed') }}</div>
35-
</td>
36-
<td v-if="editable">
37-
<button class="btn btn-default btn-primary" @click.prevent="$emit('addInterval', 'exceptions', exception.date)">+</button>
38-
<button class="btn btn-default btn-danger" @click.prevent="$emit('removeException', exception.date)">-</button>
39-
</td>
40-
</tr>
39+
<div v-else>{{ __('Closed') }}</div>
40+
</table-column>
41+
<table-column v-if="editable" class="text-right">
42+
<default-button @click.prevent="$emit('addInterval', 'exceptions', exception.date)"><span class="px-1">+</span></default-button>
43+
&nbsp;
44+
<danger-button @click.prevent="$emit('removeException', exception.date)"><span class="px-1">-</span></danger-button>
45+
</table-column>
46+
</tr>
47+
</tbody>
4148
</table>
4249
</template>
4350

4451
<script>
4552
import IntervalInput from "./IntervalInput";
4653
import DateInput from "./DateInput";
54+
import TableColumn from "./TableColumn";
55+
import TableHeader from "./TableHeader";
4756
import {editableProp, exceptionsProp, useTextInputsProp} from "../src/props";
4857
4958
export default {
50-
components: { IntervalInput, DateInput },
59+
components: { IntervalInput, DateInput, TableColumn, TableHeader },
5160
5261
props: {
5362
...exceptionsProp,

‎resources/js/components/IntervalInput.vue

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,9 @@
1111
:use-text-inputs="useTextInputs"
1212
@updateTime="to = $event"
1313
/>
14-
<button class="btn btn-default btn-danger" @click.prevent="$emit('removeInterval')">-</button>
14+
<span class="ml-2">
15+
<danger-button @click.prevent="$emit('removeInterval')"><span class="px-1">-</span></danger-button>
16+
</span>
1517
</div>
1618
</template>
1719

‎resources/js/components/Nova/DetailField.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<panel-item :field="field">
3-
<template slot="value">
3+
<template #value>
44
<week-table :week="normalizedWeek"/>
55
<exceptions-table v-if="showExceptionsTable" :exceptions="normalizedExceptions"/>
66
</template>

‎resources/js/components/Nova/FormField.vue

Lines changed: 19 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,22 @@
11
<template>
2-
<default-field :field="field" :errors="errors">
3-
<template slot="field">
2+
<default-field :field="currentField" :errors="errors">
3+
<template #field>
44
<!-- <week-table :week="normalizedWeek"/>-->
55
<week-table
66
:week="normalizedWeek"
77
:editable="true"
8-
:use-text-inputs="field.useTextInputs"
8+
:use-text-inputs="currentField.useTextInputs"
99
@updateInterval="updateInterval"
1010
@addInterval="addInterval"
1111
@removeInterval="removeInterval"
1212
@removeAllIntervals="removeAllIntervals"
1313
/>
1414
<!-- <exceptions-table :exceptions="normalizedExceptions"/>-->
1515
<exceptions-table
16-
v-if="field.allowExceptions"
16+
v-if="currentField.allowExceptions"
1717
:exceptions="normalizedExceptions"
1818
:editable="true"
19-
:use-text-inputs="field.useTextInputs"
19+
:use-text-inputs="currentField.useTextInputs"
2020
@updateInterval="updateInterval"
2121
@addInterval="addInterval"
2222
@removeInterval="removeInterval"
@@ -29,17 +29,16 @@
2929
</template>
3030

3131
<script>
32-
import {FormField, HandlesValidationErrors} from 'laravel-nova'
32+
import DependentFormField from 'laravel-nova-dependent-form-field';
33+
import HandlesValidationErrors from 'laravel-nova-handles-validation-errors';
3334
import WeekTable from "./../WeekTable";
3435
import ExceptionsTable from "./../ExceptionsTable";
3536
import {ExceptionsMixin, WeekMixin} from "../../src/mixins";
3637
import {getRandomDate, getRandomTimeInterval} from "../../src/func";
3738
export default {
3839
components: {WeekTable, ExceptionsTable},
3940
40-
mixins: [FormField, HandlesValidationErrors, WeekMixin, ExceptionsMixin],
41-
42-
props: ['resourceName', 'resourceId', 'field'],
41+
mixins: [DependentFormField, HandlesValidationErrors, WeekMixin, ExceptionsMixin],
4342
4443
methods: {
4544
fill(formData) {
@@ -53,7 +52,7 @@ export default {
5352
},
5453
5554
updateInterval(weekOrExceptions, dayOrDate, index, value) {
56-
this.$set(this[weekOrExceptions][dayOrDate], index, value)
55+
this[weekOrExceptions][dayOrDate][index] = value;
5756
},
5857
5958
removeInterval(weekOrExceptions, dayOrDate, index) {
@@ -62,27 +61,33 @@ export default {
6261
},
6362
6463
addInterval(weekOrExceptions, dayOrDate) {
65-
this[weekOrExceptions][dayOrDate].push(getRandomTimeInterval())
64+
this[weekOrExceptions] = {
65+
...this[weekOrExceptions],
66+
[dayOrDate]: [
67+
...this[weekOrExceptions][dayOrDate] || [],
68+
getRandomTimeInterval()
69+
],
70+
};
6671
},
6772
6873
removeAllIntervals(weekOrExceptions, dayOrDate) {
6974
this[weekOrExceptions][dayOrDate] = []
7075
},
7176
7277
addException() {
73-
this.$set(this.exceptions, getRandomDate(), [getRandomTimeInterval()])
78+
this.exceptions[getRandomDate()] = [getRandomTimeInterval()];
7479
},
7580
7681
removeException(date) {
77-
this.$delete(this.exceptions, date)
82+
delete this.exceptions[date];
7883
},
7984
8085
renameException(oldDate, newDate) {
8186
let exception = this.exceptions[oldDate]
8287
8388
// this.$delete(this.exceptions, oldDate)
8489
delete this.exceptions[oldDate]
85-
this.$set(this.exceptions, newDate, exception)
90+
this.exceptions[newDate] = exception;
8691
},
8792
},
8893

‎resources/js/components/Nova/IndexField.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<div :class="`text-${field.textAlign}`">
3-
<boolean-icon v-for="day in normalizedWeek" :key="day.day" :value="Object.values(day.intervals).length"/>
3+
<icon-boolean v-for="day in normalizedWeek" :key="day.day" :value="Object.values(day.intervals).length"/>
44
</div>
55
</template>
66

‎resources/js/components/TableColumn.vue

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<template>
2+
<td class="px-2 py-2 border-t border-gray-100 dark:border-gray-700 dark:bg-gray-800 group-hover:bg-gray-50 dark:group-hover:bg-gray-900">
3+
<slot />
4+
</td>
5+
</template>
6+
7+
<script>
8+
export default {
9+
name: "TableColumn"
10+
}
11+
</script>

‎resources/js/components/TableHeader.vue

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<template>
2+
<th class="text-left px-2 uppercase text-gray-500 text-xxs tracking-wide py-2">
3+
<slot />
4+
</th>
5+
</template>
6+
7+
<script>
8+
export default {
9+
name: "TableHeader"
10+
}
11+
</script>

0 commit comments

Comments
 (0)