manifest/nuxt/components/Pojem.vue

<script setup="setup">

import { stripHtml } from 'string-strip-html'

const { etherFetch } = useEtherpadApi()
const { poskrolaj } = useUi()

const store = usePojmiStore()
const route = useRoute()

const props = defineProps({
  naslov: String
})

if (props.naslov && !(props.naslov in store.pojmi)) {
  await store.naloziPojme()
}

const pojem = computed(() => store.pojmi[props.naslov])
const revisionId = computed(() => pojem.value ? pojem.value.id : null)

const urejanje = ref(false)
const container = ref(null)
const obrazec = ref(null)

const urediPojem = async () => {
  // Ustvari pad s tekstom pojma, ce se ne obstaja
  const tekstPojma = stripHtml(pojem.value.tekst).result
  const resp = await etherFetch('/createPad', {
    padID: revisionId.value,
    text: tekstPojma
  })
  urejanje.value = true
}

onMounted(() => {
  // Prazen pojem? Nazaj na manifest
  if (!pojem.value.id) {
    navigateTo('/manifest#skrol')
  }

  // Link na editiranje pojma? Poskrolaj nanj + odpri editiranje
  if (route.params.guid === revisionId.value) {
    urejanje.value = true
  } else {
    // Sicer samo poskrolaj na pojem
    poskrolaj(container.value.parentNode)
  }
})

onUpdated(() => {
  if (route.params.guid === revisionId.value) {
    poskrolaj(obrazec.value)
  }
})

</script>

<template>
  <section ref="container">
    <div v-if="!urejanje" class="gumb" @click="urediPojem">Uredi</div>
    <div v-if="pojem" class="pojem">
      <h2>{{ naslov }}</h2>
      <div class="tekst" v-html="pojem.tekst" />
    </div>
    <div class="obrazec" ref="obrazec">
      <PojemForm v-if="urejanje"
        ref="obrazec"
        :revisionId="revisionId"
        :pojem="pojem"
        :onZapri="() => { urejanje = false; store.naloziPojme() }" />
    </div>
  </section>
</template>

<style scoped>
  section {
    width: 100%;
  }

  .pojem {
    position: relative;
    width: 50%;
    float: left;
  }

  h2 {
    text-transform: uppercase;
    margin-top: 0;
  }

  form.pojem {
    width: 100%;
  }

  .obrazec {
    width: calc(50% - 32px);
    margin-left: 32px;
    float: right;
  }

  .gumb {
    position: sticky;
    top: 0;
    right: 0;
    float: right;
  }

  @media screen and (max-width: 768px) {
    .pojem {
      min-height: 4rem;
      width: 100%;
    }

    .obrazec {
      width: 100%;
      margin-left: 0;
    }

    form.pojem {
      min-height: 70vh;
      width: 100%;
      margin-left: 0;
    }
  }
</style>