Added singlemediapicker
This commit is contained in:
Franklin
parent
674efe4330
commit
bab0f17f8a
|
|
@ -14,3 +14,4 @@ pub mod nav_bar;
|
|||
pub mod new_widget;
|
||||
pub mod project_card;
|
||||
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 uuid::Uuid;
|
||||
use jl_types::domain::{agent::Agent, credential::CredentialType};
|
||||
use yew::prelude::*;
|
||||
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)]
|
||||
pub struct AgentFieldsProps {
|
||||
|
|
@ -15,8 +14,27 @@ pub struct AgentFieldsProps {
|
|||
pub fn agent_fields(props: &AgentFieldsProps) -> Html {
|
||||
let navigator = use_navigator().unwrap();
|
||||
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! {
|
||||
|
||||
<>
|
||||
<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