hotsheet 0.1.0 → 0.1.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ebb74d345ffa27e7320c021ce0108b934414cc5e93fae4e58893a5e556e389b4
-  data.tar.gz: c45e89321ccd3da4ad7354ae2d6695035d31451a2c38990a6c14f6cc4d793173
+  metadata.gz: 2b1cc53c691cd9b61d1361342ba5ce7be20d3992dafa47bd770cd12cf0976158
+  data.tar.gz: 2db750a0be71817cb2d2ce9dd02153d559813e810cade288b85d8f41728fe509
 SHA512:
-  metadata.gz: d7d422c0bfe713d39d3e2d4566b116e1e5cc75825bbca187bae4e9d73fb75ebd35a442020b8ad1b2f3e05796cd1726be86b9b7ff9f28838ef4bae6c86bfcefcc
-  data.tar.gz: 82a933e5d47a1b60806dca93db6b5e041fc46a39fc2e0f57955c5bac3cf5dc45b7c3218bfd16a18e685faa1cbac4a2160daef3a30333ecafda78400d57737414
+  metadata.gz: 8e8e1ad31860f0145d8d6128107c70fcee0cd5c8cf2b86d4ad29dabd6a6619e41d5e71371268e27465d5d27d46ed6191e96ce86a40dd87958462e0225f1824f4
+  data.tar.gz: eddc23e4ce169c549aa43446e77c7206bc3d20c1bbe52c9472052be98e90fc14fa69e1a92c879b874151717c5befca37b0d8b69905b154d9a769f6f57bb71642

data/CHANGELOG.md

@@ -1,6 +1,11 @@
-## [Unreleased](https://github.com/renuo/hotsheet/compare/v0.1.0..HEAD)
+<!-- ## [Unreleased](https://github.com/renuo/hotsheet/compare/v0.1.0..HEAD) -->
 
-- 
+## [0.1.1](https://github.com/renuo/hotsheet/releases/tag/v0.1.1) (2025-02-03)
+
+- Improve configuration file usage and logic ([@simon-isler])
+- Configure compatible Ruby/Rails versions for testing ([@ignaciosy])
+- Improve flash messages layout ([@ignaciosy])
+- Form inputs are now always visible for usage simplicity ([@ignaciosy])
 
 ## [0.1.0](https://github.com/renuo/hotsheet/releases/tag/v0.1.0) (2024-11-05)
 

data/README.md

@@ -5,6 +5,13 @@
 This gem allows you to mount a view to manage your database using a table view
 where you can edit database records inline.
 
+- Look at and modify your DB within the app itself (no rails console required!).
+- Give controlled DB access to your admin users without having to create CRUD views for each table.
+- Lightweight and fast. We keep usage simple and configuration to the minimum.
+
+![demo_gif](https://github.com/user-attachments/assets/debf45a1-c6d2-4a1f-a734-37559bb095de)
+
+
 ## Installation
 
 Add this line to your application's Gemfile:
@@ -22,6 +29,10 @@ bin/rails g hotsheet:install
 
 ## Usage
 
+After installing, you can directly go to `/hotsheet` within your app by default.
+
+### Configuration
+
 You can configure which models this gem should manage, and specify which
 attributes (database columns) should be editable in the Hotsheet. This can be
 done by configuring the initializer file created by the install command:
@@ -41,16 +52,15 @@ end
 
 See [Contributing Guide] for information on how to set up hotsheet locally.
 
-## Roadmap / Planned Features
+## Roadmap
+
+This is a newly created gem which we are actively working on, and we will firstly focus on:
+
+1. Single-user experience (styles and usability)
+2. Configuration and access permissions
+3. Concurrent users (broadcasting, conflict resolution)
 
-- Fetch all models in the application by default
-- Support live updates (show when someone has the intention to edit a resource) via ActionCable
-- Conflict resolution strategy (locking / merging / latest change etc.)
-- Fine grained access / permissions (cancancan)
-- Type-specific input fields
-- Undo feature (or confirm / discard changes icons)
-- Configure visibility of non-editable (excluded) fields
-- Use importmap-rails for JS dependencies
+Feel free to look at our [planned enhancements](https://github.com/renuo/hotsheet/issues?q=is%3Aopen+is%3Aissue+label%3Aenhancement) or add your own.
 
 ## License
 

data/app/assets/javascripts/hotsheet/controllers/application.js

@@ -1,6 +1,8 @@
 import { Application } from "https://unpkg.com/@hotwired/stimulus/dist/stimulus.js"
 import EditableAttributeController from "./controllers/editable_attribute_controller"
+import FlashController from "./controllers/flash_controller"
 
 window.Stimulus = Application.start()
 
 Stimulus.register("editable-attribute", EditableAttributeController)
+Stimulus.register("flash", FlashController)

data/app/assets/javascripts/hotsheet/controllers/editable_attribute_controller.js

@@ -5,18 +5,12 @@ export default class extends Controller {
     broadcastUrl: String,
     resourceName: String,
     resourceId: Number,
+    resourceInitialValue: String
   }
 
-  static targets = ["readonlyAttribute", "attributeForm", "attributeFormInput"]
+  static targets = ["attributeFormInput"]
 
-  displayInputField() {
-    // this.broadcastEditIntent()
-    this.readonlyAttributeTarget.style.display = "none"
-    this.attributeFormTarget.style.display = "block"
-    this.attributeFormInputTarget.focus()
-  }
-
-  broadcastEditIntent() {
+  broadcastEditIntent() { // TODO: trigger on input focus
     const headers = {
       "Content-Type": "application/json",
       "X-CSRF-Token": document.querySelector("meta[name=csrf-token]").content,
@@ -35,14 +29,8 @@ export default class extends Controller {
     // Prevent standard submission triggered by Enter press
     event.preventDefault()
 
-    const previousValue = this.readonlyAttributeTarget.innerText.trim()
     const newValue = this.attributeFormInputTarget.value
-
-    if (previousValue && previousValue === newValue) {
-      this.readonlyAttributeTarget.style.display = "block"
-      this.attributeFormTarget.style.display = "none"
-      return
-    }
+    if (this.resourceInitialValueValue === newValue) return;
 
     // It's important to use requestSubmit() instead of simply submit() as the latter will circumvent the
     // Turbo mechanism, causing the PATCH request to be submitted as HTML instead of TURBO_STREAM

data/app/assets/javascripts/hotsheet/controllers/flash_controller.js

@@ -0,0 +1,8 @@
+import { Controller } from "https://unpkg.com/@hotwired/stimulus/dist/stimulus.js"
+
+export default class extends Controller {
+  close() {
+    this.element.addEventListener("animationend", () => { this.element.remove(); });
+    this.element.classList.add("closing");
+  }
+}

data/app/assets/stylesheets/hotsheet/application.css

@@ -8,18 +8,28 @@
  */
 
 :root {
-  --bg-color: lightgray;
   --sidebar-width: 12rem;
+  --main-padding-x: 2rem;
+  --main-padding-y: 2rem;
+  
+  --body-font: 400 16px system-ui, Roboto, Helvetica, Arial, sans-serif;
+  --bg-color: lightgray;
+  --success-color: green;
+  --alert-color: yellow;
+  --notice-color: blue;
+  --error-color: red;
+  
+  --td-padding: 0.5rem;
 }
 
 body {
-  font: 400 16px system-ui, Roboto, Helvetica, Arial, sans-serif;
+  font: var(--body-font);
   margin: 0;
 }
 
 main {
   margin-left: var(--sidebar-width);
-  padding: 1rem;
+  padding: var(--main-padding-y) var(--main-padding-x);
 }
 
 aside {
@@ -36,7 +46,7 @@ aside {
     display: flex;
     flex-direction: column;
     margin: 0;
-    padding: 0.25rem;
+    padding: 0.5rem;
 
     a {
       border-radius: 0.5rem;
@@ -65,12 +75,12 @@ table {
   th,
   td {
     border: 1px solid var(--bg-color);
-    padding: 0.5rem;
     text-align: left;
   }
 
   th {
     background-color: var(--bg-color);
+    padding: var(--td-padding);
   }
 
   .readonly-attribute {
@@ -81,6 +91,63 @@ table {
   .editable-input {
     background-color: transparent;
     border: none;
-    width: 100%;
+    font: var(--body-font);
+    padding: var(--td-padding);
+    width: calc(100% - var(--td-padding) * 2);
+  }
+}
+
+.flash-container {
+  position: fixed;
+  display: flex;
+  flex-direction: column;
+  bottom: 1rem;
+  right: 1rem;
+  gap: 1rem;
+  max-width: calc(100% - var(--sidebar-width) - var(--main-padding-x));
+
+  .flash {
+    border-radius: 0.4rem;
+    padding: 0.75rem 1.25rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 1rem;
+
+    &.success {
+      background-color: rgb(from var(--success-color) r g b / 80%);
+    }
+
+    &.alert {
+      background-color: rgb(from var(--alert-color) r g b / 80%);
+    }
+
+    &.notice {
+      background-color: rgb(from var(--notice-color) r g b / 80%);
+    }
+
+    &.error {
+      background-color: rgb(from var(--error-color) r g b / 80%);
+    }
+
+    .btn-close {
+      background-color: transparent;
+      border: none;
+      cursor: pointer;
+      font-size: 1.5rem;
+    }
+
+    &.closing {
+      animation: fade-out 0.5s ease-in forwards; 
+    }
+  }
+}
+
+@keyframes fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
   }
 }

data/app/controllers/hotsheet/pages_controller.rb

@@ -17,7 +17,7 @@ module Hotsheet
       record = model.find params[:id]
 
       if record.update model_params
-        flash[:notice] = t("hotsheet.success", record: model.model_name.human)
+        flash[:success] = t("hotsheet.success", record: model.model_name.human)
       else
         flash[:alert] = t("hotsheet.error", record: model.model_name.human,
                                             errors: record.errors.full_messages.join(", "))
@@ -33,7 +33,7 @@ module Hotsheet
     end
 
     def model_params
-      params.require(model.name.underscore).permit(*model.editable_attributes)
+      params.require(model.name.underscore).permit(*Hotsheet.editable_attributes_for(model: model))
     end
 
     def model

data/app/views/hotsheet/pages/_editable_attribute.html.erb

@@ -1,24 +1,15 @@
 <%# locals: (attribute:, model:, record:) %>
 
 <%= turbo_frame_tag "#{dom_id record}-#{attribute}" do %>
-  <div data-controller="editable-attribute"
-      data-editable-attribute-broadcast-url-value="<%= broadcast_edit_intent_path %>"
-      data-editable-attribute-resource-name-value="<%= model.table_name %>"
-      data-editable-attribute-resource-id-value="<%= record.id %>">
-    <div class="readonly-attribute"
-        data-editable-attribute-target="readonlyAttribute"
-        data-action="click->editable-attribute#displayInputField"
-        role="button">
-      <%= record.public_send attribute %>
-    </div>
-
-    <div data-editable-attribute-target="attributeForm" style="display:none">
-      <%= form_for record, url: "#{root_path}#{model.table_name}/#{record.id}" do |f| %>
-        <%= f.text_field attribute, class: "editable-input", data: {
-          editable_attribute_target: "attributeFormInput",
-          action: "keydown.enter->editable-attribute#submitForm blur->editable-attribute#submitForm"
-        } %>
-      <% end %>
-    </div>
-  </div>
+  <%= form_for record, url: "#{root_path}#{model.table_name}/#{record.id}",
+      html: { 'data-controller': "editable-attribute",
+              'data-editable-attribute-broadcast-url-value': broadcast_edit_intent_path,
+              'data-editable-attribute-resource-name-value': model.table_name,
+              'data-editable-attribute-resource-id-value': record.id,
+              'data-editable-attribute-resource-initial-value-value': record.public_send(attribute) } do |f| %>
+    <%= f.text_field attribute, class: "editable-input", data: {
+      editable_attribute_target: "attributeFormInput",
+      action: "keydown.enter->editable-attribute#submitForm blur->editable-attribute#submitForm"
+    } %>
+  <% end %>
 <% end %>

data/app/views/hotsheet/pages/index.html.erb

@@ -6,7 +6,7 @@
   <table>
     <thead>
       <tr>
-        <% @model.editable_attributes.each do |attribute| %>
+        <% Hotsheet.editable_attributes_for(model: @model).each do |attribute| %>
           <th><%= attribute %></th>
         <% end %>
       </tr>
@@ -14,7 +14,7 @@
     <tbody>
       <% @records.each do |record| %>
         <tr>
-          <% @model.editable_attributes.each do |attribute| %>
+          <% Hotsheet.editable_attributes_for(model: @model).each do |attribute| %>
             <td>
               <%= render "editable_attribute", model: @model, record: record, attribute: attribute %>
             </td>

data/app/views/layouts/hotsheet/_flash.html.erb

@@ -1,7 +1,10 @@
 <%# locals: () %>
 
-<% flash.each do |type, msg| %>
-  <div class='flash <%= type %>'>
-    <span><%= msg %></span>
-  </div>
-<% end %>
+<div class='flash-container'>
+  <% flash.each do |type, msg| %>
+    <div class='flash <%= type %>' data-controller='flash'>
+      <span><%= msg %></span>
+      <button class='btn-close' data-action='click->flash#close'>&times;</button>
+    </div>
+  <% end %>
+</div>

data/app/views/layouts/hotsheet/application.html.erb

@@ -14,8 +14,8 @@
   </head>
   <body>
     <%= render "layouts/hotsheet/sidebar" %>
-    <%= render "layouts/hotsheet/flash" %>
     <main>
+      <%= render "layouts/hotsheet/flash" %>
       <%= yield %>
     </main>
   </body>

data/lib/hotsheet/configuration.rb

@@ -6,14 +6,54 @@ module Hotsheet
 
     config_accessor(:models) { {} }
 
-    def model(name, &block)
-      model_config = ModelConfig.new
-      yield model_config if block
+    def initialize
+      self.models = {}
+    end
+
+    def model(name)
+      model_config = ModelConfig.new(name).tap do |config|
+        yield(config) if block_given?
+        Rails.application.config.to_prepare { config.validate! }
+      end
       models[name.to_s] = model_config
     end
 
     class ModelConfig
-      attr_accessor :included_attributes, :excluded_attributes
+      attr_accessor :included_attributes, :excluded_attributes, :model_name
+
+      def initialize(model_name)
+        @model_name = model_name
+      end
+
+      def validate!
+        return unless ActiveRecord::Base.connection.table_exists?(model_class.table_name)
+        return if included_attributes.nil? && excluded_attributes.nil?
+
+        ensure_only_one_attribute_set
+        validate_attribute_existence
+      end
+
+      private
+
+      def ensure_only_one_attribute_set
+        return if included_attributes.blank? || excluded_attributes.blank?
+
+        raise "Can only specify either included or excluded attributes for '#{model_name}'"
+      end
+
+      def validate_attribute_existence
+        all_attributes = model_class.column_names
+
+        [included_attributes, excluded_attributes].flatten.compact.each do |attr|
+          unless all_attributes.include?(attr.to_s)
+            raise "Attribute '#{attr}' doesn't exist on model '#{model_name}'"
+          end
+        end
+      end
+
+      def model_class
+        model_name.to_s.constantize
+      end
     end
   end
 end

data/lib/hotsheet/editable_attributes.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+module Hotsheet
+  class << self
+    def editable_attributes_for(model:)
+      @editable_attributes_for ||= {}
+      @editable_attributes_for[model] ||= fetch_editable_attributes(model)
+    end
+
+    private
+
+    def fetch_editable_attributes(model)
+      model_config = Hotsheet.configuration.models[model.to_s]
+
+      if model_config&.included_attributes
+        model_config.included_attributes.map(&:to_s)
+      elsif model_config&.excluded_attributes
+        model.column_names - model_config.excluded_attributes.map(&:to_s)
+      else
+        model.column_names
+      end
+    end
+  end
+end

data/lib/hotsheet/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Hotsheet
-  VERSION = "0.1.0"
+  VERSION = "0.1.1"
 end

data/lib/hotsheet.rb

@@ -3,9 +3,10 @@
 require "sprockets/railtie"
 require "turbo-rails"
 
-require "hotsheet/configuration"
 require "hotsheet/engine"
 require "hotsheet/version"
+require "hotsheet/configuration"
+require "hotsheet/editable_attributes"
 
 module Hotsheet
   class Error < StandardError; end
@@ -15,8 +16,8 @@ module Hotsheet
       @configuration ||= Configuration.new
     end
 
-    def configure
-      yield configuration
+    def configure(&block)
+      @configuration = Configuration.new.tap(&block)
     end
 
     def models

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: hotsheet
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.1.1
 platform: ruby
 authors:
 - Renuo AG
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-11-08 00:00:00.000000000 Z
+date: 2025-02-03 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -80,7 +80,7 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: '0'
-description: This gem allows you to mount a view to manage your database using atable
+description: This gem allows you to mount a view to manage your database using a table
   view where you can edit DB records inline.
 email:
 - ignacio.sfeir@renuo.ch
@@ -100,6 +100,7 @@ files:
 - app/assets/javascripts/hotsheet/channels/inline_edit_channel.js
 - app/assets/javascripts/hotsheet/controllers/application.js
 - app/assets/javascripts/hotsheet/controllers/editable_attribute_controller.js
+- app/assets/javascripts/hotsheet/controllers/flash_controller.js
 - app/assets/stylesheets/hotsheet/application.css
 - app/channels/application_cable/channel.rb
 - app/channels/application_cable/connection.rb
@@ -113,7 +114,6 @@ files:
 - app/views/layouts/hotsheet/_sidebar.html.erb
 - app/views/layouts/hotsheet/application.html.erb
 - config/initializers/hotsheet/content_security_policy.rb
-- config/initializers/hotsheet/editable_attributes.rb
 - config/initializers/hotsheet/pagy.rb
 - config/locales/en.yml
 - config/routes.rb
@@ -121,6 +121,7 @@ files:
 - lib/generators/templates/hotsheet.rb
 - lib/hotsheet.rb
 - lib/hotsheet/configuration.rb
+- lib/hotsheet/editable_attributes.rb
 - lib/hotsheet/engine.rb
 - lib/hotsheet/version.rb
 - vendor/assets/stylesheets/hotsheet/pagy.css

data/config/initializers/hotsheet/editable_attributes.rb

@@ -1,43 +0,0 @@
-# frozen_string_literal: true
-
-Rails.application.config.after_initialize do # rubocop:disable Metrics/BlockLength
-  # Only run this initializer when running the Rails server
-  next unless Rails.env.test? || defined? Rails::Server
-
-  Hotsheet.configuration.models.each_key do |model| # rubocop:disable Metrics/BlockLength
-    model.constantize.class_eval do
-      class << self
-        def editable_attributes
-          @editable_attributes ||= fetch_editable_attributes
-        end
-
-        private
-
-        def fetch_editable_attributes
-          config = Hotsheet.configuration.models[name]
-          excluded_attributes = config.excluded_attributes
-
-          if config.included_attributes.present?
-            raise "Can only specify either included or excluded attributes" if excluded_attributes.present?
-
-            attrs_to_s(config.included_attributes)
-          elsif excluded_attributes.present?
-            column_names - attrs_to_s(excluded_attributes)
-          else
-            column_names
-          end
-        end
-
-        def attrs_to_s(attrs)
-          attrs.map do |attr|
-            raise "Attribute '#{attr}' doesn't exist on model '#{name}'" if column_names.exclude? attr.to_s
-
-            attr.to_s
-          end
-        end
-      end
-    end
-
-    model.constantize.editable_attributes
-  end
-end