75 lines
1.7 KiB
Vue
75 lines
1.7 KiB
Vue
<script>
|
|
import { GlModal, GlLink, GlSprintf } from '@gitlab/ui';
|
|
|
|
import CodeBlock from '~/vue_shared/components/code_block.vue';
|
|
import { fieldTypes } from '../../constants';
|
|
|
|
export default {
|
|
components: {
|
|
CodeBlock,
|
|
GlModal,
|
|
GlLink,
|
|
GlSprintf,
|
|
},
|
|
props: {
|
|
visible: {
|
|
type: Boolean,
|
|
required: true,
|
|
},
|
|
title: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
modalData: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
},
|
|
computed: {
|
|
filteredModalData() {
|
|
// Filter out the properties that don't have a value
|
|
return Object.fromEntries(
|
|
Object.entries(this.modalData).filter((data) => Boolean(data[1].value)),
|
|
);
|
|
},
|
|
},
|
|
fieldTypes,
|
|
};
|
|
</script>
|
|
<template>
|
|
<gl-modal
|
|
:visible="visible"
|
|
modal-id="modal-mrwidget-reports"
|
|
:title="title"
|
|
:hide-footer="true"
|
|
@hide="$emit('hide')"
|
|
>
|
|
<div v-for="(field, key, index) in filteredModalData" :key="index" class="row gl-mt-3 gl-mb-3">
|
|
<strong class="col-sm-3 text-right"> {{ field.text }}: </strong>
|
|
|
|
<div class="col-sm-9">
|
|
<code-block v-if="field.type === $options.fieldTypes.codeBlock" :code="field.value" />
|
|
|
|
<gl-link
|
|
v-else-if="field.type === $options.fieldTypes.link"
|
|
:href="field.value.path"
|
|
target="_blank"
|
|
>
|
|
{{ field.value.text }}
|
|
</gl-link>
|
|
|
|
<gl-sprintf
|
|
v-else-if="field.type === $options.fieldTypes.seconds"
|
|
:message="__('%{value} s')"
|
|
>
|
|
<template #value>{{ field.value }}</template>
|
|
</gl-sprintf>
|
|
|
|
<template v-else-if="field.type === $options.fieldTypes.text">
|
|
{{ field.value }}
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</gl-modal>
|
|
</template>
|