From 700092c4f9ed97f46a1425ad88c4af0433725c7c Mon Sep 17 00:00:00 2001
From: Shahiem Seymor <s.seymor@live.nl>
Date: Sat, 18 Aug 2018 15:38:32 +0200
Subject: [PATCH] Fix toggle bug

---
 js/forum/dist/extension.js                | 112 ++++++++++++++++++----
 js/forum/src/components/PrimaryTagView.js |   2 +-
 js/forum/src/pages/CategoryPage.js        |  57 +++++++++--
 3 files changed, 141 insertions(+), 30 deletions(-)

diff --git a/js/forum/dist/extension.js b/js/forum/dist/extension.js
index a866732..e435565 100644
--- a/js/forum/dist/extension.js
+++ b/js/forum/dist/extension.js
@@ -350,20 +350,16 @@ System.register('reflar/koseki/components/PrimaryTagView', ['flarum/Component',
                                                 m('i', { 'class': 'icon fa fa-angle-down', onclick: this.toggleView })
                                             )
                                         )
-                                    ),
-                                    tag.description() != '' ? m(
-                                        'div',
-                                        { 'class': 'col-xs-12' },
-                                        m(
-                                            'p',
-                                            { 'class': 'TagTile-description' },
-                                            tag.description()
-                                        )
-                                    ) : ''
+                                    )
                                 ) : '',
                                 m(
                                     'div',
                                     { 'class': 'Category--Children' },
+                                    tag.isPrimary() && tag.isChild() == false && this.tags.length >= 1 && tag.description() != '' ? m(
+                                        'p',
+                                        { 'class': 'TagTile-description' },
+                                        tag.description()
+                                    ) : '',
                                     this.tags.map(function (tag) {
                                         return ChildTagView.component({ tag: tag });
                                     })
@@ -457,22 +453,26 @@ System.register('reflar/koseki/pages/CategoryPage', ['flarum/components/Page', '
                 }, {
                     key: 'toggleView',
                     value: function toggleView() {
-                        var parent = this.parentNode.parentNode.parentNode;
+                        var parent = this.parentNode.parentNode.parentNode.parentNode;
                         var child = parent.querySelectorAll('.Category--Children')[0];
 
-                        if (child.style.display == 'none') {
-                            this.classList.remove('fa-angle-left');
-                            this.classList.add('fa-angle-down');
-                        } else {
-                            this.classList.remove('fa-angle-down');
-                            this.classList.add('fa-angle-left');
-                        }
+                        if (child) {
+                            if (child.style.display == 'none') {
+                                this.classList.remove('fa-angle-left');
+                                this.classList.add('fa-angle-down');
+                            } else {
+                                this.classList.remove('fa-angle-down');
+                                this.classList.add('fa-angle-left');
+                            }
 
-                        child.style.display = child.style.display == 'none' ? 'block' : 'none';
+                            child.style.display = child.style.display == 'none' ? 'block' : 'none';
+                        }
                     }
                 }, {
                     key: 'view',
                     value: function view() {
+                        var tagView = app.forum.attribute('kosekiTagsView');
+
                         return m(
                             'div',
                             { className: 'KosekiPage' },
@@ -497,7 +497,79 @@ System.register('reflar/koseki/pages/CategoryPage', ['flarum/components/Page', '
                                         { className: 'KosekiPage--categories TagTiles' },
                                         this.tags.map(function (tag) {
                                             return PrimaryTagView.component({ tag: tag });
-                                        })
+                                        }),
+                                        this.secondary.length >= 1 ? m(
+                                            'div',
+                                            { 'class': 'row' },
+                                            m(
+                                                'div',
+                                                { 'class': 'row TagTile-info' },
+                                                m(
+                                                    'div',
+                                                    { 'class': 'col-xs-8 col-lg-7' },
+                                                    app.translator.trans('reflar-koseki.forum.forums')
+                                                ),
+                                                tagView == 'compact' ? m(
+                                                    'div',
+                                                    null,
+                                                    m(
+                                                        'div',
+                                                        { 'class': 'col-xs-2 col-lg-2' },
+                                                        m(
+                                                            'span',
+                                                            { 'class': 'TagTile-posts' },
+                                                            app.translator.trans('reflar-koseki.forum.statistics')
+                                                        )
+                                                    )
+                                                ) : m(
+                                                    'div',
+                                                    null,
+                                                    m(
+                                                        'div',
+                                                        { 'class': 'col-xs-2 col-lg-1' },
+                                                        m(
+                                                            'span',
+                                                            { 'class': 'TagTile-topics' },
+                                                            app.translator.trans('reflar-koseki.forum.topics_title')
+                                                        )
+                                                    ),
+                                                    m(
+                                                        'div',
+                                                        { 'class': 'col-xs-2 col-lg-1' },
+                                                        m(
+                                                            'span',
+                                                            { 'class': 'TagTile-posts' },
+                                                            app.translator.trans('reflar-koseki.forum.posts_title')
+                                                        )
+                                                    )
+                                                ),
+                                                m(
+                                                    'div',
+                                                    { 'class': 'col-xs-2 col-lg-2 visible-lg' },
+                                                    m(
+                                                        'span',
+                                                        { 'class': 'TagTile-last' },
+                                                        app.translator.trans('reflar-koseki.forum.last_post')
+                                                    )
+                                                ),
+                                                m(
+                                                    'div',
+                                                    { 'class': 'visible-lg col-lg-1' },
+                                                    m(
+                                                        'div',
+                                                        { 'class': 'TagTile-toggle' },
+                                                        m('i', { 'class': 'icon fa fa-angle-down', onclick: this.toggleView })
+                                                    )
+                                                )
+                                            ),
+                                            m(
+                                                'div',
+                                                { 'class': 'Category--Children TagTile' },
+                                                this.secondary.map(function (tag) {
+                                                    return ChildTagView.component({ tag: tag });
+                                                })
+                                            )
+                                        ) : ''
                                     )
                                 )
                             )
diff --git a/js/forum/src/components/PrimaryTagView.js b/js/forum/src/components/PrimaryTagView.js
index b4ed00a..b64f82e 100644
--- a/js/forum/src/components/PrimaryTagView.js
+++ b/js/forum/src/components/PrimaryTagView.js
@@ -62,10 +62,10 @@ export default class PrimaryTagView extends Component {
                                     <div class="TagTile-toggle"><i class="icon fa fa-angle-down" onclick={this.toggleView}></i></div>
                                 </div>
                             </div>
-                            {tag.description() != '' ? (<div class="col-xs-12"><p class="TagTile-description">{tag.description()}</p></div>) : ''}
                         </div>
                     ) : ''}
                     <div class="Category--Children">
+                        {tag.isPrimary() && tag.isChild() == false && this.tags.length >= 1 && tag.description() != '' ? (<p class="TagTile-description">{tag.description()}</p>) : ''}
                         {this.tags.map(tag => ChildTagView.component({ tag }))}
                     </div>
                 </div>
diff --git a/js/forum/src/pages/CategoryPage.js b/js/forum/src/pages/CategoryPage.js
index 0552890..44bdd91 100644
--- a/js/forum/src/pages/CategoryPage.js
+++ b/js/forum/src/pages/CategoryPage.js
@@ -14,22 +14,25 @@ export default class CategoryPage extends Page {
     }
 
     toggleView() {
-        let parent = this.parentNode.parentNode.parentNode;
+        let parent = this.parentNode.parentNode.parentNode.parentNode;
         let child = parent.querySelectorAll('.Category--Children')[0];
 
-        if (child.style.display == 'none') {
-            this.classList.remove('fa-angle-left');
-            this.classList.add('fa-angle-down');
+        if (child) {
+            if (child.style.display == 'none') {
+                this.classList.remove('fa-angle-left');
+                this.classList.add('fa-angle-down');
+            } else {
+                this.classList.remove('fa-angle-down');
+                this.classList.add('fa-angle-left');
+            }
 
-        } else {
-            this.classList.remove('fa-angle-down');
-            this.classList.add('fa-angle-left');
+            child.style.display = child.style.display == 'none' ? 'block' : 'none';
         }
-
-        child.style.display = child.style.display == 'none' ? 'block' : 'none';
     }
 
     view() {
+        const tagView = app.forum.attribute('kosekiTagsView');
+
         return (
             <div className="KosekiPage">
                 {IndexPage.prototype.hero()}
@@ -42,6 +45,42 @@ export default class CategoryPage extends Page {
                     <div className="KosekiPage-content">
                         <div className="KosekiPage--categories TagTiles">
                             {this.tags.map(tag => PrimaryTagView.component({ tag }))}
+
+                            {this.secondary.length >= 1 ? (
+                                <div class="row">
+                                    <div class="row TagTile-info">
+                                        <div class="col-xs-8 col-lg-7">
+                                            {app.translator.trans('reflar-koseki.forum.forums')}
+                                        </div>
+                                        {tagView == 'compact' ? (
+                                            <div>
+                                                <div class="col-xs-2 col-lg-2">
+                                                    <span class="TagTile-posts">{app.translator.trans('reflar-koseki.forum.statistics')}</span>
+                                                </div>
+                                            </div>) : (
+                                                <div>
+                                                    <div class="col-xs-2 col-lg-1">
+                                                        <span class="TagTile-topics">{app.translator.trans('reflar-koseki.forum.topics_title')}</span>
+                                                    </div>
+                                                    <div class="col-xs-2 col-lg-1">
+                                                        <span class="TagTile-posts">{app.translator.trans('reflar-koseki.forum.posts_title')}</span>
+                                                    </div>
+                                                </div>
+                                            )
+                                        }
+                                        <div class="col-xs-2 col-lg-2 visible-lg">
+                                            <span class="TagTile-last">{app.translator.trans('reflar-koseki.forum.last_post')}</span>
+                                        </div>
+                                        <div class="visible-lg col-lg-1">
+                                            <div class="TagTile-toggle"><i class="icon fa fa-angle-down" onclick={this.toggleView}></i></div>
+                                        </div>
+                                    </div>
+
+                                    <div class="Category--Children TagTile">
+                                        {this.secondary.map(tag => ChildTagView.component({ tag }))}
+                                    </div>
+                                </div>
+                            ) : ''}
                         </div>
                     </div>
                 </div>