spacerobotTR

Question on this. How would you combine this with other form fields? Like if I wanted to set up some default form fields to fill out. Then upload a csv file with a bunch of users and create records for each user with the form fields that were filled out?

I thought that it ran the controller methods as well. In my show method I have it sorted ASC. When I refresh the page it does sort them correctly, but when I create new ones it always puts the new one at the top of the list.

I have a morph for stimulus reflex that updates a portion of the page when todos are created. What the customer would like to have happen is that when they create new todos they are added to the bottom of the list. Currently they are added at the top. I have tried a bunch of different ways to get it to sort but have been unsuccessful so far. If I manually refresh the page it sorts correctly by adding the order by to the controller, but when I add a new todo it always puts it at the top. Any ideas on how to do this?

def toggle
todo = Todo.find(element.dataset[:id])
todo.update(completed_at: (todo.completed_at? ? nil : Time.current), lastUpdatedBy: current_user.id)
morph "#todo-#{todo.id}", ApplicationController.render(
partial: 'todos/todo',
locals: { todo: todo }
)
end

There is no e in flatpicker. Its flatpickr.

If I wanted to have a site similar to bandcamp where I could upload MP3 tracks are there any gems or recommended ways to check the audio quality, and read/write meta tags to the files?

I didn't realize you had to delegate the current_user. per this: https://docs.stimulusreflex.com/authentication

Trying to slightly build off the stimulus reflex dynamic forms checkbox lesson. I wanted to add the current_user id to the lastUpdateBy field when the checkbox is checked. I have not been able to get it to work though. Any thoughts on what I am doing wrong? If I hard code the value instead of current_user it works. I must just be referencing it wrong.

  def toggle
     todo = Todo.find(element.dataset[:id])
     todo.update(completed_at: (todo.completed_at? ? nil : Time.current), lastUpdatedBy: current_user)
  end

I'm still trying to figure this out. Does anyone have any thoughts on this?

I was working on this today. I am rendering the partial from the compitem page in my case passing through the compitem_id as a locale. I get the error that the ID value is undefined so I'm not sure if I am passing it through correctly. It would be great to see a full working example of this.

Just coming back to this now. I set it up similar to what you did. Instead of products I have compitems. Instead of images I have tasks. It can't seem to find the correct task to update the position on. I get the error

ActiveRecord::RecordNotFound (Couldn't find Task with 'id'=:3 [WHERE "tasks"."compitem_id" = $1]):
13:16:20 web.1 |

13:16:20 web.1 | app/controllers/tasks_controller.rb:81:in "set_task"

Any thoughts on why that is?

drag controller:

     import { Controller } from "stimulus"
     import Sortable from "sortablejs"

     export default class extends Controller {
      connect() {
        this.sortable = Sortable.create(this.element, {
          group: 'shared',
          animation: 150,
          onEnd: this.end.bind(this)
        })
    }
    end(event) {
      let id = event.item.dataset.id
      let compitem_id = event.item.dataset.compitemId

      let data = new FormData()
      data.append("position", event.newIndex + 1)

      let url = this.data.get("url")
      let mapUrl = { compitem_id: compitem_id, id: id}

      url = url.replace(/compitem_id|id/gi, function(matched){
        return mapUrl[matched];
      })

      Rails.ajax({
        url: url,
        type: 'PATCH',
        data: data
      })

    }
  }

Task.html.erb

    <div data-controller="drag" data-drag-url="/compitems/:compitem_id/tasks/:id/move ">
      <div class="border border-gray-400 mx-4 my-4 p-6 w-1/2" data-id="<%= task.id %>">
        <div><%= check_box_tag nil, nil, task.completed_date?, data: { reflex: "click->ExampleReflex#toggle", id: task.id } %></div>
        <div><h3 class="text-gray-900 text-sm leading-5 font-medium truncate"><%= task.description %></h3></div>
        <div><h3 class="text-gray-900 text-sm leading-5 font-medium truncate"><%= task.completed_date %></h3></div>
        </div>
    </div>

In compitems show:

<div class="mt-5 border-t border-gray-200 pt-5">
    <div id="taskitems_wrapper">
        <%= render @compitem.tasks.order(position: :asc), :locals => {:compitem_id => @compitem.id}  %>
    </div>
  </div>

tasks controller:

class TasksController < ApplicationController
  before_action :set_compitem
  before_action :set_task, except: [:create]


  # GET /tasks
  # GET /tasks.json
  def index

    @task = Task.all
  end

  # GET /tasks/1
  # GET /tasks/1.json
  def show
  end

  # GET /tasks/new
  def new
    @task = Task.new
  end

  # GET /tasks/1/edit
  def edit
  end

  # POST /tasks
  # POST /tasks.json
  def create

    @task = @compitem.tasks.create(task_params)
    @task.user_id = current_user.id
    respond_to do |format|
      if @task.save
        format.html { redirect_to @task, notice: 'Task was successfully created.' }
        format.json { render :show, status: :created, location: @task }
      else
        format.html { render :new }
        format.json { render json: @task.errors, status: :unprocessable_entity }
      end
    end
  end

  # PATCH/PUT /tasks/1
  # PATCH/PUT /tasks/1.json
  def update
    respond_to do |format|
      if @task.update(task_params)
        format.html { redirect_to @compitem, notice: 'Task was successfully updated.' }
        format.json { render :show, status: :ok, location: @task }
      else
        format.html { render :edit }
        format.json { render json: @task.errors, status: :unprocessable_entity }
      end
    end
  end

  # DELETE /tasks/1
  # DELETE /tasks/1.json
  def destroy
    @task.destroy
    respond_to do |format|
      format.html { redirect_to tasks_url, notice: 'Task was successfully destroyed.' }
      format.json { head :no_content }
    end
  end

  def move
    @task.insert_at(params[:position].to_i)
    head :ok
  end

  def set_compitem
   @compitem = Compitem.find(params[:compitem_id])

  end

  private
    # Use callbacks to share common setup or constraints between actions.
    def set_task
      @task = @compitem.tasks.find(params[:id])

    end

    # Only allow a list of trusted parameters through.
    def task_params
      params.require(:task).permit(:description, :position, :user_id)
    end
end

Did you ever figure it out? I am still trying to find a solution.

I am getting an error with this method when deploy via capistrano: 01 bash: /home/deploy/.rbenv/bin/rbenv: No such file or directory. Any ideas on how to fix?

I've got a question on this. What if the todo is nested within another model. Like todolist has many todos. I'm having trouble setting up the data-drag-url to be something like /todolist/:id/todos/:id/move. How do you bring the todolist :id?

Say I have an event that starts on a given day and stretches out a month to an end date. Is there a way to only show the start and end date but do not show on the calendar the event listed for all the in between dates?

When I set this up everything works but when I go to another page then hit the back button to go back to the form with flatpickr on it it duplicates the date field and continues to do so each time you transition out then back.

I also cloned this projects repo and it also does it with it. Any thoughts on why it is doing this?

Thanks for the info! I was going by this video where he said the "active" variants were turned off by default to save space. I can create custom classes though.

https://tailwindcss.com/course/hover-focus-and-active-styles/

Do you have to enable the active classes in Tailwind or are they there by default now? I didn't see a tailwind.js file only the postcss config. Is that where you would declare variants for tailwind?

Ahhh yes that worked. Thanks!

From what I understand the "active variant" is not enabled by default? Where exactly do you enable that with rails? Is there another way to add and remove parts of classes to put together an active link depending on where you are in a rails site?

Any info is appreciated!

I have an issue I haven't been able to solve. I have a products page set up with some different sections via bootstrap 4 nav tabs. General Info, Images, Pricing etc. I am trying to make it so that if I upload new product images and it reloads the screen it stays on the images nav tab by setting that tab active. I have been struggling to get that working though. Here is my page:

<%= form_with(model: admin_product, local: true) do |form| %>
 <div class="nav-tabs-top nav-responsive-sm">
   <ul class="nav nav-tabs">
     <li class="nav-item">
       <a class="nav-link active" data-toggle="tab" href="#item-info" >Product Info</a>
     <li class="nav-item">
       <a class="nav-link" data-toggle="tab" href="#item-pricing" >Product Pricing</a>
     </li>
     <li class="nav-item">
       <a class="nav-link" data-toggle="tab" href="#item-images" >Product Images</a>
     </li>      
   </ul>

   <div class="tab-content">

   <div class="tab-pane fade show active" id="item-info">
     Info
   </div>

   <div class="tab-pane fade" id="item-pricing">
     Pricing
   </div>

   <div class="tab-pane fade" id="item-images">
     Images
   </div>  

 </div> 
<% end %> 

Any ideas on how I can set this up?