From 3b43fc1c0502a9d310295e4fa79c6d1fa501e877 Mon Sep 17 00:00:00 2001
From: Tienson Qin <tiensonqin@gmail.com>
Date: Mon, 14 Aug 2023 17:43:01 +0800
Subject: [PATCH] fix: dropdown initial-open

---
 src/main/frontend/components/property.cljs    | 28 +++++++++++++------
 .../frontend/components/property/value.cljs   |  2 ++
 src/main/frontend/ui.cljs                     | 12 ++++----
 3 files changed, 29 insertions(+), 13 deletions(-)

diff --git a/src/main/frontend/components/property.cljs b/src/main/frontend/components/property.cljs
index d9adca13a0..7906b37184 100644
--- a/src/main/frontend/components/property.cljs
+++ b/src/main/frontend/components/property.cljs
@@ -138,7 +138,7 @@
           (pv/add-property! entity property-name "" {:class-schema? class-schema?
                                                   ;; Only enter property names from sub-modal as inputting
                                                   ;; property values is buggy in sub-modal
-                                                  :exit-edit? page-configure?})
+                                                     :exit-edit? page-configure?})
           (let [editor-id (str "ls-property-" blocks-container-id (:db/id entity) "-" (:db/id property))]
             (pv/set-editing! property editor-id "" ""))))
       ;; new property entered
@@ -147,17 +147,18 @@
           (pv/add-property! entity property-name "" {:class-schema? class-schema? :exit-edit? page-configure?})
           (do
             (db-property/upsert-property! repo property-name {:type :default} {})
-            ;; configure new property
-            (when-let [property (get-property-from-db property-name)]
-              (state/set-sub-modal! #(property-config repo property {})))))
+            ))
         (do (notification/show! "This is an invalid property name. A property name cannot start with page reference characters '#' or '[['." :error)
             (pv/exit-edit-property))))))
 
 (rum/defcs property-input < rum/reactive
+  (rum/local false ::show-new-property-config?)
   shortcut/disable-all-shortcuts
   [state entity *property-key *property-value {:keys [class-schema? page-configure? *configure-show?]
                                                :as opts}]
-  (let [entity-properties (->> (keys (:block/properties entity))
+  (let [repo (state/get-current-repo)
+        *show-new-property-config? (::show-new-property-config? state)
+        entity-properties (->> (keys (:block/properties entity))
                                (map #(:block/original-name (db/entity [:block/uuid %])))
                                (set))
         alias (if (seq (:block/alias entity)) #{"alias"} #{})
@@ -170,12 +171,22 @@
         properties (->> (search/get-all-properties)
                         (remove exclude-properties))]
     (if @*property-key
-      (let [property (get-property-from-db @*property-key)]
+      (when-let [property (get-property-from-db @*property-key)]
         [:div.ls-property-add.grid.grid-cols-4.gap-1.flex.flex-row.items-center
          [:div.col-span-1 @*property-key]
          [:div.col-span-3.flex.flex-row.pl-6
-          (when (and property (not class-schema?))
-            (pv/property-scalar-value entity property @*property-value (assoc opts :editing? true)))]])
+          (when (not class-schema?)
+            (if @*show-new-property-config?
+              (ui/dropdown
+               (fn [_toggle-fn]
+                 (pv/property-scalar-value entity property @*property-value (assoc opts :editing? true)))
+               (fn [toggle-fn]
+                 [:div.p-6
+                  (property-config repo property toggle-fn)])
+               {:initial-open? true
+                :modal-class (util/hiccup->class
+                              "origin-top-right.absolute.left-0.rounded-md.shadow-lg.mt-2")})
+              (pv/property-scalar-value entity property @*property-value (assoc opts :editing? true))))]])
 
       [:div.ls-property-add.h-6
        (select/select {:items (map (fn [x] {:value x}) properties)
@@ -186,6 +197,7 @@
                        :input-default-placeholder "Add a property"
                        :on-chosen (fn [{:keys [value]}]
                                     (reset! *property-key value)
+                                    (reset! *show-new-property-config? true)
                                     (add-property-from-dropdown entity value opts))
                        :input-opts {:on-blur (fn []
                                                (when *configure-show?
diff --git a/src/main/frontend/components/property/value.cljs b/src/main/frontend/components/property/value.cljs
index ebc18dd20b..e22b4c2e8a 100644
--- a/src/main/frontend/components/property/value.cljs
+++ b/src/main/frontend/components/property/value.cljs
@@ -123,6 +123,8 @@
 (defn- new-text-editor-opts
   [repo block property value type editor-id *add-new-item? opts]
   {:placeholder "Input something"
+   :style {:padding 0
+           :background "none"}
    :on-blur
    (fn [e]
      (let [new-value (util/evalue e)
diff --git a/src/main/frontend/ui.cljs b/src/main/frontend/ui.cljs
index 24cd12e71a..83a438d551 100644
--- a/src/main/frontend/ui.cljs
+++ b/src/main/frontend/ui.cljs
@@ -149,15 +149,17 @@
 ;; public exports
 (rum/defcs dropdown < (mixins/modal :open?)
   {:init (fn [state]
-           (let [opts (->> (drop 2 (:rum/args state))
-                           (partition 2)
-                           (map vec)
-                           (into {}))]
+           (let [opts (if (map? (last (:rum/args state)))
+                        (last (:rum/args state))
+                        (->> (drop 2 (:rum/args state))
+                             (partition 2)
+                             (map vec)
+                             (into {})))]
              (when (:initial-open? opts)
                (reset! (:open? state) true)))
            state)}
   [state content-fn modal-content-fn
-   & [{:keys [modal-class z-index trigger-class]
+   & [{:keys [modal-class z-index trigger-class _initial-open?]
        :or   {z-index 999}}]]
   (let [{:keys [open?]} state
         modal-content (modal-content-fn state)