Skip to content

Commit

Permalink
Merge pull request #47 from virto-network/feat/paginator
Browse files Browse the repository at this point in the history 
Add paginator component - manually tested
  • Loading branch information
@ail3ngrimaldi
ail3ngrimaldi authored Oct 10, 2024
2 parents 8944002 + b7055be commit b067123
Show file tree
Hide file tree
Showing 8 changed files with 119 additions and 106 deletions.
17 changes: 10 additions & 7 deletions public/styles/main.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -819,6 +819,7 @@ $fw-bold: 700;
width: 60px;
padding: 0;
transition: background-color 0.2s ease-in;

&:hover {
background-color: var(--fill-600);
}
Expand Down Expand Up @@ -850,7 +851,6 @@ $fw-bold: 700;
display: inline-block;
}


.button--comming-soon {
opacity: .7;
filter: grayscale(1);
Expand Down Expand Up @@ -1382,11 +1382,15 @@ $fw-bold: 700;

.button--disabled,
.dropdown--disabled {
background: var(--background-disabled);
color: var(--text-disabled);
border: 0;
box-shadow: none;
cursor: not-allowed;
opacity: 0.3;
}

.dropdown--disabled {
background: var(--background-disabled);
color: var(--text-disabled);
}

.dropdown {
Expand Down Expand Up @@ -2626,20 +2630,19 @@ textarea::placeholder {
background: var(--fill-00);
}

.dashboard__footer__pagination {
.paginator {
display: flex;
gap: 16px;
align-items: center;
opacity: 0.3;
}

.dashboard__footer__paginators {
.paginator__jumpers {
display: flex;
gap: 8px;
align-items: center;
}

.dashboard__footer__paginator {
.paginator__range {
@extend %text-xs-font-regular;
color: var(--text-primary);
}
Expand Down
6 changes: 5 additions & 1 deletion src/components/atoms/icon_button.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,8 @@ pub struct IconButtonProps {
class: String,
#[props(default = Variant::Round)]
variant: Variant,
#[props(default = false)]
disabled: bool,
#[props(default = ElementSize::Big)]
size: ElementSize,
on_click: EventHandler<MouseEvent>,
Expand All @@ -29,8 +31,10 @@ pub fn IconButton(props: IconButtonProps) -> Element {
rsx!(
button {
class: "button button--tertiary padding-reset {props.class} {variant} {size} commin-soon",
class: if props.disabled { "button--disabled" },
onclick: move |event| props.on_click.call(event),
{ props.body }
disabled: props.disabled,
{props.body}
}
)
}
2 changes: 2 additions & 0 deletions src/components/molecules/mod.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,14 @@ pub mod actions;
pub mod header;
pub mod initiative;
pub mod onboarding;
pub mod paginator;
pub mod sidebar;
pub mod tabs;
pub use action_request_list::ActionRequestList;
pub use actions::*;
pub use header::Header;
pub use initiative::*;
pub use onboarding::*;
pub use paginator::Paginator;
pub use sidebar::Sidebar;
pub use tabs::Tabs;
67 changes: 67 additions & 0 deletions src/components/molecules/paginator.rs
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
use dioxus::prelude::*;
use dioxus_std::{i18n::use_i18, translate};

use crate::components::atoms::{dropdown::ElementSize, ArrowLeft, ArrowRight, Icon, IconButton};

#[derive(PartialEq, Clone)]
pub struct PaginatorValue {
value: usize,
}

impl PaginatorValue {
pub fn value(&self) -> usize {
self.value
}
}

#[derive(PartialEq, Props, Clone)]
pub struct PaginatorProps {
#[props(default = 1)]
to: usize,
on_change: EventHandler<PaginatorValue>,
}

pub fn Paginator(props: PaginatorProps) -> Element {
let i18 = use_i18();
let mut current_page = use_signal::<usize>(|| 1);

rsx!(
div { class: "paginator",
span { class: "paginator__range",
{translate!(i18, "dashboard.footer.paginator", from: current_page(), to: props.to)}
}
div { class: "paginator__jumpers",
IconButton {
class: "button--avatar button--paginator",
disabled: current_page() <= 1,
size: ElementSize::Small,
body: rsx!(Icon { icon : ArrowLeft, height : 24, width : 24, fill : "var(--white)" }),
on_click: move |_| {
let current = current_page();
current_page.set(current - 1);
props
.on_change
.call(PaginatorValue {
value: current_page(),
});
}
}
IconButton {
class: "button--avatar button--paginator",
size: ElementSize::Small,
disabled: current_page() >= props.to,
body: rsx!(Icon { icon : ArrowRight, height : 24, width : 24, fill : "var(--white)" }),
on_click: move |_| {
let current = current_page();
current_page.set(current + 1);
props
.on_change
.call(PaginatorValue {
value: current_page(),
});
}
}
}
}
)
}
2 changes: 1 addition & 1 deletion src/lib.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,8 +34,8 @@ pub mod hooks {
pub mod use_notification;
pub mod use_onboard;
pub mod use_our_navigator;
pub mod use_paginator;
pub mod use_session;
pub mod use_paginator;
pub mod use_spaces_client;
pub mod use_startup;
pub mod use_theme;
Expand Down
36 changes: 10 additions & 26 deletions src/pages/dashboard.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ use crate::{
ArrowRight, Avatar, Badge, CardSkeleton, Compass, DynamicText, Icon, IconButton, SearchInput, Star,
Tab, UserAdd, UserGroup,
},
molecules::tabs::TabItem,
molecules::{paginator::PaginatorValue, tabs::TabItem, Paginator},
},
hooks::{
use_accounts::use_accounts, use_communities::{use_communities, CommunitiesError},
Expand Down Expand Up @@ -305,31 +305,15 @@ pub fn Dashboard() -> Element {
}
}
div { class: "dashboard__footer grid-footer",
div { class: "dashboard__footer__pagination",
span { class: "dashboard__footer__paginator",
{translate!(i18, "dashboard.footer.paginator", from: current_page(), to: (((communities.get_communities().len() as f64 + 1f64) / SKIP as f64) as f64).ceil())}
}
div { class: "dashboard__footer__paginators",
IconButton {
class: "button--avatar",
size: ElementSize::Small,
body: rsx!(Icon { icon : ArrowLeft, height : 24, width : 24, fill : "var(--white)" }),
on_click: move |_| {
let current = current_page();
current_page.set(current - 1);
on_handle_paginator.send(current_page())
}
}
IconButton {
class: "button--avatar",
size: ElementSize::Small,
body: rsx!(Icon { icon : ArrowRight, height : 24, width : 24, fill : "var(--white)" }),
on_click: move |_| {
let current = current_page();
current_page.set(current + 1);
on_handle_paginator.send(current_page())
}
}
Paginator {
to: ((communities.get_communities_by_filters(
Some(()),
filter_name().as_deref(),
filter_paginator(),
).len() + SKIP - 1).saturating_div(SKIP)).max(1),
on_change: move |event: PaginatorValue| {
current_page.set(event.value());
on_handle_paginator.send(current_page())
}
}
}
Expand Down
32 changes: 6 additions & 26 deletions src/pages/explore.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ use crate::{
ArrowRight, Avatar, Badge, CardSkeleton, DynamicText, Icon, IconButton, SearchInput,
Star, Tab, UserAdd, UserGroup,
},
molecules::tabs::TabItem,
molecules::{paginator::PaginatorValue, tabs::TabItem, Paginator},
},
hooks::{

Expand Down Expand Up @@ -259,31 +259,11 @@ pub fn Explore() -> Element {
}
}
div { class: "dashboard__footer grid-footer",
div { class: "dashboard__footer__pagination",
span { class: "dashboard__footer__paginator",
{translate!(i18, "dashboard.footer.paginator", from: current_page(), to: (((communities.get_communities().len() as f64 + 1f64) / SKIP as f64) as f64).ceil())}
}
div { class: "dashboard__footer__paginators",
IconButton {
class: "button--avatar",
size: ElementSize::Small,
body: rsx!(Icon { icon : ArrowLeft, height : 24, width : 24, fill : "var(--white)" }),
on_click: move |_| {
let current = current_page();
current_page.set(current - 1);
on_handle_paginator.send(current_page())
}
}
IconButton {
class: "button--avatar",
size: ElementSize::Small,
body: rsx!(Icon { icon : ArrowRight, height : 24, width : 24, fill : "var(--white)" }),
on_click: move |_| {
let current = current_page();
current_page.set(current + 1);
on_handle_paginator.send(current_page())
}
}
Paginator {
to: (communities.get_communities().len() + SKIP - 1 ).saturating_div(SKIP).max(1),
on_change: move |event: PaginatorValue| {
current_page.set(event.value());
on_handle_paginator.send(current_page())
}
}
}
Expand Down
63 changes: 18 additions & 45 deletions src/pages/initiatives.rs
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,10 @@
use dioxus::prelude::*;
use dioxus_std::{i18n::use_i18, translate};
use futures_util::StreamExt;
use serde::{Deserialize, Serialize};
use crate::{
components::{
atoms::{
dropdown::ElementSize, AddPlus, ArrowLeft, ArrowRight, Badge, CircleCheck,
Icon, IconButton, SearchInput, StopSign, Tab, CardSkeleton,
},
molecules::tabs::TabItem,
molecules::{paginator::PaginatorValue, tabs::TabItem, Paginator},
},
hooks::{
use_communities::use_communities,
Expand All @@ -18,13 +14,15 @@ use crate::{
use_tooltip::{use_tooltip, TooltipItem},
},
services::kreivo::{
community_referenda::{
metadata_of, referendum_count, referendum_info_for, Ongoing,
},
community_referenda::{metadata_of, referendum_count, referendum_info_for, Ongoing},
preimage::{preimage_for, request_status_for},
},
};
static SKIP: u8 = 6;
use dioxus::prelude::*;
use dioxus_std::{i18n::use_i18, translate};
use futures_util::StreamExt;
use serde::{Deserialize, Serialize};
static SKIP: usize = 6;
#[derive(Clone, Debug, Deserialize, Serialize)]
pub struct InitiativeWrapper {
pub id: u16,
Expand All @@ -41,14 +39,12 @@ pub fn Initiatives(id: u16) -> Element {
let mut initiative_state = use_initiative();

let mut initiative_wrapper = consume_context::<Signal<Option<InitiativeWrapper>>>();
let mut current_page = use_signal::<u8>(|| 1);
let mut current_page = use_signal::<usize>(|| 1);
let mut search_word = use_signal::<String>(|| String::new());
let tab_items = vec![
TabItem {
k: String::from("all"),
value: translate!(i18, "dao.tabs.all"),
},
];
let tab_items = vec![TabItem {
k: String::from("all"),
value: translate!(i18, "dao.tabs.all"),
}];
let tab_value = use_signal::<String>(|| String::from("all"));
let initiatives_ids = use_signal::<Vec<u32>>(|| vec![]);
let mut initiatives = use_signal::<Vec<InitiativeWrapper>>(|| vec![]);
Expand All @@ -71,7 +67,7 @@ pub fn Initiatives(id: u16) -> Element {
initiative_state.set_loading(true);
initiatives.set(vec![]);
filtered_initiatives.set(vec![]);

tooltip.handle_tooltip(TooltipItem {
title: translate!(i18, "dao.tips.loading.title"),
body: translate!(i18, "dao.tips.loading.description"),
Expand Down Expand Up @@ -144,9 +140,7 @@ pub fn Initiatives(id: u16) -> Element {
}
});

use_effect(use_reactive(&id, move |_| {
handle_initiatives.send(id)
}));
use_effect(use_reactive(&id, move |_| handle_initiatives.send(id)));

use_drop(move || communities.remove_community());

Expand Down Expand Up @@ -298,31 +292,10 @@ pub fn Initiatives(id: u16) -> Element {
}
}
div { class: "dashboard__footer grid-footer",
div { class: "dashboard__footer__pagination",
span { class: "dashboard__footer__paginator",
{
translate!(i18, "dashboard.footer.paginator", from : current_page(), to :
(((initiatives_ids.len() as f64 + 1f64) / SKIP as f64) as f64).ceil()) }
}
div { class: "dashboard__footer__paginators",
IconButton {
class: "button--avatar",
size: ElementSize::Small,
body: rsx!(Icon { icon : ArrowLeft, height : 24, width : 24, fill : "var(--white)" }),
on_click: move |_| {
let current = current_page();
current_page.set(current - 1);
}
}
IconButton {
class: "button--avatar",
size: ElementSize::Small,
body: rsx!(Icon { icon : ArrowRight, height : 24, width : 24, fill : "var(--white)" }),
on_click: move |_| {
let current = current_page();
current_page.set(current + 1);
}
}
Paginator {
to: (initiatives_ids.len() + SKIP - 1).saturating_div(SKIP).max(1),
on_change: move |event: PaginatorValue| {
current_page.set(event.value());
}
}
}
Expand Down

0 comments on commit b067123

Please sign in to comment.