Add project settings

jirs-client/js/css/project.css

@@ -1,5 +1,4 @@
 #projectPage {
-    padding: 25px 32px 50px calc(var(--appNavBarLeftWidth) + var(--secondarySideBarWidth) + 40px);
 }
 
 #projectPage > .breadcrumbsContainer {

jirs-client/js/css/styledPage.css

@@ -0,0 +1,3 @@
+.innerPage {
+    padding: 25px 32px 50px calc(var(--appNavBarLeftWidth) + var(--secondarySideBarWidth) + 40px);
+}

jirs-client/js/styles.css

@@ -17,6 +17,7 @@
 @import "./css/styledForm.css";
 @import "./css/styledEditor.css";
 @import "./css/styledComment.css";
+@import "./css/styledPage.css";
 @import "./css/app.css";
 @import "./css/issue.css";
 @import "./css/project.css";

jirs-client/src/lib.rs

@@ -49,6 +49,14 @@ pub enum AddIssueModalFieldId {
     Priority,
 }
 
+#[derive(Clone, Debug, PartialOrd, PartialEq, Hash)]
+pub enum ProjectSettingsFieldId {
+    Name,
+    Url,
+    Description,
+    Category,
+}
+
 #[derive(Clone, Debug, PartialOrd, PartialEq, Hash)]
 pub enum FieldId {
     // issue
@@ -57,6 +65,8 @@ pub enum FieldId {
     // project boards
     TextFilterBoard,
     CopyButtonLabel,
+
+    ProjectSettings(ProjectSettingsFieldId),
 }
 
 impl std::fmt::Display for FieldId {
@@ -85,6 +95,12 @@ impl std::fmt::Display for FieldId {
             },
             FieldId::TextFilterBoard => f.write_str("textFilterBoard"),
             FieldId::CopyButtonLabel => f.write_str("copyButtonLabel"),
+            FieldId::ProjectSettings(sub) => match sub {
+                ProjectSettingsFieldId::Name => f.write_str("projectSettings-name"),
+                ProjectSettingsFieldId::Url => f.write_str("projectSettings-url"),
+                ProjectSettingsFieldId::Description => f.write_str("projectSettings-description"),
+                ProjectSettingsFieldId::Category => f.write_str("projectSettings-category"),
+            },
         }
     }
 }

jirs-client/src/project_settings.rs

@@ -1,12 +1,61 @@
 use seed::{prelude::*, *};
 
-use crate::shared::inner_layout;
-use crate::{model, Msg};
+use crate::shared::styled_editor::StyledEditor;
+use crate::shared::styled_field::StyledField;
+use crate::shared::styled_form::StyledForm;
+use crate::shared::styled_input::StyledInput;
+use crate::shared::styled_select::StyledSelect;
+use crate::shared::{inner_layout, ToNode};
+use crate::{model, FieldId, Msg, ProjectSettingsFieldId};
 
 pub fn update(_msg: Msg, _model: &mut model::Model, _orders: &mut impl Orders<Msg>) {}
 
 pub fn view(model: &model::Model) -> Node<Msg> {
-    let project_section = vec![];
+    let name = StyledInput::build(FieldId::ProjectSettings(ProjectSettingsFieldId::Name))
+        .valid(true)
+        .build()
+        .into_node();
+    let name_field = StyledField::build()
+        .label("Name")
+        .input(name)
+        .tip("")
+        .build()
+        .into_node();
+
+    let url = StyledInput::build(FieldId::ProjectSettings(ProjectSettingsFieldId::Url))
+        .valid(true)
+        .build()
+        .into_node();
+    let url_field = StyledField::build()
+        .label("Url")
+        .input(url)
+        .tip("")
+        .build()
+        .into_node();
+
+    let description = StyledEditor::build(FieldId::ProjectSettings(
+        ProjectSettingsFieldId::Description,
+    ))
+    .text("")
+    .update_on(Ev::Change)
+    .build()
+    .into_node();
+    let description_field = StyledField::build()
+        .input(description)
+        .label("Description")
+        .tip("Describe the project in as much detail as you'd like.")
+        .build()
+        .into_node();
+
+    let form = StyledForm::build()
+        .heading("Project Details")
+        .add_field(name_field)
+        .add_field(url_field)
+        .add_field(description_field)
+        .build()
+        .into_node();
+
+    let project_section = vec![form];
 
     inner_layout(model, "projectSettings", project_section, empty![])
 }

jirs-client/src/shared/mod.rs

@@ -42,7 +42,7 @@ pub fn inner_layout(
 ) -> Node<Msg> {
     article![
         modal_node,
-        attrs![At::Class => "inner-layout"],
+        class!["inner-layout", "innerPage"],
         id![page_name],
         navbar_left::render(model),
         aside::render(model),