Added singlemediapicker

This commit is contained in:
Franklin 2023-04-25 10:00:20 -04:00
parent 674efe4330
commit bab0f17f8a
3 changed files with 131 additions and 4 deletions

View File

@ -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;

View File

@ -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>
</>
}
}

View File

@ -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>/>
</>
} }
} }