Dale Zak

Thanks Sean, this helps a lot!

With this approach, I don't care about the overall position in the tree at all, only the number of completed Lessons divided by total number of Lessons.

This way Lessons being re-ordered won't affect the Progress of existing users, the main factor for Progress is simplify the number of completed Lessons.

This is exactly what I was looking for and helps avoid a lot of unnecessary complexity. 🙏

I have models for Curriculums, Chapters and Lessons, and would like to track Progress for the user.

Curriculum -> has_many :chapters
Chapter -> has_many :lessons, belongs_to :curriculum
Lesson -> belongs_to :chapter
Progress -> belongs_to :curriculum, belongs_to :chapter, belongs_to :lesson, belongs_to :user

The Curriculums, Chapters and Lessons models have an ordinal for sorting but it's relative to its parent. To calculate percentage complete for a Lesson I'd need an index relative to Curriculum, aka its grandparent.

So I was thinking of storing position in Lesson, setting this value by loops through all Chapters and Lessons for a Toolkit, but now have a couple of questions.

1) If a Lesson is added or removed, or ordinal for Lesson is changed, how should I update the position for all Lessons? For example avoid getting in infinite loop using after_save in Lesson to trigger updating on Curriculum.

2) To set Progress completion, is it better to do:

lesson_index = curriculum.lessons.index(lesson)
progress.completion = (lesson_index.to_f / curriculum.lessons.count.to_f * 100).ceil

or

progress.completion = (lesson.position.to_f / curriculum.lessons.count.to_f * 100).ceil

or

# calculate and store completion inside each Lesson to avoid calculation
progress.completion = lesson.completion

Note, a Lesson is changed rarely where as a Progress is saved a lot, so want to make sure it's performant to avoid unnecessary database updates.

Is there a pattern or strategy for maintaining a grandchild's position like this?

Thanks for the reply Yi Mei Wang! I think what you are suggesting is a good approach.

Here's an article showing how to setup .vue.erb in your Rails app https://blog.codeship.com/vuejs-components-with-coffeescript-for-rails/ so you can make use of Rails helpers like ActionView::Helpers::FormOptionsHelper in your Vue components.

I'm struggling to decide how best to integrate Vue in my Rails 6 app. 🤔

I've read some tutorials that suggest using Rails as API with Vue as frontend. Although I like the idea of doing the entire frontend in Vue leveraging Rails' strong REST API, you also lose a lot of Rails view helpers plus all the other .html.erb magic.

So I'm leaning more towards just sprinkling Vue components into my Rails app for more dynamic components like loading more cards in a list. However wondering how best to handle things like links and images, since you won't have helpers like link_to, image_tag, etc inside your .vue components.

For example, for a blog with a listing of posts in Rails you'd do something like

<div class="card-columns">
    <% @posts.each do |post| %>
        <div class="card mb-4">
            <div class="card-body">
                <h5 class="card-title">
                    <%= link_to post.title, post %>
                </h5>
            </div>
        </div>
    <% end %>
</div>

Where as in Vue you'd do something like

<template>
<div class="card-columns">
    <div class="card mb-4" v-for="post in posts" :key="post.id">
      <div class="card-body">
              <h5 class="card-title">
                    <a :href="'/posts/'+ post.id">{{post.title}}</a>
                </h5>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: ["posts"]
};
</script>
<style scoped>
</style>

Although now you're hardcoding the href which is pretty fragile if the routes change in routes.rb. I much prefer using link_to or post_path in .html.erb, especially when you start using nested resources like post_comment_path(post, comment).

So I'm wondering what are best practises for using Vue in Rails app? If you wanted to just use Vue component for dynamic elements, what strategies are recommended? Also how do you decide when to use .vue vs .vue.erb?