feat: add bucket paginator

msyfls123 · Apr 24, 2024 · e4cda2b · e4cda2b
1 parent 58fd28f
commit e4cda2b
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 10 deletions.
diff --git a/client/Cargo.toml b/client/Cargo.toml
@@ -38,6 +38,7 @@ features = [
   'HtmlElement',
   'HtmlFormElement',
   'HtmlInputElement',
+  'HtmlSelectElement',
   'HtmlCollection',
   'Element',
 ]

diff --git a/client/src/component/bucket.rs b/client/src/component/bucket.rs
@@ -1,15 +1,17 @@
 use js_sys::{JsString, Number, Promise};
 use serde_json::{Value};
-use wasm_bindgen::JsValue;
+use wasm_bindgen::{JsValue, JsCast};
 use wasm_bindgen_futures::{spawn_local, JsFuture};
-use yew::{prelude::function_component, Html, html, use_context, use_state, use_effect_with, Properties};
-use web_sys::{console};
+use yew::{html, prelude::function_component, use_context, use_effect_with, use_memo, use_state, Html, Properties};
+use web_sys::{console, Event, HtmlSelectElement};
 use serde_wasm_bindgen::from_value;
 use serde::{Deserialize};
 use chrono::{Utc, DateTime};
 
 use crate::constants::app::AppContext;
 
+const CHUNK_SIZE: usize = 10;
+
 #[derive(Deserialize, PartialEq, Clone)]
 pub struct File {
     Key: Value,
@@ -29,17 +31,28 @@ pub struct BucketProps {
 
 #[function_component(Bucket)]
 pub fn bucket(props: &BucketProps) -> Html {
+    // context
     let list_fetch_in_content = use_context::<AppContext>()
         .expect("no ctx list_fetch_in_content found").list_bucket;
+    // state
     let list = use_state(|| None);
     let fetched = use_state(|| 0);
     let is_loading = use_state(|| false);
 
+    // computed
+    let page_count = list.as_ref().map(|list: &Vec<File>| {
+        let len = list.len();
+        len / CHUNK_SIZE + if len % CHUNK_SIZE == 0 { 0 } else { 1 }
+    }).unwrap_or(0);
+    let current_page = use_state(|| 0);
+
+    // effects
     {
         let list_fetch_in_content = list_fetch_in_content.clone();
         let list_clone = list.clone();
         let fetched_clone = fetched.clone();
         let is_loading_clone = is_loading.clone();
+        let current_clone = current_page.clone();
         let update_list = move |&flag: &usize| {
             let fetched_clone = fetched.clone();
 
@@ -58,6 +71,7 @@ pub fn bucket(props: &BucketProps) -> Html {
                 let mut contents = info.Contents;
                 contents.sort_by_key(|file| file.LastModified.as_str().unwrap().parse::<DateTime<Utc>>().unwrap());
                 contents.reverse();
+                current_clone.set(0);
                 list_clone.set(Some(contents));
 
                 fetched_clone.set(1);
@@ -78,15 +92,21 @@ pub fn bucket(props: &BucketProps) -> Html {
     }
 
     let list = list.as_ref();
+    let current = current_page.clone();
     html! {
         <div>
-            <h2>{"Bucket"}</h2>
+            <h2>
+                {"Bucket"}
+                { if let Some(l) = list.as_ref() {
+                    html! { <span class="item-count">{" ("} {l.len()} {")"}</span> }
+                } else { html! {} }}
+            </h2>
             <div>
             {
                 if *is_loading {
                     html! { "loading" }
                 } else if list.is_some() {
-                    html! {
+                    html! {<>
                         <table class="bucket">
                             <thead>
                                 <tr>
@@ -96,11 +116,31 @@ pub fn bucket(props: &BucketProps) -> Html {
                                 </tr>
                             </thead>
                             <tbody>
-                                {for list.unwrap().iter().map(|file| file_item(file))}
+                                {for list.unwrap()
+                                    [*current_page * CHUNK_SIZE..((*current_page + 1) * CHUNK_SIZE).min(list.unwrap().len())]
+                                    .iter().map(|file| file_item(file))}
                             </tbody>
                         </table>
-
-                    }
+                        <select
+                            class="bucket-paginator"
+                            onchange={move |e: Event| {
+                                let target = e.target().unwrap();
+                                let input_el: HtmlSelectElement = target.dyn_into().unwrap();
+                                current.set(input_el.value().parse::<usize>().unwrap());
+                            }}
+                        >
+                           {for (0..page_count).map(|i| {
+                                html! {
+                                    <option
+                                        selected={*current_page == i}
+                                        value={i.to_string()}
+                                    >
+                                        {i + 1}
+                                    </option>
+                                }
+                            })}
+                        </select>
+                    </>}
                 }  else {
                     html! { "no data" }
                 }

diff --git a/client/src/container/home.rs b/client/src/container/home.rs
@@ -76,7 +76,6 @@ impl Component for HomeInner {
                 </form>
                 <Graph/>
               </div>
-              <Bucket refresh_index={self.refresh_index as usize}/>
               <h2>{"Upload"}</h2>
               { list.into_iter().map(|i| html! {
                 <div key={i.clone()}>
@@ -85,7 +84,8 @@ impl Component for HomeInner {
                         on_upload_end={upload_end.clone()}
                     />
                 </div>
-            }).collect::<Html>()}
+              }).collect::<Html>()}
+              <Bucket refresh_index={self.refresh_index as usize}/>
             </div>
         }
     }

diff --git a/client/src/css/index.styl b/client/src/css/index.styl
@@ -1,6 +1,12 @@
 :root
   --success: #30C157
   --blue: #0067e5
+  --grey-1-b: rgba(249, 249, 250, 1)
+  --grey-2: rgba(20, 30, 41, 0.04)
+  --grey-5_5: rgba(20, 30, 41, 0.76)
+  --grey-25-b: rgba(235,235,236,1)
+  --grey-6: rgba(20,30,41,0.92)
+
 nav
   a
     margin: 20px
@@ -21,6 +27,8 @@ body
 
 .bucket
   border-collapse: collapse
+  th
+    padding-bottom: 8px
   td
     border: 1px solid #ddd
     padding: 5px
@@ -35,6 +43,20 @@ body
   .time
   .size
     font-variant: all-small-caps
+.item-count
+  font-variant: diagonal-fractions
+.bucket-paginator
+  margin: 20px 0
+  height: 32px
+  font-size: medium
+  min-width: 50px
+  text-align: center
+  color: var(--grey-6, rgba(20,30,41,0.92))
+  // background: var(--grey-25-b, rgba(235,235,236,1))
+  border-radius: 6px
+  border: none
+  box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.24)
+  cursor: pointer
 
 .upload-item
   margin: 10px 0