manifest/nuxt/components/PojemForm.vue

<script setup="setup">

const { etherFetch } = useEtherpadApi()

const store = usePojmiStore()

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("Manjka naslov pojma!")
    return
  }

  const starNaslov = props.pojem.naslov

  const resp = await etherFetch('/getText', { padID: props.revisionId })
  const stvarjenje = store.ustvariPojem({
    title: naslov.value,
    email: email.value,
    text: resp.data.text,
    uuid: props.revisionId
  })
  console.log(stvarjenje)
  alert("sprememba predlagana!")

  stvarjenje.then(() => {
    console.log('NOV NASLOV?', starNaslov, props.pojem.naslov)
    if (starNaslov !== props.pojem.naslov) {
      navigateTo(localePath({ name: 'pojem_poglej', params: { naslov: props.pojem.naslov }}))
    }
  })

  props.onZapri()
}

// @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 }}), {
      replace: true
    })
  } else {
    navigateTo(localePath({ name: 'pojem_uredi', params: {
      naslov: props.pojem.naslov,
      guid: props.revisionId
    }}), { replace: true })
  }
  //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>