From 9d5a9843e515cc1038421d13a789529523e2337f Mon Sep 17 00:00:00 2001 From: faxblaster Date: Wed, 21 Jul 2021 09:19:58 -0400 Subject: [PATCH 01/38] add Customers listing page --- dist/js/tool.js | 887 ++++++++++++++---- resources/js/components/ChargesTable.vue | 159 ++-- resources/js/components/CustomersTable.vue | 137 +++ ...aginationLinks.vue => PaginationLinks.vue} | 4 +- resources/js/tool.js | 24 +- resources/js/views/Customers.vue | 15 + resources/views/navigation.blade.php | 6 + routes/api.php | 2 + src/Clients/StripeClient.php | 10 + src/Http/StripeCustomersController.php | 19 + 10 files changed, 980 insertions(+), 283 deletions(-) create mode 100644 resources/js/components/CustomersTable.vue rename resources/js/components/{ChargesPaginationLinks.vue => PaginationLinks.vue} (93%) create mode 100644 resources/js/views/Customers.vue create mode 100644 src/Http/StripeCustomersController.php diff --git a/dist/js/tool.js b/dist/js/tool.js index 1fa5f6f..53df835 100644 --- a/dist/js/tool.js +++ b/dist/js/tool.js @@ -1780,14 +1780,19 @@ Nova.booting(function (Vue, router) { Vue.config.devtools = true; router.addRoutes([{ - name: 'nova-stripe', - path: '/nova-stripe', + name: "nova-stripe", + path: "/nova-stripe", component: __webpack_require__(6) }, { - name: 'charge-detail', - path: '/nova-stripe/charge/:chargeId', + name: "charge-detail", + path: "/nova-stripe/charge/:chargeId", component: __webpack_require__(24), props: true + }, { + name: "customer-list", + path: "/nova-stripe/customers", + component: __webpack_require__(37), + props: true }]); }); @@ -2236,7 +2241,7 @@ exports = module.exports = __webpack_require__(1)(false); // module -exports.push([module.i, "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n/* Scoped Styles */\n", ""]); +exports.push([module.i, "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n/* Scoped Styles */\n", ""]); // exports @@ -2247,8 +2252,8 @@ exports.push([module.i, "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\ "use strict"; Object.defineProperty(__webpack_exports__, "__esModule", { value: true }); -/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__ChargesPaginationLinks_vue__ = __webpack_require__(19); -/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__ChargesPaginationLinks_vue___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0__ChargesPaginationLinks_vue__); +/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__PaginationLinks_vue__ = __webpack_require__(47); +/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__PaginationLinks_vue___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0__PaginationLinks_vue__); /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__utils_moneyFormat__ = __webpack_require__(3); // // @@ -2320,13 +2325,21 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true }); // // // +// +// +// +// +// +// +// +// /* harmony default export */ __webpack_exports__["default"] = ({ components: { - 'charges-pagination-links': __WEBPACK_IMPORTED_MODULE_0__ChargesPaginationLinks_vue___default.a + "charges-pagination-links": __WEBPACK_IMPORTED_MODULE_0__PaginationLinks_vue___default.a }, data: function data() { @@ -2346,7 +2359,7 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true }); listCharges: function listCharges(params) { var _this = this; - Nova.request().get('/nova-vendor/nova-stripe/stripe/charges', { params: params }).then(function (response) { + Nova.request().get("/nova-vendor/nova-stripe/stripe/charges", { params: params }).then(function (response) { _this.charges = response.data.charges.data; _this.hasMore = response.data.charges.has_more; _this.initialLoading = false; @@ -2356,14 +2369,16 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true }); nextPage: function nextPage() { this.loading = true; - this.listCharges({ 'starting_after': this.charges[this.charges.length - 1].id }); + this.listCharges({ + starting_after: this.charges[this.charges.length - 1].id + }); this.page++; }, previousPage: function previousPage() { this.loading = true; - this.listCharges({ 'ending_before': this.charges[0].id }); + this.listCharges({ ending_before: this.charges[0].id }); if (this.hasPrevious) { this.page--; @@ -2379,7 +2394,7 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true }); filters: { date: function date(_date) { - return moment.unix(_date).format('YYYY/MM/DD h:mm:ss a'); + return moment.unix(_date).format("YYYY/MM/DD h:mm:ss a"); }, @@ -2392,187 +2407,9 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true }); }); /***/ }), -/* 19 */ -/***/ (function(module, exports, __webpack_require__) { - -var disposed = false -var normalizeComponent = __webpack_require__(0) -/* script */ -var __vue_script__ = __webpack_require__(20) -/* template */ -var __vue_template__ = __webpack_require__(21) -/* template functional */ -var __vue_template_functional__ = false -/* styles */ -var __vue_styles__ = null -/* scopeId */ -var __vue_scopeId__ = null -/* moduleIdentifier (server only) */ -var __vue_module_identifier__ = null -var Component = normalizeComponent( - __vue_script__, - __vue_template__, - __vue_template_functional__, - __vue_styles__, - __vue_scopeId__, - __vue_module_identifier__ -) -Component.options.__file = "resources/js/components/ChargesPaginationLinks.vue" - -/* hot reload */ -if (false) {(function () { - var hotAPI = require("vue-hot-reload-api") - hotAPI.install(require("vue"), false) - if (!hotAPI.compatible) return - module.hot.accept() - if (!module.hot.data) { - hotAPI.createRecord("data-v-14899e2b", Component.options) - } else { - hotAPI.reload("data-v-14899e2b", Component.options) - } - module.hot.dispose(function (data) { - disposed = true - }) -})()} - -module.exports = Component.exports - - -/***/ }), -/* 20 */ -/***/ (function(module, __webpack_exports__, __webpack_require__) { - -"use strict"; -Object.defineProperty(__webpack_exports__, "__esModule", { value: true }); -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// - -/* harmony default export */ __webpack_exports__["default"] = ({ - props: ['charges', 'hasMore', 'hasPrevious'], - - methods: { - /** - * Select the previous page. - */ - previousPage: function previousPage() { - this.$emit('previous'); - }, - - - /** - * Select the next page. - */ - nextPage: function nextPage() { - this.$emit('next'); - } - } -}); - -/***/ }), -/* 21 */ -/***/ (function(module, exports, __webpack_require__) { - -var render = function() { - var _vm = this - var _h = _vm.$createElement - var _c = _vm._self._c || _h - return _c("div", { staticClass: "bg-20 rounded-b" }, [ - _vm.charges.length > 0 - ? _c("nav", { staticClass: "flex" }, [ - _c( - "button", - { - staticClass: "btn btn-link py-3 px-4", - class: { - "text-primary dim": _vm.hasPrevious, - "text-80 opacity-50 cursor-not-allowed": !_vm.hasPrevious - }, - attrs: { - disabled: !_vm.hasPrevious, - rel: "prev", - dusk: "previous" - }, - on: { - click: function($event) { - $event.preventDefault() - return _vm.previousPage() - } - } - }, - [ - _vm._v( - "\n " + _vm._s(_vm.__("Previous")) + "\n " - ) - ] - ), - _vm._v(" "), - _c( - "button", - { - staticClass: "ml-auto btn btn-link py-3 px-4", - class: { - "text-primary dim": _vm.hasMore, - "text-80 opacity-50 cursor-not-allowed": !_vm.hasMore - }, - attrs: { disabled: !_vm.hasMore, rel: "next", dusk: "next" }, - on: { - click: function($event) { - $event.preventDefault() - return _vm.nextPage() - } - } - }, - [_vm._v("\n " + _vm._s(_vm.__("Next")) + "\n ")] - ) - ]) - : _vm._e() - ]) -} -var staticRenderFns = [] -render._withStripped = true -module.exports = { render: render, staticRenderFns: staticRenderFns } -if (false) { - module.hot.accept() - if (module.hot.data) { - require("vue-hot-reload-api") .rerender("data-v-14899e2b", module.exports) - } -} - -/***/ }), +/* 19 */, +/* 20 */, +/* 21 */, /* 22 */ /***/ (function(module, exports, __webpack_require__) { @@ -2608,7 +2445,7 @@ var render = function() { { staticClass: "inline-flex items-center" }, [ _vm._v( - "\n Charge ID\n " + "\n Charge ID\n " ) ] ) @@ -2620,7 +2457,7 @@ var render = function() { { staticClass: "inline-flex items-center" }, [ _vm._v( - "\n Amount\n " + "\n Amount\n " ) ] ) @@ -2632,7 +2469,7 @@ var render = function() { { staticClass: "inline-flex items-center" }, [ _vm._v( - "\n Created\n " + "\n Created\n " ) ] ) @@ -2644,7 +2481,7 @@ var render = function() { { staticClass: "inline-flex items-center" }, [ _vm._v( - "\n Status\n " + "\n Status\n " ) ] ) @@ -2718,7 +2555,7 @@ var render = function() { _vm._v(" "), _c("charges-pagination-links", { attrs: { - charges: _vm.charges, + resource: _vm.charges, hasMore: _vm.hasMore, hasPrevious: _vm.hasPrevious }, @@ -3095,5 +2932,659 @@ if (false) { // removed by extract-text-webpack-plugin +/***/ }), +/* 31 */, +/* 32 */, +/* 33 */, +/* 34 */, +/* 35 */, +/* 36 */, +/* 37 */ +/***/ (function(module, exports, __webpack_require__) { + +var disposed = false +var normalizeComponent = __webpack_require__(0) +/* script */ +var __vue_script__ = __webpack_require__(40) +/* template */ +var __vue_template__ = __webpack_require__(41) +/* template functional */ +var __vue_template_functional__ = false +/* styles */ +var __vue_styles__ = null +/* scopeId */ +var __vue_scopeId__ = null +/* moduleIdentifier (server only) */ +var __vue_module_identifier__ = null +var Component = normalizeComponent( + __vue_script__, + __vue_template__, + __vue_template_functional__, + __vue_styles__, + __vue_scopeId__, + __vue_module_identifier__ +) +Component.options.__file = "resources/js/views/Customers.vue" + +/* hot reload */ +if (false) {(function () { + var hotAPI = require("vue-hot-reload-api") + hotAPI.install(require("vue"), false) + if (!hotAPI.compatible) return + module.hot.accept() + if (!module.hot.data) { + hotAPI.createRecord("data-v-c9944874", Component.options) + } else { + hotAPI.reload("data-v-c9944874", Component.options) + } + module.hot.dispose(function (data) { + disposed = true + }) +})()} + +module.exports = Component.exports + + +/***/ }), +/* 38 */, +/* 39 */, +/* 40 */ +/***/ (function(module, __webpack_exports__, __webpack_require__) { + +"use strict"; +Object.defineProperty(__webpack_exports__, "__esModule", { value: true }); +/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__components_CustomersTable__ = __webpack_require__(42); +/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__components_CustomersTable___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0__components_CustomersTable__); +// +// +// +// +// +// +// +// + + + +/* harmony default export */ __webpack_exports__["default"] = ({ + components: { CustomersTable: __WEBPACK_IMPORTED_MODULE_0__components_CustomersTable___default.a } +}); + +/***/ }), +/* 41 */ +/***/ (function(module, exports, __webpack_require__) { + +var render = function() { + var _vm = this + var _h = _vm.$createElement + var _c = _vm._self._c || _h + return _c( + "div", + [ + _c("heading", { staticClass: "mb-6" }, [_vm._v("Customers")]), + _vm._v(" "), + _c("customers-table") + ], + 1 + ) +} +var staticRenderFns = [] +render._withStripped = true +module.exports = { render: render, staticRenderFns: staticRenderFns } +if (false) { + module.hot.accept() + if (module.hot.data) { + require("vue-hot-reload-api") .rerender("data-v-c9944874", module.exports) + } +} + +/***/ }), +/* 42 */ +/***/ (function(module, exports, __webpack_require__) { + +var disposed = false +function injectStyle (ssrContext) { + if (disposed) return + __webpack_require__(43) +} +var normalizeComponent = __webpack_require__(0) +/* script */ +var __vue_script__ = __webpack_require__(45) +/* template */ +var __vue_template__ = __webpack_require__(46) +/* template functional */ +var __vue_template_functional__ = false +/* styles */ +var __vue_styles__ = injectStyle +/* scopeId */ +var __vue_scopeId__ = null +/* moduleIdentifier (server only) */ +var __vue_module_identifier__ = null +var Component = normalizeComponent( + __vue_script__, + __vue_template__, + __vue_template_functional__, + __vue_styles__, + __vue_scopeId__, + __vue_module_identifier__ +) +Component.options.__file = "resources/js/components/CustomersTable.vue" + +/* hot reload */ +if (false) {(function () { + var hotAPI = require("vue-hot-reload-api") + hotAPI.install(require("vue"), false) + if (!hotAPI.compatible) return + module.hot.accept() + if (!module.hot.data) { + hotAPI.createRecord("data-v-b32879b8", Component.options) + } else { + hotAPI.reload("data-v-b32879b8", Component.options) + } + module.hot.dispose(function (data) { + disposed = true + }) +})()} + +module.exports = Component.exports + + +/***/ }), +/* 43 */ +/***/ (function(module, exports, __webpack_require__) { + +// style-loader: Adds some css to the DOM by adding a diff --git a/resources/js/components/CustomersTable.vue b/resources/js/components/CustomersTable.vue new file mode 100644 index 0000000..e25ab91 --- /dev/null +++ b/resources/js/components/CustomersTable.vue @@ -0,0 +1,137 @@ + + + + + diff --git a/resources/js/components/ChargesPaginationLinks.vue b/resources/js/components/PaginationLinks.vue similarity index 93% rename from resources/js/components/ChargesPaginationLinks.vue rename to resources/js/components/PaginationLinks.vue index 13c1c74..cf72cd6 100644 --- a/resources/js/components/ChargesPaginationLinks.vue +++ b/resources/js/components/PaginationLinks.vue @@ -1,6 +1,6 @@ From a4037971b4a4602b27ffa9ff0204428997060f34 Mon Sep 17 00:00:00 2001 From: faxblaster Date: Mon, 16 Aug 2021 14:08:40 -0400 Subject: [PATCH 08/38] Finish Column Select --- dist/js/tool.js | 889 ++++++----------------- resources/js/components/ChargesTable.vue | 20 +- resources/js/components/ColumnSelect.vue | 12 +- resources/js/views/Index.vue | 8 +- 4 files changed, 236 insertions(+), 693 deletions(-) diff --git a/dist/js/tool.js b/dist/js/tool.js index 9a97521..e1c31cd 100644 --- a/dist/js/tool.js +++ b/dist/js/tool.js @@ -173,316 +173,8 @@ module.exports = function normalizeComponent ( /***/ }), -/* 1 */ -/***/ (function(module, exports) { - -/* - MIT License http://www.opensource.org/licenses/mit-license.php - Author Tobias Koppers @sokra -*/ -// css base code, injected by the css-loader -module.exports = function(useSourceMap) { - var list = []; - - // return the list of modules as css string - list.toString = function toString() { - return this.map(function (item) { - var content = cssWithMappingToString(item, useSourceMap); - if(item[2]) { - return "@media " + item[2] + "{" + content + "}"; - } else { - return content; - } - }).join(""); - }; - - // import a list of modules into the list - list.i = function(modules, mediaQuery) { - if(typeof modules === "string") - modules = [[null, modules, ""]]; - var alreadyImportedModules = {}; - for(var i = 0; i < this.length; i++) { - var id = this[i][0]; - if(typeof id === "number") - alreadyImportedModules[id] = true; - } - for(i = 0; i < modules.length; i++) { - var item = modules[i]; - // skip already imported module - // this implementation is not 100% perfect for weird media query combinations - // when a module is imported multiple times with different media queries. - // I hope this will never occur (Hey this way we have smaller bundles) - if(typeof item[0] !== "number" || !alreadyImportedModules[item[0]]) { - if(mediaQuery && !item[2]) { - item[2] = mediaQuery; - } else if(mediaQuery) { - item[2] = "(" + item[2] + ") and (" + mediaQuery + ")"; - } - list.push(item); - } - } - }; - return list; -}; - -function cssWithMappingToString(item, useSourceMap) { - var content = item[1] || ''; - var cssMapping = item[3]; - if (!cssMapping) { - return content; - } - - if (useSourceMap && typeof btoa === 'function') { - var sourceMapping = toComment(cssMapping); - var sourceURLs = cssMapping.sources.map(function (source) { - return '/*# sourceURL=' + cssMapping.sourceRoot + source + ' */' - }); - - return [content].concat(sourceURLs).concat([sourceMapping]).join('\n'); - } - - return [content].join('\n'); -} - -// Adapted from convert-source-map (MIT) -function toComment(sourceMap) { - // eslint-disable-next-line no-undef - var base64 = btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))); - var data = 'sourceMappingURL=data:application/json;charset=utf-8;base64,' + base64; - - return '/*# ' + data + ' */'; -} - - -/***/ }), -/* 2 */ -/***/ (function(module, exports, __webpack_require__) { - -/* - MIT License http://www.opensource.org/licenses/mit-license.php - Author Tobias Koppers @sokra - Modified by Evan You @yyx990803 -*/ - -var hasDocument = typeof document !== 'undefined' - -if (typeof DEBUG !== 'undefined' && DEBUG) { - if (!hasDocument) { - throw new Error( - 'vue-style-loader cannot be used in a non-browser environment. ' + - "Use { target: 'node' } in your Webpack config to indicate a server-rendering environment." - ) } -} - -var listToStyles = __webpack_require__(9) - -/* -type StyleObject = { - id: number; - parts: Array -} - -type StyleObjectPart = { - css: string; - media: string; - sourceMap: ?string -} -*/ - -var stylesInDom = {/* - [id: number]: { - id: number, - refs: number, - parts: Array<(obj?: StyleObjectPart) => void> - } -*/} - -var head = hasDocument && (document.head || document.getElementsByTagName('head')[0]) -var singletonElement = null -var singletonCounter = 0 -var isProduction = false -var noop = function () {} -var options = null -var ssrIdKey = 'data-vue-ssr-id' - -// Force single-tag solution on IE6-9, which has a hard limit on the # of diff --git a/resources/js/components/ColumnSelect.vue b/resources/js/components/ColumnSelect.vue index 5789906..0aaef03 100644 --- a/resources/js/components/ColumnSelect.vue +++ b/resources/js/components/ColumnSelect.vue @@ -11,11 +11,11 @@ >
- - + +
@@ -28,12 +28,8 @@ export default { props: ['resource'], data() { return { - checkedColumns: [], + checkedColumns: this.$attrs.value, } }, } - - diff --git a/resources/js/views/Index.vue b/resources/js/views/Index.vue index 54d7f5c..0ce6d3a 100644 --- a/resources/js/views/Index.vue +++ b/resources/js/views/Index.vue @@ -27,13 +27,9 @@ }, data() { return { - selectedColumns: {}, + selectedColumns: ['id', 'amount', 'created', 'status'], singleCharge: {}, } - } + }, } - - From 47076731eaeeadb4101ed356621fd560beb8f9f6 Mon Sep 17 00:00:00 2001 From: faxblaster Date: Mon, 16 Aug 2021 14:42:20 -0400 Subject: [PATCH 09/38] layout tweaks --- dist/js/tool.js | 77 +++++++++++++----------- resources/js/components/ChargesTable.vue | 4 +- resources/js/components/ColumnSelect.vue | 11 ++-- resources/js/views/Index.vue | 14 +++-- 4 files changed, 58 insertions(+), 48 deletions(-) diff --git a/dist/js/tool.js b/dist/js/tool.js index 758f016..c255511 100644 --- a/dist/js/tool.js +++ b/dist/js/tool.js @@ -1561,6 +1561,8 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true }); // // // +// +// @@ -2190,7 +2192,7 @@ var render = function() { _c( "tr", [ - _vm._l(_vm.columns, function(key, value) { + _vm._l(_vm.columns, function(column) { return _vm.columns ? _c("th", { staticClass: "text-left" }, [ _c( @@ -2202,7 +2204,7 @@ var render = function() { [ _vm._v( "\n " + - _vm._s(key.replaceAll("_", " ")) + + _vm._s(column.replaceAll("_", " ")) + "\n " ) ] @@ -2416,7 +2418,6 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true }); // // // -// /* harmony default export */ __webpack_exports__["default"] = ({ props: ['resource'], @@ -2443,30 +2444,36 @@ var render = function() { _vm._v(" "), _c("balance-card"), _vm._v(" "), - _c("column-select", { - attrs: { resource: _vm.singleCharge }, - on: { - checkedColumns: function($event) { - _vm.selectedColumns = $event - } - }, - model: { - value: _vm.selectedColumns, - callback: function($$v) { - _vm.selectedColumns = $$v - }, - expression: "selectedColumns" - } - }), - _vm._v(" "), - _c("charges-table", { - attrs: { columns: _vm.selectedColumns }, - on: { - charge: function($event) { - _vm.singleCharge = $event - } - } - }) + _c( + "card", + [ + _c("column-select", { + attrs: { resource: _vm.singleCharge }, + on: { + checkedColumns: function($event) { + _vm.selectedColumns = $event + } + }, + model: { + value: _vm.selectedColumns, + callback: function($$v) { + _vm.selectedColumns = $$v + }, + expression: "selectedColumns" + } + }), + _vm._v(" "), + _c("charges-table", { + attrs: { columns: _vm.selectedColumns }, + on: { + charge: function($event) { + _vm.singleCharge = $event + } + } + }) + ], + 1 + ) ], 1 ) @@ -2818,21 +2825,23 @@ var render = function() { var _c = _vm._self._c || _h return _c( "div", - { staticClass: "flex justify-end" }, + { staticClass: "flex justify-end p-2" }, [ - _c("span", [_vm._v("Checked names: " + _vm._s(_vm.checkedColumns))]), - _vm._v(" "), _c( "dropdown", - { attrs: { offset: "-467" } }, + { attrs: { offset: "-480" } }, [ - _c("dropdown-trigger", [_vm._v("Select Columns")]), + _c( + "dropdown-trigger", + { staticClass: "text-90 bg-30 px-3 border-2 border-30 rounded" }, + [_vm._v("Select Columns")] + ), _vm._v(" "), _c( "dropdown-menu", { - staticClass: "p-3", - staticStyle: { width: "100%", columns: "30vw 3" }, + staticClass: "p-3 text-90", + staticStyle: { width: "100%", columns: "25vw 3" }, attrs: { slot: "menu", direction: "rtl" }, slot: "menu" }, diff --git a/resources/js/components/ChargesTable.vue b/resources/js/components/ChargesTable.vue index 893baf8..68cf7c4 100644 --- a/resources/js/components/ChargesTable.vue +++ b/resources/js/components/ChargesTable.vue @@ -11,9 +11,9 @@ - + - {{ key.replaceAll('_', ' ') }} + {{ column.replaceAll('_', ' ') }}   diff --git a/resources/js/components/ColumnSelect.vue b/resources/js/components/ColumnSelect.vue index 0aaef03..5452718 100644 --- a/resources/js/components/ColumnSelect.vue +++ b/resources/js/components/ColumnSelect.vue @@ -1,13 +1,12 @@ From f8d7af68cb714af0651e9741475c319383a20e3c Mon Sep 17 00:00:00 2001 From: faxblaster Date: Mon, 16 Aug 2021 15:03:48 -0400 Subject: [PATCH 10/38] fix overflow layout --- dist/js/tool.js | 242 ++++++++++++----------- resources/js/components/ChargesTable.vue | 84 ++++---- 2 files changed, 166 insertions(+), 160 deletions(-) diff --git a/dist/js/tool.js b/dist/js/tool.js index c255511..8e4b0e9 100644 --- a/dist/js/tool.js +++ b/dist/js/tool.js @@ -1902,6 +1902,8 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true }); // // // +// +// @@ -2176,143 +2178,145 @@ var render = function() { "loading-card", { staticClass: "card relative", attrs: { loading: _vm.loading } }, [ - _vm.charges.length > 0 - ? _c( - "table", - { - staticClass: "table w-full", - attrs: { - cellpadding: "0", - cellspacing: "0", - "data-testid": "resource-table" - } - }, - [ - _c("thead", [ - _c( - "tr", - [ - _vm._l(_vm.columns, function(column) { - return _vm.columns - ? _c("th", { staticClass: "text-left" }, [ - _c( - "span", - { - staticClass: - "inline-flex items-center capitalize" - }, - [ - _vm._v( - "\n " + - _vm._s(column.replaceAll("_", " ")) + - "\n " - ) - ] - ) - ]) - : _vm._e() - }), - _vm._v(" "), - _c("th", [_vm._v(" ")]) - ], - 2 - ) - ]), - _vm._v(" "), - _vm._l(_vm.charges, function(charge) { - return _c("tbody", [ + _c("div", { staticClass: "overflow-x-auto" }, [ + _vm.charges.length > 0 + ? _c( + "table", + { + staticClass: "table w-full", + attrs: { + cellpadding: "0", + cellspacing: "0", + "data-testid": "resource-table" + } + }, + [ + _c("thead", [ _c( "tr", [ _vm._l(_vm.columns, function(column) { - return _c("td", [ - _vm.moneyColumns.find(function(moneyColumn) { - return moneyColumn === column - }) - ? _c("span", [ - _vm._v( - _vm._s( - _vm._f("money")( - charge.currency, - charge[column] - ) - ) - ) - ]) - : _vm.dateColumns.find(function(dateColumn) { - return dateColumn === column - }) - ? _c("span", [ - _vm._v( - _vm._s(_vm._f("date")(charge[column])) - ) - ]) - : column === "status" - ? _c( + return _vm.columns + ? _c("th", { staticClass: "text-left" }, [ + _c( "span", { staticClass: - "rounded-lg px-3 py-1 capitalize text-xs font-black", - class: _vm.statusClass(charge.status) + "inline-flex items-center capitalize" }, [ _vm._v( - _vm._s( - charge.refunded - ? "Refunded" - : charge.status - ) + "\n " + + _vm._s(column.replaceAll("_", " ")) + + "\n " ) ] ) - : _c("span", [_vm._v(_vm._s(charge[column]))]) - ]) + ]) + : _vm._e() }), _vm._v(" "), - _c("td", [ - _c( - "span", - [ - _c( - "router-link", - { - staticClass: - "cursor-pointer text-70 hover:text-primary mr-3", - attrs: { - to: { - name: "charge-detail", - params: { - chargeId: charge.id - } - }, - title: _vm.__("View") - } - }, - [ - _c("icon", { - attrs: { - type: "view", - width: "22", - height: "18", - "view-box": "0 0 22 16" - } - }) - ], - 1 - ) - ], - 1 - ) - ]) + _c("th", [_vm._v(" ")]) ], 2 ) - ]) - }) - ], - 2 - ) - : _vm._e(), + ]), + _vm._v(" "), + _vm._l(_vm.charges, function(charge) { + return _c("tbody", [ + _c( + "tr", + [ + _vm._l(_vm.columns, function(column) { + return _c("td", [ + _vm.moneyColumns.find(function(moneyColumn) { + return moneyColumn === column + }) + ? _c("span", [ + _vm._v( + _vm._s( + _vm._f("money")( + charge.currency, + charge[column] + ) + ) + ) + ]) + : _vm.dateColumns.find(function(dateColumn) { + return dateColumn === column + }) + ? _c("span", [ + _vm._v( + _vm._s(_vm._f("date")(charge[column])) + ) + ]) + : column === "status" + ? _c( + "span", + { + staticClass: + "rounded-lg px-3 py-1 capitalize text-xs font-black", + class: _vm.statusClass(charge.status) + }, + [ + _vm._v( + _vm._s( + charge.refunded + ? "Refunded" + : charge.status + ) + ) + ] + ) + : _c("span", [_vm._v(_vm._s(charge[column]))]) + ]) + }), + _vm._v(" "), + _c("td", [ + _c( + "span", + [ + _c( + "router-link", + { + staticClass: + "cursor-pointer text-70 hover:text-primary mr-3", + attrs: { + to: { + name: "charge-detail", + params: { + chargeId: charge.id + } + }, + title: _vm.__("View") + } + }, + [ + _c("icon", { + attrs: { + type: "view", + width: "22", + height: "18", + "view-box": "0 0 22 16" + } + }) + ], + 1 + ) + ], + 1 + ) + ]) + ], + 2 + ) + ]) + }) + ], + 2 + ) + : _vm._e() + ]), _vm._v(" "), _c("charges-pagination-links", { attrs: { diff --git a/resources/js/components/ChargesTable.vue b/resources/js/components/ChargesTable.vue index 68cf7c4..4751e59 100644 --- a/resources/js/components/ChargesTable.vue +++ b/resources/js/components/ChargesTable.vue @@ -1,49 +1,51 @@