Skip to content

Commit

Permalink
fix: color-list passthrough in admin, editing icon in text-field
Browse files Browse the repository at this point in the history
  • Loading branch information
@mhuebert
mhuebert committed Jan 12, 2024
1 parent 8211dd5 commit db64e41
Show file tree
Hide file tree
Showing 5 changed files with 119 additions and 107 deletions.
3 changes: 2 additions & 1 deletion src/sb/app/entity/data.cljc
View file
Expand Up @@ -169,7 +169,8 @@
(defn persisted-value [?field]
(if-let [{:keys [db/id attribute]} (when (:field/persisted? ?field) ?field)]
(get (db/entity id) attribute)
(:init ?field)
(or (:init ?field)
(:default ?field))
#_(throw-no-persistence! ?field)))

(q/defx save-attribute!
Expand Down
41 changes: 22 additions & 19 deletions src/sb/app/field/admin_ui.cljc
View file
Expand Up @@ -17,7 +17,8 @@
[yawn.hooks :as h]
[yawn.view :as v]))

(ui/defview show-option [use-order {:as ?option :syms [?label ?value ?color]}]
(ui/defview show-option [{:as props :keys [option/use-order]}
{:as ?option :syms [?label ?value ?color]}]
(let [{:keys [drag-handle-props drag-subject-props drop-indicator]} (use-order ?option)]
[:div.flex.gap-2.items-center.group.relative.-ml-6.py-1
(merge {:key @?value}
Expand All @@ -37,7 +38,7 @@
:style {:background-color @?color
:color (color/contrasting-text-color @?color)}}]
[:div.relative.w-10.focus-within-ring.rounded.overflow-hidden.self-stretch
[field.ui/color-field ?color nil]]
[field.ui/color-field ?color props]]
[radix/dropdown-menu {:id :field-option
:trigger [:button.p-1.relative.icon-gray.cursor-default.rounded.hover:bg-gray-200.self-stretch
[icons/ellipsis-horizontal "w-4 h-4"]]
Expand All @@ -50,14 +51,14 @@
(radix/close-alert!)))}))}
(t :tr/remove)]]}]]))

(ui/defview options-editor [?options]
(ui/defview options-editor [?options props]
(let [use-order (ui/use-orderable-parent ?options {:axis :y})]
[:div.col-span-2.flex-v.gap-3
[:label.field-label (t :tr/options)]
(when (:loading? ?options)
[:div.loading-bar.absolute.h-1.top-0.left-0.right-0])
(into [:div.flex-v]
(map (partial show-option use-order) ?options))
(map (partial show-option (assoc props :option/use-order use-order)) ?options))
(let [?new (h/use-memo #(io/field :init ""))]
[:form.flex.gap-2 {:on-submit (fn [^js e]
(.preventDefault e)
Expand All @@ -68,9 +69,9 @@
(p/let [result (entity.data/maybe-save-field ?options)]
(reset! ?new (:init ?new))
result)))}
[field.ui/text-field ?new {:placeholder "Option label"
[field.ui/text-field ?new {:placeholder "Option label"
:field/can-edit? true
:field/classes {:wrapper "flex-auto"}}]
:field/classes {:wrapper "flex-auto"}}]
[:div.btn.bg-white.px-3.py-1.shadow "Add Option"]])
#_[ui/pprinted @?options]]))

Expand All @@ -81,9 +82,9 @@
?required?
?show-as-filter?
?show-at-registration?
?show-on-card?]}]
(let [view-field (fn [?field & [props]]
(view-field ?field (merge props {:field/can-edit? true})))]
?show-on-card?]} props]
(let [view-field (fn [?field & [more-props]]
(view-field ?field (merge props more-props)))]
[:div.bg-gray-100.gap-3.grid.grid-cols-2.pl-12.pr-7.pt-4.pb-6

[:div.col-span-2.flex-v.gap-3
Expand Down Expand Up @@ -112,9 +113,10 @@

(ui/defview field-row
{:key (fn [{:syms [?id]} _] @?id)}
[?field {:keys [expanded?
toggle-expand!
use-order]}]
[?field {:as props
:keys [field-row/expanded?
field-row/toggle-expand!
field-row/use-order]}]
(let [{:syms [?type ?label]} ?field
{:keys [icon]} (data/field-types @?type)
{:keys [drag-handle-props
Expand Down Expand Up @@ -143,7 +145,7 @@
[:div.flex.items-center.group-hover:text-black.text-gray-500.pl-2
[icons/chevron-down:mini (str "w-4" (when expanded? " rotate-180"))]]]
(when expanded?
(field-row-detail ?field))]))
(field-row-detail ?field props))]))

(ui/defview fields-editor
{:make-?field (fn [init props]
Expand All @@ -159,7 +161,7 @@
:field/show-at-registration? ?show-at-registration?
:field/show-on-card? ?show-on-card?})
:init init))}
[?fields field-props]
[?fields props]
(let [!new-field (h/use-state nil)
!autofocus-ref (ui/use-autofocus-ref)
[expanded expand!] (h/use-state nil)
Expand Down Expand Up @@ -188,10 +190,11 @@
(->> ?fields
(map (fn [{:as ?field :syms [?id]}]
(field-row ?field
{:use-order use-order
:expanded? (= expanded @?id)
:toggle-expand! #(expand! (fn [old]
(u/guard @?id (partial not= old))))})))
(merge props
#:field-row{:use-order use-order
:expanded? (= expanded @?id)
:toggle-expand! #(expand! (fn [old]
(u/guard @?id (partial not= old))))}))))
doall)]
(when-let [{:as ?new-field
:syms [?type ?label]} @!new-field]
Expand All @@ -204,7 +207,7 @@
(reset! !new-field nil)
(entity.data/maybe-save-field ?fields)))}
[:div.h-10.flex.items-center [(:icon (data/field-types @?type)) "icon-lg text-gray-700 mx-2"]]
[field.ui/text-field ?label (merge field-props
[field.ui/text-field ?label (merge props
{:field/label false
:ref !autofocus-ref
:placeholder (:field/label ?label)
Expand Down
74 changes: 41 additions & 33 deletions src/sb/app/field/ui.cljc
View file
Expand Up @@ -193,12 +193,12 @@
{:Meta-Enter save}
{:Enter save})
keybindings)))}))])
(when-let [postfix (or (:field/postfix props)
(:field/postfix (meta ?field))
(and (some-> (entity.data/persisted-value ?field)
(not= (:value props)))
[icons/pencil-outline "w-4 h-4 text-txt/40"]))]
[:div.pointer-events-none.absolute.inset-y-0.right-0.top-0.bottom-0.flex.items-center.p-2 postfix])
;; show pencil when value is modified
(when (and (or (:focused ?field) (:touched ?field))
(io/closest ?field :field/persisted?)
(not= (u/some-str (entity.data/persisted-value ?field))
(u/some-str (:value props))))
[:div.pointer-events-none.absolute.inset-y-0.right-0.top-0.bottom-0.flex.items-center.p-2 [icons/pencil-outline "w-4 h-4 text-txt/40"]])

(when (:loading? ?field)
[:div.loading-bar.absolute.bottom-0.left-0.right-0 {:class "h-[3px]"}])]
Expand Down Expand Up @@ -271,21 +271,33 @@
{:field/label false
:placeholder "YouTube or Vimeo url"})))])))

(ui/defview select-field [?field {:as props :field/keys [label options]}]
(defn show-select-value [{:keys [field/options]} value]
(let [{:keys [field-option/label
field-option/color]
:or {color "#dddddd"}} (u/find-first options #(= value (:field-option/value %)))]
[:div.inline-flex.items-center.gap-1.rounded.whitespace-nowrap.py-1.px-3.mr-auto
{:style (color/color-pair color)}
label]))

(ui/defview select-field [?field {:as props :field/keys [label
options
can-edit?]}]
[:div.field-wrapper
(form.ui/show-label ?field label)
[radix/select-menu (-> (form.ui/?field-props ?field (merge {:field/event->value identity}
props))
(set/rename-keys {:on-change :on-value-change})
(assoc :on-value-change (fn [v]
(reset! ?field v)
(entity.data/maybe-save-field ?field))
:field/can-edit? (:field/can-edit? props)
:field/options (->> options
(map (fn [{:field-option/keys [label value color]}]
{:text label
:value value}))
doall)))]
(if can-edit?
[radix/select-menu (-> (form.ui/?field-props ?field (merge {:field/event->value identity}
props))
(set/rename-keys {:on-change :on-value-change})
(assoc :on-value-change (fn [v]
(reset! ?field v)
(entity.data/maybe-save-field ?field))
:field/can-edit? (:field/can-edit? props)
:field/options (->> options
(map (fn [{:field-option/keys [label value color]}]
{:text label
:value value}))
doall)))]
[show-select-value props @?field])
(when (:loading? ?field)
[:div.loading-bar.absolute.bottom-0.left-0.right-0 {:class "h-[3px]"}])])

Expand All @@ -304,7 +316,7 @@
(merge props
{:field/event->value (j/get-in [:target :value])
:save-on-change? true}))
(v/merge-props {:list (when (seq color-list) list-id)
(v/merge-props {:list (when (seq color-list) list-id)
:style {:top -10
:left -10
:width 100
Expand Down Expand Up @@ -610,15 +622,6 @@
:field.type/prose [prose-field ?entry props]
(str "no match" field))))

(defn show-select:card [{:keys [field/options]} {:keys [select/value]}]
(let [{:keys [field-option/label
field-option/color]
:or {color "#dddddd"}} (u/find-first options #(= value (:field-option/value %)))]
[:div {:class radix/select-trigger-classes
:style {:background-color color
:color (color/contrasting-text-color color)}}
label]))

(defn show-image-list:card [{:keys [image-list/images]}]
(when-let [{:keys [entity/id]} (first images)]
[:img.max-h-80 {:src (asset.ui/asset-src id :card)}]))
Expand Down Expand Up @@ -646,7 +649,7 @@
[{:as entry :keys [field-entry/field]}]
(case (:field/type field)
:field.type/video [show-video-url (:video/url entry)]
:field.type/select [show-select:card field entry]
:field.type/select [show-select-value field (:select/value entry)]
:field.type/link-list [show-link-list:card field entry]
:field.type/image-list [show-image-list:card field entry]
:field.type/prose [show-prose:card field entry]
Expand Down Expand Up @@ -696,23 +699,26 @@
[editing? edit!] (h/use-state (and (empty? selected)
(:role/self roles)))
editing? (and can-edit? editing?)
admin? (:role/board-admin roles)
to-add (and can-edit? (->> all-tags
(remove (fn [tag]
(or (selected (:tag/id tag))
(and (:tag/restricted? tag)
(not (:role/board-admin roles))))))
(not admin?)))))
seq))]
[:div.flex-v.gap-1
[:div.flex.flex-wrap.gap-2
(doall (for [{:as ?tag :syms [?id]} ?tags
:let [{:tag/keys [id label color]} (by-id @?id)]]
:let [{:tag/keys [id label color restricted?]} (by-id @?id)]]
[:div.tag-md.cursor-default.gap-1.group
{:key id
:style (color/color-pair color)
:on-click (when editing?
#(do (io/remove-many! ?tag)
(entity.data/maybe-save-field ?tags)))}
label
(when (and editing? restricted?)
[icons/lock:micro "w-3 h-3 -mr-1"])
(when editing?
[icons/x-mark "w-4 h-4 -mr-1 opacity-50 group-hover:opacity-100"])]))]
(when to-add
Expand All @@ -723,13 +729,15 @@
(when editing?
[:div.bg-gray-100.rounded-lg.border-gray-400.flex.items-stretch.mt-2.mr-auto
[:div.flex.flex-wrap.gap-2.p-3.
(for [{:tag/keys [id label color]} to-add]
(for [{:tag/keys [id label color restricted?]} to-add]
[:div.tag-md.cursor-default.group
{:key id
:style (color/color-pair color)
:on-click #(do (io/add-many! ?tags {:tag/id id})
(entity.data/maybe-save-field ?tags))}
label
(when restricted?
[icons/lock:micro "w-3 h-3 -mr-1"])
[icons/plus-thick "w-4 h-4 -mr-1 opacity-50 group-hover:opacity-100"]])]
[:div.hover:bg-gray-200.p-2.rounded.flex.items-center.m-1.-ml-2 {:on-click #(edit! not)} [icons/checkmark "flex-none"]]])
[form.ui/show-field-messages ?tags]])]
Expand Down
2 changes: 1 addition & 1 deletion src/sb/app/views/radix.cljc
View file
Expand Up @@ -82,7 +82,7 @@
[:el sel/ItemText [:div.flex.gap-2.py-2 icon text]]
[:el sel/ItemIndicator]]))

(def select-trigger-classes "btn bg-white flex items-center rounded whitespace-nowrap gap-1 group default-ring default-ring-hover px-3")
(def select-trigger-classes "bg-white inline-flex items-center justify-start rounded whitespace-nowrap gap-1 group default-ring default-ring-hover py-1 px-3")

(defn select-menu [{:as props :keys [id
placeholder
Expand Down

0 comments on commit db64e41

Please sign in to comment.