📱 make Tables responsive

Fixes #103
doroudi · Nov 20, 2024 · e142ad8 · e142ad8
1 parent 16d5d24
commit e142ad8
Show file tree

Hide file tree

Showing 9 changed files with 28 additions and 33 deletions.
diff --git a/src/components.d.ts b/src/components.d.ts
@@ -31,8 +31,6 @@ declare module 'vue' {
     NDataTable: typeof import('naive-ui')['NDataTable']
     NDialogProvider: typeof import('naive-ui')['NDialogProvider']
     NDropdown: typeof import('naive-ui')['NDropdown']
-    NForm: typeof import('naive-ui')['NForm']
-    NFormItem: typeof import('naive-ui')['NFormItem']
     NIcon: typeof import('naive-ui')['NIcon']
     NInput: typeof import('naive-ui')['NInput']
     NLayout: typeof import('naive-ui')['NLayout']

diff --git a/src/components/Brand/BrandManagement.vue b/src/components/Brand/BrandManagement.vue
@@ -11,14 +11,14 @@ import { useDialog, useMessage } from 'naive-ui'
 
 const { t } = useI18n()
 const store = useBrandStore()
-const { brands, isLoading } = storeToRefs(store)
 const dialog = useDialog()
 const message = useMessage()
 onMounted(getItems)
 const columns: DataTableColumns<RowData> = [
   {
     title: 'Brand',
     key: 'name',
+    fixed: 'left',
   },
   {
     title: 'Slog',
@@ -110,9 +110,8 @@ function createBrand() {
         </NButton>
       </n-space>
       <n-data-table
-        remote :columns="columns" :data="brands" :loading="isLoading" :pagination="options"
-        :row-key="rowKey" @update:filters="handleFiltersChange"
-        @update:page="handlePageChange"
+        remote :columns="columns" :data="store.brands" :loading="store.isLoading" :pagination="options"
+        :row-key="rowKey" :scroll-x="1000" @update:filters="handleFiltersChange" @update:page="handlePageChange"
       />
     </n-layout-content>
 

diff --git a/src/components/Category/CategoryManagement.vue b/src/components/Category/CategoryManagement.vue
@@ -12,14 +12,14 @@ import { useDialog, useMessage } from 'naive-ui'
 const { t } = useI18n()
 const collapsed = ref(false)
 const store = useCategoryStore()
-const { categories, isLoading } = storeToRefs(store)
 const dialog = useDialog()
 const message = useMessage()
 onMounted(getItems)
 const columns: DataTableColumns<RowData> = [
   {
     title: 'Category',
     key: 'name',
+    fixed: 'left',
   },
   {
     title: 'Products Count',
@@ -117,9 +117,8 @@ function createCategory() {
           </NButton>
         </n-space>
         <n-data-table
-          remote :columns="columns" :data="categories" :loading="isLoading" :pagination="options"
-          selectable
-          :row-key="rowKey" @update:sorter="handleSorterChange" @update:filters="handleFiltersChange"
+          remote :columns="columns" :data="store.categories" :loading="store.isLoading" :pagination="options" selectable
+          :scroll-x="1000" :row-key="rowKey" @update:sorter="handleSorterChange" @update:filters="handleFiltersChange"
           @update:page="handlePageChange"
         />
       </div>

diff --git a/src/components/Color/ColorManagement.vue b/src/components/Color/ColorManagement.vue
@@ -11,7 +11,6 @@ import { useDialog, useMessage } from 'naive-ui'
 
 const { t } = useI18n()
 const store = useColorStore()
-const { colors, isLoading } = storeToRefs(store)
 const dialog = useDialog()
 const message = useMessage()
 onMounted(getItems)
@@ -20,6 +19,7 @@ const columns: DataTableColumns<RowData> = [
     title: 'Color',
     key: 'color',
     width: 250,
+    fixed: 'left',
     render(row) {
       return h(
         'span',
@@ -121,9 +121,8 @@ function createColor() {
           </NButton>
         </n-space>
         <n-data-table
-          remote :columns="columns" :data="colors" :loading="isLoading" :pagination="options"
-          :row-key="rowKey" @update:filters="handleFiltersChange"
-          @update:page="handlePageChange"
+          remote :columns="columns" :data="store.colors" :loading="store.isLoading" :pagination="options"
+          :row-key="rowKey" :scroll-x="1000" @update:filters="handleFiltersChange" @update:page="handlePageChange"
         />
       </div>
     </n-layout-content>

diff --git a/src/components/Customers/CustomerManagement.vue b/src/components/Customers/CustomerManagement.vue
@@ -12,7 +12,6 @@ import { useDialog, useMessage } from 'naive-ui'
 
 const { t } = useI18n()
 const store = useCustomerStore()
-const { customers, isLoading } = storeToRefs(store)
 const dialog = useDialog()
 const message = useMessage()
 const router = useRouter()
@@ -23,6 +22,7 @@ onMounted(getItems)
 const columns: DataTableColumns<RowData> = [
   {
     type: 'selection',
+    fixed: 'left',
   },
   {
     title: 'NAME',
@@ -111,7 +111,7 @@ function handleDeleteItem(row: RowData) {
     positiveText: 'Yes, Delete',
     negativeText: 'Cancel',
     onPositiveClick: () => {
-      store.deleteProduct(row.id)
+      // store.deleteProduct(row.id)
       message.success('Product was deleted!')
     },
   })
@@ -154,9 +154,9 @@ function handleFiltersChange() {
           </NButton>
         </NSpace>
         <n-data-table
-          remote :columns="columns" :data="customers" :loading="isLoading" :pagination="options"
-          selectable :row-key="rowKey" @update:sorter="handleSorterChange" @update:filters="handleFiltersChange"
-          @update:page="handlePageChange"
+          remote :columns="columns" :data="store.customers" :loading="store.isLoading" :pagination="options"
+          selectable :row-key="rowKey" :scroll-x="1000" @update:sorter="handleSorterChange"
+          @update:filters="handleFiltersChange" @update:page="handlePageChange"
         />
       </div>
     </n-layout-content>

diff --git a/src/components/Orders/OrderManagement.vue b/src/components/Orders/OrderManagement.vue
@@ -12,7 +12,6 @@ import { OrderStatus } from '~/models/Order'
 
 const { t } = useI18n()
 const store = useOrderStore()
-const { orders, isLoading } = storeToRefs(store)
 const dialog = useDialog()
 const message = useMessage()
 const router = useRouter()
@@ -23,7 +22,7 @@ const columns: DataTableColumns<RowData> = [
   {
     title: 'Customer',
     key: 'customer',
-
+    fixed: 'left',
   },
   {
     title: 'Date',
@@ -109,7 +108,7 @@ function handleDeleteItem(row: RowData) {
     positiveText: 'Yes, Delete',
     negativeText: 'Cancel',
     onPositiveClick: () => {
-      store.deleteProduct(row.id)
+      // store.deleteProduct(row.id)
       message.success('Product was deleted!')
     },
   })
@@ -152,8 +151,8 @@ function handleFiltersChange() {
           </NButton>
         </NSpace>
         <n-data-table
-          :columns="columns" :data="orders" :loading="isLoading" :pagination="options"
-          :row-key="rowKey" @update:sorter="handleSorterChange" @update:filters="handleFiltersChange"
+          :columns="columns" :data="store.orders" :loading="store.isLoading" :pagination="options" :row-key="rowKey"
+          :scroll-x="1000" @update:sorter="handleSorterChange" @update:filters="handleFiltersChange"
           @update:page="handlePageChange"
         />
       </div>

diff --git a/src/components/Products/ProductsManagement.vue b/src/components/Products/ProductsManagement.vue
@@ -12,7 +12,6 @@ import { ProductStatus } from '~/models/Product'
 
 const { t } = useI18n()
 const store = useProductStore()
-const { products, isLoading } = storeToRefs(store)
 const dialog = useDialog()
 const message = useMessage()
 const router = useRouter()
@@ -21,6 +20,7 @@ onMounted(getItems)
 const columns: DataTableColumns<RowData> = [
   {
     type: 'selection',
+    fixed: 'left',
   },
   {
     title: 'PRODUCT',
@@ -157,9 +157,9 @@ function handleFiltersChange() {
           </NButton>
         </NSpace>
         <n-data-table
-          remote :columns="columns" :data="products" :loading="isLoading" :pagination="options" selectable
-          :row-key="rowKey" @update:sorter="handleSorterChange" @update:filters="handleFiltersChange"
-          @update:page="handlePageChange"
+          remote :columns="columns" :data="store.products" :loading="store.isLoading" :pagination="options" selectable
+          :row-key="rowKey" :scroll-x="1000" @update:sorter="handleSorterChange"
+          @update:filters="handleFiltersChange" @update:page="handlePageChange"
         />
       </div>
     </n-layout-content>

diff --git a/src/components/Review/ReviewManagement.vue b/src/components/Review/ReviewManagement.vue
@@ -8,7 +8,6 @@ import { storeToRefs } from 'pinia'
 import { useDialog, useMessage } from 'naive-ui'
 
 const store = useReviewStore()
-const { reviews, isLoading } = storeToRefs(store)
 const dialog = useDialog()
 const message = useMessage()
 
@@ -22,6 +21,7 @@ const columns: DataTableColumns<RowData> = [
         h(NRate, { color: 'gold', readonly: true, defaultValue: row.rate, allowHalf: true }),
       ]
     },
+    fixed: 'left',
   },
   {
     title: 'COMMENT',
@@ -96,7 +96,7 @@ function handleDeleteItem(row: RowData) {
     positiveText: 'Yes, Delete',
     negativeText: 'Cancel',
     onPositiveClick: () => {
-      store.deleteProduct(row.id)
+      /// store.deleteProduct(row.id)
       message.success('Product was deleted!')
     },
   })
@@ -128,9 +128,9 @@ function handleFiltersChange() {
     <n-layout-content>
       <div class="px-3">
         <n-data-table
-          remote :columns="columns" :data="reviews" :loading="isLoading" :pagination="options"
-          selectable :row-key="rowKey" @update:sorter="handleSorterChange" @update:filters="handleFiltersChange"
-          @update:page="handlePageChange"
+          remote :columns="columns" :data="store.reviews" :loading="store.isLoading" :pagination="options" selectable
+          :row-key="rowKey" :scroll-x="1000" @update:sorter="handleSorterChange"
+          @update:filters="handleFiltersChange" @update:page="handlePageChange"
         />
       </div>
     </n-layout-content>

diff --git a/src/store/order.store.ts b/src/store/order.store.ts
@@ -31,6 +31,7 @@ export const useOrderStore = defineStore('Order', () => {
     getOrders,
     getOrderDetail,
     isSaving,
+    isLoading,
   }
 })
 if (import.meta.hot)