diff options
Diffstat (limited to 'day9/task5_vue/src/components')
| -rw-r--r-- | day9/task5_vue/src/components/EditFormBox.vue | 104 |
1 files changed, 87 insertions, 17 deletions
diff --git a/day9/task5_vue/src/components/EditFormBox.vue b/day9/task5_vue/src/components/EditFormBox.vue index 72d09fe..46438d4 100644 --- a/day9/task5_vue/src/components/EditFormBox.vue +++ b/day9/task5_vue/src/components/EditFormBox.vue @@ -5,46 +5,50 @@ <div class="formRow"> <div class="formRow-label">service_id</div> - <div class="formRow-input" v-if="formType === 'update'"> - <input type="text" name="service_id" class="formInput" readonly="readonly" v-bind:value="tableRow['service_id']"> - </div> - <div class="formRow-input" v-else-if="formType === 'create'"> - <input type="text" name="service_id" class="formInput" v-bind:value="tableRow['service_id']"> + <div class="formRow-input"> + <input + v-if="formType === 'update'" + type="text" ref="service_id" class="formInput" + readonly="readonly" v-bind:value="tableRow['service_id']"> + <input + v-else-if="formType === 'create'" + type="text" ref="service_id" class="formInput" + v-bind:value="tableRow['service_id']"> </div> </div> <div class="formRow"> <div class="formRow-label"> servtype </div> <div class="formRow-input"> - <input type="text" name="servtype" class="formInput" v-bind:value="tableRow['servtype']"> + <input type="text" ref="servtype" class="formInput" v-bind:value="tableRow['servtype']"> </div> </div> <div class="formRow"> <div class="formRow-label"> subtype </div> <div class="formRow-input"> - <input type="text" name="subtype" class="formInput" v-bind:value="tableRow['subtype']"> + <input type="text" ref="subtype" class="formInput" v-bind:value="tableRow['subtype']"> </div> </div> <div class="formRow"> <div class="formRow-label"> user_id </div> <div class="formRow-input"> - <input type="text" name="user_id" class="formInput" v-bind:value="tableRow['user_id']"> + <input type="text" ref="user_id" class="formInput" v-bind:value="tableRow['user_id']"> </div> </div> <div class="formRow"> <div class="formRow-label"> referrer_user_id </div> <div class="formRow-input"> - <input type="text" name="referrer_user_id" class="formInput" v-bind:value="tableRow['referrer_user_id']"> + <input type="text" ref="referrer_user_id" class="formInput" v-bind:value="tableRow['referrer_user_id']"> </div> </div> <div class="formRow"> <div class="formRow-label"> state </div> <div class="formRow-input"> - <select name="state" v-bind:value="tableRow['state']"> + <select ref="state" v-bind:value="tableRow['state']"> <option>N</option> <option>A</option> <option>S</option> @@ -57,13 +61,13 @@ <div class="formRow"> <div class="formRow-label"> creation_date </div> <div class="formRow-input"> - <input type="date" name="creation_date" class="formInput" v-bind:value="tableRow['creation_date']"> + <input type="date" ref="creation_date" class="formInput" v-bind:value="tableRow['creation_date']"> </div> </div> <div class="formRow"> <div class="formRow-label"> creation_time </div> <div class="formRow-input"> - <input type="time" name="creation_time" class="formInput" v-bind:value="tableRow['creation_time']"> + <input type="time" ref="creation_time" class="formInput" v-bind:value="tableRow['creation_time']"> </div> </div> @@ -71,28 +75,31 @@ <div class="formRow-label"> creation_request_sent_date </div> <div class="formRow-input" style="display: flex; flex-direction: row"> <input - type="date" name="creation_request_sent_date" + type="date" ref="creation_request_sent_date" class="formInput" style="width: 50%;" v-bind:value="tableRow['creation_request_sent_date'].split(' ')[0]"> <input - type="time" name="creation_request_sent_time" + type="time" ref="creation_request_sent_time" class="formInput" style="width: 50%;" v-bind:value="tableRow['creation_request_sent_date'].split(' ')[1]"> </div> + <div class="formRow-error" v-if="validationResponse.creation_request_sent_date !== null"> + {{ validationResponse.creation_request_sent_date }} + </div> </div> <div class="formRow"> <div class="formRow-label"> notified_about_expiration </div> <div class="formRow-input"> - <input type="text" name="notified_about_expiration" class="formInput" v-bind:value="tableRow['notified_about_expiration']"> + <input type="text" ref="notified_about_expiration" class="formInput" v-bind:value="tableRow['notified_about_expiration']"> </div> </div> <div class="formButtons"> <button type="button" @click="cancelCallback">Cancel</button> - <button type="submit" v-if="formType === 'update'">Update</button> - <button type="submit" v-else-if="formType === 'create'">Create</button> + <button type="button" v-if="formType === 'update'" @click="submitForm">Update</button> + <button type="button" v-else-if="formType === 'create'" @click="submitForm">Create</button> </div> </form> </div> @@ -100,16 +107,74 @@ </template> <script> + import axios from 'axios'; + export default { name: "EditFormBox", props: ['formType', 'cancelCallback', 'tableRow'], + data() { + return { + validationResponse: { + error: false, + service_id: null, servtype: null, + subtype: null, user_id: null, + referrer_user_id: null, + state: null, creation_date: null, + creation_time: null, + creation_request_sent_date: null, + notified_about_expiration: null + } + } + }, + mounted() { let action = ''; if (this.formType === 'create') action = '/api/add'; else if (this.formType === 'update') action = '/api/update'; this.$refs.tableForm.action = action; + }, + + methods: { + submitForm() { + let creation_date = this.$refs.creation_request_sent_date.value; + let creation_time = this.$refs.creation_request_sent_time.value; + + let formData = { + service_id: parseInt(this.$refs.service_id.value), + servtype: this.$refs.servtype.value, + subtype: this.$refs.subtype.value, + user_id: parseInt(this.$refs.user_id.value), + referrer_user_id: parseInt(this.$refs.referrer_user_id.value), + state: this.$refs.state.value, + creation_date: this.$refs.creation_date.value, + creation_time: this.$refs.creation_time.value, + creation_request_sent_date: (creation_date + ' ' + creation_time), + notified_about_expiration: parseInt(this.$refs.notified_about_expiration.value) + }; + + axios + .request({ + url: '/validate/', + method: 'post', + headers: {'Content-Type': 'application/json'}, + data: JSON.stringify(formData) + }) + .then(response => { + this.validationResponse = response.data; + }); + + if (this.validationResponse.error !== null) { + axios + .request({ + url: '/api/update/', + method: 'post', + headers: {'Content-Type': 'application/json'}, + data: JSON.stringify(formData) + }) + } + } } } </script> @@ -154,6 +219,11 @@ background-color: #fbfbfb; } + .formRow-error { + font-size: 15px; + color: #ff0000; + } + .formButtons { display: flex; flex-direction: row; |