edc-web-ui 0.3.0

A Rust Web interface with patternfly-yew client for EDC
use crate::app_route::AppRoute;
use crate::main_application::{ToggleTheme, switch_app_route};
use patternfly_yew::prelude::*;
use wasm_cookies::CookieOptions;
use yew::prelude::*;
use yew_icons::IconData;
use yew_nested_router::prelude::Switch as RouterSwitch;

#[derive(Properties, PartialEq, Clone)]
pub struct MainViewProps {
  pub onlogout: Callback<()>,
}

#[component]
pub fn MainView(props: &MainViewProps) -> Html {
  let brand = html!(
    <>
      <img src="./logo.png" style="height: 25px !important; margin-right: 10px" />
      <Title level={Level::H3} size={Size::XXLarge}>{ "EDC Web UI" }</Title>
    </>
  );

  let sidebar = html_nested!(
    <PageSidebar>
      <Nav>
        <NavList>
          <NavRouterItem<AppRoute> to={AppRoute::Catalog}>
            <Bullseye>
              <yew_icons::Icon data={IconData::LUCIDE_LIBRARY} />
              { "Catalog" }
            </Bullseye>
          </NavRouterItem<AppRoute>>
          <ListDivider />
          <NavRouterItem<AppRoute> to={AppRoute::Assets}>
            <Bullseye>
              <yew_icons::Icon data={IconData::LUCIDE_BOX} />
              { "Assets" }
            </Bullseye>
          </NavRouterItem<AppRoute>>
          <NavRouterItem<AppRoute> to={AppRoute::Policies}>
            <Bullseye>
              <yew_icons::Icon data={IconData::LUCIDE_SHIELD} />
              { "Policies" }
            </Bullseye>
          </NavRouterItem<AppRoute>>
          <NavRouterItem<AppRoute> to={AppRoute::ContractDefinitions}>
            <Bullseye>
              <yew_icons::Icon data={IconData::LUCIDE_FILE_SIGNATURE} />
              { "Contract Definitions" }
            </Bullseye>
          </NavRouterItem<AppRoute>>
          <ListDivider />
          <NavRouterItem<AppRoute> to={AppRoute::ContractNegotiations}>
            <Bullseye>
              <yew_icons::Icon data={IconData::LUCIDE_STICKY_NOTE} />
              { "Contract Negotiations" }
            </Bullseye>
          </NavRouterItem<AppRoute>>
          <NavRouterItem<AppRoute> to={AppRoute::ContractAgreements}>
            <Bullseye>
              <yew_icons::Icon data={IconData::LUCIDE_HEART_HANDSHAKE} />
              { "Contract Agreements" }
            </Bullseye>
          </NavRouterItem<AppRoute>>
          <NavRouterItem<AppRoute> to={AppRoute::TransferProcesses}>
            <Bullseye>
              <yew_icons::Icon data={IconData::LUCIDE_ARROW_LEFT_RIGHT} />
              { "Transfer Processes" }
            </Bullseye>
          </NavRouterItem<AppRoute>>
          <ListDivider />
          <NavRouterItem<AppRoute> to={AppRoute::VerifiableCredentials}>
            <Bullseye>
              <yew_icons::Icon data={IconData::LUCIDE_WALLET} />
              { "Verifiable Credentials" }
            </Bullseye>
          </NavRouterItem<AppRoute>>
          <NavRouterItem<AppRoute> to={AppRoute::FederatedCatalogManagement}>
            <Bullseye>
              <yew_icons::Icon data={IconData::LUCIDE_CLOUD_COG} />
              { "Federated Catalog Management" }
            </Bullseye>
          </NavRouterItem<AppRoute>>
          <NavRouterItem<AppRoute> to={AppRoute::CommonExpressionLanguage}>
            <Bullseye>
              <yew_icons::Icon data={IconData::LUCIDE_BOOK_OPEN} />
              { "CEL Library" }
            </Bullseye>
          </NavRouterItem<AppRoute>>
        </NavList>
      </Nav>
    </PageSidebar>
  );

  let onlogout = use_callback(props.onlogout.clone(), |_, onlogout| {
    wasm_cookies::set(
      "EDC_CONNECTOR_API_KEY",
      "",
      &CookieOptions::default()
        .with_path("/")
        .expires_at_timestamp(0),
    );
    onlogout.emit(());
  });

  let tools = html!(
    <Toolbar>
      <ToolbarContent>
        <ToolbarGroup
          modifiers={ToolbarElementModifier::End.all()}
          variant={GroupVariant::IconButton}
        >
          <ToolbarItem>
            <ToggleTheme />
          </ToolbarItem>
          <ToolbarItem>
            <Button variant={ButtonVariant::Primary} onclick={onlogout}>{ "Logout" }</Button>
          </ToolbarItem>
        </ToolbarGroup>
      </ToolbarContent>
    </Toolbar>
  );

  html!(
    <Page {brand} {sidebar} {tools} full_height=true>
      <PageSection>
        <RouterSwitch<AppRoute> render={switch_app_route} />
      </PageSection>
    </Page>
  )
}