improved two major forms.

src/cljs/auto_ap/views/components/multi.cljs

@@ -0,0 +1,68 @@
+(ns auto-ap.views.components.multi
+  (:require
+   [cemerick.url]
+   #_{:clj-kondo/ignore [:unused-namespace]}
+   [reagent.core :as reagent]
+   [react :as react]
+   [auto-ap.entities.shared :as shared]
+   [auto-ap.views.utils :refer [appearing-group]]
+   [auto-ap.forms.builder :as form-builder]))
+
+
+(defn multi-field-v2-internal [{:keys [template key-fn next-key allow-change? disable-new? disable-remove? schema on-change disabled new-text] prop-value :value :as props} ]
+  (let [prop-value (if (seq prop-value)
+                prop-value
+                [])]
+    [form-builder/virtual-builder {:value     prop-value
+                                   :schema    schema
+                                   :on-change on-change}
+     [:fieldset {:disabled disabled}
+      [:div {:style {:margin-bottom "0.25em"}}
+       (into [appearing-group]
+             (for [[i override] (map vector (range) prop-value)
+                   :let         [is-disabled? (if (= false allow-change?)
+                                                (not (boolean (::new? override)))
+                                                nil)]]
+
+               ^{:key (or (key-fn override)
+                          (::key override))}
+               [form-builder/with-scope {:scope [i]}
+                ^{:key (or (key-fn override)
+                           (::key override))}
+                [:div.level {:style {:margin-bottom "0.25em"}}
+                 [:div.level-left {:style {:padding "0.5em 1em"}
+                                   :class (when-not (key-fn override)
+                                            "has-background-info-light")}
+                  (let [template (if (fn? template)
+                                   (template override)
+                                   template)]
+                    (for [[idx template] (map vector (range ) template)]
+                      ^{:key idx}
+                      [:div.level-item
+                       template]))
+                  (when-not disable-remove?
+                    [:div.level-item
+                     [:a.button.level-item
+                      {:disabled is-disabled?
+                       :on-click (fn []
+                                   (on-change (into []
+                                                    (for [[idx item] (map  vector (range) prop-value)
+                                                          :when      (not= idx i)]
+                                                      item))))}
+                      [:span.icon [:span.icon-remove]]]])]]]))
+       (when-not disable-new?
+         [:button.button.is-outline
+          {:type     "button"
+                          :on-click (fn [e]
+                                      (on-change (conj prop-value {::key next-key}))
+                                      (.stopPropagation e)
+                                      (.preventDefault e))}
+          [:span.icon [:i.fa.fa-plus]]
+          [:span (or new-text "New")]])]]]))
+
+
+(defn multi-field-v2 []
+  (into 
+    [:f> multi-field-v2-internal
+     (reagent/props (reagent/current-component))]
+    (reagent/children (reagent/current-component))))