Hi! I'm with a problem, due to my lack of ideas and experience... And I hope you guys can help me!

I have a TV shows website project (only to organize, not to watch), and I having some difficulty setting the relationships between Episodes and Users.

Here are my relationship pivot table:

// EpisodeUserTable
id
user_id
episode_id
watched: boolean
collected: boolean
ignored: boolean
timestamps

And with vue, on a series page, I get the episodes with users (if user = logged user), so I can show in the episodes list if it was watched, collected or ignored. Almost like this:

Laravel: /api/series/1/episodes will return an array of episodes and each one with an array of users. IF the logged user has any relationship with the episode, it will be a 1 length array with the user information and pivot table, if not, the array will be blank.

Episodio::where('serie_id', $serie_id)->with(['usuarios' => function($q) use($usuario) {
                return $q->where('user_id', $usuario->id);
            }])->orderBy('temporada', 'desc')
            ->orderBy('episodio', 'asc')
            ->get();;

VueJS:

if (episode.users[0] && episode.users[0].pivot.watched) ... // episode is watched

And so on...

So the first problem is: I'm not sure this is the right combination of Laravel and Vue usage. The "If" statement above seems wrong. Any tips?

And the major problem is... I want to be able to tell a user "You watched x episodes" this month. But the timestamps on the pivot table get updated with any kind of relation: watches, collectcs and ignores. At first, I thought about doing something like this:

user_id
episode_id
watched: boolean
collected: boolean
ignored: boolean
watched_at: timestamp
collected_at: timestamp
ignored_at: timestamp

But I just couldn't set the dates above as Carbon objects. I followed many tutorials and it went wrong... I'm also not sure this is the right way.

Right now I'm also thinking about this:

user_id
episode_id
type
mark
timestamps

Example:

user_id: 1
episode_id: 1
type: watched
mark: true

But it would duplicate the data, because when the user has it watched AND collected, it would create two entries:

user_id: 1
episode_id: 1
type: collected
mark: true

Beside, it has another problem: how would I do with the Vuejs counterpart? Any tips?

So this is my problem. I'd appreciate any help!

Thank you.