edc_web_components/components/
dataset_card.rs

1use crate::components::LandingPage;
2use crate::models::DataspaceDataset;
3use patternfly_yew::prelude::*;
4use stylist::yew::styled_component;
5use yew::prelude::*;
6
7#[derive(Clone, PartialEq, Properties)]
8pub struct DatasetCardProps {
9  pub dataset: DataspaceDataset,
10  #[prop_or_default]
11  pub on_offer_click: Option<Callback<()>>,
12  #[prop_or_default]
13  pub selected: bool,
14  #[prop_or_default]
15  pub on_selected: Option<Callback<bool>>,
16  #[prop_or(AttrValue::Static("Select"))]
17  pub button_label: AttrValue,
18}
19
20#[styled_component]
21pub fn DatasetCard(props: &DatasetCardProps) -> Html {
22  let card_class = css!(
23    width: 250px;
24  );
25
26  let thumbnails_class = css!(
27    height: 180px;
28    object-fit: cover;
29  );
30
31  let provider_logo_class = css!(
32    width: 50px;
33    height: 50px;
34    object-fit: contain;
35  );
36
37  let version_class = css!(
38    position: absolute;
39    top: 5px;
40    right: 5px;
41  );
42
43  let keyword_class = css!(
44    .pf-v6-l-split {
45      overflow: hidden;
46    }
47  );
48
49  let description_class = css!(
50    display: block;
51    display: -webkit-box;
52    -webkit-line-clamp: 5;
53    -webkit-box-orient: vertical;
54    text-overflow: ellipsis;
55    overflow: hidden;
56  );
57
58  let landing_page = if let Some(landing_page) = props.dataset.landing_page.clone() {
59    html!(<LandingPage {landing_page} />)
60  } else {
61    html!()
62  };
63
64  let offer_button = if let Some(offer) = props.on_offer_click.clone() {
65    html!(
66      <Button
67        variant={ButtonVariant::Primary}
68        icon={Icon::AngleRight}
69        onclick={offer.reform(|_| ())}
70      >
71        { props.button_label.clone() }
72      </Button>
73    )
74  } else {
75    html!()
76  };
77
78  let title = props.dataset.title.to_string();
79
80  let version = props
81    .dataset
82    .version
83    .clone()
84    .map(|version| version.to_string())
85    .unwrap_or_default();
86
87  let comment = props.dataset.comment.clone().unwrap_or_default();
88
89  let thumbnail = props
90    .dataset
91    .thumbnail
92    .clone()
93    .and_then(|thumbnail| thumbnail.resource)
94    .map(|thumbnail| html! { <img src={thumbnail} class={thumbnails_class.clone()} /> });
95
96  let provider_logo = props
97    .dataset
98    .creator
99    .clone()
100    .and_then(|creator| creator.thumbnail)
101    .and_then(|thumbnail| thumbnail.resource)
102    .map(|thumbnail| html! { <img src={thumbnail} class={provider_logo_class.clone()} /> });
103
104  let keywords = props.dataset.keywords.iter().map(|keyword| {
105    html_nested! {
106      <SplitItem>
107        <Label label={keyword.clone()} />
108      </SplitItem>
109    }
110  });
111
112  let selectable_actions = if let Some(on_selected) = props.on_selected.clone() {
113    let checked = if props.selected {
114      CheckboxState::Checked
115    } else {
116      CheckboxState::Unchecked
117    };
118
119    Some(yew::props!(CardSelectableActionsObjectProperties {
120      action: CardSelectableActionsVariant::MultiSelect {
121        checked,
122        onchange: on_selected.reform(move |checked: CheckboxState| {
123          match checked {
124            CheckboxState::Checked => true,
125            CheckboxState::Unchecked | CheckboxState::Indeterminate => false,
126          }
127        }),
128      }
129    }))
130  } else {
131    None
132  };
133
134  html!(
135    <Card full_height=true class={card_class.clone()} selectable={props.on_selected.is_some()}>
136      { thumbnail }
137      <div class={version_class.clone()}>
138        <Badge read=true>{ "v" }{ version }</Badge>
139      </div>
140      <CardHeader {selectable_actions}>
141        <div>
142          <div>{ provider_logo }</div>
143          <Truncate content={title} />
144        </div>
145      </CardHeader>
146      <CardBody>
147        <Stack gutter=true>
148          <StackItem fill=true>
149            <div class={description_class.clone()}>{ comment }</div>
150          </StackItem>
151          <StackItem>
152            <Split gutter=true>
153              <SplitItem fill=true>{ landing_page.clone() }</SplitItem>
154              <SplitItem>{ offer_button.clone() }</SplitItem>
155            </Split>
156          </StackItem>
157        </Stack>
158      </CardBody>
159      <CardFooter>
160        <slot class={keyword_class.clone()}>
161          <Split gutter=true>{ for keywords }</Split>
162        </slot>
163      </CardFooter>
164    </Card>
165  )
166}
edc_web_components/components/dataset_card.rs

edc_web_components/components/
dataset_card.rs
