Add primevue datatable

soasada · Apr 25, 2021 · 9641973 · 9641973
1 parent 2e78b05
commit 9641973
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 15 deletions.
diff --git a/kemenu-admin-frontend/package.json b/kemenu-admin-frontend/package.json
@@ -12,6 +12,8 @@
     "bootstrap": "^5.0.0-0",
     "core-js": "^3.6.5",
     "jwt-decode": "^3.1.2",
+    "primevue": "^3.4.0",
+    "primeicons": "^4.1.0",
     "vue": "^3.0.11",
     "vue-router": "^4.0.6",
     "vuex": "^4.0.0"

diff --git a/kemenu-admin-frontend/src/customers/CustomersView.vue b/kemenu-admin-frontend/src/customers/CustomersView.vue
@@ -1,32 +1,50 @@
 <template>
   <div class="customers">
     <BorderBottomTitle title="Customers"/>
-    <ResponsiveTable
-        :column-names="['email', 'role', 'marketingInfo.newsletterStatus', 'createdAt', 'updatedAt']"
-        :table-data="store.getters.getAllCustomers"
-        :show-actions-column="store.getters.isSuperAdmin || store.getters.isAdmin"
-        :loading-data="store.getters.isLoadingCustomers"
-        @edit="onEdit"
-        @delete="onDelete"
-    />
+    <DataTable :value="store.getters.getAllCustomers" v-model:filters="filters" :paginator="true" :rows="10" responsiveLayout="scroll">
+      <template #header>
+        <div class="p-d-flex p-jc-between">
+          <span class="p-input-icon-left">
+            <i class="pi pi-search"/>
+            <InputText v-model="filters['global'].value" placeholder="Search"/>
+          </span>
+        </div>
+      </template>
+      <Column v-for="col of columns"
+              :field="col.$props.field"
+              :header="col.$props.header"
+              :key="col.$props.field">
+      </Column>
+    </DataTable>
   </div>
 </template>
 
 <script lang="ts">
-import {defineComponent} from 'vue';
+import {defineComponent, ref} from 'vue';
 import {useStore} from 'vuex';
 import BorderBottomTitle from '@/layout/BorderBottomTitle.vue';
-import ResponsiveTable from '@/responsive_table/ResponsiveTable.vue';
 import CustomerResponse from '@/customers/CustomerResponse';
+import Column from 'primevue/column';
+import {FilterMatchMode} from 'primevue/api';
 
 export default defineComponent({
   name: 'CustomersView',
   components: {
-    BorderBottomTitle,
-    ResponsiveTable
+    BorderBottomTitle
   },
   setup() {
     const store = useStore();
+    const columns = ref<Column[]>([
+      {$props: {field: 'email', header: 'Email'}},
+      {$props: {field: 'role', header: 'Role'}},
+      {$props: {field: 'marketingInfo.newsletterStatus', header: 'Newsletter?'}},
+      {$props: {field: 'createdAt', header: 'Created At'}},
+      {$props: {field: 'updatedAt', header: 'Updated At'}},
+    ]);
+
+    const filters = ref({
+      'global': {value: null, matchMode: FilterMatchMode.CONTAINS}
+    });
 
     store.dispatch('findAllCustomers');
 
@@ -38,7 +56,7 @@ export default defineComponent({
       console.log('Deleting: ' + customer.email);
     };
 
-    return {store, onEdit, onDelete};
+    return {store, columns, filters, onEdit, onDelete};
   }
 });
 </script>
diff --git a/kemenu-admin-frontend/src/main.ts b/kemenu-admin-frontend/src/main.ts
@@ -2,7 +2,15 @@ import {createApp} from 'vue';
 import App from './App.vue';
 import router from './router';
 import store from './store';
+import PrimeVue from 'primevue/config';
+import DataTable from 'primevue/datatable';
+import Column from 'primevue/column';
+import Button from 'primevue/button';
+import InputText from 'primevue/inputtext';
 import 'bootstrap/dist/css/bootstrap.min.css';
+import 'primevue/resources/themes/saga-blue/theme.css';
+import 'primevue/resources/primevue.min.css';
+import 'primeicons/primeicons.css';
 
 router.beforeEach((to, from, next) => {
     if (to.matched.some(record => record.meta.requiresAuth)) {
@@ -19,7 +27,14 @@ router.beforeEach((to, from, next) => {
     }
 });
 
-createApp(App)
+const app = createApp(App)
     .use(store)
     .use(router)
-    .mount('#app');
+    .use(PrimeVue);
+
+app.component('DataTable', DataTable);
+app.component('Column', Column);
+app.component('Button', Button);
+app.component('InputText', InputText);
+
+app.mount('#app');