|
1 | 1 | <script setup> |
2 | 2 | import { storeToRefs } from 'pinia'; |
3 | | -import { ref } from 'vue'; |
| 3 | +import { computed } from 'vue'; |
4 | 4 | import { useI18n } from 'vue-i18n'; |
5 | 5 |
|
6 | 6 | import { useFormStore } from '~/store/form'; |
7 | 7 | import { Regex } from '~/utils/constants'; |
| 8 | +import SubmissionPackageEmailSettings from './SubmissionPackageEmailSettings.vue'; |
8 | 9 |
|
9 | 10 | const { t, locale } = useI18n({ useScope: 'global' }); |
10 | 11 |
|
11 | 12 | const { form, isRTL } = storeToRefs(useFormStore()); |
12 | 13 |
|
13 | 14 | /* c8 ignore start */ |
14 | | -const emailArrayRules = ref([ |
15 | | - (v) => |
16 | | - !form.value.sendSubmissionReceivedEmail || |
| 15 | +const makeEmailArrayRules = (enabledRefOrGetter) => [ |
| 16 | + (v = []) => |
| 17 | + !enabledRefOrGetter() || |
17 | 18 | v.length > 0 || |
18 | 19 | t('trans.formSettings.atLeastOneEmailReq'), |
19 | | - (v) => |
20 | | - !form.value.sendSubmissionReceivedEmail || |
21 | | - v.every((item) => new RegExp(Regex.EMAIL).test(item)) || |
| 20 | +
|
| 21 | + (v = []) => |
| 22 | + !enabledRefOrGetter() || |
| 23 | + v.every((item) => new RegExp(Regex.EMAIL).test(String(item).trim())) || |
22 | 24 | t('trans.formSettings.validEmailRequired'), |
23 | | -]); |
| 25 | +]; |
| 26 | +
|
| 27 | +const submissionReceivedEmailRules = computed(() => |
| 28 | + makeEmailArrayRules(() => form.sendSubmissionReceivedEmail) |
| 29 | +); |
24 | 30 | /* c8 ignore stop */ |
25 | 31 | </script> |
26 | 32 |
|
@@ -100,35 +106,37 @@ const emailArrayRules = ref([ |
100 | 106 | </div> |
101 | 107 | </template> |
102 | 108 | </v-checkbox> |
| 109 | + <div v-if="form.sendSubmissionReceivedEmail"> |
| 110 | + <v-combobox |
| 111 | + v-model="form.submissionReceivedEmails" |
| 112 | + :hide-no-data="false" |
| 113 | + :rules="submissionReceivedEmailRules" |
| 114 | + solid |
| 115 | + variant="outlined" |
| 116 | + hide-selected |
| 117 | + clearable |
| 118 | + :hint="$t('trans.formSettings.addMoreValidEmailAddrs')" |
| 119 | + :label="$t('trans.formSettings.notificationEmailAddrs')" |
| 120 | + multiple |
| 121 | + chips |
| 122 | + closable-chips |
| 123 | + :delimiters="[' ', ',']" |
| 124 | + append-icon="" |
| 125 | + :lang="locale" |
| 126 | + > |
| 127 | + <template #no-data> |
| 128 | + <v-list-item> |
| 129 | + <v-list-item-title> |
| 130 | + <span |
| 131 | + :lang="locale" |
| 132 | + v-html="$t('trans.formSettings.pressToAddMultiEmail')" |
| 133 | + /> |
| 134 | + </v-list-item-title> |
| 135 | + </v-list-item> |
| 136 | + </template> |
| 137 | + </v-combobox> |
| 138 | + </div> |
103 | 139 |
|
104 | | - <v-combobox |
105 | | - v-if="form.sendSubmissionReceivedEmail" |
106 | | - v-model="form.submissionReceivedEmails" |
107 | | - :hide-no-data="false" |
108 | | - :rules="emailArrayRules" |
109 | | - solid |
110 | | - variant="outlined" |
111 | | - hide-selected |
112 | | - clearable |
113 | | - :hint="$t('trans.formSettings.addMoreValidEmailAddrs')" |
114 | | - :label="$t('trans.formSettings.notificationEmailAddrs')" |
115 | | - multiple |
116 | | - chips |
117 | | - closable-chips |
118 | | - :delimiters="[' ', ',']" |
119 | | - append-icon="" |
120 | | - :lang="locale" |
121 | | - > |
122 | | - <template #no-data> |
123 | | - <v-list-item> |
124 | | - <v-list-item-title> |
125 | | - <span |
126 | | - :lang="locale" |
127 | | - v-html="$t('trans.formSettings.pressToAddMultiEmail')" |
128 | | - /> |
129 | | - </v-list-item-title> |
130 | | - </v-list-item> |
131 | | - </template> |
132 | | - </v-combobox> |
| 140 | + <SubmissionPackageEmailSettings /> |
133 | 141 | </BasePanel> |
134 | 142 | </template> |
0 commit comments