manifest/nuxt/components/Pojem.vue

<script setup="setup">

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

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

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

const { izbraniJezik } = storeToRefs(nastavitveStore)

const routeName = computed(() => route.name)

const props = defineProps({
  pojemid: String
})

if (props.pojemid && !(props.pojemid in store.pojmi)) {
  await store.naloziPojme(izbraniJezik.value)
}

watch(izbraniJezik, jezik => {
  console.log('PONOVNO NALAGAM POJME!', jezik)
  store.naloziPojme(jezik)
})

const pojem = computed(() => store.pojmi[props.pojemid])
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: izbraniJezik.value + '-' + revisionId.value,
    text: tekstPojma
  })
  urejanje.value = true
}

onMounted(() => {
  // Prazen pojem? Nazaj na manifest
  if ((!pojem.value || !pojem.value.id) && store.pojmi) {
    navigateTo(localePath('manifest') + '#skrol')
  }

  // Poskrolaj na pojem
  poskrolaj(container.value.parentNode)

  // Link na editiranje pojma? odpri editiranje
  if (routeName.value.startsWith('pojem_uredi')) {
    urediPojem()
  }
})

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

</script>

<template>
  <section ref="container">
    <div v-if="!urejanje" class="gumb" @click="urediPojem">{{ $t('Uredi')}}</div>
    <div v-if="pojem" class="pojem">
      <h2>
        {{ pojem.naslov }}
        <StrojniPrevod v-if="pojem.strojni_prevod" />
      </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="() => navigateTo(localePath({ name: 'pojem_poglej', params: { pojemid: revisionId }}))" />
    </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>