Merge pull request #31 from tighten/alk/add-info-to-list

Charges List UI Updates
tighten · Jul 26, 2021 · a32c6fa · a32c6fa
2 parents 96b3e2b + 04b4a0c
commit a32c6fa
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 31 deletions.
diff --git a/dist/js/tool.js b/dist/js/tool.js
@@ -2236,7 +2236,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/* Scoped Styles */\n", ""]);
 
 // exports
 
@@ -2320,6 +2320,11 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 //
 //
 //
+//
+//
+//
+//
+//
 
 
 
@@ -2328,21 +2333,28 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
     components: {
         'charges-pagination-links': __WEBPACK_IMPORTED_MODULE_0__ChargesPaginationLinks_vue___default.a
     },
-
     data: function data() {
         return {
             charges: {},
             initialLoading: true,
             loading: false,
             hasMore: false,
-            page: 1
+            page: 1,
+            statusClassList: {
+                'succeeded': 'bg-success-light text-success-dark',
+                'pending': 'bg-warning-light text-warning-dark',
+                'failed': 'bg-danger-light text-danger-dark'
+            }
         };
     },
 
-
+    computed: {
+        hasPrevious: function hasPrevious() {
+            return this.page > 1;
+        }
+    },
     methods: {
         moment: moment,
-
         listCharges: function listCharges(params) {
             var _this = this;
 
@@ -2368,15 +2380,11 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
             if (this.hasPrevious) {
                 this.page--;
             }
+        },
+        statusClass: function statusClass(status) {
+            return this.statusClassList[status];
         }
     },
-
-    computed: {
-        hasPrevious: function hasPrevious() {
-            return this.page > 1;
-        }
-    },
-
     filters: {
         date: function date(_date) {
             return moment.unix(_date).format('YYYY/MM/DD h:mm:ss a');
@@ -2385,7 +2393,6 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 
         money: __WEBPACK_IMPORTED_MODULE_1__utils_moneyFormat__["a" /* default */]
     },
-
     created: function created() {
         this.listCharges();
     }
@@ -2657,7 +2664,13 @@ var render = function() {
                   _vm._l(_vm.charges, function(charge) {
                     return _c("tbody", [
                       _c("tr", [
-                        _c("td", [_vm._v(_vm._s(charge.id))]),
+                        _c("td", [
+                          _vm._v(
+                            "\n                    " +
+                              _vm._s(charge.id) +
+                              "\n                "
+                          )
+                        ]),
                         _vm._v(" "),
                         _c("td", [
                           _vm._v(
@@ -2671,7 +2684,26 @@ var render = function() {
                           _vm._v(_vm._s(_vm._f("date")(charge.created)))
                         ]),
                         _vm._v(" "),
-                        _c("td", [_vm._v(_vm._s(charge.status))]),
+                        _c("td", [
+                          !charge.refunded
+                            ? _c(
+                                "span",
+                                {
+                                  staticClass:
+                                    "rounded-lg px-3 py-1 capitalize text-xs font-black",
+                                  class: _vm.statusClass(charge.status)
+                                },
+                                [_vm._v(_vm._s(charge.status))]
+                              )
+                            : _c(
+                                "span",
+                                {
+                                  staticClass:
+                                    "rounded-lg px-3 py-1 capitalize text-xs font-black bg-40 text-80"
+                                },
+                                [_vm._v("Refunded")]
+                              )
+                        ]),
                         _vm._v(" "),
                         _c("td", [
                           _c(

diff --git a/resources/js/components/ChargesTable.vue b/resources/js/components/ChargesTable.vue
@@ -36,10 +36,14 @@
 
                 <tbody v-for="charge in charges">
                 <tr>
-                    <td>{{ charge.id }}</td>
+                    <td>
+                        {{ charge.id }}
+                    </td>
                     <td>{{ charge.currency | money(charge.amount) }}</td>
                     <td>{{ charge.created | date }}</td>
-                    <td>{{ charge.status }}</td>
+                    <td>
+                        <span class="rounded-lg px-3 py-1 capitalize text-xs font-black" :class="statusClass(charge.status)">{{ charge.refunded ? 'Refunded' : charge.status }}</span>
+                    </td>
                     <td>
                         <span>
                             <router-link
@@ -76,20 +80,27 @@ export default {
     components: {
         'charges-pagination-links': ChargesPaginationLinks
     },
-
     data() {
         return {
             charges: {},
             initialLoading: true,
             loading: false,
             hasMore: false,
             page: 1,
+            statusClassList: {
+                'succeeded' : 'bg-success-light text-success-dark',
+                'pending' : 'bg-warning-light text-warning-dark',
+                'failed' : 'bg-danger-light text-danger-dark',
+            }
+        }
+    },
+    computed: {
+        hasPrevious() {
+            return this.page > 1
         }
     },
-
     methods: {
         moment: moment,
-
         listCharges(params) {
             Nova.request().get('/nova-vendor/nova-stripe/stripe/charges', { params })
                 .then((response) => {
@@ -99,15 +110,13 @@ export default {
                     this.loading = false
                 })
         },
-
         nextPage() {
             this.loading = true
 
             this.listCharges({ 'starting_after': this.charges[this.charges.length - 1].id })
 
             this.page++
         },
-
         previousPage() {
             this.loading = true
 
@@ -116,23 +125,18 @@ export default {
             if (this.hasPrevious) {
                 this.page--
             }
-        }
-    },
-
-    computed: {
-        hasPrevious() {
-            return this.page > 1
-        }
+        },
+        statusClass(status) {
+            return this.statusClassList[status];
+        },
     },
-
     filters: {
         date(date) {
             return moment.unix(date).format('YYYY/MM/DD h:mm:ss a')
         },
 
         money
     },
-
     created() {
         this.listCharges()
     },