Aircraft CRUD

package.json

@@ -14,6 +14,7 @@
     "@quasar/extras": "^1.15.11",
     "@vue/apollo-composable": "4.0.0-beta.2",
     "@vue/apollo-option": "^4.0.0-beta.5",
+    "apollo-upload-client": "^17.0.0",
     "axios": "^1.4.0",
     "graphql": "16.6.0",
     "graphql-tag": "2.12.6",

src/components/FormWrapper.vue

@@ -27,8 +27,7 @@ const props = defineProps({
 
 const emits = defineEmits(["save"]);
 const saveForm = () => {
-  const formDataCopy = JSON.parse(JSON.stringify(props.modelValue));
+  emits("save", props.modelValue);
-  emits("save", formDataCopy);
 
   if (props.resetAfterSubmit) {
     console.error("Not implemented")
@@ -38,9 +37,6 @@ const saveForm = () => {
 
 <template>
   <q-form @submit.prevent="saveForm" ref="form">
-
-    {{ modelValue }}
-
     <slot/>
 
     <q-btn type="submit" color="primary" :icon="props.saveButton.icon" :loading="props.isRequestPending">

src/components/aircrafts/AircraftDetailSkeleton.vue

@@ -0,0 +1,5 @@
+<script setup></script>
+
+<template>
+  <q-skeleton></q-skeleton>
+</template>

src/components/aircrafts/AircraftForm.vue

@@ -12,6 +12,7 @@ const formData = reactive({
   model: "",
   manufacturer: "",
   description: "",
+  photo: null,
   organizationId: null
 });
 
@@ -38,6 +39,7 @@ onMounted(() => {
     <q-input type="text" v-model="formData.model" label="Model"/>
     <q-input type="text" v-model="formData.manufacturer" label="Výrobce"/>
     <q-input type="textarea" v-model="formData.description" label="Popis" />
+    <q-file v-model="formData.photo" label="Avatar" />
 
   </FormWrapper>
 </template>

src/components/aircrafts/AircraftsList.vue

@@ -9,9 +9,14 @@ const props = defineProps({
 </script>
 
 <template>
-  <h4>letadla</h4>
   <q-list bordered separator>
     <q-item clickable v-ripple v-for="plane of props.items" :key="plane">
+        <q-item-section avatar>
+          <q-avatar v-if="plane.photoUrl">
+            <img :src="plane.photoUrl">
+          </q-avatar>
+          <q-avatar icon="airplane" v-else></q-avatar>
+        </q-item-section>
       <q-item-section>
         <router-link :to="{name: 'aircraftDetail', params: {id: plane.id }}">
           {{ plane.name }}

src/components/aircrafts/AircraftsListSkeleton.vue

@@ -0,0 +1,16 @@
+<script setup>
+import {randomInt} from "src/composables/random";
+</script>
+
+<template>
+  <q-list bordered separator>
+    <q-item v-ripple v-for="i in randomInt(2, 5)" :key="i">
+      <q-item-section avatar>
+        <q-skeleton type="QAvatar"></q-skeleton>
+      </q-item-section>
+      <q-item-section>
+        <q-skeleton :width="randomInt(10,25)+'%'"></q-skeleton>
+      </q-item-section>
+    </q-item>
+  </q-list>
+</template>

src/composables/random.js

@@ -0,0 +1,3 @@
+export const randomInt = (min, max) => {
+      return Math.floor(Math.random() * (max - min + 1)) + min;
+}

src/graphql/apollo.js

@@ -1,13 +1,19 @@
 import {ApolloClient, ApolloLink, HttpLink, InMemoryCache} from '@apollo/client/core'
 import {createApolloProvider} from "@vue/apollo-option";
+import { createUploadLink } from 'apollo-upload-client';
 
 const httpLink = new HttpLink({
   uri: 'http://localhost:8000/graphql',
   credentials: 'include'
 })
 
+const uploadLink = createUploadLink({
+  uri: 'http://localhost:8000/graphql',
+  credentials: 'include'
+})
+
 export const apolloClient = new ApolloClient({
-  link: ApolloLink.from([httpLink]),
+  link: ApolloLink.from([uploadLink]),
   cache: new InMemoryCache(),
   connectToDevTools: true,
 })
@@ -24,6 +30,7 @@ export const apolloWrapper = {
         console.error("Error during query: ", err)
       })
   },
+
   mutate(mutation, variables, onUpdate = () => {}) {
     return apolloClient
       .mutate({

src/graphql/fragments/aircraft.js

@@ -7,5 +7,6 @@ fragment aircraftFullInfo on Aircraft {
   model
   description
   manufacturer
+  photoUrl
 }
 `;

src/graphql/mutations/aircrafts.js

@@ -27,13 +27,3 @@ mutation deleteAircraft($id: Int!) {
   }
 }
 `;
-
-// export const CREATE_CAMPAIGN = gql`
-//   mutation createCampaign($input: CreateCampaignMutationInput!) {
-//     createCampaign(input: $input) {
-//       campaign {
-//         id
-//       }
-//     }
-//   }
-// `;

src/pages/profile/details/AircraftDetailPage.vue

@@ -2,8 +2,8 @@
 import {computed, onMounted, reactive, ref} from "vue";
 import {useAircraftsStore} from "stores/Aircrafts";
 import {useRoute, useRouter} from "vue-router";
-import {storeToRefs} from "pinia";
 import {useQuasar} from "quasar";
+import AircraftDetailSkeleton from "components/aircrafts/AircraftDetailSkeleton.vue";
 
 const aircraftStore = useAircraftsStore();
 const route = useRoute();
@@ -38,7 +38,7 @@ const confirmDelete = (id) => {
 </script>
 
 <template>
-  <q-skeleton v-if="loading && aircraft"/>
+  <AircraftDetailSkeleton v-if="loading && aircraft"/>
   <template v-else>
     <q-breadcrumbs>
       <q-breadcrumbs-el :to="{name: 'aircrafts'}">Letadla</q-breadcrumbs-el>
@@ -47,6 +47,8 @@ const confirmDelete = (id) => {
 
     <h1>{{ aircraft.name }}</h1>
 
+    {{ aircraft.photoUrl }}
+
     <q-list>
       <q-item>
         Výrobce: {{ aircraft.manufacturer }}

src/pages/profile/forms/EditAircraftPage.vue

@@ -26,21 +26,19 @@ const handleSave = (formData) => {
 let loadedAircraft = ref(null);
 onMounted(() => {
   useAircraftsStore().fetchDetail(aircraftId).then((data) => {
-    console.log("data ", data);
     loadedAircraft.value = data;
 
-  } ).catch(err => {
+  }).catch(err => {
     console.error(err);
   })
 });
 </script>
 
 <template>
-  <q-skeleton v-if="!loadedAircraft" />
+  <q-skeleton v-if="!loadedAircraft"/>
-  <template v-if="loadedAircraft">
-  <h1>Editace letadla {{ loadedAircraft.name}}</h1>
 
-  loaded aircraft: {{ loadedAircraft }}
+  <template v-if="loadedAircraft">
+    <h1>Editace letadla {{ loadedAircraft.name }}</h1>
 
     <AircraftForm @save="handleSave" :default-values="loadedAircraft" :is-request-pending="isRequestPending"/>
   </template>

src/pages/profile/forms/NewAircraftsPage.vue

@@ -10,6 +10,9 @@ const $q = useQuasar();
 const router = useRouter();
 const handleSave = (formData) => {
   isRequestPending.value = true;
+
+  console.log("handlesave", formData);
+
   useAircraftsStore().create(formData).then(() => {
     $q.notify({message: "Letadlo úspěšně vytvořeno", position: "top", color: "positive"});
 
@@ -21,7 +24,5 @@ const handleSave = (formData) => {
 </script>
 
 <template>
-<!--  <h1>Nové letadlo</h1>-->
-
   <AircraftForm @save="handleSave" :is-request-pending="isRequestPending"/>
 </template>

src/pages/profile/lists/AircraftsPage.vue

@@ -1,40 +1,28 @@
 <script setup>
 import {useAircraftsStore} from "stores/Aircrafts";
-import {computed, onMounted, ref} from "vue";
+import {onMounted, ref} from "vue";
 import {storeToRefs} from "pinia";
 import AircraftsList from "components/aircrafts/AircraftsList.vue";
 import AddFAB from "components/AddFAB.vue";
+import AircraftsListSkeleton from "components/aircrafts/AircraftsListSkeleton.vue";
 
 const aircraftStore = useAircraftsStore();
 const aircrafts = storeToRefs(aircraftStore).items;
-const aircraftsComputed = computed(() => aircraftStore.items);
-
-const refetch = () => {
-  loading.value = true
-  aircraftStore.fetch().then(data => console.log("data", data)).finally(() => {
-    console.log("after fetch");
-    loading.value = false
-  });
-}
 
 let loading = ref(false);
 onMounted(() => {
-  refetch();
+  loading.value = true
+  aircraftStore.fetch().finally(() => {
+    loading.value = false
+  });
 })
 </script>
 
 <template>
-  <q-skeleton v-if="loading">Loading (sem pridat skeleton)</q-skeleton>
+  <h4>Letadla</h4>
 
+  <AircraftsListSkeleton v-if="loading" />
   <AircraftsList :items="aircrafts" v-if="!loading"/>
 
-  <q-btn @click="refetch()">Fetch</q-btn>
-
-  {{ aircrafts }}
-  <br>
-  {{ aircraftsComputed }}
-  <br>
-  {{ aircraftStore.items }}
-
   <AddFAB :router-link="{name: 'addAircraft'}"/>
 </template>

src/stores/Aircrafts.js

@@ -24,28 +24,24 @@ export const useAircraftsStore = defineStore('Aircrafts', {
     create(formData) {
       delete formData['id'];
       return apolloWrapper.mutate(CREATE_AIRCRAFT, {input: formData}).then(({data}) => {
-        // this.items.push(data.createAircraft);
+        this.items.push(data.createAircraft);
 
         return data.createAircraft;
       })
     },
     delete(id) {
       return apolloWrapper.mutate(DELETE_AIRCRAFT, {id}).then(({data}) => {
-        // const idx = this.items.findIndex(a => a.id === id);
+        const idx = this.items.findIndex(a => a.id === id);
-        // console.log(idx);
+        console.log(idx);
-        // this.items.splice(idx, 1);
+        this.items.splice(idx, 1);
 
-        this.items = this.items.filter(a => {
-          console.log(a.id, id);
-          return a.id !== id
-        });
-        console.log(this.items);
         return data;
       });
     },
     update(id, formData) {
       console.log(id, formData);
       return apolloWrapper.mutate(EDIT_AIRCRAFT, {id: id, input: formData}).then(({data}) => {
+        console.log("Pridat update ve storu")
         return data.editAircraft;
       });
     },

yarn.lock

@@ -480,6 +480,13 @@ anymatch@~3.1.2:
     normalize-path "^3.0.0"
     picomatch "^2.0.4"
 
+apollo-upload-client@^17.0.0:
+  version "17.0.0"
+  resolved "https://registry.yarnpkg.com/apollo-upload-client/-/apollo-upload-client-17.0.0.tgz#d9baaff8d14e54510de9f2855b487e75ca63b392"
+  integrity sha512-pue33bWVbdlXAGFPkgz53TTmxVMrKeQr0mdRcftNY+PoHIdbGZD0hoaXHvO6OePJAkFz7OiCFUf98p1G/9+Ykw==
+  dependencies:
+    extract-files "^11.0.0"
+
 archiver-utils@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/archiver-utils/-/archiver-utils-2.1.0.tgz#e8a460e94b693c3e3da182a098ca6285ba9249e2"
@@ -1426,6 +1433,11 @@ external-editor@^3.0.3:
     iconv-lite "^0.4.24"
     tmp "^0.0.33"
 
+extract-files@^11.0.0:
+  version "11.0.0"
+  resolved "https://registry.yarnpkg.com/extract-files/-/extract-files-11.0.0.tgz#b72d428712f787eef1f5193aff8ab5351ca8469a"
+  integrity sha512-FuoE1qtbJ4bBVvv94CC7s0oTnKUGvQs+Rjf1L2SJFfS+HTVVjhPFtehPdQ0JiGPqVNfSSZvL5yzHHQq2Z4WNhQ==
+
 fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"