edc-web-components 0.8.1

A Rust Web Components with patternfly-yew client for EDC
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137

use crate::components::DatasetCard;
use crate::contexts::use_edc_connector_context;
use crate::models::{AssetItem, DataspaceDataset};
use edc_connector_client::EdcConnectorApiVersion;
use edc_connector_client::types::query::Query;
use patternfly_yew::prelude::*;
use yew::prelude::*;
use yew::suspense::use_future_with;

#[derive(Clone, Debug, PartialEq, Properties)]
pub struct AssetSelectorProps {
  pub selected_assets: Vec<AssetItem>,
  pub onselect: Callback<Vec<AssetItem>>,
  #[prop_or("selectable-asset".to_string())]
  pub select_id: String,
}

#[component]
pub fn AssetSelector(props: &AssetSelectorProps) -> Html {
  html!(
    <Suspense>
      <AssetSelectorInner
        onselect={props.onselect.clone()}
        selected_assets={props.selected_assets.clone()}
        select_id={props.select_id.clone()}
      />
    </Suspense>
  )
}

#[derive(Clone, Debug, PartialEq, Properties)]
pub struct AssetSelectorInnerProps {
  pub selected_assets: Vec<AssetItem>,
  pub onselect: Callback<Vec<AssetItem>>,
  pub select_id: String,
}

#[component]
fn AssetSelectorInner(props: &AssetSelectorInnerProps) -> HtmlResult {
  let limit = use_state(|| 10usize);
  let offset = use_state(|| 0usize);
  let force_refresh = use_state(|| 0usize);
  let edc_connector_context = use_edc_connector_context();

  let assets = use_future_with(
    (edc_connector_context, *limit, *offset, *force_refresh),
    |parameters| async move {
      let (edc_connector_context, limit, offset, _) = (*parameters).clone();

      let query = Query::builder()
        .limit(limit as u32)
        .offset(offset as u32)
        .build();

      if let Some(client) = edc_connector_context.get_client() {
        client
          .assets(EdcConnectorApiVersion::V4)
          .query(query)
          .await
          .unwrap_or_default()
          .into_iter()
          .map(AssetItem::from)
          .collect::<Vec<_>>()
      } else {
        vec![]
      }
    },
  )?;

  let assets = (*assets).clone();

  let on_selected = use_callback(
    (props.selected_assets.clone(), props.onselect.clone()),
    |(asset_id, selected), (selected_assets, onselect)| {
      let mut selected_assets = selected_assets.clone();

      if selected {
        selected_assets.push(asset_id);
      } else {
        selected_assets.retain(|id| id != &asset_id);
      }

      onselect.emit(selected_assets);
    },
  );

  let items = assets.iter().map(|asset_item| {
    let selected = props.selected_assets.contains(asset_item);
    let dataset = DataspaceDataset::from(asset_item.clone());
    let asset_item = asset_item.clone();

    html!(
      <DatasetCard
        {dataset}
        {selected}
        on_selected={on_selected.reform(move |selected| (asset_item.clone(), selected) )}
      />
    )
  });

  let onlimit = use_callback(limit.setter(), |limit, limit_setter| {
    limit_setter.set(limit)
  });

  let total_entries = Option::<usize>::None;

  let nav_callback = use_callback(
    (offset.clone(), *limit, total_entries),
    |page: Navigation, (offset, limit, total_entries)| {
      let new_offset = match page {
        Navigation::First => 0,
        Navigation::Last => (total_entries.unwrap_or_default().saturating_sub(1) / limit) * limit,
        Navigation::Previous => **offset - limit,
        Navigation::Next => **offset + limit,
        Navigation::Page(n) => n * limit,
      };
      offset.set(new_offset);
    },
  );

  Ok(html!(
    <Stack gutter=true>
      <StackItem>
        <Pagination
          offset={*offset}
          entries_per_page_choices={vec![5, 10, 25, 50, 100]}
          selected_choice={*limit}
          onlimit={&onlimit}
          onnavigation={&nav_callback}
        />
      </StackItem>
      <StackItem>
        <Gallery gutter=true>{ for items }</Gallery>
      </StackItem>
    </Stack>
  ))
}