Upravy UI, refaktoring, davkove upravy a mazani fotek

2023-08-28 22:02:24 +02:00
parent dcc3230cbe
commit dd248d4432
53 changed files with 636 additions and 357 deletions
@@ -0,0 +1,59 @@
+<script setup>
+import {aircraft} from "src/composables/objects/aircraft";
+import {confirmObject} from "src/composables/dialog";
+import {useQuasar} from "quasar";
+
+const props = defineProps({
+  aircraft: {
+    type: Object,
+    required: true
+  }
+});
+
+const emits = defineEmits(["delete"]);
+
+const $q = useQuasar();
+
+const confirmDelete = (aircraftId) => {
+  $q.dialog(confirmObject('Opravdu chceš smazat toto letadlo?'))
+    .onOk(() => {
+      emits("delete", aircraftId);
+    });
+};
+</script>
+
+<template>
+  <q-card class="q-mx-md q-my-md flight-detail-card">
+    <q-img :src="aircraft.photoUrl" v-if="aircraft.photoUrl"/>
+
+    <q-card-actions class="q-my-md">
+      <div class="col-grow">
+        <q-btn
+          flat
+          :to='{name: "aircraftEdit", params: {id: aircraft.id}}'
+          icon="edit"
+          text-color="primary"
+          label="Upravit"
+        />
+      </div>
+      <q-btn @click="confirmDelete(aircraft.id)" icon="delete" flat text-color="red" label="Smazat"/>
+    </q-card-actions>
+
+    <q-card-section>
+      <q-list>
+        <q-item v-if="aircraft.manufacturer">
+          Výrobce: {{ aircraft.manufacturer }}
+        </q-item>
+        <q-item v-if="aircraft.model">
+          Model: {{ aircraft.model }}
+        </q-item>
+        <q-item v-if="aircraft.seats">
+          Počet míst: {{ aircraft.seats }}
+        </q-item>
+      </q-list>
+    </q-card-section>
+    <q-card-section>
+      <article v-html="aircraft.description" class="q-my-md"/>
+    </q-card-section>
+  </q-card>
+</template>
@@ -1,5 +1,23 @@
-<script setup></script>
+<script setup>
+import BasicListSkeleton from "components/basicSkeletons/BasicListSkeleton.vue";
+import {randomInt} from "src/composables/random";
+import BasicTextSkeleton from "components/basicSkeletons/BasicTextSkeleton.vue";
+</script>

 <template>
-  <q-skeleton></q-skeleton>
+  <q-card class="flight-detail-card">
+    <q-skeleton type="rect" height="400px"/>
+
+    <q-card-section>
+      <q-skeleton type="text" v-for="i in 3" :key="i" :width="randomInt(30, 50)+'%'"/>
+    </q-card-section>
+
+    <q-card-section class="q-my-md">
+      <BasicTextSkeleton :paragraphs="1" :lines="randomInt(1, 3)"/>
+    </q-card-section>
+  </q-card>
+
+  <q-card class="flight-detail-card" flat>
+    <BasicListSkeleton :items-count-min="1" :items-count-max="4"/>
+  </q-card>
 </template>
@@ -1,5 +1,22 @@
-<script setup></script>
+<script setup>
+
+import {randomInt} from "src/composables/random";
+import BasicTextSkeleton from "components/basicSkeletons/BasicTextSkeleton.vue";
+import BasicListSkeleton from "components/basicSkeletons/BasicListSkeleton.vue";
+</script>

 <template>
-  <em>Aircraft edit skeleton</em>
+  <q-card class="flight-detail-card">
+    <q-skeleton type="rect" height="400px"/>
+
+    <q-card-section>
+      <q-skeleton type="QInput" v-for="i in 3" :key="i" class="q-my-lg" />
+      <q-skeleton type="QInput" height="200px" class="q-my-lg" />
+    </q-card-section>
+    <q-card-actions>
+<!--      TODO: posunout vpravo, zvetsit a na mobilu udelat fullwidth-->
+      <q-skeleton type="QBtn" />
+    </q-card-actions>
+
+  </q-card>
 </template>