I am getting this error because I'm trying to install https://github.com/livewire/sortable to my existing project that is using https://filamentphp.com/ (but just the Forms only)
In my app.js
import 'livewire-sortable'
Then I ran it to my browser.
But in my console, it says Uncaught Livewire: Directive already registered: [sortable].
That's when I investigated it, Then I found sortable.js https://github.com/filamentphp/filament/blob/2.x/packages/forms/resources/js/sortable.js on the filament/forms
import Sortable from 'sortablejs'
window.Sortable = Sortable
window.Livewire.directive('sortable', (el) => {
el.sortable = Sortable.create(el, {
draggable: '[wire\\:sortable\\.item]',
handle: '[wire\\:sortable\\.handle]',
dataIdAttr: 'wire:sortable.item',
})
})
export default (Alpine) => {
Alpine.directive('sortable', (el) => {
el.sortable = Sortable.create(el, {
draggable: '[x-sortable-item]',
handle: '[x-sortable-handle]',
dataIdAttr: 'x-sortable-item',
})
})
}
Now, is there a way I can change the directive into livewireSortable so that It will not affect the Filament Forms?
Related
I'm trying to get all user permissions with Laravel for backend and vuejs for frontend.
How can i get this from api to vue? what is the best choice?
I tried to get them with below code but shows me error
In the permissionMixin:
import PermissionDataService from '../../Servieces/PermissionDataService'
export default {
methods: {
checkPermission() {
let permissions;
PermissionDataService.get("user_permissions")
.then((response) => {
permissions= response.data;
})
.catch((error) => {
console.debug(error)
});
return hasAccess;
}
}
}
and that is how i used it in main.js:
import permission from "#/core/mixins/permissionMixin";
Vue.mixin(permission);
window.Laravel = this.checkPermission();
console.debug(Laravel)
Vue.directive('can', function (el, binding) {
return Laravel.permissions.indexOf(binding) !== -1;
});
but always shows me this error:
Uncaught TypeError: can't access property "defaults", a.default.axios is undefined
I am totally sure the endpoint is ok
ANY Idea?
Finally solved.
I had to put
window.Laravel = this.checkPermission();
into one of layout files
I'm trying to use page objects in Nightwatch js and am creating my own commands in that. For some reason now Nightwatch doesn't seem to recognise standard commands on browser and give me a type error on different commands. What am I doing wrong with my code?
I'm tried different things here already, for example adding 'this' or 'browser' in front of the command, which didn't help. My code has gone through many versions already I am not even sure anymore what all I've tried after Googling the error.
My pageObject:
const homePageCommands = {
deleteAllListItems: function (browser) {
browser
.elements('css selector', '#mytodos img', function (res) {
res.value.forEach(elementObject => {
browser.elementIdClick(elementObject.ELEMENT);
});
})
.api.pause(1000)
return this;
}
};
module.exports = {
url: "http://www.todolistme.net"
},
elements: {
myTodoList: {
selector: '#mytodos'
},
deleteItemButton: {
selector: 'img'
}
},
commands: [homePageCommands]
};
My test:
require('../nightwatch.conf.js');
module.exports = {
'Validate all todo list items can be removed' : function(browser) {
const homePage = browser.page.homePage();
homePage.navigate()
.deleteAllListItems(homePage)
// I have not continued the test yet because of the error
// Should assert that there are no list items left
}
};
Expected behaviour of the custom command is to iterate over the element and click on it.
Actual result:
TypeError: browser.elements is not a function
at Page.deleteAllListItems (/pageObjects/homePage.js:18:14)
at Object.Validate all todo list items can be removed (/specs/addToList.js:8:14)
at processTicksAndRejections (internal/process/next_tick.js:81:5)
And also:
Error while running .navigateTo() protocol action: invalid session id
Looks like you need to pass browser to the deleteAllListItems function instead of homePage on this line:
homePage.navigate()
.deleteAllListItems(homePage)
I am trying to use the Simplert Vue plugin within my Laravel 5.7 app but I'm getting the following error:
[Vue warn]: Unknown custom element: - did you register the
component correctly? For recursive components, make sure to provide
the "name" option.
I have based my code on answer from this question Vue.js 2- sweet alert package simplert not working
app.js file:
require('./bootstrap');
window.Vue = require('vue');
import Simplert from 'vue2-simplert-plugin'
require('vue2-simplert-plugin/dist/vue2-simplert-plugin.css')
Vue.use(Simplert)
const app = new Vue({
el: '#app',
data: {
obj: {
title: 'Alert Title',
message: 'Alert Message',
type: 'info',
useConfirmBtn: true,
customConfirmBtnText: 'OK'
}
},
methods: {
openSimplert () {
this.$Simplert.open(this.obj)
},
closeSimplert () {
this.$Simplert.close()
}
}
})
home.blade.php template:
#section('content')
// ..
<simplert></simplert>
// ..
package.json:
"dependencies": {
"vue2-simplert-plugin": "^0.5.3"
}
In VSCode, there is a hint on the following line import Simplert from 'vue2-simplert-plugin' in my app.js file:
Could not find a declaration file for module 'vue2-simplert-plugin'.
'x/node_modules/vue2-simplert-plugin/dist/vue2-simplert-plugin.js'
implicitly has an 'any' type.
Could this be the problem?
When registering a Vue component, you need to include a name, list below:
export default {
name: 'example-name',
data() {
return {
}
},
so in your case:
const app = new Vue({
el: '#app',
name: 'example-name'
data: {
obj: {
title: 'Alert Title',
message: 'Alert Message',
type: 'info',
useConfirmBtn: true,
customConfirmBtnText: 'OK'
}
},
methods: {
openSimplert () {
this.$Simplert.open(this.obj)
},
closeSimplert () {
this.$Simplert.close()
}
}
})
ALTERNATIVELY
you should create a file in your resources->js->components folder called something like ExampleComponent.vue. Within here you place all of your template code (what the '#app' div should display).
with that file you should include:
<template>
//code here...
</tempate>
<script>
export default {
name: 'example-component-name',
data() {
return {
obj: {
title: 'Alert Title',
message: 'Alert Message',
type: 'info',
useConfirmBtn: true,
customConfirmBtnText: 'OK'
}
}
},
methods: {
//methods here
}
}
</script>
and then within your app.js file all you need to do is:
require('./bootstrap');
import Simplert from 'vue2-simplert-plugin'
require('vue2-simplert-plugin/dist/vue2-simplert-plugin.css')
Vue.use(Simplert)
Vue.component('example-component-name',require('./components/ExampleComponent.vue').default);
This should help in your situation - let me know :)
I don't know why but i faced the same issu and once the plugin is registered in App.vue, some components works fine with:
<Simplert></Simplert>
and some with
<simplert></simplert>
The only diff is the Uppercase / Lowercase but some components accepts the Uppercase when other not and i must use Lowercase.
Currently using photoeditorsdk#4.3.1
With pure JS example, export image works just fine.
window.onload = () => {
const container = document.getElementById('app')
const editor = new PhotoEditorSDK.UI.ReactUI({
container,
license: JSON.stringify(PESDK_LICENSE),
assets: {
baseUrl:'/assets'
},
})
window.editor = editor
}
When try to wrap photoeditorsdk into a React Component as following
class Editor extends Component {
constructor (props) {
super(props)
}
componentDidMount () {
const container = this.refs.pesdk
const editor = new PhotoEditorSDK.UI.ReactUI({
container,
license: JSON.stringify(PESDK_LICENSE),
assets: {
baseUrl: '/assets'
},
title: 'Photo Editor'
})
window.editor = editor
}
render () {
return (
<div ref='pesdk'></div>
)
}
}
export default Editor
and export image using
editor.export(false).then(image => document.body.append(image))
from window.editor will encounter the errror
react-dom.development.js:5622 Uncaught TypeError: Cannot read property 'export' of null
at t.export (react-dom.development.js:5622)
at <anonymous>:1:14
I'm not able to reproduce this here. Can you give more details? E.g., where and when are you calling editor.export from. Also, are you passing an image to the editor as an option?
We need to hookup a Modal with a generic message on our failed Ajax calls in AngularJS.
i was able to intercept the error on the app.config part, but from there i am unable to import the $modal or the $scope to show the modal. What i got working so far is creating a function on my global scope and add the opening of the modal in my app.run:
var showGeneralException = function () { };
var app= angular.module('myApp', ['ui.bootstrap'])
.run(function ($rootScope, $modal) {
showGeneralException = function () {
var exceptionModel = $modal.open({
templateUrl: 'generalException',
controller: 'exceptionModals',
});
};
});
app.config(function ($httpProvider) {
$httpProvider.interceptors.push(function ($q) {
return {
'responseError': function (rejection) {
showGeneralException();
}
};
});
});
When i perform it this way a modal opens but i get a not found exception in my modal and following errors in my debug console:
TypeError: Unable to get value of the property 'data': object is null or undefined
LOG: WARNING: Tried to load angular more than once.
LOG: WARNING: Tried to load angular more than once.
LOG: WARNING: Tried to load angular more than once.