11<template >
22 <div >
3- <div class =" table-responsive" v-if =" data" >
3+ <div class =" table-responsive" v-if =" data.length > 0" >
4+ <c-input-group v-if =" properties.search" mt =1 >
5+ <c-input-left-element >
6+ <i class =" fas fa-search" ></i >
7+ </c-input-left-element >
8+ <c-input py =5 v-model =" searchInput" type =" text" placeholder =" بحث" />
9+ </c-input-group >
410 <table class =" table table-cards text-right" >
511 <thead >
612 <tr class =" text-light" >
2329 <!-- Control Column -->
2430 <td class =" align-middle" >
2531 <!-- Custom Control -->
26- <slot name =" control" />
32+ <!-- < slot name="control" /> -- >
2733
2834 <!-- Controllable Buttons -->
2935 <div class =" d-inline-block" v-if =" x.id" >
30- <c-button v-if =" properties.watch" size =" sm" @click =" $emit('watch', x.id)" variant =" ghost" >
31- <i class =" fas fa-eye text-dark" ></i >
32- </c-button >
33-
34- <c-button v-if =" properties.edit" variant-color =" blue" size =" sm" @click =" $emit('edit', x.id)" variant =" ghost" >
35- <i class =" fas fa-pen" ></i >
36- </c-button >
37-
38- <c-button v-if =" properties.remove" variant-color =" red" size =" sm" @click =" $emit('remove', x.id)" variant =" ghost" >
39- <i class =" fas fa-times" ></i >
40- </c-button >
36+ <div v-for =" control in properties.control" :key =" control.name" class =" d-inline-block" >
37+ <c-button v-if =" $_.get(x, control.column ? control.column : 'id')" size =" sm" @click =" $emit(control.name, $_.get(x, control.column ? control.column : 'id'))" variant =" ghost" >
38+ <i class =" fas" :class =" [control.icon, 'text-'+(control.variant ? control.variant : 'dark')]" ></i >
39+ </c-button >
40+ </div >
4141 </div >
4242 </td >
4343 </tr >
4444 </tbody >
4545 </table >
46- <UtilitiesLoadMore @page =" paginatedCounter = $event" @data =" paginatedData = $event" :data =" data " perPage =" 10" />
46+ <UtilitiesLoadMore @page =" paginatedCounter = $event" @data =" paginatedData = $event" :data =" datas " perPage =" 10" />
4747
4848 </div >
4949 <div v-else >
5252 <c-alert-title :mt =" 4" :mb =" 1" fontSize =" xl" v-if =" properties.noData.message" >{{properties.noData.message}}</c-alert-title >
5353 <c-alert-title :mt =" 4" :mb =" 1" fontSize =" xl" v-else >لايوجد بيانات</c-alert-title >
5454 <c-alert-description maxWidth =" sm" >
55- <span v-if =" properties.noData.tip" >{{properties.noData.tip}}</span >
55+ <span v-if =" properties.noData.tip" >
56+ <nuxt-link v-if =" properties.noData.link" :to =" properties.noData.link" class =" fw-bold text-light" >
57+ {{properties.noData.tip}}
58+ </nuxt-link >
59+ <span v-else >{{properties.noData.tip}}</span >
60+ </span >
5661 <span v-else ></span >
57- <nuxt-link v-if =" properties.noData.link" to =" /supermarket/new-order" class =" fw-bold text-light" > نافذة الطلبات </nuxt-link >
5862 </c-alert-description >
5963 </c-alert >
6064 </div >
@@ -68,12 +72,23 @@ export default {
6872 columns () {
6973 return this .properties .head .filter ((x ) => x .column );
7074 },
75+ datas () {
76+ let datas = this .data ;
77+ if (this .searchInput !== " " ) {
78+ datas = datas .filter ((x ) => {
79+ let t = this .$_ .get (x, this .properties .search );
80+ return this .$_ .includes ((t + ' ' ), this .searchInput );
81+ });
82+ }
83+ return datas;
84+ },
7185 },
7286 data () {
7387 return {
7488 // Pagination
7589 paginatedData: [],
7690 paginatedCounter: 0 ,
91+ searchInput: " " ,
7792 };
7893 },
7994};
0 commit comments