From 4b1862fa48365c27beb75be4b04fab844bc91dab Mon Sep 17 00:00:00 2001
From: Vincent Vandemeulebrouck <vincent.vandemeulebrouck@itiviti.com>
Date: Fri, 26 Aug 2022 22:23:04 +0200
Subject: [PATCH] Arborescence de conteneurs
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Les conteneurs sont maintenant précédés d'une icone:
* pour ouvrir:  '+'
* pour fermer: '-'
* si vide: carré vide
---
 module/rdd-utility.js                         | 42 +++++++++----------
 styles/simple.css                             | 14 +++++--
 .../actor-sheet-inventaire-conteneur.html     | 26 ++++++++++--
 templates/actor-sheet.html                    |  2 +-
 4 files changed, 54 insertions(+), 30 deletions(-)

diff --git a/module/rdd-utility.js b/module/rdd-utility.js
index afc4b2e3..dd49d522 100644
--- a/module/rdd-utility.js
+++ b/module/rdd-utility.js
@@ -465,34 +465,32 @@ export class RdDUtility {
   /** Construit la structure récursive des conteneurs, avec imbrication potentielle
    * 
    */
-  static buildConteneur(objet, niveau) {
-    if (!niveau) niveau = 1;
-    objet.niveau = niveau;
-    //console.log("OBJ:", objet);
-    let str = Handlebars.partials['systems/foundryvtt-reve-de-dragon/templates/actor-sheet-inventaire-conteneur.html']({ item: objet });
-    if (objet.type == 'conteneur') {
-      const afficherContenu = this.getAfficheContenu(objet._id);
-      str = str + RdDUtility.buildContenu(objet, niveau, afficherContenu);
-    }
-    return str;
+  static buildConteneur(objet, profondeur) {
+    if (!profondeur) profondeur = 1;
+    objet.niveau = profondeur;
+    const isConteneur = objet.type == 'conteneur';
+    const isOuvert = isConteneur && this.getAfficheContenu(objet._id);
+    const isVide = isConteneur && Misc.templateData(objet).contenu.length == 0;
+    const conteneur = Handlebars.partials['systems/foundryvtt-reve-de-dragon/templates/actor-sheet-inventaire-conteneur.html']({
+      item: objet,
+      vide: isVide,
+      ouvert: isOuvert
+    });
+    const contenu = isConteneur ? RdDUtility.buildContenu(objet, profondeur, isOuvert) : '';
+    return conteneur + contenu;
   }
 
   /* -------------------------------------------- */
-  static buildContenu(objet, niveau, afficherContenu) {
-    if (!niveau) niveau = 1;
-    objet.niveau = niveau;
-    let strContenu = "";
+  static buildContenu(objet, profondeur, afficherContenu) {
+    if (!profondeur) profondeur = 1;
+    objet.niveau = profondeur;
+    const display = afficherContenu ? 'item-display-show' : 'item-display-hide';
     //console.log("ITEM DISPLAYED", objet );
-    if (afficherContenu) {
-      strContenu = "<ul class='item-list alterne-list item-display-show list-item-margin" + niveau + "'>";
-    } else {
-      strContenu = "<ul class='item-list alterne-list item-display-hide list-item-margin" + niveau + "'>";
-    }
+    let strContenu = `<ul class='item-list alterne-list ${display} list-item-margin${profondeur}'>`;
     for (let subItem of objet.subItems) {
-      strContenu = strContenu + this.buildConteneur(subItem, niveau + 1);
+      strContenu += this.buildConteneur(subItem, profondeur + 1);
     }
-    strContenu = strContenu + "</ul>";
-    return strContenu;
+    return strContenu + "</ul>";
   }
 
   /* -------------------------------------------- */
diff --git a/styles/simple.css b/styles/simple.css
index b57e1151..6d158832 100644
--- a/styles/simple.css
+++ b/styles/simple.css
@@ -806,16 +806,22 @@ ul, li {
 }
 
 .list-item-margin1 {
-  margin-left: 1rem;
+  margin-left: 0.5rem;
 }
 .list-item-margin2 {
-  margin-left: 2rem;
+  margin-left: 1rem;
 }
 .list-item-margin3 {
-  margin-left: 3rem;
+  margin-left: 1.5rem;
 }
 .list-item-margin4 {
-  margin-left: 4rem;
+  margin-left: 2rem;
+}
+.list-item-margin5 {
+  margin-left: 2.5rem;
+}
+.list-item-margin6 {
+  margin-left: 3rem;
 }
 
 .sheet-competence-img {
diff --git a/templates/actor-sheet-inventaire-conteneur.html b/templates/actor-sheet-inventaire-conteneur.html
index 92d90dde..a1c624d2 100644
--- a/templates/actor-sheet-inventaire-conteneur.html
+++ b/templates/actor-sheet-inventaire-conteneur.html
@@ -1,9 +1,28 @@
 <li class="item flexrow list-item" data-item-id="{{item._id}}" draggable="true">
-  <img class="sheet-competence-img" src="{{item.img}}" title="{{item.name}}"/>
-
   {{#if (eq item.type 'conteneur')}}
-  <span class="item-name conteneur-name flex-grow"><a data-item-id="{{item._id}}">+{{item.name}}</a></span>
+    <span class="sheet-competence-img conteneur-name">
+      {{#if vide}}
+       <i class="far fa-square"></i>
+      {{else}}
+        <a data-item-id="{{item._id}}">
+        {{#if ouvert}}
+        <i class="far fa-minus-square"></i>
+        <!-- <i class="far fa-caret-square-down"></i> -->
+        {{else}}
+        <i class="far fa-plus-square"></i>
+        <!-- <i class="fas fa-caret-square-right"></i> -->
+        {{/if}}
+        </a>
+      {{/if}}
+    </span>
+    <span class="item-name conteneur-name flex-grow">
+      <a data-item-id="{{item._id}}">
+        <img class="sheet-competence-img" src="{{item.img}}" title="{{item.name}}"/>
+        {{item.name}}
+      </a>
+    </span>
   {{else}}
+  <img class="sheet-competence-img" src="{{item.img}}" title="{{item.name}}"/>
   <span class="item-name flex-grow">{{item.name}}</span>
   {{/if}}
   <span class="item-quantite">{{item.data.quantite}}
@@ -30,3 +49,4 @@
     {{/if}}
   </div>
 </li>
+
diff --git a/templates/actor-sheet.html b/templates/actor-sheet.html
index 1ea3be42..f65df255 100644
--- a/templates/actor-sheet.html
+++ b/templates/actor-sheet.html
@@ -690,7 +690,7 @@
           {{#each objets as |item id|}}
             {{#unless item.estContenu}}
             {{#if (ne item.type 'conteneur')}}
-              {{> "systems/foundryvtt-reve-de-dragon/templates/actor-sheet-inventaire-conteneur.html" item=item }}
+              {{> "systems/foundryvtt-reve-de-dragon/templates/actor-sheet-inventaire-conteneur.html" item=item vide=true ouvert=true }}
             {{/if}}
             {{/unless}}
           {{/each}}