Build a international company search engine | SupeRails #188

31/08/2024
Transcript
Hello friends. So previously we talked about, uh, searching the French national database of companies via API and the British National Database of companies via API and this we build this basic application where you can, uh, search for a company. So here I'm searching for British Company. I click on it and it, uh, populates this information field with the company name, uh, registration number and address. And we also made it work for France before. And now we are going to make it so that it works, uh, for different countries. Let's say you have, uh, an application where you want to create, uh, companies from different, uh, countries and you want to get their legal information. So here is the example of application functionality that they're going to build. Here I have a counter select. Let's say I'm gonna select France. And here I have the search in the French company database. So, uh, let's search for this company, Rezi. Here we have this company. It auto fills this, uh, registration number. Now I'm going to search in the British Company Registry. That's search for the same, uh, company name. You see, the results are different 'cause we're searching in another company database and you have saved the company, uh, registration number for the British company. So here I have, uh, let's put, and here, so here I have the company registration number, this, and we noted the legislation is, uh, great Britain. So let's build this kind of functionality into our basic application where we have, uh, the search field and let's, uh, have a selector on what database research in the French or the British. So, uh, first of all, let's uh, go to our form, to this form and we're going to have, uh, let's say two different search fields. So, uh, one is going to be search, uh, front, and uh, that will be search, uh, uh, create rhythm. Okay? So here we have two search fields, and at the moment, both of them make, uh, the request to company search controller and it makes a request to slash company slash search. In our application going to companies controller, we have this company search. And you see here the manual set company search for UK or for France. Yeah, we have used uk. Let's be consistent. Have also used, not gb, not Great Britain, but United Kingdom. Okay? So, uh, we want to search, uh, different databases based on what we submit. If we search here, we want to search the French database. If we search here, we want to search the UK database. Uh, to do this, we can add the, another data attribute that they're going to send in the, the Pres. So based on the contract that we send in the pres, they're going to search, uh, in different database. Let's say, uh, uh, country here will be France, and here country will be, uh, great Britain or U let's say uk. Okay? So, uh, if we can access this data country in, uh, our company, search controller, uh, how can we do it? We would also append it here into the query. So let's say, uh, let, uh, country code or let's say let country equals event target dataset, uh, country. Yeah, we have undefined like this and we are going to add country to our search, uh, query. So we'll say add the country equals country. Let's see. We have country in the pres here. Uh, let's, uh, put a binding, binding b I'm going to refresh the page to Alize, the seamless controller. And let's search. So, hello. Okay, we previously put, uh, here to search only when there are modern three characters. So I had to put three characters, let's say pres. And in the premise we have the country fr continue. Now let's, uh, search into other field. We hit the bind again. Let's sees in the premise we have country uk. Okay? So, uh, based on the country, we can make different search cures. Country equals Ram's country. And uh, we'll say if country equals France, we will get the results for search France. Elif country equals, uh, create Britain, no, uk. They're gonna search in the UK company database. Okay, let's, uh, continue. Uh, I'll refresh the page and let's search in French database. I'm searching for Tracy. Okay, I got this. Yeah, I got an error with pers. Okay, let's search again. Okay, I get this undefined method each. Let's search uk, UK works. So, uh, the France doesn't work because, uh, here in search to stream we need to have, uh, a different, yeah, we get a different payload for UK and for France. So for France it'll be not items, but results. And uh, the result, uh, attributes would also be different. So let's create a separate, uh, response for France. Let's say search France to stream DOB and search uk. So search UK does need any, need, any changes, search France will have results. And let's have a look at the result. Uh, yeah, vice versa, UK looks good and France is currently broken. Okay? So here we'll also say that they're going to respond to different tablets. So, uh, they're going to render the template, uh, render template, um, search France and here will have search, uh, uk. Let's see if it works for uk. Now I will refresh. Okay, it, uh, isn't Fcon, um, uh, maybe I forgot a syntax for rendering the right template. Um, what for it run the template, missing template, search uk, uh, maybe slash companies. Okay, now it's V for UK and for France, uh, it's also V. Okay. So, uh, let's just have the right information. For France, we will need result, uh, CRM, that is the registration number, the full name, and, uh, likely the address. Uh, let's have a look at the Sears. The address will be inside Sears. Yeah, address. Okay, like this. Okay, let's refresh. So now we can search in two different databases. Let's search, uh, let's skip B here. Okay, let's search, uh, Rezi here. Okay, so yeah, we have two different fields to search in different databases. Looks, uh, quite good. But let's, uh, as we did here, add a counter selector and, uh, not show, uh, two different search fields at the the same time. Let's show one search field based on the selected country. So, um, to do this, let's start by adding the country code to our company. So I will say rails, uh, generate immigration. We're going to store the country code, add the country code to companies country code stream. Let's look at the migration, add the country code. Okay, looks good. Rails to be migrate. Now, uh, I'm going to add the country code selector. So here I will have, uh, country code, uh, that name is going to be country code. Uh, let's remove everything else that form, not text era, but select. They're going to select the within, uh, France and uh, uk. Let's see if, uh, it gets rendered. Okay, we have the selected, but we cannot, uh, yeah, we always have a conscious selected. We want to also allow blank. Uh, let's add, include blank. True. Okay, looks, uh, good. So, uh, we have the country selector. Let's also, uh, make it so that we can save it in our database. So going to the company's controller company programs, I'm going to enable country code. Okay? And now let's display only one of these fields based on the, our selected country. Now I cover this functionality. Previously we did it, uh, with episode 81, show height form field based on selected value. So I'm not going to, uh, go through it all. Once again, I'm just going to create this, uh, control and copy the code. I recommend you to have a look at, uh, this episode. Learn more on how you can show a different field or different diffs based on a selected form field. So I'm just going to go here and, uh, I'm going to create a stimulus controller named show failure rails, generate stimulus show value. I'm going to open the controller and, uh, paste everything from, uh, this tutorial that I previously created, not reinvent the v. And uh, going back to our form, so we will add this show value controller to our form. And here is like the value. And they're going to show this if the value is France and this if the value is, uh, uh, uk. So, uh, here in the example I have, uh, data show value, target input, uh, here data. The, this is the input target and these are the output targets, uh, input. When I input, uh, so when I kind of change this selector, it is going to go to show value controller toggle action, and it's going to have look at the output targets. So this is an output target and this is an output target. Uh, data, uh, let's see, data show value, target output, and value France. And here we're going to have the value uk. And this might be it. Okay, so you see I have no country code selected and I don't have any search fields. I select France. I have the French company search, I select uk, I have the uk, uh, company search. You say the same company doesn't match, uh, in the UK company search. Uh, let's, uh, yeah, this kind of works. Uh, one final thing. What if you don't want to input all the information, uh, that you find, uh, here, like this information is use useful for search, but what if you want to input only the, uh, company registration number so you, as we do it in this application store only the country code and the tax id? 'cause it's all we need in this application. So, uh, instead of pasting all this information into this info field, let's say we will paste on the company registration number. Uh, to do this, I would go, uh, back to this company auto complete controller, and here instead of paste in the, in the text. So instead of paste in the all this, uh, text, I will paste only the country code and, uh, oh no, the company registration code. So, um, to do this, I will go to the search fields, and here I will add the, as a data parameter, the company number. So I will say data company ID equals this, and I will do something similar for the French search data company ID result CRM. Okay, so, uh, we are going to pass company ID as a data attribute, then click uh, this and here in our auto complete controller. Instead of having the inner a text, I'm going to, uh, target, have target dataset, company id. So let's Refresh fresh, let's search for France. Tracy. It inputs the company id. Let's search in the uk, Skippy. It inputs the company id. And that's basically it. So we built models, this, uh, application where you can, uh, uh, select the country, search for a company based name or company registration number, find the company, and, uh, input the company registration number from different countries into an info field. Save it. And here have this, uh, company that is, uh, in the UK that has this company registration number. So, looks good. Thanks for watching and see you in the next one.
5
Join the conversation
Sign in to leave comments and save lessons to your watchlist.
We collect your email address, name and username to create your account. We do not share your email address with anyone else.