Sync

src/components/NewItemForm.vue

@@ -1,12 +1,17 @@
 <script setup lang="ts">
 import { ref } from 'vue'
+import type { PowerItem } from '@/types/PowerItem'
+import { getCurrentInstance } from 'vue'
+import {User} from "oidc-client";
+import axios from 'axios';
 
 type EventItemListing = {
   name: string
   id: number
 }
 
-const firstName = ref('')
+const loading = ref(false)
+
 const itemType = ref(0)
 const itemName = ref('')
 const iconURL = ref('')
@@ -77,82 +82,130 @@ const maxPowerRules = [
   (v: number) =>
     v >= minPower.value ? true : 'Maximum power must be greater than or equal to minimum power.'
 ]
-const listToProps = (item: EventItemListing) => ({ title: item.name })
+const listToProps = (item: EventItemListing) => ({ title: item.name, value: item.id })
+const yesNoProps = (item: EventItemListing) => ({ title: item.name, value: item.id === 1 })
+const submit = () => {
+  loading.value = true
+  try {
+    // Get the user's JWT token
+    getCurrentInstance()!
+      .appContext.config.globalProperties.$zitadel!.oidcAuth.mgr.getUser()
+      .then((oidcUser: User | null) => {
+        if (oidcUser === null) {
+          // TODO: Add some error handling to the page
+          console.log("OIDC user was null")
+          return
+        }
+        const newItem: PowerItem = {
+          itemType: itemType.value,
+          iconURL: iconURL.value,
+          itemName: itemName.value,
+          minItemPower: minPower.value,
+          maxItemPower: maxPower.value,
+          owned: 0,
+          rarity: rarity.value,
+          origin: origin.value,
+          tooltip: tooltip.value,
+          isEventItem: isEventItem.value
+        }
+        const userJWT = oidcUser.access_token
+        axios.post()
+      })
+  } catch (e) {
+    console.log(e)
+    loading.value = false
+  }
+}
+const clearForm = () => {
+  itemType.value = 0
+  itemName.value = ''
+  iconURL.value = ''
+  minPower.value = 0
+  maxPower.value = 0
+  rarity.value = 0
+  origin.value = ''
+  tooltip.value = ''
+  isEventItem.value = false
+}
 </script>
 
 <template>
   <v-container>
     <v-row justify="center">
       <v-col lg="8" sm="12">
-        <v-card fluid>
+        <v-card :loading="loading" color="deep-purple-darken-4">
           <v-card-title>Add New Item</v-card-title>
           <v-card-item>
             <v-form @submit.prevent>
-              <v-sheet>
+              <v-container>
-                <v-container>
+                <v-row>
-                  <v-row>
+                  <v-select
-                    <v-select
+                    :items="eventItems"
-                      :items="eventItems"
+                    :item-props="listToProps"
-                      :item-props="listToProps"
+                    v-model="itemType"
-                      label="Item Type"
+                    label="Item Type"
-                    ></v-select>
+                  ></v-select>
-                  </v-row>
+                </v-row>
-                  <v-row>
+                <v-row>
+                  <v-text-field
+                    v-model="itemName"
+                    :rules="textRules"
+                    label="Item Name"
+                  ></v-text-field>
+                </v-row>
+                <v-row>
+                  <v-text-field
+                    v-model="iconURL"
+                    :rules="textRules"
+                    label="Image URL"
+                    disabled
+                  ></v-text-field>
+                </v-row>
+                <v-row>
+                  <v-col class="pl-0">
                     <v-text-field
-                      v-model="itemName"
+                      v-model="minPower"
-                      :rules="textRules"
+                      :rules="minPowerRules"
-                      label="Item Name"
+                      label="Minimum Power"
                     ></v-text-field>
-                  </v-row>
+                  </v-col>
-                  <v-row>
+                  <v-col class="pr-0">
                     <v-text-field
-                      v-model="iconURL"
+                      v-model="maxPower"
-                      :rules="textRules"
+                      :rules="maxPowerRules"
-                      label="Image URL"
+                      label="Maximum Power"
-                      disabled
                     ></v-text-field>
-                  </v-row>
+                  </v-col>
-                  <v-row>
+                </v-row>
-                    <v-col class="pl-0">
+                <v-row>
-                      <v-text-field
+                  <v-select
-                        v-model="minPower"
+                    v-model="rarity"
-                        :rules="minPowerRules"
+                    :items="rarities"
-                        label="Minimum Power"
+                    :item-props="listToProps"
-                      ></v-text-field>
+                    label="Rarity"
-                    </v-col>
+                  ></v-select>
-                    <v-col class="pr-0">
+                </v-row>
-                      <v-text-field
+                <v-row>
-                        v-model="maxPower"
+                  <v-text-field v-model="origin" :rules="textRules" label="Origin"></v-text-field>
-                        :rules="maxPowerRules"
+                </v-row>
-                        label="Maximum Power"
+                <v-row>
-                      ></v-text-field>
+                  <v-text-field v-model="tooltip" :rules="textRules" label="Tooltip"></v-text-field>
-                    </v-col>
+                </v-row>
-                  </v-row>
+                <v-row>
-                  <v-row>
+                  <v-select
-                    <v-select :items="rarities" :item-props="listToProps" label="Rarity"></v-select>
+                    v-model="isEventItem"
-                  </v-row>
+                    :items="yesNo"
-                  <v-row>
+                    :item-props="yesNoProps"
-                    <v-text-field v-model="origin" :rules="textRules" label="Origin"></v-text-field>
+                    label="Is From An Event?"
-                  </v-row>
+                  ></v-select>
-                  <v-row>
+                </v-row>
-                    <v-text-field
+              </v-container>
-                      v-model="tooltip"
-                      :rules="textRules"
-                      label="Tooltip"
-                    ></v-text-field>
-                  </v-row>
-                  <v-row>
-                    <v-select
-                      :items="yesNo"
-                      :item-props="listToProps"
-                      label="Is From An Event?"
-                    ></v-select>
-                  </v-row>
-                </v-container>
-              </v-sheet>
-              <v-btn type="submit" block>Submit</v-btn>
             </v-form>
           </v-card-item>
+          <v-card-actions>
+            <v-btn @click="submit">Submit</v-btn>
+            <v-btn @click="clearForm">Clear</v-btn>
+          </v-card-actions>
         </v-card>
       </v-col>
     </v-row>

src/stores/powerItems.ts

@@ -4,19 +4,19 @@ import { defineStore } from 'pinia'
 import { computed, ref, toRaw } from 'vue'
 import axiosRetry from 'axios-retry'
 import { getCurrentInstance } from 'vue'
-import { apiBaseURL as apiBaseURLKey } from '@/types/ConfigSymbols'
+import { apiBaseURL, apiBaseURL as apiBaseURLKey } from '@/types/ConfigSymbols'
 import { inject } from 'vue'
 
 const BLESSING = 1
 const INTIMACY = 2
 const FELLOW = 3
 
-const noCacheConfig:AxiosRequestConfig = {
+const noCacheConfig: AxiosRequestConfig = {
-  responseType: "json",
+  responseType: 'json',
   headers: {
     'Cache-Control': 'no-cache',
-    'Pragma': 'no-cache',
+    Pragma: 'no-cache',
-    'Expires': '0',
+    Expires: '0'
   }
 }
 
@@ -28,17 +28,14 @@ export const usePowerItems = defineStore('powerItems', () => {
   const fellowPowerItems = ref(new Map<string, PowerItem>())
   const intimacyPowerItems = ref(new Map<string, PowerItem>())
   const isLoadComplete = ref(false)
-  const auth = getCurrentInstance()?.appContext.config.globalProperties.$zitadel
+  const apiBaseURL = inject(apiBaseURLKey)!
-  auth?.oidcAuth.mgr.getUser().then(res => console.log(res?.id_token))
-  console.log(auth?.oidcAuth.accessToken)
 
   axiosRetry(axios, {
     retries: 3,
-    retryDelay: axiosRetry.exponentialDelay,
+    retryDelay: axiosRetry.exponentialDelay
-   })
+  })
 
   async function fetchPowerItems() {
-    const apiBaseURL = inject(apiBaseURLKey)
     axios
       .get(apiBaseURL + '/powerItems/byType/' + BLESSING + '/asMap', noCacheConfig)
       .then((resp) => {
@@ -131,6 +128,19 @@ export const usePowerItems = defineStore('powerItems', () => {
     }, {})
   }
 
+  function addPowerItem(newItem: PowerItem): Promise<PowerItem | null> {
+    const resultPromise: Promise<PowerItem | null> = new Promise((resolve, reject) => {
+      axios
+        .post(apiBaseURL + '/powerItems/', newItem, noCacheConfig)
+        .then((resp) => {
+          resolve(resp.data)
+        })
+        .catch((rejected) => reject(rejected))
+    })
+
+    return resultPromise
+  }
+
   const totalBlessingPower = computed(() =>
     [...blessingPowerItems.value.values()].reduce(
       (accumulator: number, currentValue: PowerItem) => {

src/types/PowerItem.ts

@@ -1,4 +1,5 @@
 export type PowerItem = {
+  itemType: number
   iconURL: string
   itemName: string
   minItemPower: number
@@ -7,5 +8,5 @@ export type PowerItem = {
   rarity: number
   origin: string
   tooltip: string
-  isEventItem: string
+  isEventItem: boolean
 }