Improve admin page (#4121)

* Improve admin page

* Fix test

* Add spec

* Improve select style

2 files changed, 83 insertions, 2 deletions

diff --git a/app/javascript/packs/admin.js b/app/javascript/packs/admin.js
new file mode 100644
index 000000000..993827db5
--- /dev/null
+++ b/app/javascript/packs/admin.js
@@ -0,0 +1,40 @@
+import { delegate } from 'rails-ujs';
+
+function handleDeleteStatus(event) {
+  const [data] = event.detail;
+  const element = document.querySelector(`[data-id="${data.id}"]`);
+  if (element) {
+    element.parentNode.removeChild(element);
+  }
+}
+
+[].forEach.call(document.querySelectorAll('.trash-button'), (content) => {
+  content.addEventListener('ajax:success', handleDeleteStatus);
+});
+
+const batchCheckboxClassName = '.batch-checkbox input[type="checkbox"]';
+
+delegate(document, '#batch_checkbox_all', 'change', ({ target }) => {
+  [].forEach.call(document.querySelectorAll(batchCheckboxClassName), (content) => {
+    content.checked = target.checked;
+  });
+});
+
+delegate(document, batchCheckboxClassName, 'change', () => {
+  const checkAllElement = document.querySelector('#batch_checkbox_all');
+  if (checkAllElement) {
+    checkAllElement.checked = [].every.call(document.querySelectorAll(batchCheckboxClassName), (content) => content.checked);
+  }
+});
+
+delegate(document, '.media-spoiler-show-button', 'click', () => {
+  [].forEach.call(document.querySelectorAll('.activity-stream .media-spoiler-wrapper'), (content) => {
+    content.classList.add('media-spoiler-wrapper__visible');
+  });
+});
+
+delegate(document, '.media-spoiler-hide-button', 'click', () => {
+  [].forEach.call(document.querySelectorAll('.activity-stream .media-spoiler-wrapper'), (content) => {
+    content.classList.remove('media-spoiler-wrapper__visible');
+  });
+});
diff --git a/app/javascript/styles/admin.scss b/app/javascript/styles/admin.scss
index 3bc713566..4c3bbdfc5 100644
--- a/app/javascript/styles/admin.scss
+++ b/app/javascript/styles/admin.scss
@@ -253,7 +253,8 @@
   }
 }
 
-.report-status {
+.report-status,
+.account-status {
   display: flex;
   margin-bottom: 10px;
 
@@ -263,7 +264,8 @@
   }
 }
 
-.report-status__actions {
+.report-status__actions,
+.account-status__actions {
   flex: 0 0 auto;
   display: flex;
   flex-direction: column;
@@ -275,3 +277,42 @@
     margin-bottom: 10px;
   }
 }
+
+.batch-form-box {
+  display: flex;
+  margin-bottom: 10px;
+
+  #form_status_batch_action {
+    margin-right: 5px;
+    font-size: 14px;
+  }
+
+  .media-spoiler-toggle-buttons {
+    margin-left: auto;
+
+    .button {
+      overflow: visible;
+    }
+  }
+}
+
+.batch-checkbox,
+.batch-checkbox-all {
+  display: flex;
+  align-items: center;
+  margin-right: 5px;
+}
+
+.back-link {
+  margin-bottom: 10px;
+  font-size: 14px;
+
+  a {
+    color: $classic-highlight-color;
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}