edc-web-components 0.4.0

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

use crate::models::DataspaceDataset;
use patternfly_yew::prelude::*;
use stylist::yew::styled_component;
use yew::prelude::*;

#[derive(Clone, PartialEq, Properties)]
pub struct DatasetCardProps {
  pub dataset: DataspaceDataset,
  #[prop_or_default]
  pub on_offer_click: Option<Callback<()>>,
}

#[styled_component]
pub fn DatasetCard(props: &DatasetCardProps) -> Html {
  let card_class = css!(
    width: 250px;
  );

  let thumbnails_class = css!(
    height: 180px;
    object-fit: cover;
  );

  let provider_logo_class = css!(
    width: 50px;
    height: 50px;
    object-fit: contain;
  );

  let version_class = css!(
    position: absolute;
    top: 5px;
    right: 5px;
  );

  let keyword_class = css!(
    .pf-v6-l-split {
      overflow: hidden;
    }
  );

  let description_class = css!(
    display: block;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
  );

  let offer_button_class = css!(
    text-align: right;
  );

  let offer_button = if let Some(offer) = props.on_offer_click.clone() {
    html!(
      <Button
        variant={ButtonVariant::Primary}
        icon={Icon::AngleRight}
        onclick={offer.reform(|_| ())}
      >
        { "Select" }
      </Button>
    )
  } else {
    html!()
  };

  let title = props.dataset.title.to_string();

  let version = props
    .dataset
    .version
    .clone()
    .map(|version| version.to_string())
    .unwrap_or_default();

  let comment = props.dataset.comment.clone().unwrap_or_default();

  let thumbnail = props
    .dataset
    .thumbnail
    .clone()
    .and_then(|thumbnail| thumbnail.resource)
    .map(|thumbnail| html! { <img src={thumbnail} class={thumbnails_class.clone()} /> });

  let provider_logo = props
    .dataset
    .creator
    .clone()
    .and_then(|creator| creator.thumbnail)
    .and_then(|thumbnail| thumbnail.resource)
    .map(|thumbnail| html! { <img src={thumbnail} class={provider_logo_class.clone()} /> });

  let keywords = props.dataset.keywords.iter().map(|keyword| {
    html_nested! {
      <SplitItem>
        <Label label={keyword.clone()} />
      </SplitItem>
    }
  });

  html!(
    <Card full_height=true class={card_class.clone()}>
      { thumbnail }
      <div class={version_class.clone()}>
        <Badge read=true>{ "v" }{ version }</Badge>
      </div>
      <CardTitle>
        <div>{ provider_logo }</div>
        <Truncate content={title} />
      </CardTitle>
      <CardBody>
        <Stack gutter=true>
          <StackItem fill=true>
            <div class={description_class.clone()}>{ comment }</div>
          </StackItem>
          <StackItem>
            <div class={offer_button_class.clone()}>{ offer_button.clone() }</div>
          </StackItem>
        </Stack>
      </CardBody>
      <CardFooter>
        <slot class={keyword_class.clone()}>
          <Split gutter=true>{ for keywords }</Split>
        </slot>
      </CardFooter>
    </Card>
  )
}