chore(deps): bump solid_cable from 3.0.6 to 3.0.7

.gitignore

@@ -32,3 +32,6 @@
 
 # Ignore master key for decrypting credentials and more.
 /config/master.key
+
+/app/assets/builds/*
+!/app/assets/builds/.keep

Gemfile

@@ -61,3 +61,7 @@ group :test do
   gem "capybara"
   gem "selenium-webdriver"
 end
+
+gem "tailwindcss-rails"
+
+gem "tailwindcss-ruby", "3.4.13"

Gemfile.lock

@@ -285,7 +285,7 @@ GEM
       rexml (~> 3.2, >= 3.2.5)
       rubyzip (>= 1.2.2, < 3.0)
       websocket (~> 1.0)
-    solid_cable (3.0.6)
+    solid_cable (3.0.7)
       actioncable (>= 7.2)
       activejob (>= 7.2)
       activerecord (>= 7.2)
@@ -317,6 +317,13 @@ GEM
     stimulus-rails (1.3.4)
       railties (>= 6.0.0)
     stringio (3.1.2)
+    tailwindcss-rails (3.3.1)
+      railties (>= 7.0.0)
+      tailwindcss-ruby (~> 3.0)
+    tailwindcss-ruby (3.4.13-aarch64-linux)
+    tailwindcss-ruby (3.4.13-arm-linux)
+    tailwindcss-ruby (3.4.13-arm64-darwin)
+    tailwindcss-ruby (3.4.13-x86_64-linux)
     thor (1.3.2)
     thruster (0.1.10)
     thruster (0.1.10-aarch64-linux)
@@ -377,6 +384,8 @@ DEPENDENCIES
   solid_queue
   sqlite3 (>= 2.1)
   stimulus-rails
+  tailwindcss-rails
+  tailwindcss-ruby (= 3.4.13)
   thruster
   turbo-rails
   tzinfo-data

Procfile.dev

@@ -0,0 +1,2 @@
+web: bin/rails server
+css: bin/rails tailwindcss:watch

app/assets/stylesheets/application.tailwind.css

@@ -0,0 +1,13 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/*
+
+@layer components {
+  .btn-primary {
+    @apply py-2 px-4 bg-blue-200;
+  }
+}
+
+*/

app/controllers/appointments_controller.rb

@@ -1,12 +1,36 @@
 class AppointmentsController < ApplicationController
-  helper_method :appointments
+  helper_method :appointments, :appointment
 
-  def index
+  before_action :check_created_by, only: [:edit, :update]
+
+  def update
+    if appointment.update(appointment_params)
+      redirect_to appointments_path, notice: "Appointment updated!"
+    else
+      render :edit, status: :unprocessable_entity
+    end
   end
 
   private
 
+  def check_created_by
+    unless appointment.created_by?(Current.user)
+      redirect_to appointments_path, alert: "Can't modify appointment - you are not the creator."
+    end
+  end
+
+  def appointment_params
+    params.require(:appointment).permit(
+      :requested_datetime,
+      :notes
+    )
+  end
+
+  def appointment
+    @appointment ||= Appointment.find(params[:id])
+  end
+
   def appointments
-    @appointments ||= Appointment.all
+    @appointments ||= Appointment.includes(:created_by).all
   end
 end

app/javascript/application.js

@@ -1,3 +1,7 @@
 // Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
 import "@hotwired/turbo-rails"
 import "controllers"
+
+window.removeFlash = (closeButton) => {
+  closeButton.parentElement.remove();
+}

app/models/appointment.rb

@@ -2,4 +2,16 @@ class Appointment < ApplicationRecord
   belongs_to :created_by, foreign_key: :created_by_user_id, class_name: "User"
 
   validates :requested_datetime, presence: true
+
+  after_save_commit -> {
+    broadcast_replace_to(
+      "appointments_list",
+      partial: "appointments/load_row",
+      locals: { appointment: self }
+    )
+  }
+
+  def created_by?(user)
+    created_by == user
+  end
 end

app/views/appointments/_appointment.html.erb

@@ -1,5 +1,28 @@
-<div>
-  <%= appointment.requested_datetime %>
-  <%= appointment.notes %>
-  <%= appointment.created_by_user_id %>
-</div>
+<%= turbo_frame_tag(appointment) do %>
+ <div class="flex flex-wrap items-center justify-between gap-x-6 gap-y-4 py-5 sm:flex-nowrap">
+    <div>
+      <p class="text-sm/6 font-semibold text-gray-900">
+        <a href="#" class="hover:underline">Requested Time - <%= appointment.requested_datetime.strftime("%B %-d %Y at %I:%H%P") %></a>
+      </p>
+      <div class="mt-1 flex flex-col text-xs/5">
+        <p class="text-gray-400">
+          <%= truncate(appointment.notes, length: 40) %>
+        </p>
+        <div class="flex gap-x-4 text-gray-500">
+          <a href="#" class="hover:underline"><%= appointment.created_by.email_address %></a>
+          <time datetime="<%= appointment.updated_at %>">
+            <%= distance_of_time_in_words_to_now(appointment.updated_at, include_seconds: false) %> ago
+          </time>
+        </div>
+      </div>
+    </div>
+    <dl class="flex w-full flex-none justify-between gap-x-8 sm:w-auto">
+      <div class="flex w-16 gap-x-2.5">
+        <span class="sr-only">Actions</span>
+        <% if appointment.created_by?(Current.user) %>
+          <%= link_to "Edit", edit_appointment_path(appointment), class: "text-xs text-indigo-500 hover:text-indigo-400", data: { turbo: false } %>
+        <% end %>
+      </div>
+    </dl>
+  </div>
+<% end %>

app/views/appointments/_load_row.html.erb

@@ -0,0 +1 @@
+<%= turbo_frame_tag(appointment, src: row_appointment_path(appointment)) %>

app/views/appointments/edit.html.erb

@@ -0,0 +1,19 @@
+<div class="flex flex-col mx-auto">
+  <h1 class="text-3xl font-bold tracking-tight text-gray-900">Edit Appointment</h1>
+
+  <%= form_for appointment, html: { class: "mt-12" } do |f| %>
+    <div class="flex flex-col gap-y-4">
+      <div class="flex flex-col">
+        <%= f.label :requested_datetime, class: "font-semibold" %>
+        <%= f.datetime_field :requested_datetime %>
+      </div>
+
+      <div class="flex flex-col">
+        <%= f.label :notes, class: "font-semibold" %>
+        <%= f.text_area :notes, cols: 40, rows: 10 %>
+      </div>
+
+      <%= f.submit class: "rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600" %>
+    </div>
+  <% end %>
+</div>

app/views/appointments/index.html.erb

@@ -1,3 +1,9 @@
-<h1>Appointments</h1>
+<%= turbo_stream_from "appointments_list" %>
 
-<%= render appointments, as: :appointment %>
+<div class="flex flex-col mx-auto">
+  <h1 class="text-3xl font-bold tracking-tight text-gray-900">Appointments</h1>
+
+  <div role="list" class="flex flex-col divide-y divide-gray-100">
+    <%= render appointments, as: :appointment %>
+  </div>
+</div>

app/views/appointments/row.html.erb

@@ -0,0 +1 @@
+<%= render "appointment", appointment: %>

app/views/layouts/_flash.html.erb

@@ -0,0 +1,21 @@
+<% flash.each do |type, msg| %>
+  <% if type.to_s == "notice" %>
+    <div class="flex justify-between rounded-md bg-green-50 p-4 text-sm text-green-700 mb-8">
+      <%= msg %>
+      <button class="text-gray-500" onclick="removeFlash(this)">
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
+        </svg>
+      </button>
+    </div>
+  <% else %>
+    <div class="flex justify-between rounded-md bg-red-50 p-4 text-sm text-red-700 mb-8">
+      <%= msg %>
+      <button class="text-gray-500" onclick="removeFlash(this)">
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
+        </svg>
+      </button>
+    </div>
+  <% end %>
+<% end %>

app/views/layouts/application.html.erb

@@ -18,11 +18,15 @@
     <link rel="apple-touch-icon" href="/icon.png">
 
     <%# Includes all stylesheet files in app/assets/stylesheets %>
+    <%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %>
     <%= stylesheet_link_tag :app, "data-turbo-track": "reload" %>
     <%= javascript_importmap_tags %>
   </head>
 
   <body>
-    <%= yield %>
+    <main class="container mx-auto mt-28 px-5 flex flex-col">
+      <%= render "layouts/flash" %>
+      <%= yield %>
+    </main>
   </body>
 </html>

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 "$@"

config/routes.rb

@@ -1,7 +1,11 @@
 Rails.application.routes.draw do
   resource :session
   resources :passwords, param: :token
-  resources :appointments, only: :index
+  resources :appointments, only: [:index, :edit, :update] do
+    member do
+      get :row
+    end
+  end
   # Define your application routes per the DSL in https://guides.rubyonrails.org/routing.html
 
   # Reveal health status on /up that returns 200 if the app boots with no exceptions, otherwise 500.

config/tailwind.config.js

@@ -0,0 +1,22 @@
+const defaultTheme = require('tailwindcss/defaultTheme')
+
+module.exports = {
+  content: [
+    './public/*.html',
+    './app/helpers/**/*.rb',
+    './app/javascript/**/*.js',
+    './app/views/**/*.{erb,haml,html,slim}'
+  ],
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: ['Inter var', ...defaultTheme.fontFamily.sans],
+      },
+    },
+  },
+  plugins: [
+    require('@tailwindcss/forms'),
+    require('@tailwindcss/typography'),
+    require('@tailwindcss/container-queries'),
+  ]
+}