manifest/nuxt/components/PojemForm.vue

121 lines
2.5 KiB
Vue

<script setup="setup">
const { etherFetch } = useEtherpadApi()
const localePath = useLocalePath()
const { t } = useI18n()
const store = usePojmiStore()
const nastavitveStore = useNastavitveStore()
const izbraniJezik = computed(() => nastavitveStore.izbraniJezik)
const props = defineProps({
revisionId: String,
pojem: Object,
onZapri: Function
})
let naslov = ref(props.pojem.naslov)
let email = ref('')
const oddajPredlog = async data => {
// @TODO vsebina pada v tekst, testirat
if (!naslov.value) {
alert(t("Manjka naslov pojma!"))
return
}
try {
const resp = await etherFetch('/getText', { padID: `${izbraniJezik.value}-${props.revisionId}` })
const stvarjenje = await store.ustvariPojem({
title: naslov.value,
email: email.value,
text: resp.data.text,
uuid: props.revisionId,
language: izbraniJezik.value
})
alert(t("Sprememba predlagana!"))
props.onZapri()
} catch (error) {
alert(t('Napaka pri pošiljanju.'))
console.error(error)
}
}
// @TODO tole raje v pojmi.vue oz nov_pojem.vue - page!
const etherNalozen = ev => {
if (props.pojem.nov) {
navigateTo(localePath({ name: 'pojem_dodaj', params: { guid: revisionId }}))
} else {
navigateTo(localePath({ name: 'pojem_uredi', params: {
pojemid: props.revisionId
}}))
}
//window.location.hash = props.revisionId
}
</script>
<template>
<form class="pojem" @submit.prevent>
<input name="naslov" type="text" placeholder="Naslov" v-model="naslov" @keydown.enter.prevent>
<EtherpadTextarea :onLoad="etherNalozen" :revisionId="props.revisionId" />
<input name="email" type="email" placeholder="E-poštni naslov" v-model="email" @keydown.enter="oddajPredlog">
<div class="gumbi">
<button class="gumb" @click="props.onZapri">
{{ props.zapriLabel ?? $t('Zapri') }}
</button>
<button class="gumb oddaj" @click="oddajPredlog">
{{ $t("Predlagaj") }}
</button>
</div>
</form>
</template>
<style>
form {
gap: 1rem;
}
.etherpad-textarea {
width: 100%;
flex-grow: 1;
border-radius: 16px;
border: 2px solid var(--siva);
box-sizing: border-box;
min-height: 500px;
}
input {
border: 2px solid var(--siva);
border-radius: 8px;
padding: 15px;
}
.gumbi {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.gumb,
.gumbi input,
.gumbi button {
text-transform: uppercase;
padding: 0;
margin: 0;
}
.pojem.form .gumb {
width: 50%;
}
.pojem button.oddaj {
color: var(--roza);
}
</style>