From 79e6d5333b304bc8c65fc3186ae3516b06ee7141 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jurij=20Podgor=C5=A1ek?= <jurij@kompot.si>
Date: Thu, 15 Jun 2023 20:45:38 +0200
Subject: [PATCH] WIP obrazec za dodajanje pojma

---
 nuxt/components/DodajPojem.vue |  8 +++++++
 nuxt/components/PojemForm.vue  | 42 ++++++++++++++++++++++++++++++++++
 nuxt/composables/api.js        |  3 ++-
 nuxt/package-lock.json         | 19 +++++----------
 nuxt/package.json              |  9 ++++----
 nuxt/pages/pojmi.vue           |  1 +
 nuxt/public/css/stajl.css      | 18 +++++++++++++++
 nuxt/stores/pojmi.js           | 19 ++++++++++++---
 nuxt/stores/strani.js          |  4 ++--
 9 files changed, 99 insertions(+), 24 deletions(-)
 create mode 100644 nuxt/components/DodajPojem.vue
 create mode 100644 nuxt/components/PojemForm.vue

diff --git a/nuxt/components/DodajPojem.vue b/nuxt/components/DodajPojem.vue
new file mode 100644
index 0000000..20e3571
--- /dev/null
+++ b/nuxt/components/DodajPojem.vue
@@ -0,0 +1,8 @@
+<template>
+  <details>
+    <summary class="gumb">
+      Dodaj pojem
+    </summary>
+    <PojemForm />
+  </details>
+</template>
diff --git a/nuxt/components/PojemForm.vue b/nuxt/components/PojemForm.vue
new file mode 100644
index 0000000..e3b9d89
--- /dev/null
+++ b/nuxt/components/PojemForm.vue
@@ -0,0 +1,42 @@
+<script setup="setup">
+const store = usePojmiStore()
+
+const props = defineProps({
+  naslov: String
+})
+
+//const pojem = computed(() => store.pojmi[props.naslov])
+
+//await store.naloziPojme()
+
+// const UREJAM = !!pojem.value
+const UREJAM = false
+
+let naslov = ''
+let tekst = ''
+let email = ''
+
+const oddajPredlog = data => {
+  console.log('oddajam predlog!', naslov, tekst, email)
+  store.ustvariPojem(data)
+}
+
+</script>
+
+<template>
+  <section class="pojem">
+    <div v-if="UREJAM">UREJAM</div>
+    <form class="pojem" @submit.prevent="oddajPredlog">
+      <label for="naslov">Naslov</label>
+      <input name="naslov" type="text" v-model="naslov">
+
+      <label for="tekst">Besedilo</label>
+      <textarea name="tekst" v-model="tekst" />
+
+      <label for="email">E-poštni naslov</label>
+      <input name="email" type="email" v-model="email">
+
+      <input type="submit" value="Predlagaj">
+    </form>
+  </section>
+</template>
diff --git a/nuxt/composables/api.js b/nuxt/composables/api.js
index d56d9ae..0b618ca 100644
--- a/nuxt/composables/api.js
+++ b/nuxt/composables/api.js
@@ -18,7 +18,8 @@ export const useApi = () => {
   }
 
   return {
-    baseUrl: apiBaseUrl,
+    baseUrl: baseUrl,
+    jsonApiUrl: apiBaseUrl,
     headers,
     deserialize
   }
diff --git a/nuxt/package-lock.json b/nuxt/package-lock.json
index 5a278b0..bd0a3ba 100644
--- a/nuxt/package-lock.json
+++ b/nuxt/package-lock.json
@@ -6,6 +6,7 @@
     "": {
       "hasInstallScript": true,
       "dependencies": {
+        "axios": "^1.4.0",
         "druxt": "^0.21.0",
         "jsonapi-serializer": "^3.6.7",
         "lodash": "^4.17.21",
@@ -2899,8 +2900,7 @@
     "node_modules/asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
-      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
-      "peer": true
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
     },
     "node_modules/autoprefixer": {
       "version": "10.4.13",
@@ -2948,10 +2948,9 @@
       }
     },
     "node_modules/axios": {
-      "version": "1.3.4",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.3.4.tgz",
-      "integrity": "sha512-toYm+Bsyl6VC5wSkfkbbNB6ROv7KY93PEBBL6xyDczaIHasAiv4wPqQ/c4RjoQzipxRD2W5g21cOqQulZ7rHwQ==",
-      "peer": true,
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.4.0.tgz",
+      "integrity": "sha512-S4XCWMEmzvo64T9GfvQDOXgYRDJ/wsSZc7Jvdgx5u1sd0JwsuPLqb3SYmusag+edF6ziyMensPVqLTSc1PiSEA==",
       "dependencies": {
         "follow-redirects": "^1.15.0",
         "form-data": "^4.0.0",
@@ -3577,7 +3576,6 @@
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
       "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
-      "peer": true,
       "dependencies": {
         "delayed-stream": "~1.0.0"
       },
@@ -4005,7 +4003,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
       "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
-      "peer": true,
       "engines": {
         "node": ">=0.4.0"
       }
@@ -5875,7 +5872,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
       "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
-      "peer": true,
       "dependencies": {
         "asynckit": "^0.4.0",
         "combined-stream": "^1.0.8",
@@ -7699,7 +7695,6 @@
       "version": "1.52.0",
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
       "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
-      "peer": true,
       "engines": {
         "node": ">= 0.6"
       }
@@ -7708,7 +7703,6 @@
       "version": "2.1.35",
       "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
       "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
-      "peer": true,
       "dependencies": {
         "mime-db": "1.52.0"
       },
@@ -9308,8 +9302,7 @@
     "node_modules/proxy-from-env": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
-      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
-      "peer": true
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
     },
     "node_modules/prr": {
       "version": "1.0.1",
diff --git a/nuxt/package.json b/nuxt/package.json
index 58afbd5..1c2045d 100644
--- a/nuxt/package.json
+++ b/nuxt/package.json
@@ -8,16 +8,15 @@
     "postinstall": "nuxt prepare"
   },
   "devDependencies": {
-    "nuxt": "^3.2.2",
-    "@pinia/nuxt": "^0.4.7",
     "@nuxtjs/eslint-config": "^6.0.1",
-    "@nuxtjs/eslint-module": "^3.0.2"
+    "@nuxtjs/eslint-module": "^3.0.2",
+    "@pinia/nuxt": "^0.4.7",
+    "nuxt": "^3.2.2"
   },
   "dependencies": {
     "druxt": "^0.21.0",
     "jsonapi-serializer": "^3.6.7",
     "nuxt-proxy": "^0.4.1",
-    "pinia": "^2.0.32",
-    "lodash": "^4.17.21"
+    "pinia": "^2.0.32"
   }
 }
diff --git a/nuxt/pages/pojmi.vue b/nuxt/pages/pojmi.vue
index e6fb757..dc4178a 100644
--- a/nuxt/pages/pojmi.vue
+++ b/nuxt/pages/pojmi.vue
@@ -3,6 +3,7 @@ const store = usePojmiStore()
 </script>
 
 <template>
+  <DodajPojem />
   <Pojem naslov="Yugofuturist manifesto" />
   <Pojem naslov="Jadran potem" />
 </template>
diff --git a/nuxt/public/css/stajl.css b/nuxt/public/css/stajl.css
index e96dbcb..6ee78d8 100644
--- a/nuxt/public/css/stajl.css
+++ b/nuxt/public/css/stajl.css
@@ -25,3 +25,21 @@ h1 {
   font-size: 2.5rem;
   margin: .2rem 0 1rem 0;
 }
+
+form {
+  display: flex;
+  flex-direction: column;
+}
+
+input[type=submit] { margin-top: 1rem; }
+
+details > summary {
+  list-style: none;
+}
+
+.gumb {
+  display: inline-block;
+  padding: .2rem .5rem;
+  border: 2px solid black;
+  cursor: pointer;
+}
diff --git a/nuxt/stores/pojmi.js b/nuxt/stores/pojmi.js
index fd891b9..b89210c 100644
--- a/nuxt/stores/pojmi.js
+++ b/nuxt/stores/pojmi.js
@@ -3,16 +3,29 @@ export const usePojmiStore = defineStore('pojmi', {
     pojmi: {}
   }),
   actions: {
-    async naloziPojme () {
-      const { baseUrl, headers, deserialize } = useApi()
+    async naloziPojme() {
+      const { jsonApiUrl, headers, deserialize } = useApi()
 
-      const data = await $fetch(`${baseUrl}/node/concept`, { headers })
+      const data = await $fetch(`${jsonApiUrl}/node/concept`, { headers })
       this.pojmi = await deserialize(data, s => ({
         id: s.id,
         naslov: s.title,
         tekst: s.body.processed,
         media: s.field_media
       }), 'naslov')
+    },
+
+    async ustvariPojem(data) {
+      const { baseUrl, headers, deserialize } = useApi()
+
+      const req = await $fetch(`${baseUrl}/api/pojem/dodaj`, {
+        headers,
+        method: "POST",
+        body: JSON.stringify(data)
+      })
+
+      const resp = await req.json()
+      console.log('nov pojem?', resp)
     }
   }
 })
diff --git a/nuxt/stores/strani.js b/nuxt/stores/strani.js
index f6b45c9..bcaa10b 100644
--- a/nuxt/stores/strani.js
+++ b/nuxt/stores/strani.js
@@ -4,9 +4,9 @@ export const useStraniStore = defineStore('strani', {
   }),
   actions: {
     async naloziStrani () {
-      const { baseUrl, headers, deserialize } = useApi()
+      const { jsonApiUrl, headers, deserialize } = useApi()
 
-      const data = await $fetch(`${baseUrl}/node/page`, { headers })
+      const data = await $fetch(`${jsonApiUrl}/node/page`, { headers })
       this.strani = await deserialize(data, s => ({
         id: s.id,
         naslov: s.title,