diff options
Diffstat (limited to 'app/assets/javascripts/artifacts/components/artifacts_table_row_details.vue')
-rw-r--r-- | app/assets/javascripts/artifacts/components/artifacts_table_row_details.vue | 89 |
1 files changed, 89 insertions, 0 deletions
diff --git a/app/assets/javascripts/artifacts/components/artifacts_table_row_details.vue b/app/assets/javascripts/artifacts/components/artifacts_table_row_details.vue new file mode 100644 index 00000000000..089bfd80222 --- /dev/null +++ b/app/assets/javascripts/artifacts/components/artifacts_table_row_details.vue @@ -0,0 +1,89 @@ +<script> +import { createAlert } from '~/flash'; +import { DynamicScroller, DynamicScrollerItem } from 'vendor/vue-virtual-scroller'; +import getJobArtifactsQuery from '../graphql/queries/get_job_artifacts.query.graphql'; +import destroyArtifactMutation from '../graphql/mutations/destroy_artifact.mutation.graphql'; +import { removeArtifactFromStore } from '../graphql/cache_update'; +import { + I18N_DESTROY_ERROR, + ARTIFACT_ROW_HEIGHT, + ARTIFACTS_SHOWN_WITHOUT_SCROLLING, +} from '../constants'; +import ArtifactRow from './artifact_row.vue'; + +export default { + name: 'ArtifactsTableRowDetails', + components: { + DynamicScroller, + DynamicScrollerItem, + ArtifactRow, + }, + props: { + artifacts: { + type: Object, + required: true, + }, + queryVariables: { + type: Object, + required: true, + }, + }, + data() { + return { + deletingArtifactId: null, + }; + }, + computed: { + scrollContainerStyle() { + /* + limit the height of the expanded artifacts container to a number of artifacts + if a job has more artifacts than ARTIFACTS_SHOWN_WITHOUT_SCROLLING, scroll to see the rest + add one pixel to row height to account for borders + */ + return { maxHeight: `${ARTIFACTS_SHOWN_WITHOUT_SCROLLING * (ARTIFACT_ROW_HEIGHT + 1)}px` }; + }, + }, + methods: { + isLastRow(index) { + return index === this.artifacts.nodes.length - 1; + }, + destroyArtifact(id) { + this.deletingArtifactId = id; + this.$apollo + .mutate({ + mutation: destroyArtifactMutation, + variables: { id }, + update: (store) => { + removeArtifactFromStore(store, id, getJobArtifactsQuery, this.queryVariables); + }, + }) + .catch(() => { + createAlert({ + message: I18N_DESTROY_ERROR, + }); + this.$emit('refetch'); + }) + .finally(() => { + this.deletingArtifactId = null; + }); + }, + }, + ARTIFACT_ROW_HEIGHT, +}; +</script> +<template> + <div :style="scrollContainerStyle"> + <dynamic-scroller :items="artifacts.nodes" :min-item-size="$options.ARTIFACT_ROW_HEIGHT"> + <template #default="{ item, index, active }"> + <dynamic-scroller-item :item="item" :active="active" :class="{ active }"> + <artifact-row + :artifact="item" + :is-last-row="isLastRow(index)" + :is-loading="item.id === deletingArtifactId" + @delete="destroyArtifact(item.id)" + /> + </dynamic-scroller-item> + </template> + </dynamic-scroller> + </div> +</template> |