What's the best way to make a table in Vue? - datatable

I need to make tables in my project. Early, I used to deal with the Tabulator. But it was in the Thymleaf.
Now, I do a project on Nuxt.js.
I tried a few things in the tabulator and I didn't like the following:
1. I couldn't set the 'method' on the 'cellClick' event in the column.
2. I couldn't use this.$axios in function callbacks. $axios undefined in functions callbacks.
3. How much do I understand the Tabulator uses jQuery? I think it isn't good.
In general, it seemed to me that the tabulator is not quite intended for use in Vue.
If I'm wrong, correct me.
I try to use Bootstrap-Vue's table component, nut I can't find how to do an editable table, to do copy/paste clipboard, how to do grouping row.
In general, I'm asking you to help me with the selection of the tool to build the tables.
I need a few major opportunities:
Copy/paste/load tables from Excel or clipboard, because I will need inputting a big table and input each cell difficult task.
A grouping row.
An editable tables

Tabulator dosnt use any jQuery it is pure JavaScript with zero dependencies.
It also has full Vue Support and a fully functioning Vue Component
It has Clipboard Support
and Row Grouping
and a full suite of built in Data Editors

Related

Ember sorting/filter table

I am looking to add a filter/sorter table into the application. I need to choose which column can be sorted - and provide change of class glyphs up/down arrows on the columns. The filter box also needs to be outside of the table.
I tried looking at this example, but there are no glyph class changes on the cols and the filter box is inside the table.
http://crodriguez1a.github.io/ember-sort-filter-table/
I looked at this custom solution, but I couldn't see a way of locking the filter to specific cols.
http://www.jarrodctaylor.com/posts/Filter-And-Sort-Tables-In-Ember/
http://emberjs.jsbin.com/yezonaxu/12/edit?html,css,js,output
what about this one -- http://onechiporenko.github.io/ember-models-table/v.2/docs/classes/Components.ModelsTableRowFiltering.html
but the problem here - is how to create some custom markup depending on the data.
You could sort and filter your rows using computed properties. For sorting you could use sort macro. For filter you should implement your own logic, cause filter and filterBy macros does not support observing a value used to filter the array. Use the sorted and filtered rows to generate a simple HTML table or pass it to a table component of your choice.
If you will take DataTables and wrap it in ember component (custom code would work better that some generalized 3rd-party wrapper), you can achieve a lot. Including filtering by columns. It's a bit hard way, though - DataTables is big and it's API is a bit complicated. That's if you want client-side filtering.
For server-side filtering approach would be different - you render UI for filters using ember's methods, convert user's choices to string and pass that to API (which should be modified to support filtering) when asking for data.

Is there a way to sort a content query by the value of a field programmatically?

I'm working on a portal based on Orchard CMS. We're using Orchard to manage the "normal" content of the site, as well as to model what's essentially data for a small application embedded in it.
We figured that doing it that way is "recommended" for working in Orchard, and that it would save us duplicating a bunch of effort in features that Orchard already provides, mainly generating a good enough admin UI. This is also why we're using fields wherever possible.
However, for said application, the client wants to be able to display the data in the regular UI in a garden-variety datagrid that can be filtered, sorted, and paged.
I first tried to implement this by cobbling together a page with a bunch of form elements for the filtering, above a projection with filters bound to query string parameters. However, I ran into the following issues with this approach:
Filters for numeric fields crash when the value is missing - as would be pretty common to indicate that the given field shouldn't be considered when filtering. (This I could achieve by changing the implementation in the Orchard source, which would however make upgrading trickier later. I'd prefer to keep anything I haven't written untouched.)
It seems the sort order can only be defined in the administration UI, it doesn't seem to support tokens to allow for the field to sort by to be changed when querying.
So I decided to dump that approach and switched to trying to do this with just MVC controllers that access data using IContentQuery. However, there I found out that:
I have no clue how, if at all, it's possible to sort the query based on field values.
Or, for that matter, how / if I can filter.
I did take a look at the code of Orchard.Projections, however, how it handles sorting is pretty inscrutable to me, and there doesn't seem to be a straightforward way to change the sort order for just one query either.
So, is there any way to achieve what I need here with the rest of the setup (which isn't little) unchanged, or am I in a trap here, and I'll have to move every single property I wish to use for sorting / filtering into a content part and code the admin UI myself? (Or do something ludicrous, like create one query for every sortable property and direction.)
EDIT: Another thought I had was having my custom content part duplicate the fields that are displayed in the datagrids into Hibernate-backed properties accessible to query code, and whenever the content item is updated, copy values from these fields into the properties before saving. However, again, I'm not sure if this is feasible, and how I would be able to modify a content item just before it's saved on update.
Right so I have actually done a similar thing here to you. I ended up going down both approaches, creating some custom filters for projections so I could manage filters on the frontend. It turned out pretty cool but in the end projections lacked the raw querying power I needed (I needed to filter and sort based on joins to aggregated tables which I think I decided I didn't know how I could do that in projections, or if its nature of query building would allow it). I then decided to move all my data into a record so I could query and filter it. This felt like the right way to go about it, since if I was building a UI to filter records it made sense those records should be defined in code. However, I was sorting on users where each site had different registration data associated to users and (I think the following is a terrible affliction many Orchard devs suffer from) I wanted to build a reusable, modular system so I wouldn't have to change anything, ever!
Didn't really work out quite like I hoped, but to eventually answer the question in your title: yes, you can query fields. Orchard projections builds an index that it uses for querying fields. You can access these in HQL, get the ids of the content items, then call getmany to get them all. I did this several years ago, and I cant remember much but I do remember having a distinctly unenjoyable time with it haha. So after you have an nhibernate session you can write your hql
select distinct civr.Id
from Orchard.ContentManagement.Records.ContentItemVersionRecord civr
join civ.ContentItemRecord cir
join ci.FieldIndexPartRecord fipr
join fipr.StringFieldIndexRecord sfir
This just shows you how to join to the field indexes. There are a few, for each different data type. This is the string one I'm joining here. They are all basically the same, with a PropertyName and value field. Hql allows you to add conditions to your join so we can use that to join with the relevant field index records. If you have a part called Group attached directly to your content type then it would be like this:
join fipr.StringFieldIndexRecord sfir
with sfir.PropertyName = 'MyContentType.Group.'
where sfir.Value = 'HR'
If your field is attached to a part, replace MyContentType with the name of your part. Hql is pretty awesome, can learn more here: https://docs.jboss.org/hibernate/orm/3.3/reference/en/html/queryhql.html But I dunno, it gave me a headache haha. At least HQL has documentation though, unlike Orchard's query layer. Also can always fall back to pure SQL when HQL wont do what you want, there is an option to write SQL queries from the NHibernate session.
Your other option is to index your content types with lucene (easy if you are using fields) then filter and search by that. I quite liked using that, although sometimes indexes are corrupted, or need to be rebuilt etc. So I've found it dangerous to rely on it for something that populates pages regularly.
And pretty much whatever you do, one query to filter and sort, then another query to getmany on the contentmanager to get the content items is what you should accept is the way to go. Good luck!
You can use indexing and the Orchard Search API for this. Sebastien demoed something similar to what you're trying to achieve at Orchard Harvest recently: https://www.youtube.com/watch?v=7v5qSR4g7E0

Store translated versions in database for Joomla component

I'm currently developing my first MVC component for Joomla 3.x. All in all I'm bit struggling with language/translation issues in database.
My problem is that I need to store translated content of user generated content which comes from the backend. For example someone enters a new item in German (stored in database) and needs a translation in another language. How to accomplish that in Joomla? I don't like to generate a new item for every different language when the rest is all the same.
I thought about a table "item" and a table "item_language" with that structure (strongly simplified for viewing purposes):
item
id PRIMARY INT
price DOUBLE(4,2)
item_language
itemid PRIMARY INT
language PRIMARY CHAR(5)
name VARCHAR(50)
In item_language I would like to store the different translated versions. In the language field there would be the region code (eg. de-DE) to identify the language.
My problems:
How to display the different (translated) versions in backend?
Is this the right database model?
Any help is appreciated!
You have really found yourself a nice task for a first component in Joomla!
A rather generalist answer:
The database model seems right. Alternatively you could encode in JSON the language data, but this could make later query operations potentially difficult. This way you will only have one table to work with.
As far as I know (if you are using JModel / JTable to manipulate the data) can't do this directly, as JTable is really only designed to manipulate single tables.
What you can do:
For editing: figure a way to represent this graphically ( for your users to see and edit this one to many relationship) and to post this data (language texts as an array) to JModel. In the model you can maintain the desired relationships and save the data using JTable.
Viewing (without editing) shouldn't be an issue, it would be a simple JOIN.
If you are willing to create a basic component on github, I might even give you a hand with JModel / JTable.
I found a way to deal with the things I needed.
Thanks Valentin Despa for guiding me in the right direction :-).
Here the whole procedure (simplified - validations and exact steps omitted):
Define the form fields in the models/forms/site.xml as normal.
In views/site/tmpl/edit.php add self coded Javascript (based on jQuery) to deal with the fields which have content in multiple languages stored as JSON in database.
Clone the original form element and modify the needed attributes (id, name, ...) to display a special version just for the defined languages. As content - extract the JSON for the needed language from original field content and display.
Hide the original field with Javascript and append the customized versions to DOM.
Afterwards in tables/site.php I read the dynamically generated content withJInput and build together the original field by generating JSON and saving to database.
It's working like expected.

How to process 1 form across 2 controllers/models in MVC (CFWheels)?

I'm an old CFML developer, new to CF on Wheels and MVC programming in general. I'm picking it up pretty quickly, but one thing that isn't evident to me is how one can offer a form to optionally update multiple db table records (models). I'd specifically like to set up a tabbed form for User info and User Profile info, where the former is required and the latter is not. This data is stored in two different one-to-one tables. What's the setup I need in order to call two "new" or "edit" views, run 2 "create" or "update" procedures, affecting two different tables. Or am I thinking about this all wrong.
Update: Adding some more info on what I'm trying to do. To keep it simple, I'll stick to 2 tabs and 2 tables, though I'm really looking at at least 3 in this instance.
So I've got a Users table and a UserProfiles table, and I've got models named User.cfc and UserProfile.cfc that are related 1-to-1, with UserProfile dependent on User. Pretty standard stuff. For each I've got controllers: Users.cfc and UserProfiles.cfc, each of those containing actions. add, edit, create, update, doing the obvious stuff (add and edit display forms). I have partials that display the add/edit form fields for each, so that's already prepared. Now, I want to create what is effectively a single add/edit form that can update both tables at the same time. The tabs don't really matter; effectively it could all be on one page.
So conceptually I'm doing something like:
#startFormTag(action=???)#
#includePartial("form_user_add-edit")#
#includePartial("form_userprofile_add-edit")#
<button type="submit" class="btn">#operation#</button>
#endFormTag()#
Do I need to create a separate controller action that basically combines the create and update actions for two different controllers?
Thanks in advance from a pleased and eager CFWheels newbie...
Brian
If all of the data is related through hasMany or hasOne associations, I'd recommend looking at nested properties.
http://cfwheels.org/docs/1-1/chapter/nested-properties
If you're a newbie though, you may want to refrain from this until you've got something simpler worked out.
I guess you are talking about two models representing these two tables, possibly associated using hasOne. Models allow you to validate data, this makes controller much simpler. This way you could create two forms under two tabs, and keep record's primary key as hidden field. Controller could run the validation and re-display the forms (partials may help)... Hold on, I am just going through the reference.
I realize this answer is pretty generic, as well as your question. I suggest you to go ahead and try something, see how it works.
After that update your question with code samples and ask if you have some specific problems. For example, validation and displaying errors in CFWheels may be a bit tricky.

List of values with multiple return items

List of values, with multiple columns and multiple return values in Apex. It's a question i've seen around the web quite a few times, but i'm struggling with it aswell.
Coming from Oracle Forms, and now migrating forms to Apex, this is a feature i'm missing quite well. It also still baffles me a bit how enormously basic the built-in popup-lov is.
For example, right now i'm making some smaller forms, each having about 4 or 5 multirecord columns, for not much else than having 2 values linked up. Column 1: some value, used in sap for example, column 2: the id of a record in the oracle database (another table than the base table for the block). On column 2 there is an lov, with validate from list, and displays 3 columns, but also returns 3 columns. So you can choose a record from the lov, and automatically, the id will be filled in, aswell as the 'name' and 'description' for said id. Column 1 and column 2 form the base table of the block.
Now, in Apex, i'd loose this functionality by default. So for now, i've mostly coded the onchange event in javascript, and get the values with an ajax callback process. In the popup i concatenate the 3 columns. This however looks stupid (in my most humble opinion) when you want to force the user to pick a value from the lov ('Not Enterable, Show Display Value and Store Return Value'): the item will contain the concatenated value used in the lov, not just the id i'd much rather show - plus, i'll already have my other 2 fields filled in by the ajax callback.
It rather stings a bit to have to deal with this. The users are used to working with these old (headstart generated) forms, with just 2 enterable columns, one of which has an lov. Now they need to start working with this 'new tech', and even though there is some adjustment required, this area does feels a bit archaic at times!
So, i've made it work through an Ajax callback on the onchange event. So, when the value is changed through the lov, extra fields are filled up. This goes together with an after header process, after the automated row fetch, so the values are fetched when the page is loaded (or a user navigates the rows).
I've also written a custom solution, which requires me to create a page with a classic report on it with a search box. I then use this page in an iframe, and pop it up through a modal. When the user selects a record, i return the required returnvalue and a list of displayvalues. This i do through a bunch of javascript, which i've packed in a JS file, and actually requires quite little extra work to do on the pages: include the file on both, make an item with some post element text calling an 'open' procedure, and calling a select-and-close procedure on my lov page. I'm quite considering creating a small item typep plug-in, so i can more easily configure my calling item. Just a couple of buts: i've not actually used this in some forms already, i've engineered this in a testing application after getting frustrated with the standard tool. It would also require the client to maintain this javascript code + remember the config of the 2 items, let alone me writing a small plugin. So i'm hesitant to implement this.
TLDR: if you've been using Apex for a while, and maybe done some forms: how do you actually work with the popups. And if you've known forms: how did you deal with this change?
I'm still struggling - throw me a bone ;)
I haven't used it myself yet but I believe SkillBuilders Super LOV plug-in probably does what you need.

Resources