From c67daaf676d5ef1c958c0067654a878a3ed55786 Mon Sep 17 00:00:00 2001 From: Bryce Covert Date: Mon, 3 Aug 2020 22:16:01 -0700 Subject: [PATCH] adding styling to vendors page. --- src/cljs/auto_ap/views/components/grid.cljs | 6 +- .../auto_ap/views/pages/admin/accounts.cljs | 21 +- .../auto_ap/views/pages/admin/vendors.cljs | 186 +++++++----------- .../views/pages/admin/vendors/side_bar.cljs | 68 +++++++ 4 files changed, 162 insertions(+), 119 deletions(-) create mode 100644 src/cljs/auto_ap/views/pages/admin/vendors/side_bar.cljs diff --git a/src/cljs/auto_ap/views/components/grid.cljs b/src/cljs/auto_ap/views/components/grid.cljs index f167e5ce..0e939efa 100644 --- a/src/cljs/auto_ap/views/components/grid.cljs +++ b/src/cljs/auto_ap/views/components/grid.cljs @@ -204,9 +204,9 @@ (r/children (r/current-component)))))) (defn virtual-paginate [start xs ] - (take 100 (drop start xs))) + (take 100 (drop (or start 0) xs))) (defn virtual-paginate-controls [start xs] - {:start start :end (min (+ start 100) - (count xs)) + {:start (or start 0) :end (min (+ (or start 0) 100) + (count xs)) :total (count xs)}) diff --git a/src/cljs/auto_ap/views/pages/admin/accounts.cljs b/src/cljs/auto_ap/views/pages/admin/accounts.cljs index 68500e3b..c3b6e1ca 100644 --- a/src/cljs/auto_ap/views/pages/admin/accounts.cljs +++ b/src/cljs/auto_ap/views/pages/admin/accounts.cljs @@ -11,7 +11,8 @@ [re-frame.core :as re-frame] [auto-ap.views.components.grid :as grid] [auto-ap.status :as status] - [auto-ap.views.components.buttons :as buttons])) + [auto-ap.views.components.buttons :as buttons] + [reagent.core :as reagent])) (re-frame/reg-event-db ::edit-completed @@ -29,6 +30,11 @@ (fn [db] (-> db ::params))) +(re-frame/reg-event-fx + ::unmounted + (fn [{:keys [db]} _] + {:db (dissoc db ::params)})) + (defn accounts-table [{:keys [accounts]}] (let [status @(re-frame/subscribe [::status/single ::page]) opc (fn [p] @@ -80,7 +86,12 @@ [accounts-table {:accounts accounts}]])]) (defn admin-accounts-page [] - (let [{:keys [active?]} @(re-frame/subscribe [::forms/form ::account-form/form])] - [side-bar-layout {:side-bar [admin-side-bar {}] - :main [admin-accounts-content] - :right-side-bar [appearing-side-bar {:visible? active?} [account-form/form ]]}])) + (reagent/create-class + {:display-name "accounts-page" + :component-will-unmount #(re-frame/dispatch [::unmounted]) + :reagent-render + (fn [] + (let [{:keys [active?]} @(re-frame/subscribe [::forms/form ::account-form/form])] + [side-bar-layout {:side-bar [admin-side-bar {}] + :main [admin-accounts-content] + :right-side-bar [appearing-side-bar {:visible? active?} [account-form/form ]]}]))})) diff --git a/src/cljs/auto_ap/views/pages/admin/vendors.cljs b/src/cljs/auto_ap/views/pages/admin/vendors.cljs index 0c981a53..7be7076c 100644 --- a/src/cljs/auto_ap/views/pages/admin/vendors.cljs +++ b/src/cljs/auto_ap/views/pages/admin/vendors.cljs @@ -1,9 +1,9 @@ (ns auto-ap.views.pages.admin.vendors - (:require-macros [cljs.core.async.macros :refer [go]] - [auto-ap.entities.vendors :as vendor]) - (:require [re-frame.core :as re-frame] +(:require [re-frame.core :as re-frame] [reagent.core :as reagent] [clojure.string :as str] + [auto-ap.views.components.buttons :as buttons] + [auto-ap.views.pages.admin.vendors.side-bar :as side-bar] [auto-ap.subs :as subs] [auto-ap.events :as events] [auto-ap.forms :as forms] @@ -11,89 +11,21 @@ [auto-ap.entities.vendors :as entity] [auto-ap.views.components.address :refer [address-field]] [auto-ap.views.components.vendor-dialog :refer [vendor-dialog] :as vendor-dialog] - + [auto-ap.views.components.grid :as grid] [auto-ap.views.components.modal :refer [modal action-modal]] [auto-ap.views.components.admin.side-bar :refer [admin-side-bar]] [auto-ap.views.components.layouts :refer [side-bar-layout]] [clojure.spec.alpha :as s] - [auto-ap.views.utils :refer [login-url dispatch-value-change dispatch-event bind-field horizontal-field]] + [auto-ap.views.utils :refer [login-url dispatch-value-change dispatch-event bind-field horizontal-field action-cell-width]] [auto-ap.views.components.typeahead :refer [typeahead]] [cljs.reader :as edn] [auto-ap.routes :as routes] - [bidi.bidi :as bidi])) + [bidi.bidi :as bidi]) + (:require-macros [cljs.core.async.macros :refer [go]] + [auto-ap.entities.vendors :as vendor])) -(re-frame/reg-event-fx - ::new - (fn [{:keys [db]} _] - {:db (assoc-in db [:admin :vendor] - {}) - :dispatch [::events/modal-status ::admin-vendor {:visible? true}]})) - - - - - -(re-frame/reg-event-fx - ::remind - (fn [{:keys [db] :as fx} [_ id]] - { :http {:method :post - :token (:user db) - :headers {"Content-Type" "application/edn"} - :uri (str "/api/vendors/" id "/remind") - :on-success [::reminder-sent] - :on-error [::failed "Failed to send reminder"]} - :db (assoc-in db [:admin :banner] nil)})) - -(re-frame/reg-event-db - ::reminder-sent - (fn [db [_ error]] - (-> db - (assoc-in [:admin :banner] "Reminder sent!")))) - -(re-frame/reg-event-db - ::failed - (fn [db [_ error]] - (-> db - (assoc-in [:admin :banner] error)))) - -(re-frame/reg-event-fx - ::save-complete - (fn [{:keys [db]} [_ {vendor :upsert-vendor} ]] - {:dispatch [::events/modal-completed ::admin-vendor ] - :db (-> db - - (assoc-in [:admin :vendor] nil) - (assoc-in [:vendors (:id vendor)] vendor))})) - -(re-frame/reg-event-db - ::save-error - (fn [db [_ vendor]] - (-> db - (assoc-in [:admin :vendor :error] true) - (assoc-in [:admin :vendor :saving?] false)))) - -(re-frame/reg-event-db - ::change - (fn [db [_ path value]] - (assoc-in db (concat [:admin :vendor] path) - value))) - -(re-frame/reg-event-db - ::add-relationship - (fn [db [_ ]] - (-> db - (update-in [:admin :vendor :relationships] #(conj (or % []) - {:account-number (get-in db [:admin :vendor :new-relationship-account-number]) - :client-id (get-in db [:admin :vendor :new-relationship-client])})) - (update-in [:admin :vendor] dissoc :new-relationship-account-number :new-relationship-client)))) - -(re-frame/reg-event-db - ::remove-relationship - (fn [db [_ i]] - (-> db - (update-in [:admin :vendor :relationships] #(vec (concat (subvec % 0 i) (subvec % (min (count %) (inc i))))))))) (re-frame/reg-event-fx ::mounted @@ -108,32 +40,71 @@ (assoc db :vendors (by :id (:vendor vendors ))))) -(defn invalid-fields [spec v] - (set (mapcat :in (::s/problems (s/explain-data spec v))))) +(re-frame/reg-event-db + ::table-params-changed + (fn [db [_ p]] + (assoc db ::table-params p))) + +(re-frame/reg-sub + ::table-params + (fn [db] + (-> db ::table-params))) + +(re-frame/reg-event-fx + ::unmounted + (fn [{:keys [db]} _] + {:db (dissoc db ::table-params ::side-bar/filter-params)})) + +(re-frame/reg-sub + ::params + :<- [::side-bar/filter-params] + :<- [::table-params] + (fn [[filter-params table-params]] + (println "TABLE params" table-params) + (cond-> {} + (seq filter-params) (merge filter-params) + (seq table-params) (merge table-params)))) + + +(re-frame/reg-sub + ::vendor-page + :<- [::params] + :<- [::subs/sorted-all-vendors] + (fn [[params all-vendors]] + (let [matching-vendors (cond->> all-vendors + (:name params) (filter #(str/includes? (str/lower-case (:name %)) (str/lower-case (:name params)))))] + (assoc (grid/virtual-paginate-controls (:start params ) matching-vendors) + :data (grid/virtual-paginate (:start params) matching-vendors))))) (defn vendors-table [] - (let [vendors (re-frame/subscribe [::subs/sorted-all-vendors])] - [:table {:class "table", :style {:width "100%"}} - [:thead - [:tr - [:th "Name"] - [:th "Email"] - [:th "Invoice Reminders"] - [:th]]] - [:tbody (for [v @vendors] - ^{:key (str (:id v))} - [:tr {:on-click (dispatch-event [::vendor-dialog/started v]) - :style {"cursor" "pointer"}} - [:td (:name v)] - [:td (:primary-email v)] - [:td (:invoice-reminder-schedule v)] - [:td - (when (:primary-email v) - [:button.button.is-primary.is-outlined - - {:on-click (dispatch-event [::events/remind (:id v)]) - :href "#"} - [:span.icon [:i.fa.fa-share-square]] [:span "Send Reminder"]])]])]])) + (let [vendor-page @(re-frame/subscribe [::vendor-page]) + params @(re-frame/subscribe [::params]) + accounts @(re-frame/subscribe [::subs/all-accounts-by-id]) + ] + + [grid/grid {:status nil + :on-params-change (fn [p] + (re-frame/dispatch [::table-params-changed p])) + :params params + :column-count 4} + [grid/controls vendor-page] + [grid/table {:fullwidth true} + [grid/header + [grid/row {} + [grid/header-cell {} "Name"] + [grid/header-cell {} "Email"] + [grid/header-cell {} "Default Account"] + [grid/header-cell {:style {:width (action-cell-width 1)}}]]] + [grid/body + (for [v (:data vendor-page)] + ^{:key (str (:id v))} + [grid/row {:class (:class v)} + [grid/cell {} (:name v)] + [grid/cell {} (:email (:primary-contact v))] + [grid/cell {} (-> v :default-account :id accounts :name)] + [grid/cell {} + [buttons/fa-icon {:event [::vendor-dialog/started v] + :icon "fa-pencil"}]]])]]])) (defn danger-for [[dom {:keys [field subscription class] :as keys} & rest]] (let [keys (assoc keys :class (str class @@ -219,20 +190,13 @@ editing-vendor (:vendor @(re-frame/subscribe [::subs/admin]))] [:div [:h1.title "Vendors"] - [:a.button.is-primary.is-large {:on-click (dispatch-event [::merge-clicked])} "Merge vendors"] + [:div.is-pulled-right [:a.button.is-primary.is-outlined {:on-click (dispatch-event [::merge-clicked])} "Merge vendors"]] [vendors-table] - - [:div.is-pulled-right - [:a.button.is-primary.is-large {:on-click (dispatch-event [::vendor-dialog/started {}])} "New vendor"]] - [merge-vendors-dialog] - #_[vendor-dialog {:vendor editing-vendor - :save-event [::events/save] - :change-event ::events/change - :form ::admin-vendor - :id ::admin-vendor}]])]) + [merge-vendors-dialog]])]) {:component-did-mount (fn [] (re-frame/dispatch [::mounted]))})]) (defn admin-vendors-page [] - [side-bar-layout {:side-bar [admin-side-bar {}] + [side-bar-layout {:side-bar [admin-side-bar {} + [side-bar/vendor-side-bar]] :main [admin-vendors-content]}]) diff --git a/src/cljs/auto_ap/views/pages/admin/vendors/side_bar.cljs b/src/cljs/auto_ap/views/pages/admin/vendors/side_bar.cljs new file mode 100644 index 00000000..9bdcd612 --- /dev/null +++ b/src/cljs/auto_ap/views/pages/admin/vendors/side_bar.cljs @@ -0,0 +1,68 @@ +(ns auto-ap.views.pages.admin.vendors.side-bar + (:require + [re-frame.core :as re-frame] + [auto-ap.subs :as subs] + [auto-ap.views.utils :refer [active-when dispatch-value-change]] + [auto-ap.views.components.typeahead :refer [typeahead-entity]])) + +(re-frame/reg-sub + ::specific-filters + (fn [db ] + (::filters db nil))) + +(re-frame/reg-sub + ::filters + :<- [::specific-filters] + :<- [::subs/vendors-by-id] + :<- [::subs/query-params] + (fn [[specific-filters vendors-by-id query-params] ] + (let [url-filters (-> query-params + (select-keys #{:name}))] + (merge url-filters specific-filters )))) + +(re-frame/reg-sub + ::filter + :<- [::filters] + (fn [filters [_ which]] + (get filters which))) + +(re-frame/reg-sub + ::settled-filters + (fn [db ] + (::settled-filters db))) + +(re-frame/reg-sub + ::filter-params + :<- [::settled-filters] + :<- [::subs/active-page] + (fn [[filters ap ]] + {:name (:name filters)})) + +(re-frame/reg-event-fx + ::filters-settled + (fn [{:keys [db]} [_ & params]] + {:db (assoc db ::settled-filters @(re-frame/subscribe [::filters]))})) + +(re-frame/reg-event-fx + ::filter-changed + (fn [{:keys [db]} [_ & params]] + (let [[a b c] params + [which val] (if (= 3 (count params)) + [(into [a] b) c] + [[a] b])] + {:db (assoc-in db (into [::filters] which) val) + :dispatch-debounce {:event [::filters-settled] + :time 800 + :key ::filters}}))) + + +(defn vendor-side-bar [] + [:div + [:p.menu-label "Name"] + + [:div.field + [:div.control [:input.input {:placeholder "Harry's Food Products" + :value @(re-frame/subscribe [::filter :name]) + :on-change (dispatch-value-change [::filter-changed :name])} ]]]]) + +