71 lines
1.8 KiB
Vue
71 lines
1.8 KiB
Vue
|
<script>
|
||
|
|
import { GlSprintf } from '@gitlab/ui';
|
||
|
|
import { s__, sprintf } from '~/locale';
|
||
|
|
import { toNounSeriesText } from '~/lib/utils/grammar';
|
||
|
|
|
||
|
|
export default {
|
||
|
|
components: {
|
||
|
|
GlSprintf,
|
||
|
|
},
|
||
|
|
props: {
|
||
|
|
emails: {
|
||
|
|
type: Array,
|
||
|
|
required: true,
|
||
|
|
},
|
||
|
|
numberOfLessParticipants: {
|
||
|
|
type: Number,
|
||
|
|
required: false,
|
||
|
|
default: 3,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
isShowingMoreParticipants: false,
|
||
|
|
};
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
title() {
|
||
|
|
return this.moreParticipantsAvailable
|
||
|
|
? toNounSeriesText(this.lessParticipants, { onlyCommas: true })
|
||
|
|
: toNounSeriesText(this.emails);
|
||
|
|
},
|
||
|
|
lessParticipants() {
|
||
|
|
return this.emails.slice(0, this.numberOfLessParticipants);
|
||
|
|
},
|
||
|
|
moreLabel() {
|
||
|
|
return sprintf(s__('EmailParticipantsWarning|and %{moreCount} more'), {
|
||
|
|
moreCount: this.emails.length - this.numberOfLessParticipants,
|
||
|
|
});
|
||
|
|
},
|
||
|
|
moreParticipantsAvailable() {
|
||
|
|
return !this.isShowingMoreParticipants && this.emails.length > this.numberOfLessParticipants;
|
||
|
|
},
|
||
|
|
message() {
|
||
|
|
return this.moreParticipantsAvailable
|
||
|
|
? s__('EmailParticipantsWarning|%{emails}, %{andMore} will be notified of your comment.')
|
||
|
|
: s__('EmailParticipantsWarning|%{emails} will be notified of your comment.');
|
||
|
|
},
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
showMoreParticipants() {
|
||
|
|
this.isShowingMoreParticipants = true;
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div class="issuable-note-warning" data-testid="email-participants-warning">
|
||
|
|
<gl-sprintf :message="message">
|
||
|
|
<template #andMore>
|
||
|
|
<button type="button" class="btn-transparent btn-link" @click="showMoreParticipants">
|
||
|
|
{{ moreLabel }}
|
||
|
|
</button>
|
||
|
|
</template>
|
||
|
|
<template #emails>
|
||
|
|
<span>{{ title }}</span>
|
||
|
|
</template>
|
||
|
|
</gl-sprintf>
|
||
|
|
</div>
|
||
|
|
</template>
|