Enhancement: Add column width setting

[Koc]

This PR adds possibility to configure column width on a table level. Closes #35

🔍 Preview

Configure width:

Column with fixed width:

TODO:

• Add extra texts

[enjeck]

• Add extra texts

I don't think we need frontend tests for this. Unless you meant something else?

[Koc]

@enjeck I've added Behat tests to make sure that we able to store value of the new property and fetch it back.

PR rebased, conflicts solved, tests added. So, please, review

[AIlkiv]

Thanks for the PR. I left a few comments.

[AIlkiv]

If I understand correctly, the Array type is when it is empty. Can you correct it so that the type is only Object?

[Koc]

It will not work as expected then because server responds with [] instead of {} if width not defined yet.

I had an attempt to return new \stdClass() to always respond {} but in this case we can't properly serialize response and there is http 500 error occurs.

[silverkszlo]

In EditColumn.vue, we create a shallow copy of this.column in data() using

editColumn: Object.assign({}, this.column)

As a result, editColumn.customSettings still points to the same object as this.column.customSettings, so any changes to it will also affect the original prop. Since props should be read-only, we should instead create a deep copy, for example:

editColumn: JSON.parse(JSON.stringify(this.column))

This ensures that modifying editColumn does not mutate the original prop. See also: https://stackoverflow.com/a/52467000 and here: https://dev.to/hkp22/javascript-shallow-copy-vs-deep-copy-examples-and-best-practices-3k0a

[silverkszlo]

Looks nice, thanks for that! I’ve only reviewed the frontend code and suggested a few small changes. I’ve tested the UI in Firefox and Chromium, and it generally looks good, with just a few minor issues noted in the comments.

[Koc]

@silverkszlo I've updated PR according to your suggestions.

Min width changed to 40 50px. Extracted constants for min/max values. Used json decode for deep copy.

Placehoder contains boundaries

Extracted separate property