diff --git a/CHANGELOG.md b/CHANGELOG.md index 5cb33dd9..d35f1410 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -15,6 +15,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - [651](https://github.com/thoth-pub/thoth/pull/651) - Allow supplying `DATABASE_URL` as binary argument - [648](https://github.com/thoth-pub/thoth/issues/648) - Added new `LocationPlatform`, `THOTH`, for Locations where file is hosted directly by Thoth on S3. +### Fixed + - [631](https://github.com/thoth-pub/thoth/issues/631) - Fix slow loading of Contributor dropdown in Contribution form + ## [[0.12.14]](https://github.com/thoth-pub/thoth/releases/tag/v0.12.14) - 2024-11-04 ### Changed - [642](https://github.com/thoth-pub/thoth/issues/642) - Output `ProductAvailability` based on work status in Thoth ONIX 3.0 diff --git a/thoth-app/src/component/contributions_form.rs b/thoth-app/src/component/contributions_form.rs index c9a186c5..34c30bbb 100644 --- a/thoth-app/src/component/contributions_form.rs +++ b/thoth-app/src/component/contributions_form.rs @@ -1,4 +1,3 @@ -use gloo_timers::callback::Timeout; use std::str::FromStr; use thoth_api::model::contribution::Contribution; use thoth_api::model::contribution::ContributionType; @@ -18,9 +17,9 @@ use crate::agent::notification_bus::NotificationDispatcher; use crate::agent::notification_bus::NotificationStatus; use crate::agent::notification_bus::Request; use crate::component::affiliations_form::AffiliationsFormComponent; +use crate::component::contributor_select::ContributorSelectComponent; use crate::component::utils::FormBooleanSelect; use crate::component::utils::FormContributionTypeSelect; -use crate::component::utils::FormContributorSelect; use crate::component::utils::FormNumberInput; use crate::component::utils::FormTextInput; use crate::models::contribution::contribution_types_query::FetchActionContributionTypes; @@ -41,19 +40,12 @@ use crate::models::contribution::update_contribution_mutation::UpdateContributio use crate::models::contribution::update_contribution_mutation::UpdateContributionRequestBody; use crate::models::contribution::update_contribution_mutation::Variables as UpdateVariables; use crate::models::contribution::ContributionTypeValues; -use crate::models::contributor::contributors_query::ContributorsRequest; -use crate::models::contributor::contributors_query::ContributorsRequestBody; -use crate::models::contributor::contributors_query::FetchActionContributors; -use crate::models::contributor::contributors_query::FetchContributors; -use crate::models::contributor::contributors_query::Variables; -use crate::models::Dropdown; use crate::string::CANCEL_BUTTON; use crate::string::EDIT_BUTTON; use crate::string::EMPTY_CONTRIBUTIONS; use crate::string::NO; use crate::string::REMOVE_BUTTON; use crate::string::YES; -use crate::DEFAULT_DEBOUNCING_TIMEOUT; use super::ToElementValue; use super::ToOption; @@ -63,33 +55,22 @@ pub struct ContributionsFormComponent { contribution: Contribution, show_modal_form: bool, in_edit_mode: bool, - show_results: bool, - fetch_contributors: FetchContributors, fetch_contribution_types: FetchContributionTypes, create_contribution: PushCreateContribution, delete_contribution: PushDeleteContribution, update_contribution: PushUpdateContribution, notification_bus: NotificationDispatcher, - search_callback: Callback<()>, - search_query: String, - debounce_timeout: Option, } #[derive(Default)] struct ContributionsFormData { - contributors: Vec, contribution_types: Vec, } pub enum Msg { ToggleModalFormDisplay(bool, Option), - SetContributorsFetchState(FetchActionContributors), - GetContributors, SetContributionTypesFetchState(FetchActionContributionTypes), GetContributionTypes, - ToggleSearchResultDisplay(bool), - SearchQueryChanged(String), - SearchContributor, SetContributionCreateState(PushActionCreateContribution), CreateContribution, SetContributionUpdateState(PushActionUpdateContribution), @@ -97,7 +78,7 @@ pub enum Msg { SetContributionDeleteState(PushActionDeleteContribution), DeleteContribution(Uuid), AddContribution(Contributor), - ChangeContributor(Uuid), + ChangeContributor(Contributor), ChangeFirstName(String), ChangeLastName(String), ChangeFullName(String), @@ -123,25 +104,12 @@ impl Component for ContributionsFormComponent { let contribution: Contribution = Default::default(); let show_modal_form = false; let in_edit_mode = false; - let show_results = false; - let body = ContributorsRequestBody { - variables: Variables { - limit: Some(100), - ..Default::default() - }, - ..Default::default() - }; - let request = ContributorsRequest { body }; - let fetch_contributors = Fetch::new(request); let fetch_contribution_types = Default::default(); let create_contribution = Default::default(); let delete_contribution = Default::default(); let update_contribution = Default::default(); let notification_bus = NotificationBus::dispatcher(); - let search_callback = ctx.link().callback(|_| Msg::SearchContributor); - let search_query: String = Default::default(); - ctx.link().send_message(Msg::GetContributors); ctx.link().send_message(Msg::GetContributionTypes); ContributionsFormComponent { @@ -149,16 +117,11 @@ impl Component for ContributionsFormComponent { contribution, show_modal_form, in_edit_mode, - show_results, - fetch_contributors, fetch_contribution_types, create_contribution, delete_contribution, update_contribution, notification_bus, - search_callback, - search_query, - debounce_timeout: None, } } @@ -168,18 +131,6 @@ impl Component for ContributionsFormComponent { self.show_modal_form = show_form; self.in_edit_mode = c.is_some(); if show_form { - let body = ContributorsRequestBody { - variables: Variables { - // Dropdown shown in modal form must contain full contributor list, - // in case user is editing and wants to switch between them - limit: Some(99999), - ..Default::default() - }, - ..Default::default() - }; - let request = ContributorsRequest { body }; - self.fetch_contributors = Fetch::new(request); - ctx.link().send_message(Msg::GetContributors); if let Some(contribution) = c { // Editing existing contribution: load its current values. self.contribution = contribution; @@ -187,25 +138,6 @@ impl Component for ContributionsFormComponent { } true } - Msg::SetContributorsFetchState(fetch_state) => { - self.fetch_contributors.apply(fetch_state); - self.data.contributors = match self.fetch_contributors.as_ref().state() { - FetchState::NotFetching(_) => vec![], - FetchState::Fetching(_) => vec![], - FetchState::Fetched(body) => body.data.contributors.clone(), - FetchState::Failed(_, _err) => vec![], - }; - true - } - Msg::GetContributors => { - ctx.link().send_future( - self.fetch_contributors - .fetch(Msg::SetContributorsFetchState), - ); - ctx.link() - .send_message(Msg::SetContributorsFetchState(FetchAction::Fetching)); - false - } Msg::SetContributionTypesFetchState(fetch_state) => { self.fetch_contribution_types.apply(fetch_state); self.data.contribution_types = match self.fetch_contribution_types.as_ref().state() @@ -422,61 +354,18 @@ impl Component for ContributionsFormComponent { .send_message(Msg::ToggleModalFormDisplay(true, None)); true } - Msg::ToggleSearchResultDisplay(value) => { - self.show_results = value; - true - } - Msg::SearchQueryChanged(value) => { - self.search_query = value; - // cancel previous timeout - self.debounce_timeout = self.debounce_timeout.take().and_then(|timeout| { - timeout.cancel(); - None - }); - // start new timeout - let search_callback = self.search_callback.clone(); - let timeout = Timeout::new(DEFAULT_DEBOUNCING_TIMEOUT, move || { - search_callback.emit(()); - }); - self.debounce_timeout = Some(timeout); - false - } - Msg::SearchContributor => { - let body = ContributorsRequestBody { - variables: Variables { - filter: Some(self.search_query.clone()), - limit: Some(25), - ..Default::default() - }, - ..Default::default() - }; - let request = ContributorsRequest { body }; - self.fetch_contributors = Fetch::new(request); - ctx.link().send_message(Msg::GetContributors); - false - } - Msg::ChangeContributor(contributor_id) => { - // ID may be nil if placeholder option was selected. - // Reset contributor anyway, to keep display/underlying values in sync. - self.contribution.contributor_id.neq_assign(contributor_id); - // we already have the full list of contributors - if let Some(contributor) = self - .data - .contributors - .iter() - .find(|c| c.contributor_id == contributor_id) - { - // Update user-editable name fields to default to canonical name - self.contribution - .first_name - .neq_assign(contributor.first_name.clone()); - self.contribution - .last_name - .neq_assign(contributor.last_name.clone()); - self.contribution - .full_name - .neq_assign(contributor.full_name.clone()); - } + Msg::ChangeContributor(contributor) => { + self.contribution.contributor_id = contributor.contributor_id; + // Update user-editable name fields to default to canonical name, if changed + self.contribution + .first_name + .neq_assign(contributor.first_name.clone()); + self.contribution + .last_name + .neq_assign(contributor.last_name.clone()); + self.contribution + .full_name + .neq_assign(contributor.full_name.clone()); true } Msg::ChangeFirstName(val) => { @@ -515,41 +404,7 @@ impl Component for ContributionsFormComponent { { "Contributions" }

-
-
-
-

- - - - -

-
-
- -
+
@@ -564,15 +419,13 @@ impl Component for ContributionsFormComponent {
- +
+ +
+ { &self.contribution.full_name } +
+
+ String { - match self.show_results { - true => "dropdown is-active".to_string(), - false => "dropdown".to_string(), - } - } - fn render_contribution(&self, ctx: &Context, c: &Contribution) -> Html { let contribution = c.clone(); let contribution_id = c.contribution_id; diff --git a/thoth-app/src/component/contributor_select.rs b/thoth-app/src/component/contributor_select.rs new file mode 100644 index 00000000..3b55fa2b --- /dev/null +++ b/thoth-app/src/component/contributor_select.rs @@ -0,0 +1,193 @@ +use gloo_timers::callback::Timeout; +use thoth_api::model::contributor::Contributor; +use yew::html; +use yew::prelude::*; +use yewtil::fetch::Fetch; +use yewtil::fetch::FetchAction; +use yewtil::fetch::FetchState; + +use crate::models::contributor::contributors_query::ContributorsRequest; +use crate::models::contributor::contributors_query::ContributorsRequestBody; +use crate::models::contributor::contributors_query::FetchActionContributors; +use crate::models::contributor::contributors_query::FetchContributors; +use crate::models::contributor::contributors_query::Variables; +use crate::models::Dropdown; +use crate::DEFAULT_DEBOUNCING_TIMEOUT; + +use super::ToElementValue; + +pub struct ContributorSelectComponent { + contributors: Vec, + fetch_contributors: FetchContributors, + search_callback: Callback<()>, + search_query: String, + debounce_timeout: Option, + show_results: bool, +} + +pub enum Msg { + SetContributorsFetchState(FetchActionContributors), + GetContributors, + SearchQueryChanged(String), + SearchContributor, + ToggleSearchResultDisplay(bool), + SelectContributor(Contributor), +} + +#[derive(PartialEq, Properties)] +pub struct Props { + pub callback: Callback, +} + +impl Component for ContributorSelectComponent { + type Message = Msg; + type Properties = Props; + + fn create(ctx: &Context) -> Self { + let contributors: Vec = Default::default(); + let body = ContributorsRequestBody { + variables: Variables { + limit: Some(100), + ..Default::default() + }, + ..Default::default() + }; + let request = ContributorsRequest { body }; + let fetch_contributors = Fetch::new(request); + let search_callback = ctx.link().callback(|_| Msg::SearchContributor); + let search_query: String = Default::default(); + let debounce_timeout: Option = None; + let show_results = false; + + ctx.link().send_message(Msg::GetContributors); + + ContributorSelectComponent { + contributors, + fetch_contributors, + search_callback, + search_query, + debounce_timeout, + show_results, + } + } + + fn update(&mut self, ctx: &Context, msg: Self::Message) -> bool { + match msg { + Msg::SetContributorsFetchState(fetch_state) => { + self.fetch_contributors.apply(fetch_state); + self.contributors = match self.fetch_contributors.as_ref().state() { + FetchState::NotFetching(_) => vec![], + FetchState::Fetching(_) => vec![], + FetchState::Fetched(body) => body.data.contributors.clone(), + FetchState::Failed(_, _err) => vec![], + }; + true + } + Msg::GetContributors => { + ctx.link().send_future( + self.fetch_contributors + .fetch(Msg::SetContributorsFetchState), + ); + ctx.link() + .send_message(Msg::SetContributorsFetchState(FetchAction::Fetching)); + false + } + Msg::SearchQueryChanged(value) => { + self.search_query = value; + // cancel previous timeout + self.debounce_timeout = self.debounce_timeout.take().and_then(|timeout| { + timeout.cancel(); + None + }); + + if !self.search_query.is_empty() { + // start new timeout + let search_callback = self.search_callback.clone(); + let timeout = Timeout::new(DEFAULT_DEBOUNCING_TIMEOUT, move || { + search_callback.emit(()); + }); + self.debounce_timeout = Some(timeout); + } else { + self.contributors = Default::default(); + } + false + } + Msg::SearchContributor => { + let body = ContributorsRequestBody { + variables: Variables { + filter: Some(self.search_query.clone()), + limit: Some(25), + ..Default::default() + }, + ..Default::default() + }; + let request = ContributorsRequest { body }; + self.fetch_contributors = Fetch::new(request); + ctx.link().send_message(Msg::GetContributors); + false + } + Msg::ToggleSearchResultDisplay(value) => { + self.show_results = value; + true + } + Msg::SelectContributor(contributor) => { + ctx.props().callback.emit(contributor); + false + } + } + } + + fn view(&self, ctx: &Context) -> Html { + let show_results = self.show_results && !self.contributors.is_empty(); + let dropdown_status = match show_results { + true => "dropdown is-active".to_string(), + false => "dropdown".to_string(), + }; + + html! { +
+
+
+

+ + + + +

+
+
+ { + if show_results { + html! { + + } + } else { + html! {} + } + } +
+ } + } +} diff --git a/thoth-app/src/component/mod.rs b/thoth-app/src/component/mod.rs index dd2b77a0..a3c523d7 100644 --- a/thoth-app/src/component/mod.rs +++ b/thoth-app/src/component/mod.rs @@ -455,6 +455,7 @@ pub mod books; pub mod chapters; pub mod contributions_form; pub mod contributor; +pub mod contributor_select; pub mod contributors; pub mod dashboard; pub mod delete_dialogue;