Skip to content

fix: Doc status filter #4893

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
zhanweizhang7 merged 1 commit into from
Mar 17, 2026
+68 −0
Merged

fix: Doc status filter #4893

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
68 changes: 68 additions & 0 deletions ui/src/views/document/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -202,6 +202,74 @@
:label="$t('views.document.fileStatus.label')"
width="120"
>
<template #header>
<div>
<span>{{ $t('views.document.fileStatus.label') }}</span>
<el-dropdown trigger="click" @command="dropdownHandle">
<el-button
style="margin-top: 1px"
link
:type="filterMethod['status'] ? 'primary' : ''"
>
<el-icon>
<Filter />
</el-icon>
</el-button>
<template #dropdown>
<el-dropdown-menu style="width: 100px">
<el-dropdown-item
:class="filterMethod['status'] ? '' : 'is-active'"
:command="beforeCommand('status', '')"
class="justify-center"
>{{ $t('common.status.all') }}
</el-dropdown-item>
<el-dropdown-item
:class="filterMethod['status'] === State.SUCCESS ? 'is-active' : ''"
class="justify-center"
:command="beforeCommand('status', State.SUCCESS)"
>{{ $t('common.status.success') }}
</el-dropdown-item>
<el-dropdown-item
:class="filterMethod['status'] === State.FAILURE ? 'is-active' : ''"
class="justify-center"
:command="beforeCommand('status', State.FAILURE)"
>{{ $t('common.status.fail') }}
</el-dropdown-item>
<el-dropdown-item
:class="
filterMethod['status'] === State.STARTED &&
filterMethod['task_type'] == TaskType.EMBEDDING
? 'is-active'
: ''
"
class="justify-center"
:command="beforeCommand('status', State.STARTED, TaskType.EMBEDDING)"
>{{ $t('views.document.fileStatus.EMBEDDING') }}
</el-dropdown-item>
<el-dropdown-item
:class="filterMethod['status'] === State.PENDING ? 'is-active' : ''"
class="justify-center"
:command="beforeCommand('status', State.PENDING)"
>{{ $t('views.document.fileStatus.PENDING') }}
</el-dropdown-item>
<el-dropdown-item
:class="
filterMethod['status'] === State.STARTED &&
filterMethod['task_type'] === TaskType.GENERATE_PROBLEM
? 'is-active'
: ''
"
class="justify-center"
:command="
beforeCommand('status', State.STARTED, TaskType.GENERATE_PROBLEM)
"
>{{ $t('views.document.fileStatus.GENERATE') }}
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</template>
<template #default="{ row }">
<StatusValue :status="row.status" :status-meta="row.status_meta"></StatusValue>
</template>
Copy link
Contributor Author

@shaohuzhang1 shaohuzhang1 Mar 17, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The provided code snippet has several improvements that can be made to improve its readability and functionality. Here are some notes:

  1. Consistent Spacing: Ensure consistent spacing around operators and braces for better readability.

  2. Comments Formatting: Add comments with proper formatting to explain each part of the template.

  3. Code Duplication: The filterMethod is checked multiple times in different places, which could lead to duplication. Consider abstracting this logic into a helper function.

  4. Template String Consistency: Use single quotes consistently for string interpolation within templates.

  5. Dropdown Styling: Improve the styling of the dropdown button by adding more specific CSS classes or using Flexbox for center alignment.

Here's an improved version of the code with these considerations taken into account:

<template>
  <v-data-table header-class="custom-header" :items-per-page.sync="page_size">
    <!-- Table Header -->
    <template #[`item.${column.name}`] v-for="column in headers" :key="column.value">
      <!-- Custom Status Status Column -->
      <div v-if="column.value === 'fileStatus'" slot-scope="{ item }">
        <div>
          <span>{{ $t('views.document.fileStatus.label') }}</span>
          <el-dropdown trigger="click" @command="dropdownHandle">
            <el-button
              style="margin-top: 1px"
              link
              :type="filterMethod && filterMethod['status'] ? 'primary' : ''"
            >
              <el-icon><Filter /></el-icon>
            </el-button>
            <template #dropdown>
              <el-dropdown-menu class="dropdown-container">
                <el-dropdown-item
                  :class="(filterMethod && filterMethod['status']) !== state.ALL_STATUS ? '' : 'is-active'"
                  command="ALL_STATUS"
                  class="justify-center"
                >
                  {{ $t('common.status.all') }}
                </el-dropdown-item>
                <!-- ... (remaining items) ... -->
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>

        <!-- Conditionally render status value component if needed -->
        <StatusValue v-if="displayCondition(item)" :status="item.status" :status-meta="item.status_meta"></StatusValue>
      </div>
      <!-- Render other table columns similarly -->
    </template>
  </v-data-table>
</template>

<script>
import { ref, computed } from '@vue/composition-api';
import { State, TaskType } from '@/enums'; // Adjust import path based on actual context

export default {
  setup() {
    const page_size = ref(10);
    const headers = [
      // Your data.table.headers definition
    ];
    const displayCondition = (row) => {
      // Example condition to determine if status value column should be rendered
      return row.someAttribute; // Replace 'someAttribute' with appropriate logic
    };

    const dropdownHandle = (command) => {
      switch (command) {
        case state.ALL_STATUS:
          // Handle all statuses command
          break;
       case State.SUCCESS:
          // Handle success status command
          break;
        case State.FAILURE:
          // Handle failure status command
          break;
        // Add cases for other status values and task types if needed
        default:
          console.warn(`Unsupported filter method: ${command}`);
          break;
      }
    };

    // Define filterMethods and other helpers as necessary
    const filterMethods = reactive({
      status: null,
    });

    const beforeCommand = (property, subProperty) => () => ({
      property,
      subProperty,
    });

    return {
      page_size,
      headers,
      displayCondition,
      dropdownHandle,
      filterMethod: computed(() => Object.assign({}, filterMethods)),
      // Bind beforeCommand for filtering purposes
      before_command(property, subProperty) {
        setImmediate(() => {
          filterMethods[property] = subProperty;
          performFilter();
        });
      },
    };
  },
};
</script>

<style scoped>
.custom-header {
  /* Add custom styles here */
}
.dropdown-container {
  max-width: 100%;
  padding: 10px;
}
.el-icon {
  vertical-align: middle;
}
</style>

These changes address most of the identified issues. You can further optimize based on your specific requirements.

Expand Down
Loading