{"version":3,"file":"191.js","sources":["webpack:///src/views/ui-elements/ag-grid-table/AgGridTable.vue","webpack:///./src/views/ui-elements/ag-grid-table/AgGridTable.vue","webpack:///./src/views/ui-elements/ag-grid-table/AgGridTable.vue?78dc","webpack:///./src/views/ui-elements/ag-grid-table/AgGridTable.vue?da1f","webpack:///./src/views/ui-elements/ag-grid-table/AgGridTable.vue?27a4"],"sourcesContent":["<!-- =========================================================================================\n    File Name: AgGridTable.vue\n    Description: Ag Grid table\n    ----------------------------------------------------------------------------------------\n    Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template\n    Author: Pixinvent\n    Author URL: http://www.themeforest.net/user/pixinvent\n========================================================================================== -->\n\n\n<template>\n  <div id=\"ag-grid-demo\">\n    <vx-card>\n\n      <!-- TABLE ACTION ROW -->\n      <div class=\"flex flex-wrap justify-between items-center\">\n\n        <!-- ITEMS PER PAGE -->\n        <div class=\"mb-4 md:mb-0 mr-4 ag-grid-table-actions-left\">\n          <vs-dropdown vs-trigger-click class=\"cursor-pointer\">\n            <div class=\"p-4 border border-solid d-theme-border-grey-light rounded-full d-theme-dark-bg cursor-pointer flex items-center justify-between font-medium\">\n              <span class=\"mr-2\">{{ currentPage * paginationPageSize - (paginationPageSize - 1) }} - {{ contacts.length - currentPage * paginationPageSize > 0 ? currentPage * paginationPageSize : contacts.length }} of {{ contacts.length }}</span>\n              <feather-icon icon=\"ChevronDownIcon\" svgClasses=\"h-4 w-4\" />\n            </div>\n            <!-- <vs-button class=\"btn-drop\" type=\"line\" color=\"primary\" icon-pack=\"feather\" icon=\"icon-chevron-down\"></vs-button> -->\n            <vs-dropdown-menu>\n\n              <vs-dropdown-item @click=\"paginationSetPageSize(20)\">\n                <span>20</span>\n              </vs-dropdown-item>\n              <vs-dropdown-item @click=\"paginationSetPageSize(50)\">\n                <span>50</span>\n              </vs-dropdown-item>\n              <vs-dropdown-item @click=\"paginationSetPageSize(100)\">\n                <span>100</span>\n              </vs-dropdown-item>\n              <vs-dropdown-item @click=\"paginationSetPageSize(150)\">\n                <span>150</span>\n              </vs-dropdown-item>\n            </vs-dropdown-menu>\n          </vs-dropdown>\n        </div>\n\n        <!-- TABLE ACTION COL-2: SEARCH & EXPORT AS CSV -->\n        <div class=\"flex flex-wrap items-center justify-between ag-grid-table-actions-right\">\n          <vs-input class=\"mb-4 md:mb-0 mr-4\" v-model=\"searchQuery\" @input=\"updateSearchQuery\" placeholder=\"Search...\" />\n          <vs-button class=\"mb-4 md:mb-0\" @click=\"gridApi.exportDataAsCsv()\">Export as CSV</vs-button>\n        </div>\n      </div>\n      <ag-grid-vue\n        ref=\"agGridTable\"\n        :gridOptions=\"gridOptions\"\n        class=\"ag-theme-material w-100 my-4 ag-grid-table\"\n        :columnDefs=\"columnDefs\"\n        :defaultColDef=\"defaultColDef\"\n        :rowData=\"contacts\"\n        rowSelection=\"multiple\"\n        colResizeDefault=\"shift\"\n        :animateRows=\"true\"\n        :floatingFilter=\"true\"\n        :pagination=\"true\"\n        :paginationPageSize=\"paginationPageSize\"\n        :suppressPaginationPanel=\"true\"\n        :enableRtl=\"$vs.rtl\">\n      </ag-grid-vue>\n      <vs-pagination\n        :total=\"totalPages\"\n        :max=\"maxPageNumbers\"\n        v-model=\"currentPage\" />\n\n    </vx-card>\n  </div>\n</template>\n\n<script>\nimport { AgGridVue } from 'ag-grid-vue'\nimport contacts from './data.json'\n\nimport '@/assets/scss/vuexy/extraComponents/agGridStyleOverride.scss'\n\nimport PaginationMixin from '@/mixins/pagination'\n\nexport default {\n  mixins: [PaginationMixin],\n  components: {\n    AgGridVue\n  },\n  data () {\n    return {\n      searchQuery: '',\n      gridOptions: {},\n      maxPageNumbers: 7,\n      gridApi: null,\n      defaultColDef: {\n        sortable: true,\n        editable: true,\n        resizable: true,\n        suppressMenu: true\n      },\n      columnDefs: [\n        {\n          headerName: 'First Name',\n          field: 'firstname',\n          width: 175,\n          filter: true,\n          checkboxSelection: true,\n          headerCheckboxSelectionFilteredOnly: true,\n          headerCheckboxSelection: true\n        },\n        {\n          headerName: 'Last Name',\n          field: 'lastname',\n          filter: true,\n          width: 175\n        },\n        {\n          headerName: 'Email',\n          field: 'email',\n          filter: true,\n          width: 250,\n          pinned: 'left'\n        },\n        {\n          headerName: 'Company',\n          field: 'company',\n          filter: true,\n          width: 250\n        },\n        {\n          headerName: 'City',\n          field: 'city',\n          filter: true,\n          width: 150\n        },\n        {\n          headerName: 'Country',\n          field: 'country',\n          filter: true,\n          width: 150\n        },\n        {\n          headerName: 'State',\n          field: 'state',\n          filter: true,\n          width: 125\n        },\n        {\n          headerName: 'Zip',\n          field: 'zip',\n          filter: true,\n          width: 125\n        },\n        {\n          headerName: 'Followers',\n          field: 'followers',\n          filter: 'agNumberColumnFilter',\n          width: 125\n        }\n      ],\n      contacts\n    }\n  },\n  watch: {\n    '$store.state.windowWidth' (val) {\n      if (val <= 576) {\n        this.maxPageNumbers = 4\n        this.gridOptions.columnApi.setColumnPinned('email', null)\n      } else this.gridOptions.columnApi.setColumnPinned('email', 'left')\n    }\n  },\n  methods: {\n    updateSearchQuery (val) {\n      this.gridApi.setQuickFilter(val)\n    }\n  },\n  mounted () {\n    this.gridApi = this.gridOptions.api\n\n    /* =================================================================\n      NOTE:\n      Header is not aligned properly in RTL version of agGrid table.\n      However, we given fix to this issue. If you want more robust solution please contact them at gitHub\n    ================================================================= */\n    if (this.$vs.rtl) {\n      const header = this.$refs.agGridTable.$el.querySelector('.ag-header-container')\n      header.style.left = `-${  String(Number(header.style.transform.slice(11, -3)) + 9)  }px`\n    }\n  },\n  created () {\n    this.setGrid('contacts')\n  }\n}\n\n</script>\n","var render = function render() {\n  var _vm = this,\n    _c = _vm._self._c\n  return _c(\n    \"div\",\n    { attrs: { id: \"ag-grid-demo\" } },\n    [\n      _c(\n        \"vx-card\",\n        [\n          _c(\n            \"div\",\n            { staticClass: \"flex flex-wrap justify-between items-center\" },\n            [\n              _c(\n                \"div\",\n                { staticClass: \"mb-4 md:mb-0 mr-4 ag-grid-table-actions-left\" },\n                [\n                  _c(\n                    \"vs-dropdown\",\n                    {\n                      staticClass: \"cursor-pointer\",\n                      attrs: { \"vs-trigger-click\": \"\" },\n                    },\n                    [\n                      _c(\n                        \"div\",\n                        {\n                          staticClass:\n                            \"p-4 border border-solid d-theme-border-grey-light rounded-full d-theme-dark-bg cursor-pointer flex items-center justify-between font-medium\",\n                        },\n                        [\n                          _c(\"span\", { staticClass: \"mr-2\" }, [\n                            _vm._v(\n                              _vm._s(\n                                _vm.currentPage * _vm.paginationPageSize -\n                                  (_vm.paginationPageSize - 1)\n                              ) +\n                                \" - \" +\n                                _vm._s(\n                                  _vm.contacts.length -\n                                    _vm.currentPage * _vm.paginationPageSize >\n                                    0\n                                    ? _vm.currentPage * _vm.paginationPageSize\n                                    : _vm.contacts.length\n                                ) +\n                                \" of \" +\n                                _vm._s(_vm.contacts.length)\n                            ),\n                          ]),\n                          _c(\"feather-icon\", {\n                            attrs: {\n                              icon: \"ChevronDownIcon\",\n                              svgClasses: \"h-4 w-4\",\n                            },\n                          }),\n                        ],\n                        1\n                      ),\n                      _c(\n                        \"vs-dropdown-menu\",\n                        [\n                          _c(\n                            \"vs-dropdown-item\",\n                            {\n                              on: {\n                                click: function ($event) {\n                                  return _vm.paginationSetPageSize(20)\n                                },\n                              },\n                            },\n                            [_c(\"span\", [_vm._v(\"20\")])]\n                          ),\n                          _c(\n                            \"vs-dropdown-item\",\n                            {\n                              on: {\n                                click: function ($event) {\n                                  return _vm.paginationSetPageSize(50)\n                                },\n                              },\n                            },\n                            [_c(\"span\", [_vm._v(\"50\")])]\n                          ),\n                          _c(\n                            \"vs-dropdown-item\",\n                            {\n                              on: {\n                                click: function ($event) {\n                                  return _vm.paginationSetPageSize(100)\n                                },\n                              },\n                            },\n                            [_c(\"span\", [_vm._v(\"100\")])]\n                          ),\n                          _c(\n                            \"vs-dropdown-item\",\n                            {\n                              on: {\n                                click: function ($event) {\n                                  return _vm.paginationSetPageSize(150)\n                                },\n                              },\n                            },\n                            [_c(\"span\", [_vm._v(\"150\")])]\n                          ),\n                        ],\n                        1\n                      ),\n                    ],\n                    1\n                  ),\n                ],\n                1\n              ),\n              _c(\n                \"div\",\n                {\n                  staticClass:\n                    \"flex flex-wrap items-center justify-between ag-grid-table-actions-right\",\n                },\n                [\n                  _c(\"vs-input\", {\n                    staticClass: \"mb-4 md:mb-0 mr-4\",\n                    attrs: { placeholder: \"Search...\" },\n                    on: { input: _vm.updateSearchQuery },\n                    model: {\n                      value: _vm.searchQuery,\n                      callback: function ($$v) {\n                        _vm.searchQuery = $$v\n                      },\n                      expression: \"searchQuery\",\n                    },\n                  }),\n                  _c(\n                    \"vs-button\",\n                    {\n                      staticClass: \"mb-4 md:mb-0\",\n                      on: {\n                        click: function ($event) {\n                          return _vm.gridApi.exportDataAsCsv()\n                        },\n                      },\n                    },\n                    [_vm._v(\"Export as CSV\")]\n                  ),\n                ],\n                1\n              ),\n            ]\n          ),\n          _c(\"ag-grid-vue\", {\n            ref: \"agGridTable\",\n            staticClass: \"ag-theme-material w-100 my-4 ag-grid-table\",\n            attrs: {\n              gridOptions: _vm.gridOptions,\n              columnDefs: _vm.columnDefs,\n              defaultColDef: _vm.defaultColDef,\n              rowData: _vm.contacts,\n              rowSelection: \"multiple\",\n              colResizeDefault: \"shift\",\n              animateRows: true,\n              floatingFilter: true,\n              pagination: true,\n              paginationPageSize: _vm.paginationPageSize,\n              suppressPaginationPanel: true,\n              enableRtl: _vm.$vs.rtl,\n            },\n          }),\n          _c(\"vs-pagination\", {\n            attrs: { total: _vm.totalPages, max: _vm.maxPageNumbers },\n            model: {\n              value: _vm.currentPage,\n              callback: function ($$v) {\n                _vm.currentPage = $$v\n              },\n              expression: \"currentPage\",\n            },\n          }),\n        ],\n        1\n      ),\n    ],\n    1\n  )\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\nexport { render, staticRenderFns }","import { render, staticRenderFns } from \"./AgGridTable.vue?vue&type=template&id=2c517c98&\"\nimport script from \"./AgGridTable.vue?vue&type=script&lang=js&\"\nexport * from \"./AgGridTable.vue?vue&type=script&lang=js&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  null,\n  null\n  \n)\n\n/* hot reload */\nif (module.hot) {\n  var api = require(\"/home/node/app/node_modules/vue-hot-reload-api/dist/index.js\")\n  api.install(require('vue'))\n  if (api.compatible) {\n    module.hot.accept()\n    if (!api.isRecorded('2c517c98')) {\n      api.createRecord('2c517c98', component.options)\n    } else {\n      api.reload('2c517c98', component.options)\n    }\n    module.hot.accept(\"./AgGridTable.vue?vue&type=template&id=2c517c98&\", function () {\n      api.rerender('2c517c98', {\n        render: render,\n        staticRenderFns: staticRenderFns\n      })\n    })\n  }\n}\ncomponent.options.__file = \"src/views/ui-elements/ag-grid-table/AgGridTable.vue\"\nexport default component.exports","import mod from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../node_modules/babel-loader/lib/index.js??ref--12-1!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./AgGridTable.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../node_modules/babel-loader/lib/index.js??ref--12-1!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./AgGridTable.vue?vue&type=script&lang=js&\"","export * from \"-!../../../../node_modules/cache-loader/dist/cjs.js?{\\\"cacheDirectory\\\":\\\"node_modules/.cache/vue-loader\\\",\\\"cacheIdentifier\\\":\\\"27e57935-vue-loader-template\\\"}!../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../node_modules/babel-loader/lib/index.js??ref--12-1!../../../../node_modules/vue-loader/lib/loaders/templateLoader.js??ref--6!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./AgGridTable.vue?vue&type=template&id=2c517c98&\""],"mappings":";;;;;;;;;;;;;;;;;;;;;AA2EA;AACA;AAEA;AAEA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;;;;AC/LA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AAEA;AAAA;AAAA;AAAA;AAOA;AAAA;AAIA;AAAA;AAKA;AACA;AAAA;AAAA;AACA;AAKA;AAEA;AAEA;AAAA;AAmBA;AACA;AACA;AACA;AACA;AAUA;AACA;AACA;AACA;AACA;AACA;AAMA;AACA;AACA;AACA;AACA;AACA;AAMA;AACA;AACA;AACA;AACA;AACA;AAMA;AACA;AACA;AACA;AACA;AACA;AAeA;AAEA;AAGA;AACA;AAAA;AAAA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAIA;AACA;AACA;AACA;AACA;AACA;AACA;AASA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAOA;AACA;AACA;;;;;;;;;;;;;AC3LA;AAAA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;;;;ACtCA;AAAA;AAAA;;;;;;;;;;;;ACAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;;;;;;;;;;;A","sourceRoot":""}