Merge pull request #331 from jabardigitalservice/feat/popup-confirmat…

…ion-redirect-hotline-jabar feat : slicing popup confirmation redirect hotline jabar
jabardigitalservice · Oct 11, 2024 · 12910a6 · 12910a6
2 parents 3737614 + 349ed9a
commit 12910a6
Show file tree

Hide file tree

Showing 4 changed files with 195 additions and 105 deletions.
diff --git a/components/Aduan/index.vue b/components/Aduan/index.vue
@@ -157,7 +157,15 @@
                   @verify="
                     showPopupConfirmationVerificationComplaintHandle(item)
                   "
-                  @failed="showPopupConfirmationFailedComplaintHandle(item)"
+                  @failed="
+                    showPopupConfirmationComplaint(item, 'failedComplaint')
+                  "
+                  @redirect-hotline-jabar="
+                    showPopupConfirmationComplaint(
+                      item,
+                      'redirectHotlineComplaint'
+                    )
+                  "
                   @add-span="showPopupInputIdSpanHandle(item)"
                   @process-complaint="showPopupProcessComplaintHandle(item)"
                   @change-authority="showPopupChangeAuthority(item)"
@@ -189,6 +197,12 @@
       @close="closePopupHandle()"
       @submit="submitPopupComplaintHandle"
     />
+    <!-- <DialogInputTextArea
+      :data-dialog="dataDialog"
+      :show-popup="isShowPopupConfirmationRedirectHotlineJabar"
+      @close="closePopupHandle()"
+      @submit="submitRedirectHotlineJabar"
+    /> -->
     <DialogInputText
       :data-dialog="dataDialog"
       :show-popup="isShowPopupInputIdSpan"
@@ -296,6 +310,12 @@ export default {
           complaintType: [typeAduan.aduanMasuk.props],
           complaintStatus: [complaintStatus.unverified.id],
         },
+        {
+          menu: 'Dialihkan ke Hotline Jabar',
+          value: 'redirect-hotline-jabar',
+          complaintType: [typeAduan.aduanMasuk.props],
+          complaintStatus: [complaintStatus.unverified.id],
+        },
         {
           menu: 'Tambahkan ID SP4N Lapor',
           value: 'add-span',

diff --git a/components/Base/Dialog/FooterNew/index.vue b/components/Base/Dialog/FooterNew/index.vue
@@ -4,7 +4,7 @@
       <slot>
         <div class="mr-4">
           <jds-button
-            label="Batal"
+            label="Batalkan"
             type="button"
             variant="secondary"
             class="!text-[14px] !font-bold"

diff --git a/components/Dialog/InputTextArea/index.vue b/components/Dialog/InputTextArea/index.vue
@@ -1,36 +1,50 @@
 <template>
-  <BaseDialog :show-popup="showPopup">
-    <BaseDialogPanel>
-      <BaseDialogHeader :title="dataDialog.title" />
-      <div class="px-6 pb-6">
-        <ValidationObserver ref="form">
-          <form>
-            <BaseDialogDescription :description="dataDialog.description" :sub-description="dataDialog.subDescription" />
-            <div class="mt-4">
-              <ValidationProvider v-slot="{errors}" :name="dataDialog.labelTextArea" rules="required">
-                <label class="text-[15px] text-gray-800 font-lato">{{ dataDialog.labelTextArea }}</label><br>
-                <div class="mt-1">
-                  <textarea
-                    v-model="fieldTextArea"
-                    :class="{ 'border border-red-600': (isInputDirty || isSubmit) && errors[0] }"
-                    :placeholder="dataDialog.placeholder"
-                    maxlength="255"
-                    class="w-[462px] h-[83px] border border-gray-300 rounded-lg focus:outline-none px-2 py-[10px] placeholder:text-[14px] placeholder:font-lato"
-                  />
-                </div>
-
-                <small v-show="(isInputDirty || isSubmit) && errors[0]" class="text-red-600">{{ errors[0] }}</small>
-              </ValidationProvider>
-              <p class="text-xs text-gray-600">
-                Tersisa {{ 255 - fieldTextArea.length }} Karakter
-              </p>
-            </div>
-          </form>
-        </ValidationObserver>
-      </div>
-      <BaseDialogFooter :label-button-submit=" dataDialog.labelButtonSubmit" @close="closePopupHandle()" @submit="submitConfirmationFaileComplaintdHandle()" />
-    </BaseDialogPanel>
-  </BaseDialog>
+  <ValidationObserver v-slot="{ invalid }" ref="form">
+    <BaseDialogFrame :name="dataDialog.name" @close="closePopup()">
+      <BaseDialogPanel>
+        <BaseDialogHeader :title="dataDialog.title" />
+        <div class="px-6 pb-6">
+          <BaseDialogDescription
+            :description="dataDialog.description"
+            :sub-description="dataDialog.subDescription"
+          />
+          <ValidationProvider
+            v-slot="{ errors }"
+            :name="dataDialog.labelTextArea"
+            rules="required"
+            tag="div"
+            class="mt-4"
+          >
+            <BaseTextArea
+              v-model="fieldTextArea"
+              :placeholder="dataDialog.placeholder"
+              :label="dataDialog.labelTextArea"
+              class="text-area"
+              :error-message="errors[0]"
+              maxlength="255"
+            />
+          </ValidationProvider>
+          <p class="mt-1 text-xs text-gray-600">
+            Tersisa {{ 255 - fieldTextArea.length }} Karakter
+          </p>
+        </div>
+        <BaseDialogFooterNew
+          :name="dataDialog.name"
+          @cancel="closePopup(invalid)"
+        >
+          <template #button-right>
+            <jds-button
+              :label="dataDialog.labelButtonSubmit"
+              type="button"
+              variant="primary"
+              :disabled="invalid"
+              @click="submitConfirmationComplaint()"
+            />
+          </template>
+        </BaseDialogFooterNew>
+      </BaseDialogPanel>
+    </BaseDialogFrame>
+  </ValidationObserver>
 </template>
 
 <script>
@@ -41,44 +55,38 @@ export default {
   props: {
     showPopup: {
       type: Boolean,
-      default: false
+      default: false,
     },
     dataDialog: {
       type: Object,
-      default: () => ({})
-    }
+      default: () => ({}),
+    },
   },
-  data () {
+  data() {
     return {
       fieldTextArea: '',
-      isInputDirty: false, // for check if user has typing something or no
-      isSubmit: false
-    }
-  },
-  watch: {
-    fieldTextArea () {
-      if (this.fieldTextArea.length > 0) {
-        this.isInputDirty = true
-      }
     }
   },
   methods: {
-    async submitConfirmationFaileComplaintdHandle () {
+    async submitConfirmationComplaint() {
       this.isSubmit = true
       const isDataValid = await this.$refs.form.validate()
       if (isDataValid) {
         this.$emit('submit', { ...this.dataDialog, note: this.fieldTextArea })
-        this.fieldTextArea = ''
-        this.isInputDirty = false
-        this.isSubmit = false
+        this.closePopup()
       }
     },
-    closePopupHandle () {
-      this.isInputDirty = false
-      this.isSubmit = false
+    closePopup() {
       this.fieldTextArea = ''
-      this.$emit('close')
-    }
-  }
+      this.$refs.form.reset()
+      this.$store.commit('modals/CLOSEALL')
+    },
+  },
 }
 </script>
+
+<style scoped>
+.text-area::v-deep .input-wrapper {
+  @apply !h-[83px] !w-[462px] !bg-white;
+}
+</style>