All files / components/charthelper textInputs.vue

92.3% Statements 24/26
100% Branches 10/10
33.33% Functions 1/3
92.3% Lines 24/26

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      1x     1x                                                                                                                                                                                                  
<script setup>
import { ref, watch, onMounted, inject } from 'vue';
 
const props = defineProps({
  goal: {
      type: Object,
      default: null,
    },
});
 
// Load Store and Router
const store = inject('store');
 
const emit = defineEmits([
    'change-GoalName',
    'change-GoalDescription',
]);
 
// Define constants that will be referenced
const goalname = ref('')
const goaldescription = ref('')
 
onMounted(() => {
  goalname.value = props.goal.name
  goaldescription.value = props.goal.description
})
 
// Watch changes on goalname
watch(goalname, (newGoalName) => {
    store.state.learningpath.name = newGoalName;
    emit('change-GoalName', newGoalName);
});
 
// Watch changes on goaldescription
watch(goaldescription, (newGoalDescription) => {
    store.state.learningpath.description = newGoalDescription;
    emit('change-GoalDescription', newGoalDescription);
});
 
// Watch changes on goaldescription
watch(() => store.state.learningpath, async () => {
  goalname.value = store.state.learningpath.name
  goaldescription.value = store.state.learningpath.description
}, { deep: true } );
</script>
 
<template>
  <div>
    <div v-if="store.state.view!='teacher'">
      <h4 class="font-weight-bold">
        {{ store.state.strings.fromlearningtitel }}
      </h4>
      <div>
        <input
          id="goalnameplaceholder"
          v-model="goalname"
          v-autowidth="{ maxWidth: '960px', minWidth: '20px', comfortZone: 0 }"
          class="form-control fancy-input"
          :placeholder="store.state.strings.goalnameplaceholder"
          type="text"
          autofocus
        >
      </div>
      <h4 class="font-weight-bold">
        {{ store.state.strings.fromlearningdescription }}
      </h4>
      <div>
        <textarea
          id="goalsubjectplaceholder"
          v-model="goaldescription"
          v-autowidth="{ maxWidth: '960px', minWidth: '40%', comfortZone: 0 }"
          class="form-control fancy-input"
          :placeholder="store.state.strings.goalsubjectplaceholder"
        />
      </div>
    </div>
    <div v-else>
      <div class="card border-primary mb-3">
        <div class="card-header bg-primary text-white">
          <h5 class="card-title mb-0">
            {{ store.state.strings.fromlearningtitel }}
          </h5>
        </div>
        <div class="card-body">
          <p class="card-text">
            {{ goalname ? goalname : 'No name provided.' }}
          </p>
        </div>
      </div>
      <div class="card border-secondary">
        <div class="card-header bg-secondary text-white">
          <h5 class="card-title mb-0">
            {{ store.state.strings.fromlearningdescription }}
          </h5>
        </div>
        <div class="card-body">
          <p class="card-text">
            {{ goaldescription ? goaldescription : 'No description provided.' }}
          </p>
        </div>
      </div>
    </div>
  </div>
</template>