tablo-core 0.4.0

The core toolkit types for Tablo, a server-rendered admin toolkit on Topcoat and Toasty.
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

//! The placeholder the list page shows while its rows load.

use tablo_ui::{table, table_body, table_cell, table_row};
use topcoat::{Result, context::Cx, view::*};

use super::{super::WiredTable, Frame, core::table_frame};
use crate::table::state::TableState;

impl<M> WiredTable<M> {
    /// Render the skeleton placeholder table shown while rows load.
    pub(crate) async fn render_skeleton<'a>(
        &self,
        cx: &'a Cx,
        state: &TableState,
    ) -> Result<BoxView<'a>>
    where
        M: toasty::schema::Model,
    {
        self.frame().render_skeleton(cx, state).await
    }
}

impl Frame<'_> {
    async fn render_skeleton<'a>(&self, cx: &'a Cx, state: &TableState) -> Result<BoxView<'a>> {
        let with_actions = self.with_actions();
        let with_bulk = self.bulk_enabled();
        let head = self
            .render_thead(cx, state, "", with_actions, with_bulk, None)
            .await?;
        let table_min_width = self.column_widths().table_min_width;
        let column_count = self.columns.len();
        let search_pulse = self.search;
        let filter_pulse = self.filter_bar;
        let content = view! {
            cx =>
            if search_pulse || with_bulk {
                <div
                    class="flex items-center gap-2 border-b border-border p-3"
                    aria-hidden="true"
                >
                    if search_pulse {
                        <div class="animate-pulse rounded-md bg-foreground/10 h-9 w-72"></div>
                    }
                    if with_bulk {
                        <div
                            class="ml-auto animate-pulse rounded-md bg-foreground/10 h-9 w-36"
                        ></div>
                    }
                </div>
            }
            if filter_pulse {
                <div class="border-b border-border p-3" aria-hidden="true">
                    <div class="animate-pulse rounded-md bg-foreground/10 h-9 w-96"></div>
                </div>
            }
            table(
                attrs: attributes! { class="table-fixed" style=(table_min_width.as_deref()) },
                (head)
                table_body(
                    #[key(i)]
                    for i in 0..3 {
                        table_row(
                            if with_bulk {
                                table_cell(
                                    <div
                                        class="animate-pulse rounded-md bg-foreground/10 h-4 w-4"
                                    ></div>
                                )
                            }
                            for _ in 0..column_count {
                                table_cell(
                                    <div
                                        class="animate-pulse rounded-md bg-foreground/10 h-4 w-full"
                                    ></div>
                                )
                            }
                            if with_actions {
                                table_cell(
                                    <div
                                        class="animate-pulse rounded-md bg-foreground/10 h-4 w-12"
                                    ></div>
                                )
                            }
                        )
                    }
                )
            )
            <div class="border-t border-border p-3" aria-hidden="true">
                <div class="animate-pulse rounded-md bg-foreground/10 h-9 w-40"></div>
            </div>
        };
        Ok(table_frame(cx, true, content.boxed()))
    }
}
#[cfg(test)]
mod tests;