From c3740c0c426f24fd78cce24023ce837ea6382f52 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Madis=20N=C3=B5mme?= <me@mad.is>
Date: Wed, 11 Dec 2024 15:25:59 -0600
Subject: [PATCH] Truncate long job titles to 50 chars on new invoic epage

---
 .../public/less/component/select-input.less     |  7 ++++---
 ui/src/ethlance/ui/page/new_invoice.cljs        | 17 ++++++++++++++++-
 2 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/ui/resources/public/less/component/select-input.less b/ui/resources/public/less/component/select-input.less
index e5009104..3f13576a 100644
--- a/ui/resources/public/less/component/select-input.less
+++ b/ui/resources/public/less/component/select-input.less
@@ -16,7 +16,7 @@
     justify-content: space-between;
     height: @input-height;
     cursor: pointer;
-    white-space: nowrap; 
+    white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     padding-left: 0.5em;
@@ -40,7 +40,7 @@
       width: 32px;
       height: 32px;
       flex-basis: 32px;
-      flex-shrink: 0; 
+      flex-shrink: 0;
     }
 
     &:hover {
@@ -97,6 +97,7 @@
         height: @input-height;
         padding-left: 1em;
         cursor: pointer;
+        text-align: left;
 
         &:hover {
 	  background-color: #d6e1fd;
@@ -146,7 +147,7 @@
           background-color: desaturate(#color[light-purple], 5%);
         }
       }
-      
+
       > .selection-listing {
         > .selection {
           background-color: #color[light-purple];
diff --git a/ui/src/ethlance/ui/page/new_invoice.cljs b/ui/src/ethlance/ui/page/new_invoice.cljs
index e3fc9538..03a4e1fc 100644
--- a/ui/src/ethlance/ui/page/new_invoice.cljs
+++ b/ui/src/ethlance/ui/page/new_invoice.cljs
@@ -10,6 +10,19 @@
     [re-frame.core :as re]))
 
 
+(defn truncate [length ending string]
+  (cond
+    (nil? string)
+    ""
+
+    (< (count string) (+ length 3))
+    string
+
+    :else
+    (str
+      (subs string 0 (min (count string) length))
+      ending)))
+
 (defmethod page :route.invoice/new []
   (let [active-user (:user/id @(re/subscribe [:ethlance.ui.subscriptions/active-session]))
         query [:candidate {:user/id active-user}
@@ -66,7 +79,9 @@
            [c-select-input
             {:selections *job-listing
              :value-fn (fn [job-story] (str (:job/id job-story) "-" (:job-story/id job-story)))
-             :label-fn (comp :job/title :job)
+             :label-fn (comp #(truncate 50 "..." %)
+                             :job/title
+                             :job)
              :selection @*invoiced-job
              :on-select #(re/dispatch [:page.new-invoice/set-invoiced-job %])}]]
           [:div.input-stripe {:on-click (partial focus-on-element "invoice-hours-input")}