Order paths by date and time, in component

I've never tried multiple field order outside databases. Have you tried doing it through query?

I've never tried multiple field order outside databases

Hey @bugsysha , what do you mean with outside the database?

How would it look like through a query? We would merge date and time and then order it by this query? ->format('Y-m-d H:i:s')

->orderBy('name_of_the_date_column')
->orderBy('name_of_the_time_column');

Yes that one would easily work through the Controller, but I am ordering the paths within the component.

computed: {
        orderedPaths: function () {
            return _.orderBy(this.paths ? this.paths : [], 'date', 'asc')->orderBy(this.paths ? this.paths : [], 'time', 'asc')
        }
},

// gives me an error while compiling (Unexpected token on the arrow (->))

-> is for PHP and not for JavaScript. What I've suggested is for PHP/Laravel.

Could I create somehow a new merged column on the Model (Path.php), where I concatenate date and time as a DateTime string, and then check on it within the computation?

Could I create somehow a new merged column on the Model (Path.php), where I concatenate date and time as a DateTime string, and then check on it within the computation?

You could but there is no need cause if you go with Laravel then use database feature for that.

Javascript would look something like

return this.paths.sort((a, b) => {
    return a.date - b.date || a.time - b.time;
});

Also note that this will change the order in your this.paths permanently. If you want to go with nondestructive approach then you can use

return [...this.paths].sort((a, b) => {
    return a.date - b.date || a.time - b.time;
});

Reason why I do not like sorting in JavaScript is that

[7,1,10,20].sort()

will return

[1,10,20,7]

Thank you @bugsysha

But I am already passing this.paths to the Component as data(), then I compute them and show them within the component view.

Component

<template>

<div v-for="path in orderedPaths">
... show information, in ordered computation 
</div>

</template>
data() {
        return {  
            path: null,
            paths: this.session.paths ? this.session.paths : [],  
        }
    },
computed: {
        orderedPaths: function () {
            return _.orderBy(this.paths ? this.paths : [], 'date', 'asc')
        }
},

Why do you need paths and orderedPaths especially considering that you are getting paths from this.session?

To order all the paths based on the date, within the component. This is a component, where I can create paths, which will be entered to the v-for loop, ordered by the date. Therefore I am getting all paths from the Session Model, and then push the newly created path to the view.

This won't order the paths in real time, but after a refresh this.paths is then ordered.

But you can access directly this.session.paths from orderedPaths? So no need for either paths. Right?

Also I'm bit lost why none of my suggestions work?

Sorry for the confusion @bugsysha

paths_table has id, path, date, time

Currently I get all paths correctly ordered by date through

view:

<path-component :session="{{$session}}"></path-component>

component:

computed: {
        orderedPaths: function () {
            return _.orderBy(this.paths ? this.paths : [], 'date', 'asc')
        }
},

I just wanted to add an additional orderBy for the time to my orderedPaths computation.

Tomorrow I have to rethink the Component. One for the creations of paths and one where I get all paths through a PathResource. Currently I am failing to trigger eloquent relationships within the vue component.

I still do not see a reason why this wouldn't work?

computed: {
    orderedPaths: function () {
        return [...this.paths].sort((a, b) => a.date - b.date || a.time - b.time);
    }
},

Reason why I do not like sorting in JavaScript is that

It works, I have just tried it, but the reason why you don't like it, is true. The order behavior is weird.

@splendidkeen so it is solved?

Thank you @bugsysha

It works, but as you mentioned [7,1,10,20].sort() will return [1,10,20,7]

@splendidkeen move that sorting to database or PHP.

Now when I think about this did you maybe wanted something like this

return [...this.paths].sort((a, b) => `${a.date} ${a.time}` - `${b.date} ${b.time}`);

I tried it, and it returns

 Error in render: "TypeError: Invalid attempt to spread non-iterable instance"

but I think this one makes more sense. Basically, if I have paths like:

2020-01-22, 12:00 // if this has been created before the one below, it will still be in front of the one below, even though 10:00 is less than 12:00

2020-01-22, 10:00

It is saying that this.paths is not an array. Have you changed that part? If it is changed you can paste here all related changes in the component.

No changes to this.paths

data() {
        return {  
            path: null,
            paths: this.session.paths ? this.session.paths : [],  
        }
    },

Seems like there maybe some point in the lifecycle of this component where this.paths is not an array.

If this works

return [...this.paths].sort((a, b) => a.date - b.date || a.time - b.time);

then this should work also

return [...this.paths].sort((a, b) => `${a.date} ${a.time}` - `${b.date} ${b.time}`);

return [...this.paths].sort((a, b) => a.date - b.date || a.time - b.time);

Now I get the same error for the first line, weird

Try this

return [...this.paths].sort((a, b) => {
    return `${a.date} ${a.time}` - `${b.date} ${b.time}`;
});

If the template string is not working then

return [...this.paths].sort((a, b) => {
    return a.date + ' ' + a.time - b.date + ' ' + b.time;
});

or even back

return [...this.paths].sort(function(a, b) {
    return a.date + ' ' + a.time - b.date + ' ' + b.time;
});

... spread should work since you've marked answer with it as best.

It works, sorry for the confusion, I had a typo.

But the orderedPaths, are now just ordered by created_at. Didn't recognize it first, sorry.

It works, sorry for the confusion, I had a typo.

No problem.

But the orderedPaths, are now just ordered by created_at. Didn't recognize it first, sorry.

So you are saying that after all current "best answer" is the correct logic you need?

So you are saying that after all current "best answer" is the correct logic you need?

No @bugsysha , as the paths are now ordered in the way I created them, so basically triggering the created_at somehow, id 1, id 2, id 3, instead of getting the date and time record of a path, to order the paths.