From d9a42e6eea250776daf8322392b17089eb38edea Mon Sep 17 00:00:00 2001 From: "@s.roertgen" Date: Wed, 27 Nov 2024 19:00:06 +0100 Subject: [PATCH] move modals in separate component --- src/ied/components/modals.cljs | 71 +++++++++++++++++++++++++++++++ src/ied/db.cljs | 2 - src/ied/views.cljs | 78 ++++------------------------------ 3 files changed, 79 insertions(+), 72 deletions(-) create mode 100644 src/ied/components/modals.cljs diff --git a/src/ied/components/modals.cljs b/src/ied/components/modals.cljs new file mode 100644 index 0000000..4093c8d --- /dev/null +++ b/src/ied/components/modals.cljs @@ -0,0 +1,71 @@ +(ns ied.components.modals + (:require [re-frame.core :as re-frame] + [reagent.core :as reagent] + [ied.subs :as subs] + [ied.components.icons :as icons] + [ied.nostr :as nostr] + [ied.events :as events])) + +(defn open-create-list-modal [] + (.showModal (.getElementById js/document "create-list-modal"))) + +;; Add to lists modal +(defn create-list-modal [] + (let [name (reagent/atom "")] + [:dialog {:id "create-list-modal" :class "modal"} + [:div {:class "modal-box relative flex flex-col"} + [:h3 {:class "text-lg font-bold"} "Bitte gib einen Namen für deine Liste ein"] + [:input + {:type "text" + :on-change (fn [e] (reset! name (-> e .-target .-value))) + :placeholder "List Name" + :class "input input-bordered w-full max-w-xs"}] + [:form {:method "dialog" :class "modal-backdrop"} + [:div {:class "flex flex-row justify-between mt-2"} + [:button {:class "btn" + :on-click #(re-frame/dispatch [::events/create-new-list @name])} "Create New List"] + [:button {:class "btn"} "Close"]]]]])) + +(defn open-add-to-list-modal [] + (.showModal (.getElementById js/document "add-to-lists-modal"))) + +(defn add-to-lists-modal [] + (let [selected-list-ids @(re-frame/subscribe [::subs/selected-list-ids]) + selected-lists @(re-frame/subscribe [::subs/selected-lists]) + selected-metadata-events @(re-frame/subscribe [::subs/selected-events]) + lists @(re-frame/subscribe [::subs/lists-of-user]) + sorted-lists (nostr/sort-lists lists)] + [:dialog {:id "add-to-lists-modal" :class "modal"} + [:div {:class "modal-box relative flex flex-col"} + [:h3 {:class "text-lg font-bold"} + "Wo möchtest du das hinzufügen?"] + (doall + (for [l lists] + (let [in-selected-lists (or (and (seq selected-metadata-events) + (every? (fn [e] (nostr/list-contains-metadata-event? l e)) selected-metadata-events)) + (contains? selected-list-ids (:id l))) + div-class (str "m-2 flex flex-row items-center rounded border border-solid border-white p-2 " + (if in-selected-lists + "bg-green-500 text-black" + "hover:bg-orange-500 hover:text-black"))] + + [:div {:class div-class + :key (nostr/get-list-name l) + :on-click #(re-frame/dispatch [::events/toggle-selected-list-ids (:id l)])} + [:p {:class "text-xl font-bold"} + (nostr/get-list-name l)] + (when in-selected-lists + [icons/checkmark])]))) + [:form {:method "dialog" + :class "modal-backdrop"} + [:div {:class "flex flex-row gap-2"} + [:button {:on-click #(re-frame/dispatch [::events/add-metadata-events-to-lists [selected-metadata-events selected-lists]]) + :class "btn"} + "Add Resources To Lists"] + [:button {:class "btn " + :on-click #((open-create-list-modal))} + "Create New List"] + + [:button {:class "btn btn-warning ml-auto mr-0"} + "Close"]]]]])) + diff --git a/src/ied/db.cljs b/src/ied/db.cljs index b25ef33..7ce4bba 100644 --- a/src/ied/db.cljs +++ b/src/ied/db.cljs @@ -53,8 +53,6 @@ :type ["search"]}]) :selected-events #{} :selected-list-ids #{} - :show-lists-modal false - :show-create-list-modal false :show-event-data-modal false :sockets [] :search-results nil diff --git a/src/ied/views.cljs b/src/ied/views.cljs index e64058a..58b0d3f 100644 --- a/src/ied/views.cljs +++ b/src/ied/views.cljs @@ -10,6 +10,7 @@ [ied.opencard.views :as opencard] [ied.views.search :as search] [ied.views.resource :as resource] + [ied.components.modals :as modals] [ied.views.add :as add] [ied.components.resource :as resource-component] [reagent.core :as reagent])) @@ -185,72 +186,6 @@ [:p "No relays found"] ;(re-frame/dispatch [::events/connect-to-default-relays]) )])) -;; Add to lists modal -(defn create-list-modal [] - (let [name (reagent/atom "") - visible? @(re-frame/subscribe [::subs/show-create-list-modal])] - (when visible? - [:dialog {:open visible? :class "modal"} - [:div {:class "modal-box relative flex flex-col"} - [:h3 {:class "text-lg font-bold"} "Hello!"] - [:p {:class "py-4"} "Press ESC key or click outside to close"] - [:input - {:type "text" - :on-change (fn [e] (reset! name (-> e .-target .-value))) - :placeholder "List Name" - :class "input input-bordered w-full max-w-xs"}] - [:button {:class "btn" - :on-click #(re-frame/dispatch [::events/create-new-list @name])} "Create New List"]] - - [:form {:on-click #(re-frame/dispatch [::events/toggle-show-create-list-modal]) - :method "dialog" :class "modal-backdrop"} - [:button "close"]]]))) - -(defn add-to-lists-modal [] - (let [selected-list-ids @(re-frame/subscribe [::subs/selected-list-ids]) - selected-lists @(re-frame/subscribe [::subs/selected-lists]) - selected-metadata-events @(re-frame/subscribe [::subs/selected-events]) - visible? @(re-frame/subscribe [::subs/show-lists-modal]) - lists @(re-frame/subscribe [::subs/lists-of-user]) - sorted-lists (nostr/sort-lists lists)] - (when visible? - [:dialog {:open visible? :class "modal"} - [:div {:class "modal-box relative flex flex-col"} - [:h3 {:class "text-lg font-bold"} - "Hello!"] - [:p {:class "py-4"} - "Press ESC key or click outside to close"] - (doall - (for [l lists] - (let [in-selected-lists (or (and (seq selected-metadata-events) - (every? (fn [e] (nostr/list-contains-metadata-event? l e)) selected-metadata-events)) - (contains? selected-list-ids (:id l))) - div-class (str "m-2 flex flex-row items-center rounded border border-solid border-white p-2 " - (if in-selected-lists - "bg-green-500 text-black" - "hover:bg-orange-500 hover:text-black"))] - - [:div {:class div-class - :key (nostr/get-list-name l) - :on-click #(re-frame/dispatch [::events/toggle-selected-list-ids (:id l)])} - [:p {:class "text-xl font-bold"} - (nostr/get-list-name l)] - (when in-selected-lists - [icons/checkmark])]))) - [:div {:class "flex flex-row"} - [:button {:on-click #(re-frame/dispatch [::events/add-metadata-events-to-lists [selected-metadata-events selected-lists]]) - :class "btn"} - "Add Resources To Lists"] - [:button {:class "btn ml-auto mr-0" - :on-click #(re-frame/dispatch [::events/toggle-show-create-list-modal])} - "Create New List"]]] - - [:form {:on-click #(re-frame/dispatch [::events/toggle-show-lists-modal]) - :method "dialog" - :class "modal-backdrop"} - [:button - "close"]]]))) - ;; shopping cart (defn shopping-cart [] (let [selected-events @(re-frame/subscribe [::subs/selected-events])] @@ -272,7 +207,10 @@ " Items")] [:div {:class "card-actions"} [:button {:class "btn" - :on-click #(re-frame/dispatch [::events/toggle-show-lists-modal])} + :on-click #((modals/open-add-to-list-modal) + + ; re-frame/dispatch [::events/toggle-show-lists-modal] + )} "Add To Lists"]]]]])) (defn user-menu [] @@ -430,7 +368,7 @@ (for [l lists] ^{:key (:id l)} [list-component l]))) [:button {:class "btn ml-auto mr-0" - :on-click #(re-frame/dispatch [::events/toggle-show-create-list-modal])} + :on-click #((modals/open-create-list-modal))} "Create New List"]])) (defmethod routes/panels :npub-view-panel [] [npub-view-panel]) @@ -446,7 +384,7 @@ [:div {:class "w-5/6 mt-1"} [:div {:class ""} (routes/panels @active-panel)]] - [add-to-lists-modal] - [create-list-modal] + [modals/add-to-lists-modal] + [modals/create-list-modal] [event-data-modal]]]))