From 2305ced85888a23f86ecfcdfb64a3b69c4997a4c Mon Sep 17 00:00:00 2001
From: Andrew <saintruler@gmail.com>
Date: Sun, 21 Jul 2019 12:14:09 +0400
Subject: =?UTF-8?q?=D0=9F=D0=B5=D1=80=D0=B5=D0=BF=D0=B8=D1=81=D0=B0=D0=BD?=
 =?UTF-8?q?=20=D0=B1=D0=B5=D0=BA=D0=B5=D0=BD=D0=B4.=20=D0=94=D0=BE=D0=B1?=
 =?UTF-8?q?=D0=B0=D0=B2=D0=BB=D0=B5=D0=BD=D0=B0=20=D0=B2=D0=B0=D0=BB=D0=B8?=
 =?UTF-8?q?=D0=B4=D0=B0=D1=86=D0=B8=D1=8F=20=D0=BF=D1=80=D0=B8=20=D0=BE?=
 =?UTF-8?q?=D0=B1=D0=BD=D0=BE=D0=B2=D0=BB=D0=B5=D0=BD=D0=B8=D0=B8=20=D0=B7?=
 =?UTF-8?q?=D0=BD=D0=B0=D1=87=D0=B5=D0=BD=D0=B8=D0=B9=20=D0=B2=20=D1=80?=
 =?UTF-8?q?=D1=8F=D0=B4=D1=83.=20=D0=A3=D0=B4=D0=B0=D0=BB=D0=B5=D0=BD?=
 =?UTF-8?q?=D0=B0=20=D0=BF=D1=80=D0=B5=D0=B4=D1=8B=D0=B4=D1=83=D1=89=D0=B0?=
 =?UTF-8?q?=D1=8F=20=D0=B2=D0=B5=D1=80=D1=81=D0=B8=D1=8F=20=D0=BF=D1=80?=
 =?UTF-8?q?=D0=B8=D0=BB=D0=BE=D0=B6=D0=B5=D0=BD=D0=B8=D1=8F=20=D0=B1=D0=B5?=
 =?UTF-8?q?=D0=B7=20vue.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 day9/task5_vue/src/components/EditFormBox.vue | 104 +++++++++++++++++++++-----
 1 file changed, 87 insertions(+), 17 deletions(-)

(limited to 'day9/task5_vue/src')

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;
-- 
cgit v1.2.3