Format js

.prettierrc

@@ -0,0 +1,13 @@
+{
+  "arrowParens": "always",
+  "bracketSameLine": true,
+  "bracketSpacing": true,
+  "endOfLine": "lf",
+  "printWidth": 80,
+  "quoteProps": "consistent",
+  "semi": false,
+  "singleQuote": false,
+  "tabWidth": 2,
+  "trailingComma": "all",
+  "useTabs": false
+}

README.md

@@ -44,8 +44,6 @@ end
 
 Finally, you will need to create a configuration file to specify which models you want to manage with Hotsheet.
 
-
-
 ## TODO
 
 - Support live updates (show when someone has the intention to edit a resource) via ActionCable

app/assets/javascripts/hotsheet/channels/consumer.js

@@ -1,3 +1,3 @@
-import { createConsumer } from "https://unpkg.com/@rails/actioncable@7.1.3-4/app/assets/javascripts/actioncable.esm.js";
+import { createConsumer } from "https://unpkg.com/@rails/actioncable@7.1.3-4/app/assets/javascripts/actioncable.esm.js"
 
-export default createConsumer();
+export default createConsumer()

app/assets/javascripts/hotsheet/channels/inline_edit_channel.js

@@ -1,3 +1,3 @@
-import consumer from "channels/consumer";
+import consumer from "channels/consumer"
 
-consumer.subscriptions.create({ channel: "InlineEditChannel" });
+consumer.subscriptions.create({ channel: "InlineEditChannel" })

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

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

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

@@ -1,56 +1,57 @@
-import {
-    Controller,
-} from "https://unpkg.com/@hotwired/stimulus/dist/stimulus.js";
+import { Controller } from "https://unpkg.com/@hotwired/stimulus/dist/stimulus.js"
 
 export default class extends Controller {
-    static values = {
-        broadcastUrl: String,
-        resourceName: String,
-        resourceId: Number
-    };
-
-    static targets = [
-      'readonlyAttribute',
-      'attributeForm',
-      'attributeFormInput'
-    ];
-
-    displayInputField() {
-        this.broadcastEditIntent();
-        this.readonlyAttributeTarget.style.display = 'none';
-        this.attributeFormTarget.style.display = 'block';
-        this.attributeFormInputTarget.focus();
+  static values = {
+    broadcastUrl: String,
+    resourceName: String,
+    resourceId: Number,
+  }
+
+  static targets = ["readonlyAttribute", "attributeForm", "attributeFormInput"]
+
+  displayInputField() {
+    this.broadcastEditIntent()
+    this.readonlyAttributeTarget.style.display = "none"
+    this.attributeFormTarget.style.display = "block"
+    this.attributeFormInputTarget.focus()
+  }
+
+  broadcastEditIntent() {
+    const headers = new Headers()
+    headers.append("Content-Type", "application/json")
+    headers.append(
+      "X-CSRF-Token",
+      document.querySelector("meta[name=csrf-token]").content,
+    )
+
+    const data = JSON.stringify({
+      broadcast: {
+        resource_name: this.resourceNameValue,
+        resource_id: this.resourceIdValue,
+      },
+    })
+
+    fetch(this.broadcastUrlValue, {
+      method: "POST",
+      headers: headers,
+      body: data,
+    }).then()
+  }
+
+  submitForm(event) {
+    // 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
     }
 
-    broadcastEditIntent() {
-        const headers = new Headers();
-        headers.append("Content-Type", "application/json");
-        headers.append("X-CSRF-Token", document.querySelector("meta[name=csrf-token]").content);
-
-        const data = JSON.stringify({
-            broadcast: {
-                resource_name: this.resourceNameValue,
-                resource_id: this.resourceIdValue
-            }
-        });
-
-        fetch(this.broadcastUrlValue, { method: "POST",  headers: headers,  body: data }).then();
-    }
-
-    submitForm(event) {
-        // 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;
-        }
-
-        // 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
-        this.attributeFormInputTarget.form.requestSubmit();
-    }
+    // 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
+    this.attributeFormInputTarget.form.requestSubmit()
+  }
 }

app/assets/stylesheets/hotsheet/application.css

@@ -36,14 +36,14 @@ aside {
     display: flex;
     flex-direction: column;
     margin: 0;
-    padding: .25rem;
+    padding: 0.25rem;
 
     a {
-      border-radius: .5rem;
+      border-radius: 0.5rem;
       color: green;
       font-weight: 700;
       overflow: hidden;
-      padding: .5rem;
+      padding: 0.5rem;
       text-decoration: none;
       text-overflow: ellipsis;
       white-space: nowrap;
@@ -62,9 +62,10 @@ h1 {
 table {
   border-collapse: collapse;
 
-  th, td {
+  th,
+  td {
     border: 1px solid var(--bg-color);
-    padding: .5rem;
+    padding: 0.5rem;
     text-align: left;
   }