From 554d0af35e7eab5aefb281952af6b6ecf9127e81 Mon Sep 17 00:00:00 2001 From: Bryce Date: Mon, 25 Mar 2024 22:02:11 -0700 Subject: [PATCH] Fixes the sidebar's jank --- src/clj/auto_ap/ssr/components/aside.clj | 288 +++++++++--------- .../auto_ap/ssr/pos/cash_drawer_shifts.clj | 5 +- 2 files changed, 150 insertions(+), 143 deletions(-) diff --git a/src/clj/auto_ap/ssr/components/aside.clj b/src/clj/auto_ap/ssr/components/aside.clj index 969fe339..2a535c20 100644 --- a/src/clj/auto_ap/ssr/components/aside.clj +++ b/src/clj/auto_ap/ssr/components/aside.clj @@ -44,6 +44,7 @@ :class (fnil hh/add-class "") "space-y-1.5 max-h-0 transition transition-all overflow-hidden") true (assoc ":class" (format "selected == '%s' ? 'py-0.5' : 'py-0'" (:selector params)) :x-ref "submenu" + :style (cond-> {} (:active? params) (assoc "max-height" "400px")) ":style" (format "selected == '%s' ? 'max-height: ' + $refs.submenu.scrollHeight + 'px' : ''" (:selector params)))) (for [c children] [:li @@ -51,6 +52,8 @@ (hh/add-class (or c "") " flex items-center p-2 pl-11 w-full text-base font-normal rounded-lg transition duration-75 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700")))])]) (defn left-aside- [{:keys [nav page-specific]} & children] + + (Thread/sleep 500) [:aside {:id "left-nav", :class "fixed top-0 left-0 pt-16 z-20 w-64 h-screen transition-transform", "x-transition:enter" "transition duration-500" @@ -67,9 +70,9 @@ [:template {:x-teleport "body"} [:div.fixed.inset-0.lg:hidden {:x-show "leftNavShow" :x-transition:enter "transition duration-500" :x-transition:enter-start "opacity-0" :x-transition:enter-end "opacity-100" - :x-transition:leave "transition duration-500" :x-transition:leave-start "opacity-100" :x-transition:leave-end "opacity-0" + :x-transition:leave "transition duration-500" :x-transition:leave-start "opacity-100" :x-transition:leave-end "opacity-0" "@click.capture.prevent" "leftNavShow=false"} - [:div.fixed.inset-0.bg-gray-800.z-10.opacity-70 ]]] + [:div.fixed.inset-0.bg-gray-800.z-10.opacity-70]]] [:div {:class "overflow-y-auto py-5 px-3 h-full bg-gray-50 border-r border-gray-200 dark:bg-gray-800 dark:border-gray-700"} nav @@ -80,158 +83,163 @@ page-specific])]]) (defn main-aside-nav- [request] - [:ul {:class "space-y-1" - :x-data (hx/json {:selected - (cond - (#{::invoice-route/all-page ::invoice-route/unpaid-page ::invoice-route/voided-page ::invoice-route/paid-page} (:matched-route request)) - "invoices" + (let [selected (cond + (#{::invoice-route/all-page ::invoice-route/unpaid-page ::invoice-route/voided-page ::invoice-route/paid-page} (:matched-route request)) + "invoices" - (#{:pos-sales :pos-expected-deposits :pos-tenders :pos-refunds :pos-cash-drawer-shifts} (:matched-route request)) - "sales" - (#{::payment-routes/all-page ::payment-routes/pending-page ::payment-routes/cleared-page ::payment-routes/voided-page } (:matched-route request)) - "payments" - :else - nil)})} + (#{:pos-sales :pos-expected-deposits :pos-tenders :pos-refunds :pos-cash-drawer-shifts} (:matched-route request)) + "sales" + (#{::payment-routes/all-page ::payment-routes/pending-page ::payment-routes/cleared-page ::payment-routes/voided-page } (:matched-route request)) + "payments" + :else + nil)] + [:ul {:class "space-y-1" + :x-data (hx/json {:selected selected})} - [:li - (menu-button- {:icon svg/pie - :href "/"} - "Dashboard")] + [:li + (menu-button- {:icon svg/pie + :href "/"} + "Dashboard")] - (menu-button- {"@click.prevent" "if (selected == 'invoices') {selected = null } else { selected = 'invoices'} " - :icon svg/accounting-invoice-mail} - "Invoices") - (sub-menu- - {:selector "invoices"} - (menu-button- {:href (hu/url (bidi/path-for ssr-routes/only-routes - ::invoice-route/all-page) - {:date-range "month"}) - :active? (= ::invoice-route/all-page (:matched-route request)) - :hx-boost true} + (menu-button- {"@click.prevent" "if (selected == 'invoices') {selected = null } else { selected = 'invoices'} " + :icon svg/accounting-invoice-mail} + "Invoices") + (sub-menu- + {:selector "invoices" + :active? (= "invoices" selected)} + (menu-button- {:href (hu/url (bidi/path-for ssr-routes/only-routes + ::invoice-route/all-page) + {:date-range "month"}) + :active? (= ::invoice-route/all-page (:matched-route request)) + :hx-boost "true"} - "All") - (menu-button- {:href (hu/url (bidi/path-for ssr-routes/only-routes - ::invoice-route/paid-page) - {:date-range "month"}) - :active? (= ::invoice-route/paid-page (:matched-route request)) - :hx-boost true} - "Paid") - (menu-button- {:href (hu/url (bidi/path-for ssr-routes/only-routes - ::invoice-route/unpaid-page) - {:date-range "month"}) - :active? (= ::invoice-route/unpaid-page (:matched-route request)) - :hx-boost true} - "Unpaid") - (menu-button- {:href (hu/url (bidi/path-for ssr-routes/only-routes - ::invoice-route/voided-page) - {:date-range "month"}) - :active? (= ::invoice-route/voided-page (:matched-route request)) - :hx-boost true} - "Voided")) + "All") + (menu-button- {:href (hu/url (bidi/path-for ssr-routes/only-routes + ::invoice-route/paid-page) + {:date-range "month"}) + :active? (= ::invoice-route/paid-page (:matched-route request)) + :hx-boost "true"} + "Paid") + (menu-button- {:href (hu/url (bidi/path-for ssr-routes/only-routes + ::invoice-route/unpaid-page) + {:date-range "month"}) + :active? (= ::invoice-route/unpaid-page (:matched-route request)) + :hx-boost "true"} + "Unpaid") + (menu-button- {:href (hu/url (bidi/path-for ssr-routes/only-routes + ::invoice-route/voided-page) + {:date-range "month"}) + :active? (= ::invoice-route/voided-page (:matched-route request)) + :hx-boost "true"} + "Voided")) - (menu-button- {:icon svg/receipt-register-1 + (menu-button- {:icon svg/receipt-register-1 - "@click.prevent" "if (selected == 'sales') {selected = null } else { selected = 'sales'} " } - "Sales") - (sub-menu- {:selector "sales"} - (menu-button- {:href (str (bidi/path-for ssr-routes/only-routes - :pos-sales) - "?date-range=week") - :active? (= :pos-sales (:matched-route request)) - :hx-boost true} - "Sales") - (menu-button- {:href (str (bidi/path-for ssr-routes/only-routes - :pos-expected-deposits) - "?date-range=week") - :active? (= :pos-expected-deposits (:matched-route request)) - :hx-boost true} - "Expected Deposits") - (menu-button- {:href (str (bidi/path-for ssr-routes/only-routes - :pos-tenders) - "?date-range=week") - :active? (= :pos-tenders (:matched-route request)) - :hx-boost true} - "Tenders") + "@click.prevent" "if (selected == 'sales') {selected = null } else { selected = 'sales'} "} + "Sales") + (sub-menu- {:selector "sales" + :active? (= "sales" selected)} + (menu-button- {:href (str (bidi/path-for ssr-routes/only-routes + :pos-sales) + "?date-range=week") + :active? (= :pos-sales (:matched-route request)) + :hx-boost "true"} + "Sales") + (menu-button- {:href (str (bidi/path-for ssr-routes/only-routes + :pos-expected-deposits) + "?date-range=week") + :active? (= :pos-expected-deposits (:matched-route request)) + :hx-boost "true"} + "Expected Deposits") + (menu-button- {:href (str (bidi/path-for ssr-routes/only-routes + :pos-tenders) + "?date-range=week") + :active? (= :pos-tenders (:matched-route request)) + :hx-boost "true"} + "Tenders") - (menu-button- {:href (str (bidi/path-for ssr-routes/only-routes - :pos-refunds) - "?date-range=week") - :active? (= :pos-refunds (:matched-route request)) - :hx-boost true} + (menu-button- {:href (str (bidi/path-for ssr-routes/only-routes + :pos-refunds) + "?date-range=week") + :active? (= :pos-refunds (:matched-route request)) + :hx-boost "true"} - "Refunds") - (menu-button- {:href (str (bidi/path-for ssr-routes/only-routes - :pos-cash-drawer-shifts) - "?date-range=week") - :active? (= :cash-drawer-shifts (:matched-route request)) - :hx-boost true} - "Cash drawer shifts")) + "Refunds") + (menu-button- {:href (str (bidi/path-for ssr-routes/only-routes + :pos-cash-drawer-shifts) + "?date-range=week") + :active? (= :cash-drawer-shifts (:matched-route request)) + :hx-boost "true"} + "Cash drawer shifts")) ;; TODO make specific routes for categories ;; TODO auto-apen sub menus + + (menu-button- {"@click.prevent" "if (selected == 'payments') {selected = null } else { selected = 'payments'} " + :icon svg/payments} + "Payments") + (sub-menu- {:selector "payments" + :active? (= "payments" selected)} + (menu-button- {:href (hu/url (bidi/path-for ssr-routes/only-routes + ::payment-routes/all-page) + {:date-range "month"}) + :active? (= ::payment-routes/all-page (:matched-route request)) + :hx-boost "true"} + "All") - (menu-button- {"@click.prevent" "if (selected == 'payments') {selected = null } else { selected = 'payments'} " - :icon svg/payments} - "Payments") - (sub-menu- {:selector "payments"} - (menu-button- {:href (hu/url (bidi/path-for ssr-routes/only-routes - ::payment-routes/all-page) - {:date-range "month"}) - :active? (= ::payment-routes/all-page (:matched-route request)) - :hx-boost true} - "All") + (menu-button- {:href (hu/url (bidi/path-for ssr-routes/only-routes + ::payment-routes/pending-page) + {:date-range "month"}) + :active? (= ::payment-routes/pending-page (:matched-route request)) + :hx-boost "true"} + "Pending") + (menu-button- {:href (hu/url (bidi/path-for ssr-routes/only-routes + ::payment-routes/cleared-page) + {:date-range "month"}) + :active? (= ::payment-routes/cleared-page (:matched-route request)) + :hx-boost "true"} + "Cleared") + (menu-button- {:href (hu/url (bidi/path-for ssr-routes/only-routes + ::payment-routes/voided-page) + {:date-range "month"}) + :active? (= ::payment-routes/voided-page (:matched-route request)) + :hx-boost "true"} + "Voided")) - (menu-button- {:href (hu/url (bidi/path-for ssr-routes/only-routes - ::payment-routes/pending-page) - { :date-range "month"}) - :active? (= ::payment-routes/pending-page (:matched-route request)) - :hx-boost true} - "Pending") - (menu-button- {:href (hu/url (bidi/path-for ssr-routes/only-routes - ::payment-routes/cleared-page) - { :date-range "month"}) - :active? (= ::payment-routes/cleared-page (:matched-route request)) - :hx-boost true} - "Cleared") - (menu-button- {:href (hu/url (bidi/path-for ssr-routes/only-routes - ::payment-routes/voided-page) - { :date-range "month" }) - :active? (= ::payment-routes/voided-page (:matched-route request)) - :hx-boost true} - "Voided")) + [:li {:x-data (hx/json {:open false})} + (menu-button- {"@click.prevent" "if (selected == 'transactions') {selected = null } else { selected = 'transactions'} " + :icon svg/bank} + "Transactions") - [:li {:x-data (hx/json {:open false})} - (menu-button- {"@click.prevent" "if (selected == 'transactions') {selected = null } else { selected = 'transactions'} " - :icon svg/bank} - "Transactions") + (sub-menu- {:selector "transactions" + :active? (= "transactions" selected)} + (menu-button- {:href (bidi/path-for client-routes/routes + :transactions)} "All") + (menu-button- {:href (bidi/path-for client-routes/routes + :unapproved-transactions)} "Unapproved") + (menu-button- {:href (bidi/path-for client-routes/routes + :requires-feedback-transactions)} "Client Review") + (menu-button- {:href (bidi/path-for client-routes/routes + :approved-transactions)} "Approved") + (menu-button- {:href (bidi/path-for ssr-routes/only-routes + :transaction-insights)} "Insights"))] - (sub-menu- {:selector "transactions"} - (menu-button- {:href (bidi/path-for client-routes/routes - :transactions)} "All") - (menu-button- {:href (bidi/path-for client-routes/routes - :unapproved-transactions)} "Unapproved") - (menu-button- {:href (bidi/path-for client-routes/routes - :requires-feedback-transactions)} "Client Review") - (menu-button- {:href (bidi/path-for client-routes/routes - :approved-transactions)} "Approved") - (menu-button- {:href (bidi/path-for ssr-routes/only-routes - :transaction-insights)} "Insights"))] - - (menu-button- {"@click.prevent" "if (selected == 'ledger') {selected = null } else { selected = 'ledger'} " - :icon svg/receipt} - "Ledger") - (sub-menu- {:selector "ledger"} - (menu-button- {:href (bidi/path-for client-routes/routes - :ledger)} "Register") - (menu-button- {:href (bidi/path-for client-routes/routes - :profit-and-loss)} "Profit & Loss") - (menu-button- {:href (bidi/path-for client-routes/routes - :profit-and-loss-detail)} "Profit & Loss Detail") - (menu-button- {:href (bidi/path-for client-routes/routes - :cash-flows)} "Cash Flows") - (menu-button- {:href (bidi/path-for client-routes/routes - :balance-sheet)} "Balance Sheet") - (menu-button- {:href (bidi/path-for client-routes/routes - :external-import-ledger)} "External Ledger Import"))]) + (menu-button- {"@click.prevent" "if (selected == 'ledger') {selected = null } else { selected = 'ledger'} " + :icon svg/receipt} + "Ledger") + (sub-menu- {:selector "ledger" + :active? (= "ledger" selected)} + (menu-button- {:href (bidi/path-for client-routes/routes + :ledger)} "Register") + (menu-button- {:href (bidi/path-for client-routes/routes + :profit-and-loss)} "Profit & Loss") + (menu-button- {:href (bidi/path-for client-routes/routes + :profit-and-loss-detail)} "Profit & Loss Detail") + (menu-button- {:href (bidi/path-for client-routes/routes + :cash-flows)} "Cash Flows") + (menu-button- {:href (bidi/path-for client-routes/routes + :balance-sheet)} "Balance Sheet") + (menu-button- {:href (bidi/path-for client-routes/routes + :external-import-ledger)} "External Ledger Import"))])) (defn company-aside-nav- [_] diff --git a/src/clj/auto_ap/ssr/pos/cash_drawer_shifts.clj b/src/clj/auto_ap/ssr/pos/cash_drawer_shifts.clj index c99eb9ba..8c27993b 100644 --- a/src/clj/auto_ap/ssr/pos/cash_drawer_shifts.clj +++ b/src/clj/auto_ap/ssr/pos/cash_drawer_shifts.clj @@ -84,10 +84,9 @@ matching-count])) (def grid-page - {} - #_(helper/build + (helper/build {:id "cash-drawer-shift-table" - :nav (com/main-aside-nav) + :nav com/main-aside-nav :page-specific-nav filters :fetch-page fetch-page :oob-render