From 50d9ed00078e400ccd0ddc2ca38044c1fe70c1db Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Sat, 28 Sep 2019 16:35:39 -0400
Subject: reset post status form only when reply user is changed

---
 .../post_status_modal/post_status_modal.js         | 25 ++++++++++++++++++----
 1 file changed, 21 insertions(+), 4 deletions(-)

(limited to 'src/components/post_status_modal/post_status_modal.js')

diff --git a/src/components/post_status_modal/post_status_modal.js b/src/components/post_status_modal/post_status_modal.js
index 1033ba11..38258296 100644
--- a/src/components/post_status_modal/post_status_modal.js
+++ b/src/components/post_status_modal/post_status_modal.js
@@ -1,24 +1,41 @@
 import PostStatusForm from '../post_status_form/post_status_form.vue'
+import get from 'lodash/get'
 
 const PostStatusModal = {
   components: {
     PostStatusForm
   },
+  data () {
+    return {
+      resettingForm: false
+    }
+  },
   computed: {
     isLoggedIn () {
       return !!this.$store.state.users.currentUser
     },
-    isOpen () {
-      return this.isLoggedIn && this.$store.state.postStatus.modalActivated
+    modalActivated () {
+      return this.$store.state.postStatus.modalActivated
+    },
+    isFormVisible () {
+      return this.isLoggedIn && !this.resettingForm && this.modalActivated
     },
     params () {
       return this.$store.state.postStatus.params || {}
     }
   },
   watch: {
-    isOpen (val) {
+    params (newVal, oldVal) {
+      if (get(newVal, 'repliedUser.id') !== get(oldVal, 'repliedUser.id')) {
+        this.resettingForm = true
+        this.$nextTick(() => {
+          this.resettingForm = false
+        })
+      }
+    },
+    isFormVisible (val) {
       if (val) {
-        this.$nextTick(() => this.$el.querySelector('textarea').focus())
+        this.$nextTick(() => this.$el && this.$el.querySelector('textarea').focus())
       }
     }
   },
-- 
cgit v1.2.3-70-g09d2


From 348d6664eb07d4854ad4266873ad423091658187 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Fri, 18 Oct 2019 07:05:01 -0400
Subject: refactor all kind of modals using the modal component

---
 src/components/media_modal/media_modal.js             |  4 +++-
 src/components/media_modal/media_modal.vue            | 13 ++++---------
 src/components/post_status_modal/post_status_modal.js |  4 +++-
 .../post_status_modal/post_status_modal.vue           | 18 +++++-------------
 .../user_reporting_modal/user_reporting_modal.js      |  5 ++++-
 .../user_reporting_modal/user_reporting_modal.vue     | 19 ++++---------------
 6 files changed, 23 insertions(+), 40 deletions(-)

(limited to 'src/components/post_status_modal/post_status_modal.js')

diff --git a/src/components/media_modal/media_modal.js b/src/components/media_modal/media_modal.js
index 992d7129..4832abda 100644
--- a/src/components/media_modal/media_modal.js
+++ b/src/components/media_modal/media_modal.js
@@ -1,11 +1,13 @@
 import StillImage from '../still-image/still-image.vue'
 import VideoAttachment from '../video_attachment/video_attachment.vue'
+import Modal from '../modal/modal.vue'
 import fileTypeService from '../../services/file_type/file_type.service.js'
 
 const MediaModal = {
   components: {
     StillImage,
-    VideoAttachment
+    VideoAttachment,
+    Modal
   },
   computed: {
     showing () {
diff --git a/src/components/media_modal/media_modal.vue b/src/components/media_modal/media_modal.vue
index 06ced5a1..69e75e2b 100644
--- a/src/components/media_modal/media_modal.vue
+++ b/src/components/media_modal/media_modal.vue
@@ -1,9 +1,8 @@
 <template>
-  <div
+  <Modal
     v-if="showing"
-    v-body-scroll-lock="showing"
-    class="modal-view media-modal-view"
-    @click.prevent="hide"
+    class="media-modal-view"
+    @close="hide"
   >
     <img
       v-if="type === 'image'"
@@ -33,7 +32,7 @@
     >
       <i class="icon-right-open arrow-icon" />
     </button>
-  </div>
+  </Modal>
 </template>
 
 <script src="./media_modal.js"></script>
@@ -44,10 +43,6 @@
 .media-modal-view {
   z-index: 1001;
 
-  body:not(.scroll-locked) & {
-    display: none;
-  }
-
   &:hover {
     .modal-view-button-arrow {
       opacity: 0.75;
diff --git a/src/components/post_status_modal/post_status_modal.js b/src/components/post_status_modal/post_status_modal.js
index 38258296..b44354db 100644
--- a/src/components/post_status_modal/post_status_modal.js
+++ b/src/components/post_status_modal/post_status_modal.js
@@ -1,9 +1,11 @@
 import PostStatusForm from '../post_status_form/post_status_form.vue'
+import Modal from '../modal/modal.vue'
 import get from 'lodash/get'
 
 const PostStatusModal = {
   components: {
-    PostStatusForm
+    PostStatusForm,
+    Modal
   },
   data () {
     return {
diff --git a/src/components/post_status_modal/post_status_modal.vue b/src/components/post_status_modal/post_status_modal.vue
index b5e75de7..06ef0a35 100644
--- a/src/components/post_status_modal/post_status_modal.vue
+++ b/src/components/post_status_modal/post_status_modal.vue
@@ -1,15 +1,11 @@
 <template>
-  <div
+  <Modal
     v-if="isLoggedIn && !resettingForm"
     v-show="modalActivated"
-    v-body-scroll-lock="modalActivated"
-    class="post-form-modal-view modal-view"
-    @click="closeModal"
+    class="post-form-modal-view"
+    @close="closeModal"
   >
-    <div
-      class="post-form-modal-panel panel"
-      @click.stop=""
-    >
+    <div class="post-form-modal-panel panel">
       <div class="panel-heading">
         {{ $t('post_status.new_status') }}
       </div>
@@ -19,7 +15,7 @@
         @posted="closeModal"
       />
     </div>
-  </div>
+  </Modal>
 </template>
 
 <script src="./post_status_modal.js"></script>
@@ -29,10 +25,6 @@
 
 .post-form-modal-view {
   align-items: flex-start;
-
-  body:not(.scroll-locked) & {
-    display: none;
-  }
 }
 
 .post-form-modal-panel {
diff --git a/src/components/user_reporting_modal/user_reporting_modal.js b/src/components/user_reporting_modal/user_reporting_modal.js
index 7c6ea409..3fb96384 100644
--- a/src/components/user_reporting_modal/user_reporting_modal.js
+++ b/src/components/user_reporting_modal/user_reporting_modal.js
@@ -2,12 +2,14 @@
 import Status from '../status/status.vue'
 import List from '../list/list.vue'
 import Checkbox from '../checkbox/checkbox.vue'
+import Modal from '../modal/modal.vue'
 
 const UserReportingModal = {
   components: {
     Status,
     List,
-    Checkbox
+    Checkbox,
+    Modal
   },
   data () {
     return {
@@ -51,6 +53,7 @@ const UserReportingModal = {
       this.error = false
     },
     closeModal () {
+      console.log('closeModal clicked')
       this.$store.dispatch('closeUserReportingModal')
     },
     reportUser () {
diff --git a/src/components/user_reporting_modal/user_reporting_modal.vue b/src/components/user_reporting_modal/user_reporting_modal.vue
index ecbc1369..0dce4c55 100644
--- a/src/components/user_reporting_modal/user_reporting_modal.vue
+++ b/src/components/user_reporting_modal/user_reporting_modal.vue
@@ -1,14 +1,9 @@
 <template>
-  <div
+  <Modal
     v-if="isOpen"
-    v-body-scroll-lock="isOpen"
-    class="modal-view user-reporting-modal-view"
-    @click="closeModal"
+    @close="closeModal"
   >
-    <div
-      class="user-reporting-panel panel"
-      @click.stop=""
-    >
+    <div class="user-reporting-panel panel">
       <div class="panel-heading">
         <div class="title">
           {{ $t('user_reporting.title', [user.screen_name]) }}
@@ -70,7 +65,7 @@
         </div>
       </div>
     </div>
-  </div>
+  </Modal>
 </template>
 
 <script src="./user_reporting_modal.js"></script>
@@ -78,12 +73,6 @@
 <style lang="scss">
 @import '../../_variables.scss';
 
-.user-reporting-modal-view {
-  body:not(.scroll-locked) & {
-    display: none;
-  }
-}
-
 .user-reporting-panel {
   width: 90vw;
   max-width: 700px;
-- 
cgit v1.2.3-70-g09d2