Add tailwind and styling for views
This commit is contained in:
6
.gitignore
vendored
6
.gitignore
vendored
@@ -34,3 +34,9 @@
|
||||
/config/*.key
|
||||
|
||||
.idea/
|
||||
|
||||
/app/assets/builds/*
|
||||
!/app/assets/builds/.keep
|
||||
|
||||
node_modules
|
||||
package*.json
|
||||
2
Gemfile
2
Gemfile
@@ -64,3 +64,5 @@ group :test do
|
||||
gem "capybara"
|
||||
gem "selenium-webdriver"
|
||||
end
|
||||
|
||||
gem "tailwindcss-rails", "~> 4.3"
|
||||
|
||||
10
Gemfile.lock
10
Gemfile.lock
@@ -344,6 +344,15 @@ GEM
|
||||
stimulus-rails (1.3.4)
|
||||
railties (>= 6.0.0)
|
||||
stringio (3.1.7)
|
||||
tailwindcss-rails (4.3.0)
|
||||
railties (>= 7.0.0)
|
||||
tailwindcss-ruby (~> 4.0)
|
||||
tailwindcss-ruby (4.1.13)
|
||||
tailwindcss-ruby (4.1.13-aarch64-linux-gnu)
|
||||
tailwindcss-ruby (4.1.13-aarch64-linux-musl)
|
||||
tailwindcss-ruby (4.1.13-arm64-darwin)
|
||||
tailwindcss-ruby (4.1.13-x86_64-linux-gnu)
|
||||
tailwindcss-ruby (4.1.13-x86_64-linux-musl)
|
||||
thor (1.4.0)
|
||||
thruster (0.1.16)
|
||||
thruster (0.1.16-aarch64-linux)
|
||||
@@ -406,6 +415,7 @@ DEPENDENCIES
|
||||
solid_queue
|
||||
sqlite3 (>= 2.1)
|
||||
stimulus-rails
|
||||
tailwindcss-rails (~> 4.3)
|
||||
thruster
|
||||
turbo-rails
|
||||
tzinfo-data
|
||||
|
||||
2
Procfile.dev
Normal file
2
Procfile.dev
Normal file
@@ -0,0 +1,2 @@
|
||||
web: bin/rails server
|
||||
css: bin/rails tailwindcss:watch
|
||||
0
app/assets/builds/.keep
Normal file
0
app/assets/builds/.keep
Normal file
1
app/assets/tailwind/application.css
Normal file
1
app/assets/tailwind/application.css
Normal file
@@ -0,0 +1 @@
|
||||
@import "tailwindcss";
|
||||
@@ -12,7 +12,7 @@ class TodosController < ApplicationController
|
||||
|
||||
# GET /todos/new
|
||||
def new
|
||||
@todo = Todo.new
|
||||
@todo = Todo.new(project_id: params[:project_id])
|
||||
end
|
||||
|
||||
# GET /todos/1/edit
|
||||
|
||||
@@ -24,9 +24,23 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<div class="bg-white flex justify-between items-center p-8 h-24 drop-shadow">
|
||||
<%= link_to "Doable", root_path, class: "text-3xl text-indigo-600 font-extrabold" %>
|
||||
<nav class="flex gap-4">
|
||||
<%= link_to "Projects", projects_path %>
|
||||
<%= link_to "Todos", todos_path %>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<main class="p-8 bg-gray-50">
|
||||
<% if flash[:notice] %>
|
||||
<p class="flash"><%= flash[:notice] %></p>
|
||||
<% end %>
|
||||
<%= yield %>
|
||||
</main>
|
||||
<footer>
|
||||
<p class="w-full h-24 flex items-center justify-center border-t border-gray-200 text-gray-400">© 2025 Doable - Stay organized and get things done</p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,21 +1,47 @@
|
||||
<%= form_with model: project do |f| %>
|
||||
<%= form_with model: project, class: "space-y-6" do |f| %>
|
||||
<% if project.errors.any? %>
|
||||
<div class="errors">
|
||||
<h2><%= pluralize(project.errors.count, "error") %> prohibited this project from being saved:</h2>
|
||||
<ul>
|
||||
<div class="bg-red-50 border-l-4 border-red-400 p-4 mb-6">
|
||||
<div class="flex">
|
||||
<div class="flex-shrink-0">
|
||||
<svg class="h-5 w-5 text-red-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="ml-3">
|
||||
<h3 class="text-sm font-medium text-red-800">
|
||||
<%= pluralize(project.errors.count, "error") %> prohibited this project from being saved:
|
||||
</h3>
|
||||
<div class="mt-2 text-sm text-red-700">
|
||||
<ul class="list-disc pl-5 space-y-1">
|
||||
<% project.errors.full_messages.each do |message| %>
|
||||
<li><%= message %></li>
|
||||
<% end %>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<div class="field">
|
||||
<%= f.label :name %>
|
||||
<%= f.text_field :name %>
|
||||
<div>
|
||||
<%= f.label :name, class: "block text-sm font-medium text-gray-700" %>
|
||||
<div class="mt-1">
|
||||
<%= f.text_field :name, class: "shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md" %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="actions">
|
||||
<%= f.submit %>
|
||||
<div>
|
||||
<%= f.label :active, class: "block text-sm font-medium text-gray-700" %>
|
||||
<div class="mt-1">
|
||||
<%= f.check_box :active, class: "h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded" %>
|
||||
<span class="ml-2 text-sm text-gray-600">Mark as active</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pt-5">
|
||||
<div class="flex justify-end">
|
||||
<%= link_to "Cancel", projects_path, class: "bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" %>
|
||||
<%= f.submit class: "ml-3 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" %>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
@@ -1,3 +1,17 @@
|
||||
<h1>Edit Project</h1>
|
||||
|
||||
<%= render "form", project: @project %>
|
||||
<div class="md:grid md:grid-cols-3 md:gap-6">
|
||||
<div class="md:col-span-1">
|
||||
<div class="px-4 sm:px-0">
|
||||
<h1 class="text-2xl font-bold text-gray-900 mb-2">Edit Project</h1>
|
||||
<p class="mt-1 text-sm text-gray-600">
|
||||
Update your project's details.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-5 md:mt-0 md:col-span-2">
|
||||
<div class="shadow sm:rounded-md sm:overflow-hidden">
|
||||
<div class="px-4 py-5 bg-white space-y-6 sm:p-6">
|
||||
<%= render "form", project: @project %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,6 +1,40 @@
|
||||
<h1>Projects</h1>
|
||||
<div class="flex justify-between items-center mb-6">
|
||||
<h1 class="text-3xl font-bold text-gray-900">Projects</h1>
|
||||
<%= link_to "New Project", new_project_path, class: "px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors" %>
|
||||
</div>
|
||||
|
||||
<% @projects.each do |project| %>
|
||||
<li><%= link_to project.name, project_path(project) %></li>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<% @projects.each do |project| %>
|
||||
<div class="bg-white rounded-lg shadow overflow-hidden hover:shadow-md transition-shadow">
|
||||
<div class="p-6">
|
||||
<h2 class="text-xl font-semibold text-gray-900 mb-2">
|
||||
<%= project.name %>
|
||||
</h2>
|
||||
|
||||
<div class="mt-4 flex items-center text-sm text-gray-600">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
|
||||
</svg>
|
||||
<span><%= project.todos.count %> <%= "Todo".pluralize(project.todos.count) %></span>
|
||||
</div>
|
||||
|
||||
<div class="mt-6">
|
||||
<%= link_to "View Project", project_path(project), class: "inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-indigo-700 bg-indigo-100 hover:bg-indigo-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<% if @projects.empty? %>
|
||||
<div class="text-center py-12">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="mx-auto h-12 w-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
|
||||
</svg>
|
||||
<h3 class="mt-2 text-sm font-medium text-gray-900">No projects</h3>
|
||||
<p class="mt-1 text-sm text-gray-500">Get started by creating a new project.</p>
|
||||
<div class="mt-6">
|
||||
<%= link_to "New Project", new_project_path, class: "inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" %>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
<p><%= link_to "New project", new_project_path %></p>
|
||||
@@ -1,3 +1,17 @@
|
||||
<h1>New project</h1>
|
||||
|
||||
<%= render "form", project: @project %>
|
||||
<div class="md:grid md:grid-cols-3 md:gap-6">
|
||||
<div class="md:col-span-1">
|
||||
<div class="px-4 sm:px-0">
|
||||
<h1 class="text-2xl font-bold text-gray-900 mb-2">New Project</h1>
|
||||
<p class="mt-1 text-sm text-gray-600">
|
||||
Create a new project to organize your todos.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-5 md:mt-0 md:col-span-2">
|
||||
<div class="shadow sm:rounded-md sm:overflow-hidden">
|
||||
<div class="px-4 py-5 bg-white space-y-6 sm:p-6">
|
||||
<%= render "form", project: @project %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,9 +1,95 @@
|
||||
<h1><%= @project.name %></h1>
|
||||
<div class="bg-white shadow-sm rounded-lg overflow-hidden mb-8">
|
||||
<div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
|
||||
<div class="flex justify-between items-center">
|
||||
<h1 class="text-2xl font-bold text-gray-900"><%= @project.name %></h1>
|
||||
<div class="flex space-x-2">
|
||||
<%= link_to edit_project_path(@project), class: "text-gray-400 hover:text-gray-500" do %>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z" />
|
||||
</svg>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
<% if @project.active? %>
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 mt-2">
|
||||
Active
|
||||
</span>
|
||||
<% else %>
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800 mt-2">
|
||||
Inactive
|
||||
</span>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<% @project.todos.each do |todo| %>
|
||||
<li><%= link_to todo.name, todo_path(todo) %></li>
|
||||
<div class="flex justify-between items-center mb-6">
|
||||
<h2 class="text-xl font-semibold text-gray-800">Todos for this project</h2>
|
||||
<%= link_to new_todo_path(project_id: @project.id), class: "inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" do %>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="-ml-1 mr-2 h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
Add Todo
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<% if @project.todos.any? %>
|
||||
<div class="bg-white shadow overflow-hidden sm:rounded-md">
|
||||
<ul class="divide-y divide-gray-200">
|
||||
<% @project.todos.each do |todo| %>
|
||||
<li>
|
||||
<div class="px-4 py-4 sm:px-6 hover:bg-gray-50">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center">
|
||||
<div class="min-w-0 flex-1 flex items-center">
|
||||
<% if todo.completed %>
|
||||
<span class="flex-shrink-0 h-5 w-5 text-green-500">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</span>
|
||||
<% else %>
|
||||
<span class="flex-shrink-0 h-5 w-5 text-gray-300 border-2 border-gray-300 rounded-full"></span>
|
||||
<% end %>
|
||||
<div class="ml-4">
|
||||
<p class="text-sm font-medium text-indigo-600 truncate"><%= link_to todo.name, todo_path(todo) %></p>
|
||||
<p class="text-sm text-gray-500 truncate"><%= truncate(todo.description, length: 100) %></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ml-4 flex-shrink-0 flex items-center space-x-4">
|
||||
<% if todo.priority && todo.priority > 0 %>
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
|
||||
Priority: <%= todo.priority %>
|
||||
</span>
|
||||
<% end %>
|
||||
<%= link_to edit_todo_path(todo), class: "text-gray-400 hover:text-gray-500" do %>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z" />
|
||||
</svg>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<% end %>
|
||||
</ul>
|
||||
</div>
|
||||
<% else %>
|
||||
<div class="text-center py-12 bg-white shadow overflow-hidden sm:rounded-md">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="mx-auto h-12 w-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
|
||||
</svg>
|
||||
<h3 class="mt-2 text-sm font-medium text-gray-900">No todos</h3>
|
||||
<p class="mt-1 text-sm text-gray-500">Get started by creating a new todo.</p>
|
||||
<div class="mt-6">
|
||||
<%= link_to new_todo_path(project_id: @project.id), class: "inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" do %>
|
||||
Add a todo
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<%= link_to "Edit", edit_project_path %>
|
||||
<%= button_to "Delete", project_path, method: :delete %>
|
||||
<%= link_to "Back", projects_path %>
|
||||
<div class="mt-8 flex space-x-4 items-center">
|
||||
<%= link_to "Back to Projects", projects_path, class: "inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" %>
|
||||
<%= button_to "Delete Project", project_path(@project), method: :delete, class: "inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500", data: { confirm: "Are you sure you want to delete this project and all its todos?" } %>
|
||||
</div>
|
||||
@@ -1,42 +1,74 @@
|
||||
<%= form_with(model: todo) do |form| %>
|
||||
<%= form_with(model: todo, class: "space-y-6") do |form| %>
|
||||
<% if todo.errors.any? %>
|
||||
<div style="color: red">
|
||||
<h2><%= pluralize(todo.errors.count, "error") %> prohibited this todo from being saved:</h2>
|
||||
|
||||
<ul>
|
||||
<div class="bg-red-50 border-l-4 border-red-400 p-4 mb-6">
|
||||
<div class="flex">
|
||||
<div class="flex-shrink-0">
|
||||
<svg class="h-5 w-5 text-red-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="ml-3">
|
||||
<h3 class="text-sm font-medium text-red-800">
|
||||
<%= pluralize(todo.errors.count, "error") %> prohibited this todo from being saved:
|
||||
</h3>
|
||||
<div class="mt-2 text-sm text-red-700">
|
||||
<ul class="list-disc pl-5 space-y-1">
|
||||
<% todo.errors.each do |error| %>
|
||||
<li><%= error.full_message %></li>
|
||||
<% end %>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<div>
|
||||
<%= form.label :name, style: "display: block" %>
|
||||
<%= form.text_field :name %>
|
||||
<%= form.label :name, class: "block text-sm font-medium text-gray-700" %>
|
||||
<div class="mt-1">
|
||||
<%= form.text_field :name, class: "shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md" %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<%= form.label :description, style: "display: block" %>
|
||||
<%= form.textarea :description %>
|
||||
<%= form.label :description, class: "block text-sm font-medium text-gray-700" %>
|
||||
<div class="mt-1">
|
||||
<%= form.text_area :description, rows: 4, class: "shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md" %>
|
||||
<p class="mt-2 text-sm text-gray-500">Brief description of what needs to be done.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start">
|
||||
<div class="flex items-center h-5">
|
||||
<%= form.check_box :completed, class: "focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" %>
|
||||
</div>
|
||||
<div class="ml-3 text-sm">
|
||||
<%= form.label :completed, class: "font-medium text-gray-700" %>
|
||||
<p class="text-gray-500">Mark as completed if the task is done.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<%= form.label :completed %>
|
||||
<%= form.check_box :completed %>
|
||||
<%= form.label :priority, class: "block text-sm font-medium text-gray-700" %>
|
||||
<div class="mt-1">
|
||||
<%= form.number_field :priority, in: 0..5, class: "shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md" %>
|
||||
<p class="mt-2 text-sm text-gray-500">Set a priority from 0 (lowest) to 5 (highest).</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<%= form.label :priority %>
|
||||
<%= form.number_field :priority %>
|
||||
<%= form.label :project_id, class: "block text-sm font-medium text-gray-700" %>
|
||||
<div class="mt-1">
|
||||
<%= form.collection_select :project_id, Project.all, :id, :name,
|
||||
{ prompt: "Select a project" },
|
||||
{ class: "mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md" } %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<%= form.label :project_id %>
|
||||
<%= form.collection_select :project_id, Project.all, :id, :name, prompt: "Select a project" %>
|
||||
<div class="pt-5">
|
||||
<div class="flex justify-end">
|
||||
<%= link_to "Cancel", todos_path, class: "bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" %>
|
||||
<%= form.submit class: "ml-3 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" %>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<%= form.submit %>
|
||||
</div>
|
||||
<% end %>
|
||||
@@ -1,26 +1,51 @@
|
||||
<div id="<%= dom_id todo %>">
|
||||
<div>
|
||||
<strong>Name:</strong>
|
||||
<div id="<%= dom_id todo %>" class="bg-white shadow overflow-hidden sm:rounded-lg hover:shadow-md transition-shadow">
|
||||
<div class="px-4 py-5 sm:px-6 flex justify-between items-center">
|
||||
<h3 class="text-lg leading-6 font-medium text-gray-900 flex items-center">
|
||||
<% if todo.completed %>
|
||||
<span class="mr-2 flex h-5 w-5 items-center justify-center rounded-full bg-green-100">
|
||||
<svg class="h-3.5 w-3.5 text-green-500" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
|
||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</span>
|
||||
<% else %>
|
||||
<span class="mr-2 flex h-5 w-5 items-center justify-center rounded-full border-2 border-gray-300"></span>
|
||||
<% end %>
|
||||
<%= todo.name %>
|
||||
</h3>
|
||||
<div class="flex space-x-2">
|
||||
<% if todo.priority && todo.priority > 0 %>
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
|
||||
Priority: <%= todo.priority %>
|
||||
</span>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<strong>Description:</strong>
|
||||
<%= todo.description %>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<strong>Completed:</strong>
|
||||
<%= todo.completed %>
|
||||
<div class="border-t border-gray-200">
|
||||
<dl>
|
||||
<div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
|
||||
<dt class="text-sm font-medium text-gray-500">Description</dt>
|
||||
<dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0"><%= todo.description.present? ? todo.description : "No description provided" %></dd>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<strong>Priority:</strong>
|
||||
<%= todo.priority %>
|
||||
<div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
|
||||
<dt class="text-sm font-medium text-gray-500">Project</dt>
|
||||
<dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
|
||||
<%= link_to todo.project.name, project_path(todo.project), class: "text-indigo-600 hover:text-indigo-900" %>
|
||||
</dd>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<strong>Project:</strong>
|
||||
<%= link_to todo.project.name, project_path(todo.project) %>
|
||||
<div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
|
||||
<dt class="text-sm font-medium text-gray-500">Status</dt>
|
||||
<dd class="mt-1 text-sm sm:col-span-2 sm:mt-0">
|
||||
<% if todo.completed %>
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
|
||||
Completed
|
||||
</span>
|
||||
<% else %>
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
|
||||
In Progress
|
||||
</span>
|
||||
<% end %>
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,12 +1,51 @@
|
||||
<% content_for :title, "Editing todo" %>
|
||||
|
||||
<h1>Editing todo</h1>
|
||||
|
||||
<%= render "form", todo: @todo %>
|
||||
|
||||
<br>
|
||||
|
||||
<div>
|
||||
<%= link_to "Show this todo", @todo %> |
|
||||
<%= link_to "Back to todos", todos_path %>
|
||||
<div id="<%= dom_id todo %>" class="bg-white shadow overflow-hidden sm:rounded-lg hover:shadow-md transition-shadow">
|
||||
<div class="px-4 py-5 sm:px-6 flex justify-between items-center">
|
||||
<h3 class="text-lg leading-6 font-medium text-gray-900 flex items-center">
|
||||
<% if todo.completed %>
|
||||
<span class="mr-2 flex h-5 w-5 items-center justify-center rounded-full bg-green-100">
|
||||
<svg class="h-3.5 w-3.5 text-green-500" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
|
||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</span>
|
||||
<% else %>
|
||||
<span class="mr-2 flex h-5 w-5 items-center justify-center rounded-full border-2 border-gray-300"></span>
|
||||
<% end %>
|
||||
<%= todo.name %>
|
||||
</h3>
|
||||
<div class="flex space-x-2">
|
||||
<% if todo.priority && todo.priority > 0 %>
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
|
||||
Priority: <%= todo.priority %>
|
||||
</span>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
<div class="border-t border-gray-200">
|
||||
<dl>
|
||||
<div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
|
||||
<dt class="text-sm font-medium text-gray-500">Description</dt>
|
||||
<dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0"><%= todo.description.present? ? todo.description : "No description provided" %></dd>
|
||||
</div>
|
||||
<div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
|
||||
<dt class="text-sm font-medium text-gray-500">Project</dt>
|
||||
<dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
|
||||
<%= link_to todo.project.name, project_path(todo.project), class: "text-indigo-600 hover:text-indigo-900" %>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
|
||||
<dt class="text-sm font-medium text-gray-500">Status</dt>
|
||||
<dd class="mt-1 text-sm sm:col-span-2 sm:mt-0">
|
||||
<% if todo.completed %>
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
|
||||
Completed
|
||||
</span>
|
||||
<% else %>
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
|
||||
In Progress
|
||||
</span>
|
||||
<% end %>
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,16 +1,90 @@
|
||||
<p style="color: green"><%= notice %></p>
|
||||
|
||||
<% content_for :title, "Todos" %>
|
||||
|
||||
<h1>Todos</h1>
|
||||
|
||||
<div id="todos">
|
||||
<% @todos.each do |todo| %>
|
||||
<%= render todo %>
|
||||
<p>
|
||||
<%= link_to "Show this todo", todo %>
|
||||
</p>
|
||||
<div class="flex justify-between items-center mb-6">
|
||||
<h1 class="text-3xl font-bold text-gray-900">Todos</h1>
|
||||
<%= link_to new_todo_path, class: "px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors" do %>
|
||||
<div class="flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
New Todo
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<%= link_to "New todo", new_todo_path %>
|
||||
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-2 mb-8">
|
||||
<div class="bg-white overflow-hidden shadow rounded-lg">
|
||||
<div class="px-4 py-5 sm:p-6">
|
||||
<div class="flex items-center">
|
||||
<div class="flex-shrink-0 bg-indigo-500 rounded-md p-3">
|
||||
<svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="ml-5 w-0 flex-1">
|
||||
<dl>
|
||||
<dt class="text-sm font-medium text-gray-500 truncate">
|
||||
Total Todos
|
||||
</dt>
|
||||
<dd>
|
||||
<div class="text-lg font-medium text-gray-900">
|
||||
<%= @todos.count %>
|
||||
</div>
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white overflow-hidden shadow rounded-lg">
|
||||
<div class="px-4 py-5 sm:p-6">
|
||||
<div class="flex items-center">
|
||||
<div class="flex-shrink-0 bg-green-500 rounded-md p-3">
|
||||
<svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="ml-5 w-0 flex-1">
|
||||
<dl>
|
||||
<dt class="text-sm font-medium text-gray-500 truncate">
|
||||
Completed
|
||||
</dt>
|
||||
<dd>
|
||||
<div class="text-lg font-medium text-gray-900">
|
||||
<%= @todos.where(completed: true).count %>
|
||||
</div>
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="todos" class="space-y-6">
|
||||
<% @todos.each do |todo| %>
|
||||
<div class="bg-white overflow-hidden shadow rounded-lg transition-all hover:shadow-md">
|
||||
<%= render todo %>
|
||||
<div class="px-4 py-3 bg-gray-50 text-right sm:px-6 flex justify-end space-x-3">
|
||||
<%= link_to "View", todo, class: "inline-flex items-center px-3 py-2 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" %>
|
||||
<%= link_to "Edit", edit_todo_path(todo), class: "inline-flex items-center px-3 py-2 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" %>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<% if @todos.empty? %>
|
||||
<div class="text-center py-12 bg-white shadow overflow-hidden sm:rounded-md">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="mx-auto h-12 w-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
|
||||
</svg>
|
||||
<h3 class="mt-2 text-sm font-medium text-gray-900">No todos</h3>
|
||||
<p class="mt-1 text-sm text-gray-500">Get started by creating a new todo.</p>
|
||||
<div class="mt-6">
|
||||
<%= link_to new_todo_path, class: "inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" do %>
|
||||
Add a todo
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
@@ -1,11 +1,22 @@
|
||||
<% content_for :title, "New todo" %>
|
||||
|
||||
<h1>New todo</h1>
|
||||
|
||||
<%= render "form", todo: @todo %>
|
||||
|
||||
<br>
|
||||
|
||||
<div>
|
||||
<%= link_to "Back to todos", todos_path %>
|
||||
<div class="md:grid md:grid-cols-3 md:gap-6">
|
||||
<div class="md:col-span-1">
|
||||
<div class="px-4 sm:px-0">
|
||||
<h1 class="text-2xl font-bold text-gray-900 mb-2">New Todo</h1>
|
||||
<p class="mt-1 text-sm text-gray-600">
|
||||
Create a new todo to track your tasks.
|
||||
</p>
|
||||
<div class="mt-6">
|
||||
<%= link_to "Back to Todos", todos_path, class: "text-indigo-600 hover:text-indigo-900" %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-5 md:mt-0 md:col-span-2">
|
||||
<div class="shadow sm:rounded-md sm:overflow-hidden">
|
||||
<div class="px-4 py-5 bg-white space-y-6 sm:p-6">
|
||||
<%= render "form", todo: @todo %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,10 +1,11 @@
|
||||
<p style="color: green"><%= notice %></p>
|
||||
|
||||
<%= render @todo %>
|
||||
|
||||
<div>
|
||||
<%= link_to "Edit this todo", edit_todo_path(@todo) %> |
|
||||
<%= link_to "Back to todos", todos_path %>
|
||||
|
||||
<%= button_to "Destroy this todo", @todo, method: :delete %>
|
||||
<div class="mb-8">
|
||||
<%= render @todo %>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between items-center">
|
||||
<div class="flex space-x-4">
|
||||
<%= link_to "Back to todos", todos_path, class: "inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" %>
|
||||
<%= link_to "Edit this todo", edit_todo_path(@todo), class: "inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" %>
|
||||
</div>
|
||||
<%= button_to "Delete this todo", @todo, method: :delete, class: "inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500", data: { confirm: "Are you sure you want to delete this todo?" } %>
|
||||
</div>
|
||||
18
bin/dev
18
bin/dev
@@ -1,2 +1,16 @@
|
||||
#!/usr/bin/env ruby
|
||||
exec "./bin/rails", "server", *ARGV
|
||||
#!/usr/bin/env sh
|
||||
|
||||
if ! gem list foreman -i --silent; then
|
||||
echo "Installing foreman..."
|
||||
gem install foreman
|
||||
fi
|
||||
|
||||
# Default to port 3000 if not specified
|
||||
export PORT="${PORT:-3000}"
|
||||
|
||||
# Let the debug gem allow remote connections,
|
||||
# but avoid loading until `debugger` is called
|
||||
export RUBY_DEBUG_OPEN="true"
|
||||
export RUBY_DEBUG_LAZY="true"
|
||||
|
||||
exec foreman start -f Procfile.dev "$@"
|
||||
|
||||
@@ -13,5 +13,5 @@ Rails.application.routes.draw do
|
||||
# get "service-worker" => "rails/pwa#service_worker", as: :pwa_service_worker
|
||||
|
||||
# Defines the root path route ("/")
|
||||
# root "posts#index"
|
||||
root "todos#index"
|
||||
end
|
||||
|
||||
Reference in New Issue
Block a user