Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 | 4x 4x 4x 4x 4x 4x | <template>
<div class="section-title-header margin-bottom-s">
<div class="title-content">
<h3 class="section-title">
TARGET DETAILS
</h3>
<p class="section-hint">
Specify target details
</p>
</div>
</div>
<div class="form-section margin-bottom-s padding-left-xs padding-right-xs">
<div class="form-field margin-bottom-xs">
<label class="form-label">
Name
<span class="required">*</span>
</label>
<InputText
:model-value="formData.name"
name="name"
label="Enter Name"
@update:model-value="$emit('update:field', 'name', $event)"
/>
<div
v-if="validationErrors.name"
class="form-error is-visible"
>
<Icon :icon="csgErrorRed" />
<span>{{ validationErrors.name }}</span>
</div>
</div>
<div class="form-field margin-bottom-xs">
<label class="form-label">
Description
<span class="required">*</span>
</label>
<TextArea
:model-value="formData.description"
name="description"
:rows="3"
label="Enter Description"
@update:model-value="$emit('update:field', 'description', $event)"
/>
<div
v-if="validationErrors.description"
class="form-error is-visible"
>
<Icon :icon="csgErrorRed" />
<span>{{ validationErrors.description }}</span>
</div>
</div>
<div class="form-field margin-bottom-xs">
<label class="form-label">
Client
<span class="required">*</span>
</label>
<Checkbox
:model-value="formData.clients"
:options="clientTypeOptions"
name="clients"
@update:model-value="$emit('update:field', 'clients', $event)"
/>
<div
v-if="validationErrors.clients"
class="form-error is-visible"
>
<Icon :icon="csgErrorRed" />
<span>{{ validationErrors.clients }}</span>
</div>
</div>
<div
v-if="formData.clients?.includes('EMAIL')"
class="form-field margin-bottom-xs"
>
<label class="form-label">
Target Email Type
<span class="required">*</span>
</label>
<Dropdown
:model-value="formData.emailType"
:options="emailTemplateOptions"
name="emailType"
label="Target Email Type"
:disabled-option="true"
disabled-message="Select email template"
@update:model-value="$emit('update:field', 'emailType', $event)"
/>
<small
class="field-hint"
>This field is required when EMAIL client is selected</small>
<div
v-if="validationErrors.emailType"
class="form-error is-visible"
>
<Icon :icon="csgErrorRed" />
<span>{{ validationErrors.emailType }}</span>
</div>
</div>
</div>
</template>
<script setup>
import Checkbox from '@atomic-ui/checkbox';
import Dropdown from '@atomic-ui/dropdown';
import Icon from '@atomic-ui/icon';
import InputText from '@atomic-ui/inputText';
import TextArea from '@atomic-ui/textArea';
import { csgErrorRed } from '@csgSvgIcons/icons';
defineProps({
formData: { type: Object, required: true },
validationErrors: { type: Object, required: true },
clientTypeOptions: { type: Array, required: true },
emailTemplateOptions: { type: Array, required: true },
});
defineEmits(['update:field']);
</script>
<style scoped lang="scss">
@import './_target-form-styles.scss';
</style>
|