zdna-form.vue

<template>
  <div class="row">
    <div class="col-md-12">
      <div class="form-group row">
        <label class="col-md-4 col-form-label">Minimal sequence size</label>
        <div class="col-md-8">
          <input
              type="number"
              class="form-control"
              step="1"
              min="6"
              max="100"
              v-model="minSequenceSize"
              @input="updateValue($event.target.value, 'minSequenceSize')"
          />
        </div>
      </div>
      <p v-if="minSequenceSize > 20" class="alert alert-warning">
        Sequence size recommended value is between 10 and 20.
      </p>
    <div class="form-group row">
      <label class="col-md-4 col-form-label">Prediction Model</label>
      <div class="col-md-8">
        <select class="form-control" v-model="selectedModel">
          <option value="model1">Model 1</option>
          <option value="model2">Model 2</option>
        </select>
      </div>
    </div>
    <div>
  <div class="form-group row">
    <label class="col-md-4 col-form-label">Score GC</label>
    <div class="col-md-8">
      <input 
        type="number" 
        class="form-control" 
        step="0.1"
        min="0.1"
        v-model="score_gc" 
        @input="updateValue($event.target.value, 'score_gc')"
      />
    </div>
  </div>

  <div class="form-group row">
    <label class="col-md-4 col-form-label">Score GT/AC</label>
    <div class="col-md-8">
      <input 
        type="number" 
        class="form-control" 
        v-model="score_gtac"
        step="0.1"
        min="0.1" 
        @input="updateValue($event.target.value, 'score_gtac')"
      />
    </div>
  </div>

  <div class="form-group row">
    <label class="col-md-4 col-form-label">Score AT</label>
    <div class="col-md-8">
      <input 
        type="number" 
        class="form-control"
        step="0.1"
        min="0.1"
        v-model="score_at" 
        @input="updateValue($event.target.value, 'score_at')"
      />
    </div>
  </div>

  <div class="form-group row">
    <label class="col-md-4 col-form-label">Score Others</label>
    <div class="col-md-8">
      <input 
        type="number" 
        class="form-control"
        step="0.1"
        min="0" 
        v-model="score_oth" 
        @input="updateValue($event.target.value, 'score_oth')"
      />
    </div>
  </div>
</div>
      <div class="form-group row">
        <label class="col-md-4 col-form-label">Threshold</label>
        <div class="col-md-8">
          <input
              type="number"
              class="form-control"
              step="0.1"
              min="1"
              v-model="threshold"
              @input="updateValue($event.target.value, 'threshold')"
          />
        </div>
      </div>

      <div class="alert alert-danger" v-if="$v.$anyError">
        <div v-if="!$v.minSequenceSize.required">Minimal sequence size is required.</div>
        <div v-if="!$v.minSequenceSize.numeric">Minimal sequence size must be numeric.</div>
        <div v-if="!$v.minSequenceSize.minValue">Minimal length of sequence is {{ $v.minSequenceSize.$params.minValue.min }}.</div>
        <div v-if="!$v.threshold.required">Threshold is required.</div>
        <div v-if="!$v.threshold.decimal">Threshold must be decimal number.</div>
        <div v-if="!$v.threshold.minValue">Minimal value of threshold is {{ $v.threshold.$params.minValue.min }}.</div>
      </div>

      <div class="text-right">
        <slot name="additionalButtons"></slot>
      </div>
    </div>
  </div>
</template>

<script>
import { required, numeric, minValue, decimal } from 'vuelidate/lib/validators'

export default {
  props: {
    minSequenceSize: {
      type: [Number, String],
      default: 10 
    },
    threshold: {
      type: [Number, String],
      default: 1 
    },
    score_gc: {
      type: [Number, String],
      default: 25
    },
    score_gtac: {
      type: [Number, String],
      default: 3
    },
    score_at: {
      type: [Number, String],
      default: 3
    },
    score_oth: {
      type: [Number, String],
      default: 0
    }
  },
  data() {
    return {
      selectedModel: 'model1',
    }
  },
  created() {
    this.minSequenceSize = Number(this.minSequenceSize);
    this.threshold = Number(this.threshold);
    this.score_gc = Number(this.score_gc);
    this.score_gtac = Number(this.score_gtac);
    this.score_at = Number(this.score_at);
    this.score_oth = Number(this.score_oth);
  },
  validations: {
    minSequenceSize: {
      required,
      numeric,
      minValue: minValue(6)
    },
    threshold: {
      required,
      decimal,
      minValue: minValue(1)
    },
    score_gc: {
      required,
      decimal,
      minValue: minValue(0.1)
    },
    score_gtac: {
      required,
      decimal,
      minValue: minValue(0.1)
    },
    score_at: {
      required,
      decimal,
      minValue: minValue(0.1)
    },
    score_oth: {
      required,
      decimal,
      minValue: minValue(0)
    }
  },
  watch: {
    selectedModel(newModel) {
      if (newModel === 'model1') {
        this.score_gc = 25;
        this.updateValue(25, 'score_gc')
        this.score_gtac = 3;
        this.updateValue(3, 'score_gtac')
        this.score_at = 3;
        this.updateValue(3, 'score_at')
        this.score_oth = 0;
        this.updateValue(0, 'score_oth')
      } else if (newModel === 'model2') {
        this.score_gc = 1;
        this.updateValue(1, 'score_gc')
        this.score_gtac = 0.5;
        this.updateValue(0.5, 'score_gtac')
        this.score_at = 0.25;
        this.updateValue(0.25, 'score_at')
        this.score_oth = 0;
        this.updateValue(0, 'score_oth')
      }
    },
    
  },
  methods: {
    updateValue(value, type) {
      this[type] = Number(value);
      this.$v[type].$touch(); // Aktivuje validáciu
      this.$emit('checkModel', value, type);
    },
  },
}
</script>