<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>
