apps/userdashboard: add moderation detail page with list and comment …

…component filled with dummy data
liqd · Apr 13, 2021 · 0bb120d · 0bb120d
1 parent 5156d3d
commit 0bb120d
Show file tree

Hide file tree

Showing 9 changed files with 139 additions and 9 deletions.
diff --git a/apps/userdashboard/assets/js/a4_candy_userdashboard/ModerationComment.jsx b/apps/userdashboard/assets/js/a4_candy_userdashboard/ModerationComment.jsx
@@ -0,0 +1,60 @@
+import React, { Component } from 'react'
+import django from 'django'
+
+export default class ModerationComment extends Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      project: this.props.key
+    }
+  }
+
+  render () {
+    const postedText = django.gettext(' posted a ')
+    const offensiveText = django.gettext(' for being offensive')
+    const categoryText = django.gettext('Categories: ')
+    const blockText = django.gettext(' Block')
+    const dismissText = django.gettext(' Dismiss')
+    const replyText = django.gettext(' Reply')
+
+    return (
+      <div className="mt-5">
+        <ul className="pl-0">
+          <li className="list-item ">
+            <div className="row">
+              <div className="col-2 col-md-1">
+                <div className="user-avatar user-avatar--small user-avatar--shadow mb-1 userindicator__btn-img" />
+              </div>
+              <div className="col-7 col-md-8">
+                <div><span className="fa-stack fa-2x" aria-hidden="true"><i className="fas fa-exclamation fa-stack-1x" /><i className="far fa-circle fa-stack-2x" /></span>
+                  <a href="/">Profile name</a>
+                  <span>{postedText}<a href="/">comment link</a>{offensiveText}</span>
+                </div>
+                <div>8.4.2021, 14:09</div>
+              </div>
+            </div>
+            <div className="row">
+              <div className="a4-comments__box--comment">
+                <div className="col-12">
+                  <span className="sr-only">{categoryText}</span>
+                  <span className="badge a4-comments__badge a4-comments__badge--que">Category</span>
+                </div>
+              </div>
+            </div>
+            <div className="row">
+              <div className="col-12">
+                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliter homines, aliter philosophos loqui putas oportere? Igitur neque stultorum quisquam beatus neque sapientium non beatus.</p>
+              </div>
+            </div>
+            <div className="text-muted mt-3 d-flex justify-content-between">
+              <div><i className="fas fa-reply" aria-hidden="true" />{replyText}</div>
+              <div><i className="far fa-times-circle" aria-hidden="true" />{dismissText}</div>
+              <div><i className="fas fa-ban" aria-hidden="true" />{blockText}</div>
+            </div>
+          </li>
+        </ul>
+      </div>
+    )
+  }
+}
diff --git a/apps/userdashboard/assets/js/a4_candy_userdashboard/ModerationCommentList.jsx b/apps/userdashboard/assets/js/a4_candy_userdashboard/ModerationCommentList.jsx
@@ -0,0 +1,18 @@
+import React from 'react'
+import django from 'django'
+
+import ModerationComment from './ModerationComment'
+
+export default function (props) {
+  const byText = django.gettext('By ')
+
+  return (
+    <div className="row mb-2">
+      <div className="col-12">
+        <h1 className="m-0">project title</h1>
+        <span className="text-muted">{byText}organisation</span>
+        <ModerationComment />
+      </div>
+    </div>
+  )
+}
diff --git a/apps/userdashboard/assets/js/a4_candy_userdashboard/ModerationProjects.jsx b/apps/userdashboard/assets/js/a4_candy_userdashboard/ModerationProjects.jsx
@@ -1,8 +1,8 @@
 /* global fetch */
-import React from 'react'
+import React, { Component } from 'react'
 import django from 'django'
 
-export default class ModerationProjects extends React.Component {
+export default class ModerationProjects extends Component {
   constructor (props) {
     super(props)
 
@@ -65,10 +65,10 @@ export default class ModerationProjects extends React.Component {
     }
 
     return (
-      <div className="mb-2">
-        <h2>Projects</h2>
-        <div className="row" id="project_list">
-          <ul className="col-12">
+      <div className="row">
+        <div className="col-12">
+          <h3 className="mt-sm-0">Projects</h3>
+          <ul className="pl-0">
             {items.map(item => (
               <li key={item.title} className="tile--sm tile--horizontal">
                 <div className="tile__head">
@@ -78,7 +78,7 @@ export default class ModerationProjects extends React.Component {
                 </div>
                 <div className="tile__body">
                   <span className="text-muted">{byText}{item.organisation}</span>
-                  <h3 className="tile__title mb-4">{item.offensive > 0 && <span className="text-info">• </span>}{item.title}</h3>
+                  <h3 className="tile__title mb-4">{item.offensive > 0 && <span className="text-info">• </span>}<a href={item.detail}>{item.title}</a></h3>
                   <div>
                     {item.access === 1 && <span className="label label--dark">{publicText}</span>}
                     {item.access === 2 && <span className="label label--dark">{semiPrivateText}</span>}
@@ -93,7 +93,6 @@ export default class ModerationProjects extends React.Component {
                   </div>
                   <a href={item.url} className="tile__link"><span className="sr-only">{srLinkText}{item.title}</span></a>
                 </div>
-
               </li>
             ))}
           </ul>

diff --git a/apps/userdashboard/assets/js/a4_candy_userdashboard/react_moderation_comment_list.jsx b/apps/userdashboard/assets/js/a4_candy_userdashboard/react_moderation_comment_list.jsx
@@ -0,0 +1,18 @@
+import ModerationCommentList from './ModerationCommentList'
+import React from 'react'
+import ReactDOM from 'react-dom'
+
+function init () {
+  $('[data-aplus-widget="moderation_comment_list"]').each(function (i, element) {
+    const moderationCommentList = element.getAttribute('data-moderation-comment-list')
+    const projectApiUrl = element.getAttribute('data-project-api-url')
+    ReactDOM.render(
+      <ModerationCommentList
+        moderationCommentList={moderationCommentList}
+        projectApiUrl={projectApiUrl}
+      />,
+      element)
+  })
+}
+
+document.addEventListener('DOMContentLoaded', init, false)
diff --git a/apps/userdashboard/templates/a4_candy_userdashboard/base_userdashboard.html b/apps/userdashboard/templates/a4_candy_userdashboard/base_userdashboard.html
@@ -13,7 +13,7 @@
                 {% has_perm 'a4_candy_userdashboard.view_moderation_dashboard' user as user_is_moderator %}
                 {% if user_is_moderator %}
                 <a href="{% url 'userdashboard-moderation' %}"
-                   class="tab {% ifequal view.menu_item 'moderation' %}active{% endifequal %}">
+                   class="tab {% if view.menu_item == 'moderation' or  '/detail' in request.get_full_path %}active{% endif %}">
                     {% trans 'Moderation' %}
                 </a>
                 {% endif %}

diff --git a/apps/userdashboard/templates/a4_candy_userdashboard/userdashboard_moderation_detail.html b/apps/userdashboard/templates/a4_candy_userdashboard/userdashboard_moderation_detail.html
@@ -0,0 +1,18 @@
+{% extends "a4_candy_userdashboard/base_userdashboard.html" %}
+{% load i18n static %}
+
+{% block extra_js %}
+  {{ block.super }}
+    <script type="text/javascript" src="{% static 'moderation_comment_list.js' %}"></script>
+{% endblock %}
+
+{% block dashboard_content %}
+<a class="btn btn--none pl-0 pt-0" href="{% url 'userdashboard-moderation' %}">
+    <i class="fa fa-chevron-left" aria-hidden="true"></i>
+    <span>{% trans 'Back' %}</span>
+</a>
+<div data-aplus-widget="moderation_comment_list"
+     data-moderation-projects="{{ moderation_comment_list }}"
+     data-project-api-url="{{ project_api_url }}" >
+</div>
+{% endblock %}
diff --git a/apps/userdashboard/urls.py b/apps/userdashboard/urls.py
@@ -15,4 +15,7 @@
     url(r'^overview/following/$',
         views.UserDashboardFollowingView.as_view(),
         name='userdashboard-following'),
+    url(r'^moderation/detail/$',
+        views.UserDashboardModerationDetailView.as_view(),
+        name='userdashboard-moderation-detail'),
 ]
diff --git a/apps/userdashboard/views.py b/apps/userdashboard/views.py
@@ -88,3 +88,12 @@ def get_context_data(self, **kwargs):
         context = super().get_context_data(**kwargs)
         context['project_api_url'] = reverse('moderationprojects-list')
         return context
+
+
+class UserDashboardModerationDetailView(UserDashboardBaseMixin,
+                                        rules_mixins.PermissionRequiredMixin):
+
+    template_name = (
+        'a4_candy_userdashboard/userdashboard_moderation_detail.html'
+    )
+    permission_required = 'a4_candy_userdashboard.view_moderation_dashboard'
diff --git a/webpack.common.js b/webpack.common.js
@@ -103,6 +103,11 @@ module.exports = {
       import: [
         './apps/userdashboard/assets/js/a4_candy_userdashboard/react_moderation_projects.jsx'
       ]
+    },
+    moderation_comment_list: {
+      import: [
+        './apps/userdashboard/assets/js/a4_candy_userdashboard/react_moderation_comment_list.jsx'
+      ]
     }
   },
   output: {