1<template> 2 <b-modal id="upload-certificate" ref="modal" @ok="onOk" @hidden="resetForm"> 3 <template #modal-title> 4 <template v-if="certificate"> 5 {{ $t('pageCertificates.replaceCertificate') }} 6 </template> 7 <template v-else> 8 {{ $t('pageCertificates.addNewCertificate') }} 9 </template> 10 </template> 11 <b-form> 12 <!-- Replace Certificate type --> 13 <template v-if="certificate !== null"> 14 <dl class="mb-4"> 15 <dt>{{ $t('pageCertificates.modal.certificateType') }}</dt> 16 <dd>{{ certificate.certificate }}</dd> 17 </dl> 18 </template> 19 20 <!-- Add new Certificate type --> 21 <template v-else> 22 <b-form-group 23 :label="$t('pageCertificates.modal.certificateType')" 24 label-for="certificate-type" 25 > 26 <b-form-select 27 id="certificate-type" 28 v-model="form.certificateType" 29 :options="certificateOptions" 30 :state="getValidationState($v.form.certificateType)" 31 @input="$v.form.certificateType.$touch()" 32 > 33 </b-form-select> 34 <b-form-invalid-feedback role="alert"> 35 <template v-if="!$v.form.certificateType.required"> 36 {{ $t('global.form.fieldRequired') }} 37 </template> 38 </b-form-invalid-feedback> 39 </b-form-group> 40 </template> 41 42 <b-form-group :label="$t('pageCertificates.modal.certificateFile')"> 43 <form-file 44 id="certificate-file" 45 v-model="form.file" 46 accept=".pem" 47 :state="getValidationState($v.form.file)" 48 > 49 <template #invalid> 50 <b-form-invalid-feedback role="alert"> 51 {{ $t('global.form.required') }} 52 </b-form-invalid-feedback> 53 </template> 54 </form-file> 55 </b-form-group> 56 </b-form> 57 <template #modal-ok> 58 <template v-if="certificate"> 59 {{ $t('global.action.replace') }} 60 </template> 61 <template v-else> 62 {{ $t('global.action.add') }} 63 </template> 64 </template> 65 <template #modal-cancel> 66 {{ $t('global.action.cancel') }} 67 </template> 68 </b-modal> 69</template> 70 71<script> 72import { required, requiredIf } from '@vuelidate/validators'; 73import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js'; 74import { useVuelidate } from '@vuelidate/core'; 75 76import FormFile from '@/components/Global/FormFile'; 77 78export default { 79 components: { FormFile }, 80 mixins: [VuelidateMixin], 81 props: { 82 certificate: { 83 type: Object, 84 default: null, 85 validator: (prop) => { 86 if (prop === null) return true; 87 return ( 88 Object.prototype.hasOwnProperty.call(prop, 'type') && 89 Object.prototype.hasOwnProperty.call(prop, 'certificate') 90 ); 91 }, 92 }, 93 }, 94 setup() { 95 return { 96 v$: useVuelidate(), 97 }; 98 }, 99 data() { 100 return { 101 form: { 102 certificateType: null, 103 file: null, 104 }, 105 }; 106 }, 107 computed: { 108 certificateTypes() { 109 return this.$store.getters['certificates/availableUploadTypes']; 110 }, 111 certificateOptions() { 112 return this.certificateTypes.map(({ type, label }) => { 113 return { 114 text: label, 115 value: type, 116 }; 117 }); 118 }, 119 }, 120 watch: { 121 certificateOptions: function (options) { 122 if (options.length) { 123 this.form.certificateType = options[0].value; 124 } 125 }, 126 }, 127 validations() { 128 return { 129 form: { 130 certificateType: { 131 required: requiredIf(function () { 132 return !this.certificate; 133 }), 134 }, 135 file: { 136 required, 137 }, 138 }, 139 }; 140 }, 141 methods: { 142 handleSubmit() { 143 this.$v.$touch(); 144 if (this.$v.$invalid) return; 145 this.$emit('ok', { 146 addNew: !this.certificate, 147 file: this.form.file, 148 location: this.certificate ? this.certificate.location : null, 149 type: this.certificate 150 ? this.certificate.type 151 : this.form.certificateType, 152 }); 153 this.closeModal(); 154 }, 155 closeModal() { 156 this.$nextTick(() => { 157 this.$refs.modal.hide(); 158 }); 159 }, 160 resetForm() { 161 this.form.certificateType = this.certificateOptions.length 162 ? this.certificateOptions[0].value 163 : null; 164 this.form.file = null; 165 this.$v.$reset(); 166 }, 167 onOk(bvModalEvt) { 168 // prevent modal close 169 bvModalEvt.preventDefault(); 170 this.handleSubmit(); 171 }, 172 }, 173}; 174</script> 175