Skip to content

Commit

Permalink
Merge pull request #95 from PrivateAIM/93-change-status-columns-to-ta…
Browse files Browse the repository at this point in the history 
…gs-and-add-filter

93 change status columns to tags and add filter
  • Loading branch information
@brucetony
brucetony authored Aug 29, 2024
2 parents d51dd79 + 3515b77 commit 5f354fa
Show file tree
Hide file tree
Showing 5 changed files with 8,313 additions and 6,382 deletions.
114 changes: 107 additions & 7 deletions components/analysis/AnalysesTable.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,24 @@ import ExpandRowButtons from "~/components/table/ExpandRowButtons.vue";
import { showHubAdapterConnectionErrorToast } from "~/composables/connectionErrorToast";
import { FilterMatchMode } from "primevue/api";
import SearchBar from "~/components/table/SearchBar.vue";
import {
getApprovalStatusSeverity,
getBuildStatusSeverity,
getRunStatusSeverity,
} from "~/utils/status-tag-severity";
import {
AnalysisBuildStatus,
AnalysisRunStatus,
ApprovalStatus,
} from "~/services/Api";
const expandedRows = ref();
const analyses = ref();
const expandRowEntries = ["project_id", "node_id"];
const buildStatuses = Object.values(AnalysisBuildStatus);
const runStatuses = Object.values(AnalysisRunStatus);
const approvalStatuses = Object.values(ApprovalStatus);
const { data: response, status, error } = await getAnalysisNodes();
Expand All @@ -31,6 +44,9 @@ function onToggleRowExpansion(rowIds) {
// Table filters
const defaultFilters = {
global: { value: null, matchMode: FilterMatchMode.CONTAINS },
approval_status: { value: null, matchMode: FilterMatchMode.IN },
"analysis.build_status": { value: null, matchMode: FilterMatchMode.IN },
"analysis.run_status": { value: null, matchMode: FilterMatchMode.IN },
// Below are more examples
// "analysis.name": { value: null, matchMode: FilterMatchMode.CONTAINS },
// status: { value: null, matchMode: FilterMatchMode.CONTAINS },
Expand Down Expand Up @@ -102,18 +118,102 @@ const updateFilters = (filterText: string) => {
<Column
field="approval_status"
header="Approval Status"
:sortable="true"
/>
filterField="approval_status"
:showFilterMatchModes="false"
>
<template #body="{ data }">
<Tag
v-if="data.approval_status"
:value="data.approval_status"
:severity="getApprovalStatusSeverity(data.approval_status)"
/>
</template>
<template #filter="{ filterModel }">
<MultiSelect
v-model="filterModel.value"
:options="approvalStatuses"
optionLabel=""
placeholder="Any"
class="p-column-filter"
>
<template #option="slotProps">
<div class="flex align-items-center gap-2">
<Tag
v-if="slotProps.option"
:value="slotProps.option"
:severity="getApprovalStatusSeverity(slotProps.option)"
/>
</div>
</template>
</MultiSelect>
</template>
</Column>
<Column
field="analysis.build_status"
header="Build Status"
:sortable="true"
/>
field="analysis.build_status"
filterField="analysis.build_status"
:showFilterMatchModes="false"
>
<template #body="{ data }">
<Tag
v-if="data.analysis.build_status"
:value="data.analysis.build_status"
:severity="getBuildStatusSeverity(data.analysis.build_status)"
/>
</template>
<template #filter="{ filterModel }">
<MultiSelect
v-model="filterModel.value"
:options="buildStatuses"
optionLabel=""
placeholder="Any"
class="p-column-filter"
>
<template #option="slotProps">
<div class="flex align-items-center gap-2">
<Tag
v-if="slotProps.option"
:value="slotProps.option"
:severity="getBuildStatusSeverity(slotProps.option)"
/>
</div>
</template>
</MultiSelect>
</template>
</Column>
<Column
field="analysis.run_status"
header="Run Status"
:sortable="true"
/>
filterField="analysis.run_status"
:showFilterMatchModes="false"
>
<template #body="{ data }">
<Tag
v-if="data.analysis.run_status"
:value="data.analysis.run_status"
:severity="getRunStatusSeverity(data.analysis.run_status)"
/>
</template>
<template #filter="{ filterModel }">
<MultiSelect
v-model="filterModel.value"
:options="runStatuses"
optionLabel=""
placeholder="Any"
class="p-column-filter"
>
<template #option="slotProps">
<div class="flex align-items-center gap-2">
<Tag
v-if="slotProps.option"
:value="slotProps.option"
:severity="getRunStatusSeverity(slotProps.option)"
/>
</div>
</template>
</MultiSelect>
</template>
</Column>
<Column
field="analysis.project_id"
header="Project"
Expand Down
38 changes: 35 additions & 3 deletions components/projects/ProposalTable.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,18 +3,21 @@ import { getProposals } from "~/composables/useAPIFetch";
import ApproveRejectButtons from "~/components/projects/ApproveRejectButtons.vue";
import { formatDataRow } from "~/utils/format-data-row";
import TableRowMetadata from "~/components/TableRowMetadata.vue";
import type { ProjectNode } from "~/services/Api";
import { ApprovalStatus, type ProjectNode } from "~/services/Api";
import ExpandRowButtons from "~/components/table/ExpandRowButtons.vue";
import { showHubAdapterConnectionErrorToast } from "~/composables/connectionErrorToast";
import { FilterMatchMode } from "primevue/api";
import SearchBar from "~/components/table/SearchBar.vue";
import { getApprovalStatusSeverity } from "~/utils/status-tag-severity";
const proposals = ref();
const expandedRows = ref({});
const dataRowUnixCols = ["created_at", "updated_at"];
const expandRowEntries = ["project_id", "node_id"];
const approvalStatuses = Object.values(ApprovalStatus);
const { data: response, status, error } = await getProposals();
if (status.value === "success") {
proposals.value = formatDataRow(
Expand Down Expand Up @@ -42,6 +45,7 @@ function updateTable(newData: ProjectNode) {
// Table filters
const defaultFilters = {
global: { value: null, matchMode: FilterMatchMode.CONTAINS },
approval_status: { value: null, matchMode: FilterMatchMode.IN },
};
const filters = ref(defaultFilters);
Expand Down Expand Up @@ -106,8 +110,36 @@ const updateFilters = (filterText: string) => {
<Column
field="approval_status"
header="Approval Status"
:sortable="true"
></Column>
filterField="approval_status"
:showFilterMatchModes="false"
>
<template #body="{ data }">
<Tag
v-if="data.approval_status"
:value="data.approval_status"
:severity="getApprovalStatusSeverity(data.approval_status)"
/>
</template>
<template #filter="{ filterModel }">
<MultiSelect
v-model="filterModel.value"
:options="approvalStatuses"
optionLabel=""
placeholder="Any"
class="p-column-filter"
>
<template #option="slotProps">
<div class="flex align-items-center gap-2">
<Tag
v-if="slotProps.option"
:value="slotProps.option"
:severity="getApprovalStatusSeverity(slotProps.option)"
/>
</div>
</template>
</MultiSelect>
</template>
</Column>
<Column
header="Created On"
field="created_at.long"
Expand Down
Loading

0 comments on commit 5f354fa

Please sign in to comment.