fix: filter field

src/sb/app/account/ui.cljc

@@ -99,7 +99,7 @@
        (when-let [{:keys [org board project]} entities]
          [:div.p-body.flex-v.gap-8
           (when (> (count all) 6)
-            [form.ui/filter-field ?filter nil])
+            [field.ui/filter-field ?filter nil])
           (let [limit (partial ui/truncate-items {:limit 10})]
             [:div.grid.grid-cols-1.md:grid-cols-2.lg:grid-cols-3.gap-2.md:gap-8.-mx-2
              (when (seq project)

src/sb/app/board/data.cljc

@@ -120,18 +120,19 @@
     (throw (ex-info "Board not found!" {:status 400}))))
 
 (def project-fields `[~@entity.data/fields])
-(def member-fields {:member/account [:entity/id
-                                     :entity/kind
-                                     {:image/avatar [:entity/id]}
-                                     :account/display-name]})
+(def member-fields [{:member/account [:entity/id
+                                      :entity/kind
+                                      {:image/avatar [:entity/id]}
+                                      :account/display-name]}
+                    :member/roles])
 
 (q/defquery members
   {:prepare [(az/with-roles :board-id)]}
   [{:keys [board-id member/roles]}]
   (->> (db/where [[:member/entity board-id]])
        (remove :entity/archived?)
        (mapv (db/pull `[~@entity.data/fields
-                        ~member-fields]))))
+                        ~@member-fields]))))
 
 (q/defquery projects
   {:prepare [(az/with-roles :board-id)]}

src/sb/app/board/ui.cljc

@@ -1,5 +1,6 @@
 (ns sb.app.board.ui
   (:require [inside-out.forms :as forms]
+            [inside-out.forms :as io]
             [promesa.core :as p]
             [re-db.api :as db]
             [sb.app.account.data :as account.data]
@@ -9,7 +10,6 @@
             [sb.app.entity.ui :as entity.ui]
             [sb.app.field.ui :as field.ui]
             [sb.app.form.ui :as form.ui]
-            [sb.app.form.ui :as form.ui]
             [sb.app.project.data :as project.data]
             [sb.app.project.ui :as project.ui]
             [sb.app.views.header :as header]
@@ -100,13 +100,13 @@
   [{:as params :keys [board-id]}]
   (let [{:as board :keys [member/roles]} (data/show {:board-id board-id})
         !current-tab (h/use-state (t :tr/projects))
-        ?filter      (h/use-state nil)]
+        ?filter      (h/use-memo #(io/field))]
     [:<>
      [header/entity board (list (entity.ui/settings-button board))]
      [:div.p-body
 
       [:div.flex.gap-4.items-stretch
-       [form.ui/filter-field ?filter nil]
+       [field.ui/filter-field ?filter nil]
        [action-button
         {:on-click (fn [_]
                      (p/let [{:as   result
@@ -144,7 +144,8 @@
         (into [:div.grid]
               (comp (map #(merge (account.data/account-as-entity (:member/account %))
                                  (db/touch %)))
-                    (map entity.ui/row))
+                    (map (fn [member]
+                           (v/x [entity.ui/row member]))))
               (data/members {:board-id board-id}))
         ]]]]))
 

src/sb/app/entity/ui.cljc

@@ -88,12 +88,14 @@
 (ui/defview row
   {:key :entity/id}
   [{:as   entity
-    :keys [entity/title image/avatar member/roles]}]
+    :keys [entity/title member/roles]}]
   [:div.flex.hover:bg-gray-100.rounded-lg
    [:a.flex.relative.gap-3.items-center.p-2.cursor-default.flex-auto
     {:href (routing/entity-path entity 'ui/show)}
     [ui/avatar {:size 10} entity]
-    [:div.line-clamp-2.leading-snug.flex-grow title]]])
+    [:div.line-clamp-2.leading-snug.flex-grow.flex title
+     (for [role roles]
+       [:span.rounded.bg-gray-100.px-2.py-1.text-sm {:key role} (name role)])]]])
 
 (ui/defview show-filtered-results
   {:key :title}

src/sb/app/field/ui.cljc

@@ -203,6 +203,16 @@
                             (:field/hint props))]
          [:div.text-gray-500.text-sm hint])])))
 
+(ui/defview filter-field [?field attrs]
+  [:div.relative.flex-auto.flex
+   [text-field ?field {:field/can-edit? true
+                       :field/classes   {:wrapper "flex-auto items-stretch"
+                                         :input "form-text rounded default-ring pr-9"}
+                       :placeholder     (t :tr/search)}]
+   [:div.absolute.top-0.right-0.bottom-0.flex.items-center.pr-3
+    {:class "text-txt/40"}
+    (icons/search "w-6 h-6")]])
+
 (defn wrap-prose [value]
   (when-not (str/blank? value)
     {:prose/format :prose.format/markdown
@@ -482,10 +492,10 @@
                 dragging
                 dropping]} (use-order ?image)
         current? (= @!?current ?image)
-        img (v/x [:img.object-contain.h-16.w-16.rounded.overflow-hidden.bg-gray-50.transition-all
-                  {:src   url
-                   :class [(when dragging "opacity-20 w-0")
-                           (when current? "outline outline-2 outline-black")]}])]
+        img      (v/x [:img.object-contain.h-16.w-16.rounded.overflow-hidden.bg-gray-50.transition-all
+                       {:src   url
+                        :class [(when dragging "opacity-20 w-0")
+                                (when current? "outline outline-2 outline-black")]}])]
     (if can-edit?
       [radix/context-menu
        {:key     url

src/sb/app/form/ui.cljc

@@ -88,23 +88,4 @@
    [:button.btn.btn-primary
     {:type     "submit"
      :disabled (not (io/submittable? ?form))}
-    label]])
-
-(ui/defview filter-field [?field attrs]
-  (let [loading? (or (:loading? ?field) (:loading? attrs))]
-    [:div.flex.relative.items-stretch.flex-auto
-     [:input.pr-9.border.border-gray-300.w-full.rounded-lg.p-3
-      (-> (?field-props ?field {:event->props (j/get-in [:target :value])})
-          (v/merge-props
-            {:class       "outline-none focus-visible:outline-4 outline-offset-0 focus-visible:outline-gray-200"
-             :placeholder "Search..."
-             :on-key-down #(when (= "Escape" (.-key ^js %))
-                             (reset! ?field nil))})
-          (update :value #(or % "")))]
-     [:div.absolute.top-0.right-0.bottom-0.flex.items-center.pr-3
-      {:class "text-txt/40"}
-      (cond loading? (icons/loading "w-4 h-4 rotate-3s")
-            (seq @?field) [:div.contents.cursor-pointer
-                           {:on-click #(reset! ?field nil)}
-                           (icons/close "w-5 h-5")]
-            :else (icons/search "w-6 h-6"))]]))
+    label]])

src/sb/app/org/ui.cljc

@@ -40,7 +40,7 @@
        [:div.p-body (field.ui/show-prose description)]
        [:div.p-body
         [:div.flex.gap-4.items-stretch
-         [form.ui/filter-field ?filter {:loading? (:loading? result)}]
+         [field.ui/filter-field ?filter {:loading? (:loading? result)}]
          [:a.btn.btn-white.flex.items-center.px-3
           {:href (routes/path-for ['sb.app.board-data/new
                                    {:query-params {:org-id (:entity/id org)}}])}