Survey

components/header/MobileMenu.vue

@@ -23,7 +23,7 @@
         <nuxt-link :to="{ name: 'contact' }" tag="li">
           <a>ارتباط با ما</a>
         </nuxt-link>
-        <nuxt-link :to="{ name: 'surveys' }" tag="li">
+        <nuxt-link :to="{ name: 'survey' }" tag="li">
           <a>نظرسنجی</a>
         </nuxt-link>
         <nuxt-link :to="{ name: 'complaint' }" tag="li">

components/header/SiteHeader.vue

@@ -91,8 +91,8 @@
             </nuxt-link>
 
             <nuxt-link
-              :to="{ name: 'surveys'}"
-              :class="$route.name.includes('surveys') && 'active'"
+              :to="{ name: 'survey'}"
+              :class="$route.name.includes('survey') && 'active'"
               tag="li"
             >
               <a>نظرسنجی</a>

pages/survey/index.vue

@@ -146,119 +146,114 @@
 
           <p>مشتری گرامی شما میتوانید نظر خود را درباره خدمات ما از طریق فرم زیر با ما در میان بگذارید</p>
         </div>
-        <div class="col-lg-6 col-sm-12 p-3" style="display: flex; align-items: center;">
+        <div class="col-lg-6 col-sm-12 p-3" style="display: flex; align-items: center">
           <p>{{ config.survey }}</p>
         </div>
 
-        <div class="col-lg-4 col-sm-12 mt-4">
-          <el-input
-            v-model="form.fullName"
-            :class="validation.fullName ? 'err' : null"
-            placeholder="نام و نام خانوادگی"
-          ></el-input>
-        </div>
-        <div class="col-lg-4 col-sm-12 mt-4">
-          <el-input v-model="form.national" :class="validation.national ? 'err' : null" placeholder="کد ملی"></el-input>
-        </div>
-        <div class="col-lg-4 col-sm-12 mt-4">
-          <el-input
-            v-model="form.phoneNumber"
-            :class="validation.phoneNumber ? 'err' : null"
-            placeholder="شماره تلفن"
-          ></el-input>
-        </div>
+        <form class="form form_3" @submit.prevent="post">
+          <div v-for="item in surveyOptions" :key="item.fieldName" class="mb-5" style="width: 100%">
+            <div class="mb-3">
+              <label>{{ item.title }}</label>
+            </div>
 
-        <div class="col-lg-4 col-sm-12 mt-4">
-          <el-input v-model="form.email" :class="validation.email ? 'err' : null" placeholder="ایمیل"></el-input>
-        </div>
-        <div class="col-lg-4 col-sm-12 mt-4">
-          <el-input
-            v-model="form.receptionCode"
-            :class="validation.receptionCode ? 'err' : null"
-            placeholder="کد پذیرش"
-          ></el-input>
-        </div>
+            <el-radio-group v-model="survey[item.fieldName]">
+              <el-radio-button
+                v-for="option in surveyOptionsValues.keys()"
+                :key="option + '_Option_' + item.fieldName"
+                :label="option"
+              >
+                {{ surveyOptionsValues.get(option) }}
+              </el-radio-button>
+            </el-radio-group>
+          </div>
 
-        <div class="col-lg-12 col-sm-12 mt-4">
-          <el-input
-            v-model="form.caption"
-            :class="validation.caption ? 'err' : null"
-            type="textarea"
-            :rows="5"
-            placeholder="توضیحات"
-          >
-          </el-input>
-        </div>
+          <hr />
 
-        <div class="col-lg-12 col-sm-12 mt-4 d-flex" style="justify-content: center">
-          <el-button type="primary" @click="sendForm" round>ارسال</el-button>
-        </div>
+          <div class="formRow">
+            <label for="description">نظرات ، پیشنهادات و انتقادات (اختیاری):</label>
+            <textarea
+              id="description"
+              v-model="survey.description"
+              name="description"
+              placeholder="نظرات ، پیشنهادات و انتقادات را میتوانید اینجا بنویسید"
+              cols="30"
+              rows="10"
+            ></textarea>
+          </div>
+
+          <div class="formBtnRow">
+            <button class="btn btn-primary" type="submit" :disabled="disabledBtn">ثبت نظر</button>
+          </div>
+        </form>
       </div>
     </user-dashboard-container>
   </div>
 </template>
 
 <script>
+import { mapGetters } from 'vuex'
+
 export default {
   name: 'PublicComplaint',
 
   data() {
     return {
-      form: {
-        fullName: null,
-        national: null,
-        phoneNumber: null,
-        email: null,
-        receptionCode: null,
-        caption: null
-      },
+      survey: this.initForm(),
       validation: {},
       hasValidationError: false,
       waiting: true
     }
   },
   computed: {
+    ...mapGetters({
+      surveyOptions: 'front/surveyOptions',
+      surveyOptionsValues: 'front/surveyOptionsValues'
+    }),
+
+    disabledBtn() {
+      return (
+        !this.survey.purchasedProduct ||
+        !this.survey.guaranteeWorkFlow ||
+        !this.survey.employeeResponsibility ||
+        !this.survey.serviceQuality ||
+        !this.survey.serviceTime ||
+        !this.survey.repairQuality ||
+        !this.survey.coast
+      )
+    },
     config() {
       return this.$config
     }
   },
   mounted() {},
   methods: {
-    sendForm() {
-      this.validation = {}
-      this.hasValidationError = false
-      this.waiting = true
-
-      this.$axios
-        .post('/api/public/surveys', this.form)
-        .then(response => {
-          this.waiting = false
-
-          this.$message({
-            type: 'success',
-            message: 'با موفقیت ثبت شد'
-          })
-
-          this.form = {
-            fullName: '',
-            national: '',
-            phoneNumber: '',
-            email: '',
-            receptionCode: '',
-            caption: ''
-          }
-        })
-        .catch(error => {
-          if (error.response.status === 422) {
-            this.validation = error.response.data.validation
-            this.hasValidationError = true
-            this.waiting = false
-          } else
-            this.$message({
-              type: 'error',
-              message: error.response.data.message
-            })
-        })
+    initForm() {
+      const survey = {
+        purchasedProduct: 0,
+        guaranteeWorkFlow: 0,
+        employeeResponsibility: 0,
+        serviceQuality: 0,
+        serviceTime: 0,
+        repairQuality: 0,
+        coast: 0,
+        code: '',
+        fullName: '',
+        national: '',
+        phoneNumber: '',
+        email: '',
+        description: ''
+      }
+      return survey
+    },
+    post() {
+      if (this.disabledBtn) return
+      this.$axios.$post('/api/public/survey', { ...this.survey }).then(res => {
+        this.$message.success('با تشکر از زمانی که گذاشتید، نظر شما ثبت شد.')
+        if (this.code) {
+          return this.$router.push('/')
+        }
+        this.survey = this.initForm()
+      })
     }
   }
 }