How to use a Dialog throught a app, passing content to it - javascript

I am building my first Vue.js app and I want to open a Dialog (using Element.io) components. I want to call a Dialog and pass the content to it.
So my dialog would be "global" and I would pass content to it from different components.
How do I include this dialog? how do I pass arguments to it and so on?
Should I use something like:
import Dialog from '../GlobalComponents/Dialog.vue';
Vue.prototype.$dialog = Dialog;
or include it in each component, and how would that be?
I have no problem making a event handler for the toggle of the Dialog, just don't know how to call the dialog to open it (or change its dialogVisible state).

You can simply add the Dialog as vue component to make it available globally.
Vue.component('my-dialog', Dialog);
Then in your "main" file / index.html or whatever you use to start your Vue app you define your dialog
<my-dialog></my-dialog>
If you want it to display errors for example you can use emits and listenters
Vue.prototype.$bus = new Vue(); // event buts
in the created method of your my-dialog
created: function() {
this.$bus.$on('error', function(msg) {
// access message here
// make dialog visible
});
}
And wherever an error occurs
this.$bus.$emit('error', 'this is my error');
If your dialog is more complex you can ofcourse also pass objects instead of strings in the emit

Related

Navigating back causes change detection to break in Angular elements

I am using Angular elements to use my components inside of custom ThingsBoard widgets. The elements are created inside ngDoBootstrap() like this:
const newCustomElement = createCustomElement(CustomElementComponent, {
injector: this.injector,
});
customElements.define("new-custom-element", newCustomElement);
In a ThingsBoard widget I can then import the compiled JavaScript code of my elements via the "Ressources" tab and instantiate them in the onInit() function of the widget like this:
self.onInit = function() {
element = document.createElement(
"new-custom-element");
self.ctx.$container.append(element);
}
While this works just fine and enables me to use Angular components in my widgets, I noticed a strange problem which sometimes occurs when navigating from a ThingsBoard dashboard state back to another dashboard state. Sometimes after navigating back, my widget would seem to load just fine but then the entire change detection seems to be broken. As long as I do not manually call detectChanges() in my component, the component will sometimes appear to freeze entirely in the UI and no longer react to any user interaction (such as a click event). Only refreshing the page will fix this problem.
What could cause this problem and is there anything I can do in order to fix this?
Have you ever tried like this:
ngAfterViewChecked() {
this.cd.detectChanges();
}
or
constructor(private appRef: ApplicationRef) { }
ngAfterViewInit() {
this.appRef.bootstrap(CustomElementComponent);
}
Good luck.

How can we call a function before refreshing a page using react

Our application is developed using react and on refreshing and route navigation, we need to check for unsaved changes in the page and show an alert.
For this scenario, we were able to leverage with route API on page-navigation,
and yet refreshing the page directly seems not working.
So in your case basically a user has typed a long form, so there are below cases you need to show him the message that unsaved changes will be lost.
When switching to different component clicking on any of the link
Refreshing the component
So inorder to do these there is a native event called beforeunload, so you need to add the event to the document by using document.addEventListener in componentDidMount and you can unmount that one in componentWillUnmount in the parent component
so there should be check to know the form has been dirty which means user has typed something, like isDirty in redux-form.
so whenever the user is typing something you can make this value to true based on this value if the user clicks on the refresh you can have the check and execute it
You can check more on here and this
so you can hold a state variable at the parent level and based on this you can trigger it
You can use Promise struct and run your refresh other whatever if you want in then
export const unSavedChanges= (values,listTitle)=> new Promise((resolve, reject) => {
//Your code of check, validation what ever
})
when you call this func
unSavedChanges(changes,"list").then(response=>{
refresh.page
}
)

Electron app: How to make dialog.showOpenDialog modal

In my small Electron app I have a couple of buttons to allow the user to browse for folders to use for the processing the app does. The call to open the dialog to do this passes the ID of the main browser window so that the dialog will be modal and this initially appeared to work. The buttons in the app main screen appear to be disabled. However, if the disabled buttons are clicked, when the dialog is closed those clicks are executed. This true of all the buttons in the main screen. If I click on the disabled "Cancel" button while the dialog is showing the app closes when the dialog is closed.
Seems to me that one should not be able to switch back to the parent of a modal dialog and "store" clicks.
The dialog.showOpenDialog call is made in the renderer process, is this possibly the issue?
Sid
In the renderer process you need to use the browser window reference, not the ID. You can get the reference in the renderer process by using: remote.getCurrentWindow(). You can make the call as follows. The example is specifically for opening multiple files, should be configured as needed of course:
const { remote } = window.require('electron')
const dialog = remote.dialog
dialog.showOpenDialog(
remote.getCurrentWindow(),
{ properties: ['openFile', 'multiSelections'] },
(filePaths?) => {
// do your thing
}
)
Not sure what was going on previously, I now cannot reproduce the problem, so I am going to mark this for closure.
Sorry for the noise,
Sid
You don't need electron/remote to achieve this, in fact, electron/remote is deprecated. The key is to provide the browser window's reference to the showOpenDialog API (in the main process). This is a general API pattern in window managers: in order to have a modal window, you have to specify a parent window. Code sample:
const ipcApi = {
'select-file': async () => {
// It's important to pass the window handler in showOpenDialog
// in order to make the dialog modal
const browserWindow = BrowserWindow.getFocusedWindow()
if (browserWindow) {
return dialog.showOpenDialog(browserWindow, { properties: ['openFile'] })
}
return
},

this is pointing to the quill editor toolbar

I use Quilljs for a textarea on my website. The standard editor don't support image upload to the server, so i have to implement a custom handler. In the documentation is written the following:
Handler functions will be bound to the toolbar (so using this will
refer to the toolbar instance) and passed the value attribute of the
input if the corresponding format is inactive, and false otherwise.
This is actually a problem for me and i dont know how to resolve it in a clean and "right" way. I built an angular application and i have written a custom handler for image uploading. This custom image handler should upload the image with the help of an angular service to the server. The data service is globally provided in the app and a member of my component and i can access it with this.dataService. But after clicking the image upload icon in the toolbar, this is bound to the toolbar, i can't access my data service anymore. Can i avoid this boundary to the toolbar?
In explicit. Assume i have created a quill editor with the following code:
this.editor = new Quill('#editor', {
modules: { toolbar: "#toolbar"},
placeholder: 'Some Placeholder',
theme: 'snow'
});
Now i add a custom handler to the image icon with
this.editor.getModule("toolbar").addHandler("image", imageHandler);
and my handler function for instance:
imageHandler(event) {
this.dataService.addImage(event.file);
}
which uses the dataService which i've already implemented and tested. But this.dataService don't exists because this is now bind to the toolbar. I initialized the service with the constructor of the component.
constructor(private dataService: DataService) {
}
When i call this.dataService in the constructor, then it can be found and the boundary is fine, but i need to call it in my image handler function to send the file to the server.
Best regards,
Sven
The easiest way to solve this problem is to change
this.editor.getModule("toolbar").addHandler("image", imageHandler);
into
this.editor.getModule("toolbar").addHandler("image", imageHandler.bind(this));
now you can access your components variables/members in your image handler function. The toolbar have not anymore the focus.

EmberJs - Bubble up action from modal

I have a couple of nested routes. In one of them it's possible to open a modal (which is attached to another outlet called modal).
When the user enters the text and clicks Ok, it's sent an action ('valueUpdated') to the MyrouteChildController. However, I also need to bubble this event up to MyrouteController, but it's not working. I tried returning true in the action handler and also manually calling #send.
If I call the MyrouteChildController's action from its own template it works.
http://emberjs.jsbin.com/lotinaw/edit?html,js,output
Any help would be appreciated.
Not only you can inject services in components and controllers in Ember by using Ember.inject.service() but you might also inject controllers and send actions to them using Ember.inject.controller() and then proceed with
export default Ember.Component.extend({
mycontroller: Ember.inject.controller('mycontroller'),
funcUsingControllerToSendAction(args){
let mycontroller = this.get('mycontroller');
mycontroller.send('myaction',args);
}
});
This would allow you to send action with arguments to the other controller context.

Categories

Resources