From 3c8d16a368e7e2d7431ab3fcf62552176b1faabf Mon Sep 17 00:00:00 2001
From: Lance Edgar <ledgar@techsupport.coop>
Date: Mon, 20 May 2019 19:59:21 -0500
Subject: [PATCH] Add custom `tailbone-datepicker` component for Buefy

for easier reuse, outside of main CRUD forms
---
 .../static/js/tailbone.buefy.datepicker.js    | 47 +++++++++++++++++++
 tailbone/static/themes/falafel/css/layout.css | 15 ++++++
 tailbone/templates/deform/date_jquery.pt      | 14 ++----
 tailbone/templates/forms/deform_buefy.mako    | 19 --------
 tailbone/templates/themes/falafel/base.mako   |  3 ++
 5 files changed, 69 insertions(+), 29 deletions(-)
 create mode 100644 tailbone/static/js/tailbone.buefy.datepicker.js

diff --git a/tailbone/static/js/tailbone.buefy.datepicker.js b/tailbone/static/js/tailbone.buefy.datepicker.js
new file mode 100644
index 00000000..d327f50e
--- /dev/null
+++ b/tailbone/static/js/tailbone.buefy.datepicker.js
@@ -0,0 +1,47 @@
+
+const TailboneDatepicker = {
+
+    template: [
+        '<b-datepicker',
+        'placeholder="Click to select ..."',
+        `:name="name"`,
+        `:id="id"`,
+        'editable',
+        'icon-pack="fas"',
+        'icon="calendar-alt"',
+        ':date-formatter="formatDate"',
+        ':date-parser="parseDate"',
+        ':value="rawValue ? parseDate(rawValue) : null"',
+        '>',
+        '</b-datepicker>'
+    ].join(' '),
+
+    props: {
+        name: String,
+        id: String,
+        rawValue: String
+    },
+
+    methods: {
+
+        formatDate(date) {
+            // just need to convert to simple ISO date format here, seems
+            // like there should be a more obvious way to do that?
+            var year = date.getFullYear()
+            var month = date.getMonth() + 1
+            var day = date.getDate()
+            month = month < 10 ? '0' + month : month
+            day = day < 10 ? '0' + day : day
+            return year + '-' + month + '-' + day
+        },
+
+        parseDate(date) {
+            // note, this assumes classic YYYY-MM-DD (i.e. ISO?) format
+            var parts = date.split('-')
+            return new Date(parts[0], parseInt(parts[1]) - 1, parts[2])
+        }
+    }
+
+}
+
+Vue.component('tailbone-datepicker', TailboneDatepicker)
diff --git a/tailbone/static/themes/falafel/css/layout.css b/tailbone/static/themes/falafel/css/layout.css
index 5134141a..b964d476 100644
--- a/tailbone/static/themes/falafel/css/layout.css
+++ b/tailbone/static/themes/falafel/css/layout.css
@@ -89,6 +89,21 @@ header .level .theme-picker {
     margin-top: 1em;
 }
 
+/******************************
+ * fix datepicker within modals
+ * TODO: someday this may not be necessary? cf.
+ * https://github.com/buefy/buefy/issues/292#issuecomment-347365637
+ ******************************/
+
+.modal .animation-content .modal-card {
+    overflow: visible !important;
+}
+
+.modal-card-body {
+    overflow: visible !important;
+}
+
+
 /******************************
  * feedback
  ******************************/
diff --git a/tailbone/templates/deform/date_jquery.pt b/tailbone/templates/deform/date_jquery.pt
index 47dba14a..90de0f86 100644
--- a/tailbone/templates/deform/date_jquery.pt
+++ b/tailbone/templates/deform/date_jquery.pt
@@ -37,16 +37,10 @@
 
   <div tal:condition="use_buefy">
     ${field.start_mapping()}
-    <b-datepicker placeholder="Click to select..."
-                  name="date"
-                  id="${oid}"
-                  editable
-                  icon-pack="fas"
-                  icon="calendar-alt"
-                  tal:attributes=":date-formatter 'formatDate';
-                                  :date-parser 'parseDate';
-                                  :value ('parseDate(\'' + cstruct + '\')') if cstruct else 'null'">
-    </b-datepicker>
+    <tailbone-datepicker name="date"
+                         id="${oid}"
+                         raw-value="${cstruct}">
+    </tailbone-datepicker>
     ${field.end_mapping()}
   </div>
 
diff --git a/tailbone/templates/forms/deform_buefy.mako b/tailbone/templates/forms/deform_buefy.mako
index 2c80b42c..7557743f 100644
--- a/tailbone/templates/forms/deform_buefy.mako
+++ b/tailbone/templates/forms/deform_buefy.mako
@@ -57,25 +57,6 @@
 
   const BuefyForm = {
       template: '#buefy-form-template',
-      methods: {
-
-          formatDate(date) {
-              // just need to convert to simple ISO date format here, seems
-              // like there should be a more obvious way to do that?
-              var year = date.getFullYear()
-              var month = date.getMonth() + 1
-              var day = date.getDate()
-              month = month < 10 ? '0' + month : month
-              day = day < 10 ? '0' + day : day
-              return year + '-' + month + '-' + day
-          },
-
-          parseDate(date) {
-              // note, this assumes classic YYYY-MM-DD (i.e. ISO?) format
-              var parts = date.split('-')
-              return new Date(parts[0], parseInt(parts[1]) - 1, parts[2])
-          }
-      }
   }
 
   Vue.component('buefy-form', BuefyForm)
diff --git a/tailbone/templates/themes/falafel/base.mako b/tailbone/templates/themes/falafel/base.mako
index fea80462..9ba2cd7d 100644
--- a/tailbone/templates/themes/falafel/base.mako
+++ b/tailbone/templates/themes/falafel/base.mako
@@ -297,6 +297,9 @@
   ## FontAwesome 5.3.1
   <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
 
+  ## Tailbone / Buefy stuff
+  ${h.javascript_link(request.static_url('tailbone:static/js/tailbone.buefy.datepicker.js') + '?ver={}'.format(tailbone.__version__))}
+
   <script type="text/javascript">
     var session_timeout = ${request.get_session_timeout() or 'null'};
     var logout_url = '${request.route_url('logout')}';