Merge pull request #24 from GaiwanTeam/laurence/profile-edit-ui

Profile Edit UI

repl-sessions/init_db.clj

@@ -19,20 +19,25 @@
    '[:find
      [(pull ?e [*]) ...]
      :where
-     [?e :user/email]]
+     [?e :user/uuid]]
    (db/db)))
 
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 ;;        Test Setup Begin
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 
 ;; write participants into the database
-(db/transact [{:user/email "[email protected]"
-               :user/handle "laurence.chen"
-               :user/name "Laurence"}
-              {:user/email "[email protected]"
-               :user/handle "sunnyplexus"
-               :user/name "Arne"}])
+(db/transact [{:db/id "xxx"
+               :user/uuid (random-uuid)
+               :public-profile/name "Laurence"}
+              {:db/id "yyy"
+               :user/uuid (random-uuid)
+               :public-profile/name "Arne"
+               :public-profile/hidden? true}
+              {:tito.ticket/id 1234
+               :tito.ticket/assigned-to "xxx"}
+              {:tito.ticket/id 5678
+               :tito.ticket/assigned-to "yyy"}])
 
 ;; get the session eid
 (def session-eid (:db/id (first (query-session))))
@@ -53,7 +58,7 @@
 (-> session-entity
     :session/participants
     first
-    :user/name)
+    :public-profile/name)
 
 ;; Demonstrate the behaviors of Datomic Entity
 

src/co/gaiwan/compass/db/queries.clj

@@ -20,7 +20,20 @@
    :public-profile/name
    (db/q
     '[:find
-      [(pull ?e [*]) ...]
+      [(pull ?e [*
+                 {:tito.ticket/_assigned-to [*]}]) ...]
       :where
       [?e :public-profile/name]]
     (db/db))))
+
+(defn all-links [user-eid]
+  (sort-by
+   :db/id
+   (db/q
+    '[:find [(pull ?l [*
+                       {:public-profile/_links [:db/id]}
+                       {:private-profile/_links [:db/id]}]) ...]
+      :in $ ?u
+      :where
+      [?l :profile-link/user ?u]]
+    (db/db) user-eid)))

src/co/gaiwan/compass/html/profiles.clj

@@ -4,9 +4,12 @@
   (:require
    [clojure.string :as str]
    [co.gaiwan.compass.css.tokens :as t :refer :all]
+   [co.gaiwan.compass.http.routing :refer [url-for]]
    [java-time.api :as time]
+   [co.gaiwan.compass.db.queries :as queries]
    [co.gaiwan.compass.html.sessions :as s]
-   [lambdaisland.ornament :as o]))
+   [lambdaisland.ornament :as o]
+   [markdown-to-hiccup.core :as m]))
 
 (o/defprop --arc-thickness "30px")
 
@@ -33,32 +36,151 @@
 
 (o/defstyled profile-detail :div#detail
   [image-frame :w-100px]
-  ([{:discord/keys [access-token id refresh-token expires-at avatar-url]
-     :user/keys [email handle name uuid title] :as user}]
+  ([{:public-profile/keys [name avatar-url]
+     :user/keys [uuid] :as user}]
    [:<>
     [image-frame {:profile/image
                   (if-let [image (or (:public-profile/avatar-url user) avatar-url)]
                     (str "url(" image ")")
                     (str "var(--gradient-" (inc (rand-int 7)) ")"))} user]
     [:div.details
-     [:h3.title name]
-     [:h3.subtitle title]]
+     [:h3.title name]]
     #_[:div (pr-str user)]
     [:div.actions
      [edit-profile-btn user]]]))
 
+(o/defstyled attendee-card :div
+  [image-frame :w-100px]
+  ([{:discord/keys [avatar-url]
+     :public-profile/keys [name bio]
+     :user/keys [uuid] :as user}]
+   [:<>
+    [image-frame {:profile/image
+                  (if-let [image (or (:public-profile/avatar-url user) avatar-url)]
+                    (str "url(" image ")")
+                    (str "var(--gradient-" (inc (rand-int 7)) ")"))} user]
+    [:div.details
+     [:h3 name]
+     (when bio
+       [:textarea (m/md->hiccup bio)])]]))
+
+(o/defstyled private-name :div
+  ([user {:keys [private-name-switch] :as params}]
+   (if (= "on" private-name-switch)
+     [:div#private-name-block
+      [:label {:for "private-name"} "Confidential Name"]
+      [:input {:id "private-name" :name "name_private" :type "text"
+               :required true :min-length 2
+               :value (:private-profile/name user)}]]
+     [:div#private-name-block])))
+
+(o/defstyled row :tr.link-row
+  ([link {:keys [row-index] :as params}]
+   [:<>
+    [:td
+     ;; (pr-str link)
+     (when (:db/id link)
+       [:input {:type "hidden" :name (str "link-id-" row-index) :value (:db/id link)}])
+     (let [link-type (:profile-link/type link)]
+       [:select {:name (str "link-type-" row-index)}
+        [:option {:value "email" :selected (= link-type "email")} "Email"]
+        [:option {:value "twitter" :selected (= link-type "twitter")} "Twitter"]
+        [:option {:value "mastodon" :selected (= link-type "mastodon")} "Mastodon"]
+        [:option {:value "linkedin" :selected (= link-type "linkedin")} "LinkedIn"]
+        [:option {:value "personal-site" :selected (= link-type "personal-site")} "Personal Site"]
+        [:option {:value "other" :selected (= link-type "other")} "Other"]])
+     [:input (cond-> {:name (str "link-ref-" row-index) :type "text" :required true
+                      :min-length 2}
+               (:db/id link)
+               (assoc :value (:profile-link/href link)))]]
+    [:td
+     [:input {:name (str "public-" row-index) :type "checkbox"
+              :checked (:public-link link)}]]
+    [:td
+     [:input {:name (str "private-" row-index) :type "checkbox"
+              :checked (:private-link link)}]]]))
+
+(o/defstyled links-table :div
+  ([link {:keys [row-index] :as params}]
+   [:table
+    [row link params]]))
+
 (o/defstyled profile-form :div#form
   [:form :grid {:grid-template-columns "10rem 1fr"} :gap-2]
   ([user]
    [:<>
     [:h2 "Edit Profile"]
     [:form {:method "POST" :action "/profile/save" :enctype "multipart/form-data"}
      [:input {:type "hidden" :name "user-id" :value (:db/id user)}]
+     [:label {:for "hidding"}
+      [:input {:id "hidding" :name "hidden?" :type "checkbox"
+               :checked (:public-profile/hidden? user)}]
+      "Hide profile from public listings?"]
+     [:div
+      [:label {:for "name"} "Name (public)"]
+      [:input {:id "name" :name "name_public" :type "text"
+               :required true :min-length 2
+               :value (:public-profile/name user)}]]
      [:div
-      [:label {:for "name"} "Display Name"]
-      [:input {:id "name" :name "name" :type "text"
-               :required true :min-length 2}]]
+      [:label {:for "show-another-name"}
+       [:input {:id "show-another-name" :name "private-name-switch" :type "checkbox"
+                :hx-get (url-for :profile/private-name)
+                :hx-target "#private-name-block"
+                :hx-select "#private-name-block"
+                :hx-trigger "change"
+                :hx-swap "outerHTML"}]
+       "Show different name to confidantes?"]
+      [:div {:id "private-name-block"}]]
      [:div
-      [:label {:for "image"} "Profile Image"]
+      [:label {:for "image"} "Avatar"]
       [:input {:id "image" :name "image" :type "file" :accept "image/png, image/jpeg"}]]
-     [:input {:type "submit" :value "Save"}]]]))
+
+     [:div
+      [:label {:for "bio_public"}
+       "Bio (public, markdown)"
+       [:input {:id "bio_public" :name "bio_public" :type "text"
+                :value (:public-profile/bio user)}]]]
+
+     [:div
+      [:label {:for "bio_private"}
+       "Bio (confidential, markdown)"
+       [:input {:id "bio_private" :name "bio_private" :type "text"
+                :value (:private-profile/bio user)}]]]
+
+     [:div
+      [:table
+       [:thead
+        [:tr
+         [:th "Links"]
+         [:th "public"]
+         [:th "confidential"]]]
+       [:tbody#links-block
+        (let [links (map (fn [link]
+                           (cond-> link
+                             (:public-profile/_links link)
+                             (assoc :public-link true)
+                             (:private-profile/_links link)
+                             (assoc :private-link true)))
+                         (queries/all-links (:db/id user)))]
+          (map-indexed
+           (fn [idx itm]
+             [row itm {:row-index idx}]) links))]]
+      [:input#rows-count {:type "hidden" :name "rows-count" :value (count (queries/all-links (:db/id user)))}]
+      [:input#add-link {:type "button" :value "Add Links"
+                        :hx-get (url-for :profile/add-link)
+                        :hx-target "#links-block"
+                        :hx-select ".link-row"
+                        :hx-trigger "click"
+                        :hx-swap "beforeend"}]]
+
+     [:input {:type "submit" :value "Save"}]]
+    [:script
+     "document.getElementById('add-link').addEventListener('htmx:configRequest', function(evt) {
+      const url = new URL(evt.detail.path, window.location.origin);
+      var elements = document.querySelectorAll('tr.link-row');
+      url.searchParams.set('row-index', elements.length);
+      // update hidden field
+      document.getElementById('rows-count').setAttribute('value', elements.length+1); 
+      // update URL
+      evt.detail.path = url.toString();
+     });"]]))

src/co/gaiwan/compass/model/attendees.clj

@@ -0,0 +1,15 @@
+(ns co.gaiwan.compass.model.attendees)
+
+(defn user-list
+  " filter the user which is
+    - has a tito.ticket
+    - does not set public-profile/hidden? as true
+  "
+  [all-users]
+  (filter
+   (fn [{:public-profile/keys [hidden?]
+         :tito.ticket/keys [_assigned-to]}]
+     (and
+      _assigned-to
+      (not hidden?)))
+   all-users))