From 98b5b97a4e4afc293a97723f5834dd304233a482 Mon Sep 17 00:00:00 2001 From: riggraz Date: Mon, 26 Aug 2019 14:29:56 +0200 Subject: [PATCH] Add first version of roadmap --- app/controllers/static_pages_controller.rb | 18 +++++++- app/javascript/components/Hello.tsx | 19 -------- .../components/Roadmap/PostList.tsx | 28 +++++++++++ .../Roadmap/PostListByPostStatus.tsx | 32 +++++++++++++ .../components/Roadmap/PostListItem.tsx | 19 ++++++++ app/javascript/components/Roadmap/Roadmap.tsx | 37 +++++++++++++++ app/javascript/interfaces/IBoard.ts | 7 +++ app/javascript/interfaces/IPost.ts | 11 +++++ app/javascript/interfaces/IPostStatus.ts | 7 +++ .../components/Roadmap/PostList.scss | 4 ++ .../Roadmap/PostListByPostStatus.scss | 46 +++++++++++++++++++ .../components/Roadmap/PostListItem.scss | 26 +++++++++++ .../components/Roadmap/Roadmap.scss | 7 +++ app/views/boards/show.html.erb | 6 +-- app/views/static_pages/home.html.erb | 3 -- app/views/static_pages/roadmap.html.erb | 12 +++++ config/routes.rb | 2 +- 17 files changed, 255 insertions(+), 29 deletions(-) delete mode 100644 app/javascript/components/Hello.tsx create mode 100644 app/javascript/components/Roadmap/PostList.tsx create mode 100644 app/javascript/components/Roadmap/PostListByPostStatus.tsx create mode 100644 app/javascript/components/Roadmap/PostListItem.tsx create mode 100644 app/javascript/components/Roadmap/Roadmap.tsx create mode 100644 app/javascript/interfaces/IBoard.ts create mode 100644 app/javascript/interfaces/IPost.ts create mode 100644 app/javascript/interfaces/IPostStatus.ts create mode 100644 app/javascript/stylesheets/components/Roadmap/PostList.scss create mode 100644 app/javascript/stylesheets/components/Roadmap/PostListByPostStatus.scss create mode 100644 app/javascript/stylesheets/components/Roadmap/PostListItem.scss create mode 100644 app/javascript/stylesheets/components/Roadmap/Roadmap.scss delete mode 100644 app/views/static_pages/home.html.erb create mode 100644 app/views/static_pages/roadmap.html.erb diff --git a/app/controllers/static_pages_controller.rb b/app/controllers/static_pages_controller.rb index f6ad06be..45e5c132 100644 --- a/app/controllers/static_pages_controller.rb +++ b/app/controllers/static_pages_controller.rb @@ -1,4 +1,20 @@ class StaticPagesController < ApplicationController - def home + def roadmap + @post_statuses = PostStatus.select(:id, :name, :color) + + @posts = Post + .select(:id, :title, :board_id, :post_status_id, :user_id, :created_at) + .where(post_status_id: get_array_of_ids(@post_statuses)) end + + private + + def get_array_of_ids(resources) + array_of_ids = [] + resources.each do |resource| + array_of_ids.push resource.id + end + + array_of_ids + end end \ No newline at end of file diff --git a/app/javascript/components/Hello.tsx b/app/javascript/components/Hello.tsx deleted file mode 100644 index 25c9e30f..00000000 --- a/app/javascript/components/Hello.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import * as React from "react"; - -interface IProps { - name: string; -} - -class Hello extends React.Component { - render () { - const {name} = this.props; - - return ( - - Hello {name}! - - ); - } -} - -export default Hello; diff --git a/app/javascript/components/Roadmap/PostList.tsx b/app/javascript/components/Roadmap/PostList.tsx new file mode 100644 index 00000000..48403168 --- /dev/null +++ b/app/javascript/components/Roadmap/PostList.tsx @@ -0,0 +1,28 @@ +import * as React from 'react'; + +import PostListItem from './PostListItem'; + +import IPost from '../../interfaces/IPost'; +import IBoard from '../../interfaces/IBoard'; + +import '../../stylesheets/components/Roadmap/PostList.scss'; + +interface Props { + posts: Array; + boards: Array; +} + +const PostList = ({ posts, boards }: Props) => ( +
+ {posts.map((post, i) => ( + board.id === post.board_id).name} + + key={i} + /> + ))} +
+); + +export default PostList; \ No newline at end of file diff --git a/app/javascript/components/Roadmap/PostListByPostStatus.tsx b/app/javascript/components/Roadmap/PostListByPostStatus.tsx new file mode 100644 index 00000000..46a3894b --- /dev/null +++ b/app/javascript/components/Roadmap/PostListByPostStatus.tsx @@ -0,0 +1,32 @@ +import * as React from 'react'; + +import PostList from './PostList'; + +import IPostStatus from '../../interfaces/IPostStatus'; +import IPost from '../../interfaces/IPost'; +import IBoard from '../../interfaces/IBoard'; + +import '../../stylesheets/components/Roadmap/PostListByPostStatus.scss'; + +interface Props { + postStatus: IPostStatus; + posts: Array; + boards: Array; +} + +const PostListByPostStatus = ({ postStatus, posts, boards }: Props) => ( +
+
+
+
{postStatus.name}
+
+
+ +
+
+); + +export default PostListByPostStatus; \ No newline at end of file diff --git a/app/javascript/components/Roadmap/PostListItem.tsx b/app/javascript/components/Roadmap/PostListItem.tsx new file mode 100644 index 00000000..35a854c1 --- /dev/null +++ b/app/javascript/components/Roadmap/PostListItem.tsx @@ -0,0 +1,19 @@ +import * as React from 'react'; + +import '../../stylesheets/components/Roadmap/PostListItem.scss'; + +interface Props { + title: string; + boardName: string; +} + +const PostListItem = ({title, boardName}: Props) => ( + +
+
{title}
+
{boardName}
+
+ +); + +export default PostListItem; \ No newline at end of file diff --git a/app/javascript/components/Roadmap/Roadmap.tsx b/app/javascript/components/Roadmap/Roadmap.tsx new file mode 100644 index 00000000..9eba94e3 --- /dev/null +++ b/app/javascript/components/Roadmap/Roadmap.tsx @@ -0,0 +1,37 @@ +import * as React from 'react'; + +import PostListByPostStatus from './PostListByPostStatus'; + +import IPostStatus from '../../interfaces/IPostStatus'; +import IPost from '../../interfaces/IPost'; +import IBoard from '../../interfaces/IBoard'; + +import '../../stylesheets/components/Roadmap/Roadmap.scss'; + +interface Props { + postStatuses: Array; + posts: Array; + boards: Array; +} + +class Roadmap extends React.Component { + render () { + const { postStatuses, posts, boards } = this.props; + + return ( +
+ {postStatuses.map((postStatus, i) => ( + post.post_status_id === postStatus.id)} + boards={boards} + + key={i} + /> + ))} +
+ ); + } +} + +export default Roadmap; diff --git a/app/javascript/interfaces/IBoard.ts b/app/javascript/interfaces/IBoard.ts new file mode 100644 index 00000000..c9fbc4c1 --- /dev/null +++ b/app/javascript/interfaces/IBoard.ts @@ -0,0 +1,7 @@ +interface IBoard { + id: number; + name: string; + description?: string; +} + +export default IBoard; \ No newline at end of file diff --git a/app/javascript/interfaces/IPost.ts b/app/javascript/interfaces/IPost.ts new file mode 100644 index 00000000..451580ba --- /dev/null +++ b/app/javascript/interfaces/IPost.ts @@ -0,0 +1,11 @@ +interface IPost { + id: number; + title: string; + description?: string; + board_id: number; + post_status_id?: number; + user_id: number; + created_at: string; +} + +export default IPost; \ No newline at end of file diff --git a/app/javascript/interfaces/IPostStatus.ts b/app/javascript/interfaces/IPostStatus.ts new file mode 100644 index 00000000..becd3e5d --- /dev/null +++ b/app/javascript/interfaces/IPostStatus.ts @@ -0,0 +1,7 @@ +interface IPostStatus { + id: number; + name: string; + color: string; +} + +export default IPostStatus; \ No newline at end of file diff --git a/app/javascript/stylesheets/components/Roadmap/PostList.scss b/app/javascript/stylesheets/components/Roadmap/PostList.scss new file mode 100644 index 00000000..b2d1da70 --- /dev/null +++ b/app/javascript/stylesheets/components/Roadmap/PostList.scss @@ -0,0 +1,4 @@ +.postList { + display: flex; + flex-direction: column; +} \ No newline at end of file diff --git a/app/javascript/stylesheets/components/Roadmap/PostListByPostStatus.scss b/app/javascript/stylesheets/components/Roadmap/PostListByPostStatus.scss new file mode 100644 index 00000000..d400a7b7 --- /dev/null +++ b/app/javascript/stylesheets/components/Roadmap/PostListByPostStatus.scss @@ -0,0 +1,46 @@ +@media (max-width: 800px) { + .roadmapColumn { + width: 100%; + } +} + +@media (min-width: 801px) { + .roadmapColumn { + width: 32%; + } +} + +.roadmapColumn { + border-width: 1px; + border-style: solid; + border-radius: 4px; + + margin: 8px 0; + padding: 8px; +} + +.columnHeader { + display: flex; + align-items: center; + + padding-bottom: 4px; + border-bottom-style: solid; + border-bottom-width: 1px; + margin-bottom: 8px; +} + +.dot { + width: 16px; + height: 16px; + border-radius: 100%; +} + +.columnTitle { + margin: 0 8px; + font-weight: 700; +} + +.scrollContainer { + overflow-y: auto; + max-height: 350px; +} \ No newline at end of file diff --git a/app/javascript/stylesheets/components/Roadmap/PostListItem.scss b/app/javascript/stylesheets/components/Roadmap/PostListItem.scss new file mode 100644 index 00000000..7b217d5c --- /dev/null +++ b/app/javascript/stylesheets/components/Roadmap/PostListItem.scss @@ -0,0 +1,26 @@ +.postLink { + text-decoration: none; + border-radius: 4px; +} + +.postLink:hover { + text-decoration: none; + background-color: #f5f5f5; +} + +.postListItem { + margin: 4px 0; + padding: 8px 4px; +} + +.postTitle { + color: black; + font-weight: 500; + font-size: 17px; +} + +.postBoard { + color: grey; + font-weight: 400; + font-size: 14px; +} \ No newline at end of file diff --git a/app/javascript/stylesheets/components/Roadmap/Roadmap.scss b/app/javascript/stylesheets/components/Roadmap/Roadmap.scss new file mode 100644 index 00000000..0e15bde6 --- /dev/null +++ b/app/javascript/stylesheets/components/Roadmap/Roadmap.scss @@ -0,0 +1,7 @@ +.roadmapColumns { + display: flex; + flex: 1 1 auto; + justify-content: space-between; + align-items: flex-start; + flex-wrap: wrap; +} \ No newline at end of file diff --git a/app/views/boards/show.html.erb b/app/views/boards/show.html.erb index 00ec225b..bc53eb84 100644 --- a/app/views/boards/show.html.erb +++ b/app/views/boards/show.html.erb @@ -1,6 +1,2 @@

<%= @board.name %>

-

<%= @board.description %>

- -<%= - react_component('Hello', { name: 'TypeScript on React on Rails' }) -%> \ No newline at end of file +

<%= @board.description %>

\ No newline at end of file diff --git a/app/views/static_pages/home.html.erb b/app/views/static_pages/home.html.erb deleted file mode 100644 index 741e018b..00000000 --- a/app/views/static_pages/home.html.erb +++ /dev/null @@ -1,3 +0,0 @@ -

Home

- -

This is the home page of the website Astuto.

\ No newline at end of file diff --git a/app/views/static_pages/roadmap.html.erb b/app/views/static_pages/roadmap.html.erb new file mode 100644 index 00000000..83f0d86e --- /dev/null +++ b/app/views/static_pages/roadmap.html.erb @@ -0,0 +1,12 @@ +

Roadmap

+ +<%= + react_component( + 'Roadmap/Roadmap', + { + postStatuses: @post_statuses, + posts: @posts, + boards: @boards, + } + ) +%> \ No newline at end of file diff --git a/config/routes.rb b/config/routes.rb index 6c276afd..2c7ba2ea 100644 --- a/config/routes.rb +++ b/config/routes.rb @@ -1,5 +1,5 @@ Rails.application.routes.draw do - root to: 'static_pages#home' + root to: 'static_pages#roadmap' namespace :admin do root to: 'boards#index'