feat(filter): added components of list filter

AB#13

package.json

@@ -77,6 +77,7 @@
     "url-join": "^4.0.1",
     "vue": "^3.2",
     "vue-clipboard3": "^1.0.1",
+    "vue-debounce": "^4.0.0",
     "vue-i18n": "9.1.9",
     "vue-router": "4.0.11",
     "vue3-dropzone": "^0.0.7",

src/components/filter/FilterInput.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="filter-input">
+    <label v-if="label" class="label">
+      {{ label }}
+    </label>
+    <el-input
+      v-model="internalModelValue"
+      :placeholder="placeholder"
+      clearable
+      @clear="onClear"
+      @input="onChange"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import {defineComponent, ref} from 'vue';
+import {debounce} from 'vue-debounce';
+
+export default defineComponent({
+  name: 'FilterInput',
+  props: {
+    label: {
+      type: String,
+    },
+    placeholder: {
+      type: String,
+    },
+  },
+  emits: [
+    'change',
+  ],
+  setup(props: FilterInputProps, {emit}) {
+    const internalModelValue = ref();
+
+    const onChange = debounce((value: any) => {
+      emit('change', value);
+    }, 500);
+
+    const onClear = () => {
+      internalModelValue.value = undefined;
+      emit('change', internalModelValue.value);
+    };
+
+    return {
+      internalModelValue,
+      onChange,
+      onClear,
+    };
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+</style>

src/components/filter/FilterSelect.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="filter-select">
+    <label v-if="label" class="label">
+      {{ label }}
+    </label>
+    <el-select
+      v-model="internalModelValue"
+      :placeholder="placeholder"
+      clearable
+      @clear="onClear"
+      @change="onChange"
+    >
+      <el-option
+        v-for="(option, $index) in computedOptions"
+        :key="$index"
+        :label="option.label"
+        :value="option.value"
+      />
+    </el-select>
+  </div>
+</template>
+
+<script lang="ts">
+import {computed, defineComponent, onBeforeMount, PropType, ref} from 'vue';
+import useRequest from '@/services/request';
+import {cloneArray, prependAllToSelectOptions} from '@/utils';
+
+const {
+  get,
+} = useRequest();
+
+export default defineComponent({
+  name: 'FilterSelect',
+  props: {
+    label: {
+      type: String,
+    },
+    placeholder: {
+      type: String,
+    },
+    options: {
+      type: Array as PropType<SelectOption[]>,
+    },
+    optionsRemote: {
+      type: Object as PropType<FilterSelectOptionsRemote>,
+    },
+  },
+  emits: [
+    'change',
+  ],
+  setup(props: FilterSelectProps, {emit}) {
+    const internalModelValue = ref();
+    const internalOptions = ref<SelectOption[]>([]);
+
+    const computedOptions = computed<SelectOption[]>(() => {
+      const options = cloneArray(props.options || internalOptions.value || []);
+      return prependAllToSelectOptions(options);
+    });
+
+    const onChange = (value: any) => {
+      emit('change', value);
+    };
+
+    const onClear = () => {
+      emit('change', undefined);
+    };
+
+    const getOptions = async () => {
+      if (!props.optionsRemote) return;
+      const {colName, value, label} = props.optionsRemote;
+      let url = `/filters/${colName}`;
+      if (value) url += `/${value}`;
+      if (label) url += `/${label}`;
+      const res = await get(url);
+      internalOptions.value = res.data;
+    };
+
+    onBeforeMount(async () => {
+      await getOptions();
+    });
+
+    return {
+      internalModelValue,
+      computedOptions,
+      onChange,
+      onClear,
+    };
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+</style>

src/constants/action.ts

@@ -15,3 +15,6 @@ export const ACTION_STOP = 'stop';
 export const ACTION_SAVE = 'save';
 export const ACTION_BACK = 'back';
 export const ACTION_ENABLE = 'enable';
+export const ACTION_FILTER = 'filter';
+export const ACTION_FILTER_SEARCH = 'filter-search';
+export const ACTION_FILTER_SELECT = 'filter-select';

src/i18n/lang/en/common.ts

@@ -94,6 +94,7 @@ const common: LCommon = {
   mode: {
     default: 'Default',
     other: 'Other',
+    all: 'All',
   },
   placeholder: {
     empty: 'Empty',

src/i18n/lang/en/views/nodes.ts

@@ -17,6 +17,11 @@ const nodes: LViewsNodes = {
     new: {
       label: 'New Node',
       tooltip: 'Create a new node'
+    },
+    filter: {
+      search: {
+        placeholder: 'Search nodes'
+      }
     }
   },
   notice: {

src/i18n/lang/en/views/notification.ts

@@ -4,6 +4,11 @@ const notification: LViewsNotification = {
       label: 'New Notification',
       tooltip: 'Create a new notification',
     },
+    filter: {
+      search: {
+        placeholder: 'Search notifications',
+      }
+    }
   },
   settings: {
     form: {

src/i18n/lang/en/views/plugins.ts

@@ -12,6 +12,11 @@ const plugins: LViewsPlugins = {
       label: 'New Plugin',
       tooltip: 'Create a new plugin',
     },
+    filter: {
+      search: {
+        placeholder: 'Search plugins',
+      }
+    },
     install: {
       label: 'Install Plugin',
       tooltip: 'Install a new plugin',

src/i18n/lang/en/views/projects.ts

@@ -11,6 +11,11 @@ const projects: LViewProjects = {
     new: {
       label: 'New Project',
       tooltip: 'Create a new project'
+    },
+    filter: {
+      search: {
+        placeholder: 'Search projects'
+      }
     }
   }
 };

src/i18n/lang/en/views/schedules.ts

@@ -14,6 +14,11 @@ const schedules: LViewsSchedules = {
     new: {
       label: 'New Schedule',
       tooltip: 'Create a new schedule',
+    },
+    filter: {
+      search: {
+        placeholder: 'Search schedules',
+      }
     }
   }
 };

src/i18n/lang/en/views/spiders.ts

@@ -15,6 +15,20 @@ const spiders: LViewsSpiders = {
     new: {
       label: 'New Spider',
       tooltip: 'Create a new spider'
+    },
+    filter: {
+      search: {
+        placeholder: 'Search spiders'
+      }
+    }
+  },
+  navActionsExtra: {
+    filter: {
+      select: {
+        project: {
+          label: 'Project'
+        }
+      }
     }
   }
 };

src/i18n/lang/en/views/tags.ts

@@ -11,6 +11,11 @@ const tags: LViewsTags = {
     new: {
       label: 'New Tag',
       tooltip: 'Create a new tag',
+    },
+    filter: {
+      search: {
+        placeholder: 'Search tags',
+      }
     }
   },
 };

src/i18n/lang/en/views/tasks.ts

@@ -22,6 +22,11 @@ const tasks: LViewsTasks = {
     new: {
       label: 'New Task',
       tooltip: 'Create a new task',
+    },
+    filter: {
+      search: {
+        placeholder: 'Search tasks',
+      }
     }
   }
 };

src/i18n/lang/en/views/tokens.ts

@@ -9,6 +9,11 @@ const tokens: LViewsTokens = {
     new: {
       label: 'New Token',
       tooltip: 'Create a new token',
+    },
+    filter: {
+      search: {
+        placeholder: 'Search tokens',
+      }
     }
   },
   messageBox: {

src/i18n/lang/en/views/users.ts

@@ -10,6 +10,11 @@ const users: LViewsUsers = {
     new: {
       label: 'New User',
       tooltip: 'Create a new user',
+    },
+    filter: {
+      search: {
+        placeholder: 'Search users',
+      }
     }
   }
 };

src/i18n/lang/zh/common.ts

@@ -94,6 +94,7 @@ const common: LCommon = {
   mode: {
     default: '默认',
     other: '其他',
+    all: '全部',
   },
   placeholder: {
     empty: '空',

src/i18n/lang/zh/views/nodes.ts

@@ -17,6 +17,11 @@ const nodes: LViewsNodes = {
     new: {
       label: '新建节点',
       tooltip: '添加一个新节点'
+    },
+    filter: {
+      search: {
+        placeholder: '搜索节点'
+      }
     }
   },
   notice: {

src/i18n/lang/zh/views/notification.ts

@@ -4,6 +4,11 @@ const notification: LViewsNotification = {
       label: '新建通知',
       tooltip: '创建一个新的通知',
     },
+    filter: {
+      search: {
+        placeholder: '搜索通知',
+      }
+    }
   },
   settings: {
     form: {

src/i18n/lang/zh/views/plugins.ts

@@ -12,6 +12,11 @@ const plugins: LViewsPlugins = {
       label: '新建插件',
       tooltip: '添加一个新插件',
     },
+    filter: {
+      search: {
+        placeholder: '搜索插件',
+      }
+    },
     install: {
       label: '安装插件',
       tooltip: '安装一个新插件',

src/i18n/lang/zh/views/projects.ts

@@ -11,6 +11,11 @@ const projects: LViewProjects = {
     new: {
       label: '新建项目',
       tooltip: '添加一个新项目'
+    },
+    filter: {
+      search: {
+        placeholder: '搜索项目'
+      }
     }
   }
 };

src/i18n/lang/zh/views/schedules.ts

@@ -14,6 +14,11 @@ const schedules: LViewsSchedules = {
     new: {
       label: '新建定时任务',
       tooltip: '添加一个新定时任务',
+    },
+    filter: {
+      search: {
+        placeholder: '搜索定时任务',
+      }
     }
   }
 };

src/i18n/lang/zh/views/spiders.ts

@@ -15,6 +15,20 @@ const spiders: LViewsSpiders = {
     new: {
       label: '新建爬虫',
       tooltip: '添加一个新爬虫'
+    },
+    filter: {
+      search: {
+        placeholder: '搜索爬虫'
+      }
+    }
+  },
+  navActionsExtra: {
+    filter: {
+      select: {
+        project: {
+          label: '项目'
+        }
+      }
     }
   }
 };