filter clients #69

frontend/src/views/Clients.vue

@@ -23,13 +23,24 @@
     :tag="stats.tag"
     @close="closeStats"
   />
-  <v-row>
-    <v-col cols="12" justify="center" align="center">
+  <v-row justify="center" align="center">
+    <v-col cols="auto">
       <v-btn color="primary" @click="showModal(-1)">{{ $t('actions.add') }}</v-btn>
     </v-col>
+    <v-col cols="auto">
+      <v-select
+      hide-details
+      variant="underlined"
+      density="compact"
+      :label="$t('filter')"
+      :items="filterItems"
+      v-model="filter">
+      </v-select>
+    </v-col>
   </v-row>
   <v-row>
-    <v-col cols="12" sm="4" md="3" lg="2" v-for="(item, index) in clients" :key="item.id">
+    <template v-for="(item, index) in clients" :key="item.id">
+      <v-col cols="12" sm="4" md="3" lg="2" v-if="checkFilter(item)">
         <v-card rounded="xl" elevation="5" min-width="200">
           <v-card-title>
             <v-row>
@@ -122,6 +133,7 @@
           </v-card-actions>
         </v-card>      
       </v-col>
+    </template>
   </v-row>
 </template>
 <script lang="ts" setup>
@@ -163,6 +175,28 @@ const inboundTags = computed((): string[] => {
   return inbounds.value?.filter(i => i.tag != "" && Object.hasOwn(i,'users')).map(i => i.tag)
 })
 
+const filter = ref("")
+
+const filterItems = [
+  { title: i18n.global.t('none'), value: '' },
+  { title: i18n.global.t('disable'), value: 'disable' },
+  { title: i18n.global.t('date.expired'), value: 'expired' },
+  { title: i18n.global.t('online'), value: 'online' },
+]
+
+const checkFilter = (c:any) :boolean => {
+  switch (filter.value) {
+    case "disable":
+      return !c.enable
+    case "expired":
+      return HumanReadable.remainedDays(c.expiry) == null
+    case "online":
+      return Data().onlines?.user?.includes(c.name)
+    default:
+      return true
+  }
+}
+
 const modal = ref({
   visible: false,
   index: -1,