edc-web-ui 0.2.0

A Rust Web interface with patternfly-yew client for EDC
Documentation
use crate::contexts::use_edc_connector_context;
use edc_connector_client::types::{asset::NewAsset, data_address::DataAddress};
use patternfly_yew::prelude::*;
use std::collections::HashMap;
use yew::platform::spawn_local;
use yew::prelude::*;

#[derive(Clone, Debug, PartialEq, Properties)]
pub struct CreateAssetProps {
  #[prop_or_default]
  pub on_create: Callback<()>,
}

#[component]
pub fn CreateAsset(props: &CreateAssetProps) -> Html {
  let edc_connector_context = use_edc_connector_context();

  let identifier = use_state(|| "".to_string());
  let name = use_state(|| "".to_string());
  let base_url = use_state(|| "".to_string());
  let content_type = use_state(|| "".to_string());
  let proxy_path = use_state(|| false);
  let proxy_query_params = use_state(|| false);
  let proxy_method = use_state(|| false);
  let proxy_body = use_state(|| false);
  let headers = use_state(HashMap::<String, String>::new);

  let onsubmit = use_callback(
    (
      edc_connector_context.clone(),
      identifier.clone(),
      name.clone(),
      base_url.clone(),
      content_type.clone(),
      proxy_path.clone(),
      proxy_query_params.clone(),
      proxy_method.clone(),
      proxy_body.clone(),
      headers.clone(),
      props.on_create.clone(),
    ),
    |event: SubmitEvent,
     (
      edc_connector_context,
      identifier,
      name,
      base_url,
      content_type,
      proxy_path,
      proxy_query_params,
      proxy_method,
      proxy_body,
      headers,
      on_create,
    )| {
      event.prevent_default();

      let identifier = (**identifier).clone();
      let name = (**name).clone();
      let base_url = (**base_url).clone();
      let content_type = (**content_type).clone();
      let proxy_path = **proxy_path;
      let proxy_query_params = **proxy_query_params;
      let proxy_method = **proxy_method;
      let proxy_body = **proxy_body;
      let headers = (**headers).clone();
      let edc_connector_context = edc_connector_context.clone();
      let on_create = on_create.clone();

      spawn_local(async move {
        let mut data_address_builder = DataAddress::builder()
          .kind("HttpData")
          .property("baseUrl", base_url)
          .property("proxyPath", if proxy_path { "true" } else { "false" })
          .property(
            "proxyQueryParams",
            if proxy_query_params { "true" } else { "false" },
          )
          .property("proxyMethod", if proxy_method { "true" } else { "false" })
          .property("proxyBody", if proxy_body { "true" } else { "false" });

        for (key, value) in &headers {
          data_address_builder = data_address_builder.property(&format!("header:{key}"), value);
        }

        let data_address = data_address_builder.build().unwrap();

        let new_asset = NewAsset::builder()
          .id(&identifier)
          .data_address(data_address)
          .property("name", name)
          .property("contenttype", content_type)
          .build();

        if let Some(client) = edc_connector_context.get_client() {
          if let Err(error) = client.assets().create(&new_asset).await {
            log::error!("Error creating asset: {}", error);
          } else {
            on_create.emit(());
          }
        }
      })
    },
  );

  let onchange_identifier = use_callback(identifier.setter(), |value, identifier_setter| {
    identifier_setter.set(value);
  });

  let onchange_name = use_callback(name.setter(), |value, name_setter| {
    name_setter.set(value);
  });

  let onchange_base_url = use_callback(base_url.setter(), |value, base_url_setter| {
    base_url_setter.set(value);
  });

  let onchange_content_type = use_callback(content_type.setter(), |value, content_type_setter| {
    content_type_setter.set(value);
  });

  let onchange_proxy_path = use_callback(proxy_path.setter(), |value, proxy_path_setter| {
    proxy_path_setter.set(value);
  });

  let onchange_proxy_query_params = use_callback(
    proxy_query_params.setter(),
    |value, proxy_query_params_setter| {
      proxy_query_params_setter.set(value);
    },
  );

  let onchange_proxy_method = use_callback(proxy_method.setter(), |value, proxy_method_setter| {
    proxy_method_setter.set(value);
  });

  let onchange_proxy_body = use_callback(proxy_body.setter(), |value, proxy_body_setter| {
    proxy_body_setter.set(value);
  });

  let disabled = false;

  html!(
    <Form {onsubmit}>
      <FormGroup label="Identifier" required=true>
        <TextInput required=true value={(*identifier).to_string()} onchange={onchange_identifier} />
      </FormGroup>
      <FormGroup label="Name" required=true>
        <TextInput required=true value={(*name).to_string()} onchange={onchange_name} />
      </FormGroup>
      <FormGroup label="Base URL" required=true>
        <TextInput
          required=true
          value={(*base_url).to_string()}
          onchange={onchange_base_url}
          r#type={TextInputType::Url}
        />
      </FormGroup>
      <FormGroup label="Content Type">
        <TextInput value={(*content_type).to_string()} onchange={onchange_content_type} />
      </FormGroup>
      <FormGroup label="Proxy Path">
        <Switch checked={*proxy_path} onchange={onchange_proxy_path} />
      </FormGroup>
      <FormGroup label="Proxy Query Parameters">
        <Switch checked={*proxy_query_params} onchange={onchange_proxy_query_params} />
      </FormGroup>
      <FormGroup label="Proxy Method">
        <Switch checked={*proxy_method} onchange={onchange_proxy_method} />
      </FormGroup>
      <FormGroup label="Proxy Body">
        <Switch checked={*proxy_body} onchange={onchange_proxy_body} />
      </FormGroup>
      <ActionGroup>
        <Button
          variant={ButtonVariant::Primary}
          label="Submit"
          r#type={ButtonType::Submit}
          {disabled}
        />
        <Button variant={ButtonVariant::Secondary} label="Reset" r#type={ButtonType::Reset} />
      </ActionGroup>
    </Form>
  )
}