feat(filter): added filters to list pages

AB#13
crawlab-team · Nov 2, 2022 · b6eeedf · b6eeedf
1 parent df73775
commit b6eeedf
Show file tree

Hide file tree

Showing 30 changed files with 596 additions and 50 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "crawlab-ui",
-  "version": "0.6.0-16",
+  "version": "0.6.0-17",
   "private": false,
   "author": {
     "name": "Marvin Zhang",

diff --git a/src/components/filter/FilterSelect.vue b/src/components/filter/FilterSelect.vue
@@ -4,8 +4,10 @@
       {{ label }}
     </label>
     <el-select
+      class="content"
       v-model="internalModelValue"
       :placeholder="placeholder"
+      :filterable="filterable"
       clearable
       @clear="onClear"
       @change="onChange"
@@ -38,6 +40,10 @@ export default defineComponent({
     placeholder: {
       type: String,
     },
+    filterable: {
+      type: Boolean,
+      default: true,
+    },
     options: {
       type: Array as PropType<SelectOption[]>,
     },
@@ -58,10 +64,12 @@ export default defineComponent({
     });
 
     const onChange = (value: any) => {
+      if (value === '') return;
       emit('change', value);
     };
 
     const onClear = () => {
+      internalModelValue.value = undefined;
       emit('change', undefined);
     };
 
@@ -90,4 +98,16 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
+.filter-select {
+  display: flex;
+  align-items: center;
+  flex: 1 0 auto;
+
+  .label {
+  }
+
+  .content {
+    flex: 1 0 180px;
+  }
+}
 </style>
diff --git a/src/components/nav/NavActionGroup.vue b/src/components/nav/NavActionGroup.vue
@@ -20,21 +20,26 @@ export default defineComponent({
 @import "../../styles/variables.scss";
 
 .nav-action-group {
-  height: auto;
+  height: fit-content;
   display: flex;
-  align-items: center;
+  align-items: start;
   box-sizing: border-box;
+  flex-wrap: wrap;
+  position: relative;
 
   & + .nav-action-group {
     //padding-left: 10px;
     margin-left: 10px;
+  }
 
-    .border {
-      margin-left: -10px;
-      margin-right: 10px;
-      border-left: 1px solid $navActionsGroupBorderColor;
-      height: calc(100% - 20px);
-    }
+  .border {
+    position: absolute;
+    left: 0;
+    top: 10px;
+    margin-left: -10px;
+    margin-right: 10px;
+    border-left: 1px solid $navActionsGroupBorderColor;
+    height: calc(100% - 20px);
   }
 }
 </style>

diff --git a/src/components/nav/NavActionItem.vue b/src/components/nav/NavActionItem.vue
@@ -32,8 +32,9 @@ export default defineComponent({
 
 .nav-action-item {
   margin: 10px 0;
-  height: auto;
+  height: fit-content;
   display: flex;
+  flex: 0 0 auto;
   align-items: center;
   color: $navActionsItemColor;
 

diff --git a/src/components/nav/NavActions.vue b/src/components/nav/NavActions.vue
@@ -1,9 +1,9 @@
 <template>
   <div
-      ref="navActions"
-      :class="classes"
-      :style="style"
-      class="nav-actions"
+    ref="navActions"
+    :class="classes"
+    :style="style"
+    class="nav-actions"
   >
     <slot></slot>
   </div>
@@ -33,7 +33,7 @@ export default defineComponent({
 
     const style = computed(() => {
       return {
-        height: height.value,
+        // height: height.value,
         minHeight: height.value,
       };
     });
@@ -86,10 +86,11 @@ export default defineComponent({
   padding: 0 10px;
   min-height: 50px;
   display: flex;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
   height: fit-content;
   border-bottom: 1px solid $infoBorderColor;
   transition: all $navActionsCollapseTransitionDuration;
+  overflow-x: auto;
   overflow-y: hidden;
   box-sizing: border-box;
 

diff --git a/src/components/user/user.ts b/src/components/user/user.ts
@@ -106,13 +106,19 @@ const useUser = (store: Store<RootStoreState>) => {
     await ElMessage.success(t('common.message.success.save'));
   };
 
+  const rolesOptions: SelectOption[] = [
+    {label: t('components.user.role.admin'), value: ROLE_ADMIN},
+    {label: t('components.user.role.normal'), value: ROLE_NORMAL},
+  ];
+
   return {
     ...useForm('user', store, useUserService(store), formComponentData),
     modeOptions,
     batchFormFields,
     formRules,
     allUserSelectOptions,
     onChangePasswordFunc,
+    rolesOptions,
   };
 };
 

diff --git a/src/i18n/lang/en/views/nodes.ts b/src/i18n/lang/en/views/nodes.ts
@@ -24,6 +24,21 @@ const nodes: LViewsNodes = {
       }
     }
   },
+  navActionsExtra: {
+    filter: {
+      select: {
+        type: {
+          label: 'Node Type'
+        },
+        status: {
+          label: 'Status'
+        },
+        enabled: {
+          label: 'Enabled'
+        },
+      }
+    }
+  },
   notice: {
     create: {
       title: 'Create Node',

diff --git a/src/i18n/lang/en/views/schedules.ts b/src/i18n/lang/en/views/schedules.ts
@@ -20,6 +20,26 @@ const schedules: LViewsSchedules = {
         placeholder: 'Search schedules',
       }
     }
+  },
+  navActionsExtra: {
+    filter: {
+      select: {
+        spider: {
+          label: 'Spider',
+        },
+        mode: {
+          label: 'Mode',
+        },
+        enabled: {
+          label: 'Enabled',
+        }
+      },
+      search: {
+        cron: {
+          placeholder: 'Search cron expression',
+        }
+      }
+    }
   }
 };
 

diff --git a/src/i18n/lang/en/views/spiders.ts b/src/i18n/lang/en/views/spiders.ts
@@ -26,7 +26,7 @@ const spiders: LViewsSpiders = {
     filter: {
       select: {
         project: {
-          label: 'Project'
+          label: 'Project',
         }
       }
     }

diff --git a/src/i18n/lang/en/views/tasks.ts b/src/i18n/lang/en/views/tasks.ts
@@ -28,6 +28,32 @@ const tasks: LViewsTasks = {
         placeholder: 'Search tasks',
       }
     }
+  },
+  navActionsExtra: {
+    filter: {
+      select: {
+        node: {
+          label: 'Node',
+        },
+        spider: {
+          label: 'Spider',
+        },
+        schedule: {
+          label: 'Schedule',
+        },
+        priority: {
+          label: 'Priority',
+        },
+        status: {
+          label: 'Status',
+        }
+      },
+      search: {
+        cmd: {
+          placeholder: 'Search Execute Command',
+        }
+      }
+    },
   }
 };
 

diff --git a/src/i18n/lang/en/views/users.ts b/src/i18n/lang/en/views/users.ts
@@ -16,6 +16,20 @@ const users: LViewsUsers = {
         placeholder: 'Search users',
       }
     }
+  },
+  navActionsExtra: {
+    filter: {
+      select: {
+        role: {
+          label: 'Role',
+        }
+      },
+      search: {
+        email: {
+          placeholder: 'Search email',
+        }
+      }
+    }
   }
 };
 

diff --git a/src/i18n/lang/zh/views/nodes.ts b/src/i18n/lang/zh/views/nodes.ts
@@ -24,6 +24,21 @@ const nodes: LViewsNodes = {
       }
     }
   },
+  navActionsExtra: {
+    filter: {
+      select: {
+        type: {
+          label: '节点类别'
+        },
+        status: {
+          label: '状态'
+        },
+        enabled: {
+          label: '是否启用'
+        },
+      }
+    }
+  },
   notice: {
     create: {
       title: '创建节点',

diff --git a/src/i18n/lang/zh/views/schedules.ts b/src/i18n/lang/zh/views/schedules.ts
@@ -20,6 +20,26 @@ const schedules: LViewsSchedules = {
         placeholder: '搜索定时任务',
       }
     }
+  },
+  navActionsExtra: {
+    filter: {
+      select: {
+        spider: {
+          label: '爬虫',
+        },
+        mode: {
+          label: '模式',
+        },
+        enabled: {
+          label: '是否启用',
+        }
+      },
+      search: {
+        cron: {
+          placeholder: '搜索 Cron 表达式',
+        }
+      }
+    }
   }
 };
 

diff --git a/src/i18n/lang/zh/views/spiders.ts b/src/i18n/lang/zh/views/spiders.ts
@@ -26,7 +26,7 @@ const spiders: LViewsSpiders = {
     filter: {
       select: {
         project: {
-          label: '项目'
+          label: '项目',
         }
       }
     }

diff --git a/src/i18n/lang/zh/views/tasks.ts b/src/i18n/lang/zh/views/tasks.ts
@@ -28,6 +28,32 @@ const tasks: LViewsTasks = {
         placeholder: '搜索任务',
       }
     }
+  },
+  navActionsExtra: {
+    filter: {
+      select: {
+        node: {
+          label: '节点',
+        },
+        spider: {
+          label: '爬虫',
+        },
+        schedule: {
+          label: '定时任务',
+        },
+        priority: {
+          label: '优先级',
+        },
+        status: {
+          label: '状态',
+        }
+      },
+      search: {
+        cmd: {
+          placeholder: '搜索执行命令',
+        }
+      }
+    },
   }
 };
 

diff --git a/src/i18n/lang/zh/views/users.ts b/src/i18n/lang/zh/views/users.ts
@@ -16,6 +16,20 @@ const users: LViewsUsers = {
         placeholder: '搜索用户',
       }
     }
+  },
+  navActionsExtra: {
+    filter: {
+      select: {
+        role: {
+          label: '角色',
+        }
+      },
+      search: {
+        email: {
+          placeholder: '搜索邮箱',
+        }
+      }
+    }
   }
 };
 

diff --git a/src/interfaces/components/filter/FilterSelect.d.ts b/src/interfaces/components/filter/FilterSelect.d.ts
@@ -8,6 +8,7 @@ export declare global {
   interface FilterSelectProps {
     label?: string;
     placeholder?: string;
+    filterable?: boolean;
     options?: SelectOption[];
     optionsRemote?: FilterSelectOptionsRemote;
   }