spacerobotTR

Indeed it is. As an update i ended up getting this all working with taglib ruby.

Did you ever resolve this? I just hit the same problem.

What rails version / -js build are you using?

Wow this is awesome! I was just searching yesterday trying to find a datatables alternative. This is great! Would love to see the csv, excel, pdf download buttons worked in. You should package this up as a gem or something!

Solved the issue with this in case anyone else hits this problem. https://github.com/adrienpoly/stimulus-flatpickr

Just went through this. Great tutorial! Everything is working great except one thing for me. I have 3 flatpickr fields for date selection and start time / end time. When the form renders again due to validation errors it wipes out the flatpickr fields. Any thoughts on how I can have them render again when the form rebuilds to display the errors?

Say I have a form that some default information on a request. Start date, end date, access level etc. I want to be able to browse for a csv of employees that contains one field for each row the employee ID, and create a new request for each ID in the csv with the default form data attached.

Is it possible to do that? If so how?

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?