Continuing with the forms exercise that we completed in the previous exercise, in this exercise, we will look at the use of modal dialogs as a way of creating custom dialogs in our native script application. When we create a modal dialog, we also will make use of additional UI widgets like the DatePicker, the ListPicker, and the TimePicker in order to provide a convenient way for the user to enter information into the form that we created in the previous exercise. So along the way we will learn both about modal dialogs, and also new UI widgets in this exercise. As we discussed earlier, to create a modal dialog which allows us to create a custom dialog with a custom layout of the dialog, we need to create a new component. So in the app folder, I'm going to create another folder called reservation modal. In the reservation modal folder, I'm going to create two new files named, reservationmodal.component.ts, and the reservationmodal.component.html. These two files will help me to create the new reservation modal component, and the reservation modal component will be used as the component for creating the modal dialog. So to set up the reservation modal component in the reservationmodal.component.ts file, let me import component OnInit, and we would need both these from angular/core, and we will import modal dialog Params. This allows us to pass parameters from another component from where this modal is created, as we will see when we set up the reservation component a little while later. This we will import from native script angular modal dialog, and we will import three new UI widgets, the DatePicker from ui/date-picker. And similarly we will import the TimePicker also, and the ListPicker here. We will see the use of the date and TimePicker in order to allow the user to select the date and time for the reservation. And then we will use the ListPicker in order to allow the user to pick from a list of items, in this case the number of guests. And we also need to import page from UI page, which will give us access to the page, and then give access to the items in my page template. So here let me go ahead and create the component decorator, and in this case I will not specify the selector, because this component will be simply used as the modal component. And we'll also specify the template URL for this as reservationmodal.component.html. And then let's go ahead and create the component. So we'll say export class reservation modal component, and we will implement the OnInit in this component. So to construct the component, I'm going to start out by creating a guest array, which will be an array that I will use in my ListPicker. So in this guest array, this is nothing but an array of integers from one to six. So I can allow the number of guests to be specified from one to six, and I will specify a variable called guests, which I set to number, and also a boolean variable called IsDateTime, which will specify if I am supposed to use this modal as a Date/TimePicker, or a ListPicker. Now, the same modal, I'm going to use both to display either the date and TimePickers, for the user to select the date and time, or a ListPicker. Now, in the view or in the template, I will find a way of showing either the ListPicker, or the date and TimePicker by using this IsDateTime as a boolean variable there. So when we set up the template, it will become more clearer to you how this is useful. So given this, let me go ahead and set up the constructor, and in the constructor, I will inject params which is of the type ModalDialogParams. And as we will see later, we can pass in parameters to this Modal dialog from the other component where we start this modal. And also the second parameter, second value that we will inject is the page, and when the constructor is set up in the constructor, I will receive the value in the params. So I will check the params.context, and we will set this up in the reservation component a little bit later, and you will see how we can pass in information. So I will either pass in the information as guest, which means that I should show the ListPicker, or I will pass in the information as date-time, which means I should show the date and TimePicker in the modal. So this way I am reusing the same modal both for showing the ListPicker, or the date-TimePicker. So I can say if param's context is guest, then this IsDateTime is false, because I want to show the ListPicker. Else, now the else would only be the other possibility, but just in case, I will still also use the if again to check to see else parameter IsDateTime, then in here I will set this IsDateTime to true. So this way in my constructor I'm able to decide whether I am showing the ListPicker or the date and TimePicker in my modal. Now, in the ngOnInit, I will set up some constraints on the date and TimePicker, in case I am showing the date and TimePicker. So I will say if this IsDateTime, so which means that I should be showing the date and TimePicker. Then in that case, what I will do is I will say let DatePicker of the type DatePicker. We will assign this to DatePicker and say, this page. So this is the reason why I injected the page into the constructor. So this page get view by ID. So I want to access that DatePicker, get view by ID, and I will say DatePicker. And the way I will select is by specifying the ID that I'm using from the DatePicker, and I'm being very creative in calling it just DatePicker. So that will be the ID that I will use for this element in the view. And then I will say, let current date, which is of the type date, equal to new date. So this way, I will set the current date to the current date and time at this very moment when this code is run. The reason I want to do that is that for my DatePicker, I want to configure it such that the minimum date that will show is the current date and the current time. And so when the user is selecting the date and time for the reservation, they will always select a date and time in the future, not in the past. It doesn't make sense for you to reserve a table in the past, you will always be reserving table in the future. So after the current point of time, I will be able to allow the user to pick a value. So I will set the current value of the DatePicker to what the current date is, and set up the minimum values in a short while. So I will say, DatePicker year. I will set the year to the currentdate.GetFullYear. So this method will give me access to the full year from the date object. So this is the JavaScript date object. So from there, I get the DatePicker, and then the DatePicker month, I will set to currentdate.getmonth plus one, because the month value will be set from zero to 11, and DatePicker day I will set equal to currentdate.getdate. And for the DatePicker, I will set the minDate to current date. So that way, the minimum value that I can select from the DatePicker is the current date, obviously avoiding selecting a date and time in the past. And then I'll set the DatePicker maxDate equal to new date, and then I'll set up a random date in the future, so up to 2045, year 2045, 12th April randomly picks up. You can configure that to be any number, so if you want them to allow to reserve a year in advance at the most, then based upon the current date, you can set up the future date accordingly, the maxDate accordingly. Let me now get the TimePicker. So to get the TimePicker, let me just copy the DatePicker value from here, and then I will set up the TimePicker, perhaps you'll find it more convenient to type in this whole thing. But I find it more convenient to just copy the earlier code, especially if it resembles the current line that I'm introducing, it saves me the trouble of typing all the things all over again. So I selected the TimePicker, and then I will say TimePicker our current date get hours. And for the TimePicker minute, I will say current date get minutes. So that way, I will configure the date and TimePicker to the current date and current time, so that when it is displayed in the modal, that will be automatically set up. Now, we will go in and create a method called submit, which will be called when the user clicks on a submit button in the modal dialog that I will create in a short while. So when the user submits, I will check if the modal is currently displaying the date and TimePicker, or is it displaying the ListPicker. So there are only two choices here. If it is displaying the date and TimePicker, I will go and get hold of the DatePicker here, and I will say, let selected date, DatePicker date. And then we will select the TimePicker. So I'm just going to copy that code from earlier, and then select a time. I will get the select time from TimePicker. So note that the DatePicker will only return the date value, and the TimePicker will return the time value. Now, I need to combine these two in order to get the overall time in the form of a ISO string field. So I'll say, let reserve time is new date. So in this, I will say, selected date, get full year. So this is how I can configure a date value here, selected date, get full year, and then, selected date, get month selected date, get date now. So the date value is obtained from the DatePicker but the time the user set it in the TimePicker. So that's why I will say, selected time get hours or get full year, and then selected time get minutes. we can also get all the way up to milliseconds. That doesn't make sense for us. Time and time in the form of hours and minutes is sufficient enough for us. So that's the value that we will get. So this value, the reservation time is retrieved by looking at the selected date, which I get from the DatePicker, and the selected time which I get from the TimePicker, and that I will construct a new date out of these values here. So now I have the time at which I want to make the reservation. So at this point, then this modal is closed. The component from which this modal is started will also supply a callback function, which will be received in the parameters in the form of close call back as you see here. So we'll say, close call back, and the past, the reserve time, and then convert it to ISO string, because that is how we are going to be storing the information in our form. So I will convert that reservation time that I have come up with up there, and then convert it into an ISO string and pass it back to the component from where the modal was opened. So this is one way of sending in parameters to the modal, and then receiving parameter values back from the modal to the other component. Now, if I am using the ListPicker, then I will say, let picker, ListPicker and say this page get view by ID, and then I'll say, ListPicker, and I'll give this ListPicker an ID as guestPicker. A bit more creative than calling it TimePicker, DatePicker, guestPicker. And how do we retrieve the selected value from the ListPicker? We'll say, this params close call back, and then pass in this guest array, and then from the guest array I will say, picker selected index. So when you select a picker based upon the value that you selected the ListPicker, then selected index will be used as an index into the guest array to select the value, and then pass it back here. So this is a more generic way of selecting the item from an array. So for example, instead of using an array of numbers, if you used a guest array with the strings with values from which you can select, then you want to pass back the string that has been selected. So this is a generic way of specifying the value that you want to pass back. So with this, my reservation modal component, the TS file is set up to be able to open the modal, and then receive the information from the user, and then pass back this information to the calling component. Let's construct the modal here, to construct the modal here, I'm going to start with a stack layout. This modal will simply display the ListPicker or the date and TimePicker, nothing else. This doesn't have any more information to be displayed. Fine, you can create your own layout for your modal. So this is how you would create custom modals if you want to use them in your application. So we'll say, modal view style, so this is a built in style that native script makes available, built in CSS style. And inside the stack layout, I will define another stack layout, and I will set the visibility of the stack layout to not IsDateTime. This would set it to either visible or collapsed. So this way, I will show the ListPicker only if isDateTime is false. And inside this stack layout that I've just created I'm going to create a ListPicker with the ID guestPicker, recall that I used the ID in the code in order to get access to this. And then I would say, items equal to. And in here if you want the ListPicker to show a list of items, then you need to supply an array of items. So since I've created the guest array in my code, I will use that as the items here, and then will say, selected index equal to zero. So by default that will be set equal to zero, and then class is P-15, and say ListPicker. Now, in the second layout down below, I will use the same stack layout what I've seen, but the visibility now is going to be controlled by IsDateTime, not the negative value. So if this is true, then this will set to visible, if this is false then it will be set to collapsed. So which means that the stack layout will be shown only if I am trying to select the date and time. So notice the difference between this one, and this one here. So the ListPicker will be shown if this data is false, then day TimePickers will shown if isDateTime is true. So here I will include a DatePicker. So to include a DatePicker, I simply say DatePicker, and then give this an ID of DatePicker, because that is what I used in the code. That's it for a DatePicker, and TimePicker right below that with the ID TimePicker. That is it. So we either show the ListPicker or the date and time. And when the user has selected the value, then I will have a button here, which will be clicked for the user to confirm the selection. So I will say button, button primary, button active. And this button, that text, I will set it to submit. And then when the button is tapped, I will call the submit method that I've already implemented in the code. So now my reservation modal is configured. I will show either the ListPicker or the date and time TimePicker, and when the user taps the button in the reservation modal's layout, then the values that they user selected will be submitted back. And in the submit method that we have implemented here, you notice that in the submit method, the value is sent back by calling this params close by- callback. So when this is done, the modal will automatically be dispersed and the value will be passed back to the component from which we started this reservation modal. Now, since this reservation modal is a component, I will have to go into the appmodule.ts file, and then import the reservation modal component. So let me copy the reservation component here, and then save, reservation modal component from reservation modal, reservation modal component. And this reservation modal component, if you recall from your angular course, since this is going to be used as a dialog component, I also need to include this in the declarations here. So all components have to be included in the declarations. In addition, I also need to specify the entry components for this. And then in here, I need to specify the reservation modal component as one of the parameters here. So notice that in the declarations, and the entry components of the Ngmodule decorators here, I need to include the reservation modal component. Now, my reservation modal is all set up, I want to make use of the reservation modal. So to make use of the reservation modal, I'm going to start this reservation modal from the reservation component. So I will go to reservation component, and in the reservation component, in addition to change detector ref here component and OnInit, I will also import the view container reference here, because I will need to pass this to the modal when I am stacking the modal. And I will write there, import the modal dialog service, and the modal dialog options from native script angular modal dialog. So the modal dialog component can be started using the ModalDialogService in the ReservationComponent. Now, going into the ReservationComponent's constructor here, let me inject. I can use private underscore modalService, and call this as ModalDialogService, and then vcRef as the view container ref that I'm going to inject. So both the modal dialog service and the view container ref should be injected into the constructor. Now, to create a modal, I'm going to declare a method here called createModalView, which I will call from my reservation component's template file to specify whether I want the ListPicker or the date-TimePicker to be shown. Here inside this create modal, we'll say let options, and so this is all the time modalDialogOptions. And this can be described by a JavaScript object here. And the modalDialogOptions, I'll pass, viewContainerRef here. In the form of this vcRef. So this vcRef that was injected in the constructor here. And the second parameter I can pass in is context. The context can carry all the values to my modal dialog component from here. So in here I will pass the arguments as the context. Now, this argument will be specified in the reservation components template file, we'll see what arguments can be passed and I will pass in either the, date hyphen time, or guests as the arguments as you will see when I configure the template in a short while, and then I will say full screen is false. If you want the modal to cover the entire screen, then you can set the screen to true. If you sent full screen to false, the modal will be just the size necessary to include whatever it is there in. It's modal components view. So after setting up the options here, so and then to start the modal component, I will make use of the modalService, this modalService. And then the modalService provides this showModal method, to which I can specify the component that I'm going to use as the modal component. So the reservation modal component I'm passing it has the value. And then I will pass in the options that I have just configured earlier. Now, this modalService and the showModal will return a promise here. So to handle the promise, I will use the then here. So you all know how to handle promises already, so I will use the then here, and then will deliver the result, which could be of any kind because it could be either date-time, or it could be the guest values. So depending on what is being passed back, we'll make the decision. So let me close this off here, and then when the result is obtained correctly, then I will say, if args equal to guest. So that means that I asked my modal to show a ListPicker, else if args equal to date-time. So notice that these two values are exactly what I used in the reservation modal component. So if you look up here, you'll see that that param's context could be either guest or date-time, and that's the reason, this value is coming in from the options that I'm setting here. So that's why here, when the modal returns the value, then I can capture what's inside this. So this is the callback function that I'm supplying here. So this is what will be called, or will be executed when the modal does this param's close call back. So that is something that we see, now we see the connection on how the information from the reservation modal is passed back to the reservation component. So when I receive the value, then I will say, this reservation. So if it is a guest, so I will patch the value into saying, guests, result. So here you can see that if it is guest, then I am supplying that to the guests value, otherwise if it is date-time, there are only two choices actually. So, I will patch value to, notice that I have the date-time property inside my reactor form there, so the date-time property, I will patch that with the result that is obtained. That's it. So by using this call back, I'm able to obtain the value returned by the modal here. And finally, since we see the red squiggly line here, I need to import this into the reservation component.ts file. So let me import that reservation modal component from reservation modal component. Now, of course we need to trigger the modal by calling this method the createModalView. How do we call this method? So this is where I will open the reservationcomponent.html file, and in the reservationcomponent.html file, for the text field, what I'm going to do is when the user taps on the text field, then I will open the modal component. So for this text field, I'm going to add in the value and I will say, tap. You can set the tap even for even the text field. So when this is tapped, I will call the createModalView with the parameter guest. So that way, when that particular text field is tapped on, then you'll open this modal and then show the ListPicker, and then allow the user to select the number of guests. And then when the modal returns the value, you will patch it into the form, and then automatically this text field will get updated, because I have tied the stake's field to the guests from my reactive form there. So this value will be automatically updated. So now you see that I cannot directly manipulate the value in the text field, because if I try to, then it'll open up the modal, and will restrict me to select one of the six options there. Now, same thing for the other text field where I select the date and time. So here when the user taps on this, I will createModalView, but then I will pass in the value date-time as their argument here. See how we are able to pass in the value from here, and this value, either-date-time or the guest here will be obtained inside my reservation modal here. And then that argument is passed in as the context for my reservation modal, and when the reservation modal returns the value, that value will be patched to my reactive form here. That's it. All the updates are completed. Let me save the changes, and then let's go and take a look at the behavior of our application. Now, going back to the device, let me now bring up the reserve tables form. When I now click on the number of guests, you notice that a ListPicker is now brought up, and so I can select the number of guests from here. So when I select say five guests, and then click on the submit, then the value of the number of guests is changed. So notice that I won't be allowed to change that by directly typing in the value, I have to use the ListPicker to select one of the values. Similarly the smoking can be turned on. When I click on the date and time, notice that the date and TimePicker are brought up, and so from here I can select the date and time. So I can say July 27th 2018, and I can say 12:02 pm and submit. And notice that the value that is initialized here in the date and time field will be the ISO string corresponding to the date and time that I selected. I can click on that and change the value again if I want to. Again, let me select another value, say August 12:01 pm. And that value will be set up here as an ISO string here. And then when we click on the submit, this value will become available to my application in the reactor form object that we have in our application. So with this, we complete this exercise. In this exercise, we have seen how we can use a modal dialog to show a custom modal in our application. We also saw how we can use date, time and ListPickers, UI elements in our views of the application, and we also saw how we can integrate that together with forms in order to support a more convenient user experience. With this we complete this exercise. This is a good time for you to save your changes, and do a git commit with the message modal dialogs.
