Skip to main content

edc_web_components/components/
list_transfer_processes.rs

1use crate::models::TransferProcessItem;
2use patternfly_yew::prelude::*;
3use std::rc::Rc;
4use yew::prelude::*;
5
6#[derive(Clone, Debug, PartialEq, Properties)]
7pub struct ListTransferProcessesProps {
8  pub transfer_processe_items: Vec<TransferProcessItem>,
9  pub offset: usize,
10  pub limit: usize,
11  pub onoffset: Callback<usize>,
12  pub onlimit: Callback<usize>,
13  pub onshow: Callback<String>,
14}
15
16#[component]
17pub fn ListTransferProcesses(props: &ListTransferProcessesProps) -> Html {
18  let header = html_nested! {
19    <TableHeader<Columns>>
20      <TableColumn<Columns> label="State" index={Columns::State} />
21      <TableColumn<Columns> label="Asset ID" index={Columns::AssetId} />
22      <TableColumn<Columns> label="Contract ID" index={Columns::ContractId} />
23      <TableColumn<Columns> label="Transfer Type" index={Columns::TransferType} />
24      <TableColumn<Columns> label="Kind" index={Columns::Kind} />
25      <TableColumn<Columns> label="" index={Columns::Actions} />
26    </TableHeader<Columns>>
27  };
28
29  let total_entries: Option<usize> = None;
30
31  let nav_callback = use_callback(
32    (
33      props.offset,
34      props.limit,
35      total_entries,
36      props.onoffset.clone(),
37    ),
38    |page: Navigation, (offset, limit, total_entries, onoffset)| {
39      let offset = match page {
40        Navigation::First => 0,
41        Navigation::Last => (total_entries.unwrap_or_default().saturating_sub(1) / limit) * limit,
42        Navigation::Previous => *offset - limit,
43        Navigation::Next => *offset + limit,
44        Navigation::Page(n) => n * limit,
45      };
46      onoffset.emit(offset);
47    },
48  );
49
50  let rows = props
51    .transfer_processe_items
52    .iter()
53    .map(|transfer_process_item| {
54      ListTransferProcessRenderer(transfer_process_item.clone(), props.onshow.clone())
55    })
56    .collect();
57
58  let (entries, _) = use_table_data(MemoizedTableModel::new(Rc::new(rows)));
59
60  html!(
61    <>
62      <Toolbar>
63        <ToolbarContent>
64          <ToolbarItem r#type={ToolbarItemType::Pagination}>
65            <Pagination
66              offset={props.offset}
67              entries_per_page_choices={vec![5, 10, 25, 50, 100]}
68              selected_choice={props.limit}
69              onlimit={&props.onlimit}
70              onnavigation={&nav_callback}
71            />
72          </ToolbarItem>
73        </ToolbarContent>
74      </Toolbar>
75      <Table<Columns, UseTableData<Columns, MemoizedTableModel<ListTransferProcessRenderer>>>
76        mode={TableMode::Compact}
77        {header}
78        {entries}
79      />
80    </>
81  )
82}
83
84#[derive(Clone, Debug, Eq, PartialEq)]
85enum Columns {
86  State,
87  AssetId,
88  ContractId,
89  TransferType,
90  Kind,
91  Actions,
92}
93
94#[derive(Clone, Debug)]
95struct ListTransferProcessRenderer(TransferProcessItem, Callback<String>);
96
97impl TableEntryRenderer<Columns> for ListTransferProcessRenderer {
98  fn render_cell(&self, context: CellContext<'_, Columns>) -> Cell {
99    match context.column {
100      Columns::State => {
101        let color = match self.0.state.as_str() {
102          "Started" => Color::Purple,
103          "Completed" => Color::Green,
104          "Terminated" => Color::Red,
105          _ => Color::Blue,
106        };
107
108        html!(<Label {color} label={self.0.state.to_string()} />)
109      }
110      Columns::AssetId => html!(self.0.asset_id.to_string()),
111      Columns::ContractId => html! { self.0.contract_id.to_string() },
112      Columns::TransferType => html!(self.0.transfer_type.to_string()),
113      Columns::Kind => html!(self.0.kind.to_string()),
114      Columns::Actions => {
115        let id = self.0.id.clone();
116
117        html! {
118          <Button
119            variant={ButtonVariant::Primary}
120            icon={Icon::Eye}
121            onclick={self.1.reform(move |_| id.clone())}
122          >
123            { "Show" }
124          </Button>
125        }
126      }
127    }
128    .into()
129  }
130}