rezervovator/src/components/modal_box.rs

use crate::locales::trl;
use leptos::*;

#[derive(Copy, Clone)]
pub struct DialogOpener {
    visible: ReadSignal<bool>,
    set_visible: WriteSignal<bool>,
}

impl DialogOpener {
    pub fn new(cx: Scope) -> Self {
        let (visible, set_visible) = create_signal(cx, false);
        DialogOpener {
            visible,
            set_visible,
        }
    }

    pub fn visible(&self) -> bool {
        self.visible.get()
    }

    pub fn show(&self) {
        self.set_visible.update(|state| *state = true);
    }

    pub fn hide(&self) {
        self.set_visible.update(|state| *state = false);
    }
}

#[component]
pub fn ModalDialog(
    cx: Scope,
    opener: DialogOpener,
    title: &'static str,
    children: Children,
) -> impl IntoView {
    view! {cx,
        <div class={ move || if opener.visible() {"modal fade show"} else {"modal fade"}}
            style={ move || if opener.visible() {"display: block;"} else {""}}
            id="modalCenter" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="modalCenterTitle">{trl(cx, title)}</h5>
                        <button
                            type="button"
                            class="btn-close"
                            data-bs-dismiss="modal"
                            aria-label="Close"
                            on:click=move |_| opener.hide()/>
                        </div>
                        {children(cx)}
                    </div>
                </div>
            </div>
    }
}

#[component]
pub fn ModalBody(cx: Scope, children: Children) -> impl IntoView {
    view! {cx,
        <div class="modal-body">
            {children(cx)}
        </div>
    }
}

#[component]
pub fn ModalFooter(cx: Scope, children: Children) -> impl IntoView {
    view! {cx,
        <div class="modal-footer">
           {children(cx)}
        </div>
    }
}