feat: add functions to table mobile design

phojie · Jan 11, 2023 · 6e03539 · 6e03539
1 parent af3383b
commit 6e03539
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 3 deletions.
diff --git a/resources/js/components.d.ts b/resources/js/components.d.ts
@@ -70,6 +70,7 @@ declare module '@vue/runtime-core' {
     HeroiconsCheck: typeof import('~icons/heroicons/check')['default']
     HeroiconsCheck20Solid: typeof import('~icons/heroicons/check20-solid')['default']
     HeroiconsCheckCircle20Solid: typeof import('~icons/heroicons/check-circle20-solid')['default']
+    HeroiconsChevronDoubleRight20Solid: typeof import('~icons/heroicons/chevron-double-right20-solid')['default']
     HeroiconsChevronDown: typeof import('~icons/heroicons/chevron-down')['default']
     HeroiconsChevronDown20Solid: typeof import('~icons/heroicons/chevron-down20-solid')['default']
     HeroiconsChevronUpDown: typeof import('~icons/heroicons/chevron-up-down')['default']

diff --git a/resources/js/components/Admin/Index/AdminIndexTable.vue b/resources/js/components/Admin/Index/AdminIndexTable.vue
@@ -67,18 +67,24 @@ const getById = async (id: string) => {
     <div class="shadow sm:hidden">
       <ul role="list" class="overflow-hidden divide-y divide-gray-200 shadow sm:hidden">
         <li v-for="transaction in transactions" :key="transaction.id">
-          <a :href="transaction.href" class="block px-4 py-4 bg-white hover:bg-gray-50">
+          <a
+            v-if="useGate().can('order-update')"
+            v-tooltip="'Open order'"
+            href="#"
+            class="block px-4 py-4 bg-white hover:bg-gray-50"
+            @click="getById(transaction.id)"
+          >
             <span class="flex items-center space-x-4">
               <span class="flex flex-1 space-x-2 truncate">
-                <heroicons-banknotes class="flex-shrink-0 w-5 h-5 text-gray-400" aria-hidden="true" />
+                <heroicons-shopping-cart class="flex-shrink-0 w-5 h-5 text-gray-400" aria-hidden="true" />
                 <span class="flex flex-col text-sm text-gray-500 truncate">
                   <span class="truncate">{{ transaction.name }}</span>
                   <span><span class="font-medium text-gray-900">{{ transaction.amount }}</span> {{
                     transaction.currency }}</span>
                   <time :datetime="transaction.datetime">{{ useDateFormat(transaction.date, 'MMM DD, YYYY | hh:mm a ').value }}</time>
                 </span>
               </span>
-              <heroicons-banknotes-20-solid class="flex-shrink-0 w-5 h-5 text-gray-400" aria-hidden="true" />
+              <heroicons-chevron-double-right-20-solid class="flex-shrink-0 w-5 h-5 text-gray-400" aria-hidden="true" />
             </span>
           </a>
         </li>

diff --git a/resources/js/components/Chart/ChartBar.vue b/resources/js/components/Chart/ChartBar.vue
@@ -85,6 +85,7 @@ const chartOptions = computed(() => {
 rect.highcharts-point.highcharts-color-0 {
   @apply !fill-current !text-primary-500;
 }
+
 svg.highcharts-root {
   @apply !font-sans;
 }