From 0e814a8a4a6e03083b473475a11798efb0f29002 Mon Sep 17 00:00:00 2001 From: Bryce Covert Date: Thu, 11 May 2023 09:43:37 -0700 Subject: [PATCH] makes stuff work --- resources/public/output.css | 114 +++++++++++ src/clj/auto_ap/ssr/company/company_1099.clj | 191 ++++++++++--------- src/clj/auto_ap/ssr/components.clj | 6 +- src/clj/auto_ap/ssr/components/card.clj | 4 + src/clj/auto_ap/ssr/components/dialog.clj | 11 +- src/clj/auto_ap/ssr/components/inputs.clj | 9 +- src/clj/auto_ap/ssr/components/navbar.clj | 34 ++-- src/clj/auto_ap/ssr/components/page.clj | 10 +- src/clj/auto_ap/ssr/components/tags.clj | 18 ++ src/clj/auto_ap/ssr/search.clj | 137 +++++++------ src/clj/auto_ap/ssr/svg.clj | 53 +++++ src/clj/auto_ap/ssr/ui.clj | 13 -- 12 files changed, 403 insertions(+), 197 deletions(-) create mode 100644 src/clj/auto_ap/ssr/components/tags.clj diff --git a/resources/public/output.css b/resources/public/output.css index 510baa44..0d584506 100644 --- a/resources/public/output.css +++ b/resources/public/output.css @@ -1285,6 +1285,26 @@ input:checked + .toggle-bg { height: 0.5rem; } +.h-48 { + height: 12rem; +} + +.h-64 { + height: 16rem; +} + +.h-80 { + height: 20rem; +} + +.h-1\/2 { + height: 50%; +} + +.h-96 { + height: 24rem; +} + .max-h-full { max-height: 100%; } @@ -1502,6 +1522,10 @@ input:checked + .toggle-bg { gap: 1.5rem; } +.gap-8 { + gap: 2rem; +} + .-space-x-px > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 0; margin-right: calc(-1px * var(--tw-space-x-reverse)); @@ -1544,6 +1568,18 @@ input:checked + .toggle-bg { margin-bottom: calc(1.5rem * var(--tw-space-y-reverse)); } +.space-y-4 > :not([hidden]) ~ :not([hidden]) { + --tw-space-y-reverse: 0; + margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(1rem * var(--tw-space-y-reverse)); +} + +.space-y-8 > :not([hidden]) ~ :not([hidden]) { + --tw-space-y-reverse: 0; + margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(2rem * var(--tw-space-y-reverse)); +} + .divide-y > :not([hidden]) ~ :not([hidden]) { --tw-divide-y-reverse: 0; border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse))); @@ -1555,6 +1591,10 @@ input:checked + .toggle-bg { border-color: rgb(243 244 246 / var(--tw-divide-opacity)); } +.overflow-auto { + overflow: auto; +} + .overflow-hidden { overflow: hidden; } @@ -1740,6 +1780,21 @@ input:checked + .toggle-bg { background-color: rgb(253 246 178 / var(--tw-bg-opacity)); } +.bg-blue-200 { + --tw-bg-opacity: 1; + background-color: rgb(153 215 247 / var(--tw-bg-opacity)); +} + +.bg-blue-300 { + --tw-bg-opacity: 1; + background-color: rgb(102 196 242 / var(--tw-bg-opacity)); +} + +.bg-green-100 { + --tw-bg-opacity: 1; + background-color: rgb(228 240 213 / var(--tw-bg-opacity)); +} + .bg-opacity-50 { --tw-bg-opacity: 0.5; } @@ -1768,6 +1823,14 @@ input:checked + .toggle-bg { padding: 1.5rem; } +.p-8 { + padding: 2rem; +} + +.p-5 { + padding: 1.25rem; +} + .px-2 { padding-left: 0.5rem; padding-right: 0.5rem; @@ -1861,6 +1924,18 @@ input:checked + .toggle-bg { padding-top: 1.25rem; } +.pb-2 { + padding-bottom: 0.5rem; +} + +.pr-2 { + padding-right: 0.5rem; +} + +.pr-2\.5 { + padding-right: 0.625rem; +} + .text-left { text-align: left; } @@ -1999,6 +2074,16 @@ input:checked + .toggle-bg { color: rgb(114 59 19 / var(--tw-text-opacity)); } +.text-gray-200 { + --tw-text-opacity: 1; + color: rgb(229 231 235 / var(--tw-text-opacity)); +} + +.text-green-800 { + --tw-text-opacity: 1; + color: rgb(48 72 18 / var(--tw-text-opacity)); +} + .opacity-0 { opacity: 0; } @@ -2231,6 +2316,11 @@ input:checked + .toggle-bg { background-color: rgb(255 255 255 / var(--tw-bg-opacity)); } +.hover\:bg-gray-200:hover { + --tw-bg-opacity: 1; + background-color: rgb(229 231 235 / var(--tw-bg-opacity)); +} + .hover\:text-blue-600:hover { --tw-text-opacity: 1; color: rgb(0 125 187 / var(--tw-text-opacity)); @@ -2419,6 +2509,16 @@ input:checked + .toggle-bg { background-color: rgb(99 49 18 / var(--tw-bg-opacity)); } +.dark .dark\:bg-blue-700 { + --tw-bg-opacity: 1; + background-color: rgb(0 94 140 / var(--tw-bg-opacity)); +} + +.dark .dark\:bg-green-900 { + --tw-bg-opacity: 1; + background-color: rgb(24 36 9 / var(--tw-bg-opacity)); +} + .dark .dark\:bg-opacity-80 { --tw-bg-opacity: 0.8; } @@ -2458,6 +2558,16 @@ input:checked + .toggle-bg { color: rgb(250 202 21 / var(--tw-text-opacity)); } +.dark .dark\:text-green-300 { + --tw-text-opacity: 1; + color: rgb(175 211 130 / var(--tw-text-opacity)); +} + +.dark .dark\:text-gray-50 { + --tw-text-opacity: 1; + color: rgb(249 250 251 / var(--tw-text-opacity)); +} + .dark .dark\:placeholder-gray-400::-moz-placeholder { --tw-placeholder-opacity: 1; color: rgb(156 163 175 / var(--tw-placeholder-opacity)); @@ -2632,6 +2742,10 @@ input:checked + .toggle-bg { display: block; } + .lg\:inline { + display: inline; + } + .lg\:flex { display: flex; } diff --git a/src/clj/auto_ap/ssr/company/company_1099.clj b/src/clj/auto_ap/ssr/company/company_1099.clj index 2593686d..b4b81d2b 100644 --- a/src/clj/auto_ap/ssr/company/company_1099.clj +++ b/src/clj/auto_ap/ssr/company/company_1099.clj @@ -164,7 +164,7 @@ (com/data-grid-cell {} (:client/code client)) (com/data-grid-cell {} - [:div.flex.whitespace-nowrap.items-center + [:div.flex.whitespace-nowrap.items-center.gap-4 [:div [:div (:vendor/name vendor)] [:div.text-sm.text-gray-400 (or (-> vendor :vendor/legal-entity-name not-empty) @@ -172,8 +172,11 @@ (-> vendor :vendor/legal-entity-middle-name) " " (-> vendor :vendor/legal-entity-last-name)))]] (when-let [t99-type (some-> vendor :vendor/legal-entity-1099-type :db/ident name)] - [:p {:class "ml-8 bg-yellow-100 text-yellow-800 text-xs font-medium px-2 py-0.5 rounded dark:bg-yellow-900 dark:text-yellow-300"} - (str/capitalize t99-type)])]) + (com/pill + {:class "text-xs font-medium" + :color :primary} + (str/capitalize t99-type)) + )]) (com/data-grid-cell {:class "hidden md:table-cell"} [:div.flex.gap-4 @@ -181,9 +184,9 @@ [:span {:class "text-xs font-medium py-0.5 "} tin]) (when-let [tin-type (some-> vendor :vendor/legal-entity-tin-type :db/ident name)] - [:p {:class "bg-yellow-100 text-yellow-800 text-xs font-medium px-2 py-0.5 rounded dark:bg-yellow-900 dark:text-yellow-300"} - (str/capitalize tin-type) - ])]) + (com/pill {:class "text-xs font-medium" + :color :yellow} + (name tin-type)))]) (com/data-grid-cell {:class "hidden lg:table-cell"} (if (-> vendor :vendor/address :address/street1) @@ -197,8 +200,9 @@ (-> vendor :vendor/address :address/zip)]] [:p.text-sm.italic.text-gray-400 "No address"])) (com/data-grid-cell {} - [:span {:class "bg-blue-100 text-blue-800 text-xs font-medium px-2 py-0.5 rounded dark:bg-blue-900 dark:text-blue-300 whitespace-nowrap"} - "Paid $" (Math/round amount)]) + (com/pill {:class "text-xs font-medium" + :color :primary} + "Paid $" (Math/round amount))) (com/data-grid-right-stack-cell {} (if (cannot-overwrite? vendor) @@ -207,8 +211,8 @@ :company-1099-vendor-dialog :vendor-id (:db/id vendor)) :hx-target "#modal-content" - :hx-swap "innerHTML"} - [:i.fa.fa-pencil ]))))))] + :hx-swap "outerHTML"} + svg/pencil))))))] (com/paginator))])) (defn form-data->map [form-data] @@ -250,90 +254,89 @@ (let [vendor (dc/pull (dc/db conn) '[* {:vendor/legal-entity-1099-type [:db/ident] :vendor/legal-entity-tin-type [:db/ident]}] (Long/parseLong (:vendor-id (:params request))))] ;; TODO perms (html-response - [:div#modal-content - [:form {:hx-post (bidi/path-for ssr-routes/only-routes - :company-1099-vendor-save - :request-method :post - :vendor-id (Long/parseLong (:vendor-id (:params request)))) - :hx-target "#vendor-table" - :hx-swap "outerHTML swap:300ms"} - (com/dialog - [:div.flex [:div.p-2 "Vendor 1099 Info"] [:p.ml-2.rounded.bg-gray-200.p-2.dark:bg-gray-600 (:vendor/name vendor)]] - [:div.space-y-6 - [:div.grid.grid-cols-6.gap-4 - [:h4.text-xl.border-b.col-span-6 "Address"] - [:div.col-span-6 - (com/field {:label "Street 1"} - (com/text-input {:name (path->name [:vendor/address :address/street1]) - :value (-> vendor :vendor/address :address/street1) - :placeholder "1700 Pennsylvania Ave" - :autofocus true}))] - [:div.col-span-6 - (com/field {:label "Street 2"} - (com/text-input {:name (path->name [:vendor/address :address/street2]) - :value (-> vendor :vendor/address :address/street2) - :placeholder "Suite 200"}))] - [:div.col-span-3 - (com/field {:label "City"} - (com/text-input {:name (path->name [:vendor/address :address/city]) - :value (-> vendor :vendor/address :address/city) - :placeholder "Cupertino"}))] - [:div.col-span-1 - (com/field {:label "State"} - (com/text-input {:name (path->name [:vendor/address :address/state]) - :value (-> vendor :vendor/address :address/state) - :placeholder "CA"}))] - [:div.col-span-2 - (com/field {:label "Zip"} - (com/text-input {:name (path->name [:vendor/address :address/zip]) - :value (-> vendor :vendor/address :address/zip) - :placeholder "98102"}))] - [:h4.text-xl.border-b.col-span-6 "Legal Entity"] - [:div.col-span-6 - (com/field {:label "Legal Entity Name"} - (com/text-input {:name (path->name [:vendor/legal-entity-name]) - :value (-> vendor :vendor/legal-entity-name) - :placeholder "Good Restaurant LLC"}))] - [:div.col-span-6.text-center " - OR -"] - [:div.col-span-2 - (com/field {:label "First Name"} - (com/text-input {:name (path->name [:vendor/legal-entity-first-name]) - :value (-> vendor :vendor/legal-entity-first-name) - :placeholder "John"}))] - [:div.col-span-2 - (com/field {:label "Middle Name"} - (com/text-input {:name (path->name [:vendor/legal-entity-middle-name]) - :value (-> vendor :vendor/legal-entity-middle-name) - :placeholder "C."}))] - [:div.col-span-2 - (com/field {:label "Last Name"} - (com/text-input {:name (path->name [:vendor/legal-entity-last-name]) - :value (-> vendor :vendor/legal-entity-last-name) - :placeholder "Riley"}))] - [:div.col-span-2 - (com/field {:label "TIN"} - (com/text-input {:name (path->name [:vendor/legal-entity-tin]) - :value (-> vendor :vendor/legal-entity-tin) - :placeholder "John"}))] - [:div.col-span-2 - (com/field {:label "TIN Type"} - (com/select {:name (path->name [:vendor/legal-entity-tin-type]) - :allow-blank? true - :value (some-> vendor :vendor/legal-entity-tin-type :db/ident name) - :options [["ein" "EIN"] - ["ssn" "SSN"]]}))] - [:div.col-span-2 - (com/field {:label "1099 Type"} - (com/select {:name (path->name [:vendor/legal-entity-1099-type]) - :allow-blank? true - :value (some-> vendor :vendor/legal-entity-1099-type :db/ident name) - :options [["none" "None"] - ["misc" "Misc"] - ["landlord" "Landlord"]]}))] - [:div.col-span-6 - (com/button {:color :primary} - "Save")]]] - [:div])]] + [:form {:hx-post (bidi/path-for ssr-routes/only-routes + :company-1099-vendor-save + :request-method :post + :vendor-id (Long/parseLong (:vendor-id (:params request)))) + :hx-target "#vendor-table" + :hx-swap "outerHTML swap:300ms"} + (com/dialog + [:div.flex [:div.p-2 "Vendor 1099 Info"] [:p.ml-2.rounded.bg-gray-200.p-2.dark:bg-gray-600 (:vendor/name vendor)]] + [:div.space-y-6 + [:div.grid.grid-cols-6.gap-4 + [:h4.text-xl.border-b.col-span-6 "Address"] + [:div.col-span-6 + (com/field {:label "Street 1"} + (com/text-input {:name (path->name [:vendor/address :address/street1]) + :value (-> vendor :vendor/address :address/street1) + :placeholder "1700 Pennsylvania Ave" + :autofocus true}))] + [:div.col-span-6 + (com/field {:label "Street 2"} + (com/text-input {:name (path->name [:vendor/address :address/street2]) + :value (-> vendor :vendor/address :address/street2) + :placeholder "Suite 200"}))] + [:div.col-span-3 + (com/field {:label "City"} + (com/text-input {:name (path->name [:vendor/address :address/city]) + :value (-> vendor :vendor/address :address/city) + :placeholder "Cupertino"}))] + [:div.col-span-1 + (com/field {:label "State"} + (com/text-input {:name (path->name [:vendor/address :address/state]) + :value (-> vendor :vendor/address :address/state) + :placeholder "CA"}))] + [:div.col-span-2 + (com/field {:label "Zip"} + (com/text-input {:name (path->name [:vendor/address :address/zip]) + :value (-> vendor :vendor/address :address/zip) + :placeholder "98102"}))] + [:h4.text-xl.border-b.col-span-6 "Legal Entity"] + [:div.col-span-6 + (com/field {:label "Legal Entity Name"} + (com/text-input {:name (path->name [:vendor/legal-entity-name]) + :value (-> vendor :vendor/legal-entity-name) + :placeholder "Good Restaurant LLC"}))] + [:div.col-span-6.text-center " - OR -"] + [:div.col-span-2 + (com/field {:label "First Name"} + (com/text-input {:name (path->name [:vendor/legal-entity-first-name]) + :value (-> vendor :vendor/legal-entity-first-name) + :placeholder "John"}))] + [:div.col-span-2 + (com/field {:label "Middle Name"} + (com/text-input {:name (path->name [:vendor/legal-entity-middle-name]) + :value (-> vendor :vendor/legal-entity-middle-name) + :placeholder "C."}))] + [:div.col-span-2 + (com/field {:label "Last Name"} + (com/text-input {:name (path->name [:vendor/legal-entity-last-name]) + :value (-> vendor :vendor/legal-entity-last-name) + :placeholder "Riley"}))] + [:div.col-span-2 + (com/field {:label "TIN"} + (com/text-input {:name (path->name [:vendor/legal-entity-tin]) + :value (-> vendor :vendor/legal-entity-tin) + :placeholder "John"}))] + [:div.col-span-2 + (com/field {:label "TIN Type"} + (com/select {:name (path->name [:vendor/legal-entity-tin-type]) + :allow-blank? true + :value (some-> vendor :vendor/legal-entity-tin-type :db/ident name) + :options [["ein" "EIN"] + ["ssn" "SSN"]]}))] + [:div.col-span-2 + (com/field {:label "1099 Type"} + (com/select {:name (path->name [:vendor/legal-entity-1099-type]) + :allow-blank? true + :value (some-> vendor :vendor/legal-entity-1099-type :db/ident name) + :options [["none" "None"] + ["misc" "Misc"] + ["landlord" "Landlord"]]}))] + [:div.col-span-6 + (com/button {:color :primary} + "Save")]]] + [:div])] :headers {"hx-trigger" "openDialog"}))) (defn vendor-table [request] diff --git a/src/clj/auto_ap/ssr/components.clj b/src/clj/auto_ap/ssr/components.clj index 402fcc6a..f4a7777f 100644 --- a/src/clj/auto_ap/ssr/components.clj +++ b/src/clj/auto_ap/ssr/components.clj @@ -7,7 +7,8 @@ [auto-ap.ssr.components.card :as card] [auto-ap.ssr.components.navbar :as navbar] [auto-ap.ssr.components.page :as page] - [auto-ap.ssr.components.data-grid :as data-grid])) + [auto-ap.ssr.components.data-grid :as data-grid] + [auto-ap.ssr.components.tags :as tags])) (def breadcrumbs breadcrumbs/breadcrumbs-) @@ -23,11 +24,14 @@ (def left-aside aside/left-aside-) (def company-aside-nav aside/company-aside-nav-) (def content-card card/content-card-) +(def card card/card-) (def navbar navbar/navbar-) (def page page/page-) +(def pill tags/pill-) + (def data-grid data-grid/data-grid-) (def data-grid-header data-grid/header-) (def data-grid-row data-grid/row-) diff --git a/src/clj/auto_ap/ssr/components/card.clj b/src/clj/auto_ap/ssr/components/card.clj index 64a59bfd..3ca50648 100644 --- a/src/clj/auto_ap/ssr/components/card.clj +++ b/src/clj/auto_ap/ssr/components/card.clj @@ -1,5 +1,9 @@ (ns auto-ap.ssr.components.card) +(defn card- [params & children] + (into [:div {:class "shadow-md dark:bg-gray-800 sm:rounded-lg border-2 border-gray-200 dark:border-gray-900 bg-white overflow-hidden"}] + children)) + (defn content-card- [params & children] [:section {:class " py-3 sm:py-5"} [:div {:class "max-w-screen-2xl"} diff --git a/src/clj/auto_ap/ssr/components/dialog.clj b/src/clj/auto_ap/ssr/components/dialog.clj index cc293b3c..ed56d0b8 100644 --- a/src/clj/auto_ap/ssr/components/dialog.clj +++ b/src/clj/auto_ap/ssr/components/dialog.clj @@ -1,8 +1,9 @@ (ns auto-ap.ssr.components.dialog) (defn dialog- [header content footer] - [:div {:class "relative bg-white rounded-lg shadow dark:bg-gray-700 dark:text-white fade-in slide-up duration-300 transition-all modal-content"} - [:div {:class "flex items-start justify-between p-4 border-b rounded-t dark:border-gray-600"} header] - [:div {:class "p-6 space-y-6"} - content] - [:div footer]]) + [:div#modal-content + [:div {:class "relative bg-white rounded-lg shadow dark:bg-gray-700 dark:text-white fade-in slide-up duration-300 transition-all modal-content"} + [:div {:class "flex items-start justify-between p-4 border-b rounded-t dark:border-gray-600"} header] + [:div {:class "p-6 space-y-6"} + content] + [:div footer]]]) diff --git a/src/clj/auto_ap/ssr/components/inputs.clj b/src/clj/auto_ap/ssr/components/inputs.clj index 54e767f9..b66049f9 100644 --- a/src/clj/auto_ap/ssr/components/inputs.clj +++ b/src/clj/auto_ap/ssr/components/inputs.clj @@ -13,12 +13,9 @@ (defn text-input- [params] [:input - {:type "text" - :class "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" - :autofocus (:autofocus params) - :name (:name params) - :placeholder (:placeholder params) - :value (:value params)}]) + (update params + :class str " bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500") + ]) (defn field- [params & rest] (into diff --git a/src/clj/auto_ap/ssr/components/navbar.clj b/src/clj/auto_ap/ssr/components/navbar.clj index 924ec0a5..964924b6 100644 --- a/src/clj/auto_ap/ssr/components/navbar.clj +++ b/src/clj/auto_ap/ssr/components/navbar.clj @@ -1,7 +1,9 @@ (ns auto-ap.ssr.components.navbar (:require [auto-ap.ssr.components.buttons :refer [icon-button-]] [auto-ap.ssr.svg :as svg] - [hiccup2.core :as hiccup])) + [hiccup2.core :as hiccup] + [bidi.bidi :as bidi] + [auto-ap.ssr-routes :as ssr-routes])) (defn navbar- [] [:nav {:class "fixed z-30 w-full bg-white border-b border-gray-200 dark:bg-gray-800 dark:border-gray-700"} @@ -15,24 +17,30 @@ [:a {:href "https://flowbite-admin-dashboard.vercel.app/", :class "flex ml-2 md:mr-24"} [:img {:src "/img/logo-big2.png", :class "h-10 mr-16", :alt "Integreat logo"}] ] - [:form {:action "#", :method "GET", :class "hidden lg:block lg:pl-3.5"} - [:label {:for "topbar-search", :class "sr-only"} "Search"] - [:div {:class "relative mt-1 lg:w-96"} - [:div {:class "absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none"} - [:svg {:class "w-5 h-5 text-gray-500 dark:text-gray-400", :fill "currentColor", :viewbox "0 0 20 20", :xmlns "http://www.w3.org/2000/svg"} - [:path {:fill-rule "evenodd", :d "M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z", :clip-rule "evenodd"}]]] - [:input {:type "text", :name "email", :id "topbar-search", :class "bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full pl-10 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500", :placeholder "Search"}]]]] + [:button.mt-1.lg:w-96.relative.hidden.lg:block {:class "bg-gray-50 hover:bg-gray-200 dark:hover:bg-gray-700 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 w-full pl-10 py-4 pr-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500 gap-4 " + :hx-get (bidi/path-for ssr-routes/only-routes + :search) + :hx-target "#modal-content" + :hx-swap "innerHTML"} + [:div {:class "absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none text-gray-500"} + [:div.w-4.h-4 svg/search] + [:span.ml-2 "Search"]]]] [:div {:class "flex items-center gap-4"} [:div {:class "hidden mr-3 -mb-1 sm:block"} [:span]] - [:button {:id "toggleSidebarMobileSearch", :type "button", :class "p-2 text-gray-500 rounded-lg lg:hidden hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"} - [:span {:class "sr-only"} "Search"] - [:svg {:class "w-6 h-6", :fill "currentColor", :viewbox "0 0 20 20", :xmlns "http://www.w3.org/2000/svg"} - [:path {:fill-rule "evenodd", :d "M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z", :clip-rule "evenodd"}]]] + (icon-button- + {:id "toggleSidebarMobileSearch", :type "button", :class "p-2 text-gray-500 rounded-lg lg:hidden hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white" + :hx-get (bidi/path-for ssr-routes/only-routes + :search) + :hx-target "#modal-content" + :hx-swap "innerHTML"} + svg/search) + #_[:button + [:div.w-4.h-4 svg/search]] + - (icon-button- {} [:div.w-4.h-4 svg/search]) #_[:button {:type "button", :data-dropdown-toggle "apps-dropdown", :class "hidden p-2 text-gray-500 rounded-lg sm:flex hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-700"} [:span {:class "sr-only"} "View notifications"] [:svg {:class "w-6 h-6", :fill "currentColor", :viewbox "0 0 20 20", :xmlns "http://www.w3.org/2000/svg"} diff --git a/src/clj/auto_ap/ssr/components/page.clj b/src/clj/auto_ap/ssr/components/page.clj index 2f588073..c1037992 100644 --- a/src/clj/auto_ap/ssr/components/page.clj +++ b/src/clj/auto_ap/ssr/components/page.clj @@ -1,6 +1,7 @@ (ns auto-ap.ssr.components.page (:require [auto-ap.ssr.components.navbar :refer [navbar-]] - [auto-ap.ssr.components.aside :refer [left-aside-]])) + [auto-ap.ssr.components.aside :refer [left-aside-]] + [hiccup2.core :as hiccup])) (defn page- [{:keys [nav page-specific]} & children] [:div#app @@ -14,7 +15,10 @@ [:div.p-4] children)]] [:div#modal-holder.hidden + {"_" (hiccup/raw "on click trigger closeDialog")} [:div { :tabindex "-1", :class "fixed top-0 left-0 right-0 z-50 w-full p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-[calc(100%-1rem)] max-h-full flex justify-center "} - [:div {:class "relative w-full max-w-2xl max-h-full"} + [:div {:class "relative w-full max-w-2xl max-h-full" + "_" (hiccup/raw "on click halt the event")} [:div#modal-content ]]] - [:div {:class "bg-gray-900 bg-opacity-50 dark:bg-opacity-80 fixed inset-0 z-40"}]]]) + [:div {:class "bg-gray-900 bg-opacity-50 dark:bg-opacity-80 fixed inset-0 z-40" + }]]]) diff --git a/src/clj/auto_ap/ssr/components/tags.clj b/src/clj/auto_ap/ssr/components/tags.clj new file mode 100644 index 00000000..7f80cb98 --- /dev/null +++ b/src/clj/auto_ap/ssr/components/tags.clj @@ -0,0 +1,18 @@ +(ns auto-ap.ssr.components.tags) + + +(defn pill- [params & children] + (into + [:span (cond-> params + true (update :class str " text-xs font-medium px-2 py-0.5 rounded whitespace-nowrap") + + (= :primary (:color params)) + (update :class str " bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300 ") + + (= :secondary (:color params)) + (update :class str " bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300 ") + + (= :yellow (:color params)) + (update :class str " bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300") + )] + children)) diff --git a/src/clj/auto_ap/ssr/search.clj b/src/clj/auto_ap/ssr/search.clj index 40cc40d3..f50e34ee 100644 --- a/src/clj/auto_ap/ssr/search.clj +++ b/src/clj/auto_ap/ssr/search.clj @@ -5,7 +5,9 @@ [auto-ap.ssr.utils :refer [html-response]] [auto-ap.time :as atime] [clojure.string :as str] - [com.brunobonacci.mulog :as mu])) + [com.brunobonacci.mulog :as mu] + [auto-ap.ssr.components :as com] + [auto-ap.ssr.svg :as svg])) (defn try-cleanse-date [d] (try @@ -60,58 +62,65 @@ (let [results (search-results q id)] [:div (if (seq results) - (for [doc results] - [:div.block - [:div.card - [:div.card-header.has-background-info-light - (cond (= "transaction" (:type doc)) - [:div.card-header-icon.icon-task-list-text-1] + [:div.flex.gap-8.flex-col + (for [doc results] + (com/card {} + [:div.flex.flex-col.gap-4 + [:div.flex.items-center.p-2.gap-4.bg-gray-50.dark:bg-gray-800 + [:div.h-8.w-8.p-2 + (cond (= "transaction" (:type doc)) + svg/bank + - (= "invoice" (:type doc)) - [:div.card-header-icon.icon-accounting-invoice-mail] + (= "invoice" (:type doc)) + svg/accounting-invoice-mail + - (= "payment" (:type doc)) - [:div.card-header-icon.icon-check-payment-sign] + (= "payment" (:type doc)) + svg/payments - (= "journal-entry" (:type doc)) - [:div.card-header-icon.icon-receipt] + (= "journal-entry" (:type doc)) + svg/receipt - :else - nil) - [:div.card-header-title (clojure.string/capitalize (:type doc)) - " " - " " - [:span.tags.ml-3 - [:span.tag.is-warning "client: " (:client_code doc)] - [:span.tag.is-info "amount: $" (first (:amount doc))] + :else + nil)] + (clojure.string/capitalize (:type doc)) + (com/pill {:color :primary} + "client: " (:client_code doc)) + (com/pill {:color :secondary} + "amount: $" (first (:amount doc))) (when-let [vendor-name (first (:vendor_name doc))] - [:span.tag.is-primary "vendor: " vendor-name])]] - [:a.card-header-icon.fa.fa-external-link {:href (str "/" (cond (= "invoice" - (:type doc)) - "invoices" + (com/pill {:color :yellow} + "vendor: " vendor-name)) + [:div + (com/link {:href (str "/" (cond (= "invoice" + (:type doc)) + "invoices" - (= "transaction" - (:type doc)) - "transactions" + (= "transaction" + (:type doc)) + "transactions" - (= "journal-entry" - (:type doc)) - "ledger" + (= "journal-entry" + (:type doc)) + "ledger" - :else - "payments") "/?exact-match-id=" (:id doc)) - :target "_blank"}] - ] - - - [:div.card-content - [:span + :else + "payments") "/?exact-match-id=" (:id doc)) + :target "_blank"} + [:div.h-8.w-8.p-2 + svg/external-link])] + ] - [:strong (atime/unparse (atime/parse (:date doc) atime/solr-date) atime/normal-date)] - ": " - (str (or (first (:description doc)) - (first (:number doc))))]]]] - ) + + [:div.px-4.pb-2 + [:span + + [:strong (atime/unparse (atime/parse (:date doc) atime/solr-date) atime/normal-date)] + ": " + (str (or (first (:description doc)) + (first (:number doc))))]]]) + )] [:div.block "No results found."])])) (defn dialog-contents [request] @@ -121,22 +130,26 @@ (if-let [q (get (:form-params request) "q")] (html-response (search-results* q (:identity request))) (html-response - [:div#search {:style {:height "400px" :overflow "auto"}} - - [:div.block - [:input#search-input.input {:type "search" - :placeholder "5/5/2034 Magheritas" - :name "q" - :hx-post "/search" - :hx-trigger "keyup changed delay:300ms, search" - :hx-target "#search-results" - :hx-indicator "#search" - :value (:q (:params request)) - :autofocus true}]] - [:i "Try dates, numbers, vendors. To filter to specific entity type, use 'invoice', 'transaction', 'journal-entry', 'payment'."] - [:style - ".htmx-request #search-results {display: none} .htmx-request .htmx-indicator { display: block !important; }"] - [:div#search-results - ] - [:div.loader.is-loading.big.htmx-indicator {:style {:display "none"}}]]))) + (com/dialog + [:div.p-2 "Search"] + [:div#search.overflow-auto.space-y-6.p-2.h-96 + + (com/text-input {:id "search-input" + :type "search" + :placeholder "5/5/2034 Magheritas" + :name "q" + :hx-post "/search" + :hx-trigger "keyup changed delay:300ms, search" + :hx-target "#search-results" + :hx-indicator "#search" + :value (:q (:params request)) + :autofocus true}) + [:i.text-sm.text-gray-600.dark:text-gray-50 "Try dates, numbers, vendors. To filter to specific type, use 'invoice', 'transaction', 'journal-entry', 'payment'."] + #_[:style + ".htmx-request #search-results {display: none} .htmx-request .htmx-indicator { display: block !important; }"] + [:div#search-results + ] + [:div.loader.is-loading.big.htmx-indicator ]] + nil) + :headers {"hx-trigger" "openDialog"}))) diff --git a/src/clj/auto_ap/ssr/svg.clj b/src/clj/auto_ap/ssr/svg.clj index a157b6b9..9cd986b7 100644 --- a/src/clj/auto_ap/ssr/svg.clj +++ b/src/clj/auto_ap/ssr/svg.clj @@ -140,3 +140,56 @@ [:line {:stroke "currentColor", :fill "none", :stroke-linejoin "round", :y1 "0.75", :stroke-linecap "round", :stroke-width "1.5px", :x1 "12", :y2 "2.25", :x2 "12"}] [:line {:stroke "currentColor", :fill "none", :stroke-linejoin "round", :y1 "23.25", :stroke-linecap "round", :stroke-width "1.5px", :x1 "0.75", :y2 "23.25", :x2 "23.25"}] [:line {:stroke "currentColor", :fill "none", :stroke-linejoin "round", :y1 "20.25", :stroke-linecap "round", :stroke-width "1.5px", :x1 "2", :y2 "20.25", :x2 "22"}]]]) + +(def external-link + [:svg + {:xmlns "http://www.w3.org/2000/svg", :viewBox "0 0 24 24"} + [:defs] + [:title "navigation-next"] + [:path + {:d "M23,9.5H12.387a4,4,0,0,0-4,4v2", + :fill "none", + :stroke "currentColor", + :stroke-linecap "round", + :stroke-linejoin "round"}] + [:polyline + {:points "19 13.498 23 9.498 19 5.498", + :fill "none", + :stroke "currentColor", + :stroke-linecap "round", + :stroke-linejoin "round"}] + [:path + {:d + "M14.387,13v5.5a1,1,0,0,1-1,1h-12a1,1,0,0,1-1-1V6.5a1,1,0,0,1,1-1h12a1,1,0,0,1,1,1V7", + :fill "none", + :stroke "currentColor", + :stroke-linecap "round", + :stroke-linejoin "round"}]]) + +(def pencil + [:svg + {:xmlns "http://www.w3.org/2000/svg", :viewBox "0 0 24 24"} + [:defs] + [:title "pencil"] + [:rect + {:y "1.09", + :stroke "currentColor", + :transform "translate(11.889 -5.238) rotate(45)", + :fill "none", + :stroke-linejoin "round", + :width "6", + :stroke-linecap "round", + :x "9.268", + :height "21.284"}] + [:polygon + {:points "2.621 17.136 0.5 23.5 6.864 21.379 2.621 17.136", + :fill "none", + :stroke "currentColor", + :stroke-linecap "round", + :stroke-linejoin "round"}] + [:path + {:d "M21.914,6.328,17.672,2.086l.707-.707a3,3,0,0,1,4.242,4.242Z", + :fill "none", + :stroke "currentColor", + :stroke-linecap "round", + :stroke-linejoin "round"}]]) diff --git a/src/clj/auto_ap/ssr/ui.clj b/src/clj/auto_ap/ssr/ui.clj index 1b0b826b..619fc952 100644 --- a/src/clj/auto_ap/ssr/ui.clj +++ b/src/clj/auto_ap/ssr/ui.clj @@ -1,9 +1,5 @@ (ns auto-ap.ssr.ui (:require - [auto-ap.client-routes :as client-routes] - [auto-ap.ssr.company-dropdown :as company-dropdown] - [auto-ap.ssr.login-dropdown :as login-dropdown] - [bidi.bidi :as bidi] [hiccup2.core :as hiccup])) (defn html-page [hiccup] @@ -23,18 +19,9 @@ [:meta {:http-equiv "X-UA-Compatible", :content "IE=edge"}] [:meta {:name "viewport", :content "width=device-width, initial-scale=1"}] [:title "Integreat"] - [:link {:rel "stylesheet", :href "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css", :integrity "sha256-eZrrJcwDc/3uDhsdt61sL2oOBY362qM3lon1gyExkL0=", :crossorigin "anonymous"}] [:link {:href "/css/font.min.css", :rel "stylesheet"}] - #_[:link {:rel "stylesheet", :href "/css/bulma.min.css"}] - [:link {:rel "stylesheet", :href "/css/bulma-calendar.min.css"}] - [:link {:rel "stylesheet", :href "/css/bulma-badge.min.css"}] [:link {:rel "stylesheet", :href "/css/react-datepicker.min.inc.css"}] [:link {:rel "stylesheet", :href "/output.css"}] - [:link {:rel "stylesheet", :href "/css/animate.css"}] - [:link {:rel "stylesheet", :href "/finance-font/style.css"}] - #_[:link {:rel "stylesheet", :href "/css/main.css"}] - #_[:link {:rel "stylesheet", :href "https://unpkg.com/placeholder-loading/dist/css/placeholder-loading.min.css"}] - #_[:link {:rel "stylesheet", :href "https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.2.7/dist/css/autoComplete.min.css"}] [:script {:src "https://unpkg.com/hyperscript.org@0.9.7"}] [:script {:src "https://unpkg.com/@popperjs/core@2"}] #_[:script {:src "https://unpkg.com/htmx.org@1.8.4"