Angular JS cascade notifications - javascript

I need your advice to help me.
I'm making an Angular JS app and I need some notifications like angular-toastr or angular-ui-notification but showing not like a list but cascade. Like in picture bellow.
Can anybody help with advice or realization such kind of notifications?

So I think what you want to do is divide and conquer this problem:
Think about the UI as a set of components. For the picture above, you might have the following.
// Notification Cascacder applies DOM transformations to a list of
<notification-cascader>
// Iterates over a list of notifications
<notification-list>
// Contains primary DOM for a notification
// accepts a variety of arguments for opacity, notification-message, etc.
<notification-card> </notification-card>
</notification-list>
</notification-cascader>
Now that you've broken it up you can determine what the API for each component may be, write the tests and then code the component. Writing it in this way will increase the reusability of each of the angular components. You could use a single notification-card without its parent in parts of the application. Although it isn't angularjs related you can read this and apply the concepts
https://reactjs.org/docs/thinking-in-react.html

Related

Using mutationobservers to detect changes in the results of a fetch request

I'm working on a narrow cast that displays an amount of tickets (an integer with the total added up to eachother) from a 3rd party API. I want to display a notification when this amount increases. I've read about mutationobservers, and that they are good for doing similar tasks like when something gets added or deleted.
The app has a Vue frontend, and a Laravel backend which does the requesting/authenticating. The index blade loads in a Vue component which contains the other components (and distributes the data from the API to child components).
I'm not quite sure wether mutationobservers are good for this specific job, though. Googling really didn't give me great alternatives.
In conclusion, I want to know if mutationobservers are the right tools for this task and what property would work. Better suited alternatives are also welcome.
Using vue, you can use a watcher function to watch for changes in a particular variable (amount). Mutation Observers only watches for dom updates, it won't give you what you want

Multiple render variants with React?

I've built a web application using React which is up and running and working well. I should probably just leave it alone, but there's one area which is troubling me, where I think I need to do a bit of refactoring because what I'm doing doesn't seem to me to be going with the flow of React. I'd be interested in others' views.
I have a React class, Product, which I use to keep track of products on the page. The only property stored in state is 'quantity', but I have various functions which do things like update a basket by means of pub/sub. Depending on how and where this Product class is used (whether in a table or for a detail view, whether on mobile or desktop), the necessary display is quite different. So in my render function, I call variously 'renderForDetailOnMobile', 'renderForTableOnMobile', 'renderForDetailOnDesktop' and 'renderForTableOnDesktop'.
As I say, this doesn't feel very React-y to me, as if I've got the whole thing upside down (although the rest of the app is, I would say much more idiomatic). So how should be thinking this through in order to break it down into separate smaller classes, which is what I imagine I should be doing? Sorry, for privacy reasons it's not possible to poast actual code, so I hope this description makes the situation clear enough.
You should be using reducers or stores, depending whether you have a flux or redux application. This would help you to understand your state and how it changes.
I see you are using state in your Product, while you should be using stores as mentioned above.
So, how I see the issue is that you have data source and you need to transform it based on the device requirements.
In such case I would make a container which would load other components in charge of transforming and presenting data for different devices.
Container should be rather simple just returning the correct component based on the conditional being met.

Best practices for when to use Pub/Sub vs Dependency Injection

In most modern JS frameworks, the best practice for loosely coupling your UI components is with some implementation of Pub / Sub.
The question I have is doesn't this make debugging, maintaining your app more difficult, whereas dependency injection could achieve the same result (loose coupling)?
For example, my component should open a dialog when clicked. This needs to happen or else the UI will appear broken. To me it seems more readable to have the component make an explicit call to some dialog service. In the wild, I see this problem solved more with pub sub, so maybe I am missing something.
When using both methods together, where is a good place to draw the line when something should fire an event or fulfill that action with an injected service?
Pub-sub is great for application-wide events where the number of potential subscribers can vary or is unknown at the moment of raising an event.
Injection always sets the relation between two, sure, you can create decorators/composites and inject compound objects made of simple objects but it gets messy the moment you start to do it.
Take a tree and a list for example. When you click a node, the list should be rebuilt. Sounds like injection.
But then you realize that some nodes trigger other actions, headings are updated, processes are triggered in the background etc. Raising an event and handling it in many independent subscribers is just easier.
I would say that injection works great through layers, when you compose a view and a controller or a view and its backing storage.
Pub-sub works great between objects in the same layer, for example different independent controllers exchange messages and react accordingly.

How to refactor to cleaner version of maintaing states of the widget

Backstory
I inherited a bunch of code that I'd like to refactor. It is a UI application written in javascript.
Current state:
We have main application which consist of several UI components. And each component has entry fields, textboxes, menus, etc), like "ticket", "customer information", etc. Based on input, where the application was called from, who is the user, we enable/disable, hide, show, change titles.
Unfortunately, the app grew to the point where it is really hard to scale, add new features. Main the driver (application code) calls set/unset functions of the respective components. So a lot of the stuff look like this
Main app unit
function1() {
**call_function2()**
component1.setX(true);
component1.setY(true);
component2.setX(false);
}
call_function2() {
// it may repeat some of the code function1 called
}
and we have a lot of this in the main union.
I am cleaning this mess. What is the best way to maintain the state of widgets?
Please let me know if you need me to clarify.
Looking at your code looks like you are accessing your view code directly from functions which as you correctly pointed is a bad idea. If you application is lot of GUI stuff then I would suggest you go with MVVM approach.
It would keep your view, binding and functionality completely separately. In future if you want to change the GUI, you can do it without touching any other classes.
Well I am not from JS background, but this is what my .Net exp says.

Knock Out - JS split

We developed a WEB based application using Knock out and Pager JS. We are almost to the end of the project. We have only one view model that serves the data binding for all data elements shown on UI screen. We are looking out for the options to split the JS files to make it more efficient and readable. Since we have only one view model that serves the whole data binding, its easier for us to call same methods for different actions using self.methodName();. My Questions are below,
1) If we are going to split up the View models into multiple files, how do we invoke a method from one view model to another view model.
2) I was checking abt the namespace to split the files using knockout, but not sure how far it works?
3) Some recommendation using require js, I seen some examples.. but not sure whether that will resolve the issue.
We are apply the databinding like below,
window.VM = new viewModel();
ko.applyBindings(window.VM);
4) If the content of the data is been shared with mutliple screens, how do we bind for each div.. for example, if I want to show the contact detail screen in Contact Detail and also subset of contact Detail information... How do we acheive it.. Based on my understanding, the databinding applies to a div element.. If I want to show the same data on two different screen, how we will acheive this...
Sorry for asking everything in one question..
Thanks,
Ramesh
Definitely you have to read about PubSub concept, which is easy implementable with KO.
E.g. http://www.knockmeout.net/2012/05/using-ko-native-pubsub.html

Categories

Resources