use crate::components::form::form_node::FormNode;
use crate::defaults::{DEFAULT_HTMX_SWAP_MODE, DEFAULT_NO_TEXT, DEFAULT_PROGRESS_MODE, DEFAULT_TEXT_ITEM, PARAMS_CSS_CLASS, PARAMS_ENDPOINT, PARAMS_MODULE, PARAMS_PROGRESS_MODE, PARAMS_SWAP_MODE, PARAMS_TITLE, PARAMS_TYPE, SECTION_ENDPOINTS, SECTION_MODULES};
use crate::utils::types::{RUMString, SharedAppState, URLParams, URLPath};
use crate::{rumtk_web_get_config, rumtk_web_get_config_section, rumtk_web_get_form, rumtk_web_get_text_item, ComponentResult, RUMWebTemplate, RUMWebTemplateSafe};
use rumtk_core::rumtk_generate_id;
#[derive(RUMWebTemplate, Debug)]
#[template(
source = "
<div class='form-{{css_class}}-box'>
{% if custom_css_enabled %}
<link href='/static/components/form/form.css' rel='stylesheet'>
{% endif %}
{% if !module.is_empty() %}
<script type='module' id='form-script' src='/static/js/forms/form_{{typ}}.js' async defer>
</script>
{% endif %}
<form id='form-{{htmx_target}}' class='f18 centered form-default-contents gap-10 form-{{css_class}}-contents' role='form' hx-encoding='multipart/form-data' hx-post='{{endpoint}}' aria-label='{{typ}} form' hx-swap='{{htmx_swap_mode}}' hx-target='#form-{{htmx_target}}'>
<h1>{{ title }}</h1>
{% for element in elements %}
{{ element|safe }}
{% endfor %}
</form>
<script>
htmx.on('#form-{{typ}}', 'htmx:xhr:progress', function(evt) {
let progressValue = evt.detail.loaded/evt.detail.total * 100;
let progressElement = htmx.find('#progress');
{% if auto_hide_progress %}
progressElement.hidden = false;
if (progressValue >= 100) {
progressElement.hidden = true;
}
{% endif %}
progressElement.setAttribute('value', progressValue);
});
</script>
</div>
",
ext = "html"
)]
pub struct Form {
typ: RUMString,
title: RUMString,
module: RUMString,
endpoint: RUMString,
htmx_target: RUMString,
htmx_swap_mode: RUMString,
elements: Vec<FormNode>,
css_class: RUMString,
custom_css_enabled: bool,
auto_hide_progress: bool,
}
impl RUMWebTemplateSafe for Form {}
pub fn form<'a>(_path_components: URLPath<'a, 'a>, params: URLParams<'a>, state: SharedAppState) -> ComponentResult<Form> {
let typ = rumtk_web_get_text_item!(params, PARAMS_TYPE, DEFAULT_TEXT_ITEM).to_string();
let title_str = rumtk_web_get_text_item!(params, PARAMS_TITLE, DEFAULT_NO_TEXT);
let module = rumtk_web_get_text_item!(params, PARAMS_MODULE, &typ);
let endpoint = rumtk_web_get_text_item!(params, PARAMS_ENDPOINT, &typ);
let auto_hide_progress = rumtk_web_get_text_item!(params, PARAMS_PROGRESS_MODE, DEFAULT_PROGRESS_MODE);
let htmx_swap_mode = rumtk_web_get_text_item!(params, PARAMS_SWAP_MODE, DEFAULT_HTMX_SWAP_MODE).to_string();
let htmx_target = rumtk_generate_id!().to_string();
let css_class = rumtk_web_get_text_item!(params, PARAMS_CSS_CLASS, DEFAULT_TEXT_ITEM).to_string();
let module_store = rumtk_web_get_config_section!(state, SECTION_MODULES);
let module_name = rumtk_web_get_text_item!(&module_store, module, DEFAULT_NO_TEXT).to_string();
let endpoint_store = rumtk_web_get_config_section!(state, SECTION_ENDPOINTS);
let endpoint_url = rumtk_web_get_text_item!(&endpoint_store, endpoint, endpoint).to_string();
let custom_css_enabled = rumtk_web_get_config!(state).flags.custom_css;
let element_results = rumtk_web_get_form!(&typ)?;
let mut elements = Vec::<FormNode>::with_capacity(element_results.len());
for result in element_results {
elements.push(result?);
}
Ok(Form {
typ,
title: title_str.to_string(),
module: module_name,
endpoint: endpoint_url,
htmx_target,
htmx_swap_mode,
elements,
css_class,
custom_css_enabled,
auto_hide_progress: auto_hide_progress == DEFAULT_PROGRESS_MODE,
})
}