110 lines
4.1 KiB
Vue
110 lines
4.1 KiB
Vue
<template>
|
|
<v-data-table
|
|
caption="My Caption here"
|
|
:headers="headers"
|
|
:items="records"
|
|
:options.sync="options"
|
|
:server-items-length="totalRecords"
|
|
:loading="loading"
|
|
class="elevation-1"
|
|
></v-data-table>
|
|
</template>
|
|
|
|
<script>
|
|
/* Xeslint-disable */
|
|
//DataTable component
|
|
//https://vuetifyjs.com/en/components/data-tables#paginate-and-sort-server-side
|
|
/*
|
|
TODO:
|
|
This handles fetching and displaying the data, the parent form handles all other aspects:
|
|
- error message display
|
|
- opening items
|
|
- selecting filters and adding editing templates
|
|
|
|
What is required to be sent to server:
|
|
- example full request http://localhost:7575/api/v8/Widget/ListWidgets?Offset=1&Limit=12&DataFilterId=122&vp=xs
|
|
- api list url
|
|
- "Widget/ListWidgets"
|
|
- Offset
|
|
- Limit
|
|
- DatafilterId
|
|
- Viewport if XS otherwise nothing
|
|
|
|
|
|
What it needs from it's parent form:
|
|
- form key for saving / getting persistent grid settings
|
|
- api list url
|
|
- filter id
|
|
- refresh command
|
|
- rows per page
|
|
|
|
What it needs to provide TO it's parent form
|
|
- Item click info to trigger opening edit form
|
|
- Selected items list for mass ops
|
|
- error event and message in case of server error or other error so parent can handle it
|
|
- Grid is responsible ONLY for showing data, nothing else
|
|
|
|
|
|
What will be delivered by the server:
|
|
- a response object like this:
|
|
{
|
|
"data": [ ...all rows here ... ] ,
|
|
"paging": { ...paging data... },
|
|
"columns":{ ...column definitions .... }
|
|
}
|
|
|
|
What this grid needs to do:
|
|
- On created or refresh or change of filter
|
|
- set Loading property to true on data object
|
|
- send the get request to the server based on filter, viewport etc
|
|
- On receipt of successful response
|
|
- update the paging values
|
|
- update the persistent form settings with the current grid selections for paging etc
|
|
- generate the column headers
|
|
- They will have locale keys so this grid fetches the keys as necessary at this point as it could change dynamically almost
|
|
- Generate the Item slot template (which I've never done in code before but only in the template itself so needs research)
|
|
- set the property names in the incoming data to the correct matching headers
|
|
- set display filters based on locale settings (i.e. currency, datetime filter which converts to local time offset etc)
|
|
- fill the rows
|
|
- format?
|
|
- On fail
|
|
- Do something
|
|
- set loading property to false
|
|
|
|
|
|
|
|
TODO:
|
|
- Modify server widgetlist route:
|
|
- Modify route to accept vp paramenter for small viewport
|
|
- Add mock column data and include it in the response for grid queries
|
|
- modify server to return alternate list of just names and id's if vp paramenter is present and xs (may be other values in future so check for xs specifically)
|
|
- this route could actually be just a defined c# object since it's always going to be one column and one id like namevalue list
|
|
- full width all columns though would be different kettle of fish entirely so this is a good time to experiment and figure it out
|
|
- not sure if right time but also need to modify server return to hide hidden columns which we have working code for already for widgets to hide them so yay?
|
|
- Also custom fields, or is that a template issue?
|
|
|
|
- Start coding grid here with cue component parameters and handlers first and work down into detailed items once they are all in place between parent and here
|
|
|
|
*/
|
|
export default {
|
|
created() {
|
|
console.log("gz-data-table viewport is XS = " + this.isXS());
|
|
},
|
|
data() {
|
|
return {
|
|
loading: true,
|
|
options: {},
|
|
headers: [],
|
|
totalRecords: 0,
|
|
records: []
|
|
};
|
|
},
|
|
methods: {
|
|
isXS() {
|
|
//https://vuetifyjs.com/en/customization/breakpoints#breakpoint-service-object
|
|
return this.$vuetify.breakpoint.xs;
|
|
}
|
|
}
|
|
};
|
|
</script>
|