feat: with updated things

Signed-off-by: kjuulh <contact@kjuulh.io>
This commit is contained in:
Kasper Juul Hermansen 2023-07-07 21:23:52 +02:00
parent 36e2766bb9
commit 8ee2ca5c14
Signed by: kjuulh
GPG Key ID: 57B6E1465221F912
21 changed files with 386 additions and 24 deletions

1
Cargo.lock generated
View File

@ -401,6 +401,7 @@ dependencies = [
"lazy_static", "lazy_static",
"leptos", "leptos",
"leptos_axum", "leptos_axum",
"leptos_dom",
"leptos_meta", "leptos_meta",
"leptos_router", "leptos_router",
"log", "log",

View File

@ -20,6 +20,7 @@ console_log = "0.2"
cfg-if = "1" cfg-if = "1"
lazy_static = "1" lazy_static = "1"
leptos = { version = "*", default-features = false, features = ["serde"] } leptos = { version = "*", default-features = false, features = ["serde"] }
leptos_dom = { version = "*", default-features = false }
leptos_meta = { version = "*", default-features = false } leptos_meta = { version = "*", default-features = false }
leptos_axum = { version = "*", default-features = false, optional = true } leptos_axum = { version = "*", default-features = false, optional = true }
leptos_router = { version = "*", default-features = false } leptos_router = { version = "*", default-features = false }
@ -54,6 +55,7 @@ ssr = [
"leptos/ssr", "leptos/ssr",
"leptos_meta/ssr", "leptos_meta/ssr",
"leptos_router/ssr", "leptos_router/ssr",
"leptos_dom/ssr",
"dep:leptos_axum", "dep:leptos_axum",
"dep:tracing-subscriber", "dep:tracing-subscriber",
"dep:tracing", "dep:tracing",

View File

@ -12,3 +12,15 @@ html, body {
.feature-case { .feature-case {
@apply m-8 border-blue-700 border-2 rounded-lg p-4; @apply m-8 border-blue-700 border-2 rounded-lg p-4;
} }
.dashboard-list-item {
@apply flex flex-col justify-center hover:dark:bg-blue-900 cursor-pointer select-none px-4 py-2 border-y border-y-gray-800;
}
.dashboard-list-project {
@apply dark:bg-gray-800 hover:dark:bg-blue-900 text-gray-300;
}
.dashboard-item {
@apply pl-6
}

View File

@ -1,16 +1,16 @@
#!/bin/bash #!/bin/bash
tmux new-session -d -s dev tmux new-window -n dev
# allow for user input # allow for user input
tmux split-window -h tmux split-window -h
# leptos # leptos
tmux send-keys -t dev "cuddle_cli x leptos:dev" C-m tmux send-keys -t dev "cuddle x leptos:dev" C-m
tmux split-window -v tmux split-window -v
# tailwind # tailwind
tmux send-keys -t dev "cuddle_cli x tailwind:watch" C-m tmux send-keys -t dev "cuddle x tailwind:watch" C-m
# set user input to first # set user input to first
tmux select-pane -t 0 tmux select-pane -t 0

View File

@ -1,3 +1,3 @@
#!/bin/bash #!/bin/bash
tmux kill-session -t dev || true tmux kill-window -t dev || true

View File

@ -9,4 +9,14 @@ graphql-client generate \
--schema-path src/api/graphql/schema/schema.json \ --schema-path src/api/graphql/schema/schema.json \
src/features/navbar_projects/graphql/queries.graphql \ src/features/navbar_projects/graphql/queries.graphql \
--output-directory src/features/navbar_projects/gen \ --output-directory src/features/navbar_projects/gen \
--custom-scalars-module='crate::common::graphql' --custom-scalars-module='crate::common::graphql' \
--variables-derives='Clone,Debug' \
--response-derives='Clone,Debug'
graphql-client generate \
--schema-path src/api/graphql/schema/schema.json \
src/features/dashboard_list_view/graphql/queries.graphql \
--output-directory src/features/dashboard_list_view/gen \
--custom-scalars-module='crate::common::graphql' \
--variables-derives='Clone,Debug' \
--response-derives='Clone,Debug'

View File

@ -767,7 +767,7 @@
"name": null, "name": null,
"ofType": { "ofType": {
"kind": "OBJECT", "kind": "OBJECT",
"name": "ProjectDto", "name": "Project",
"ofType": null "ofType": null
} }
} }
@ -789,7 +789,7 @@
"name": null, "name": null,
"ofType": { "ofType": {
"kind": "OBJECT", "kind": "OBJECT",
"name": "ProjectDto", "name": "Project",
"ofType": null "ofType": null
} }
} }

View File

@ -1,12 +1,13 @@
use leptos::*; use leptos::*;
use leptos_router::*; use leptos_router::*;
use crate::features::command_line::CommandLine;
use crate::features::navbar_projects::NavbarProjects; use crate::features::navbar_projects::NavbarProjects;
#[component] #[component]
pub fn DashNav(cx: Scope) -> impl IntoView { pub fn DashNav(cx: Scope) -> impl IntoView {
view! { cx, view! { cx,
<nav class="absolute min-w-[200px] p-4 space-y-4 h-screen sticky top-0 select-none"> <nav class="min-w-[200px] p-4 space-y-4 h-screen sticky top-0 select-none bg-gray-800">
<div> <div>
<a href="/dash/home" class="text-xl"> <a href="/dash/home" class="text-xl">
"como" "como"
@ -38,8 +39,10 @@ pub fn DashboardLayout(cx: Scope) -> impl IntoView {
view! { cx, view! { cx,
<div class="flex flex-row"> <div class="flex flex-row">
<DashNav/> <DashNav/>
<div id="content" class="p-2"> <div id="content" class="px-0.5 flex-grow">
<Outlet/> <CommandLine>
<Outlet/>
</CommandLine>
</div> </div>
</div> </div>
} }

View File

@ -1 +1,3 @@
pub mod command_line;
pub mod dashboard_list_view;
pub mod navbar_projects; pub mod navbar_projects;

View File

@ -0,0 +1,56 @@
use leptos::*;
#[derive(Clone, Debug)]
pub struct CommandLineState {
hidden: bool,
}
#[component]
pub fn CommandLineModalView(cx: Scope) -> impl IntoView {
view! { cx, <div>"modal"</div> }
}
#[component]
pub fn CommandLineModal(cx: Scope) -> impl IntoView {
let state =
use_context::<RwSignal<CommandLineState>>(cx).expect("command line state must be provided");
let (hidden, _) = create_slice(cx, state, |state| state.hidden, |state, n| state.hidden = n);
view! { cx,
{move || {
if !hidden.get() {
view! { cx, <CommandLineModalView/> }
} else {
view! { cx, }
}
}}
}
}
#[component]
pub fn CommandLine(cx: Scope, children: Children) -> impl IntoView {
let state = create_rw_signal(cx, CommandLineState { hidden: true });
provide_context(cx, state);
let (hidden, set_hidden) =
create_slice(cx, state, |state| state.hidden, |state, n| state.hidden = n);
leptos_dom::helpers::window_event_listener(ev::keypress, move |event| {
if event.ctrl_key() {
match event.code().as_str() {
"KeyK" => {
set_hidden(!hidden.get());
log!("toggle command")
}
_ => {}
}
}
});
view! { cx,
<div>
<div>{children(cx)}</div>
<CommandLineModal/>
</div>
}
}

View File

@ -0,0 +1,4 @@
pub mod dashboard_list_view;
pub mod gen;
pub use dashboard_list_view::*;

View File

@ -0,0 +1,93 @@
use graphql_client::{GraphQLQuery, Response};
use leptos::*;
use crate::features::dashboard_list_view::gen::queries::get_projects_list_view::GetProjectsListViewGetProjectsItems;
use super::gen::queries::get_projects_list_view::{
GetProjectsListViewGetProjects, ResponseData, Variables,
};
use super::gen::queries::GetProjectsListView;
pub async fn get_projects_list() -> anyhow::Result<Vec<GetProjectsListViewGetProjects>> {
let request_body = GetProjectsListView::build_query(Variables {});
let payload = serde_json::to_string(&request_body)?;
let res = reqwasm::http::Request::post("http://localhost:3001/graphql")
.credentials(reqwasm::http::RequestCredentials::Include)
.body(payload)
.send()
.await?;
let response_body: Response<ResponseData> = res.json().await?;
Ok(response_body
.data
.ok_or(anyhow::anyhow!("failed to get projects list"))?
.get_projects)
}
#[component]
pub fn DashboardItemView(cx: Scope, item: GetProjectsListViewGetProjectsItems) -> impl IntoView {
view! { cx, <div class="dashboard-list-item dashboard-item">{item.title}</div> }
}
#[component]
pub fn DashboardProjectItemView(
cx: Scope,
project: GetProjectsListViewGetProjects,
) -> impl IntoView {
view! { cx,
<div class="dashboard-list-item dashboard-list-project">
<a href=format!("/dash/project/{}", & project.id) class="project-item flex flex-row">
<div class="space-x-2">
<span>{&project.name}</span>
<span class="text-gray-50">{project.items.len()}</span>
<span class="flex-grow"></span>
</div>
</a>
</div>
}
}
#[component]
pub fn DashboardListView(
cx: Scope,
projects: Resource<(), Vec<GetProjectsListViewGetProjects>>,
) -> impl IntoView {
let projects_view = move || {
projects.with(cx, |projects| {
if projects.is_empty() {
return vec![view! { cx, <div class="project-item">"No projects"</div> }.into_any()];
}
projects
.into_iter()
.filter(|project| !project.items.is_empty())
.map(|project| {
view! { cx,
<div>
<DashboardProjectItemView project=project.clone()/>
{&project
.items
.clone()
.into_iter()
.map(|item| {
view! { cx, <DashboardItemView item=item/> }
})
.collect::<Vec<_>>()
.into_view(cx)}
</div>
}
.into_any()
})
.collect::<Vec<_>>()
})
};
view! { cx, <div class="project-items">{projects_view}</div> }
}
#[component]
pub fn DashboardList(cx: Scope) -> impl IntoView {
let projects =
create_local_resource(cx, || (), |_| async { get_projects_list().await.unwrap() });
view! { cx, <DashboardListView projects=projects/> }
}

View File

@ -0,0 +1 @@
pub mod queries;

View File

@ -0,0 +1,81 @@
#![allow(clippy::all, warnings)]
pub struct GetProjectsListView;
pub mod get_projects_list_view {
#![allow(dead_code)]
use std::result::Result;
pub const OPERATION_NAME: &str = "GetProjectsListView";
pub const QUERY : & str = "query GetProjectsListView {\n getProjects {\n id\n name\n\n items {\n id\n title\n description\n state\n }\n }\n}\n" ;
use super::*;
use serde::{Deserialize, Serialize};
#[allow(dead_code)]
type Boolean = bool;
#[allow(dead_code)]
type Float = f64;
#[allow(dead_code)]
type Int = i64;
#[allow(dead_code)]
type ID = String;
type UUID = crate::common::graphql::UUID;
#[derive(Clone, Debug)]
pub enum ItemState {
CREATED,
DONE,
ARCHIVED,
DELETED,
Other(String),
}
impl ::serde::Serialize for ItemState {
fn serialize<S: serde::Serializer>(&self, ser: S) -> Result<S::Ok, S::Error> {
ser.serialize_str(match *self {
ItemState::CREATED => "CREATED",
ItemState::DONE => "DONE",
ItemState::ARCHIVED => "ARCHIVED",
ItemState::DELETED => "DELETED",
ItemState::Other(ref s) => &s,
})
}
}
impl<'de> ::serde::Deserialize<'de> for ItemState {
fn deserialize<D: ::serde::Deserializer<'de>>(deserializer: D) -> Result<Self, D::Error> {
let s: String = ::serde::Deserialize::deserialize(deserializer)?;
match s.as_str() {
"CREATED" => Ok(ItemState::CREATED),
"DONE" => Ok(ItemState::DONE),
"ARCHIVED" => Ok(ItemState::ARCHIVED),
"DELETED" => Ok(ItemState::DELETED),
_ => Ok(ItemState::Other(s)),
}
}
}
#[derive(Serialize, Clone, Debug)]
pub struct Variables;
#[derive(Deserialize, Clone, Debug)]
pub struct ResponseData {
#[serde(rename = "getProjects")]
pub get_projects: Vec<GetProjectsListViewGetProjects>,
}
#[derive(Deserialize, Clone, Debug)]
pub struct GetProjectsListViewGetProjects {
pub id: UUID,
pub name: String,
pub items: Vec<GetProjectsListViewGetProjectsItems>,
}
#[derive(Deserialize, Clone, Debug)]
pub struct GetProjectsListViewGetProjectsItems {
pub id: UUID,
pub title: String,
pub description: Option<String>,
pub state: ItemState,
}
}
impl graphql_client::GraphQLQuery for GetProjectsListView {
type Variables = get_projects_list_view::Variables;
type ResponseData = get_projects_list_view::ResponseData;
fn build_query(variables: Self::Variables) -> ::graphql_client::QueryBody<Self::Variables> {
graphql_client::QueryBody {
variables,
query: get_projects_list_view::QUERY,
operation_name: get_projects_list_view::OPERATION_NAME,
}
}
}

View File

@ -0,0 +1,13 @@
query GetProjectsListView {
getProjects {
id
name
items {
id
title
description
state
}
}
}

View File

@ -17,14 +17,14 @@ pub mod get_projects_list_view {
#[allow(dead_code)] #[allow(dead_code)]
type ID = String; type ID = String;
type UUID = crate::common::graphql::UUID; type UUID = crate::common::graphql::UUID;
#[derive(Serialize)] #[derive(Serialize, Clone, Debug)]
pub struct Variables; pub struct Variables;
#[derive(Deserialize)] #[derive(Deserialize, Clone, Debug)]
pub struct ResponseData { pub struct ResponseData {
#[serde(rename = "getProjects")] #[serde(rename = "getProjects")]
pub get_projects: Vec<GetProjectsListViewGetProjects>, pub get_projects: Vec<GetProjectsListViewGetProjects>,
} }
#[derive(Deserialize)] #[derive(Deserialize, Clone, Debug)]
pub struct GetProjectsListViewGetProjects { pub struct GetProjectsListViewGetProjects {
pub id: UUID, pub id: UUID,
pub name: String, pub name: String,

View File

@ -1,6 +1,5 @@
use graphql_client::{GraphQLQuery, Response}; use graphql_client::{GraphQLQuery, Response};
use leptos::*; use leptos::*;
use leptos_router::*;
use crate::features::navbar_projects::gen::queries::get_projects_list_view::{ use crate::features::navbar_projects::gen::queries::get_projects_list_view::{
ResponseData, Variables, ResponseData, Variables,
@ -18,7 +17,10 @@ pub async fn get_projects_list() -> anyhow::Result<Vec<GetProjectsListViewGetPro
.send() .send()
.await?; .await?;
let response_body: Response<ResponseData> = res.json().await?; let response_body: Response<ResponseData> = res.json().await?;
Ok(response_body.data.unwrap().get_projects) Ok(response_body
.data
.ok_or(anyhow::anyhow!("failed to get projects list"))?
.get_projects)
} }
#[component] #[component]
@ -38,7 +40,10 @@ pub fn NavbarProjectsView(
.map(|project| { .map(|project| {
view! { cx, view! { cx,
<a href=format!("/dash/project/{}", & project.id) class="project-item"> <a href=format!("/dash/project/{}", & project.id) class="project-item">
<div class="project-item-name hover:dark:bg-blue-700 rounded-md p-0.5 px-2">
<div class="project-item-name hover:dark:bg-blue-700 rounded-md p-0.5 px-2">
{&project.name} {&project.name}
</div> </div>
</a> </a>

View File

@ -1,4 +1,3 @@
pub mod dash; pub mod dash;
pub mod features_view; pub mod features_view;
pub mod home; pub mod home;

View File

@ -1,12 +1,12 @@
use leptos::*; use leptos::*;
use crate::features::navbar_projects::NavbarProjects; use crate::features::dashboard_list_view::DashboardList;
#[component] #[component]
pub fn DashHomePage(cx: Scope) -> impl IntoView { pub fn DashHomePage(cx: Scope) -> impl IntoView {
view! { cx, view! { cx,
<div class="home-dash"> <div class="home-dash">
<NavbarProjects/> <DashboardList/>
</div> </div>
} }
} }

View File

@ -28,7 +28,7 @@ pub fn FeaturesView(cx: Scope) -> impl IntoView {
view! { cx, view! { cx,
<div> <div>
<div class="space-y-5"> <div class="space-y-5 p-2">
<h1>"NavbarProjects"</h1> <h1>"NavbarProjects"</h1>
<h2>"Projects"</h2> <h2>"Projects"</h2>
<div class="feature-case"> <div class="feature-case">

View File

@ -522,10 +522,6 @@ video {
--tw-backdrop-sepia: ; --tw-backdrop-sepia: ;
} }
.absolute {
position: absolute;
}
.relative { .relative {
position: relative; position: relative;
} }
@ -550,6 +546,14 @@ video {
display: flex; display: flex;
} }
.\!hidden {
display: none !important;
}
.hidden {
display: none;
}
.h-screen { .h-screen {
height: 100vh; height: 100vh;
} }
@ -558,6 +562,10 @@ video {
min-width: 200px; min-width: 200px;
} }
.flex-grow {
flex-grow: 1;
}
.cursor-pointer { .cursor-pointer {
cursor: pointer; cursor: pointer;
} }
@ -580,6 +588,12 @@ video {
justify-content: space-between; justify-content: space-between;
} }
.space-x-2 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-right: calc(0.5rem * var(--tw-space-x-reverse));
margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-4 > :not([hidden]) ~ :not([hidden]) { .space-x-4 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0; --tw-space-x-reverse: 0;
margin-right: calc(1rem * var(--tw-space-x-reverse)); margin-right: calc(1rem * var(--tw-space-x-reverse));
@ -629,6 +643,16 @@ video {
padding: 1rem; padding: 1rem;
} }
.px-0 {
padding-left: 0px;
padding-right: 0px;
}
.px-0\.5 {
padding-left: 0.125rem;
padding-right: 0.125rem;
}
.px-2 { .px-2 {
padding-left: 0.5rem; padding-left: 0.5rem;
padding-right: 0.5rem; padding-right: 0.5rem;
@ -657,6 +681,11 @@ video {
font-weight: 700; font-weight: 700;
} }
.text-gray-50 {
--tw-text-opacity: 1;
color: rgb(249 250 251 / var(--tw-text-opacity));
}
.text-red-50 { .text-red-50 {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgb(254 242 242 / var(--tw-text-opacity)); color: rgb(254 242 242 / var(--tw-text-opacity));
@ -667,6 +696,10 @@ video {
color: rgb(255 255 255 / var(--tw-text-opacity)); color: rgb(255 255 255 / var(--tw-text-opacity));
} }
.filter {
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
html, body { html, body {
scroll-behavior: smooth; scroll-behavior: smooth;
min-height: 100%; min-height: 100%;
@ -694,6 +727,53 @@ html, body {
padding: 1rem; padding: 1rem;
} }
.dashboard-list-item {
display: flex;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
flex-direction: column;
justify-content: center;
border-top-width: 1px;
border-bottom-width: 1px;
--tw-border-opacity: 1;
border-top-color: rgb(31 41 55 / var(--tw-border-opacity));
border-bottom-color: rgb(31 41 55 / var(--tw-border-opacity));
padding-left: 1rem;
padding-right: 1rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
@media (prefers-color-scheme: dark) {
.dashboard-list-item:hover {
--tw-bg-opacity: 1;
background-color: rgb(30 58 138 / var(--tw-bg-opacity));
}
}
.dashboard-list-project {
--tw-text-opacity: 1;
color: rgb(209 213 219 / var(--tw-text-opacity));
}
@media (prefers-color-scheme: dark) {
.dashboard-list-project {
--tw-bg-opacity: 1;
background-color: rgb(31 41 55 / var(--tw-bg-opacity));
}
.dashboard-list-project:hover {
--tw-bg-opacity: 1;
background-color: rgb(30 58 138 / var(--tw-bg-opacity));
}
}
.dashboard-item {
padding-left: 1.5rem;
}
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
.dark\:text-gray-300 { .dark\:text-gray-300 {
--tw-text-opacity: 1; --tw-text-opacity: 1;