@papaemmelab/isabl-web 0.3.14 → 0.3.16
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -2
- package/dist/isabl-web.common.js +21 -21
- package/dist/isabl-web.umd.js +21 -21
- package/dist/isabl-web.umd.min.js +3 -3
- package/package.json +1 -1
package/dist/isabl-web.umd.js
CHANGED
|
@@ -89277,7 +89277,7 @@ exports = module.exports = __webpack_require__("2350")(false);
|
|
|
89277
89277
|
|
|
89278
89278
|
|
|
89279
89279
|
// module
|
|
89280
|
-
exports.push([module.i, ".isabl-base-card .v-data-table th.column.sortable.active.desc button.sort-icon{-webkit-transform:rotate(-180deg);transform:rotate(-180deg)}.isabl-base-card .v-data-table th.column.sortable.active button.sort-icon{color:var(--v-primary-base)}.isabl-base-card .v-data-table th.column.sortable button{font-size:13px!important;margin-left:4px}.isabl-base-card .v-data-table .v-data-table__wrapper{max-height:300px;overflow-y:auto}.isabl-base-card .v-data-table .table-cell{height:25px!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:300px;padding-left:5px!important}.isabl-base-card .v-data-table .table-cell .v-chip.v-size--small{height:20px}.isabl-base-card .v-data-table tr.table-headers.table-cell{position:sticky;top:0;background:#fff;cursor:pointer;height:32px}.isabl-base-card .v-data-table tr.table-headers.table-cell th{background:rgba(0,0,0,.04)}.isabl-base-card .v-data-table.theme--dark,.isabl-base-card .v-data-table.theme--dark tr.column-filters th,.isabl-base-card .v-data-table.theme--dark tr.table-headers.table-cell th{background:var(--v-surface-base)}.isabl-base-card .v-data-table th.column.sortable{padding:0 5px}.isabl-base-card .v-data-table tr.column-filters th{height:32px}.isabl-base-card .v-data-table .v-data-table__empty-wrapper>td{padding:0}.table-filter-input{min-width:150px}.table-filter-input .v-input__icon--append .v-icon{font-size:14px}.table-filter-input input{font-size:14px;font-weight:400;padding-left:6px!important}.table-filter-input label{font-size:13px;padding-left:6px}.column-filters{position:sticky;top:25px;background:#fff}.column-filters .v-select{margin:0}.column-filters .v-select .v-input__slot,.column-filters .v-select input{height:25px}.column-filters .v-select .v-icon{font-size:16px}.column-filters .v-select__selections{display:contents;max-width:120px;font-size:14px;font-weight:400}.column-filters .v-select__selections span,.column-filters .v-text-field .v-input__append-inner{padding:0}.v-list .v-list-item{min-height:25px}.v-list .v-list-item .v-list-item__title{font-size:14px;font-weight:400}.v-list .v-list-item .v-list-item__content{padding:0 10px}div.v-list--dense .v-list-item{min-height:25px;padding:0}div.v-list--dense .v-list-item .v-list-item__action{margin:0;padding:0 4px}div.v-list--dense .v-list-item .v-list-item__title{font-size:14px;font-weight:400}div.v-list--dense .v-list-item .v-list-item__content{padding:0}.v-select-list{overflow:hidden}.v-menu__content:not(.v-autocomplete__content) .v-list__tile{height:23px}table.v-table tbody tr{border:0!important}table.v-table thead tr{height:30px!important}table.v-table thead tr.v-datatable__progress{height:0!important;border-top:1px solid rgba(0,0,0,.05)}table.v-table thead th{padding-left:5px!important;padding-right:5px!important}div.v-data-table__actions{-ms-flex-wrap:nowrap;flex-wrap:nowrap}div.v-data-table__actions__pagination{width:100%;min-width:170px;margin:0 10px 0 10px}div.v-data-table__actions__select{white-space:normal;overflow:hidden;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;margin-right:5px;max-width:100px}div.v-data-table__actions__select .v-select{margin-left:25px;margin-right:0;margin-top:0;margin-bottom:0}div.v-data-table__actions__range-controls{width:100%}div.v-data-table__actions button{margin:0;margin-right:5px}.section-toggle{cursor:pointer}.isabl-base-card .v-data-footer{font-size:12px;padding:0}.isabl-base-card .v-data-footer div.v-select__selection{font-size:12px}.isabl-base-card .v-data-footer div.v-select{margin:4px 0 4px 16px}.v-data-footer__select .v-menu__content .v-list-item{min-height:25px;font-size:14px}.v-data-footer__select .v-menu__content .v-list-item .v-list-item__content{padding:0}code.markdown-style{padding:.2em .4em;margin:0;font-size:85%;background-color:rgba(175,184,193,.2);border-radius:6px;color:#24292f}.v-data-table .v-data-footer .v-data-footer__select{margin-left:0;margin-right:auto}.v-data-table .v-data-footer .v-data-footer__pagination{margin-left:auto;margin-right:auto}.v-data-table .v-data-footer .v-data-footer__icons-before{margin-left:auto;margin-right:0}.v-data-table .v-data-footer .v-data-footer__icons-after{margin-left:0;margin-right:0}", ""]);
|
|
89280
|
+
exports.push([module.i, ".isabl-base-card .v-data-table th.column.sortable.active.desc button.sort-icon{-webkit-transform:rotate(-180deg);transform:rotate(-180deg)}.isabl-base-card .v-data-table th.column.sortable.active button.sort-icon{color:var(--v-primary-base)}.isabl-base-card .v-data-table th.column.sortable button{font-size:13px!important;margin-left:4px}.isabl-base-card .v-data-table .v-data-table__wrapper{max-height:300px;overflow-y:auto}.isabl-base-card .v-data-table .table-cell{height:25px!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:300px;padding-left:5px!important}.isabl-base-card .v-data-table .table-cell .v-chip.v-size--small{height:20px}.isabl-base-card .v-data-table tr.table-headers.table-cell{position:sticky;top:0;background:#fff;cursor:pointer;height:32px}.isabl-base-card .v-data-table tr.table-headers.table-cell th{background:rgba(0,0,0,.04)}.isabl-base-card .v-data-table.theme--dark,.isabl-base-card .v-data-table.theme--dark tr.column-filters th,.isabl-base-card .v-data-table.theme--dark tr.table-headers.table-cell th{background:var(--v-surface-base)}.isabl-base-card .v-data-table th.column.sortable{padding:0 5px}.isabl-base-card .v-data-table tr.column-filters th{height:32px}.isabl-base-card .v-data-table .v-data-table__empty-wrapper>td{padding:0}.table-filter-input{min-width:150px}.table-filter-input .v-input__icon--append .v-icon{font-size:14px}.table-filter-input input{font-size:14px;font-weight:400;padding-left:6px!important}.table-filter-input label{font-size:13px;padding-left:6px}.column-filters{position:sticky;top:25px;background:#fff;z-index:10}.column-filters .v-select{margin:0}.column-filters .v-select .v-input__slot,.column-filters .v-select input{height:25px}.column-filters .v-select .v-icon{font-size:16px}.column-filters .v-select__selections{display:contents;max-width:120px;font-size:14px;font-weight:400}.column-filters .v-select__selections span,.column-filters .v-text-field .v-input__append-inner{padding:0}.v-list .v-list-item{min-height:25px}.v-list .v-list-item .v-list-item__title{font-size:14px;font-weight:400}.v-list .v-list-item .v-list-item__content{padding:0 10px}div.v-list--dense .v-list-item{min-height:25px;padding:0}div.v-list--dense .v-list-item .v-list-item__action{margin:0;padding:0 4px}div.v-list--dense .v-list-item .v-list-item__title{font-size:14px;font-weight:400}div.v-list--dense .v-list-item .v-list-item__content{padding:0}.v-select-list{overflow:hidden}.v-menu__content:not(.v-autocomplete__content) .v-list__tile{height:23px}table.v-table tbody tr{border:0!important}table.v-table thead tr{height:30px!important}table.v-table thead tr.v-datatable__progress{height:0!important;border-top:1px solid rgba(0,0,0,.05)}table.v-table thead th{padding-left:5px!important;padding-right:5px!important}div.v-data-table__actions{-ms-flex-wrap:nowrap;flex-wrap:nowrap}div.v-data-table__actions__pagination{width:100%;min-width:170px;margin:0 10px 0 10px}div.v-data-table__actions__select{white-space:normal;overflow:hidden;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;margin-right:5px;max-width:100px}div.v-data-table__actions__select .v-select{margin-left:25px;margin-right:0;margin-top:0;margin-bottom:0}div.v-data-table__actions__range-controls{width:100%}div.v-data-table__actions button{margin:0;margin-right:5px}.section-toggle{cursor:pointer}.isabl-base-card .v-data-footer{font-size:12px;padding:0}.isabl-base-card .v-data-footer div.v-select__selection{font-size:12px}.isabl-base-card .v-data-footer div.v-select{margin:4px 0 4px 16px}.v-data-footer__select .v-menu__content .v-list-item{min-height:25px;font-size:14px}.v-data-footer__select .v-menu__content .v-list-item .v-list-item__content{padding:0}code.markdown-style{padding:.2em .4em;margin:0;font-size:85%;background-color:rgba(175,184,193,.2);border-radius:6px;color:#24292f}.v-data-table .v-data-footer .v-data-footer__select{margin-left:0;margin-right:auto}.v-data-table .v-data-footer .v-data-footer__pagination{margin-left:auto;margin-right:auto}.v-data-table .v-data-footer .v-data-footer__icons-before{margin-left:auto;margin-right:0}.v-data-table .v-data-footer .v-data-footer__icons-after{margin-left:0;margin-right:0}", ""]);
|
|
89281
89281
|
|
|
89282
89282
|
// exports
|
|
89283
89283
|
|
|
@@ -91177,7 +91177,7 @@ module.exports = overArg;
|
|
|
91177
91177
|
/***/ "9224":
|
|
91178
91178
|
/***/ (function(module) {
|
|
91179
91179
|
|
|
91180
|
-
module.exports = JSON.parse("{\"name\":\"@papaemmelab/isabl-web\",\"version\":\"0.3.
|
|
91180
|
+
module.exports = JSON.parse("{\"name\":\"@papaemmelab/isabl-web\",\"version\":\"0.3.16\",\"scripts\":{\"serve\":\"vue-cli-service serve\",\"lint\":\"vue-cli-service lint\",\"build-lib\":\"vue-cli-service build --target lib --name isabl-web ./src/main.js\",\"build-wc\":\"vue-cli-service build --target wc --name isabl-web ./src/components/*.vue\",\"build-wc-async\":\"vue-cli-service build --target wc-async --name isabl-web ./src/components/*.vue\",\"publish-app\":\"yarn version --patch && yarn build-lib && yarn publish --access public\",\"dev\":\"yarn build-lib --watch\",\"test:unit\":\"vue-cli-service test:unit\",\"test:e2e\":\"vue-cli-service test:e2e\",\"test:travis\":\"yarn test:e2e --headless\",\"test:submissions\":\"node tests/utils/create_test_submission.js\",\"test:report-coverage\":\"nyc report --reporter=text-lcov > coverage.lcov && codecov -t $CODECOV_TOKEN\",\"demo\":\"nodemon demo/demo-app.js\"},\"dependencies\":{\"@mdi/font\":\"^7.0.96\",\"ansi_up\":\"^5\",\"axios\":\"^0.21.1\",\"crossfilter\":\"^1.3.12\",\"crossfilter2\":\"^1.4.7\",\"d3-tip\":\"^0.9.1\",\"dc\":\"3.1.2\",\"detect-csv\":\"^1.1.0\",\"js-md5\":\"^0.7.3\",\"minify-css-string\":\"^1.0.0\",\"moment\":\"^2.22.2\",\"register-service-worker\":\"^1.5.2\",\"v-hotkey\":\"^0.6.0\",\"vue\":\"^2.5.16\",\"vue-clipboard2\":\"^0.2.1\",\"vue-gallery\":\"^1.4.0\",\"vue-highlightjs\":\"^1.3.3\",\"vue-json-excel\":\"^0.2.5\",\"vue-observe-visibility\":\"^0.4.6\",\"vue-router\":\"^3.0.1\",\"vue-upload-component\":\"^2.8.11\",\"vuetify\":\"2.6.10\",\"vuex\":\"^3.0.1\",\"vuex-router-sync\":\"^5.0.0\"},\"devDependencies\":{\"@cypress/code-coverage\":\"^1.10.1\",\"@vue/cli-plugin-babel\":\"^3.3.0\",\"@vue/cli-plugin-e2e-cypress\":\"^3.3.0\",\"@vue/cli-plugin-eslint\":\"^3.3.0\",\"@vue/cli-plugin-pwa\":\"^3.3.0\",\"@vue/cli-plugin-unit-jest\":\"^3.3.0\",\"@vue/cli-service\":\"^3.3.0\",\"@vue/eslint-config-prettier\":\"^3.0.5\",\"@vue/test-utils\":\"^1.0.0-beta.20\",\"axios-mock-adapter\":\"^1.15.0\",\"babel-core\":\"7.0.0-bridge.0\",\"babel-jest\":\"^23.0.1\",\"babel-plugin-istanbul\":\"^5.2.0\",\"codecov\":\"^3.6.1\",\"eslint-plugin-vuetify\":\"^1.1.0\",\"express\":\"^4.16.3\",\"html-webpack-plugin\":\"^3.2.0\",\"istanbul-lib-coverage\":\"^2.0.5\",\"mini-css-extract-plugin\":\"^0.4.2\",\"nyc\":\"^14.1.1\",\"sass\":\"^1.55.0\",\"sass-loader\":\"^7.0.1\",\"vue-template-compiler\":\"^2.5.16\",\"xlsx-populate\":\"^1.19.1\"},\"browserslist\":[\"> 1%\",\"last 2 versions\",\"not ie <= 8\"],\"main\":\"./dist/isabl-web.umd.min.js\",\"license\":\"MIT\",\"files\":[\"dist/isabl-web*.js\"],\"author\":\"Juan S. Medina - Juan E. Arango\",\"description\":\"Isabl Frontend of the MSK Academic License.\",\"bugs\":{\"url\":\"https://github.com/papaemmelab/isabl_web/issues\"},\"homepage\":\"https://github.com/papaemmelab/isabl_web#readme\"}");
|
|
91181
91181
|
|
|
91182
91182
|
/***/ }),
|
|
91183
91183
|
|
|
@@ -209322,7 +209322,7 @@ var tableColumns = (cov_2ayx42smu.s[23]++, {
|
|
|
209322
209322
|
field: 'owner'
|
|
209323
209323
|
}, {
|
|
209324
209324
|
verboseName: 'Analyst',
|
|
209325
|
-
field: '
|
|
209325
|
+
field: 'analyst'
|
|
209326
209326
|
}, {
|
|
209327
209327
|
verboseName: 'Coordinator',
|
|
209328
209328
|
field: 'coordinator'
|
|
@@ -243679,8 +243679,8 @@ var BaseTabs_component = normalizeComponent(
|
|
|
243679
243679
|
)
|
|
243680
243680
|
|
|
243681
243681
|
/* harmony default export */ var BaseTabs = (BaseTabs_component.exports);
|
|
243682
|
-
// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"d220a428-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/table/DataTable.vue?vue&type=template&id=
|
|
243683
|
-
var
|
|
243682
|
+
// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"d220a428-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/table/DataTable.vue?vue&type=template&id=31c65eb2&
|
|
243683
|
+
var DataTablevue_type_template_id_31c65eb2_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('v-card',{class:['isabl-base-card no-shadow', _vm.cardClasses]},[_c('base-section-title',{attrs:{"show-more":_vm.showTable},on:{"toggle-show-more":function($event){_vm.showTable = !_vm.showTable}},scopedSlots:_vm._u([{key:"title",fn:function(){return [_vm._v("\n "+_vm._s(_vm._f("capitalize")(_vm.title || _vm.model))+"\n "),(_vm.infoText)?_c('v-tooltip',{attrs:{"top":""},scopedSlots:_vm._u([{key:"activator",fn:function(ref){
|
|
243684
243684
|
var on = ref.on;
|
|
243685
243685
|
return [_c('v-icon',_vm._g({staticClass:"pl-1",staticStyle:{"cursor":"help"},attrs:{"small":"","color":"grey lighten-2"}},on),[_vm._v("\n info\n ")])]}}],null,false,2192405103)},[_c('span',{attrs:{"text-center":""}},[_vm._v(_vm._s(_vm.infoText))])]):_vm._e()]},proxy:true},{key:"actions",fn:function(){return [(_vm.items)?_c('data-table-actions',{attrs:{"model":_vm.model,"items":_vm.items,"headers":_vm.headers,"global-search":_vm.globalSearch,"query-params":_vm.queryParams},on:{"fetch-data":_vm.updateSearchText}}):_vm._e()]},proxy:true}])}),_c('v-data-table',{directives:[{name:"show",rawName:"v-show",value:(_vm.showTable),expression:"showTable"}],attrs:{"headers":_vm.headers,"items":_vm.items,"server-items-length":_vm.totalItems,"loading":_vm.loading,"items-per-page":_vm.itemsPerPage,"page":_vm.page,"footer-props":{ itemsPerPageOptions: _vm.itemsPerPageItems, itemsPerPageText: '' },"loader-height":"2","calculate-widths":"","hide-default-header":"","dense":""},on:{"update:itemsPerPage":function($event){_vm.itemsPerPage=$event},"update:items-per-page":function($event){_vm.itemsPerPage=$event},"update:page":function($event){_vm.page=$event},"page-count":function($event){_vm.pageCount = $event}},scopedSlots:_vm._u([{key:"header",fn:function(ref){
|
|
243686
243686
|
var props = ref.props;
|
|
@@ -243705,10 +243705,10 @@ return [_c('span',{class:[
|
|
|
243705
243705
|
var pageStart = ref.pageStart;
|
|
243706
243706
|
var pageStop = ref.pageStop;
|
|
243707
243707
|
return [_c('span',{staticClass:"text-body-1"},[_vm._v("\n "+_vm._s(pageStart)+" - "+_vm._s(pageStop)+" of\n "),_c('span',{staticClass:"primary--text text-h6 mx-1"},[_vm._v(_vm._s(_vm._f("formatNumber")(_vm.totalItems)))])])]}}])})],1)}
|
|
243708
|
-
var
|
|
243708
|
+
var DataTablevue_type_template_id_31c65eb2_staticRenderFns = []
|
|
243709
243709
|
|
|
243710
243710
|
|
|
243711
|
-
// CONCATENATED MODULE: ./src/components/table/DataTable.vue?vue&type=template&id=
|
|
243711
|
+
// CONCATENATED MODULE: ./src/components/table/DataTable.vue?vue&type=template&id=31c65eb2&
|
|
243712
243712
|
|
|
243713
243713
|
// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"d220a428-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/table/DataTableActions.vue?vue&type=template&id=0e1da098&
|
|
243714
243714
|
var DataTableActionsvue_type_template_id_0e1da098_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('v-row',{staticClass:"pa-0 ma-0 float-right"},[(_vm.searchText || _vm.showSearch)?_c('transition',{attrs:{"name":"slide"}},[_c('v-form',{on:{"submit":function($event){$event.preventDefault();}}},[_c('v-text-field',{ref:"input",staticClass:"pa-0 my-0 table-filter-input",attrs:{"autofocus":true,"append-icon":_vm.searchText ? 'close' : null,"label":"Search","data-test":"table-search-input","single-line":"","hide-details":"","dense":""},on:{"click:append":function($event){_vm.searchText ? (_vm.searchText = '') : null},"keyup":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"esc",27,$event.key,["Esc","Escape"])){ return null; }_vm.searchText = ''},"blur":_vm.onSearchInputBlur},model:{value:(_vm.searchText),callback:function ($$v) {_vm.searchText=$$v},expression:"searchText"}})],1)],1):_vm._e(),_c('v-speed-dial',{staticClass:"float-right",attrs:{"direction":"bottom","color":"primary","transition":"slide-y-transition","open-on-hover":""},scopedSlots:_vm._u([{key:"activator",fn:function(){return [_c('v-btn',{staticClass:"table-action-btn",attrs:{"fab":"","x-small":"","elevation":"0","color":"transparent"},on:{"click":function($event){_vm.showSearch = !_vm.showSearch}}},[(_vm.loading)?_c('v-progress-circular',{attrs:{"width":2,"size":18,"indeterminate":"","color":"primary"}}):(_vm.showActions || _vm.showSearch)?_c('v-icon',{attrs:{"small":""}},[_vm._v("\n search\n ")]):_c('v-icon',[_vm._v("\n more_vert\n ")])],1)]},proxy:true}]),model:{value:(_vm.showActions),callback:function ($$v) {_vm.showActions=$$v},expression:"showActions"}},[_c('JsonExcel',{attrs:{"fields":_vm.jsonHeaders,"fetch":_vm.fetchAllRecords,"worksheet":_vm.model,"name":_vm.exportedFilename,"before-finish":_vm.showFinishedAlert}},[_c('v-btn',{staticClass:"table-action-btn float-right",attrs:{"fab":"","x-small":""}},[_c('v-tooltip',{attrs:{"left":""},scopedSlots:_vm._u([{key:"activator",fn:function(ref){
|
|
@@ -247626,7 +247626,7 @@ var orderBy_default = /*#__PURE__*/__webpack_require__.n(orderBy);
|
|
|
247626
247626
|
// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/@vue/cli-plugin-babel/node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/table/DataTable.vue?vue&type=script&lang=js&
|
|
247627
247627
|
var cov_2h6d9k0h00 = function () {
|
|
247628
247628
|
var path = "/Users/juanes/papaemmelab/isabl_web/src/components/table/DataTable.vue";
|
|
247629
|
-
var hash = "
|
|
247629
|
+
var hash = "235fafbf88a72a48e239d67dc7b99e287750338d";
|
|
247630
247630
|
var global = new Function("return this")();
|
|
247631
247631
|
var gcv = "__coverage__";
|
|
247632
247632
|
var coverageData = {
|
|
@@ -251044,10 +251044,10 @@ var cov_2h6d9k0h00 = function () {
|
|
|
251044
251044
|
mappings: ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+NA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;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;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA",
|
|
251045
251045
|
file: "DataTable.vue",
|
|
251046
251046
|
sourceRoot: "src/components/table",
|
|
251047
|
-
sourcesContent: ["<template>\n <v-card :class=\"['isabl-base-card no-shadow', cardClasses]\">\n <base-section-title\n :show-more=\"showTable\"\n @toggle-show-more=\"showTable = !showTable\"\n >\n <template v-slot:title>\n {{ title || model | capitalize }}\n <v-tooltip\n v-if=\"infoText\"\n top\n >\n <template v-slot:activator=\"{ on }\">\n <v-icon\n small\n style=\"cursor: help\"\n color=\"grey lighten-2\"\n class=\"pl-1\"\n v-on=\"on\"\n >\n info\n </v-icon>\n </template>\n <span text-center>{{ infoText }}</span>\n </v-tooltip>\n </template>\n <template v-slot:actions>\n <data-table-actions\n v-if=\"items\"\n :model=\"model\"\n :items=\"items\"\n :headers=\"headers\"\n :global-search=\"globalSearch\"\n :query-params=\"queryParams\"\n @fetch-data=\"updateSearchText\"\n />\n </template>\n </base-section-title>\n\n <v-data-table\n v-show=\"showTable\"\n :headers=\"headers\"\n :items=\"items\"\n :server-items-length=\"totalItems\"\n :loading=\"loading\"\n :items-per-page.sync=\"itemsPerPage\"\n :page.sync=\"page\"\n :footer-props=\"{ itemsPerPageOptions: itemsPerPageItems, itemsPerPageText: '' }\"\n loader-height=\"2\"\n calculate-widths\n hide-default-header\n dense\n @page-count=\"pageCount = $event\"\n >\n <template v-slot:header=\"{ props }\">\n <tr class=\"table-headers text-left table-cell py-0 font-normal\">\n <th\n v-for=\"header in props.headers\"\n :key=\"header.text\"\n :class=\"[\n 'column sortable',\n sortByColumns.includes(header.value)\n ? 'asc active'\n : '',\n sortByColumns.includes(`-${header.value}`)\n ? 'desc active'\n : ''\n ]\"\n >\n <v-hover v-slot=\"{ hover }\">\n <span\n :class=\"[\n 'font-weight-medium',\n 'grey--text',\n ]\"\n >\n {{ header.text }}\n <v-icon\n :color=\"\n hover || sortByColumns.includes(header.value) || sortByColumns.includes(`-${header.value}`)\n ? 'text--darken-2'\n : 'transparent'\n \"\n class=\"sort-icon\"\n style=\"vertical-align: middle\"\n small\n @click=\"changeSort(header.value)\"\n >arrow_downward</v-icon>\n <v-icon\n :color=\"hover ? 'text--darken-2' : 'transparent'\"\n class=\"\"\n style=\"vertical-align: middle\"\n small\n @click=\"toggleColumnFilters\"\n >filter_list</v-icon>\n </span>\n </v-hover>\n </th>\n </tr>\n <tr\n v-if=\"showFilters\"\n class=\"column-filters\"\n >\n <th\n v-for=\"header in props.headers\"\n :key=\"header.text\"\n class=\"pa-0 ma-0\"\n >\n <data-table-date-picker\n v-if=\"header.filterType === 'date'\"\n :header=\"header\"\n @filter-search=\"filterSearch\"\n />\n <data-table-select-filter\n v-else\n :header=\"header\"\n :model=\"title || model\"\n @filter-search=\"filterSearch\"\n />\n </th>\n </tr>\n </template>\n <template v-slot:item=\"attrs\">\n <tr>\n <td\n v-for=\"(header, index) in attrs.headers\"\n :key=\"index + header.verboseName\"\n class=\"text-left table-cell py-0 text-body-1\"\n >\n <!-- if value is a model(s) link -->\n <span v-if=\"header.model\">\n <span v-if=\"Array.isArray(getValue(attrs.item, header))\">\n <span\n v-for=\"(value, index) in getValue(attrs.item, header)\"\n :key=\"index\"\n class=\"active-link\"\n @click=\"onClickRecord(value, header.model)\"\n v-html=\"\n highlightText(value, header) +\n `${index + 1 < getValue(attrs.item, header).length ? ', ' : ''}`\n \"\n />\n </span>\n\n <span v-else>\n <span\n class=\"active-link\"\n @click=\"onClickRecord(getValue(attrs.item, header), header.model)\"\n v-html=\"tableValue(attrs.item, header)\"\n />\n </span>\n </span>\n\n <!-- if value is analysis' result -->\n <span\n v-else-if=\"header.field === 'status'\"\n :class=\"classValue(attrs.item, header.field)\"\n v-html=\"tableValue(attrs.item, header)\"\n />\n\n <div\n v-else-if=\"header.field === 'resultName'\"\n class=\"mr-2\"\n >\n <result-chip\n :result=\"attrs.item\"\n :result-index=\"itemsPerPage * (page - 1) + attrs.index\"\n show-all\n @display-result=\"$emit('display-result', $event)\"\n />\n </div>\n\n <span\n v-else-if=\"header.field === 'resultKey'\"\n class=\"mr-2\"\n >\n <code class=\"markdown-style\" v-html=\"tableValue(attrs.item, header)\"/>\n </span>\n\n <!-- any other case -->\n <span\n v-else\n v-html=\"tableValue(attrs.item, header)\"\n />\n </td>\n </tr>\n </template>\n\n <template v-slot:no-data>\n <td\n :colspan=\"headers.length\"\n class=\"text-left table-cell pa-0 text-body-1\"\n >{{ loading ? 'Querying records...' : errorMessage || 'No records found.' }}</td>\n </template>\n\n <template v-slot:loading>\n <td\n :colspan=\"headers.length\"\n class=\"text-left table-cell pa-0 text-body-1\"\n >Querying records...</td>\n </template>\n\n <template v-slot:no-results>\n <td\n :colspan=\"headers.length\"\n class=\"text-left table-cell pa-0 text-body-1\"\n >{{ loading ? 'Querying records...' : 'No records found.' }}</td>\n </template>\n\n <template v-slot:footer.page-text=\"{ pageStart, pageStop }\">\n <span class=\"text-body-1\">\n {{ pageStart }} - {{ pageStop }} of\n <span\n class=\"primary--text text-h6 mx-1\"\n >{{ totalItems | formatNumber }}</span>\n </span>\n </template>\n\n </v-data-table>\n </v-card>\n</template>\n\n<script>\nimport { fetchListRecords } from '@/utils/api'\nimport { SHOW_ALERT } from '@/store/actions/alert'\nimport { SHOW_PANEL } from '@/store/actions/panels'\nimport { tableColumns } from '@/utils/tableColumns'\nimport BaseSectionTitle from '@/components/base/BaseSectionTitle.vue'\nimport DataTableActions from '@/components/table/DataTableActions.vue'\nimport DataTableSelectFilter from '@/components/table/DataTableSelectFilter.vue'\nimport DataTableDatePicker from '@/components/table/DataTableDatePicker.vue'\nimport ResultChip from '@/components/analyses/ResultChip'\nimport debounce from 'lodash/debounce'\nimport isEqual from 'lodash/isEqual'\nimport orderBy from 'lodash/orderBy'\n\nexport default {\n name: 'DataTable',\n components: {\n BaseSectionTitle,\n DataTableActions,\n DataTableSelectFilter,\n DataTableDatePicker,\n ResultChip,\n },\n props: {\n model: {\n type: String,\n required: false\n },\n title: {\n type: String,\n default: ''\n },\n globalSearch: {\n type: Boolean,\n default: false\n },\n params: {\n type: Object,\n default: () => ({})\n },\n // skip columns using the verbose name\n skipColumns: {\n type: Array,\n default: () => []\n },\n // columns using the verbose name\n headersKey: {\n type: String,\n default: ''\n },\n cardClasses: {\n type: String,\n default: ''\n },\n collapse: {\n type: Boolean,\n default: false\n },\n infoText: {\n type: String,\n default: ''\n },\n openRecordsInNewTab: {\n type: Boolean,\n default: false\n },\n data: {\n type: Array,\n default: () => []\n },\n filterRemotely: {\n type: Boolean,\n default: true,\n },\n initialSort: {\n type: Array,\n default: () => [\"-pk\"]\n },\n initialItemsPerPage: {\n type: Number,\n default: 5,\n }\n },\n data() {\n return {\n items: this.filterRemotely ? [] : this.data,\n totalItems: 0,\n loading: true,\n showTable: !this.collapse,\n showFilters: false,\n\n // table params\n headers: tableColumns[this.headersKey || this.model]\n .map(col => {\n col.text = col.verboseName\n col.value = col.field\n return col\n })\n .filter(col => !this.skipColumns.includes(col.verboseName)),\n page: 1,\n pageCount: 0,\n itemsPerPage: this.initialItemsPerPage,\n itemsPerPageItems: [3, 5, 10, 25, 50, 200, 500, 5000],\n sortByColumns: this.initialSort,\n\n // query params\n limit: null,\n offset: null,\n ordering: null,\n errorMessage: null,\n searchText: '',\n filterParams: {},\n queryParams: {}\n }\n },\n watch: {\n params(newParams, oldParams) {\n if (!isEqual(newParams, oldParams)) {\n this.fetchData()\n }\n },\n page() {\n this.updateTable()\n },\n sortByColumns() {\n this.updateTable()\n },\n itemsPerPage() {\n this.updateTable()\n },\n data() {\n this.updateTable()\n }\n },\n created() {\n this.fetchData = debounce(this._fetchData, 500)\n this.updateTable()\n },\n methods: {\n changeSort(column) {\n let sort = this.sortByColumns\n\n if (sort.includes(column)) {\n // Make ordering column -> None\n sort = sort.filter(columns => columns !== column)\n } else if (sort.includes(`-${column}`)) {\n // Make ordering -column -> column\n sort = sort.filter(columns => columns !== `-${column}`)\n sort.push(column)\n } else {\n // Make ordering None -> -column\n sort.push(`-${column}`)\n }\n\n // Move pk to last if exist\n sort.push(sort.splice(sort.indexOf('pk'), 1)[0])\n sort.push(sort.splice(sort.indexOf('-pk'), 1)[0])\n\n this.sortByColumns = sort\n },\n filterSearch(value, field, filter = 'icontains') {\n field = field.split('.').join('__')\n value = Array.isArray(value) ? value.join(',') : value\n\n // Ensure only one filter per key\n this.filterParams = Object.keys(this.filterParams)\n .filter(param => {\n const filterWithSameKey = `${field}__`\n return !param.includes(filterWithSameKey)\n })\n .reduce((obj, key) => {\n obj[key] = this.filterParams[key]\n return obj\n }, {})\n\n this.filterParams[`${field}__${filter}`] = value\n this.offset = null\n this.page = 1\n this.fetchData()\n\n // Track when user makes any string search\n window.analytics.track('Filter from table column', {\n model: this.model,\n query: this.filterParams\n })\n },\n\n columnValueList(val) {\n return this.items.map(d => d[val])\n },\n\n updateSearchText(text) {\n this.searchText = text\n this.offset = null\n this.page = 1\n this.fetchData()\n\n // Track when user makes any string search\n window.analytics.track('Searched From Table', {\n model: this.model,\n search: this.searchText,\n query: this.queryParams\n })\n },\n\n tableValue(item, header) {\n let value = this.getValue(item, header)\n return this.highlightText(value, header)\n },\n\n formatValue(value) {\n return this.highlightText(value)\n },\n\n getValue(item, header) {\n return this.$get(\n item,\n header.accessor || header.field,\n header.default || '-'\n )\n },\n\n isTableSmall() {\n let tables = document.getElementsByClassName('v-datatable__actions')\n return tables && tables.length > 0 && tables[0].offsetWidth < 400\n },\n\n classValue(item, accessor) {\n let value = this.$get(item, accessor)\n .toString()\n .toLowerCase()\n return `status-${value}`\n },\n\n highlightText(rawText, header) {\n header = header.value.split('.').join('__')\n const filterParams = {\n ...this.filterParams,\n search: this.searchText\n }\n let keywords = Object.entries(filterParams)\n .filter(([key, value]) => {\n return (\n value &&\n typeof value !== 'boolean' &&\n (key === 'search' || key.replace(/(__icontains)/, '') === header)\n )\n })\n .map(([, value]) => value.toString().toLowerCase())\n\n let { text, element } = this.$getInnerHtmlText(rawText)\n let shownText = text ? text.toString().slice(0, 41) : ''\n let highlightText = shownText\n\n // Search for match of full string if not each word\n let wordsToHighlight = []\n keywords.forEach(keyword => {\n keyword = keyword.trim()\n if (keyword && shownText.toLowerCase().includes(keyword)) {\n wordsToHighlight.push(keyword)\n } else {\n keyword.split(' ').forEach(word => {\n if (word && shownText.toLowerCase().includes(word)) {\n wordsToHighlight.push(word)\n }\n })\n }\n })\n\n // Highlight the matches\n if (wordsToHighlight.length) {\n const keywordRegex = new RegExp(`(${wordsToHighlight.join('|')})`, 'gi')\n highlightText = text\n .toString()\n .replace(keywordRegex, '<span class=\"highlight\">$1</span>')\n }\n return this.$setInnerHtmlText(element, highlightText)\n },\n\n updateTable() {\n this.limit = this.itemsPerPage\n this.offset = this.itemsPerPage * (this.page - 1)\n this.ordering = this.sortByColumns.join(',')\n\n if (this.filterRemotely) {\n // Make server-side filtering\n this.fetchData()\n } else {\n // Local Items\n this.loading = true\n let rows = this.data\n\n if (this.searchText) {\n rows = rows.filter((row) =>\n Object.values(row).some((column) =>\n column.toLowerCase().includes(this.searchText.toLowerCase())\n )\n )\n }\n if (this.sortByColumns.length) {\n const columns = []\n const order = []\n this.sortByColumns.forEach(param => {\n const [first, ...rest] = param\n if (first === '-') {\n columns.push(rest.join(''))\n order.push('desc')\n } else {\n columns.push(param)\n order.push('asc')\n }\n })\n rows = orderBy(rows, columns, order)\n }\n rows = rows.slice(this.offset, this.offset + this.limit)\n this.items = rows\n this.totalItems = this.data.length\n this.pages = Math.ceil(this.totalItems / this.items)\n this.loading = false\n }\n },\n\n _fetchData() {\n this.loading = true\n const {\n model,\n limit,\n offset,\n ordering,\n params,\n filterParams,\n searchText\n } = this\n\n this.queryParams = {\n ...params,\n ...filterParams,\n limit,\n offset,\n search: searchText,\n ordering,\n }\n\n this.$emit('fetch-data', this.queryParams)\n\n fetchListRecords(model, this.queryParams)\n .then(response => {\n if (searchText === this.searchText) {\n this.items = response.results\n this.totalItems = response.count\n this.pages = Math.ceil(response.count / limit)\n this.errorMessage = response.error || ''\n }\n })\n .catch(error => {\n let errorMessage = `Search failed: `\n if (error.response) {\n const errorMessages = Object.values(error.response.data).flat()\n errorMessage += errorMessages.length ? errorMessages[0] : '...'\n }\n this.$store.dispatch(SHOW_ALERT, {\n error: errorMessage\n })\n })\n .finally(() => (this.loading = false))\n },\n\n onClickRecord(value, model) {\n if (this.openRecordsInNewTab) {\n const queryParams = {\n individual: 'bioModel',\n sample: 'bioModel',\n experiment: 'bioModel'\n }\n const queryParam = this.$get(queryParams, model, model)\n window.open(`/?${queryParam}=${value}`, '_blank')\n } else {\n this.$store.dispatch(SHOW_PANEL, {\n [model]: value\n })\n }\n },\n\n toggleColumnFilters() {\n this.showFilters = !this.showFilters\n if (!this.showFilters) {\n this.filterParams = {}\n this.fetchData()\n }\n },\n }\n}\n</script>\n\n<style lang=\"scss\">\n\n.isabl-base-card .v-data-table {\n th.column.sortable.active.desc button.sort-icon {\n transform: rotate(-180deg);\n }\n th.column.sortable.active button.sort-icon {\n color: var(--v-primary-base);\n }\n th.column.sortable button {\n font-size: 13px !important;\n margin-left: 4px;\n }\n .v-data-table__wrapper {\n max-height: 300px;\n overflow-y: auto;\n }\n .table-cell {\n height: 25px !important;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n max-width: 300px;\n padding-left: 5px !important;\n .v-chip.v-size--small {\n height: 20px;\n }\n }\n tr.table-headers.table-cell {\n position: sticky;\n top: 0;\n background: white;\n cursor: pointer;\n height: 32px;\n th {\n // border-bottom: thin solid rgba(0,0,0,.12);\n background: rgba(0,0,0,.04);\n }\n }\n &.theme--dark, &.theme--dark tr.table-headers.table-cell th {\n background: var(--v-surface-base);\n }\n &.theme--dark tr.column-filters th {\n background: var(--v-surface-base);\n }\n th.column.sortable {\n padding: 0px 5px;\n }\n tr.column-filters th {\n height: 32px;\n }\n .v-data-table__empty-wrapper>td {\n padding: 0px;\n }\n}\n\n.table-filter-input {\n min-width: 150px;\n .v-input__icon--append .v-icon {\n font-size: 14px;\n }\n input {\n font-size: 14px;\n font-weight: 400;\n padding-left: 6px !important;\n }\n label {\n font-size: 13px;\n padding-left: 6px;\n }\n}\n.column-filters {\n position: sticky;\n top: 25px;\n background: white;\n .v-select {\n margin: 0px;\n .v-input__slot, input {\n height: 25px;\n }\n .v-icon {\n font-size: 16px;\n }\n }\n .v-select__selections {\n display: contents;\n max-width: 120px;\n font-size: 14px;\n font-weight: 400;\n span {\n padding: 0px;\n }\n }\n .v-text-field .v-input__append-inner {\n padding: 0px;\n }\n}\n\n.v-list .v-list-item {\n min-height: 25px;\n .v-list-item__title {\n font-size: 14px;\n font-weight: 400;\n }\n .v-list-item__content {\n padding: 0px 10px;\n }\n}\n\ndiv.v-list--dense .v-list-item {\n min-height: 25px;\n padding: 0px;\n .v-list-item__action {\n margin: 0px;\n padding: 0px 4px;\n }\n .v-list-item__title {\n font-size: 14px;\n font-weight: 400;\n }\n .v-list-item__content {\n padding: 0px;\n }\n}\n\n.v-select-list {\n overflow: hidden;\n}\n\n.v-menu__content:not(.v-autocomplete__content) {\n .v-list__tile {\n height: 23px;\n }\n}\ntable.v-table tbody tr {\n border: 0px !important;\n}\n\ntable.v-table thead {\n tr {\n height: 30px !important;\n }\n tr.v-datatable__progress {\n height: 0px !important;\n border-top: 1px solid rgba(0, 0, 0, 0.05);\n }\n th {\n padding-left: 5px !important;\n padding-right: 5px !important;\n }\n}\n\ndiv.v-data-table__actions {\n flex-wrap: nowrap;\n &__pagination {\n width: 100%;\n min-width: 170px;\n margin: 0 10px 0 10px;\n }\n &__select {\n white-space: normal;\n overflow: hidden;\n justify-content: flex-start;\n margin-right: 5px;\n max-width: 100px;\n .v-select {\n margin-left: 25px;\n margin-right: 0px;\n margin-top: 0px;\n margin-bottom: 0px;\n }\n }\n &__range-controls {\n width: 100%;\n }\n button {\n margin: 0px;\n margin-right: 5px;\n }\n}\n\n.section-toggle {\n cursor: pointer;\n}\n\n.isabl-base-card .v-data-footer {\n font-size: 12px;\n padding: 0px;\n div.v-select__selection {\n font-size: 12px;\n }\n div.v-select {\n margin: 4px 0px 4px 16px;\n }\n}\n.v-data-footer__select\n.v-menu__content .v-list-item {\n min-height: 25px;\n font-size: 14px;\n .v-list-item__content {\n padding: 0px;\n }\n}\n// Style taken from github\ncode.markdown-style {\n padding: 0.2em 0.4em;\n margin: 0;\n font-size: 85%;\n background-color: rgba(175,184,193,0.2);\n border-radius: 6px;\n color: #24292f;\n}\n\n.v-data-table .v-data-footer {\n .v-data-footer__select {\n margin-left: 0;\n margin-right: auto;\n }\n .v-data-footer__pagination {\n margin-left: auto;\n margin-right: auto;\n }\n .v-data-footer__icons-before {\n margin-left: auto;\n margin-right: 0;\n }\n .v-data-footer__icons-after {\n margin-left: 0;\n margin-right: 0;\n }\n}\n\n</style>\n"]
|
|
251047
|
+
sourcesContent: ["<template>\n <v-card :class=\"['isabl-base-card no-shadow', cardClasses]\">\n <base-section-title\n :show-more=\"showTable\"\n @toggle-show-more=\"showTable = !showTable\"\n >\n <template v-slot:title>\n {{ title || model | capitalize }}\n <v-tooltip\n v-if=\"infoText\"\n top\n >\n <template v-slot:activator=\"{ on }\">\n <v-icon\n small\n style=\"cursor: help\"\n color=\"grey lighten-2\"\n class=\"pl-1\"\n v-on=\"on\"\n >\n info\n </v-icon>\n </template>\n <span text-center>{{ infoText }}</span>\n </v-tooltip>\n </template>\n <template v-slot:actions>\n <data-table-actions\n v-if=\"items\"\n :model=\"model\"\n :items=\"items\"\n :headers=\"headers\"\n :global-search=\"globalSearch\"\n :query-params=\"queryParams\"\n @fetch-data=\"updateSearchText\"\n />\n </template>\n </base-section-title>\n\n <v-data-table\n v-show=\"showTable\"\n :headers=\"headers\"\n :items=\"items\"\n :server-items-length=\"totalItems\"\n :loading=\"loading\"\n :items-per-page.sync=\"itemsPerPage\"\n :page.sync=\"page\"\n :footer-props=\"{ itemsPerPageOptions: itemsPerPageItems, itemsPerPageText: '' }\"\n loader-height=\"2\"\n calculate-widths\n hide-default-header\n dense\n @page-count=\"pageCount = $event\"\n >\n <template v-slot:header=\"{ props }\">\n <tr class=\"table-headers text-left table-cell py-0 font-normal\">\n <th\n v-for=\"header in props.headers\"\n :key=\"header.text\"\n :class=\"[\n 'column sortable',\n sortByColumns.includes(header.value)\n ? 'asc active'\n : '',\n sortByColumns.includes(`-${header.value}`)\n ? 'desc active'\n : ''\n ]\"\n >\n <v-hover v-slot=\"{ hover }\">\n <span\n :class=\"[\n 'font-weight-medium',\n 'grey--text',\n ]\"\n >\n {{ header.text }}\n <v-icon\n :color=\"\n hover || sortByColumns.includes(header.value) || sortByColumns.includes(`-${header.value}`)\n ? 'text--darken-2'\n : 'transparent'\n \"\n class=\"sort-icon\"\n style=\"vertical-align: middle\"\n small\n @click=\"changeSort(header.value)\"\n >arrow_downward</v-icon>\n <v-icon\n :color=\"hover ? 'text--darken-2' : 'transparent'\"\n class=\"\"\n style=\"vertical-align: middle\"\n small\n @click=\"toggleColumnFilters\"\n >filter_list</v-icon>\n </span>\n </v-hover>\n </th>\n </tr>\n <tr\n v-if=\"showFilters\"\n class=\"column-filters\"\n >\n <th\n v-for=\"header in props.headers\"\n :key=\"header.text\"\n class=\"pa-0 ma-0\"\n >\n <data-table-date-picker\n v-if=\"header.filterType === 'date'\"\n :header=\"header\"\n @filter-search=\"filterSearch\"\n />\n <data-table-select-filter\n v-else\n :header=\"header\"\n :model=\"title || model\"\n @filter-search=\"filterSearch\"\n />\n </th>\n </tr>\n </template>\n <template v-slot:item=\"attrs\">\n <tr>\n <td\n v-for=\"(header, index) in attrs.headers\"\n :key=\"index + header.verboseName\"\n class=\"text-left table-cell py-0 text-body-1\"\n >\n <!-- if value is a model(s) link -->\n <span v-if=\"header.model\">\n <span v-if=\"Array.isArray(getValue(attrs.item, header))\">\n <span\n v-for=\"(value, index) in getValue(attrs.item, header)\"\n :key=\"index\"\n class=\"active-link\"\n @click=\"onClickRecord(value, header.model)\"\n v-html=\"\n highlightText(value, header) +\n `${index + 1 < getValue(attrs.item, header).length ? ', ' : ''}`\n \"\n />\n </span>\n\n <span v-else>\n <span\n class=\"active-link\"\n @click=\"onClickRecord(getValue(attrs.item, header), header.model)\"\n v-html=\"tableValue(attrs.item, header)\"\n />\n </span>\n </span>\n\n <!-- if value is analysis' result -->\n <span\n v-else-if=\"header.field === 'status'\"\n :class=\"classValue(attrs.item, header.field)\"\n v-html=\"tableValue(attrs.item, header)\"\n />\n\n <div\n v-else-if=\"header.field === 'resultName'\"\n class=\"mr-2\"\n >\n <result-chip\n :result=\"attrs.item\"\n :result-index=\"itemsPerPage * (page - 1) + attrs.index\"\n show-all\n @display-result=\"$emit('display-result', $event)\"\n />\n </div>\n\n <span\n v-else-if=\"header.field === 'resultKey'\"\n class=\"mr-2\"\n >\n <code class=\"markdown-style\" v-html=\"tableValue(attrs.item, header)\"/>\n </span>\n\n <!-- any other case -->\n <span\n v-else\n v-html=\"tableValue(attrs.item, header)\"\n />\n </td>\n </tr>\n </template>\n\n <template v-slot:no-data>\n <td\n :colspan=\"headers.length\"\n class=\"text-left table-cell pa-0 text-body-1\"\n >{{ loading ? 'Querying records...' : errorMessage || 'No records found.' }}</td>\n </template>\n\n <template v-slot:loading>\n <td\n :colspan=\"headers.length\"\n class=\"text-left table-cell pa-0 text-body-1\"\n >Querying records...</td>\n </template>\n\n <template v-slot:no-results>\n <td\n :colspan=\"headers.length\"\n class=\"text-left table-cell pa-0 text-body-1\"\n >{{ loading ? 'Querying records...' : 'No records found.' }}</td>\n </template>\n\n <template v-slot:footer.page-text=\"{ pageStart, pageStop }\">\n <span class=\"text-body-1\">\n {{ pageStart }} - {{ pageStop }} of\n <span\n class=\"primary--text text-h6 mx-1\"\n >{{ totalItems | formatNumber }}</span>\n </span>\n </template>\n\n </v-data-table>\n </v-card>\n</template>\n\n<script>\nimport { fetchListRecords } from '@/utils/api'\nimport { SHOW_ALERT } from '@/store/actions/alert'\nimport { SHOW_PANEL } from '@/store/actions/panels'\nimport { tableColumns } from '@/utils/tableColumns'\nimport BaseSectionTitle from '@/components/base/BaseSectionTitle.vue'\nimport DataTableActions from '@/components/table/DataTableActions.vue'\nimport DataTableSelectFilter from '@/components/table/DataTableSelectFilter.vue'\nimport DataTableDatePicker from '@/components/table/DataTableDatePicker.vue'\nimport ResultChip from '@/components/analyses/ResultChip'\nimport debounce from 'lodash/debounce'\nimport isEqual from 'lodash/isEqual'\nimport orderBy from 'lodash/orderBy'\n\nexport default {\n name: 'DataTable',\n components: {\n BaseSectionTitle,\n DataTableActions,\n DataTableSelectFilter,\n DataTableDatePicker,\n ResultChip,\n },\n props: {\n model: {\n type: String,\n required: false\n },\n title: {\n type: String,\n default: ''\n },\n globalSearch: {\n type: Boolean,\n default: false\n },\n params: {\n type: Object,\n default: () => ({})\n },\n // skip columns using the verbose name\n skipColumns: {\n type: Array,\n default: () => []\n },\n // columns using the verbose name\n headersKey: {\n type: String,\n default: ''\n },\n cardClasses: {\n type: String,\n default: ''\n },\n collapse: {\n type: Boolean,\n default: false\n },\n infoText: {\n type: String,\n default: ''\n },\n openRecordsInNewTab: {\n type: Boolean,\n default: false\n },\n data: {\n type: Array,\n default: () => []\n },\n filterRemotely: {\n type: Boolean,\n default: true,\n },\n initialSort: {\n type: Array,\n default: () => [\"-pk\"]\n },\n initialItemsPerPage: {\n type: Number,\n default: 5,\n }\n },\n data() {\n return {\n items: this.filterRemotely ? [] : this.data,\n totalItems: 0,\n loading: true,\n showTable: !this.collapse,\n showFilters: false,\n\n // table params\n headers: tableColumns[this.headersKey || this.model]\n .map(col => {\n col.text = col.verboseName\n col.value = col.field\n return col\n })\n .filter(col => !this.skipColumns.includes(col.verboseName)),\n page: 1,\n pageCount: 0,\n itemsPerPage: this.initialItemsPerPage,\n itemsPerPageItems: [3, 5, 10, 25, 50, 200, 500, 5000],\n sortByColumns: this.initialSort,\n\n // query params\n limit: null,\n offset: null,\n ordering: null,\n errorMessage: null,\n searchText: '',\n filterParams: {},\n queryParams: {}\n }\n },\n watch: {\n params(newParams, oldParams) {\n if (!isEqual(newParams, oldParams)) {\n this.fetchData()\n }\n },\n page() {\n this.updateTable()\n },\n sortByColumns() {\n this.updateTable()\n },\n itemsPerPage() {\n this.updateTable()\n },\n data() {\n this.updateTable()\n }\n },\n created() {\n this.fetchData = debounce(this._fetchData, 500)\n this.updateTable()\n },\n methods: {\n changeSort(column) {\n let sort = this.sortByColumns\n\n if (sort.includes(column)) {\n // Make ordering column -> None\n sort = sort.filter(columns => columns !== column)\n } else if (sort.includes(`-${column}`)) {\n // Make ordering -column -> column\n sort = sort.filter(columns => columns !== `-${column}`)\n sort.push(column)\n } else {\n // Make ordering None -> -column\n sort.push(`-${column}`)\n }\n\n // Move pk to last if exist\n sort.push(sort.splice(sort.indexOf('pk'), 1)[0])\n sort.push(sort.splice(sort.indexOf('-pk'), 1)[0])\n\n this.sortByColumns = sort\n },\n filterSearch(value, field, filter = 'icontains') {\n field = field.split('.').join('__')\n value = Array.isArray(value) ? value.join(',') : value\n\n // Ensure only one filter per key\n this.filterParams = Object.keys(this.filterParams)\n .filter(param => {\n const filterWithSameKey = `${field}__`\n return !param.includes(filterWithSameKey)\n })\n .reduce((obj, key) => {\n obj[key] = this.filterParams[key]\n return obj\n }, {})\n\n this.filterParams[`${field}__${filter}`] = value\n this.offset = null\n this.page = 1\n this.fetchData()\n\n // Track when user makes any string search\n window.analytics.track('Filter from table column', {\n model: this.model,\n query: this.filterParams\n })\n },\n\n columnValueList(val) {\n return this.items.map(d => d[val])\n },\n\n updateSearchText(text) {\n this.searchText = text\n this.offset = null\n this.page = 1\n this.fetchData()\n\n // Track when user makes any string search\n window.analytics.track('Searched From Table', {\n model: this.model,\n search: this.searchText,\n query: this.queryParams\n })\n },\n\n tableValue(item, header) {\n let value = this.getValue(item, header)\n return this.highlightText(value, header)\n },\n\n formatValue(value) {\n return this.highlightText(value)\n },\n\n getValue(item, header) {\n return this.$get(\n item,\n header.accessor || header.field,\n header.default || '-'\n )\n },\n\n isTableSmall() {\n let tables = document.getElementsByClassName('v-datatable__actions')\n return tables && tables.length > 0 && tables[0].offsetWidth < 400\n },\n\n classValue(item, accessor) {\n let value = this.$get(item, accessor)\n .toString()\n .toLowerCase()\n return `status-${value}`\n },\n\n highlightText(rawText, header) {\n header = header.value.split('.').join('__')\n const filterParams = {\n ...this.filterParams,\n search: this.searchText\n }\n let keywords = Object.entries(filterParams)\n .filter(([key, value]) => {\n return (\n value &&\n typeof value !== 'boolean' &&\n (key === 'search' || key.replace(/(__icontains)/, '') === header)\n )\n })\n .map(([, value]) => value.toString().toLowerCase())\n\n let { text, element } = this.$getInnerHtmlText(rawText)\n let shownText = text ? text.toString().slice(0, 41) : ''\n let highlightText = shownText\n\n // Search for match of full string if not each word\n let wordsToHighlight = []\n keywords.forEach(keyword => {\n keyword = keyword.trim()\n if (keyword && shownText.toLowerCase().includes(keyword)) {\n wordsToHighlight.push(keyword)\n } else {\n keyword.split(' ').forEach(word => {\n if (word && shownText.toLowerCase().includes(word)) {\n wordsToHighlight.push(word)\n }\n })\n }\n })\n\n // Highlight the matches\n if (wordsToHighlight.length) {\n const keywordRegex = new RegExp(`(${wordsToHighlight.join('|')})`, 'gi')\n highlightText = text\n .toString()\n .replace(keywordRegex, '<span class=\"highlight\">$1</span>')\n }\n return this.$setInnerHtmlText(element, highlightText)\n },\n\n updateTable() {\n this.limit = this.itemsPerPage\n this.offset = this.itemsPerPage * (this.page - 1)\n this.ordering = this.sortByColumns.join(',')\n\n if (this.filterRemotely) {\n // Make server-side filtering\n this.fetchData()\n } else {\n // Local Items\n this.loading = true\n let rows = this.data\n\n if (this.searchText) {\n rows = rows.filter((row) =>\n Object.values(row).some((column) =>\n column.toLowerCase().includes(this.searchText.toLowerCase())\n )\n )\n }\n if (this.sortByColumns.length) {\n const columns = []\n const order = []\n this.sortByColumns.forEach(param => {\n const [first, ...rest] = param\n if (first === '-') {\n columns.push(rest.join(''))\n order.push('desc')\n } else {\n columns.push(param)\n order.push('asc')\n }\n })\n rows = orderBy(rows, columns, order)\n }\n rows = rows.slice(this.offset, this.offset + this.limit)\n this.items = rows\n this.totalItems = this.data.length\n this.pages = Math.ceil(this.totalItems / this.items)\n this.loading = false\n }\n },\n\n _fetchData() {\n this.loading = true\n const {\n model,\n limit,\n offset,\n ordering,\n params,\n filterParams,\n searchText\n } = this\n\n this.queryParams = {\n ...params,\n ...filterParams,\n limit,\n offset,\n search: searchText,\n ordering,\n }\n\n this.$emit('fetch-data', this.queryParams)\n\n fetchListRecords(model, this.queryParams)\n .then(response => {\n if (searchText === this.searchText) {\n this.items = response.results\n this.totalItems = response.count\n this.pages = Math.ceil(response.count / limit)\n this.errorMessage = response.error || ''\n }\n })\n .catch(error => {\n let errorMessage = `Search failed: `\n if (error.response) {\n const errorMessages = Object.values(error.response.data).flat()\n errorMessage += errorMessages.length ? errorMessages[0] : '...'\n }\n this.$store.dispatch(SHOW_ALERT, {\n error: errorMessage\n })\n })\n .finally(() => (this.loading = false))\n },\n\n onClickRecord(value, model) {\n if (this.openRecordsInNewTab) {\n const queryParams = {\n individual: 'bioModel',\n sample: 'bioModel',\n experiment: 'bioModel'\n }\n const queryParam = this.$get(queryParams, model, model)\n window.open(`/?${queryParam}=${value}`, '_blank')\n } else {\n this.$store.dispatch(SHOW_PANEL, {\n [model]: value\n })\n }\n },\n\n toggleColumnFilters() {\n this.showFilters = !this.showFilters\n if (!this.showFilters) {\n this.filterParams = {}\n this.fetchData()\n }\n },\n }\n}\n</script>\n\n<style lang=\"scss\">\n\n.isabl-base-card .v-data-table {\n th.column.sortable.active.desc button.sort-icon {\n transform: rotate(-180deg);\n }\n th.column.sortable.active button.sort-icon {\n color: var(--v-primary-base);\n }\n th.column.sortable button {\n font-size: 13px !important;\n margin-left: 4px;\n }\n .v-data-table__wrapper {\n max-height: 300px;\n overflow-y: auto;\n }\n .table-cell {\n height: 25px !important;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n max-width: 300px;\n padding-left: 5px !important;\n .v-chip.v-size--small {\n height: 20px;\n }\n }\n tr.table-headers.table-cell {\n position: sticky;\n top: 0;\n background: white;\n cursor: pointer;\n height: 32px;\n th {\n // border-bottom: thin solid rgba(0,0,0,.12);\n background: rgba(0,0,0,.04);\n }\n }\n &.theme--dark, &.theme--dark tr.table-headers.table-cell th {\n background: var(--v-surface-base);\n }\n &.theme--dark tr.column-filters th {\n background: var(--v-surface-base);\n }\n th.column.sortable {\n padding: 0px 5px;\n }\n tr.column-filters th {\n height: 32px;\n }\n .v-data-table__empty-wrapper>td {\n padding: 0px;\n }\n}\n\n.table-filter-input {\n min-width: 150px;\n .v-input__icon--append .v-icon {\n font-size: 14px;\n }\n input {\n font-size: 14px;\n font-weight: 400;\n padding-left: 6px !important;\n }\n label {\n font-size: 13px;\n padding-left: 6px;\n }\n}\n.column-filters {\n position: sticky;\n top: 25px;\n background: white;\n z-index: 10;\n .v-select {\n margin: 0px;\n .v-input__slot, input {\n height: 25px;\n }\n .v-icon {\n font-size: 16px;\n }\n }\n .v-select__selections {\n display: contents;\n max-width: 120px;\n font-size: 14px;\n font-weight: 400;\n span {\n padding: 0px;\n }\n }\n .v-text-field .v-input__append-inner {\n padding: 0px;\n }\n}\n\n.v-list .v-list-item {\n min-height: 25px;\n .v-list-item__title {\n font-size: 14px;\n font-weight: 400;\n }\n .v-list-item__content {\n padding: 0px 10px;\n }\n}\n\ndiv.v-list--dense .v-list-item {\n min-height: 25px;\n padding: 0px;\n .v-list-item__action {\n margin: 0px;\n padding: 0px 4px;\n }\n .v-list-item__title {\n font-size: 14px;\n font-weight: 400;\n }\n .v-list-item__content {\n padding: 0px;\n }\n}\n\n.v-select-list {\n overflow: hidden;\n}\n\n.v-menu__content:not(.v-autocomplete__content) {\n .v-list__tile {\n height: 23px;\n }\n}\ntable.v-table tbody tr {\n border: 0px !important;\n}\n\ntable.v-table thead {\n tr {\n height: 30px !important;\n }\n tr.v-datatable__progress {\n height: 0px !important;\n border-top: 1px solid rgba(0, 0, 0, 0.05);\n }\n th {\n padding-left: 5px !important;\n padding-right: 5px !important;\n }\n}\n\ndiv.v-data-table__actions {\n flex-wrap: nowrap;\n &__pagination {\n width: 100%;\n min-width: 170px;\n margin: 0 10px 0 10px;\n }\n &__select {\n white-space: normal;\n overflow: hidden;\n justify-content: flex-start;\n margin-right: 5px;\n max-width: 100px;\n .v-select {\n margin-left: 25px;\n margin-right: 0px;\n margin-top: 0px;\n margin-bottom: 0px;\n }\n }\n &__range-controls {\n width: 100%;\n }\n button {\n margin: 0px;\n margin-right: 5px;\n }\n}\n\n.section-toggle {\n cursor: pointer;\n}\n\n.isabl-base-card .v-data-footer {\n font-size: 12px;\n padding: 0px;\n div.v-select__selection {\n font-size: 12px;\n }\n div.v-select {\n margin: 4px 0px 4px 16px;\n }\n}\n.v-data-footer__select\n.v-menu__content .v-list-item {\n min-height: 25px;\n font-size: 14px;\n .v-list-item__content {\n padding: 0px;\n }\n}\n// Style taken from github\ncode.markdown-style {\n padding: 0.2em 0.4em;\n margin: 0;\n font-size: 85%;\n background-color: rgba(175,184,193,0.2);\n border-radius: 6px;\n color: #24292f;\n}\n\n.v-data-table .v-data-footer {\n .v-data-footer__select {\n margin-left: 0;\n margin-right: auto;\n }\n .v-data-footer__pagination {\n margin-left: auto;\n margin-right: auto;\n }\n .v-data-footer__icons-before {\n margin-left: auto;\n margin-right: 0;\n }\n .v-data-footer__icons-after {\n margin-left: 0;\n margin-right: 0;\n }\n}\n\n</style>\n"]
|
|
251048
251048
|
},
|
|
251049
251049
|
_coverageSchema: "43e27e138ebf9cfc5966b082cf9a028302ed4184",
|
|
251050
|
-
hash: "
|
|
251050
|
+
hash: "235fafbf88a72a48e239d67dc7b99e287750338d"
|
|
251051
251051
|
};
|
|
251052
251052
|
var coverage = global[gcv] || (global[gcv] = {});
|
|
251053
251053
|
|
|
@@ -251906,8 +251906,8 @@ var DataTablevue_type_style_index_0_lang_scss_ = __webpack_require__("7bec");
|
|
|
251906
251906
|
|
|
251907
251907
|
var DataTable_component = normalizeComponent(
|
|
251908
251908
|
table_DataTablevue_type_script_lang_js_,
|
|
251909
|
-
|
|
251910
|
-
|
|
251909
|
+
DataTablevue_type_template_id_31c65eb2_render,
|
|
251910
|
+
DataTablevue_type_template_id_31c65eb2_staticRenderFns,
|
|
251911
251911
|
false,
|
|
251912
251912
|
null,
|
|
251913
251913
|
null,
|
|
@@ -265126,12 +265126,12 @@ var ProjectPanelvue_type_template_id_7c1bc440_staticRenderFns = []
|
|
|
265126
265126
|
|
|
265127
265127
|
// CONCATENATED MODULE: ./src/components/projects/ProjectPanel.vue?vue&type=template&id=7c1bc440&
|
|
265128
265128
|
|
|
265129
|
-
// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"d220a428-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/dashboard/BaseDashboard.vue?vue&type=template&id=
|
|
265130
|
-
var
|
|
265131
|
-
var
|
|
265129
|
+
// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"d220a428-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/dashboard/BaseDashboard.vue?vue&type=template&id=191c4226&
|
|
265130
|
+
var BaseDashboardvue_type_template_id_191c4226_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{ref:"dashboard"},[_c('v-card',{staticClass:"isabl-base-card",attrs:{"flat":""}},[_c('dc-graph',{attrs:{"model":_vm.model,"params":_vm.params,"items":_vm.items,"figures":_vm.figures,"loading":_vm.loading,"max-records":_vm.maxRecords,"total-items":_vm.totalItems,"is-embedded":_vm.isEmbedded},on:{"set-max-records":_vm.setMaxRecords,"set-options":_vm.setOptions}})],1)],1)}
|
|
265131
|
+
var BaseDashboardvue_type_template_id_191c4226_staticRenderFns = []
|
|
265132
265132
|
|
|
265133
265133
|
|
|
265134
|
-
// CONCATENATED MODULE: ./src/components/dashboard/BaseDashboard.vue?vue&type=template&id=
|
|
265134
|
+
// CONCATENATED MODULE: ./src/components/dashboard/BaseDashboard.vue?vue&type=template&id=191c4226&
|
|
265135
265135
|
|
|
265136
265136
|
// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"d220a428-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/dashboard/DcGraph.vue?vue&type=template&id=7d68029b&
|
|
265137
265137
|
var DcGraphvue_type_template_id_7d68029b_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{ref:"main",class:['main-dc', !_vm.isEmbedded ? 'px-2' : '']},[_c('div',{directives:[{name:"show",rawName:"v-show",value:(_vm.loading),expression:"loading"}],staticClass:"overlay"},[_c('v-progress-circular',{staticClass:"loading",attrs:{"width":4,"size":40,"indeterminate":"","color":"primary"}}),_c('div',{staticClass:"mt-6"},[_vm._v("loading records...")])],1),_c('transition',{attrs:{"name":"slide-fade"}},[_c('data-table',{directives:[{name:"show",rawName:"v-show",value:(_vm.showPrefilterTable),expression:"showPrefilterTable"}],attrs:{"model":_vm.model,"params":_vm.params,"open-records-in-new-tab":!_vm.isEmbedded,"title":"Import Into dashboard","info-text":"Search and filter the records you may want to import into the interactive dashboard.","card-classes":"elevation-0 pa-0 mb-12"},on:{"fetch-data":_vm.setOptions}})],1),_c('div',{directives:[{name:"observe-visibility",rawName:"v-observe-visibility",value:(_vm.onVisible),expression:"onVisible"}],staticClass:"dashboard-graphs dc-data-count",attrs:{"id":("dc-data-count-" + _vm.uuid)}},[_c('v-container',{attrs:{"fluid":""}},[_c('v-row',{staticClass:"pb-6 justify-space-between"},[_c('v-col',{staticClass:"pa-0",attrs:{"cols":"4"}},[_c('h2',{staticClass:"isabl-section-title text-left"},[_vm._v(_vm._s(_vm._f("capitalize")(_vm.title || 'Interactive Dashboard')))])]),_c('v-col',{staticClass:"text-center pa-0",attrs:{"cols":"4"}},[_c('span',{staticClass:"filter-count primary--text"}),_vm._v(" selected out of\n "),_c('span',{staticClass:"total-count primary--text"}),(_vm.totalItems && _vm.totalItems > _vm.maxRecords)?_c('span',{staticClass:"total-items"},[_vm._v("\n /\n "),_c('span',{staticClass:"primary--text"},[_c('b',[_vm._v(_vm._s(_vm._f("formatNumber")(_vm.totalItems)))])])]):_vm._e(),_vm._v("\n records\n\n "),(_vm.totalItems && _vm.totalItems > _vm.maxRecords)?_c('v-tooltip',{attrs:{"top":""},scopedSlots:_vm._u([{key:"activator",fn:function(ref){
|
|
@@ -291761,7 +291761,7 @@ var DcGraph_component = normalizeComponent(
|
|
|
291761
291761
|
// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/@vue/cli-plugin-babel/node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/dashboard/BaseDashboard.vue?vue&type=script&lang=js&
|
|
291762
291762
|
var cov_21s3whnekh = function () {
|
|
291763
291763
|
var path = "/Users/juanes/papaemmelab/isabl_web/src/components/dashboard/BaseDashboard.vue";
|
|
291764
|
-
var hash = "
|
|
291764
|
+
var hash = "0b4078169eae16bef6c925f7ea045fdcabd12d44";
|
|
291765
291765
|
var global = new Function("return this")();
|
|
291766
291766
|
var gcv = "__coverage__";
|
|
291767
291767
|
var coverageData = {
|
|
@@ -292653,10 +292653,10 @@ var cov_21s3whnekh = function () {
|
|
|
292653
292653
|
mappings: ";;;;;;;;;;;;;;;;;;;;AAoBA;AACA;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;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;AACA",
|
|
292654
292654
|
file: "BaseDashboard.vue",
|
|
292655
292655
|
sourceRoot: "src/components/dashboard",
|
|
292656
|
-
sourcesContent: ["<template>\n <div ref=\"dashboard\">\n <v-card flat class=\"isabl-base-card\">\n <dc-graph\n :model=\"model\"\n :params=\"params\"\n :items=\"items\"\n :figures=\"figures\"\n :loading=\"loading\"\n :max-records=\"maxRecords\"\n :total-items=\"totalItems\"\n :is-embedded=\"isEmbedded\"\n @set-max-records=\"setMaxRecords\"\n @set-options=\"setOptions\"\n />\n </v-card>\n </div>\n</template>\n\n<script>\
|
|
292656
|
+
sourcesContent: ["<template>\n <div ref=\"dashboard\">\n <v-card flat class=\"isabl-base-card\">\n <dc-graph\n :model=\"model\"\n :params=\"params\"\n :items=\"items\"\n :figures=\"figures\"\n :loading=\"loading\"\n :max-records=\"maxRecords\"\n :total-items=\"totalItems\"\n :is-embedded=\"isEmbedded\"\n @set-max-records=\"setMaxRecords\"\n @set-options=\"setOptions\"\n />\n </v-card>\n </div>\n</template>\n\n<script>\nimport BasePanel from '@/components/base/BasePanel.vue'\nimport BaseSectionTitle from '@/components/base/BaseSectionTitle.vue'\nimport DataTable from '@/components/table/DataTable.vue'\nimport DcGraph from '@/components/dashboard/DcGraph.vue'\nimport { fetchListRecords } from '@/utils/api'\nimport { SHOW_ALERT } from '@/store/actions/alert'\n\nexport default {\n name: 'BaseDashboard',\n components: {\n BasePanel,\n BaseSectionTitle,\n DataTable,\n DcGraph\n },\n props: {\n params: {\n type: Object,\n default: () => ({})\n },\n isEmbedded: {\n type: Boolean,\n default: true\n },\n model: {\n type: String,\n required: true\n },\n figures: {\n type: Array,\n required: true\n },\n requiredFields: {\n type: Array,\n default: () => []\n }\n },\n data() {\n return {\n items: [],\n loading: false,\n maxRecords: 500,\n options: {},\n totalItems: null\n }\n },\n computed: {\n queryFields() {\n const fields = this.figures.map(figure => figure.queryFields)\n // flat and remove duplicates\n return [...new Set(fields.flat())]\n },\n fields() {\n return [\n ...new Set([\n 'pk',\n 'created',\n 'modified',\n 'analytics',\n ...this.requiredFields,\n ...this.queryFields\n ])\n ]\n .filter(i => !!i)\n .map(i => i.replace(/\\./g, '__'))\n }\n },\n created() {\n this.loading = true\n },\n methods: {\n setOptions(options) {\n delete options.offset\n this.options = options\n this.fetchData()\n },\n setMaxRecords(value) {\n if (value !== this.maxRecords) {\n this.maxRecords = value\n this.fetchData()\n }\n },\n fetchData() {\n this.loading = true\n\n const fields = this.fields.map(i => i.replace(/\\./g, '__'))\n fetchListRecords(this.model, {\n ...this.options,\n ...this.params,\n limit: this.maxRecords,\n distinct: true,\n fields,\n 'fields!': ''\n })\n .then(response => {\n this.items = response.results.map(r => {\n const result = {\n ...r,\n ...r.analytics\n }\n delete result.analytics\n return result\n })\n this.totalItems = response.count\n })\n .catch(error => {\n let errorMessage = `Search failed: `\n if (error.response) {\n const errorMessages = Object.values(error.response.data).flat()\n errorMessage += errorMessages.length ? errorMessages[0] : '...'\n }\n this.$store.dispatch(SHOW_ALERT, {\n error: errorMessage\n })\n })\n .finally(() => (this.loading = false))\n }\n }\n}\n</script>\n<style lang=\"scss\">\n.dashboard .panels {\n max-width: 95%;\n max-width: 1800px;\n padding-bottom: 100px;\n}\n</style>\n"]
|
|
292657
292657
|
},
|
|
292658
292658
|
_coverageSchema: "43e27e138ebf9cfc5966b082cf9a028302ed4184",
|
|
292659
|
-
hash: "
|
|
292659
|
+
hash: "0b4078169eae16bef6c925f7ea045fdcabd12d44"
|
|
292660
292660
|
};
|
|
292661
292661
|
var coverage = global[gcv] || (global[gcv] = {});
|
|
292662
292662
|
|
|
@@ -292887,8 +292887,8 @@ var BaseDashboardvue_type_style_index_0_lang_scss_ = __webpack_require__("f624")
|
|
|
292887
292887
|
|
|
292888
292888
|
var BaseDashboard_component = normalizeComponent(
|
|
292889
292889
|
dashboard_BaseDashboardvue_type_script_lang_js_,
|
|
292890
|
-
|
|
292891
|
-
|
|
292890
|
+
BaseDashboardvue_type_template_id_191c4226_render,
|
|
292891
|
+
BaseDashboardvue_type_template_id_191c4226_staticRenderFns,
|
|
292892
292892
|
false,
|
|
292893
292893
|
null,
|
|
292894
292894
|
null,
|