add proper state switcher

3 files changed, 27 insertions, 21 deletions

diff --git a/src/components/report/report.js b/src/components/report/report.js
index 8131dd89..4d9108af 100644
--- a/src/components/report/report.js
+++ b/src/components/report/report.js
@@ -13,14 +13,19 @@ const Report = {
   computed: {
     report () {
       return this.$store.state.reports.reports[this.reportId] || {}
+    },
+    state: {
+      get: function () { return this.report.state },
+      set: function (val) { this.setReportState(val) }
     }
   },
   methods: {
     generateUserProfileLink (user) {
       return generateProfileLink(user.id, user.screen_name, this.$store.state.instance.restrictedNicknames)
     },
-    setReportState (id, state) {
-      return this.$store.dispatch('setReportState', { id, state })
+    setReportState (state) {
+      console.log('setting state', state)
+      return this.$store.dispatch('setReportState', { id: this.report.id, state })
     }
   }
 }
diff --git a/src/components/report/report.scss b/src/components/report/report.scss
index 7e9cc2b6..578b4eb1 100644
--- a/src/components/report/report.scss
+++ b/src/components/report/report.scss
@@ -2,7 +2,11 @@
 
 .Report {
   .report-content {
-    margin: 0.5em 0;
+    margin: 0.5em 0 1em;
+  }
+
+  .report-state {
+    margin: 0.5em 0 1em;
   }
 
   .reported-status {
diff --git a/src/components/report/report.vue b/src/components/report/report.vue
index 638a3aa0..4020773d 100644
--- a/src/components/report/report.vue
+++ b/src/components/report/report.vue
@@ -1,19 +1,32 @@
 <template>
   <div class="Report">
+    <div class="reported-user">
+      <span>{{ $t('report.reported_user') }}</span>
+      <router-link :to="generateUserProfileLink(report.acct)">
+        @{{ report.acct.screen_name }}
+      </router-link>
+    </div>
+    <div class="reporter">
+      <span>{{ $t('report.reporter') }}</span>
+      <router-link :to="generateUserProfileLink(report.actor)">
+        @{{ report.actor.screen_name }}
+      </router-link>
+    </div>
     <div class="report-state">
+      <span>{{ $t('report.state') }}</span>
       <label
         for="report-state"
         class="select"
       >
         <select
           id="report-state"
-          v-model="report.state"
+          v-model="state"
           class="form-control"
         >
           <option
             v-for="state in ['open', 'closed', 'resolved']"
             :key="state"
-            :value="report.state"
+            :value="state"
           >
             {{ $t('report.state_' + state) }}
           </option>
@@ -24,22 +37,6 @@
         />
       </label>
     </div>
-    <div class="reported-user">
-      <span>{{ $t('report.reported_user') }}</span>
-      <router-link :to="generateUserProfileLink(report.acct)">
-        @{{ report.acct.screen_name }}
-      </router-link>
-    </div>
-    <div class="reporter">
-      <span>{{ $t('report.reporter') }}</span>
-      <router-link :to="generateUserProfileLink(report.actor)">
-        @{{ report.actor.screen_name }}
-      </router-link>
-    </div>
-    <div class="report-state">
-      <span>{{ $t('report.state') }}</span>
-      <b>{{ $t('report.state_' + report.state) }}</b>
-    </div>
     <!-- eslint-disable vue/no-v-html -->
     <div
       class="report-content"