From 594699fea334a4b6c6d0f03f372fd63cd73f8dc6 Mon Sep 17 00:00:00 2001 From: maikhel Date: Wed, 17 Jul 2024 22:02:27 +0200 Subject: [PATCH] Update README with tasks for Edits in place --- README.md | 204 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 204 insertions(+) diff --git a/README.md b/README.md index e5a9d18..2d73020 100644 --- a/README.md +++ b/README.md @@ -25,3 +25,207 @@ Use `rails s` to run the server. Run `$ rspec` for tests. Run `$ rubocop` for linter check. + +# Knowledge base + +## Turbo Drive + +Links: + +https://hotwired.dev/ + +### Task 1 + +- go to any web page +- analyse content of Network tab in Inspector during navigating through sub-pages +- run workshop app with `rails s` +- analyse content of Network tab in Inspector during navigating through sub-pages +- add at the bottom of `app/javascript/application.js` +``` +Turbo.session.drive = false +``` + +- analyse content of Network tab in Inspector during navigating through sub-pages + +## Turbo Frames + +Links: + +https://rubydoc.info/github/hotwired/turbo-rails/Turbo%2FFramesHelper:turbo_frame_tag +https://apidock.com/rails/ActionView/RecordIdentifier/dom_id + +### Task 1: edit in place for cards +Add turbo frames for cards to enable edit in place + +1. Update `app/views/cards/_card.html.erb` - + wrap all the code into turbo frame tag block: +
+ Updated file: + + ```html + <%= turbo_frame_tag dom_id(card) do %> +
+
+
+ <%= card.title %> +
+
+ <%= link_to edit_card_path(card), class: 'text-default' do %> + + <% end %> + <%= link_to card_path(card), data: { turbo_method: :delete, turbo_confirm: 'Are you sure?' }, class: 'text-danger' do %> + + <% end %> +
+
+
+ <%= card.description %> +
+
+ <% end %> + ``` +
+ + +2. Update `app/views/cards/edit.html.erb` - wrap ‘form’ into turbo frame tag block: +
+ Updated file: + + ```html +

Edit Card

+ +
+ <%= turbo_frame_tag dom_id(@card) do %> +
+ <%= render 'form' %> +
+ <% end %> +
+ ``` +
+ + +### Task 2: edit in place for board columns +Add turbo frames to board column headers to edit column names in place + +1. Update `app/views/board_columns/_column_header.html.erb` - + wrap all the code into turbo frame tag block: +
+ Updated file: + + ```html + <%= turbo_frame_tag dom_id(board_column, :edit) do %> +
+
+ <%= board_column.name %> +
+
+ <%= link_to edit_board_column_path(board_column) do %> +
+ <% end %> + <%= link_to board_column_path(board_column), data: { turbo_method: :delete, turbo_confirm: 'Are you sure?' } do %> +
+ <% end %> +
+
+ <% end %> + ``` +
+ + +2. Update `app/views/board_columns/edit.html.erb` - wrap ‘form’ into turbo frame tag block: +
+ Updated file: + + ```html +

Edit Board Column

+ +
+ <%= turbo_frame_tag dom_id(@board_column, :edit) do %> +
+ <%= render 'form' %> +
+ <% end %> +
+ ``` +
+ +### Task 3: edit in place for boards +Add turbo frames to board headers to edit board name in place + +1. Update `app/views/boards/index.html.erb` - + wrap .card-header into turbo frame tag block (line 17): +
+ Updated file: + + ```html +
+
+ <%= link_to 'New Board', new_board_path, class: 'btn btn-outline-primary invisible' %> +

+ Boards +

+
+ <%= link_to 'New Board', new_board_path, class: 'btn btn-outline-primary' %> +
+
+
+ +
+ <% @boards.each do |board| %> +
+
+ <%= turbo_frame_tag dom_id(board, :edit) do %> +
+
+
+ <%= link_to board.name, board, class: 'link-underline link-underline-opacity-0' %> +
+
+ <%= link_to edit_board_path(board), class: 'text-default' do %> + + <% end %> + <%= link_to board, data: { turbo_method: :delete, turbo_confirm: 'Are you sure?' }, class: 'text-danger' do %> + + <% end %> +
+
+
+ <% end %> +
+
+

+ <%= "Columns: #{board.board_columns.size}" %> +

+

+ <%= "Cards: #{board.board_columns.joins(:cards).count}" %> +

+
+
+
+
+ <% end %> +
+ ``` +
+ + +2. Update `app/views/boards/edit.html.erb` - wrap ‘form’ into turbo frame tag block: +
+ Updated file: + + ```html +

Edit Board

+ +
+ <%= turbo_frame_tag dom_id(@board, :edit) do %> +
+ <%= render 'form' %> +
+ <% end %> +
+ ``` +
+ + +**Branch with all edits-in-place:** `git checkout turbo-frames-edits`