1 1 00:00:01,000 --> 00:00:02,880 Hi guys and welcome back. 2 2 00:00:02,880 --> 00:00:04,040 In this video we're going to look 3 3 00:00:04,040 --> 00:00:07,040 at editing existing stores. 4 4 00:00:07,040 --> 00:00:10,360 It's gonna be very similar to editing alerts. 5 5 00:00:10,360 --> 00:00:13,580 Let's begin by creating a new HTML file 6 6 00:00:13,580 --> 00:00:16,923 and call it edit store dot html. 7 7 00:00:18,500 --> 00:00:20,630 And we're going to essentially copy 8 8 00:00:20,630 --> 00:00:24,323 the new store html file into it. 9 9 00:00:25,950 --> 00:00:29,230 Now if you remember what we did with edit alert, 10 10 00:00:29,230 --> 00:00:33,450 is that each of the fields where either disabled or not 11 11 00:00:33,450 --> 00:00:36,480 but they had a value property 12 12 00:00:36,480 --> 00:00:39,550 and this value shows something currently typed 13 13 00:00:39,550 --> 00:00:43,160 into the field as opposed to the place holder 14 14 00:00:43,160 --> 00:00:45,360 which only shows something that 15 15 00:00:45,360 --> 00:00:47,950 could be typed into the field. 16 16 00:00:47,950 --> 00:00:50,580 By having the value already on the field 17 17 00:00:50,580 --> 00:00:52,910 it means the user's more likely to understand 18 18 00:00:52,910 --> 00:00:56,200 that they can change that or that they can just leave it 19 19 00:00:56,200 --> 00:00:57,800 if they don't want to change it. 20 20 00:00:58,760 --> 00:01:02,960 We're going to do the same with the edit store file. 21 21 00:01:02,960 --> 00:01:04,860 We're going to leave the place holders 22 22 00:01:04,860 --> 00:01:07,620 because they still appear if the user deletes everything 23 23 00:01:07,620 --> 00:01:11,633 from the field but we're also going to add the value. 24 24 00:01:12,800 --> 00:01:15,480 And the value in the name field 25 25 00:01:15,480 --> 00:01:17,653 is going to be store dot name. 26 26 00:01:19,060 --> 00:01:22,210 Then we're gonna move over to the URL prefix 27 27 00:01:22,210 --> 00:01:26,163 and we're going to have a value here as well. 28 28 00:01:30,360 --> 00:01:32,370 And notice how I'm leaving the aria 29 29 00:01:32,370 --> 00:01:35,570 dash described by property until the end. 30 30 00:01:35,570 --> 00:01:37,050 That's just personal preference, 31 31 00:01:37,050 --> 00:01:38,897 you don't have to leave it 'til the end. 32 32 00:01:38,897 --> 00:01:41,350 The order of these properties doesn't matter at all 33 33 00:01:41,350 --> 00:01:44,950 in HTML actually but I just like that at the end 34 34 00:01:44,950 --> 00:01:47,570 because I like my accessibility properties to be there. 35 35 00:01:47,570 --> 00:01:49,173 Just a little bit easier to see. 36 36 00:01:59,300 --> 00:02:03,330 Good, so I've also added the tag name and the query here 37 37 00:02:03,330 --> 00:02:07,420 as well and that's pretty much everything we need. 38 38 00:02:07,420 --> 00:02:08,890 The next thing is to decide whether 39 39 00:02:08,890 --> 00:02:11,560 we wanna disable any fields or not. 40 40 00:02:11,560 --> 00:02:14,860 In this case I'm going to choose not to disable any fields 41 41 00:02:14,860 --> 00:02:17,730 but of course if you think your application requires 42 42 00:02:17,730 --> 00:02:20,050 some fields to be disabled because you don't wanna change 43 43 00:02:20,050 --> 00:02:22,710 some of them, that's totally fine. 44 44 00:02:22,710 --> 00:02:26,323 I would think about disabling the name field, 45 45 00:02:27,190 --> 00:02:29,850 just because usually when you have a store 46 46 00:02:29,850 --> 00:02:31,623 and you change the name, that sort of turns it 47 47 00:02:31,623 --> 00:02:33,700 into an entirely different store 48 48 00:02:33,700 --> 00:02:35,870 but I'm gonna leave it just in case 49 49 00:02:35,870 --> 00:02:38,680 somebody puts a URL and then it turns out 50 50 00:02:38,680 --> 00:02:41,710 that that store is just valid for the UK 51 51 00:02:41,710 --> 00:02:43,530 and then they wanna make a new one for the US, 52 52 00:02:43,530 --> 00:02:46,130 they can change the name and all that stuff. 53 53 00:02:46,130 --> 00:02:47,830 So I'm just gonna leave it as that, 54 54 00:02:47,830 --> 00:02:50,130 but of course you know how to change it 55 55 00:02:50,130 --> 00:02:52,313 if you do wanted some to be disabled. 56 56 00:02:53,520 --> 00:02:55,500 Now in the store index dot html 57 57 00:02:55,500 --> 00:02:58,940 we're going to also have to include a button 58 58 00:02:58,940 --> 00:03:03,940 so that our users can go and reach this edit store page. 59 59 00:03:05,400 --> 00:03:08,410 Very similar to the index in the alerts 60 60 00:03:08,410 --> 00:03:11,550 where we have this a tag here 61 61 00:03:11,550 --> 00:03:14,550 with this class btn, btn dash secondary. 62 62 00:03:14,550 --> 00:03:16,960 We're going to copy that and go into the store index, 63 63 00:03:16,960 --> 00:03:21,793 paste it in here and just make sure that the URL is correct. 64 64 00:03:26,060 --> 00:03:27,920 Make sure the store underscore id 65 65 00:03:27,920 --> 00:03:30,330 equals store dot underscore id as well, 66 66 00:03:30,330 --> 00:03:33,573 since that is what we iterating over. 67 67 00:03:34,710 --> 00:03:38,010 That's it, we're ready to go over to the view 68 68 00:03:38,010 --> 00:03:42,670 and add our edit inpoint here. 69 69 00:03:42,670 --> 00:03:45,300 Just like we did we the alert edit, 70 70 00:03:45,300 --> 00:03:47,810 make sure to take in a store id 71 71 00:03:47,810 --> 00:03:51,940 and to have the get and post methods available. 72 72 00:03:51,940 --> 00:03:53,440 And we'll do a couple of things. 73 73 00:03:53,440 --> 00:03:55,710 Get the store by id and then 74 74 00:03:55,710 --> 00:03:58,030 if it requests method, is post. 75 75 00:03:58,030 --> 00:04:00,830 We're going to deal with the formed data. 76 76 00:04:00,830 --> 00:04:03,350 Otherwise we're gonna return the template 77 77 00:04:03,350 --> 00:04:06,313 with the store that we loaded from the database. 78 78 00:04:07,800 --> 00:04:11,370 Dealing with the formed data means getting name url prefix, 79 79 00:04:11,370 --> 00:04:14,530 tag name and query from the form. 80 80 00:04:14,530 --> 00:04:16,330 When you're dealing with the query make sure 81 81 00:04:16,330 --> 00:04:19,830 to use json load s as we did above 82 82 00:04:19,830 --> 00:04:20,970 when we're creating stores. 83 83 00:04:20,970 --> 00:04:22,490 We will need that in order to turn 84 84 00:04:22,490 --> 00:04:25,593 the string into a Python dictionary. 85 85 00:04:28,740 --> 00:04:31,090 Now we've loaded the store from the database 86 86 00:04:31,090 --> 00:04:33,280 so all we have to do is modify it. 87 87 00:04:33,280 --> 00:04:35,420 So we'll say store name is name, 88 88 00:04:35,420 --> 00:04:38,170 store URL prefix is url prefix 89 89 00:04:40,330 --> 00:04:43,180 and so on for the rest of the properties. 90 90 00:04:43,180 --> 00:04:45,090 And the reason we are doing this 91 91 00:04:45,090 --> 00:04:47,860 and not sort of selecting only the ones 92 92 00:04:47,860 --> 00:04:52,860 that have changed is because it name remains the same 93 93 00:04:53,210 --> 00:04:55,990 as the current name then doing this doesn't make 94 94 00:04:55,990 --> 00:04:57,840 a difference, it doesn't change anything. 95 95 00:04:57,840 --> 00:05:00,290 So we can do this for all the properties in the store 96 96 00:05:00,290 --> 00:05:02,590 and if they've changed, then they will 97 97 00:05:02,590 --> 00:05:04,120 be changed in the store object. 98 98 00:05:04,120 --> 00:05:07,110 If they haven't changed, if they've been kept the same, 99 99 00:05:07,110 --> 00:05:09,580 that means that this value and this value will be the same. 100 100 00:05:09,580 --> 00:05:13,020 So doing this change doesn't actually make a difference. 101 101 00:05:13,020 --> 00:05:15,920 Finally we'll save to mongoDB 102 102 00:05:15,920 --> 00:05:20,370 and then here, we're actually going to return a redirect 103 103 00:05:22,070 --> 00:05:25,320 to the index and now this is slightly different 104 104 00:05:25,320 --> 00:05:27,230 than what we did for the alerts 105 105 00:05:28,450 --> 00:05:31,360 because there's not gonna be that many stores 106 106 00:05:31,360 --> 00:05:33,830 so changing a store, I'm thinking, 107 107 00:05:33,830 --> 00:05:36,790 is going to be a less popular operation. 108 108 00:05:36,790 --> 00:05:39,100 So you're not gonna be like changing all your stores 109 109 00:05:39,100 --> 00:05:41,720 or making changes throughout the entire application. 110 110 00:05:41,720 --> 00:05:43,810 You may go in and change a single store 111 111 00:05:43,810 --> 00:05:45,200 and that will be you. 112 112 00:05:45,200 --> 00:05:48,210 So when you change a store you maybe don't want to go back 113 113 00:05:48,210 --> 00:05:53,210 into a specific store or even changing another store. 114 114 00:05:53,330 --> 00:05:55,350 So just go back to the index and you can see 115 115 00:05:55,350 --> 00:05:57,810 all your stores and that's it. 116 116 00:05:57,810 --> 00:06:02,030 Then at the end we will return a redirect of the URL 117 117 00:06:02,030 --> 00:06:05,083 for the index which takes you back to the list of stores. 118 118 00:06:06,720 --> 00:06:10,480 Alright, that's everything we need to do to edit stores. 119 119 00:06:10,480 --> 00:06:14,500 If we go over to the index, we will see now a button 120 120 00:06:14,500 --> 00:06:18,200 on each store that we can click to make changes 121 121 00:06:18,200 --> 00:06:21,120 but the most important part of this video is for you 122 122 00:06:21,120 --> 00:06:26,120 to take away how simple it is to add something like this. 123 123 00:06:26,320 --> 00:06:29,350 We've done most of the work and now if we want to deal 124 124 00:06:29,350 --> 00:06:31,900 with another form, some more data, 125 125 00:06:31,900 --> 00:06:33,460 all we have to do is write the form, 126 126 00:06:33,460 --> 00:06:36,760 which is very similar to the store creation form. 127 127 00:06:36,760 --> 00:06:38,930 Make sure that a user can access it, 128 128 00:06:38,930 --> 00:06:41,480 and then deal with that data and do something with it. 129 129 00:06:41,480 --> 00:06:43,650 In this case we are taking it and changing a store 130 130 00:06:43,650 --> 00:06:46,130 that we've got from the database and then we're saving 131 131 00:06:46,130 --> 00:06:50,070 that again because the store underscore id property 132 132 00:06:50,070 --> 00:06:53,140 remains unchanged when we save to mongo, 133 133 00:06:53,140 --> 00:06:55,860 then it's actually going to make an update. 134 134 00:06:55,860 --> 00:06:58,690 Once again save to mongo doesn't update for 135 135 00:06:58,690 --> 00:07:01,480 that underscore id property, so that is 136 136 00:07:01,480 --> 00:07:04,650 how the update happens and whenever we take a new store, 137 137 00:07:04,650 --> 00:07:08,100 this doesn't exist so we're actually doing an insert, 138 138 00:07:08,100 --> 00:07:11,453 since that doe have the upsert equal true flag. 139 139 00:07:12,920 --> 00:07:14,170 That's everything for this video. 140 140 00:07:14,170 --> 00:07:16,993 Thank you for joining me, see you on the next one.