tag display

src/sb/app/account/data.cljc

@@ -39,7 +39,7 @@
   (into []
         (comp (map :membership/entity)
               (filter (comp #{:org} :entity/kind))
-              (map (q/pull entity.data/entity-keys)))
+              (map (q/pull entity.data/listing-fields)))
         (db/where [[:membership/member account-id]])))
 
 (comment

src/sb/app/board/data.cljc

@@ -106,28 +106,34 @@
              (member.data/assert-can-view :board-id)]}
   [{:keys [board-id membership/roles]}]
   (u/timed `show
-           (if-let [board (db/pull `[~@entity.data/entity-keys
+           (if-let [board (db/pull `[~@entity.data/listing-fields
+                                     ~@entity.data/site-fields
                                      :entity/member-tags
                                      :entity/member-fields
                                      :entity/project-fields
                                      :board/registration-open?
-                                     {:entity/parent [~@entity.data/entity-keys :org/show-org-tab?]}]
+                                     {:entity/parent [~@entity.data/listing-fields :org/show-org-tab?]}]
                                    board-id)]
              (merge board {:membership/roles roles})
              (throw (ex-info "Board not found!" {:status 400})))))
 
-(def project-fields `[~@entity.data/entity-keys])
-(def member-fields [{:membership/member [:entity/id
-                                         :entity/kind
-                                         {:image/avatar [:entity/id]}
-                                         :account/display-name]}
-                    {:entity/tags [:entity/id
-                                   :tag/label
-                                   :tag/color]}
-                    :entity/field-entries
-                    {:membership/entity [:entity/id]}
-                    {:entity/custom-tags [:tag/label]}
-                    :membership/roles])
+
+(def board-membership-fields `[{:membership/member [~@entity.data/id-fields
+                                                   {:image/avatar [:entity/id]}
+                                                   :account/display-name]}
+                              {:entity/tags [:entity/id
+                                             :tag/label
+                                             :tag/color]}
+                              :entity/field-entries
+                              {:membership/entity [:entity/id]}
+                              {:entity/custom-tags [:tag/label]}
+                              :membership/roles])
+
+(def project-fields `[~@entity.data/listing-fields
+                      {:entity/video [:video/url]}
+                      {:entity/parent [:entity/id]}
+                      {:membership/_entity [~@entity.data/id-fields
+                                            ~@board-membership-fields]}])
 
 (q/defquery members
   {:prepare [(az/with-roles :board-id)
@@ -136,8 +142,8 @@
   (u/timed `members (->> (db/entity board-id)
                          :membership/_entity
                          (remove (some-fn :entity/deleted-at :entity/archived?))
-                         (mapv (db/pull `[~@entity.data/entity-keys
-                                          ~@member-fields])))))
+                         (mapv (db/pull `[~@entity.data/id-fields
+                                          ~@board-membership-fields])))))
 
 (q/defquery projects
   {:prepare [(az/with-roles :board-id)
@@ -187,7 +193,9 @@
   [{:keys [board-id membership/roles]}]
   (u/timed `settings
            (some->
-             (q/pull `[~@entity.data/entity-keys
+             (q/pull `[~@entity.data/listing-fields
+                       {:image/background [:entity/id]}
+                       {:entity/domain-name [:domain-name/name]}
                        :entity/member-tags
                        {:entity/member-fields ~field.data/field-keys}
                        {:entity/project-fields ~field.data/field-keys}] board-id)

src/sb/app/board/ui.cljc

@@ -102,7 +102,8 @@
   [{:as params :keys [board-id]}]
   (let [{:as board :keys [membership/roles]} (data/show {:board-id board-id})
         !current-tab (h/use-state (t :tr/members #_:tr/projects))
-        ?filter      (h/use-memo #(io/field))]
+        ?filter      (h/use-memo #(io/field))
+        card-grid    (v/from-element :div.grid.gap-4.grid-cols-1.md:grid-cols-2.lg:grid-cols-3)]
     [:<>
      [header/entity board nil]
      [:div.p-body.flex-v.gap-6
@@ -136,17 +137,19 @@
        [radix/tab-content {:value (t :tr/projects)}
         (some->> (seq (data/drafts {:board-id board-id}))
                  (into [:div.grid.border-b-2.border-gray-300.border-dashed.py-3.mb-3]
-                       (map entity.ui/row)))
-        (into [:div.grid]
+                       (map project.ui/card)))
+        (into [card-grid]
               (comp (ui/filtered @?filter)
-                    (map entity.ui/row))
+                    (map (partial project.ui/card
+                                  {:entity/project-fields (filter :field/show-on-card? (:entity/project-fields board))})))
               (data/projects {:board-id board-id}))]
 
        [radix/tab-content {:value (t :tr/members)}
-        (into [:div.grid.gap-4.grid-cols-1.md:grid-cols-2.lg:grid-cols-3]
+        (into [card-grid]
               (comp (ui/filtered @?filter)
-                    (map (partial member.ui/row {:entity/member-tags   (:entity/member-tags board)
-                                                 :entity/member-fields (filter :field/show-on-card? (:entity/member-fields board))})))
+                    (map (partial member.ui/card
+                                  {:entity/member-tags   (:entity/member-tags board)
+                                   :entity/member-fields (filter :field/show-on-card? (:entity/member-fields board))})))
               (data/members {:board-id board-id}))
         ]]]]))
 

src/sb/app/entity/data.cljc

@@ -88,17 +88,21 @@
                                  :doc "Date the entity was last modified"}}))
 
 (def id-fields [:entity/id :entity/kind])
+(def listing-fields `[~@id-fields
+                      :entity/title
+                      :entity/description
+                      :entity/created-at
+                      {:image/avatar [:entity/id]}])
 
-(def entity-keys `[~@id-fields
-                   :entity/title
-                   :entity/description
-                   :entity/created-at
-                   :entity/deleted-at
+(def entity-keys `[~@listing-fields
                    {:entity/video [:video/url]}
                    {:image/avatar [:entity/id]}
                    {:image/background [:entity/id]}
                    {:entity/domain-name [:domain-name/name]}])
 
+(def site-fields [{:image/background [:entity/id]}
+                  {:entity/domain-name [:domain-name/name]}])
+
 (defn required? [parent-schema child-attr]
   (-> parent-schema
       (mu/find child-attr)

src/sb/app/field/admin_ui.cljc

@@ -108,7 +108,7 @@
                                           :confirm-fn   (fn []
                                                           (io/remove-many! ?field)
                                                           (entity.data/maybe-save-field ?field))})}
-        [:div.w-5.h-5.rounded.flex.items-center.justify-center.text-destructive [icons/trash "w-4 h-4"]]
+        [:div.w-5.h-5.rounded.flex-center.text-destructive [icons/trash "w-4 h-4"]]
         (t :tr/remove)]]]]))
 
 (ui/defview field-row
@@ -133,7 +133,7 @@
       ;; expandable label group
       [:div.relative.flex.-ml-3.-my-3.hover:cursor-grab.active:cursor-grabbing
        drag-handle-props
-       [:div.w-5.-ml-5.mr-3.flex.items-center.justify-center.opacity-0.group-hover:opacity-50.flex-none
+       [:div.w-5.-ml-5.mr-3.flex-center.opacity-0.group-hover:opacity-50.flex-none
         [icons/drag-dots "icon-sm"]]
        [icon "cursor-drag icon-lg text-gray-700 self-center flex-none"]]
       [:div.flex-auto.flex-v.gap-2
@@ -214,7 +214,7 @@
                                              :field/classes {:wrapper "flex-auto"}})]
          [:button.btn.btn-white.h-10 {:type "submit"}
           (t :tr/add)]
-         [:div.flex.items-center.justify-center.icon-light-gray.h-10.w-7
+         [:div.flex-center.icon-light-gray.h-10.w-7
           {:on-mouse-down #(reset! !new-field nil)}
           [icons/close "w-4 h-4 "]]]
         [:div.pl-12.py-2 (form.ui/show-field-messages ?new-field)]])]))

src/sb/app/field/ui.cljc

@@ -88,7 +88,7 @@
 
      [:label.relative.flex.items-center
       (when loading?
-        [:div.h-5.w-5.inline-flex.items-center.justify-center.absolute
+        [:div.h-5.w-5.inline-flex-center.absolute
          [ui/loading:spinner "h-3 w-3"]])
       [:input.h-5.w-5.rounded.border-gray-300.text-primary
        (u/dissoc-qualified props)]
@@ -245,7 +245,7 @@
   )
 
 (ui/defview show-video-url [url]
-  [:a.bg-black.w-full.aspect-video.flex.items-center.justify-center.relative
+  [:a.bg-black.w-full.aspect-video.flex-center.relative
    {:href   url
     :target "_blank"
     :style  {:background-image    (asset.ui/css-url (:video/thumbnail (parse-video-url url)))
@@ -268,10 +268,10 @@
          [show-video-url value])
        (when can-edit?
          (text-field ?field (merge props
-                                   {:field/label false
-                                    :field/wrap (fn [v] {:video/url v})
+                                   {:field/label  false
+                                    :field/wrap   (fn [v] {:video/url v})
                                     :field/unwrap :video/url
-                                    :placeholder "YouTube or Vimeo url"})))])))
+                                    :placeholder  "YouTube or Vimeo url"})))])))
 
 (defn show-select-value [{:keys [field/options]} value]
   (let [{:keys [field-option/label
@@ -481,7 +481,7 @@
                         (some-> (j/get-in e [:dataTransfer :files 0]) on-file))}
       (when loading?
         [icons/loading "w-4 h-4 absolute top-0 right-0 text-txt/40 mx-2 my-3"])
-      [:div.block.relative.rounded.cursor-pointer.flex.items-center.justify-center.rounded-lg
+      [:div.block.relative.rounded.cursor-pointer.flex-center.rounded-lg
        (v/props {:class "text-muted-txt hover:text-txt w-32 h-32"}
                 (when thumbnail
                   {:class "bg-contain bg-no-repeat bg-center"
@@ -530,7 +530,7 @@
                        (.preventDefault e)
                        (some-> (j/get-in e [:dataTransfer :files 0]) on-file))}
 
-     [:div.block.absolute.inset-0.rounded.flex.items-center.justify-center.rounded-lg
+     [:div.block.absolute.inset-0.rounded.flex-center.rounded-lg
       (v/props {:class "text-muted-txt hover:text-txt bg-contain bg-no-repeat bg-center"}
                (when thumbnail
                  {:style {:background-image (asset.ui/css-url thumbnail)}})
@@ -584,7 +584,7 @@
     [:div.field-wrapper
      (form.ui/show-label ?images label)
      (when selected-url
-       [:div.relative.flex.items-center.justify-center {:key selected-url}
+       [:div.relative.flex-center {:key selected-url}
         (when loading? [icons/loading "w-4 h-4 text-txt/60 absolute top-2 right-2"])
         [:img.max-h-80 {:src selected-url}]])
      ;; thumbnails
@@ -750,4 +750,13 @@
   ;; if can-edit,
   ;;  - show an "x" for removing each tag,
   ;;  - show unused tags, click-to-add
-  )
+  )
+
+(ui/defview show-entries [member-fields field-entries]
+  (when-let [entries (seq (into []
+                                (keep
+                                  (fn [field]
+                                    (some-> (get field-entries (:field/id field))
+                                            (assoc :field-entry/field field))))
+                                member-fields))]
+    (map show-entry:card entries)))

src/sb/app/membership/data.cljc

@@ -73,14 +73,14 @@
 (q/defquery show
   {:prepare az/require-account!}
   [params]
-  (dissoc (q/pull `[~@entity.data/entity-keys
+  (dissoc (q/pull `[~@entity.data/listing-fields
                     :entity/tags
                     :entity/field-entries
                     {:membership/entity [:entity/id
                                          :entity/kind
                                          :entity/member-tags
                                          :entity/member-fields]}
-                    {:membership/member [~@entity.data/entity-keys
+                    {:membership/member [~@entity.data/listing-fields
                                          :account/display-name]}]
                   (:membership-id params))))
 
@@ -129,7 +129,7 @@
            (into []
                  (comp (map (comp db/entity sch/wrap-id))
                        (filter active-member?)
-                       (map (db/pull `[~@entity.data/entity-keys
+                       (map (db/pull `[~@entity.data/listing-fields
                                        :entity/public?])))
                  ids)))
 

src/sb/app/membership/ui.cljc

@@ -58,36 +58,31 @@
                                      :field/can-edit?  can-edit?})]]))
 
 (defn show-tag [{:keys [tag/label tag/color] :or {color "#dddddd"}}]
-  [:div.tag-sm
+  [:div.tag-md
    {:key   label
     :style {:background-color color
             :color            (color/contrasting-text-color color)}}
    label])
 
-(ui/defview row
+(ui/defview card
   {:key (fn [_ member] (str (:entity/id member)))}
   [{:keys [entity/member-fields
            entity/member-tags]} board-member]
   (let [{:keys [entity/field-entries
                 entity/tags
                 entity/custom-tags]} board-member
         {:as account :keys [account/display-name]} (:membership/member board-member)]
-    [:a.flex-v.hover:bg-gray-100.rounded-lg #_.rounded-xl.border.shadow
+    [:a.flex-v.hover:bg-gray-100.rounded-lg.bg-slate-100 #_.rounded-xl.border.shadow
      {:href (routing/entity-path board-member 'ui/show)}
-     [:div.flex.relative.gap-3.items-center.p-2.cursor-default.flex-auto
+     [:div.flex.relative.gap-3.items-start.p-3.cursor-default.flex-auto
       [ui/avatar {:size 10} account]
-      [:div.line-clamp-2.leading-snug.flex-grow.flex-v.gap-1 display-name
+
+      [:div.flex-grow.flex-v.gap-1
+       [:div.leading-snug.line-clamp-2.font-semibold display-name]
        [:div.flex.flex-wrap.gap-1
         (->> member-tags
              (filter (comp (into #{} (map :tag/id) tags) :tag/id))
              (map show-tag))
-        [:div.flex.flex-wrap.gap-1 (map show-tag custom-tags)]]]]
-     ;; show card entries on hover?
-     #_(when-let [entries (seq
-                            (for [{:as field :keys [field/id
-                                                    field/label]} member-fields
-                                  :let [entry (get field-entries id)]
-                                  :when entry]
-                              (assoc entry :field-entry/field field)))]
-         [:div.text-gray-500.ml-14.pl-1
-          (map field.ui/show-entry:card entries)])]))
+        [:div.flex.flex-wrap.gap-1 (map show-tag custom-tags)]]
+       ;; show card entries on hover?
+       [:div.text-gray-500.contents (field.ui/show-entries member-fields field-entries)]]]]))

src/sb/app/org/data.cljc

@@ -44,14 +44,16 @@
 (q/defquery settings
   [{:keys [org-id]}]
   ;; all the settings that can be changed
-  (q/pull `[~@entity.data/entity-keys]
+  (q/pull `[~@entity.data/listing-fields
+            ~@entity.data/site-fields]
           org-id))
 
 (q/defquery show
   {:prepare [az/with-account-id!]}
   [{:keys [org-id]}]
-  (q/pull `[~@entity.data/entity-keys
-            {:entity/_parent ~entity.data/entity-keys}]
+  (q/pull `[~@entity.data/listing-fields
+            ~@entity.data/site-fields
+            {:entity/_parent ~entity.data/listing-fields}]
           (dl/resolve-id org-id)))
 
 (q/defx search-once
@@ -68,7 +70,7 @@
                      q
                      org-id)
      :projects (->> (dl/q (u/template
-                            `[:find [(pull ?project [~@entity.data/entity-keys
+                            `[:find [(pull ?project [~@entity.data/listing-fields
                                                      :project/sticky?
                                                      {:entity/parent [:entity/id]}]) ...]
                               :in $ ?terms ?org

src/sb/app/project/data.cljc

@@ -101,7 +101,7 @@
                                                                        :entity/kind
                                                                        {:image/avatar [:entity/id]}]}]}
                             {:entity/parent
-                             [~@entity.data/entity-keys
+                             [~@entity.data/listing-fields
                               {:entity/project-fields ~field.data/field-keys}]}]
                           project-id)
                   {:membership/roles roles})))

src/sb/app/project/new_flow.cljc

@@ -144,7 +144,7 @@
             [:div.flex-v.gap-2
              (for [{:as ?child :syms [?title ?detail ?complete]} ?items]
                [:div.flex.w-full.gap-2.items-start {:key (goog/getUid ?child)}
-                [radix/dropdown-menu {:trigger [:div.hover:bg-gray-300.flex.items-center.justify-center.rounded-full.w-7.h-7
+                [radix/dropdown-menu {:trigger [:div.hover:bg-gray-300.flex-center.rounded-full.w-7.h-7
                                                 [icons/ellipsis-horizontal "w-4 h-4"]]
                                       :items   [[{:on-select #(swap! ?complete not)} (if @?complete "Activate" "Done")]
                                                 [{:on-select #(forms/remove-many! ?child)} "Remove"]]}]
@@ -191,7 +191,7 @@
              (for [{:as ?child :syms [?title ?detail ?complete]} ?items]
                [:div.flex.w-full.gap-2.items-start.group.cursor-pointer {:key (goog/getUid ?child)}
                 (if editor?
-                  [radix/dropdown-menu {:trigger [:div.hover:bg-gray-300.flex.items-center.justify-center.rounded-full.w-7.h-7
+                  [radix/dropdown-menu {:trigger [:div.hover:bg-gray-300.flex-center.rounded-full.w-7.h-7
                                                   [icons/ellipsis-horizontal "w-4 h-4"]]
                                         :items   [[{:on-select #(swap! ?complete not)} (if @?complete "Activate" "Done")]
                                                   [{:on-select #(forms/remove-many! ?child)} "Remove"]]}]