From 9f99dea72fbe466d5f164664604e6f3543e038e9 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Wed, 2 Oct 2019 14:56:24 +0300
Subject: [PATCH] Extract status into separate view

---
 .../reports/components/GroupedReport.vue      |   8 +-
 src/views/reports/components/Report.vue       |   8 +-
 src/views/reports/components/Statuses.vue     | 173 ------------------
 src/views/status/Status.vue                   | 171 +++++++++++++++++
 4 files changed, 181 insertions(+), 179 deletions(-)
 delete mode 100644 src/views/reports/components/Statuses.vue
 create mode 100644 src/views/status/Status.vue

diff --git a/src/views/reports/components/GroupedReport.vue b/src/views/reports/components/GroupedReport.vue
index f304a87d..43d153f6 100644
--- a/src/views/reports/components/GroupedReport.vue
+++ b/src/views/reports/components/GroupedReport.vue
@@ -40,7 +40,9 @@
       <div v-if="group.status">
         <div class="line"/>
         <span class="report-row-key">{{ $t('reports.reportedStatus') }}:</span>
-        <statuses :statuses="group.status" class="reported-status"/>
+        <div v-for="status in group.status" :key="status.id">
+          <status :status="status" class="reported-status"/>
+        </div>
       </div>
       <div v-if="group.reports">
         <div class="line"/>
@@ -57,11 +59,11 @@
 <script>
 import ModerateUserDropdown from './ModerateUserDropdown'
 import ReportCard from './ReportCard'
-import Statuses from './Statuses'
+import Status from '../../status/Status'
 
 export default {
   name: 'Report',
-  components: { ModerateUserDropdown, ReportCard, Statuses },
+  components: { ModerateUserDropdown, ReportCard, Status },
   props: {
     groups: {
       type: Array,
diff --git a/src/views/reports/components/Report.vue b/src/views/reports/components/Report.vue
index 159937db..76313a91 100644
--- a/src/views/reports/components/Report.vue
+++ b/src/views/reports/components/Report.vue
@@ -57,7 +57,9 @@
           <div v-if="report.statuses.length > 0" class="statuses">
             <el-collapse>
               <el-collapse-item :title="getStatusesTitle(report.statuses)">
-                <statuses :statuses="report.statuses" />
+                <div v-for="status in report.statuses" :key="status.id">
+                  <status :status="status" />
+                </div>
               </el-collapse-item>
             </el-collapse>
           </div>
@@ -79,12 +81,12 @@
 
 <script>
 import moment from 'moment'
-import Statuses from './Statuses'
+import Status from '../../status/Status'
 import ModerateUserDropdown from './ModerateUserDropdown'
 
 export default {
   name: 'Report',
-  components: { Statuses, ModerateUserDropdown },
+  components: { Status, ModerateUserDropdown },
   props: {
     reports: {
       type: Array,
diff --git a/src/views/reports/components/Statuses.vue b/src/views/reports/components/Statuses.vue
deleted file mode 100644
index c276af90..00000000
--- a/src/views/reports/components/Statuses.vue
+++ /dev/null
@@ -1,173 +0,0 @@
-<template>
-  <div>
-    <el-card v-for="status in statuses" :key="status.id" class="status-card">
-      <div slot="header">
-        <div class="status-header">
-          <div class="status-account-container">
-            <div class="status-account">
-              <img :src="status.account.avatar" class="status-avatar-img">
-              <h3 class="status-account-name">{{ status.account.display_name }}</h3>
-            </div>
-            <a :href="status.account.url" target="_blank" class="account">
-              @{{ status.account.acct }}
-            </a>
-          </div>
-          <div class="status-actions">
-            <el-tag v-if="status.sensitive" type="warning" size="large">{{ $t('reports.sensitive') }}</el-tag>
-            <el-tag size="large">{{ capitalizeFirstLetter(status.visibility) }}</el-tag>
-            <el-dropdown trigger="click">
-              <el-button plain size="small" icon="el-icon-edit" class="status-actions-button">
-                {{ $t('reports.changeScope') }}<i class="el-icon-arrow-down el-icon--right"/>
-              </el-button>
-              <el-dropdown-menu slot="dropdown">
-                <el-dropdown-item
-                  v-if="!status.sensitive"
-                  @click.native="changeStatus(status.id, true, status.visibility)">
-                  {{ $t('reports.addSensitive') }}
-                </el-dropdown-item>
-                <el-dropdown-item
-                  v-if="status.sensitive"
-                  @click.native="changeStatus(status.id, false, status.visibility)">
-                  {{ $t('reports.removeSensitive') }}
-                </el-dropdown-item>
-                <el-dropdown-item
-                  v-if="status.visibility !== 'public'"
-                  @click.native="changeStatus(status.id, status.sensitive, 'public')">
-                  {{ $t('reports.public') }}
-                </el-dropdown-item>
-                <el-dropdown-item
-                  v-if="status.visibility !== 'private'"
-                  @click.native="changeStatus(status.id, status.sensitive, 'private')">
-                  {{ $t('reports.private') }}
-                </el-dropdown-item>
-                <el-dropdown-item
-                  v-if="status.visibility !== 'unlisted'"
-                  @click.native="changeStatus(status.id, status.sensitive, 'unlisted')">
-                  {{ $t('reports.unlisted') }}
-                </el-dropdown-item>
-                <el-dropdown-item
-                  @click.native="deleteStatus(status.id)">
-                  {{ $t('reports.deleteStatus') }}
-                </el-dropdown-item>
-              </el-dropdown-menu>
-            </el-dropdown>
-          </div>
-        </div>
-      </div>
-      <div class="status-body">
-        <span class="status-content" v-html="status.content"/>
-        <a :href="status.url" target="_blank" class="account">
-          {{ parseTimestamp(status.created_at) }}
-        </a>
-      </div>
-    </el-card>
-  </div>
-</template>
-
-<script>
-import moment from 'moment'
-
-export default {
-  name: 'Statuses',
-  props: {
-    statuses: {
-      type: Array,
-      required: true
-    }
-  },
-  methods: {
-    capitalizeFirstLetter(str) {
-      return str.charAt(0).toUpperCase() + str.slice(1)
-    },
-    changeStatus(statusId, isSensitive, visibility) {
-      this.$store.dispatch('ChangeStatusScope', { statusId, isSensitive, visibility })
-    },
-    deleteStatus(statusId) {
-      this.$confirm('Are you sure you want to delete this status?', 'Warning', {
-        confirmButtonText: 'OK',
-        cancelButtonText: 'Cancel',
-        type: 'warning'
-      }).then(() => {
-        this.$store.dispatch('DeleteStatus', { statusId })
-        this.$message({
-          type: 'success',
-          message: 'Delete completed'
-        })
-      }).catch(() => {
-        this.$message({
-          type: 'info',
-          message: 'Delete canceled'
-        })
-      })
-    },
-    parseTimestamp(timestamp) {
-      return moment(timestamp).format('YYYY-MM-DD HH:mm')
-    }
-  }
-}
-</script>
-
-<style rel='stylesheet/scss' lang='scss'>
-  .account {
-    text-decoration: underline;
-  }
-  .status-account {
-    display: flex;
-    align-items: center;
-  }
-  .status-avatar-img {
-    width: 15px;
-    height: 15px;
-    margin-right: 5px;
-  }
-  .status-account-name {
-    margin: 0;
-    height: 22px;
-  }
-  .status-body {
-    display: flex;
-    flex-direction: column;
-  }
-  .status-content {
-    font-size: 15px;
-  }
-  .status-card {
-    margin-bottom: 15px;
-  }
-  .status-header {
-    display: flex;
-    justify-content: space-between;
-  }
-  @media
-  only screen and (max-width: 760px),
-  (min-device-width: 768px) and (max-device-width: 1024px) {
-    .el-message {
-      min-width: 80%;
-    }
-    .el-message-box {
-      width: 80%;
-    }
-    .status-card {
-      .el-card__header {
-        padding: 10px 17px;
-      }
-      .el-tag {
-        margin: 3px 4px 3px 0;
-      }
-      .status-account-container {
-        margin-bottom: 5px;
-      }
-      .status-actions-button {
-        margin: 3px 0 3px;
-      }
-      .status-actions {
-        display: flex;
-        flex-wrap: wrap;
-      }
-      .status-header {
-        display: flex;
-        flex-direction: column;
-      }
-    }
-  }
-</style>
diff --git a/src/views/status/Status.vue b/src/views/status/Status.vue
new file mode 100644
index 00000000..74bb3881
--- /dev/null
+++ b/src/views/status/Status.vue
@@ -0,0 +1,171 @@
+<template>
+  <el-card class="status-card">
+    <div slot="header">
+      <div class="status-header">
+        <div class="status-account-container">
+          <div class="status-account">
+            <img :src="status.account.avatar" class="status-avatar-img">
+            <h3 class="status-account-name">{{ status.account.display_name }}</h3>
+          </div>
+          <a :href="status.account.url" target="_blank" class="account">
+            @{{ status.account.acct }}
+          </a>
+        </div>
+        <div class="status-actions">
+          <el-tag v-if="status.sensitive" type="warning" size="large">{{ $t('reports.sensitive') }}</el-tag>
+          <el-tag size="large">{{ capitalizeFirstLetter(status.visibility) }}</el-tag>
+          <el-dropdown trigger="click">
+            <el-button plain size="small" icon="el-icon-edit" class="status-actions-button">
+              {{ $t('reports.changeScope') }}<i class="el-icon-arrow-down el-icon--right"/>
+            </el-button>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item
+                v-if="!status.sensitive"
+                @click.native="changeStatus(status.id, true, status.visibility)">
+                {{ $t('reports.addSensitive') }}
+              </el-dropdown-item>
+              <el-dropdown-item
+                v-if="status.sensitive"
+                @click.native="changeStatus(status.id, false, status.visibility)">
+                {{ $t('reports.removeSensitive') }}
+              </el-dropdown-item>
+              <el-dropdown-item
+                v-if="status.visibility !== 'public'"
+                @click.native="changeStatus(status.id, status.sensitive, 'public')">
+                {{ $t('reports.public') }}
+              </el-dropdown-item>
+              <el-dropdown-item
+                v-if="status.visibility !== 'private'"
+                @click.native="changeStatus(status.id, status.sensitive, 'private')">
+                {{ $t('reports.private') }}
+              </el-dropdown-item>
+              <el-dropdown-item
+                v-if="status.visibility !== 'unlisted'"
+                @click.native="changeStatus(status.id, status.sensitive, 'unlisted')">
+                {{ $t('reports.unlisted') }}
+              </el-dropdown-item>
+              <el-dropdown-item
+                @click.native="deleteStatus(status.id)">
+                {{ $t('reports.deleteStatus') }}
+              </el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+        </div>
+      </div>
+    </div>
+    <div class="status-body">
+      <span class="status-content" v-html="status.content"/>
+      <a :href="status.url" target="_blank" class="account">
+        {{ parseTimestamp(status.created_at) }}
+      </a>
+    </div>
+  </el-card>
+</template>
+
+<script>
+import moment from 'moment'
+
+export default {
+  name: 'Statuses',
+  props: {
+    status: {
+      type: Object,
+      required: true
+    }
+  },
+  methods: {
+    capitalizeFirstLetter(str) {
+      return str.charAt(0).toUpperCase() + str.slice(1)
+    },
+    changeStatus(statusId, isSensitive, visibility) {
+      this.$store.dispatch('ChangeStatusScope', { statusId, isSensitive, visibility })
+    },
+    deleteStatus(statusId) {
+      this.$confirm('Are you sure you want to delete this status?', 'Warning', {
+        confirmButtonText: 'OK',
+        cancelButtonText: 'Cancel',
+        type: 'warning'
+      }).then(() => {
+        this.$store.dispatch('DeleteStatus', { statusId })
+        this.$message({
+          type: 'success',
+          message: 'Delete completed'
+        })
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: 'Delete canceled'
+        })
+      })
+    },
+    parseTimestamp(timestamp) {
+      return moment(timestamp).format('YYYY-MM-DD HH:mm')
+    }
+  }
+}
+</script>
+
+<style rel='stylesheet/scss' lang='scss'>
+  .account {
+    text-decoration: underline;
+  }
+  .status-account {
+    display: flex;
+    align-items: center;
+  }
+  .status-avatar-img {
+    width: 15px;
+    height: 15px;
+    margin-right: 5px;
+  }
+  .status-account-name {
+    margin: 0;
+    height: 22px;
+  }
+  .status-body {
+    display: flex;
+    flex-direction: column;
+  }
+  .status-content {
+    font-size: 15px;
+  }
+  .status-card {
+    margin-bottom: 15px;
+  }
+  .status-header {
+    display: flex;
+    justify-content: space-between;
+  }
+  @media
+  only screen and (max-width: 760px),
+  (min-device-width: 768px) and (max-device-width: 1024px) {
+    .el-message {
+      min-width: 80%;
+    }
+    .el-message-box {
+      width: 80%;
+    }
+    .status-card {
+      .el-card__header {
+        padding: 10px 17px;
+      }
+      .el-tag {
+        margin: 3px 4px 3px 0;
+      }
+      .status-account-container {
+        margin-bottom: 5px;
+      }
+      .status-actions-button {
+        margin: 3px 0 3px;
+      }
+      .status-actions {
+        display: flex;
+        flex-wrap: wrap;
+      }
+      .status-header {
+        display: flex;
+        flex-direction: column;
+      }
+    }
+  }
+</style>