Skip to content

Commit

Permalink
Merge pull request #120 from os-checker/feat/info-columns-select
Browse files Browse the repository at this point in the history 
feat: info 页面 实现所有列的筛选下拉框
  • Loading branch information
@zjp-CN
zjp-CN authored Nov 20, 2024
2 parents 49adb08 + 88655b5 commit 584f6b1
Show file tree
Hide file tree
Showing 6 changed files with 217 additions and 166 deletions.
4 changes: 2 additions & 2 deletions os-checks/assets/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,12 +45,12 @@ html, body {
}

.nav-link {
color: var(--p-indigo-500);
color: var(--p-sky-500);
/* 统一的链接颜色 */
text-decoration: none;
}

.nav-link.router-link-active {
color: var(--p-indigo-500);
color: var(--p-sky-500);
/* 重置激活链接的颜色 */
}
162 changes: 78 additions & 84 deletions os-checks/pages/info.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,8 @@
<MultiSelect v-model="selected.kinds" display="chip" :options="kinds" filter :maxSelectedLabels="4"
placeholder="Select Crate Kinds" />

<MultiSelect v-model="selected.displays" display="chip" :options="displays" filter :maxSelectedLabels="4"
placeholder="Select Columns" />
<MultiSelect v-model="selected.columns" display="chip" :options="columns" :optionLabel="o => C.option(o)" filter
:maxSelectedLabels="4" placeholder="Select Columns" />
</div>

<div>
Expand All @@ -48,28 +48,28 @@

<Column frozen sortable field="pkg" header="Package" style="min-width: 200px;" />

<Column sortable field="version" header="Version" style="text-align: center;" />
<Column sortable v-if="display.digits" field="lib" header="Lib" style="text-align: center;" />
<Column sortable v-if="display.digits" field="bin" header="Bin" style="text-align: center;" />
<Column sortable v-if="display.digits" field="dependencies" header="Depen-dencies" style="text-align: center;" />
<Column sortable field="release_count" header="crates.io Releases" style="text-align: center;">
<Column v-if="C.display('version')" sortable field="version" :header="C.name('version')"
style="text-align: center;" />

<Column v-if="C.display('release_count')" sortable field="release_count" :header="C.name('release_count')"
style="text-align: center;">
<template #body="{ data }">
<NuxtLink :to="`https://crates.io/crates/${data.pkg}`" target="_blank" class="nav-link">
{{ data.release_count }}
</NuxtLink>
</template>
</Column>

<Column sortable field="diag_total_count" header="Diag-nostics" style="text-align: center;">
<Column v-if="C.display('diag_total_count')" sortable field="diag_total_count"
:header="C.name('diag_total_count')" style="text-align: center;">
<template #body="{ data }">
<NuxtLink :to="`/${data.user}/${data.repo}`" target="_blank" class="nav-link">
{{ data.diag_total_count }}
</NuxtLink>
</template>
</Column>


<Column sortable v-if="display.digits" field="testcases" header="Test Cases"
<Column v-if="C.display('testcases')" sortable field="testcases" :header="C.name('testcases')"
style="text-align: center; font-weight: bold">
<template #body="{ data }">
<span :style="{ color: data.testcases_color }">
Expand All @@ -78,53 +78,69 @@
</template>
</Column>

<Column sortable v-if="display.digits" field="tests" header="Tests" style="text-align: center;" />
<Column sortable v-if="display.digits" field="examples" header="Examples" style="text-align: center;" />
<Column sortable v-if="display.digits" field="benches" header="Benches" style="text-align: center;" />
<Column v-if="C.display('lib')" sortable field="lib" :header="C.name('lib')" style="text-align: center;" />
<Column v-if="C.display('bin')" sortable field="bin" :header="C.name('bin')" style="text-align: center;" />
<Column v-if="C.display('dependencies')" sortable field="dependencies" :header="C.name('dependencies')"
style="text-align: center;" />

<Column v-if="C.display('tests')" sortable field="tests" :header="C.name('tests')" style="text-align: center;" />
<Column v-if="C.display('examples')" sortable field="examples" :header="C.name('examples')"
style="text-align: center;" />
<Column v-if="C.display('benches')" sortable field="benches" :header="C.name('benches')"
style="text-align: center;" />

<Column v-if="display.links" field="documentation" header="Doc" style="text-align: center;">
<Column v-if="C.display('documentation')" field="documentation" :header="C.name('documentation')"
style="text-align: center;">
<template #body="{ data }">
<NuxtLink v-if="data.documentation" :to="data.documentation" target="_blank" class="nav-link">
<Button icon="pi pi-external-link" link />
link
<!-- <Button icon="pi pi-external-link" link /> -->
</NuxtLink>
</template>
</Column>

<Column v-if="display.links" field="latest_doc" header="Latest Doc" style="text-align: center;">
<Column v-if="C.display('latest_doc')" field="latest_doc" :header="C.name('latest_doc')"
style="text-align: center;">
<template #body="{ data }">
<NuxtLink v-if="data.latest_doc" :to="data.latest_doc" target="_blank" class="nav-link">
<Button icon="pi pi-external-link" link />
link
<!-- <Button icon="pi pi-external-link" link /> -->
</NuxtLink>
</template>
</Column>

<Column v-if="display.links" field="homepage" header="Home Page" style="text-align: center;">
<Column v-if="C.display('homepage')" field="homepage" :header="C.name('homepage')" style="text-align: center;">
<template #body="{ data }">
<NuxtLink v-if="data.homepage" :to="data.homepage" target="_blank" class="nav-link">
<Button icon="pi pi-external-link" link />
link
<!-- <Button icon="pi pi-external-link" link /> -->
</NuxtLink>
</template>
</Column>

<Column v-if="display.texts" sortable field="categories" header="Categories" style="min-width: 200px;">
<Column v-if="C.display('categories')" sortable field="categories" :header="C.name('categories')"
style="min-width: 200px;">
<template #body="{ data: { categories } }">
<div v-for="tag of categories">
<Tag severity="warn" :value="tag" style="margin-bottom: 5px;"></Tag>
</div>
</template>
</Column>

<Column v-if="display.texts" sortable field="keywords" header="KeyWords" style="min-width: 150px;">
<Column v-if="C.display('keywords')" sortable field="keywords" :header="C.name('keywords')"
style="min-width: 150px;">
<template #body="{ data: { keywords } }">
<div v-for="tag of keywords">
<Tag severity="warn" :value="tag" style="margin-bottom: 5px;"></Tag>
</div>
</template>
</Column>

<Column v-if="display.texts" field="description" header="Description" style="min-width: 280px;" />
<Column v-if="C.display('description')" field="description" :header="C.name('description')"
style="min-width: 280px;" />

<Column v-if="display.texts" sortable field="authors" header="Authors" style="min-width: 300px;">
<Column v-if="C.display('authors')" sortable field="authors" :header="C.name('authors')"
style="min-width: 300px;">
<template #body="{ data: { authors } }">
<div v-for="tag of authors">
<Tag severity="info" :value="tag" style="margin-bottom: 5px;"></Tag>
Expand Down Expand Up @@ -212,7 +228,7 @@

<script setup lang="ts">
import type { Pkg, PkgInfo, Test } from '~/shared/info';
import { unique_field, unique_field_bool } from '~/shared/info';
import { unique_field, unique_field_bool, InfoCols } from '~/shared/info';
import { FilterMatchMode } from '@primevue/core/api';
import type { DataTableSortMeta } from 'primevue/datatable';
Expand All @@ -221,8 +237,6 @@ const tableHeight = computed(() => `${Math.round(viewportHeight.value * 0.8)}px`
const summaries = ref<PkgInfo[]>([]);
const display = reactive<{ digits: boolean, links: boolean, texts: boolean }>({ digits: true, links: false, texts: false });
githubFetch<PkgInfo[]>({
path: "plugin/cargo/info/summaries.json"
}).then(val => {
Expand Down Expand Up @@ -256,25 +270,24 @@ const summaryTable = computed<SummaryTable[]>(() => {
repo: val.repo,
pkg: name,
version: pkg.version,
release_count: pkg.release_count,
diag_total_count: pkg.diag_total_count,
testcases: pkg.testcases?.pkg_tests_count ?? null,
testcases_color,
lib: pkg.lib ? "✅" : null,
bin: pkg.bin ? "✅" : null,
dependencies: pkg.dependencies || null,
testcases: pkg.testcases?.pkg_tests_count ?? null,
testcases_color,
tests: pkg.tests || null,
examples: pkg.examples || null,
benches: pkg.benches || null,
authors: pkg.authors.length === 0 ? null : pkg.authors,
description: pkg.description,
keywords: pkg.keywords.length === 0 ? null : pkg.keywords,
categories: pkg.categories.length === 0 ? null : pkg.categories,
// os_categories: pkg.os_categories.length === 0 ? null : pkg.os_categories,
documentation: pkg.documentation,
latest_doc: docs.value?.[val.user]?.[val.repo]?.[name] ?? null,
readme: pkg.readme,
homepage: pkg.homepage,
latest_doc: docs.value?.[val.user]?.[val.repo]?.[name] ?? null,
diag_total_count: pkg.diag_total_count,
release_count: pkg.release_count,
categories: pkg.categories.length === 0 ? null : pkg.categories,
keywords: pkg.keywords.length === 0 ? null : pkg.keywords,
description: pkg.description,
authors: pkg.authors.length === 0 ? null : pkg.authors,
}
})
}).flat();
Expand Down Expand Up @@ -338,38 +351,30 @@ const kinds = computed(() => {
if (is_benches) { arr.push("Benches"); }
return arr;
});
const displays = computed(() => Object.keys(display));
const C = reactive(InfoCols.init());
C.setDefaultColumns();
const columns = C.options();
const selected = reactive<{
categories: string[],
keywords: string[],
authors: string[],
kinds: string[],
text: any,
displays: string[],
columns: string[],
sorts: DataTableSortMeta[],
}>({
categories: [], keywords: [], authors: [], kinds: [],
// interactive filter/search inputs
text: { global: { value: null, matchMode: FilterMatchMode.CONTAINS }, },
// columns to be displayed
displays: [],
columns: [],
sorts: [],
});
watch(() => selected.displays, (disp) => {
if (disp.length === 0) {
//@ts-ignore
// Object.keys(display).map(k => display[k] = true);
display.digits = true;
display.links = false;
display.texts = false;
return;
}
const set = new Set(disp);
//@ts-ignore
Object.keys(display).map(k => display[k] = set.has(k));
watch(() => selected.columns, (cols) => {
C.setDisplay(cols);
});
watchEffect(() => {
Expand Down Expand Up @@ -462,31 +467,27 @@ function updateFilter(query: {
authors?: string,
kinds?: string,
text?: string,
displays?: string,
columns?: string,
sorts?: string,
}) {
if (query.categories) { selected.categories = decodeURIComponent(query.categories).split(","); }
if (query.keywords) { selected.keywords = decodeURIComponent(query.keywords).split(","); }
if (query.authors) { selected.authors = decodeURIComponent(query.authors).split(","); }
const { categories, keywords, authors, kinds, text, columns, sorts } = query;
if (categories) { selected.categories = decodeURIComponent(categories).split(","); }
if (keywords) { selected.keywords = decodeURIComponent(keywords).split(","); }
if (authors) { selected.authors = decodeURIComponent(authors).split(","); }
if (query.kinds) {
if (kinds) {
const filter = new Set([
"Lib", "Bin", "TestCases", "Tests", "Examples", "Benches"
]);
selected.kinds = decodeURIComponent(query.kinds).split(",").filter(k => filter.has(k));
selected.kinds = decodeURIComponent(kinds).split(",").filter(k => filter.has(k));
}
if (query.text) {
selected.text.global.value = decodeURIComponent(query.text);
}
if (text) { selected.text.global.value = decodeURIComponent(text); }
if (columns) { selected.columns = decodeURIComponent(columns).split(","); }
if (query.displays) {
const filter = new Set(displays.value);
selected.displays = decodeURIComponent(query.displays).split(",").filter(k => filter.has(k));
}
if (query.sorts) {
const args = decodeURIComponent(query.sorts).split(",");
if (sorts) {
const args = decodeURIComponent(sorts).split(",");
//@ts-ignore
selected.sorts = args.map(arg => {
let [field, order] = arg.split("=");
Expand All @@ -498,29 +499,22 @@ updateFilter(route.query);
const router = useRouter();
watchEffect(() => {
const { categories, keywords, authors, kinds, text, displays, sorts } = selected;
const { categories, keywords, authors, kinds, text, columns, sorts } = selected;
let query: any = {};
if (categories.length !== 0) {
query.categories = encodeURIComponent(categories.join(","));
}
if (keywords.length !== 0) {
query.keywords = encodeURIComponent(keywords.join(","));
}
if (categories.length !== 0) { query.categories = encodeURIComponent(categories.join(",")); }
if (keywords.length !== 0) { query.keywords = encodeURIComponent(keywords.join(",")); }
if (authors.length !== 0) {
// FIXME: what if author string contains `,`
query.authors = encodeURIComponent(authors.join(","));
}
if (kinds.length !== 0) {
query.kinds = encodeURIComponent(kinds.join(","));
}
if (text.global.value) {
query.text = encodeURIComponent(text.global.value);
}
if (displays.length !== 0) {
query.displays = encodeURIComponent(displays.join(","));
}
if (kinds.length !== 0) { query.kinds = encodeURIComponent(kinds.join(",")); }
if (text.global.value) { query.text = encodeURIComponent(text.global.value); }
if (columns.length !== 0) { query.columns = encodeURIComponent(columns.join(",")); }
if (sorts.length !== 0) {
const args = sorts.map(({ field, order }) => order ? `${field}=${order}` : null);
query.sorts = encodeURIComponent(args.filter(x => x).join(","));
Expand Down
25 changes: 12 additions & 13 deletions os-checks/pages/repos.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@
<MultiSelect v-model="selected.topics" display="chip" :options="topics" filter :maxSelectedLabels="4"
placeholder="Select Topics" />

<MultiSelect v-model="selected.columns" display="chip" :options="columns" :optionLabel="o => Cols.option(o)"
filter :maxSelectedLabels="4" placeholder="Select Columns" />
<MultiSelect v-model="selected.columns" display="chip" :options="columns" :optionLabel="o => C.option(o)" filter
:maxSelectedLabels="4" placeholder="Select Columns" />
</div>

<div>
Expand Down Expand Up @@ -117,7 +117,7 @@
<script setup lang="ts">
import { FilterMatchMode } from '@primevue/core/api';
import type { DataTableSortMeta } from 'primevue/datatable';
import { formatBytes, Cols } from '~/shared/repos';
import { formatBytes, RepoCols } from '~/shared/repos';
import type { Output, Repo } from '~/shared/repos';
useHead({ title: 'Repositories Information' });
Expand Down Expand Up @@ -183,9 +183,9 @@ const selectedRepo = ref();
const licenses = computed(() => [...new Set(repo.value.map(r => r.license))].sort());
const topics = computed(() => [...new Set(repo.value.map(r => r.topics).flat())].sort());
const C = reactive(new Cols());
const C = reactive(RepoCols.init());
C.setDefaultColumns();
const columns = Cols.options();
const columns = C.options();
const selected = reactive<{
licenses: string[],
Expand Down Expand Up @@ -237,16 +237,15 @@ function updateFilter(query: {
text?: string,
sorts?: string,
}) {
if (query.licenses) { selected.licenses = decodeURIComponent(query.licenses).split(","); }
if (query.topics) { selected.topics = decodeURIComponent(query.topics).split(","); }
if (query.columns) { selected.columns = decodeURIComponent(query.columns).split(","); }
const { licenses, topics, columns, text, sorts } = query;
if (query.text) {
selected.text.global.value = decodeURIComponent(query.text);
}
if (licenses) { selected.licenses = decodeURIComponent(licenses).split(","); }
if (topics) { selected.topics = decodeURIComponent(topics).split(","); }
if (columns) { selected.columns = decodeURIComponent(columns).split(","); }
if (text) { selected.text.global.value = decodeURIComponent(text); }
if (query.sorts) {
const args = decodeURIComponent(query.sorts).split(",");
if (sorts) {
const args = decodeURIComponent(sorts).split(",");
//@ts-ignore
selected.sorts = args.map(arg => {
let [field, order] = arg.split("=");
Expand Down
Loading

0 comments on commit 584f6b1

Please sign in to comment.