spacerobotTR

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?

Question on this. Say I have a join to another via an integer ID. I want to display in a bucket the description of the ID vale from the other table. How do you do that?

Project joins to project_statuses with proj_status_id. I can return the proj_status_ids in the bucket but what I really want is to display the statusdescr field I get from the secondary table.

How would I do this?

I think I see what the issue is. It seemed to work fine then stop, work fine then stop etc. What is going on is that to clean up I was deleting comments on the screen. Since that was orphaning the notifications unable to find the comment and then unable to find the project that was causing the 500 error.

Now I am just trying to figure out the best way to destroy any notifications when the comments are deleted.

This was great. I am mostly there but having a strange issue. Instead of forum posts and forum threads I am using comments and projects. When I am trying to pull the notifications and display the count I see a 500 errror in the console:

ActionView::Template::Error (undefined method project' for nil:NilClass):
1: <%= link_to project_path(notification.notifiable.project, anchor: dom_id(notification.notifiable)), class: "dropdown-item #{"unread" if !notification.read_at?}" do %>
2:   <%= notification.actor.username %>
3:   <%= notification.action %>
4:   a <%= notification.notifiable_type.underscore.humanize.downcase %>

Any thoughts on what the issue could be?