Popravki stilov in obnasanja

nuxt/components/Pojem.vue

@@ -19,6 +19,7 @@ const revisionId = computed(() => pojem.value.id)
 
 const urejanje = ref(false)
 const container = ref(null)
+const obrazec = ref(null)
 
 const urediPojem = async () => {
   // Ustvari pad s tekstom pojma, ce se ne obstaja
@@ -37,7 +38,7 @@ onMounted(() => {
     setTimeout(() => obrazec.value.scrollIntoView({ behavior: 'smooth' }), 50)
   } else {
     // Sicer samo poskrolaj na pojem
-    setTimeout(() => container.value.scrollIntoView({ behavior: 'smooth' }), 50)
+    setTimeout(() => container.value.parentNode.scrollIntoView({ behavior: 'smooth' }), 50)
   }
 })
 
@@ -47,7 +48,7 @@ onMounted(() => {
   <section ref="container">
     <div v-if="!urejanje" class="gumb" @click="urediPojem">Uredi</div>
     <div v-if="pojem" class="pojem">
-      <h2>{{ pojem }}</h2>
+      <h2>{{ naslov }}</h2>
       <div class="tekst" v-html="pojem.tekst" />
     </div>
     <PojemForm v-if="urejanje"
@@ -55,12 +56,14 @@ onMounted(() => {
      :revisionId="revisionId"
      :pojem="pojem"
      :urejanje="urejanje"
-     :onZapri="() => { urejanje = false; store.naloziPojme()}"
-     />
+     :onZapri="() => { urejanje = false; store.naloziPojme() }" />
   </section>
 </template>
 
 <style scoped>
+  section {
+    width: 100%;
+  }
 
   .pojem {
     position: relative;

nuxt/components/PojemForm.vue

@@ -16,13 +16,19 @@ let email = ref('')
 
 const oddajPredlog = async data => {
   // @TODO vsebina pada v tekst, testirat
+  if (!naslov.value) {
+    alert("Manjka naslov pojma!")
+    return
+  }
+
   const resp = await etherFetch('/getText', { padID: props.revisionId })
-  store.ustvariPojem({
+  const stvarjenje = store.ustvariPojem({
     title: naslov.value,
     email: email.value,
     text: resp.data.text,
     uuid: props.revisionId
   })
+  console.log(stvarjenje)
   alert("sprememba predlagana!")
   props.onZapri()
 }
@@ -30,9 +36,13 @@ const oddajPredlog = async data => {
 // @TODO tole raje v pojmi.vue oz nov_pojem.vue - page!
 const etherNalozen = ev => {
   if (props.pojem.nov) {
-    navigateTo('/manifest/dodaj/' + props.revisionId)
+    navigateTo('/manifest/dodaj/' + props.revisionId, {
+      replace: true
+    })
   } else {
-    navigateTo('/manifest/' + props.revisionId)
+    navigateTo('/manifest/' + props.pojem.naslov + '/uredi/' + props.revisionId, {
+      replace: true
+    })
   }
   //window.location.hash = props.revisionId
 }
@@ -40,15 +50,19 @@ const etherNalozen = ev => {
 </script>
 
 <template>
-  <form class="pojem" @submit.prevent="oddajPredlog">
-    <input name="naslov" type="text" v-model="naslov">
+  <form class="pojem" @submit.prevent>
+    <input name="naslov" type="text" placeholder="Naslov" 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">
+      <button class="gumb" @click="props.onZapri">
+        {{ props.zapriLabel ?? 'Zapri' }}
+      </button>
+      <button class="gumb oddaj" @click="oddajPredlog">
+        Predlagaj
+      </button>
     </div>
 
   </form>
@@ -87,7 +101,7 @@ input {
   width: 50%;
 }
 
-.pojem input[type=submit] {
+.pojem button.oddaj {
   color: var(--roza);
 }
 

nuxt/pages/manifest/dodaj.vue

@@ -6,6 +6,7 @@ const { etherpadApiUrl } = useEtherpadApi()
 const route = useRoute()
 
 const revisionId = ref(null)
+const obrazec = ref(null)
 
 revisionId.value = route.params.guid ? route.params.guid : getRandomUUID()
 
@@ -14,16 +15,30 @@ revisionId.value = route.params.guid ? route.params.guid : getRandomUUID()
 const padId = revisionId.value
 const resp = await $fetch(`${etherpadApiUrl}/createPad?padID=${padId}`)
 
+const onZapri = () => { console.log('zapiram'); navigateTo('/manifest') }
+
+onMounted(() => {
+  setTimeout(() => {
+    console.log('element?', obrazec.value)
+    debugger
+    obrazec.value.scrollIntoView({ behavior: 'smooth' })
+  }, 50)
+})
+
 </script>
 
 <template>
-  <section class="pojem">
-    <PojemForm :pojem="{ nov: true }" :revisionId="revisionId" />
+  <section class="okvir" ref="obrazec">
+    <PojemForm
+      :pojem="{ nov: true }"
+      :revisionId="revisionId"
+      zapriLabel="Nazaj"
+      :onZapri="onZapri" />
   </section>
 </template>
 
 <style scoped>
-section.pojem {
+section.okvir {
   max-width: 608px;
 }
 form.pojem {

nuxt/pages/manifest/index.vue

@@ -7,7 +7,7 @@ await store.naloziPojme()
 
 <template>
   <h3 class="navodila">Vsak lahko prispeva k vsebinam manifesta. Predlaga lahko nov pojem ali ureja, dopolni ali predela obstoječe.</h3>
-  <NuxtLink class="gumb" to="/nov_pojem">
+  <NuxtLink class="gumb" to="/manifest/dodaj">
     Dodaj Nov Pojem
   </NuxtLink>
   <NuxtLink

nuxt/pages/manifest/pojem.vue

@@ -19,4 +19,12 @@ const resp = await $fetch(`${etherpadApiUrl}/createPad?padID=${padId}`)
   <div class="okvir">
     <Pojem :naslov="naslov" />
   </div>
+
+  <NuxtLink class="gumb" to="/manifest">
+    Manifest
+  </NuxtLink>
+
+  <br>
+  <br>
+
 </template>