Skip to content
This repository has been archived by the owner on Oct 17, 2022. It is now read-only.

Commit

Permalink
Merge pull request #66 from tanerkay/nova-4
Browse files Browse the repository at this point in the history
  • Loading branch information
mikebronner authored Jun 16, 2022
2 parents 8766907 + 3e8485b commit 0f979aa
Show file tree
Hide file tree
Showing 10 changed files with 19,067 additions and 69 deletions.
4 changes: 2 additions & 2 deletions composer.json
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,8 @@
}
],
"require": {
"illuminate/support": "^9.0",
"laravel/nova": "^3.31",
"illuminate/support": "^8.0|^9.0",
"laravel/nova": "^4.0",
"symfony/thanks": "^1.1"
},
"autoload": {
Expand Down
18,909 changes: 18,908 additions & 1 deletion dist/js/field.js

Large diffs are not rendered by default.

40 changes: 40 additions & 0 deletions nova.mix.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
const mix = require('laravel-mix')
const webpack = require('webpack')
const path = require('path')

class NovaExtension {
name() {
return 'nova-extension'
}

register(name) {
this.name = name
}

webpackPlugins() {
return new webpack.ProvidePlugin({
_: 'lodash',
Errors: 'form-backend-validation',
})
}

webpackConfig(webpackConfig) {
webpackConfig.externals = {
vue: 'Vue',
}

webpackConfig.resolve.alias = {
...(webpackConfig.resolve.alias || {}),
'laravel-nova': path.join(
__dirname,
'../../vendor/laravel/nova/resources/js/mixins/packages.js'
),
}

webpackConfig.output = {
uniqueName: this.name,
}
}
}

mix.extend('nova', new NovaExtension())
35 changes: 18 additions & 17 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,27 +2,28 @@
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"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",
"watch-poll": "npm run watch -- --watch-poll",
"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",
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
"production": "mix --production",
"nova:install": "npm --prefix='../../vendor/laravel/nova' ci"
},
"devDependencies": {
"cross-env": "^5.2.1",
"laravel-mix": "^4.1.4",
"laravel-nova": "^1.0",
"leaflet": "^1.5.1",
"resolve-url-loader": "2.3.1",
"sass": "^1.23.0",
"sass-loader": "^7.3.1",
"vue": "^2.5.0",
"vue-template-compiler": "^2.6.10",
"vue2-leaflet": "^2.2.1"
"@vue-leaflet/vue-leaflet": "^0.6.1",
"cross-env": "^7.0.3",
"laravel-mix": "^6.0.43",
"laravel-nova": "^1.12.3",
"leaflet": "^1.8.0",
"leaflet-geosearch": "^3.6.0",
"resolve-url-loader": "5.0.0",
"sass": "^1.52.1",
"sass-loader": "^13.0.0",
"vue": "^3.2.36",
"vue-loader": "^17.0.0",
"vue-template-compiler": "^2.6.14"
},
"dependencies": {
"leaflet-geosearch": "^2.7.0",
"vue2-leaflet-geosearch": "^1.0.6"
}
}
71 changes: 37 additions & 34 deletions resources/js/components/DetailField.vue
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<script>
import {FormField, HandlesValidationErrors} from 'laravel-nova';
import L from "leaflet";
import {LCircle, LMap, LMarker, LTileLayer} from 'vue2-leaflet';
import {LCircle, LMap, LMarker, LTileLayer} from '@vue-leaflet/vue-leaflet';
export default {
components: {
Expand All @@ -13,16 +13,16 @@
mixins: [FormField, HandlesValidationErrors],
props: ['resourceName', 'resourceId', 'field'],
props: ['index', 'resource', 'resourceName', 'resourceId', 'field'],
data: function () {
return {
iconRetina: this.field.iconRetinaUrl
|| '/vendor/leaflet/dist/images/marker-icon-2x.png',
|| 'images/vendor/leaflet/dist/marker-icon-2x.png',
icon: this.field.iconUrl
|| '/vendor/leaflet/dist/images/marker-icon.png',
|| 'images/vendor/leaflet/dist/marker-icon.png',
shadow: this.field.shadowUrl
|| '/vendor/leaflet/dist/images/marker-shadow.png',
|| 'images/vendor/leaflet/dist/marker-shadow.png',
tileUrl: 'https://{s}.tile.osm.org/{z}/{x}/{y}.png',
mapOptions: {
boxZoom: false,
Expand Down Expand Up @@ -146,40 +146,43 @@
</script>

<template>
<panel-item :field="field">
<div slot="value">
<panel-item :field="field" :label="field.name">
<template #value>
<span
v-if="locationIsNotSet"
>
&#8212;
</span>
<l-map
v-if="locationIsSet"
class="z-10 map-field w-full form-control form-input-bordered overflow-hidden relative"
ref="map"
:center="mapCenter"
:options="mapOptions"
:zoom="defaultZoom"
@move="mapMoved"
>
<l-tile-layer
:url="tileUrl"
></l-tile-layer>
<l-marker
:options="markerOptions"
:lat-lng="mapCenter"
></l-marker>
<l-circle
v-if="circleHasRadius"
:lat-lng="mapCenter"
:radius="circleRadius"
:color="circleColor"
:fillColor="circleColor"
:weight="circleStroke"
:fillOpacity="circleOpacity"
/>
</l-map>
</div>
<div class="map-field">
<l-map
v-if="locationIsSet"
class="z-10 w-full form-control form-input-bordered overflow-hidden relative"
ref="map"
:center="mapCenter"
:options="mapOptions"
:zoom="defaultZoom"
@move="mapMoved"
useGlobalLeaflet="true"
>
<l-tile-layer
:url="tileUrl"
></l-tile-layer>
<l-marker
:options="markerOptions"
:lat-lng="mapCenter"
></l-marker>
<l-circle
v-if="circleHasRadius"
:lat-lng="mapCenter"
:radius="circleRadius"
:color="circleColor"
:fillColor="circleColor"
:weight="circleStroke"
:fillOpacity="circleOpacity"
/>
</l-map>
</div>
</template>
</panel-item>
</template>

Expand Down
11 changes: 5 additions & 6 deletions resources/js/components/FormField.vue
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<script>
import { FormField, HandlesValidationErrors } from 'laravel-nova';
import L from "leaflet";
import { LCircle, LMap, LTileLayer, LMarker, LIcon } from 'vue2-leaflet';
import { BingProvider, EsriProvider, GoogleProvider, LocationIQProvider, OpenCageProvider, OpenStreetMapProvider } from 'leaflet-geosearch';
import VGeosearch from 'vue2-leaflet-geosearch';
import { LCircle, LMap, LTileLayer, LMarker } from '@vue-leaflet/vue-leaflet';
import { BingProvider, EsriProvider, GoogleProvider, OpenStreetMapProvider } from 'leaflet-geosearch';
import VGeosearch from './LeafletGeosearch';
export default {
components: {
Expand Down Expand Up @@ -190,21 +190,20 @@
},
mapNewCenter: function (event) {
var center = [event.lat, event.long];
const center = [event.lat, event.long];
this.setValue(event.lat, event.long);
this.map.panTo(center, {animate:true});
},
},
};
</script>

<template>
<default-field
:errors="errors"
:field="field"
:full-width-content="true"
>
<template slot="field">
<template #field>
<div class="map-field z-10 p-0 w-full form-control form-input-bordered overflow-hidden relative"
:class="mapErrorClasses"
>
Expand Down
2 changes: 1 addition & 1 deletion resources/js/components/IndexField.vue
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ export default {
data: function () {
return {
value: JSON.parse(this.field.value || {}),
value: JSON.parse(this.field.value || '{}'),
};
},
Expand Down
42 changes: 42 additions & 0 deletions resources/js/components/LeafletGeosearch.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
<template>
<div>

</div>
</template>

<script>
// Credit: fega https://www.npmjs.com/package/vue2-leaflet-geosearch
import { GeoSearchControl } from 'leaflet-geosearch';
export default {
props: {
options: {
required: true,
},
},
name: 'v-geosearch',
mounted() {
this.add();
},
beforeDestroy() {
this.remove();
},
methods: {
deferredMountedTo(parent) {
const searchControl = new GeoSearchControl(this.options);
parent.addControl(searchControl);
searchControl.getContainer().onclick = e => { e.stopPropagation(); };
},
remove() {
if (this.markerCluster) {
this.$parent.removeLayer(this.markerCluster);
}
},
add() {
if (this.$parent._isMounted) {
this.deferredMountedTo(this.$parent.mapObject);
}
},
},
};
</script>
12 changes: 8 additions & 4 deletions resources/js/field.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
Nova.booting((Vue, router, store) => {
Vue.component('index-nova-map-marker-field', require('./components/IndexField').default);
Vue.component('detail-nova-map-marker-field', require('./components/DetailField').default);
Vue.component('form-nova-map-marker-field', require('./components/FormField').default);
import IndexField from './components/IndexField'
import DetailField from './components/DetailField'
import FormField from './components/FormField'

Nova.booting((Vue) => {
Vue.component('index-nova-map-marker-field', IndexField);
Vue.component('detail-nova-map-marker-field', DetailField);
Vue.component('form-nova-map-marker-field', FormField);
});
10 changes: 6 additions & 4 deletions webpack.mix.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
let mix = require('laravel-mix')

require('./nova.mix')

mix
.setPublicPath('dist')
.js('resources/js/field.js', 'js')
.copy("./node_modules/leaflet/dist/images", "dist/vendor/leaflet/dist/images")
;
.setPublicPath('dist')
.js('resources/js/field.js', 'js')
.vue({ version: 3 })
.nova('genealabs/nova-map-marker-field')

0 comments on commit 0f979aa

Please sign in to comment.