Skip to content

Commit

Permalink
Merge pull request #17449 from guerler/align_published_histories
Browse files Browse the repository at this point in the history
Adds published histories to grid list
  • Loading branch information
ahmedhamidawan authored Feb 15, 2024
2 parents 64a851c + 36b0f40 commit c862527
Show file tree
Hide file tree
Showing 9 changed files with 193 additions and 368 deletions.
8 changes: 7 additions & 1 deletion client/src/components/Grid/GridElements/GridDatasets.vue
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<script setup lang="ts">
import axios from "axios";
import { onMounted, type Ref, ref } from "vue";
import { onMounted, type Ref, ref, watch } from "vue";
import { withPrefix } from "@/utils/redirect";
import { rethrowSimple } from "@/utils/simple-error";
Expand Down Expand Up @@ -28,6 +28,7 @@ interface HistoryStats {
const historyStats: Ref<HistoryStats | null> = ref(null);
async function getCounts() {
historyStats.value = null;
if (props.historyId) {
try {
const { data } = await axios.get(
Expand All @@ -43,6 +44,11 @@ async function getCounts() {
onMounted(() => {
getCounts();
});
watch(
() => props.historyId,
() => getCounts()
);
</script>

<template>
Expand Down
57 changes: 29 additions & 28 deletions client/src/components/Grid/GridList.vue
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import GridLink from "./GridElements/GridLink.vue";
import GridOperations from "./GridElements/GridOperations.vue";
import GridText from "./GridElements/GridText.vue";
import FilterMenu from "@/components/Common/FilterMenu.vue";
import Heading from "@/components/Common/Heading.vue";
import SharingIndicators from "@/components/Indices/SharingIndicators.vue";
import LoadingSpan from "@/components/LoadingSpan.vue";
import StatelessTags from "@/components/TagsMultiselect/StatelessTags.vue";
Expand Down Expand Up @@ -235,35 +236,35 @@ watch(operationMessage, () => {
<div :id="gridConfig.id" class="d-flex flex-column overflow-auto">
<BAlert v-if="!!errorMessage" variant="danger" show>{{ errorMessage }}</BAlert>
<BAlert v-if="!!operationMessage" :variant="operationStatus" fade show>{{ operationMessage }}</BAlert>
<div class="grid-header d-flex justify-content-between pb-2">
<div>
<h1 class="m-0" data-description="grid title">
{{ gridConfig.title }}
</h1>
<FilterMenu
class="py-2"
:name="gridConfig.plural"
:placeholder="`search ${gridConfig.plural.toLowerCase()}`"
:filter-class="gridConfig.filtering"
:filter-text.sync="filterText"
:loading="loading"
:show-advanced.sync="showAdvanced"
@on-backend-filter="onSearch" />
<hr v-if="showAdvanced" />
</div>
<div v-if="!showAdvanced" class="py-3">
<BButton
v-for="(action, actionIndex) in gridConfig.actions"
:key="actionIndex"
class="m-1"
size="sm"
variant="primary"
:data-description="`grid action ${action.title.toLowerCase()}`"
@click="action.handler()">
<Icon :icon="action.icon" class="mr-1" />
<span v-localize>{{ action.title }}</span>
</BButton>
<div class="grid-header d-flex justify-content-between pb-2 flex-column">
<div class="d-flex">
<Heading h1 separator inline size="xl" class="flex-grow-1 m-0" data-description="grid title">
<span v-localize>{{ gridConfig.title }}</span>
</Heading>
<div class="d-flex justify-content-between">
<BButton
v-for="(action, actionIndex) in gridConfig.actions"
:key="actionIndex"
class="m-1"
size="sm"
variant="primary"
:data-description="`grid action ${action.title.toLowerCase()}`"
@click="action.handler()">
<Icon :icon="action.icon" class="mr-1" />
<span v-localize>{{ action.title }}</span>
</BButton>
</div>
</div>
<FilterMenu
class="py-2"
:name="gridConfig.plural"
:placeholder="`search ${gridConfig.plural.toLowerCase()}`"
:filter-class="gridConfig.filtering"
:filter-text.sync="filterText"
:loading="loading"
:show-advanced.sync="showAdvanced"
@on-backend-filter="onSearch" />
<hr v-if="showAdvanced" />
</div>
<LoadingSpan v-if="loading" />
<BAlert v-else-if="!isAvailable" variant="info" show>
Expand Down
112 changes: 112 additions & 0 deletions client/src/components/Grid/configs/historiesPublished.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,112 @@
import { faEye } from "@fortawesome/free-solid-svg-icons";
import { useEventBus } from "@vueuse/core";

import { historiesFetcher } from "@/api/histories";
import Filtering, { contains, expandNameTag, type ValidFilter } from "@/utils/filtering";
import _l from "@/utils/localization";

import type { FieldArray, GridConfig } from "./types";

const { emit } = useEventBus<string>("grid-router-push");

/**
* Local types
*/
type HistoryEntry = Record<string, unknown>;
type SortKeyLiteral = "name" | "update_time" | undefined;

/**
* Request and return data from server
*/
async function getData(offset: number, limit: number, search: string, sort_by: string, sort_desc: boolean) {
const { data, headers } = await historiesFetcher({
limit,
offset,
search,
sort_by: sort_by as SortKeyLiteral,
sort_desc,
show_own: false,
show_published: true,
show_shared: false,
});
const totalMatches = parseInt(headers.get("total_matches") ?? "0");
return [data, totalMatches];
}

/**
* Declare columns to be displayed
*/
const fields: FieldArray = [
{
key: "name",
title: "Name",
type: "operations",
operations: [
{
title: "View",
icon: faEye,
condition: (data: HistoryEntry) => !data.deleted,
handler: (data: HistoryEntry) => {
emit(`/histories/view?id=${data.id}`);
},
},
],
},
{
key: "annotation",
title: "Annotation",
type: "text",
},
{
key: "id",
title: "Size",
type: "datasets",
},
{
key: "tags",
title: "Tags",
type: "tags",
disabled: true,
},
{
key: "update_time",
title: "Updated",
type: "date",
},
{
key: "username",
title: "Username",
type: "text",
},
];

/**
* Declare filter options
*/
const validFilters: Record<string, ValidFilter<string | boolean | undefined>> = {
name: { placeholder: "name", type: String, handler: contains("name"), menuItem: true },
user: { placeholder: "user", type: String, handler: contains("username"), menuItem: true },
tag: {
placeholder: "tag(s)",
type: "MultiTags",
handler: contains("tag", "tag", expandNameTag),
menuItem: true,
},
};

/**
* Grid configuration
*/
const gridConfig: GridConfig = {
id: "histories-published-grid",
fields: fields,
filtering: new Filtering(validFilters, undefined, false, false),
getData: getData,
plural: "Histories",
sortBy: "update_time",
sortDesc: true,
sortKeys: ["name", "update_time", "username"],
title: "Published Histories",
};

export default gridConfig;
Loading

0 comments on commit c862527

Please sign in to comment.