How to open a react-bootstrap modal globally using multiple other components - javascript

I'm building an application that allows users to browse but will prompt them to login if they try to perform an action (e.g. liking something, trying to post something)
To achieve this, I have created a registration form which appears in a React-Bootstrap modal.
My question is, how can I trigger that modal to appear from multiple different components (for example a 'like' button component, or the 'sign up' component, or an 'upload' component)
I am not using redux, my application is a Meteor application.
My current idea: Add the modal open/close state to the top level component (App) and manipulate that state from the children components when the user clicks them?

Related

Creating dynamic UI components and persisting them

We are planning to build a dynamic frontend where users (admin specifically) can create UI components with something simple like a button click without changing the code.
For example:-
I have a form where I have 2 inputs username and email and there's a button to add more input fields and whenever the admin clicks on that button it displays another form where you can enter info such as type, label, name of the input field to be added and it then it displays it on the DOM.
But he also wants to persist the newly created form (or components) so whenever other user logs in he'll also be able to see it
We are using react to create our frontend so is there any way to achieve this?
One solution came to my mind that we can store the information to create new components into a database and then fetch that with an API into the component we want and then render it. But they don't want to use a database

UI architecture issue new angular app

Currently starting up a new project in angular 5 with ngrx and trying to figure out some architectural things.
The app should start with a page like some sort of dashboard. On top of the page you will have a bar with buttons which you can toggle some widgets(components).
The issue i am having now is i don't know which would be the best way to show these multiple components on the same page with that in mind that each of these components are living in a different module.
So in a nutshell the dashboardpage needs to show multiple components which can be hidden or shown via toggling the menu buttons on top, and each component lives in a different module. Actually each component will have some actions which will route you to a page in that module.
For example in my dashboard i will have a widget projects which contains a grid with all my projects and by double clicking a row i will get routed to the project page that lives in the projects module. I hope i was able to make myself clear. Thanks in advance for helping me in my search.
Thanks.
This will be easy with angular. Any component can be inserted anywhere else in the application using it's selector which appears at the top of the .ts file for the component. It can be imported as simple <html>, i.e.
<my-component> attach the *ngIf directive to have it only appear when a boolean is true.
<my-component *ngIf="myBoolean">
then when a dashboard button is clicked set that boolean to true. to close it, set it to false. So your app.html file could look like this:
<app-nav-bar (toggleOn)="setComponent($event)"></app-nav-bar>
which is your navbar component will be. there can be an emitter called toggle on that emits on click there and you can handle it in a setComponent function in app. In that function:
toggleOn(componentName: string) {
if(componentName === 'componentOne') {
showComponentOne ? showComponentOne = false: showComponentOne = true;
}
//...for your components.
}
then in the html in app.html place your components and put an *ngIf on them tied to their boolean.
In the nav-bar component your event emmiter will work like this:
first here's a button which toggles on the component:
<button (click)="toggle('component1')">Component 1</button>
then in the .ts file handle this component in the toggle function:
toggleOn = new EventEmitter<string>();
toggle(componentName: string) {
toggleOn.emit(componentName);
}
Using this strategy should solve your problem but there are many approaches. A good read on the many techniques to communicate data in angular comes from the angular docs. https://angular.io/guide/component-interaction Read it with focus and you'll be a much better developer!

How can i add a history pushstate without trigger vue.js router change?

Commonly,history.pushState() will trigger component rendering when using vue router,and that component will not get rendered but i don't want add a link for this.
As I want push a state for the modal showing without using vue router,hack like history.back() will not work.
More info is i want add history for a modal,and when history go back close that modal.

Angular JS 2 -- Application Design

I got one main component for the FORM and have three component for sections
Now in the main form i have submit button which i want to use to submit all the section(s) data to a service?
How can i achieve this?
Do i use output event emitter in all the section components and get the data in the main form component before submitting?
Thank you
---------------------- initial question below ------------------------
I am creating a Form (with multiple sections) in angular2 and this form will be part of a approval workflow.
The workflow will be not in angular2, although the form will be referenced from the workflow. When we open the form from different stages of the workflow it will allow user to view or edit only certain sections of the form.
How should i design my form with sections?
1) one component for the entire form?
2) separate component for each sections and having one main parent component?
on the form load; run business logic check to find what section needs to be rendered in view and edit mode AND for business logic have a separate component which will check what section is loaded and in what mode
Please suggest an application design.
The key thought here is re-usability and business logic.
Extract reusable components as their own component.
Lets say I have these components in my app ...
Child Component A - some form inputs that i will reuse elsewhere
Child Component B - Some form stuff that I will reuse
Parent Component A ...
Child Component A
And some stuff i wont reuse
Parent Component B ...
Child Component A
Child Component B
And some different stuff
Route Component, renders parent A or B depending on business logic as determined by incoming params / data.
Also, you might want to use attribute directives to add functionality to form elements. e.g. an attribute directive that transforms an input into a datepicker.

In Aurelia, how do I populate a modal (with a view and binding) that lives in the main application layout (app) from a view by invoking the router?

For the purposes of this example, I will use some hypothetical names:
app - The master view and viewmodels app.js and app.html of my application
projects - A view which is navigated to by using the router in app.
projects-new - A view which will populate a modal.
The designer on my team has a bootstrap-modal sitting in app. On projects (route: /projects), when the user clicks a button, this is what we want:
Router navigation should be invoked. The URL should now read: /projects/new
projects loads and binds projects-new to the modal in app
The modal opens.
The user either cancels (closes the modal) or fills out the form and clicks "save"
The result of the user's action is available in projects - so maybe an event object which contains the user's action as well as the model which was bound to projects-new (if they saved) is sent from app where the modal exists, to projects by means of the aurelia-event-aggregator.
I started down the route of using the aurelia-event-aggregator to communicate between app and projects but I stopped when I realized I have no idea how the binding is going to work.
I think another acceptable solution would be to create a modal component which provides this functionality, but not placing it in app, but stylistically it makes sense to be higher up in the DOM tree. Is there any way to essentially do this? Have a component in a view which somehow hooks into the DOM higher up in the tree? For instance:
<html>
<head><!-- Header stuff here --></head>
<body>
<app>
<stuff></stuff>
<!-- This is where the view is rendered -->
<router-view></router-view>
<!-- This is where the modal component would theoretically attach from projects view-->
<modal></modal>
</app>
</body>
</html>

Categories

Resources