# 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>