Fix update problem with assignments

This commit is contained in:
Lorenz Padberg 2024-05-15 23:30:30 +02:00
parent f0c104a788
commit 8049428fb1
1 changed files with 23 additions and 3 deletions

View File

@ -3,7 +3,7 @@
<textarea <textarea
:placeholder="placeholder" :placeholder="placeholder"
:readonly="readonly" :readonly="readonly"
:value="inputText" v-model="editText"
:class="{ 'submission-form__textarea--readonly': readonly }" :class="{ 'submission-form__textarea--readonly': readonly }"
data-cy="submission-textarea" data-cy="submission-textarea"
rows="1" rows="1"
@ -23,11 +23,14 @@
> >
<loading-icon class="submission-form__save-status-icon submission-form__saving-icon" /> <loading-icon class="submission-form__save-status-icon submission-form__saving-icon" />
</div> </div>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { defineAsyncComponent } from 'vue'; import {defineAsyncComponent, ref, watch} from 'vue';
import EmojiBar from "@/components/ui/EmojiBar.vue";
const TickCircleIcon = defineAsyncComponent(() => import('@/components/icons/TickCircleIcon.vue')); const TickCircleIcon = defineAsyncComponent(() => import('@/components/icons/TickCircleIcon.vue'));
const LoadingIcon = defineAsyncComponent(() => import('@/components/icons/LoadingIcon.vue')); const LoadingIcon = defineAsyncComponent(() => import('@/components/icons/LoadingIcon.vue'));
@ -38,12 +41,29 @@ interface Props {
placeholder: string; placeholder: string;
} }
withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {
placeholder: 'Ergebnis erfassen', placeholder: 'Ergebnis erfassen',
}); });
const editText = ref(props.inputText)
const emit = defineEmits(['input']); const emit = defineEmits(['input']);
const containsEmoji = (text: String) =>{
const emojis= ['🖐️', '👍', '👎', '👏', '👋', '🎉', '😍', '😮', '🤔']
const graphemes = Array.from(text);
const lastGrapheme = graphemes[graphemes.length - 1];
return emojis.includes(lastGrapheme);
}
watch(() => props.inputText, (newValue) => {
// TODO: Lorenz this is an ugly fix!
if (containsEmoji(newValue)){
editText.value = newValue;
}
});
const input = (e: Event) => { const input = (e: Event) => {
const value = (e.target as HTMLInputElement).value; const value = (e.target as HTMLInputElement).value;
emit('input', value); emit('input', value);