// vue-ohjelmointia, luento 7.4

<script setup>
// Tuodaan vue:sta ref, eli funktio reaktiivisen datan luomiseksi
import { ref } from 'vue';

// reaktiivinen lista julkaisudataa
// jos tämä muuttuu, päivitetään sisältö automaattisesti ulkoasuun
const publications = ref([])

// Tehdään asynkroninen funktio jotta voidaan
// käsitellä ei-tosiaikaista dataa
const getAllPublications = async () => {
    // Haetaan selaimen fetch työkalua käyttämällä data kurssiprojektin REST rajapinnasta.
    // Asetetaan vastaus response nimiseen muuttujaan, kun await on saanut vastauksen palvelimelta
    const response = await fetch('TÄHÄN SE RAJAPINNAN HTTPS-OSOITE/api/publications')

    // muutetaan data JSON -muotoon
    const data = await response.json()

    // pistetään data talteen reaktiiviseen publications-muuttujaan (päivittää automaattisesti ulkoasun)
    publications.value = data.publications
}

// kutsutaan funktiota joka hakee rajapinnasta dataa
getAllPublications()

</script>

<template>
    <h1>PublicationViewAll OK!</h1>
    <div class="container">
        <div class="item" v-for="publication, key in publications" :key="key">
            <img :src="publication.url" />
        </div>
    </div>
</template>

<style scoped>
img {
    width: 400px;
}

.item {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: gray;
    padding-top: 40px;
    padding-bottom: 40px;
    margin-bottom: 20px;
}

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

body {
    margin: 30px;
}
</style>

// ternary eli ternääri-operaattoria voidaan käyttää yksinkertaisten if/else-rakenteiden sijasta

			{{ publication.title }}
            <img :src="publication.url" />
            {{ publication.owner ? publication.owner.username : 'Anonyymi' }}

Tässä tapauksessa, "jos publication.owner EI OLE NULL, tulostetaan owner.username, jos on null, tulostetaan "Anonyymi"


// voidaan käyttää ref:n sijasta, hyväksyy ainoastaan JS-objektin parametriksi
// ref hyväksyy kaikki muut tietotyypit
const state = reactive({
    error: false
})

// Tehdään asynkroninen funktio jotta voidaan
// käsitellä ei-tosiaikaista dataa
const getAllPublications = async () => {

    try {
        // Haetaan selaimen fetch työkalua käyttämällä data kurssiprojektin REST rajapinnasta.
        // Asetetaan vastaus response nimiseen muuttujaan, kun await on saanut vastauksen palvelimelta
        const response = await fetch('API OSOITE TÄHÄN/api/publications')

        // muutetaan data JSON -muotoon
        const data = await response.json()

        // jos tulee jotain muutakuin 200 OK
        if (response.status > 300) {

            if (response.status == 404) {
                throw new Error("Dataa ei löytynyt.")
            }

            throw new Error(data.msg)
        }

        // pistetään data talteen reaktiiviseen publications-muuttujaan (päivittää automaattisesti ulkoasun)
        publications.value = data.publications
    } catch (e) {
        //console.log(e)
        state.error = true
    }

}

// tehdään ensin uusi component, eli PublicationView.vue. tämän tarkoitus on esittää yhtä yksittäistä kuvaa listassa
<script setup>
// jotta tämä komponentti voi ottaa vastaan dataa
// tarvitaan definePropsia
defineProps({
    publication: Object
})

</script>

<template>
    {{ publication.title }}
    <img :src="publication.url" />
    {{ publication.owner ? publication.owner.username : 'Anonyymi' }}
</template>

<style scoped>
img {
    width: 400px;
}
</style>

// siirretään kaikki yksittäisen kuvan koodi uuteen komponenttiin
// musita lisätä ylös import:
import PublicationView from './PublicationView.vue';

// tämän jälkeen, PublicationViewAll näyttää tältä:

<template>
    <h1>PublicationViewAll OK!</h1>
    <div v-if="state.error">Valitettavasti datan lataaminen ei onnistunut.</div>
    <div v-else class="container">
        <div class="item" v-for="publication, key in publications" :key="key">
			<!-- ladataan uusi komponentti, ja annetaan sille publication-objekti käytettäväksi -->
 			{{ key + 1 }}
            <PublicationView :publication="publication"></PublicationView>
        </div>
    </div>
</template>

// voi olla hyvä idea laittaa PublicationViewin sisältö omaan diviinsä, niin voidaan muokata myös tekstien tyylejä

<script setup>

defineProps({
    publication: Object
})

</script>

<template>
    <div class="item">
        {{ publication.title }}
        <img :src="publication.url" />
        {{ publication.owner ? publication.owner.username : 'Anonyymi' }}
    </div>
</template>

<style scoped>
.item {
    font-family: "Arial";
    font-size: 14pt;
}

img {
    width: 400px;
}
</style>

// vue-router pitää ensin asentaa:
//  npm install vue-router@4

// main.js

import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import App from './App.vue'
import PublicationViewAll from './components/publication/PublicationViewAll.vue'

const router = createRouter({
    history: createWebHistory(),
    routes: [
        {
            path: "/",
            name: "Julkaisut",
            component: PublicationViewAll
        }
    ]
})

createApp(App).use(router).mount('#app')

// App.vue

<script setup>

import { RouterView } from 'vue-router'

</script>

<template>
  <router-view></router-view>
</template>

<style>
</style>

// tehdään uusi component jotta voimme testata toista route
// uusi kansio components-kansioon => user, ja sinne uus tiedosto UsersView.vue

<script setup>
</script>

<template>
    <h1>Users</h1>
</template>

<style>
</style>

// router ja main.js kannattaa eriyttää omiin tiedostoihin

// tee uusi tiedosto, router.js src-kansioon

// router.js, huomaa export const router

import { createRouter, createWebHistory } from 'vue-router'
import PublicationViewAll from './components/publication/PublicationViewAll.vue'
import UsersView from './components/user/UsersView.vue'

export const router = createRouter({
    history: createWebHistory(),
    routes: [
        {
            path: "/",
            name: "Julkaisut",
            component: PublicationViewAll
        },
        {
            path: "/users",
            name: "Käyttäjät",
            component: UsersView
        }
    ]
})

// main.js

import { createApp } from 'vue'
import App from './App.vue'
import { router } from './router'

createApp(App).use(router).mount('#app')