UI improvements (#466)

* remove new job placeholders

* show current profile image when editing profile

* add Edit Profile button

* improve new job validation

* update skill list

Author: ginesdt

shared/src/ethlance/shared/constants.cljs

@@ -4,6 +4,7 @@
     [cljs.spec.alpha :as s]
     [cljs.pprint]
     [clojure.set :as set]
+    [clojure.string :as str]
     [district.validation :refer [length? email? not-neg?]]
     [ethlance.shared.constants :as constants]
     [medley.core :refer [map-kv-vals]]))
@@ -73,9 +74,15 @@
 (s/def :job/title (s/and string? (comp not empty?)))
 (s/def :job/required-skills (comp not empty?))
 
+(s/def ::token-amount not-neg?)
+(s/def ::human-amount (s/and string? #(not (clojure.string/blank? %))))
+(s/def ::decimals not-neg?)
+
+(s/def :job/token-amount
+  (s/keys :req-un [::token-amount ::human-amount ::decimals]))
 
 (s/def :page.new-job/create
-  (s/keys :req [:job/title :job/required-skills]))
+  (s/keys :req [:job/title :job/required-skills :job/token-amount]))
 
 
 (s/def :page.sign-up/update-candidate

shared/src/ethlance/shared/spec.cljs

@@ -43,12 +43,13 @@
       }
 
       > .title {
+        width: 100%;
         grid-area: title;
         display: grid;
         grid-template-areas:
-          'profile-image name'
-          'profile-image detail';
-        grid-template-columns: 72px auto;
+          'profile-image name edit-button'
+          'profile-image detail edit-button';
+        grid-template-columns: 72px auto max-content;
         grid-template-rows: auto auto;
 
         @media #media[tablet-query] {
@@ -74,6 +75,13 @@
           padding: 0.5em 1.4em;
 
         }
+
+        > .edit-button {
+          grid-area: edit-button;
+          align-self: start;
+          justify-self: end;
+          padding-top: 0.5em;
+        }
       }
 
       > .biography {

ui/resources/public/less/page/profile.less

@@ -114,7 +114,14 @@
 
           > .dropzone {
               width: 100%;
+              height: 100%;
               position: relative;
+              cursor: pointer;
+
+              > img {
+                width: 100%;
+                height: 100%;
+              }
 
               .file-input-label {
                   display: flex;

ui/resources/public/less/page/sign-up.less

@@ -40,25 +40,26 @@
                                       (.readAsArrayBuffer ab-reader f))
                                     (when on-file-rejected
                                       (on-file-rejected fprops))))))]
-    (fn [{:keys [form-data id]
+    (fn [{:keys [form-data id current-src]
           :as opts}]
-      (let [{:keys [url-data]} (get-in @form-data [id :selected-file])]
-        [:div.dropzone
-         {:on-drag-over allow-drop
+      (let [{:keys [url-data]} (get-in @form-data [id :selected-file])
+            file-input-id (id-for-path id)]
+        [:label.dropzone
+         {:htmlFor file-input-id
+          :on-drag-over allow-drop
           :on-drop #(do
                       (.preventDefault %)
                       (handle-files-select (.. % -dataTransfer -files)))
           :on-drag-enter allow-drop}
 
-         [:img {:src (or url-data empty-img-src)}]
+         [:img {:src (or url-data current-src empty-img-src)}]
 
-         (when (not url-data)
-           [:label.file-input-label
-            {:for (id-for-path id)}
+         (when (not (or url-data current-src))
+           [:div.file-input-label
             [c-icon {:name :ic-upload :color :dark-blue :inline? false}]
             [:div (get opts :label "File...")]])
 
          [:input {:type :file
-                  :id (id-for-path id)
+                  :id file-input-id
                   :on-change (fn [e]
                                (handle-files-select (-> e .-target .-files)))}]]))))

ui/src/ethlance/ui/component/file_drag_input.cljs

@@ -28,20 +28,21 @@
 
 (def interceptors [re/trim-v])
 
+(def default-token-amount
+  {:token-amount 0 :human-amount "0" :decimals 18})
 
 (def state-default
-  {:job/title "Rauamaak on meie saak"
-   :job/description "Tee t88d ja n2e vaeva"
-   :job/category "Admin Support"
+  {:job/title ""
+   :job/description ""
+   :job/category ""
    :job/bid-option :hourly-rate
    :job/required-experience-level :intermediate
    :job/estimated-project-length :day
    :job/required-availability :full-time
-   :job/required-skills (set (repeatedly 2 #(rand-nth constants/skills)))
+   :job/required-skills #{}
    :job/token-type :eth
-   :job/token-amount 0.69
-   :job/token-address "0x1111111111111111111111111111111111111111"
-   :job/token-id 0
+   :job/token-address ""
+   :job/token-amount default-token-amount
    :job/with-arbiter? false
    :job/invited-arbiters #{}
    :job/token-decimals 18})
@@ -119,7 +120,7 @@
                           (fn [] [:dispatch [:page.new-job/decimals-response default-decimals]]))]
       {:fx [(decimals-fx-fn)]
        :db (-> db
-               (assoc-in ,,, [state-key :job/token-amount] 1)
+               (assoc-in ,,, [state-key :job/token-amount] default-token-amount)
                (assoc-in ,,, [state-key :job/token-type] token-type))})))
 
 
@@ -215,11 +216,12 @@
   ::send-create-job-tx
   (fn [{:keys [db]} _]
     (let [employer (get-job-creation-param db :employer)
-          offered-value (get-job-creation-param db :offered-value)
+          token-type (get-job-creation-param db :token-type)
+          offered-value (cond-> (get-job-creation-param db :offered-value)
+                                (#{:eth :erc20} token-type) (assoc-in [:token :tokenId] 0))
           ipfs-hash (get-job-creation-param db :ipfs-hash)
           arbiters (get-job-creation-param db :arbiters)
           tx-opts-base {:from employer}
-          token-type (get-job-creation-param db :token-type)
           tx-opts (if (= token-type :eth)
                     (assoc tx-opts-base :value (:value offered-value))
                     tx-opts-base)]

ui/src/ethlance/ui/page/new_job/events.cljs

@@ -291,6 +291,10 @@
           [:div.profile-image
            [c-profile-image {:src image-url}]]
           [:div.name name]
+          [:div.edit-button
+           [c-button (merge {:size :small} (navigation/link-params {:route :route.me/sign-up
+                                                                    :query {:tab :candidate}}))
+            [c-button-label "Edit Profile"]]]
           [:div.detail professional-title]]
          [:div.biography biography]
          [c-rating-box rating]
@@ -343,6 +347,10 @@
          [:div.profile-image
           [c-profile-image {:src image-url}]]
          [:div.name name]
+         [:div.edit-button
+          [c-button (merge {:size :small} (navigation/link-params {:route :route.me/sign-up
+                                                                    :query {:tab :employer}}))
+           [c-button-label "Edit Profile"]]]
          [:div.detail professional-title]]
         [:div.biography biography]
         [c-rating-box rating]
@@ -456,6 +464,10 @@
          [:div.profile-image
           [c-profile-image {:src image-url}]]
          [:div.name name]
+         [:div.edit-button
+          [c-button (merge {:size :small} (navigation/link-params {:route :route.me/sign-up
+                                                                   :query {:tab :arbiter}}))
+           [c-button-label "Edit Profile"]]]
          [:div.detail professional-title]]
         [:div.biography biography]
         [c-rating-box rating]

ui/src/ethlance/ui/page/profile.cljs

@@ -9,7 +9,6 @@
     [district.ui.router.subs :as router.subs]
     [ethlance.shared.constants :as constants]
     [ethlance.shared.spec :refer [validate-keys]]
-    [ethlance.ui.component.button :refer [c-button c-button-icon-label]]
     [ethlance.ui.component.currency-input :refer [c-currency-input]]
     [ethlance.ui.component.email-input :refer [c-email-input]]
     [ethlance.ui.component.file-drag-input :refer [c-file-drag-input]]
@@ -24,7 +23,7 @@
     [ethlance.ui.page.sign-up.events :as sign-up.events]
     [ethlance.ui.page.sign-up.subscriptions]
     [ethlance.ui.util.component :refer [>evt]]
-    [ethlance.ui.util.navigation :as navigation-utils]
+    [ethlance.ui.util.urls :as util.urls]
     [re-frame.core :as re]
     [reagent.core :as r]
     [taoensso.timbre :as log]))
@@ -33,11 +32,12 @@
 (defn- c-upload-image
   []
   (let [form-data (r/atom {})]
-    (fn []
+    (fn [{:keys [:form-values]}]
       [:div.upload-image
        [c-file-drag-input
         {:form-data form-data
          :id :file-info
+         :current-src (-> form-values :user/profile-image util.urls/ipfs-hash->gateway-url)
          :label "Upload file"
          :file-accept-pred (fn [{:keys [name type size]}]
                              (log/debug "Veryfing acceptance of file" {:name name :type type :size size})
@@ -132,7 +132,7 @@
       [:div.label "Sign Up"]
       [:div.first-forms
        [:div.form-image
-        [c-upload-image]]
+        [c-upload-image {:form-values form-values}]]
        [c-user-name-input
         {:form-values form-values
          :form-validation form-validation}]
@@ -200,7 +200,7 @@
       [:div.label "Sign Up"]
       [:div.first-forms
        [:div.form-image
-        [c-upload-image]]
+        [c-upload-image {:form-values form-values}]]
        [c-user-name-input
         {:form-values form-values
          :form-validation form-validation}]
@@ -242,7 +242,7 @@
       [:div.label "Sign Up"]
       [:div.first-forms
        [:div.form-image
-        [c-upload-image]]
+        [c-upload-image {:form-values form-values}]]
        [c-user-name-input
         {:form-values form-values
          :form-validation form-validation}]