Constructing the Admin application

[00:00 - 00:09] Okay, it's time to finalize our first application. Let's start with admin application, but before we go, let me remind you, what is the goal of this lesson?

[00:10 - 00:18] So our application will contain two screens. The first screen contains list of all available rooms and button to add new rooms.

[00:19 - 00:25] Every room will have background assigned and name. The second screen will be used to edit room details.

[00:26 - 00:35] So you can enter your room name, you can select room background and add meetings to the room. From the technical point of view, we will have two routes.

[00:36 - 00:45] So we will have /room and /room, idea of that room /edit. We will create two components for these routes.

[00:46 - 00:52] First one, admin room list component. We'll use shared room list component that we created in previous lesson.

[00:53 - 01:08] The second routing component, admin room edit component, we'll use multiple components that we created in previous lessons, for example, shared button and shared room background. So let me add empty components and configure routing, and I will show you how it's done.

[01:09 - 01:22] Please remember to add styles in file styles.css in apps, admin frontend, as our C and styles.css. I've configured routing here, so we have two routes as we planned.

[01:23 - 01:31] So we have room and room, idea, edit. Both of them are lazily load components, so I have import and path to my components.

[01:32 - 01:40] At the moment, both components are empty. So in the next step, I'm going to add necessary code in components and I walk you through both of them.

[01:41 - 01:48] So let's start analysis from the top, from the root component, so app component. My app component is extremely simple.

[01:49 - 01:53] I have a template, which is only router outlet. I have, of course, selector.

[01:54 - 02:02] And the only thing that I added here is that app module. So app module is a module where I'm importing my room state module for backend URL.

[02:03 - 02:12] So I'm pasting here my backend URL. If I go to terminal, you can see that I have backend running using command and X serve backend.

[02:13 - 02:18] And as you can see, it's running. I'm providing backend URL with this method.

[02:19 - 02:32] That's why we wanted that static method for backend URL, in case if you're going to this other backend, you're going to house it in different place, you can just replace that string and as all. So I have two modules imported.

[02:33 - 02:38] I have rooms state module and meeting state module. The next part, you've just seen.

[02:39 - 02:44] So I have my routing configuration and I have my two components. Let's start with the simpler one.

[02:45 - 02:52] So admin room list component. So my admin room list component is using shut room list.

[02:53 - 03:01] And as you probably remember, we have to provide something that implements room interface. So in my code, I'm using ng-on-init-hook to fetch the data.

[03:02 - 03:12] And I have two more methods. I have create new room that navigates us to room edit screen and edit room method that navigates us to edit screen of the selected room.

[03:13 - 03:19] Everything, as you can see, is binded to the template. So I'm providing rooms with async pipe.

[03:20 - 03:29] New room button is set to true. And to outputs, new room clicked and room selected are binded to create new room method and edit room method.

[03:30 - 03:36] So this component is quite simple. The main goal of it is to navigate us to edit or create screen.

[03:37 - 03:46] So let's check what is inside admin room edit component. And immediately, you can notice that it's way more complicated component.

[03:47 - 03:52] First of all, it's edit screen. It's basically a huge form, which means that we will have a lot of inputs.

[03:53 - 03:59] So let's start by analyzing the template. So on the top, we have a div with button with back arrow.

[04:00 - 04:09] And we have an input where you can place your room name. Next, we have a small header that says that you can click on image to select a room background.

[04:10 - 04:20] And then we have another block with shared room background that is rendered in loop for all available backgrounds. So we are displaying a grid of backgrounds that you can select.

[04:21 - 04:27] Then we have another block with shared button with label safe. It's our button to save the data.

[04:28 - 04:35] The last part of that screen is the last ng-container block. First of all, we have a few inputs.

[04:36 - 04:43] First one is to place meeting name. Second one is for meeting host date from and date to.

[04:44 - 04:51] We will use these four inputs to create meetings that will be placed in the selected room. And then, of course, we have a button.

[04:52 - 05:05] And when you click on that button, we're going to call add meeting method. And the very last component that we use is shared room timeline list, where we can present all the meetings for the selected room.

[05:06 - 05:12] Let's check what is inside the code. So first of all, we have a few child for name input.

[05:13 - 05:24] So it's our way to access value of name input and pass it to the save method. Then I'm injecting room background image service that we are going to use to list all available backgrounds.

[05:25 - 05:34] Here we have also selected background, which is by default the first background from the list. And we have one more field for the ID of selected room.

[05:35 - 05:44] Next, I'm injecting router because I want to access additional parameter with ID of the room. I'm injecting meeting state service to get and add meetings to the room.

[05:45 - 06:00] I'm injecting this redef to close all the streams to be sure that I have no memory leaks. And room state service, we are going to use it to add a new room and activate the route again to access that additional parameter that we need.

[06:01 - 06:06] On a need, in our component, I'm calling set room data. It's not a very complicated code.

[06:07 - 06:17] First of all, I'm taking ID parameter from activated route snapshot. For a new room, it's zero, so I'm not going to go any further.

[06:18 - 06:27] If the ID is a proper ID of room, I'm going to assign it to my field. Then I'm going to fetch all the meetings for that room.

[06:28 - 06:33] And then I'm going to call get. So I'm going to subscribe for changes in selected state service.

[06:34 - 06:42] To sum up, I'm taking that ID. And if the room already exists, I'm fetching all the meetings for that room.

[06:43 - 06:50] A small interaction here, I forget to fix my main TS file in backend. So please be sure that you did it.

[06:51 - 06:59] So the difference is that I'm not going to use additional parameters that they set by default. And as you can see, the change is not huge.

[07:00 - 07:06] So basically, I'm removing that prefix and the port is the same. So it's a very simple change.

[07:07 - 07:12] Please remember to do that. OK, so as you can see, we have our application running.

[07:13 - 07:16] The screen is empty because we don't have any rooms at the moment. So let's add one.

[07:17 - 07:22] Let's click on that plus button. We are going to be navigated to create new room screen.

[07:23 - 07:26] As you can see, we have our back button. So we can go back to the select room screen.

[07:27 - 07:30] As you can see, we have our back button here. We can go back to the previous screen.

[07:31 - 07:35] We can enter room name. So let's call it room number one.

[07:36 - 07:41] And then we can select one of the available backgrounds. Let's choose this lovely route.

[07:42 - 07:48] OK, so let's click on Save button and check how it works. So as you can see, we have our first room.

[07:49 - 07:53] We can enter it and check what is inside edit screen. So as you can see, we can change the name.

[07:54 - 07:58] We can select a new background. And what is more important, we can add meetings now.

[07:59 - 08:03] So first of all, let's save the change of background. It works.

[08:04 - 08:10] And now let's add a meeting. So meeting number one.

[08:11 - 08:16] I am the host. It should be placed today.

[08:17 - 08:24] It's the fourth of April, 2024. Let's say something like this.

[08:25 - 08:30] And it's going to end in about an hour. OK, add.

[08:31 - 08:37] As you can see, meeting is added. So our admin application is done.

[08:38 - 08:54] As you can see, it wasn't that hard. We can move on to the next application, room front-end application, that will use the data that we are adding in admin front-end application to display details about room and meetings on a screen next to the doors in physical building.