b4um_generators 0.4.2 → 0.5.0

data/lib/generators/b4um/todo/templates/tasks_controller.rb.tt

@@ -0,0 +1,190 @@
+class <%= class_name.pluralize %>Controller < ApplicationController
+<% if owner? %>
+  before_action :require_todo_owner
+<% end %>
+
+  before_action :set_task, only: %i[update destroy]
+
+  def index
+    @task = <%= class_name %>.new
+    @incomplete_tasks = tasks_scope.where(complete: false).order(created_at: :desc)
+    @complete_tasks = tasks_scope.where(complete: true).order(updated_at: :desc)
+
+    @total_tasks = @incomplete_tasks.size + @complete_tasks.size
+    @completed_tasks = @complete_tasks.size
+  end
+
+  def create
+    @task = tasks_scope.new(task_params)
+
+    if @task.save
+      respond_to do |format|
+        format.turbo_stream do
+          load_tasks
+
+          render turbo_stream: [
+            turbo_stream.prepend(
+              "incomplete_tasks",
+              partial: "<%= plural_table_name %>/task",
+              locals: { task: @task }
+            ),
+            turbo_stream.replace(
+              "todo_progress",
+              partial: "<%= plural_table_name %>/progress"
+            ),
+            turbo_stream.update(
+              "incomplete_tasks_count",
+              "(#{@incomplete_tasks.size})"
+            ),
+            turbo_stream.update(
+              "incomplete_tasks_empty",
+              ""
+            )
+          ]
+        end
+
+        format.html do
+          redirect_to <%= plural_table_name %>_path,
+                      notice: "Aufgabe wurde erstellt."
+        end
+      end
+    else
+      load_tasks
+
+      respond_to do |format|
+        format.turbo_stream do
+          render :index,
+                formats: :html,
+                status: :unprocessable_entity
+        end
+
+        format.html do
+          render :index, status: :unprocessable_entity
+        end
+      end
+    end
+  end
+
+  def update
+    if @task.update(complete: !@task.complete)
+      respond_to do |format|
+        format.turbo_stream do
+          load_tasks
+
+          render turbo_stream: [
+            turbo_stream.remove(
+              helpers.dom_id(@task)
+            ),
+            turbo_stream.prepend(
+              @task.complete? ? "complete_tasks" : "incomplete_tasks",
+              partial: "<%= plural_table_name %>/task",
+              locals: { task: @task }
+            ),
+            turbo_stream.replace(
+              "todo_progress",
+              partial: "<%= plural_table_name %>/progress"
+            ),
+            turbo_stream.update(
+              "incomplete_tasks_count",
+              "(#{@incomplete_tasks.size})"
+            ),
+            turbo_stream.update(
+              "complete_tasks_count",
+              "(#{@complete_tasks.size})"
+            ),
+            turbo_stream.update(
+              "incomplete_tasks_empty",
+              @incomplete_tasks.empty? ? '<p class="b4um-todo__empty">Keine offenen Aufgaben. Sehr gut!</p>'.html_safe : ""
+            ),
+            turbo_stream.update(
+              "complete_tasks_empty",
+              @complete_tasks.empty? ? '<p class="b4um-todo__empty">Noch keine erledigten Aufgaben.</p>'.html_safe : ""
+            )
+          ]
+        end
+
+        format.html do
+          redirect_to <%= plural_table_name %>_path
+        end
+      end
+    else
+      redirect_to <%= plural_table_name %>_path,
+                  alert: "Aufgabe konnte nicht aktualisiert werden."
+    end
+  end
+
+  def destroy
+    @task.destroy!
+
+    respond_to do |format|
+      format.turbo_stream do
+        load_tasks
+
+        render turbo_stream: [
+          turbo_stream.remove(
+            helpers.dom_id(@task)
+          ),
+          turbo_stream.replace(
+            "todo_progress",
+            partial: "<%= plural_table_name %>/progress"
+          ),
+          turbo_stream.update(
+            "incomplete_tasks_count",
+            "(#{@incomplete_tasks.size})"
+          ),
+          turbo_stream.update(
+            "complete_tasks_count",
+            "(#{@complete_tasks.size})"
+          ),
+          turbo_stream.update(
+            "incomplete_tasks_empty",
+            @incomplete_tasks.empty? ? '<p class="b4um-todo__empty">Keine offenen Aufgaben. Sehr gut!</p>'.html_safe : ""
+          ),
+          turbo_stream.update(
+            "complete_tasks_empty",
+            @complete_tasks.empty? ? '<p class="b4um-todo__empty">Noch keine erledigten Aufgaben.</p>'.html_safe : ""
+          )
+        ]
+      end
+
+      format.html do
+        redirect_to <%= plural_table_name %>_path,
+                    notice: "Aufgabe wurde gelöscht."
+      end
+    end
+  end
+
+  private
+
+  def tasks_scope
+<% if owner? %>
+    <%= current_owner_method %>.tasks
+<% else %>
+    <%= class_name %>.all
+<% end %>
+  end
+
+  def set_task
+    @task = tasks_scope.find(params[:id])
+  end
+
+  def task_params
+    params.require(:<%= singular_table_name %>).permit(:name)
+  end
+
+  def load_tasks
+    @incomplete_tasks = tasks_scope.where(complete: false).order(created_at: :desc)
+    @complete_tasks = tasks_scope.where(complete: true).order(updated_at: :desc)
+
+    @total_tasks = @incomplete_tasks.size + @complete_tasks.size
+    @completed_tasks = @complete_tasks.size
+  end
+
+<% if owner? %>
+  def require_todo_owner
+    return if <%= current_owner_method %>
+
+    head :unauthorized
+  end
+<% end %>
+end

data/lib/generators/b4um/todo/templates/todo.css

@@ -0,0 +1,347 @@
+/* -------------------------------------------------------
+   b4um Todo
+------------------------------------------------------- */
+
+.b4um-todo {
+  max-width: 820px;
+  margin: 3rem auto;
+  padding: 0;
+
+  color: var(--todo-text);
+}
+
+/* -------------------------------------------------------
+   Header
+------------------------------------------------------- */
+
+.b4um-todo__header {
+  margin-bottom: 2.5rem;
+}
+
+.b4um-todo__header h1 {
+  margin: 0 0 0.5rem;
+  font-size: clamp(2rem, 4vw, 2.8rem);
+  font-weight: 700;
+  letter-spacing: -0.04em;
+}
+
+.b4um-todo__header p {
+  margin: 0;
+  color: var(--todo-muted);
+  font-size: 1rem;
+}
+
+/* -------------------------------------------------------
+   Progress
+------------------------------------------------------- */
+
+.b4um-todo__progress {
+  padding: 1.75rem;
+  margin-bottom: 2rem;
+
+  background: var(--todo-surface);
+  border: 1px solid var(--todo-border);
+  border-radius: 18px;
+}
+
+.b4um-todo__progress-info {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+
+  margin-bottom: 1rem;
+}
+
+.b4um-todo__progress-info h2 {
+  margin: 0;
+  font-size: 1.1rem;
+  font-weight: 600;
+}
+
+.b4um-todo__progress-info span {
+  color: var(--todo-muted);
+  font-size: 0.9rem;
+}
+
+.b4um-todo__progress-bar {
+  height: 9px;
+  overflow: hidden;
+
+  background: var(--todo-border);
+  border-radius: 999px;
+}
+
+.b4um-todo__progress-fill {
+  height: 100%;
+  background: var(--todo-primary);
+  border-radius: inherit;
+
+  transition: width 0.3s ease;
+}
+
+.b4um-todo__progress-percentage {
+  margin: 0.75rem 0 0;
+  text-align: right;
+
+  color: var(--todo-muted);
+  font-size: 0.85rem;
+}
+
+/* -------------------------------------------------------
+   Form
+------------------------------------------------------- */
+
+.b4um-todo__form {
+  margin-bottom: 2.5rem;
+}
+
+.b4um-todo__form h2 {
+  margin: 0 0 1rem;
+  font-size: 1.15rem;
+  font-weight: 600;
+}
+
+.b4um-todo__form-fields {
+  display: flex;
+  gap: 0.75rem;
+}
+
+.b4um-todo__form-fields input[type='text'] {
+  flex: 1;
+  min-width: 0;
+  padding: 0.9rem 1rem;
+
+  background: var(--todo-background);
+  color: var(--todo-text);
+
+  border: 1px solid var(--todo-border);
+  border-radius: 12px;
+
+  font: inherit;
+  outline: none;
+
+  transition: border-color 0.2s ease;
+}
+
+.b4um-todo__form-fields input[type='text']:focus {
+  border-color: var(--todo-primary);
+}
+
+.b4um-todo__button {
+  padding: 0.9rem 1.5rem;
+
+  background: var(--todo-primary);
+  color: var(--b4um-text-on-primary);
+
+  border: 0;
+  border-radius: 12px;
+
+  font: inherit;
+  font-weight: 600;
+  cursor: pointer;
+
+  transition: background 0.2s ease;
+}
+
+.b4um-todo__button:hover {
+  background: var(--todo-primary-hover);
+}
+
+.b4um-todo__errors {
+  margin-top: 0.75rem;
+  color: var(--todo-danger);
+  font-size: 0.9rem;
+}
+
+/* -------------------------------------------------------
+   Sections
+------------------------------------------------------- */
+
+.b4um-todo__section {
+  margin-bottom: 2.5rem;
+}
+
+.b4um-todo__section h2 {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+
+  margin: 0 0 1rem;
+
+  font-size: 1.15rem;
+  font-weight: 600;
+}
+
+.b4um-todo__section h2 span {
+  color: var(--todo-muted);
+  font-size: 0.9rem;
+  font-weight: 400;
+}
+
+.b4um-todo__list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.65rem;
+}
+
+.b4um-todo__empty {
+  padding: 1.5rem;
+
+  background: var(--todo-surface);
+  border: 1px dashed var(--todo-border);
+  border-radius: 12px;
+
+  color: var(--todo-muted);
+  text-align: center;
+}
+
+/* -------------------------------------------------------
+   Task Item
+------------------------------------------------------- */
+
+.b4um-todo__item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+
+  padding: 1rem 1.15rem;
+
+  background: var(--todo-background);
+  border: 1px solid var(--todo-border);
+  border-radius: 12px;
+
+  transition:
+    border-color 0.2s ease,
+    background 0.2s ease;
+}
+
+.b4um-todo__item:hover {
+  border-color: var(--todo-primary);
+}
+
+.b4um-todo__item-content {
+  display: flex;
+  align-items: center;
+  gap: 0.9rem;
+
+  min-width: 0;
+}
+
+.b4um-todo__item-content form,
+.b4um-todo__item > form {
+  margin: 0;
+}
+
+.b4um-todo__item-name {
+  overflow-wrap: anywhere;
+  line-height: 1.5;
+}
+
+.b4um-todo__item--complete .b4um-todo__item-name {
+  color: var(--todo-muted);
+  text-decoration: line-through;
+}
+
+/* -------------------------------------------------------
+   Checkbox
+------------------------------------------------------- */
+
+.b4um-todo__checkbox {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  width: 25px;
+  height: 25px;
+  padding: 0;
+
+  background: transparent;
+  border: 2px solid var(--todo-border);
+  border-radius: 8px;
+
+  cursor: pointer;
+}
+
+.b4um-todo__checkbox:hover {
+  border-color: var(--todo-primary);
+}
+
+.b4um-todo__item--complete .b4um-todo__checkbox {
+  background: var(--todo-success);
+  border-color: var(--todo-success);
+  color: #ffffff;
+}
+
+.b4um-todo__checkbox-icon {
+  font-size: 0.9rem;
+  font-weight: 700;
+}
+
+/* -------------------------------------------------------
+   Delete Button
+------------------------------------------------------- */
+
+.b4um-todo__delete {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  width: 30px;
+  height: 30px;
+  padding: 0;
+
+  background: transparent;
+  color: var(--todo-muted);
+
+  border: 0;
+  border-radius: 8px;
+
+  font-size: 1.5rem;
+  cursor: pointer;
+
+  transition:
+    color 0.2s ease,
+    background 0.2s ease;
+}
+
+.b4um-todo__delete:hover {
+  background: #fff0f0;
+  color: var(--todo-danger);
+}
+
+/* -------------------------------------------------------
+   Responsive
+------------------------------------------------------- */
+
+@media (max-width: 600px) {
+  .b4um-todo {
+    margin: 2rem auto;
+    padding: 0 1rem;
+  }
+
+  .b4um-todo__progress {
+    padding: 1.25rem;
+  }
+
+  .b4um-todo__form-fields {
+    flex-direction: column;
+  }
+
+  .b4um-todo__button {
+    width: 100%;
+  }
+
+  .b4um-todo__item {
+    padding: 0.85rem;
+  }
+}
+
+/* -------------------------------------------------------
+   Todo form button alignment
+------------------------------------------------------- */
+
+.b4um-todo__form-fields .b4um-todo__button {
+  align-self: center;
+}

data/lib/generators/b4um/todo/templates/todo_controller.js

@@ -0,0 +1,35 @@
+import { Controller } from '@hotwired/stimulus'
+
+// Connects to data-controller="b4um-todo"
+export default class extends Controller {
+  static targets = ['input', 'submit']
+
+  connect() {
+    this.updateSubmitState()
+  }
+
+  resetAfterSuccess(event) {
+    if (!event.detail.success) return
+
+    const contentType = event.detail.fetchResponse?.contentType || ''
+
+    if (!contentType.includes('turbo-stream')) return
+
+    this.reset()
+  }
+
+  updateSubmitState() {
+    if (!this.hasInputTarget || !this.hasSubmitTarget) return
+
+    const value = this.inputTarget.value.trim()
+
+    this.submitTarget.disabled = value.length === 0
+  }
+
+  reset() {
+    if (!this.hasInputTarget) return
+
+    this.inputTarget.value = ''
+    this.updateSubmitState()
+  }
+}