INIT commit

src/components/AddFAB.vue

@@ -0,0 +1,19 @@
+<script setup>
+const props = defineProps({
+  label: {
+    type: String,
+    required: false,
+    default: "Přidat"
+  },
+  routerLink: {
+    type: Object,
+    required: true
+  }
+})
+</script>
+
+<template>
+  <q-page-sticky location="bottom" :offset="[30, 30]">
+        <q-fab icon="add" color="primary" :label="props.label" @click="$router.push(props.routerLink)"/>
+  </q-page-sticky>
+</template>

src/components/FormWrapper.vue

@@ -0,0 +1,53 @@
+<script setup>
+
+import {isRequestPending} from "src/composables/form/props";
+
+const props = defineProps({
+  modelValue: {
+    type: Object,
+    required: true
+  },
+
+  resetAfterSubmit: {
+    type: Boolean,
+    required: false,
+    default: false
+  },
+  isRequestPending,
+  saveButton: {
+    type: Object,
+    required: false,
+    default: () => ({
+      label: "Save",
+      icon: "save",
+      align: "left"
+    })
+  }
+});
+
+const emits = defineEmits(["save"]);
+const saveForm = () => {
+  const formDataCopy = JSON.parse(JSON.stringify(props.modelValue));
+  emits("save", formDataCopy);
+
+  if (props.resetAfterSubmit) {
+    console.error("Not implemented")
+  }
+}
+</script>
+
+<template>
+  <q-form @submit.prevent="saveForm" ref="form">
+
+    {{ modelValue }}
+
+    <slot/>
+
+    <q-btn type="submit" color="primary" :icon="props.saveButton.icon" :loading="props.isRequestPending">
+      {{ props.saveButton.label }}
+      <template v-slot:loading>
+        Loading...
+      </template>
+    </q-btn>
+  </q-form>
+</template>

src/components/TabsStepper.vue

@@ -0,0 +1,28 @@
+<script setup>
+const props = defineProps({
+  modelValue: String,
+  previousStep: {
+    type: String,
+    required: false,
+    default: null,
+  },
+  nextStep: {
+    type: String,
+    required: false,
+    default: null,
+  },
+})
+
+const emit = defineEmits(["update:modelValue"])
+const setStep = (val) => {
+  emit("update:modelValue", val);
+}
+
+</script>
+
+<template>
+  <q-btn-group flat spread class="q-mt-xl">
+    <q-btn v-if="previousStep" label="Previous step" @click=setStep(props.previousStep) icon="chevron_left"/>
+    <q-btn v-if="nextStep" label="Next step" @click=setStep(props.nextStep) icon-right="chevron_right"/>
+  </q-btn-group>
+</template>

src/components/aircrafts/AircraftForm.vue

@@ -0,0 +1,43 @@
+<script setup>
+
+import {onMounted, reactive} from "vue";
+import FormWrapper from "components/FormWrapper.vue";
+import {setDefaultData} from "src/composables/form/formHandling";
+import {defaultValues, isRequestPending} from "src/composables/form/props";
+import {isRequired} from "src/composables/form/rules";
+
+const formData = reactive({
+  id: null,
+  name: "",
+  model: "",
+  manufacturer: "",
+  description: "",
+  organizationId: null
+});
+
+const props = defineProps({
+  defaultValues,
+  isRequestPending
+});
+
+const rules = {
+  name: [
+    v => isRequired(v)
+  ],
+};
+
+onMounted(() => {
+  if (Object.keys(props.defaultValues).length > 0)
+    setDefaultData(formData, props.defaultValues);
+})
+</script>
+
+<template>
+  <FormWrapper v-model="formData">
+    <q-input type="text" :rules="rules.name" v-model="formData.name" label="Volací značka"/>
+    <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" />
+
+  </FormWrapper>
+</template>

src/components/aircrafts/AircraftsList.vue

@@ -0,0 +1,24 @@
+<script setup>
+
+const props = defineProps({
+  items: {
+    type: Array,
+    required: true
+  }
+});
+</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>
+        <router-link :to="{name: 'aircraftDetail', params: {id: plane.id }}">
+          {{ plane.name }}
+        </router-link>
+
+        {{ plane.type }}
+      </q-item-section>
+    </q-item>
+  </q-list>
+</template>

src/components/inputs/LocationInput.vue

@@ -0,0 +1,116 @@
+<script setup>
+import {onMounted, ref, toRefs, watch} from "vue";
+
+const props = defineProps({
+  modelValue: {
+    type: [Number, String]
+  },
+  label: {
+    type: String,
+    required: true
+  },
+  rules: {
+    type: Array,
+    required: false,
+    default: () => []
+  },
+  locations: {
+    type: Array,
+    required: true,
+  },
+  prependIcon: {
+    type: String,
+    required: false,
+    default: null
+  },
+  appendIcon: {
+    type: String,
+    required: false,
+    default: null
+  }
+})
+const emit = defineEmits(['update:modelValue']);
+
+let selectedLocationModel = ref("");
+onMounted(() => {
+  selectedLocationModel.value = props.modelValue;
+});
+watch(selectedLocationModel, (newVal) => {
+  // TODO: rozdelit emit na dva modely - jeden na emit existujici lokality, druhy na emit nove vytvarene
+  if (!newVal) return;
+
+  console.log(newVal);
+
+  let value, eventName;
+  if (newVal instanceof String) {
+    eventName = "update:modelValue";
+    value = newVal;
+  } else {
+    eventName = "update:modelValue";
+    value = newVal.id;
+  }
+
+  emit(eventName, value);
+})
+
+const {locations} = toRefs(props);
+let availableLocations = ref([]);
+
+const filterFn = (val, update, abort) => {
+  update(() => {
+    if (!val || val === "") {
+      availableLocations.value = locations.value;
+    } else {
+      const needle = val.toLowerCase();
+      availableLocations.value = locations.value.filter(v => {
+        return v.name.toLowerCase().indexOf(needle) > -1;
+      });
+    }
+  })
+}
+</script>
+
+<template>
+  <q-select
+    v-model="selectedLocationModel"
+    :label=label
+    use-input
+    input-debounce="100"
+    :rules="rules"
+    :options="availableLocations"
+    option-label="name"
+    option-value="id"
+    clearable
+    new-value-mode="add"
+    use-chips
+    @filter="filterFn"
+  >
+    <template #before v-if="prependIcon">
+      <q-icon :name="prependIcon"/>
+    </template>
+    <template #after v-if="appendIcon">
+      <q-icon :name="appendIcon"/>
+    </template>
+    <template v-slot:selected v-if="!props.multiple">
+      <q-chip
+        v-if="selectedLocationModel"
+        square
+      >
+        <q-avatar color="primary" text-color="white" :icon="selectedLocationModel.type === 'airport' ? 'flight' : 'marker'"/>
+        {{ selectedLocationModel.name }}
+      </q-chip>
+    </template>
+    <template #append>
+      <slot name="append"></slot>
+    </template>
+    <template v-slot:no-option>
+      <q-item>
+        <q-item-section class="text-grey">
+          Add new option
+        </q-item-section>
+      </q-item>
+    </template>
+  </q-select>
+
+  <!--  @input-value u q-select - nelze pouzit misto watche?-->
+</template>

src/components/inputs/UCombobox.vue

@@ -0,0 +1,7 @@
+<script setup>
+const props = defineProps({});
+</script>
+
+<template>
+  {{ props }}
+</template>

src/components/navigation/NavigationButton.vue

@@ -0,0 +1,44 @@
+<template>
+  <q-item
+    clickable
+    tag="router-link"
+    :to="to"
+  >
+    <q-item-section
+      v-if="icon"
+      avatar
+    >
+      <q-icon :name="icon" />
+    </q-item-section>
+
+    <q-item-section>
+      <q-item-label>{{ title }}</q-item-label>
+      <q-item-label caption>{{ caption }}</q-item-label>
+    </q-item-section>
+  </q-item>
+</template>
+
+<script setup>
+
+const props = defineProps({
+    title: {
+      type: String,
+      required: true
+    },
+
+    caption: {
+      type: String,
+      default: ''
+    },
+
+    to: {
+      type: Object,
+      required: true
+    },
+
+    icon: {
+      type: String,
+      default: ''
+    }
+  })
+</script>