From f531c694c9a7ce59c384e2cf9a3800a74a0679e4 Mon Sep 17 00:00:00 2001
From: Dennis Eichhorn <spl1nes.com@googlemail.com>
Date: Sat, 11 Apr 2020 18:20:38 +0200
Subject: [PATCH] improve organigram rendering

---
 Controller/BackendController.php |  6 +++++-
 Theme/Backend/css/styles.css     | 15 +++++++++++++++
 Theme/Backend/css/styles.scss    | 25 +++++++++++++++++++++++++
 Theme/Backend/organigram.tpl.php | 18 ++++++++++--------
 4 files changed, 55 insertions(+), 9 deletions(-)
 create mode 100644 Theme/Backend/css/styles.css
 create mode 100644 Theme/Backend/css/styles.scss

diff --git a/Controller/BackendController.php b/Controller/BackendController.php
index 8598060..8c7a143 100644
--- a/Controller/BackendController.php
+++ b/Controller/BackendController.php
@@ -19,7 +19,7 @@ use Modules\Organization\Models\DepartmentMapper;
 use Modules\Organization\Models\Position;
 use Modules\Organization\Models\PositionMapper;
 use Modules\Organization\Models\UnitMapper;
-
+use phpOMS\Asset\AssetType;
 use phpOMS\Contract\RenderableInterface;
 use phpOMS\Message\RequestAbstract;
 use phpOMS\Message\ResponseAbstract;
@@ -106,6 +106,10 @@ final class BackendController extends Controller
      */
     public function viewOrganigram(RequestAbstract $request, ResponseAbstract $response, $data = null) : RenderableInterface
     {
+        $response->get('Content')
+            ->getData('head')
+            ->addAsset(AssetType::CSS, 'Modules/Organization/Theme/Backend/css/styles.css');
+
         $view = new View($this->app->l11nManager, $request, $response);
 
         $view->setTemplate('/Modules/Organization/Theme/Backend/organigram');
diff --git a/Theme/Backend/css/styles.css b/Theme/Backend/css/styles.css
new file mode 100644
index 0000000..a50d192
--- /dev/null
+++ b/Theme/Backend/css/styles.css
@@ -0,0 +1,15 @@
+.organigram .portlet {
+  margin: 0 auto; }
+.organigram .unit {
+  margin: 1rem auto; }
+.organigram .departments {
+  margin: .5rem;
+  box-sizing: border-box;
+  display: flex;
+  flex: 0 0 auto;
+  flex-direction: column;
+  flex-wrap: wrap;
+  border: 1px solid #ebedf2; }
+.organigram .position {
+  margin: 0 auto;
+  padding: 1rem; }
diff --git a/Theme/Backend/css/styles.scss b/Theme/Backend/css/styles.scss
new file mode 100644
index 0000000..481145d
--- /dev/null
+++ b/Theme/Backend/css/styles.scss
@@ -0,0 +1,25 @@
+.organigram {
+    .portlet {
+        margin: 0 auto;
+    }
+
+    .unit {
+        margin: 1rem auto;
+    }
+
+    .departments {
+        margin: .5rem;
+        box-sizing: border-box;
+        display: flex;
+        flex: 0 0 auto;
+        flex-direction: column;
+        flex-wrap: wrap;
+
+        border: 1px solid #ebedf2;
+    }
+
+    .position {
+        margin: 0 auto;
+        padding: 1rem;
+    }
+}
\ No newline at end of file
diff --git a/Theme/Backend/organigram.tpl.php b/Theme/Backend/organigram.tpl.php
index 4dfbe5a..cb9642a 100644
--- a/Theme/Backend/organigram.tpl.php
+++ b/Theme/Backend/organigram.tpl.php
@@ -24,16 +24,16 @@ $unitRoot = $unitTree[null][0]['children'];
 //      departments
 //          positions
 ?>
-<div class="row">
+<div class="row organigram">
     <?php foreach ($unitRoot as $unitEle) : ?>
-        <div class="row" style="margin: 0 auto;">
+        <div class="row">
         <?php while (!empty($unitEle) && $unitEle['obj'] !== null) {
             $unitTree[null][$unitEle['obj']->getParent()->getId()]['index'] = $unitTree[null][$unitEle['obj']->getParent()->getId()]['index'] + 1;
             ?>
             <?php while (!empty($unitEle)) {
                 $unitId  = $unitEle['obj']->getId(); ?>
-                <div class="col" style="margin: 0 auto; background: #00f; padding: 1rem;">
-                    <div style="margin: 0 auto; background: #f00; padding: 1rem;"><?= $unitEle['obj']->getName(); ?></div>
+                <div class="col">
+                    <div class="portlet unit"><div class="portlet-body"><?= $unitEle['obj']->getName(); ?></div></div>
 
                     <?php if (isset($depTree[$unitId]) && !empty($depTree[$unitId])) : ?>
                     <!-- departments -->
@@ -45,11 +45,12 @@ $unitRoot = $unitTree[null][0]['children'];
                                 $depTree[$unitId][$depEle['obj']->getParent()->getId()]['index'] = $depTree[$unitId][$depEle['obj']->getParent()->getId()]['index'] + 1;
                                 ?>
                                 <?php while (!empty($depEle)) { ?>
-                                    <div class="col" style="margin: 0 auto; background: #0f0; padding: 1rem;">
-                                        <div style="margin: 0 auto; background: #ff0; padding: 1rem;"><?= $depEle['obj']->getName(); ?></div>
+                                    <div class="departments">
+                                        <div class="portlet">
+                                        <div class="portlet-head"><?= $depEle['obj']->getName(); ?></div>
 
                                         <!-- positions -->
-                                        <div style="margin: 0 auto; background: #fff; padding: 1rem;">
+                                        <div class="portlet-body">
                                         <ul>
                                             <?php
                                                 $depId   = $depEle['obj']->getId();
@@ -74,8 +75,9 @@ $unitRoot = $unitTree[null][0]['children'];
                                             <?php endforeach; ?>
                                         </ul>
                                             </div>
+                                            </div>
 
-                                        <div class="row" class="childdepartment">
+                                        <div class="row">
                                 <?php
                                     // find the closest parent who has un-rendered children
                                     $toCloseDep = 0;