WIP obrazec za dodajanje pojma

nuxt/components/DodajPojem.vue

@@ -0,0 +1,8 @@
+<template>
+  <details>
+    <summary class="gumb">
+      Dodaj pojem
+    </summary>
+    <PojemForm />
+  </details>
+</template>

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>

nuxt/composables/api.js

@@ -18,7 +18,8 @@ export const useApi = () => {
   }
 
   return {
-    baseUrl: apiBaseUrl,
+    baseUrl: baseUrl,
+    jsonApiUrl: apiBaseUrl,
     headers,
     deserialize
   }

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==",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
-      "peer": true
     },
     "node_modules/autoprefixer": {
       "version": "10.4.13",
@@ -2948,10 +2948,9 @@
       }
     },
     "node_modules/axios": {
-      "version": "1.3.4",
+      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.3.4.tgz",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.4.0.tgz",
-      "integrity": "sha512-toYm+Bsyl6VC5wSkfkbbNB6ROv7KY93PEBBL6xyDczaIHasAiv4wPqQ/c4RjoQzipxRD2W5g21cOqQulZ7rHwQ==",
+      "integrity": "sha512-S4XCWMEmzvo64T9GfvQDOXgYRDJ/wsSZc7Jvdgx5u1sd0JwsuPLqb3SYmusag+edF6ziyMensPVqLTSc1PiSEA==",
-      "peer": true,
       "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==",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
-      "peer": true
     },
     "node_modules/prr": {
       "version": "1.0.1",

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",
+    "pinia": "^2.0.32"
-    "lodash": "^4.17.21"
   }
 }

nuxt/pages/pojmi.vue

@@ -3,6 +3,7 @@ const store = usePojmiStore()
 </script>
 
 <template>
+  <DodajPojem />
   <Pojem naslov="Yugofuturist manifesto" />
   <Pojem naslov="Jadran potem" />
 </template>

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;
+}

nuxt/stores/pojmi.js

@@ -3,16 +3,29 @@ export const usePojmiStore = defineStore('pojmi', {
     pojmi: {}
   }),
   actions: {
-    async naloziPojme () {
+    async naloziPojme() {
-      const { baseUrl, headers, deserialize } = useApi()
+      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)
     }
   }
 })

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,