how to control list of timepickers in antd? - reactjs

I have a list of time pickers in my application to let the user chose the opening times for his store, so he can chose from_time,to_time and the day as shown in the picture.
the problem is i want to control this list so i can add a new time, delete, modify
I am using Antd V3.

I'm not sure if I got your question, but here is what I have got
https://codesandbox.io/s/nice-curran-kkx10
by the way, that snippet could help you to understand the use case of keys with list in React.

Related

How to dynamically add a new form step to react multi-page form for each selected item on the first page?

I need a bit of direction. I'm working on an application with React, Typescript, and Material UI. I've created a simple modal. The first page contains an MUI DataGrid with checkSelection enabled. The User can select as many options as appear on the table.
Now, for each selection, the User will then have a new form step to complete. So, if the User selects 5 items from the table, they will then see 5 corresponding steps. The form steps are tied to the selection. So, if the first selection is a menu item, for example, then the next step in the form will be about that menu item, with fields to add to that item.
I've been searching for a similar solution and haven't found one. I'm hoping that someone can point me in the right direction or has some sources they can recommend.
Much appreciated.

How to show more fields on custom object tabs in Salesforce?

Ok so this problem is probably easily solvable, but since I am a beginner in Salesforce and I didn't find anything useful on Google, I am asking if someone can please help me.
So, as you can see, I have created a custom object called Students, and added some fields to it.
Next, I have created a custom object tab, called Student, as you can see on the following image and added some records.
On the custom object tab, only field 'Student Name' is shown. Does anybody know how to display all (or some) of the fields that were added to the object Student?
Thank you so much for your answers and have a great day :)
On the far right of the 2nd screenshot there's a gear/cog icon. Use it for o create new "list view". Or click that "recently viewed", change it to "all" (there should be an auto-generated one for you) and use that gear icon to select which fields to display.
You can even pin the list view to be your default if you don't want "recently viewed".
As for recently viewed itself - it's special, the gear icon won't work. Follow this article: https://help.salesforce.com/s/articleView?id=sf.customize_recent_records_list_lex.htm&type=5

React Js Autocomplete Multi select example

I'm pretty new to React Js, I have a requirement for building AutoComplete Multiselect dropdown.
Despite looking around for lot of examples,
I was suggested not use any third party libraries. And pretty
clueless how to start and proceed further.
My requirements are
Have an input text box for typing names.
Display sugggested name with checkbox.
Upon checking the names, they must be display in an with an 'X' symbol(remove item)
If I uncheck the name from the multiselect dropdown, it must be removed from the li.
If I Click the 'X' it should be removed from the li and uncheck the item from dropdown list.
And lastly , I need to display the selected items in the input fields like
I've been trying to implement this functionality but figure out how.
Can anyone please provide some reference and any guidance in implementing this functionality or any examples. It would be a great help.
Thanks
I'm not sure why the recommendation against third party libraries. These component can get complicated fast.
I recommend you use a third party. Don't reinvent the wheel!
Something like https://github.com/JedWatson/react-select will do what you want. It has been around for years and has over 300 contributors and 2 million weekly downloads.

CRUD: using mat-Dialog as UI

I'm having a list of a playlist using mat-card and I'm getting my data from an array list inside my PlaylistComponent
What I'm trying to do is to add another playlist that's why I added a new playlist button that will display a dialog
I've added a playlist service that contained my form group.
My problem is that I'm new and I got lost with the architecture of the program.
do I have to use two-way binding or do I have to find a way to implement it in my dialog component
if someone is familiar with this technique please give me an insight.
Your question is asking a lot and you don't give the underlying code so I am going to give an outline and point you to the documentation to follow for your specific implementation.
Basically you take the data from the form and pass it in mat-dialog-close. When you open the dialog from your playlist component you also subscribe to the afterClosed of the dialog. In this subscribe, you will get the data back from the mat-dialog-close. You then can push that data into your existing array.
The first example of mat-dialog in the documentation handles a form and returning the data Dialog | Angular Material

Using Angular for data entry in a table

We're building a new time entry system that uses legacy data. I've attached a screen that shows the UI.
`Here's a link to a fiddle with some mostly working code.'
http://jsfiddle.net/dgdavidson/GMUK5/3/
As you can see, we have a row of data that contains a weeks worth of time entries and comments for each entry.
Problems now include getting data to update. For example, clicking 'New Entry' or the delete button doesn't update the table until those buttons are clicked a second time. Do we have to force an update?
For a change to time entries hours or comments, because the data is in an object inside of an object how do we capture the change? It seems we need the $index for the row as well as the $index for the date we're changing.
Something we haven't even started on yet is another row underneath the total hours row that will be dropdowns so that the user can enter the location they were at for that days work.
We feel that Angular is a good choice for what we are doing so I suppose my biggest question is are we going in the right direction with this or do we have a fundamental architectural issue?

Resources