Added singlemediapicker
This commit is contained in:
parent
674efe4330
commit
bab0f17f8a
|
@ -14,3 +14,4 @@ pub mod nav_bar;
|
||||||
pub mod new_widget;
|
pub mod new_widget;
|
||||||
pub mod project_card;
|
pub mod project_card;
|
||||||
pub mod textfield;
|
pub mod textfield;
|
||||||
|
pub mod single_media_picker;
|
|
@ -0,0 +1,108 @@
|
||||||
|
use js_sys::Uint8Array;
|
||||||
|
use wasm_bindgen_futures::JsFuture;
|
||||||
|
use yew::prelude::*;
|
||||||
|
|
||||||
|
use crate::{
|
||||||
|
api,
|
||||||
|
components::textfield::{get_files_from_input_event},
|
||||||
|
};
|
||||||
|
|
||||||
|
#[derive(PartialEq, Properties, Clone)]
|
||||||
|
pub struct SingleMediaPickerProps {
|
||||||
|
pub value: UseStateHandle<String>,
|
||||||
|
pub onchange: Option<Callback<String>>,
|
||||||
|
#[prop_or_default]
|
||||||
|
pub required: bool,
|
||||||
|
pub item: jl_types::dto::item::Item,
|
||||||
|
}
|
||||||
|
|
||||||
|
#[function_component(SingleMediaPicker)]
|
||||||
|
pub fn single_media_picker(props: &SingleMediaPickerProps) -> Html {
|
||||||
|
let picked_handle = use_state(|| false);
|
||||||
|
|
||||||
|
let onphoto_upload = {
|
||||||
|
let value_handle = props.value.clone();
|
||||||
|
let onchange_cb = props.onchange.clone();
|
||||||
|
let item = props.item.clone();
|
||||||
|
let picked_handle = picked_handle.clone();
|
||||||
|
Callback::from(move |e: InputEvent| {
|
||||||
|
match onchange_cb.clone() {
|
||||||
|
Some(cb) => cb.emit(String::new()),
|
||||||
|
None => {}
|
||||||
|
};
|
||||||
|
let files_opt = get_files_from_input_event(e);
|
||||||
|
match files_opt {
|
||||||
|
Some(filelist) => {
|
||||||
|
match filelist.get(0) {
|
||||||
|
Some(file) => {
|
||||||
|
let value_handle = value_handle.clone();
|
||||||
|
let picked_handle = picked_handle.clone();
|
||||||
|
let item = item.clone();
|
||||||
|
wasm_bindgen_futures::spawn_local(async move {
|
||||||
|
let array_buf = JsFuture::from(file.array_buffer()).await;
|
||||||
|
let array = Uint8Array::new(&array_buf.unwrap());
|
||||||
|
let bytes: Vec<u8> = array.to_vec();
|
||||||
|
// Upload to backend and retrieve url
|
||||||
|
match api::backend::upload_image(item, bytes).await {
|
||||||
|
Ok(url) => {
|
||||||
|
value_handle.set(url);
|
||||||
|
picked_handle.set(true);
|
||||||
|
}
|
||||||
|
Err(error) => {
|
||||||
|
log::error!("Error uploading image to backend: {error}")
|
||||||
|
}
|
||||||
|
};
|
||||||
|
});
|
||||||
|
}
|
||||||
|
None => {
|
||||||
|
log::error!("No files in first element of filelist...")
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
None => {
|
||||||
|
log::error!("Something weird happened. No files after selecting files")
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
};
|
||||||
|
|
||||||
|
html! {
|
||||||
|
<>
|
||||||
|
<div class={{"textfield-label-required"}} style={"width: 100%; text-align: left;"}>{"Media del proyecto"}</div>
|
||||||
|
<div class={"mediapicker-container"}>
|
||||||
|
{
|
||||||
|
if *picked_handle {
|
||||||
|
html! {
|
||||||
|
<div class={"mediapicker-media"}>
|
||||||
|
<img class={"mediapicker-media"} src={(*props.value).clone()} />
|
||||||
|
<div class={"mediapicker-delete"} onclick={
|
||||||
|
let onchange_cb = props.onchange.clone();
|
||||||
|
let picked_handle = picked_handle.clone();
|
||||||
|
Callback::from(move |_| {
|
||||||
|
match onchange_cb.clone() {
|
||||||
|
Some(cb) => cb.emit(String::new()),
|
||||||
|
None => {}
|
||||||
|
};
|
||||||
|
picked_handle.set(false);
|
||||||
|
})
|
||||||
|
}>
|
||||||
|
<i class="fa-solid fa-trash-can"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
html! {
|
||||||
|
<div class={"mediapicker-new"}>
|
||||||
|
<div class={"mediapicker-new-photo-section"}>
|
||||||
|
<input type={"file"} accept={"image/*"} oninput={onphoto_upload}/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -1,9 +1,8 @@
|
||||||
use jl_types::domain::agent::Agent;
|
use jl_types::domain::{agent::Agent, credential::CredentialType};
|
||||||
use uuid::Uuid;
|
|
||||||
use yew::prelude::*;
|
use yew::prelude::*;
|
||||||
use yew_router::prelude::use_navigator;
|
use yew_router::prelude::use_navigator;
|
||||||
|
|
||||||
use crate::pages::admin::edit::EditType;
|
use crate::{pages::admin::edit::{EditType}, components::{textfield::TextField, media_picker::MediaPicker, dropdown::DropDown, single_media_picker::SingleMediaPicker}, };
|
||||||
|
|
||||||
#[derive(Properties, PartialEq, Clone)]
|
#[derive(Properties, PartialEq, Clone)]
|
||||||
pub struct AgentFieldsProps {
|
pub struct AgentFieldsProps {
|
||||||
|
@ -15,8 +14,27 @@ pub struct AgentFieldsProps {
|
||||||
pub fn agent_fields(props: &AgentFieldsProps) -> Html {
|
pub fn agent_fields(props: &AgentFieldsProps) -> Html {
|
||||||
let navigator = use_navigator().unwrap();
|
let navigator = use_navigator().unwrap();
|
||||||
let user_typed = use_state(|| false);
|
let user_typed = use_state(|| false);
|
||||||
|
let agent_opt = props.agent.clone();
|
||||||
|
|
||||||
|
let ontype_cb = {
|
||||||
|
let user_typed = user_typed.clone();
|
||||||
|
Callback::from(move |_| {
|
||||||
|
user_typed.set(true);
|
||||||
|
})
|
||||||
|
};
|
||||||
|
|
||||||
|
// Fields
|
||||||
|
let agent_name_handle = use_state(|| String::new());
|
||||||
|
let agent_shortcode_handle = use_state(|| String::new());
|
||||||
|
let profile_picture_url_handle = use_state(|| String::new());
|
||||||
|
let credential = use_state(|| String::new());
|
||||||
|
let credential_type = use_state(|| CredentialType::PhoneNumber);
|
||||||
html! {
|
html! {
|
||||||
|
<>
|
||||||
|
<TextField label={"Nombre Completo"} value={agent_name_handle} required={true} onchange={ontype_cb.clone()}/>
|
||||||
|
//<TextField label={"Distrito"} value={location_district} required={true} onchange={ontype_cb.clone()} />
|
||||||
|
<SingleMediaPicker value={profile_picture_url_handle} onchange={ontype_cb.clone()} item={jl_types::dto::item::Item::Agent}/>
|
||||||
|
//<DropDown<CredentialType>/>
|
||||||
|
</>
|
||||||
}
|
}
|
||||||
}
|
}
|
Loading…
Reference in New Issue