Skip to content

Commit 88e2ccb

Browse files
sadekdsadekd
authored
Merge pull request #14 from sadekd/refactor-2021-06
Autoload app locale Update field
2 parents 344dbdf + cb63efb commit 88e2ccb

File tree

15 files changed

+172
-158
lines changed

15 files changed

+172
-158
lines changed

‎dist/css/field.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
.openingHours .interval{margin:10px 0}
1+
.openingHours.weekTable .interval{margin:10px 0}

‎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.

‎resources/js/components/DetailField.vue

Lines changed: 12 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,24 @@
11
<template>
22
<panel-item :field="field">
33
<template slot="value">
4-
<table class="table w-full">
5-
<tr v-for="(intervals, dayNameAsKey) in openingHours">
6-
<td>{{ __(dayNameAsKey) }}</td>
7-
<td v-if="intervals.length">{{ intervals.join(', ') }}</td>
8-
<td v-else>{{ __('closed')}}</td>
9-
</tr>
10-
</table>
4+
<week-table :openingHours="openingHours" :editable="false"/>
115
</template>
126
</panel-item>
137
</template>
148

159
<script>
16-
import {EMPTY_WEEK} from "../const";
10+
import WeekTable from "./WeekTable"
11+
import {getOpeningHoursData} from "../func";
1712
18-
export default {
13+
export default {
14+
components: {WeekTable},
1915
20-
props: ['resource', 'resourceName', 'resourceId', 'field'],
16+
props: ['resource', 'resourceName', 'resourceId', 'field'],
2117
22-
data: () => ({
23-
openingHours: {},
24-
// exceptions: {},
25-
}),
26-
27-
created() {
28-
this.field.value = this.field.value || {}
29-
30-
this.openingHours = {...EMPTY_WEEK, ..._.omit(this.field.value, 'exceptions')}
31-
// this.exceptions = this.field.value.exceptions || {}
32-
},
33-
}
18+
data: function () {
19+
return {
20+
...getOpeningHoursData(this.field.value)
21+
}
22+
},
23+
}
3424
</script>

‎resources/js/components/FormField.vue

Lines changed: 29 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,71 +1,39 @@
11
<template>
22
<default-field :field="field" :errors="errors">
33
<template slot="field">
4-
<table class="openingHours table w-full">
5-
<tr v-for="(intervals, dayNameAsKey) in openingHours">
6-
<td>{{ __(dayNameAsKey) }}</td>
7-
<td v-if="intervals.length">
8-
<div v-for="(interval, intervalIndex) in intervals" class="interval">
9-
<input class="form-control form-input form-input-bordered"
10-
v-model="openingHours[dayNameAsKey][intervalIndex]"
11-
pattern="^(2[0-3]|[01]?[0-9]):([0-5]?[0-9])-(2[0-3]|[01]?[0-9]):([0-5]?[0-9])$"
12-
required
13-
>
14-
<button class="btn btn-default btn-danger"
15-
@click.prevent="removeInterval(dayNameAsKey, intervalIndex)">-
16-
</button>
17-
</div>
18-
</td>
19-
<td v-else>{{ __('closed')}}</td>
20-
<td>
21-
<button class="btn btn-default btn-primary" @click.prevent="addInterval(dayNameAsKey)">+
22-
</button>
23-
</td>
24-
</tr>
25-
</table>
4+
<week-table :openingHours="openingHours" :editable="true"/>
265
</template>
276
</default-field>
287
</template>
298

309
<script>
31-
import {FormField, HandlesValidationErrors} from 'laravel-nova'
32-
import {EMPTY_WEEK} from "../const";
33-
34-
export default {
35-
36-
mixins: [FormField, HandlesValidationErrors],
37-
38-
props: ['resourceName', 'resourceId', 'field'],
39-
40-
data: () => ({
41-
openingHours: {},
42-
// exceptions: {},
43-
}),
44-
45-
created() {
46-
this.field.value = this.field.value || {}
47-
48-
this.openingHours = {...EMPTY_WEEK, ..._.omit(this.field.value, 'exceptions')}
49-
// this.exceptions = this.field.value.exceptions || {}
50-
},
51-
52-
methods: {
53-
fill(formData) {
54-
formData.set(
55-
this.field.attribute,
56-
JSON.stringify({
57-
...this.openingHours,
58-
// exceptions: this.exceptions,
59-
}))
60-
},
61-
62-
addInterval(dayName) {
63-
this.openingHours[dayName].push("08:00-16:00")
64-
},
65-
66-
removeInterval(dayName, index) {
67-
this.openingHours[dayName].splice(index, 1)
68-
},
10+
import {FormField, HandlesValidationErrors} from 'laravel-nova'
11+
import WeekTable from "./WeekTable"
12+
import {getOpeningHoursData} from "../func";
13+
14+
export default {
15+
components: {WeekTable},
16+
17+
mixins: [FormField, HandlesValidationErrors],
18+
19+
props: ['resourceName', 'resourceId', 'field'],
20+
21+
data: function () {
22+
return {
23+
...getOpeningHoursData(this.field.value)
24+
}
25+
},
26+
27+
methods: {
28+
fill(formData) {
29+
formData.set(
30+
this.field.attribute,
31+
JSON.stringify({
32+
...this.openingHours,
33+
// exceptions: this.exceptions,
34+
})
35+
)
6936
},
70-
}
37+
},
38+
}
7139
</script>

‎resources/js/components/IndexField.vue

Lines changed: 10 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,20 @@
11
<template>
22
<div :class="`text-${field.textAlign}`">
3-
<boolean-icon v-for="k in openingsForWeek" :key="k.name" :value="k.value" />
3+
<boolean-icon v-for="(intervals, dayName) in openingHours" :key="dayName" :value="intervals.length"/>
44
</div>
55
</template>
66

77
<script>
8-
import {EMPTY_WEEK} from "../const";
8+
import {getOpeningHoursData} from "../func";
99
10-
export default {
10+
export default {
1111
12-
props: ['resourceName', 'field'],
12+
props: ['resourceName', 'field'],
1313
14-
data: () => ({
15-
openingHours: {},
16-
}),
17-
18-
created() {
19-
this.field.value = this.field.value || {}
20-
21-
this.openingHours = {...EMPTY_WEEK, ..._.omit(this.field.value, 'exceptions')}
22-
},
23-
computed: {
24-
openingsForWeek() {
25-
return _.map(this.openingHours, (i, k) => {
26-
return {
27-
name: k,
28-
label: k,
29-
value: i.length > 0 || false,
30-
}
31-
})
32-
33-
// return {
34-
// value: _.map(this.openingHours, (i, k) => {
35-
// return {
36-
// [k]: i.length > 0 || false,
37-
// }
38-
// }),
39-
// options: _.map(this.openingHours, (i, k) => {
40-
// return {
41-
// name: k,
42-
// label: k,
43-
// }
44-
// })
45-
// };
46-
},
47-
},
48-
}
14+
data: function () {
15+
return {
16+
...getOpeningHoursData(this.field.value)
17+
}
18+
},
19+
}
4920
</script>

‎resources/js/components/WeekTable.vue

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<template>
2+
<table class="openingHours weekTable table w-full">
3+
<tr v-for="(intervals, dayName) in openingHours">
4+
<td>{{ translateDayName(dayName) }}</td>
5+
<td>
6+
<div v-if="openingHours[dayName].length">
7+
<div v-for="(interval, intervalIndex) in intervals" class="interval">
8+
<div v-if="editable">
9+
<input class="form-control form-input form-input-bordered"
10+
v-model="openingHours[dayName][intervalIndex]"
11+
pattern="^(2[0-3]|[01]?[0-9]):([0-5]?[0-9])-(2[0-3]|[01]?[0-9]):([0-5]?[0-9])$"
12+
required
13+
>
14+
<button class="btn btn-default btn-danger" @click.prevent="removeInterval(dayName, intervalIndex)">-</button>
15+
</div>
16+
<div v-else>{{ interval }}</div>
17+
</div>
18+
</div>
19+
<div v-else>{{ __('Closed') }}</div>
20+
</td>
21+
<td v-if="editable">
22+
<button class="btn btn-default btn-primary" @click.prevent="addInterval(dayName)">+</button>
23+
</td>
24+
</tr>
25+
</table>
26+
</template>
27+
28+
<script>
29+
import {capitalizeFirstLetter} from "../func";
30+
31+
export default {
32+
props: ['openingHours', 'editable'],
33+
34+
methods: {
35+
translateDayName(dayName) {
36+
return this.__(capitalizeFirstLetter(dayName))
37+
},
38+
39+
addInterval(dayName) {
40+
let openingHoursForDay = this.openingHours[dayName] || []
41+
openingHoursForDay.push("08:00-16:00")
42+
43+
this.openingHours[dayName] = openingHoursForDay
44+
},
45+
46+
removeInterval(dayName, index) {
47+
this.openingHours[dayName].splice(index, 1)
48+
},
49+
}
50+
}
51+
</script>

‎resources/js/const.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,13 @@
1+
export const WEEK_DAYS = [
2+
'monday',
3+
'tuesday',
4+
'wednesday',
5+
'thursday',
6+
'friday',
7+
'saturday',
8+
'sunday',
9+
]
10+
111
export const EMPTY_WEEK = {
212
monday: [],
313
tuesday: [],

‎resources/js/func.js

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import {EMPTY_WEEK, WEEK_DAYS} from "./const";
2+
3+
export function getOpeningHoursData(openingHoursData) {
4+
return {
5+
openingHours: {
6+
...EMPTY_WEEK,
7+
..._.pick(openingHoursData, WEEK_DAYS),
8+
},
9+
}
10+
}
11+
12+
export function capitalizeFirstLetter(string) {
13+
return string.charAt(0).toUpperCase() + string.substr(1).toLowerCase()
14+
}

‎resources/lang/cs.json

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"Monday": "Pondělí",
3+
"Tuesday": "Úterý",
4+
"Wednesday": "Středa",
5+
"Thursday": "Čtvrtek",
6+
"Friday": "Pátek",
7+
"Saturday": "Sobota",
8+
"Sunday": "Neděle",
9+
"Closed": "Zavřeno"
10+
}

‎resources/lang/de.json

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
{
2-
"monday": "Montag",
3-
"tuesday": "Dienstag",
4-
"wednesday": "Mittwoch",
5-
"thursday": "Donnerstag",
6-
"friday": "Freitag",
7-
"saturday": "Samstag",
8-
"sunday": "Sonntag",
9-
"closed": "Geschlossen"
2+
"Monday": "Montag",
3+
"Tuesday": "Dienstag",
4+
"Wednesday": "Mittwoch",
5+
"Thursday": "Donnerstag",
6+
"Friday": "Freitag",
7+
"Saturday": "Samstag",
8+
"Sunday": "Sonntag",
9+
"Closed": "Geschlossen"
1010
}

‎resources/lang/en.json

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
{
2-
"monday": "Monday",
3-
"tuesday": "Tuesday",
4-
"wednesday": "Wednesday",
5-
"thursday": "Thursday",
6-
"friday": "Friday",
7-
"saturday": "Saturday",
8-
"sunday": "Sunday",
9-
"closed": "Closed"
2+
"Monday": "Monday",
3+
"Tuesday": "Tuesday",
4+
"Wednesday": "Wednesday",
5+
"Thursday": "Thursday",
6+
"Friday": "Friday",
7+
"Saturday": "Saturday",
8+
"Sunday": "Sunday",
9+
"Closed": "Closed"
1010
}

‎resources/lang/ru.json

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
{
2-
"monday": "Понедельник",
3-
"tuesday": "Вторник",
4-
"wednesday": "Среда",
5-
"thursday": "Четверг",
6-
"friday": "Пятница",
7-
"saturday": "Суббота",
8-
"sunday": "Воскресенье",
9-
"closed": "Закрыто"
2+
"Monday": "Понедельник",
3+
"Tuesday": "Вторник",
4+
"Wednesday": "Среда",
5+
"Thursday": "Четверг",
6+
"Friday": "Пятница",
7+
"Saturday": "Суббота",
8+
"Sunday": "Воскресенье",
9+
"Closed": "Закрыто"
1010
}

‎resources/lang/sk.json

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
{
2-
"monday": "Pondelok",
3-
"tuesday": "Utorok",
4-
"wednesday": "Streda",
5-
"thursday": "Štvrtok",
6-
"friday": "Piatok",
7-
"saturday": "Sobota",
8-
"sunday": "Nedeľa",
9-
"closed": "Zatvorené"
2+
"Monday": "Pondelok",
3+
"Tuesday": "Utorok",
4+
"Wednesday": "Streda",
5+
"Thursday": "Štvrtok",
6+
"Friday": "Piatok",
7+
"Saturday": "Sobota",
8+
"Sunday": "Nedeľa",
9+
"Closed": "Zatvorené"
1010
}

‎resources/sass/field.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
// Nova Tool CSS
22

3-
.openingHours {
3+
.openingHours.weekTable {
44
.interval {
55
margin: 10px 0;
66
}

‎src/FieldServiceProvider.php

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ public function boot()
1313
Nova::serving(function (ServingNova $event) {
1414
Nova::script('nova-opening-hours-field', __DIR__ . '/../dist/js/field.js');
1515
Nova::style('nova-opening-hours-field', __DIR__ . '/../dist/css/field.css');
16-
Nova::translations(__DIR__ . '/../resources/lang/en.json');
16+
Nova::translations(__DIR__ . '/../resources/lang/' . app()->getLocale() . '.json');
1717
});
1818
}
1919

0 commit comments

Comments
 (0)