manifest/nuxt/components/PojemForm.vue

<script setup="setup">

const { etherFetch } = useEtherpadApi()

const store = usePojmiStore()

const props = defineProps({
  revisionId: String,
  pojem: Object,
  urejanje: Object,
  onZapri: Function
})

let naslov = ref(props.pojem.naslov)
let email = ref('')

const oddajPredlog = async data => {
  // @TODO vsebina pada v tekst, testirat
  const resp = await etherFetch('/getText', { padID: props.revisionId })
  store.ustvariPojem({
    title: naslov.value,
    email: email.value,
    text: resp.data.text,
    uuid: props.revisionId
  })
  alert("sprememba predlagana!")
  props.onZapri()
}

const etherNalozen = ev => {
  navigateTo('/pojmi/' + props.revisionId)
  //window.location.hash = props.revisionId
}

</script>

<template>
    <form class="pojem" @submit.prevent="oddajPredlog">
      <input name="naslov" type="text" v-model="naslov">

      <EtherpadTextarea :onLoad="etherNalozen" :revisionId="props.revisionId" />

      <input name="email" type="email" placeholder="E-poštni naslov" v-model="email">
      <div class="gumbi">
        <button class="gumb" @click="props.onZapri">Zapri</button>
        <input class="gumb" type="submit" value="Predlagaj">
      </div>

    </form>
</template>

<style>
.etherpad-textarea {
    width: 100%;
    flex-grow: 1;
    border-radius: 16px;
    border: 2px solid var(--siva);
}

input {
  border: 2px solid var(--siva);
  border-radius: 8px;
  padding: 15px;
}

.gumbi {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.pojem.form .gumb {
  width: 50%;
}

.pojem input[type=submit] {
  color: var(--roza);
}

</style>