From 2c7f2c0fcd405a8f408ca110e31f1c29e78e2a42 Mon Sep 17 00:00:00 2001
From: Lance Edgar <lance@edbob.org>
Date: Wed, 11 Jan 2023 16:02:35 -0600
Subject: [PATCH] Fix panel header icon behavior for new custorder

had to work around a buefy bug..?
---
 tailbone/templates/custorders/create.mako | 78 ++++++++++++++---------
 1 file changed, 48 insertions(+), 30 deletions(-)

diff --git a/tailbone/templates/custorders/create.mako b/tailbone/templates/custorders/create.mako
index f6aa2ed4..3189c0b3 100644
--- a/tailbone/templates/custorders/create.mako
+++ b/tailbone/templates/custorders/create.mako
@@ -65,21 +65,30 @@
       <b-collapse class="panel" :class="customerPanelType"
                   :open.sync="customerPanelOpen">
 
-        <div slot="trigger"
-             slot-scope="props"
-             class="panel-heading"
-             role="button">
-          <b-icon pack="fas"
-            ## TODO: this icon toggling should work, according to
-            ## Buefy docs, but i could not ever get it to work.
-            ## what am i missing?
-            ## https://buefy.org/documentation/collapse/
-            ## :icon="props.open ? 'caret-down' : 'caret-right'">
-            ## (for now we just always show caret-right instead)
-            icon="caret-right">
-          </b-icon>
-          <strong v-html="customerPanelHeader"></strong>
-        </div>
+        <template #trigger="props">
+          <div class="panel-heading"
+               role="button">
+
+            ## TODO: for some reason buefy will "reuse" the icon
+            ## element in such a way that its display does not
+            ## refresh.  so to work around that, we use different
+            ## structure for the two icons, so buefy is forced to
+            ## re-draw
+
+            <b-icon v-if="props.open"
+                    pack="fas"
+                    icon="angle-down">
+            </b-icon>
+
+            <span v-if="!props.open">
+              <b-icon pack="fas"
+                      icon="angle-right">
+              </b-icon>
+            </span>
+
+            <strong v-html="customerPanelHeader"></strong>
+          </div>
+        </template>
 
         <div class="panel-block">
           <div style="width: 100%;">
@@ -460,21 +469,30 @@
       <b-collapse class="panel"
                   open>
 
-        <div slot="trigger"
-             slot-scope="props"
-             class="panel-heading"
-             role="button">
-          <b-icon pack="fas"
-            ## TODO: this icon toggling should work, according to
-            ## Buefy docs, but i could not ever get it to work.
-            ## what am i missing?
-            ## https://buefy.org/documentation/collapse/
-            ## :icon="props.open ? 'caret-down' : 'caret-right'">
-            ## (for now we just always show caret-right instead)
-            icon="caret-right">
-          </b-icon>
-          <strong v-html="itemsPanelHeader"></strong>
-        </div>
+        <template #trigger="props">
+          <div class="panel-heading"
+               role="button">
+
+            ## TODO: for some reason buefy will "reuse" the icon
+            ## element in such a way that its display does not
+            ## refresh.  so to work around that, we use different
+            ## structure for the two icons, so buefy is forced to
+            ## re-draw
+
+            <b-icon v-if="props.open"
+                    pack="fas"
+                    icon="angle-down">
+            </b-icon>
+
+            <span v-if="!props.open">
+              <b-icon pack="fas"
+                      icon="angle-right">
+              </b-icon>
+            </span>
+
+            <strong v-html="itemsPanelHeader"></strong>
+          </div>
+        </template>
 
         <div class="panel-block">
           <div>