fix: 💄 some ui improvement applied

better ui for management pages
doroudi · Nov 20, 2023 · b3867aa · b3867aa
1 parent 6dce807
commit b3867aa
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 72 deletions.
diff --git a/src/components.d.ts b/src/components.d.ts
@@ -42,6 +42,7 @@ declare module 'vue' {
     NNotificationProvider: typeof import('naive-ui')['NNotificationProvider']
     NPageHeader: typeof import('naive-ui')['NPageHeader']
     NPopselect: typeof import('naive-ui')['NPopselect']
+    NSpace: typeof import('naive-ui')['NSpace']
     NTreeSelect: typeof import('naive-ui')['NTreeSelect']
     NUpload: typeof import('naive-ui')['NUpload']
     RouterLink: typeof import('vue-router')['RouterLink']

diff --git a/src/components/Brand/BrandManagement.vue b/src/components/Brand/BrandManagement.vue
@@ -2,9 +2,9 @@
 import { type DataTableColumns, NButton, NIcon } from 'naive-ui/es/components'
 import type { RowData } from 'naive-ui/es/data-table/src/interface'
 import {
-  DismissCircle24Regular as DeleteIcon,
+  Delete24Regular as DeleteIcon,
   Edit32Regular as EditIcon,
-  AddCircle20Regular as PlusIcon,
+  Add20Regular as PlusIcon,
 } from '@vicons/fluent'
 import { storeToRefs } from 'pinia'
 import { useDialog, useMessage } from 'naive-ui'
@@ -17,40 +17,39 @@ const message = useMessage()
 onMounted(getItems)
 const columns: DataTableColumns<RowData> = [
   {
-    title: 'Name',
+    title: 'Brand',
     key: 'name',
   },
   {
-    title: 'Url Slog',
+    title: 'Slog',
     key: 'url',
   },
   {
     title: 'Actions',
     key: 'actions',
-    width: 200,
+    width: 110,
     render(row) {
       return [
         h(
           NButton,
           {
-            size: 'small',
+            size: 'medium',
             renderIcon: renderIcon(EditIcon),
-            ghost: true,
+            quaternary: true,
+            circle: true,
             class: 'mr-2',
-            onClick: () => edit(row),
+            onClick: () => { },
           },
-          { default: () => 'Edit' },
         ),
         h(
           NButton,
           {
-            size: 'small',
-            type: 'error',
-            ghost: true,
+            size: 'medium',
+            quaternary: true,
+            circle: true,
             renderIcon: renderIcon(DeleteIcon),
             onClick: () => handleDeleteItem(row),
           },
-          { default: () => 'Delete' },
         ),
       ]
     },
@@ -99,26 +98,22 @@ function createBrand() {
 <template>
   <n-layout>
     <n-layout-content>
-      <div>
-        <div class="flex items-center mb-5">
-          <h1 class="page-title mx-2">
-            {{ t('brands.title') }}
-          </h1>
-          <NButton type="primary" quaternary round @click="createBrand">
-            <template #icon>
-              <NIcon>
-                <PlusIcon />
-              </NIcon>
-            </template>
-            {{ t('brands.createButton') }}
-          </NButton>
-        </div>
-        <n-data-table
-          remote :columns="columns" :data="brands" :loading="isLoading" :pagination="options"
-          :row-key="rowKey" @update:sorter="handleSorterChange" @update:filters="handleFiltersChange"
-          @update:page="handlePageChange"
-        />
-      </div>
+      <n-space justify="space-between" class="mb-3">
+        <n-input placeholder="Search" />
+        <NButton type="primary" @click="createBrand">
+          <template #icon>
+            <NIcon>
+              <PlusIcon />
+            </NIcon>
+          </template>
+          {{ t('categories.createButton') }}
+        </NButton>
+      </n-space>
+      <n-data-table
+        remote :columns="columns" :data="brands" :loading="isLoading" :pagination="options"
+        :row-key="rowKey" @update:filters="handleFiltersChange"
+        @update:page="handlePageChange"
+      />
     </n-layout-content>
 
     <n-drawer v-model:show="showAddDialog" :width="502" placement="right">

diff --git a/src/components/Category/CategoryManagement.vue b/src/components/Category/CategoryManagement.vue
@@ -2,9 +2,9 @@
 import { type DataTableColumns, NButton, NIcon } from 'naive-ui/es/components'
 import type { RowData } from 'naive-ui/es/data-table/src/interface'
 import {
-  DismissCircle24Regular as DeleteIcon,
+  Delete24Regular as DeleteIcon,
   Edit32Regular as EditIcon,
-  AddCircle20Regular as PlusIcon,
+  Add20Regular as PlusIcon,
 } from '@vicons/fluent'
 import { storeToRefs } from 'pinia'
 import { useDialog, useMessage } from 'naive-ui'
@@ -18,7 +18,7 @@ const message = useMessage()
 onMounted(getItems)
 const columns: DataTableColumns<RowData> = [
   {
-    title: 'Name',
+    title: 'Category',
     key: 'name',
   },
   {
@@ -28,30 +28,29 @@ const columns: DataTableColumns<RowData> = [
   {
     title: 'Actions',
     key: 'actions',
-    width: 200,
+    width: 110,
     render(row) {
       return [
         h(
           NButton,
           {
-            size: 'small',
+            size: 'medium',
             renderIcon: renderIcon(EditIcon),
-            ghost: true,
+            quaternary: true,
+            circle: true,
             class: 'mr-2',
             onClick: () => {},
           },
-          { default: () => 'Edit' },
         ),
         h(
           NButton,
           {
-            size: 'small',
-            type: 'error',
-            ghost: true,
+            size: 'medium',
+            quaternary: true,
+            circle: true,
             renderIcon: renderIcon(DeleteIcon),
             onClick: () => handleDeleteItem(row),
           },
-          { default: () => 'Delete' },
         ),
       ]
     },
@@ -103,24 +102,23 @@ function createCategory() {
 </script>
 
 <template>
-  <n-layout has-sider>
+  <n-layout has-sider sider-placement="right">
     <n-layout-content>
-      <div>
-        <div class="flex items-center mb-5">
-          <h1 class="page-title mx-2">
-            {{ t('categories.title') }}
-          </h1>
-          <NButton type="primary" quaternary round @click="createCategory">
+      <div class="px-3">
+        <n-space justify="space-between" class="mb-3">
+          <n-input placeholder="Search" />
+          <NButton type="primary" @click="createCategory">
             <template #icon>
               <NIcon>
                 <PlusIcon />
               </NIcon>
             </template>
             {{ t('categories.createButton') }}
           </NButton>
-        </div>
+        </n-space>
         <n-data-table
           remote :columns="columns" :data="categories" :loading="isLoading" :pagination="options"
+          selectable
           :row-key="rowKey" @update:sorter="handleSorterChange" @update:filters="handleFiltersChange"
           @update:page="handlePageChange"
         />

diff --git a/src/components/Color/ColorManagement.vue b/src/components/Color/ColorManagement.vue
@@ -2,9 +2,9 @@
 import { type DataTableColumns, NButton, NIcon } from 'naive-ui/es/components'
 import type { RowData } from 'naive-ui/es/data-table/src/interface'
 import {
-  DismissCircle24Regular as DeleteIcon,
+  Delete24Regular as DeleteIcon,
   Edit32Regular as EditIcon,
-  AddCircle20Regular as PlusIcon,
+  Add20Regular as PlusIcon,
 } from '@vicons/fluent'
 import { storeToRefs } from 'pinia'
 import { useDialog, useMessage } from 'naive-ui'
@@ -37,30 +37,29 @@ const columns: DataTableColumns<RowData> = [
   {
     title: 'Actions',
     key: 'actions',
-    width: 200,
+    width: 110,
     render(row) {
       return [
         h(
           NButton,
           {
-            size: 'small',
+            size: 'medium',
             renderIcon: renderIcon(EditIcon),
-            ghost: true,
+            quaternary: true,
+            circle: true,
             class: 'mr-2',
-            onClick: () => edit(row),
+            onClick: () => { },
           },
-          { default: () => 'Edit' },
         ),
         h(
           NButton,
           {
-            size: 'small',
-            type: 'error',
-            ghost: true,
+            size: 'medium',
+            quaternary: true,
+            circle: true,
             renderIcon: renderIcon(DeleteIcon),
             onClick: () => handleDeleteItem(row),
           },
-          { default: () => 'Delete' },
         ),
       ]
     },
@@ -79,7 +78,7 @@ function handleDeleteItem(row: RowData) {
     positiveText: 'Yes, Delete',
     negativeText: 'Cancel',
     onPositiveClick: () => {
-      store.deleteBrand(row.id)
+      store.deleteColor(row.id)
       message.success('Brand was deleted!')
     },
   })
@@ -110,22 +109,20 @@ function createColor() {
   <n-layout>
     <n-layout-content>
       <div>
-        <div class="flex items-center mb-5">
-          <h1 class="page-title mx-2">
-            {{ t('colors.title') }}
-          </h1>
-          <NButton type="primary" quaternary round @click="createColor">
+        <n-space justify="space-between" class="mb-3">
+          <n-input placeholder="Search" />
+          <NButton type="primary" @click="createColor">
             <template #icon>
               <NIcon>
                 <PlusIcon />
               </NIcon>
             </template>
-            {{ t('brands.createButton') }}
+            {{ t('categories.createButton') }}
           </NButton>
-        </div>
+        </n-space>
         <n-data-table
           remote :columns="columns" :data="colors" :loading="isLoading" :pagination="options"
-          :row-key="rowKey" @update:sorter="handleSorterChange" @update:filters="handleFiltersChange"
+          :row-key="rowKey" @update:filters="handleFiltersChange"
           @update:page="handlePageChange"
         />
       </div>