atom-nuxt 1.0.138 → 1.0.140
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/module.json +3 -3
- package/dist/runtime/components/AlertDisplay.vue +11 -18
- package/dist/runtime/components/AlertDisplay.vue.d.ts +2 -0
- package/dist/runtime/components/CrudAddressSearchField.vue +16 -63
- package/dist/runtime/components/CrudAddressSearchField.vue.d.ts +2 -0
- package/dist/runtime/components/CrudApiSelectorField.vue +11 -24
- package/dist/runtime/components/CrudApiSelectorField.vue.d.ts +30 -0
- package/dist/runtime/components/CrudConfirmDialog.vue +11 -17
- package/dist/runtime/components/CrudConfirmDialog.vue.d.ts +18 -0
- package/dist/runtime/components/CrudErrorDisplay.vue +3 -4
- package/dist/runtime/components/CrudErrorDisplay.vue.d.ts +6 -0
- package/dist/runtime/components/CrudFilter.vue +31 -45
- package/dist/runtime/components/CrudFilter.vue.d.ts +8 -0
- package/dist/runtime/components/CrudFilterList.vue +0 -6
- package/dist/runtime/components/CrudFilterList.vue.d.ts +5 -0
- package/dist/runtime/components/CrudFormDialog.vue +4 -12
- package/dist/runtime/components/CrudFormDialog.vue.d.ts +28 -0
- package/dist/runtime/components/CrudFormLoader.vue +98 -121
- package/dist/runtime/components/CrudFormLoader.vue.d.ts +41 -0
- package/dist/runtime/components/CrudListLoader.vue +15 -26
- package/dist/runtime/components/CrudListLoader.vue.d.ts +36 -0
- package/dist/runtime/components/CrudPaginatedLoader.vue +53 -83
- package/dist/runtime/components/CrudPaginatedLoader.vue.d.ts +70 -0
- package/dist/runtime/components/CrudUploadField.vue +9 -26
- package/dist/runtime/components/CrudUploadField.vue.d.ts +23 -0
- package/dist/runtime/components/CrudUploadFieldSelection.vue +16 -24
- package/dist/runtime/components/CrudUploadFieldSelection.vue.d.ts +18 -0
- package/dist/types.d.mts +4 -2
- package/package.json +17 -18
- package/dist/module.cjs +0 -5
- package/dist/module.d.ts +0 -23
- package/dist/types.d.ts +0 -7
package/dist/module.json
CHANGED
|
@@ -1,46 +1,43 @@
|
|
|
1
|
-
<script setup
|
|
2
|
-
import {useAlertService} from
|
|
3
|
-
import {computed} from
|
|
4
|
-
|
|
5
|
-
const {alertMessage, alertActive} = useAlertService();
|
|
6
|
-
|
|
1
|
+
<script setup>
|
|
2
|
+
import { useAlertService } from "../composables/useAlertService";
|
|
3
|
+
import { computed } from "vue";
|
|
4
|
+
const { alertMessage, alertActive } = useAlertService();
|
|
7
5
|
const message = computed(() => {
|
|
8
6
|
if (!alertMessage.value || !alertActive.value) {
|
|
9
7
|
return null;
|
|
10
8
|
}
|
|
11
|
-
return typeof alertMessage.value ===
|
|
9
|
+
return typeof alertMessage.value === "string" ? alertMessage.value : alertMessage.value.message;
|
|
12
10
|
});
|
|
13
11
|
const color = computed(() => {
|
|
14
12
|
if (!alertMessage.value || !alertActive.value) {
|
|
15
13
|
return null;
|
|
16
14
|
}
|
|
17
|
-
return typeof alertMessage.value ===
|
|
15
|
+
return typeof alertMessage.value === "string" ? "success" : alertMessage.value.color || "success";
|
|
18
16
|
});
|
|
19
17
|
const location = computed(() => {
|
|
20
18
|
if (!alertMessage.value || !alertActive.value) {
|
|
21
19
|
return "";
|
|
22
20
|
}
|
|
23
|
-
return typeof alertMessage.value ===
|
|
21
|
+
return typeof alertMessage.value === "string" ? "" : alertMessage.value.location || "";
|
|
24
22
|
});
|
|
25
23
|
const icon = computed(() => {
|
|
26
24
|
if (!alertMessage.value || !alertActive.value) {
|
|
27
25
|
return null;
|
|
28
26
|
}
|
|
29
|
-
return typeof alertMessage.value ===
|
|
27
|
+
return typeof alertMessage.value === "string" ? null : alertMessage.value.icon || null;
|
|
30
28
|
});
|
|
31
|
-
|
|
32
29
|
const clickable = computed(() => {
|
|
33
|
-
if (!alertMessage.value || !alertActive.value || typeof alertMessage.value ===
|
|
30
|
+
if (!alertMessage.value || !alertActive.value || typeof alertMessage.value === "string" || !alertMessage.value.onClick) {
|
|
34
31
|
return false;
|
|
35
32
|
}
|
|
36
33
|
return true;
|
|
37
|
-
})
|
|
34
|
+
});
|
|
38
35
|
const onClick = () => {
|
|
39
36
|
if (!clickable.value) {
|
|
40
37
|
return;
|
|
41
38
|
}
|
|
42
39
|
alertMessage.value.onClick();
|
|
43
|
-
}
|
|
40
|
+
};
|
|
44
41
|
</script>
|
|
45
42
|
|
|
46
43
|
<template>
|
|
@@ -56,7 +53,3 @@ const onClick = () => {
|
|
|
56
53
|
</div>
|
|
57
54
|
</v-snackbar>
|
|
58
55
|
</template>
|
|
59
|
-
|
|
60
|
-
<style scoped>
|
|
61
|
-
|
|
62
|
-
</style>
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
2
|
+
export default _default;
|
|
@@ -1,21 +1,15 @@
|
|
|
1
1
|
<script setup>
|
|
2
|
-
import {ref, watch} from
|
|
3
|
-
import {useRuntimeConfig} from "nuxt/app";
|
|
4
|
-
import {useDebounceFn} from
|
|
5
|
-
|
|
2
|
+
import { ref, watch } from "vue";
|
|
3
|
+
import { useRuntimeConfig } from "nuxt/app";
|
|
4
|
+
import { useDebounceFn } from "@vueuse/core";
|
|
6
5
|
const atomNuxtConfig = useRuntimeConfig().public.atomNuxt;
|
|
7
|
-
|
|
8
|
-
// Data
|
|
9
|
-
const searchText = ref('');
|
|
6
|
+
const searchText = ref("");
|
|
10
7
|
const addressSearchResults = ref([]);
|
|
11
8
|
const loading = ref(false);
|
|
12
9
|
const selectedPlaceId = ref(null);
|
|
13
10
|
const model = defineModel();
|
|
14
|
-
|
|
15
|
-
// Function to get autocomplete suggestions using fetch
|
|
16
11
|
const fetchAutocompleteSuggestions = async (query) => {
|
|
17
12
|
if (!query || loading.value) return;
|
|
18
|
-
// Set loading to true while fetching
|
|
19
13
|
loading.value = true;
|
|
20
14
|
try {
|
|
21
15
|
const result = await $fetch(
|
|
@@ -23,58 +17,25 @@ const fetchAutocompleteSuggestions = async (query) => {
|
|
|
23
17
|
{
|
|
24
18
|
params: {
|
|
25
19
|
input: query,
|
|
26
|
-
key: atomNuxtConfig.googleMapsApiKey
|
|
20
|
+
key: atomNuxtConfig.googleMapsApiKey
|
|
27
21
|
},
|
|
28
|
-
method:
|
|
22
|
+
method: "GET"
|
|
29
23
|
}
|
|
30
24
|
);
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
addressSearchResults.value = result.predictions.map(prediction => ({
|
|
25
|
+
if (result.status === "OK") {
|
|
26
|
+
addressSearchResults.value = result.predictions.map((prediction) => ({
|
|
34
27
|
text: prediction.description,
|
|
35
28
|
place_id: prediction.place_id
|
|
36
29
|
}));
|
|
37
30
|
} else {
|
|
38
|
-
console.error(
|
|
31
|
+
console.error("Error fetching autocomplete suggestions:", result.status);
|
|
39
32
|
}
|
|
40
33
|
} catch (error) {
|
|
41
|
-
console.error(
|
|
34
|
+
console.error("Error fetching autocomplete suggestions:", error);
|
|
42
35
|
} finally {
|
|
43
|
-
// Set loading to false after fetching
|
|
44
36
|
loading.value = false;
|
|
45
37
|
}
|
|
46
38
|
};
|
|
47
|
-
|
|
48
|
-
// const fetchInitial = async (latLng) => {
|
|
49
|
-
// if (!latLng || loading.value) return;
|
|
50
|
-
// // Set loading to true while fetching
|
|
51
|
-
// loading.value = true;
|
|
52
|
-
// try {
|
|
53
|
-
// const res = await $fetch(
|
|
54
|
-
// `/api/maps/geocode`,
|
|
55
|
-
// {
|
|
56
|
-
// params: {
|
|
57
|
-
// latLng: latLng,
|
|
58
|
-
// key: atomNuxtConfig.googleMapsApiKey,
|
|
59
|
-
// },
|
|
60
|
-
// method: 'GET'
|
|
61
|
-
// }
|
|
62
|
-
// );
|
|
63
|
-
// // Check if the API call was successful
|
|
64
|
-
// if (res.status === 'OK') {
|
|
65
|
-
// let newAddress = res.results[0]?.formatted_address;
|
|
66
|
-
// searchText.value = newAddress;
|
|
67
|
-
// } else {
|
|
68
|
-
// console.error('Error fetching autocomplete suggestions:', result.status);
|
|
69
|
-
// }
|
|
70
|
-
// } catch (error) {
|
|
71
|
-
// console.error('Error fetching autocomplete suggestions:', error);
|
|
72
|
-
// } finally {
|
|
73
|
-
// // Set loading to false after fetching
|
|
74
|
-
// loading.value = false;
|
|
75
|
-
// }
|
|
76
|
-
// };
|
|
77
|
-
|
|
78
39
|
const fetchPlaceId = async (placeId) => {
|
|
79
40
|
if (!placeId) {
|
|
80
41
|
model.value = null;
|
|
@@ -86,36 +47,28 @@ const fetchPlaceId = async (placeId) => {
|
|
|
86
47
|
`/api/maps/places`,
|
|
87
48
|
{
|
|
88
49
|
params: {
|
|
89
|
-
placeId
|
|
90
|
-
key: atomNuxtConfig.googleMapsApiKey
|
|
50
|
+
placeId,
|
|
51
|
+
key: atomNuxtConfig.googleMapsApiKey
|
|
91
52
|
},
|
|
92
|
-
method:
|
|
53
|
+
method: "GET"
|
|
93
54
|
}
|
|
94
55
|
);
|
|
95
|
-
|
|
96
|
-
if (result.status === 'OK') {
|
|
56
|
+
if (result.status === "OK") {
|
|
97
57
|
model.value = `${result.result.geometry.location.lat},${result.result.geometry.location.lng}`;
|
|
98
58
|
} else {
|
|
99
|
-
console.error(
|
|
59
|
+
console.error("Error fetching place details:", result.status);
|
|
100
60
|
}
|
|
101
61
|
} catch (error) {
|
|
102
|
-
console.error(
|
|
62
|
+
console.error("Error fetching place details:", error);
|
|
103
63
|
}
|
|
104
64
|
};
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
// Debounce the search text updates to avoid excessive API calls
|
|
108
65
|
const debouncedFetchAutocompleteSuggestions = useDebounceFn(fetchAutocompleteSuggestions, 500);
|
|
109
|
-
|
|
110
|
-
// Watch for changes to searchText and trigger debounced API calls
|
|
111
66
|
watch(searchText, (newQuery) => {
|
|
112
67
|
debouncedFetchAutocompleteSuggestions(newQuery);
|
|
113
68
|
});
|
|
114
|
-
|
|
115
69
|
watch(selectedPlaceId, (newPlaceId) => {
|
|
116
70
|
fetchPlaceId(newPlaceId);
|
|
117
71
|
});
|
|
118
|
-
|
|
119
72
|
</script>
|
|
120
73
|
|
|
121
74
|
<template>
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
2
|
+
export default _default;
|
|
@@ -1,44 +1,31 @@
|
|
|
1
1
|
<script setup>
|
|
2
2
|
import CrudListLoader from "./CrudListLoader.vue";
|
|
3
|
-
import {defineModel, ref, computed} from "vue";
|
|
4
|
-
|
|
3
|
+
import { defineModel, ref, computed } from "vue";
|
|
5
4
|
const props = defineProps({
|
|
6
|
-
path: {type: String, required: true},
|
|
7
|
-
multiple: {type: Boolean, default: false},
|
|
8
|
-
endpointDisplayKey: {type: String, default: "name"},
|
|
9
|
-
endpointFilterKey: {type: String, default: "keywords"},
|
|
10
|
-
endpointResponseKey: {type: String, default: "id"},
|
|
11
|
-
additionalFilters: {type: Object, default: () => ({})},
|
|
12
|
-
disableUpdate: {type: Boolean, default: false},
|
|
13
|
-
createBtnText: {type: String, default: "Select"},
|
|
14
|
-
updateBtnText: {type: String, default: "Update"}
|
|
5
|
+
path: { type: String, required: true },
|
|
6
|
+
multiple: { type: Boolean, default: false },
|
|
7
|
+
endpointDisplayKey: { type: String, default: "name" },
|
|
8
|
+
endpointFilterKey: { type: String, default: "keywords" },
|
|
9
|
+
endpointResponseKey: { type: String, default: "id" },
|
|
10
|
+
additionalFilters: { type: Object, default: () => ({}) },
|
|
11
|
+
disableUpdate: { type: Boolean, default: false },
|
|
12
|
+
createBtnText: { type: String, default: "Select" },
|
|
13
|
+
updateBtnText: { type: String, default: "Update" }
|
|
15
14
|
});
|
|
16
|
-
|
|
17
15
|
const selectionModel = defineModel();
|
|
18
16
|
const search = ref("");
|
|
19
17
|
const searchDialog = ref(false);
|
|
20
18
|
const searchDialogSelectedValue = ref(null);
|
|
21
|
-
|
|
22
19
|
const hasSelection = computed(() => selectionModel.value !== null);
|
|
23
|
-
|
|
24
20
|
const onAction = () => {
|
|
25
|
-
|
|
26
|
-
searchDialogSelectedValue.value = selectionModel.value
|
|
27
|
-
? Array.isArray(selectionModel.value)
|
|
28
|
-
? [...selectionModel.value]
|
|
29
|
-
: selectionModel.value
|
|
30
|
-
: null;
|
|
21
|
+
searchDialogSelectedValue.value = selectionModel.value ? Array.isArray(selectionModel.value) ? [...selectionModel.value] : selectionModel.value : null;
|
|
31
22
|
searchDialog.value = true;
|
|
32
23
|
};
|
|
33
|
-
|
|
34
24
|
const onDone = () => {
|
|
35
|
-
// Update selectionModel only when clicking "Done"
|
|
36
25
|
selectionModel.value = searchDialogSelectedValue.value;
|
|
37
26
|
searchDialog.value = false;
|
|
38
27
|
};
|
|
39
|
-
|
|
40
28
|
const onCancel = () => {
|
|
41
|
-
// Close the dialog without saving changes
|
|
42
29
|
searchDialog.value = false;
|
|
43
30
|
};
|
|
44
31
|
</script>
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
|
|
2
|
+
export default _default;
|
|
3
|
+
type __VLS_WithSlots<T, S> = T & (new () => {
|
|
4
|
+
$slots: S;
|
|
5
|
+
});
|
|
6
|
+
declare const __VLS_component: import("vue").DefineComponent<{}, {
|
|
7
|
+
path: string;
|
|
8
|
+
multiple: boolean;
|
|
9
|
+
endpointDisplayKey: string;
|
|
10
|
+
endpointFilterKey: string;
|
|
11
|
+
endpointResponseKey: string;
|
|
12
|
+
additionalFilters: Record<string, any>;
|
|
13
|
+
disableUpdate: boolean;
|
|
14
|
+
createBtnText: string;
|
|
15
|
+
updateBtnText: string;
|
|
16
|
+
$props: any;
|
|
17
|
+
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
18
|
+
type __VLS_Slots = {
|
|
19
|
+
items?: ((props: {
|
|
20
|
+
items: any;
|
|
21
|
+
}) => any) | undefined;
|
|
22
|
+
} & {
|
|
23
|
+
action?: ((props: {
|
|
24
|
+
action: any;
|
|
25
|
+
}) => any) | undefined;
|
|
26
|
+
} & {
|
|
27
|
+
dialogListTitle?: ((props: {
|
|
28
|
+
item: any;
|
|
29
|
+
}) => any) | undefined;
|
|
30
|
+
};
|
|
@@ -1,41 +1,40 @@
|
|
|
1
1
|
<script setup>
|
|
2
|
-
import { ref, defineProps, defineEmits } from
|
|
2
|
+
import { ref, defineProps, defineEmits } from "vue";
|
|
3
3
|
defineProps({
|
|
4
4
|
title: {
|
|
5
5
|
type: String,
|
|
6
6
|
default() {
|
|
7
|
-
return "Delete item"
|
|
7
|
+
return "Delete item";
|
|
8
8
|
}
|
|
9
9
|
},
|
|
10
10
|
message: {
|
|
11
11
|
type: String,
|
|
12
12
|
default() {
|
|
13
|
-
return "Are you sure you want to delete this item?"
|
|
13
|
+
return "Are you sure you want to delete this item?";
|
|
14
14
|
}
|
|
15
15
|
},
|
|
16
16
|
cancelText: {
|
|
17
17
|
type: String,
|
|
18
18
|
default() {
|
|
19
|
-
return "Cancel"
|
|
19
|
+
return "Cancel";
|
|
20
20
|
}
|
|
21
21
|
},
|
|
22
22
|
confirmText: {
|
|
23
23
|
type: String,
|
|
24
24
|
default() {
|
|
25
|
-
return "OK"
|
|
25
|
+
return "OK";
|
|
26
26
|
}
|
|
27
27
|
}
|
|
28
|
-
})
|
|
29
|
-
const emit = defineEmits([
|
|
30
|
-
const dialog = ref(false)
|
|
28
|
+
});
|
|
29
|
+
const emit = defineEmits(["confirm"]);
|
|
30
|
+
const dialog = ref(false);
|
|
31
31
|
const open = () => {
|
|
32
|
-
dialog.value = true
|
|
33
|
-
}
|
|
32
|
+
dialog.value = true;
|
|
33
|
+
};
|
|
34
34
|
const handleConfirm = () => {
|
|
35
|
-
emit(
|
|
35
|
+
emit("confirm");
|
|
36
36
|
dialog.value = false;
|
|
37
37
|
};
|
|
38
|
-
|
|
39
38
|
</script>
|
|
40
39
|
|
|
41
40
|
<template>
|
|
@@ -79,11 +78,6 @@ const handleConfirm = () => {
|
|
|
79
78
|
</v-btn>
|
|
80
79
|
</v-card-actions>
|
|
81
80
|
|
|
82
|
-
|
|
83
81
|
</v-card>
|
|
84
82
|
</v-dialog>
|
|
85
83
|
</template>
|
|
86
|
-
|
|
87
|
-
<style scoped>
|
|
88
|
-
|
|
89
|
-
</style>
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
|
|
2
|
+
export default _default;
|
|
3
|
+
type __VLS_WithSlots<T, S> = T & (new () => {
|
|
4
|
+
$slots: S;
|
|
5
|
+
});
|
|
6
|
+
declare const __VLS_component: import("vue").DefineComponent<{}, {
|
|
7
|
+
$emit: (event: "confirm", ...args: any[]) => void;
|
|
8
|
+
message: string;
|
|
9
|
+
title: string;
|
|
10
|
+
cancelText: string;
|
|
11
|
+
confirmText: string;
|
|
12
|
+
$props: any;
|
|
13
|
+
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
14
|
+
type __VLS_Slots = {
|
|
15
|
+
default?: ((props: {
|
|
16
|
+
click: any;
|
|
17
|
+
}) => any) | undefined;
|
|
18
|
+
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<script setup>
|
|
2
|
-
import {computed} from
|
|
3
|
-
import {defineProps} from
|
|
2
|
+
import { computed } from "vue";
|
|
3
|
+
import { defineProps } from "vue";
|
|
4
4
|
const props = defineProps({
|
|
5
5
|
errors: Object,
|
|
6
6
|
errorKey: {
|
|
@@ -8,9 +8,9 @@ const props = defineProps({
|
|
|
8
8
|
default: null
|
|
9
9
|
}
|
|
10
10
|
});
|
|
11
|
-
|
|
12
11
|
const random = computed(() => Math.random());
|
|
13
12
|
</script>
|
|
13
|
+
|
|
14
14
|
<template>
|
|
15
15
|
<v-alert
|
|
16
16
|
v-if="errors != null && errors[errorKey ?? 'global'] != null"
|
|
@@ -26,4 +26,3 @@ const random = computed(() => Math.random());
|
|
|
26
26
|
</div>
|
|
27
27
|
</v-alert>
|
|
28
28
|
</template>
|
|
29
|
-
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
declare const _default: import("vue").DefineComponent<{}, {
|
|
2
|
+
errorKey: string;
|
|
3
|
+
errors?: Record<string, any> | undefined;
|
|
4
|
+
$props: any;
|
|
5
|
+
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
6
|
+
export default _default;
|
|
@@ -1,137 +1,123 @@
|
|
|
1
1
|
<script setup>
|
|
2
2
|
import CrudListLoader from "./CrudListLoader.vue";
|
|
3
|
-
import {ref, computed, watch, onMounted, onBeforeUnmount} from "vue";
|
|
4
|
-
import {useDebounceFn} from "@vueuse/core";
|
|
3
|
+
import { ref, computed, watch, onMounted, onBeforeUnmount } from "vue";
|
|
4
|
+
import { useDebounceFn } from "@vueuse/core";
|
|
5
5
|
import CrudAddressSearchField from "./CrudAddressSearchField.vue";
|
|
6
|
-
import {useCrudConverters} from "../composables/useCrudConverters";
|
|
7
|
-
import {useCrudApi} from "../composables/useCrudApi";
|
|
8
|
-
|
|
6
|
+
import { useCrudConverters } from "../composables/useCrudConverters";
|
|
7
|
+
import { useCrudApi } from "../composables/useCrudApi";
|
|
9
8
|
const props = defineProps({
|
|
10
9
|
filter: {
|
|
11
10
|
type: Object,
|
|
12
|
-
required: true
|
|
11
|
+
required: true
|
|
13
12
|
},
|
|
14
13
|
modelValue: null,
|
|
15
|
-
disabled: Boolean
|
|
14
|
+
disabled: Boolean
|
|
16
15
|
});
|
|
17
16
|
const model = ref();
|
|
18
|
-
const emit = defineEmits([
|
|
19
|
-
// Watch for changes in the prop and update the internal model
|
|
17
|
+
const emit = defineEmits(["update:modelValue"]);
|
|
20
18
|
watch(() => props.modelValue, (newValue) => {
|
|
21
|
-
model.value = newValue;
|
|
19
|
+
model.value = newValue;
|
|
22
20
|
});
|
|
23
|
-
// Debounced emit function
|
|
24
|
-
|
|
25
21
|
const filter = ref(props.filter);
|
|
22
|
+
watch(() => props.filter, (newValue) => {
|
|
23
|
+
debugger;
|
|
24
|
+
filter.value = newValue;
|
|
25
|
+
});
|
|
26
26
|
const searchDialogSelectedValue = ref(null);
|
|
27
27
|
const search = ref(null);
|
|
28
28
|
const searchDialog = ref(false);
|
|
29
29
|
const datePickerValue = ref(null);
|
|
30
30
|
const datePicker = ref(false);
|
|
31
|
-
|
|
32
31
|
const emitUpdate = () => {
|
|
33
|
-
emit(
|
|
34
|
-
}
|
|
32
|
+
emit("update:modelValue", model.value);
|
|
33
|
+
};
|
|
35
34
|
const debouncedUpdate = useDebounceFn(emitUpdate, 700);
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
const {inputDateForDb, outputDateFromDb, cloneDeep, localDateForDb} = useCrudConverters();
|
|
39
|
-
|
|
35
|
+
const { inputDateForDb, outputDateFromDb, cloneDeep, localDateForDb } = useCrudConverters();
|
|
40
36
|
const datePickerDisplayValue = computed(() => {
|
|
41
37
|
if (!selectedValue.value || selectedValue.value.length !== 2) {
|
|
42
38
|
return null;
|
|
43
39
|
}
|
|
44
|
-
const startDate = outputDateFromDb(selectedValue.value[0],
|
|
45
|
-
const endDate = outputDateFromDb(selectedValue.value[1],
|
|
40
|
+
const startDate = outputDateFromDb(selectedValue.value[0], "dd LLL");
|
|
41
|
+
const endDate = outputDateFromDb(selectedValue.value[1], "dd LLL");
|
|
46
42
|
return `${startDate} - ${endDate}`;
|
|
47
43
|
});
|
|
48
|
-
|
|
49
44
|
const selectedValue = computed({
|
|
50
45
|
get() {
|
|
51
46
|
if (model.value != null) {
|
|
52
|
-
if (props.filter.optionType ===
|
|
47
|
+
if (props.filter.optionType === "DateTimeRange") {
|
|
53
48
|
if (!model.value || model.value.length !== 2) {
|
|
54
49
|
return null;
|
|
55
50
|
}
|
|
56
51
|
return model.value;
|
|
57
52
|
}
|
|
58
53
|
return model.value;
|
|
59
|
-
} else if (props.filter.type ===
|
|
54
|
+
} else if (props.filter.type === "multiOption" || props.filter.type === "multiSearch") {
|
|
60
55
|
return [];
|
|
61
56
|
} else {
|
|
62
57
|
return null;
|
|
63
58
|
}
|
|
64
59
|
},
|
|
65
60
|
set(val) {
|
|
66
|
-
if (props.filter.optionType ===
|
|
61
|
+
if (props.filter.optionType === "DateTimeRange" && val && val[0]) {
|
|
67
62
|
let start = val[0];
|
|
68
63
|
let end = val[1];
|
|
69
|
-
model.value = [start,end];
|
|
64
|
+
model.value = [start, end];
|
|
70
65
|
} else {
|
|
71
66
|
model.value = val;
|
|
72
67
|
}
|
|
73
68
|
debouncedUpdate();
|
|
74
|
-
}
|
|
69
|
+
}
|
|
75
70
|
});
|
|
76
|
-
|
|
77
71
|
const {
|
|
78
72
|
getItems: searchGetItems,
|
|
79
73
|
items: searchListItems,
|
|
80
74
|
listPending: searchLoading
|
|
81
75
|
} = useCrudApi(props.filter.endpoint);
|
|
82
|
-
|
|
83
|
-
|
|
84
76
|
async function getSearchListValue() {
|
|
85
77
|
if (!selectedValue.value || selectedValue.value.length === 0) {
|
|
86
78
|
return;
|
|
87
79
|
}
|
|
88
|
-
const filters = {ids: selectedValue.value};
|
|
80
|
+
const filters = { ids: selectedValue.value };
|
|
89
81
|
await searchGetItems(1, selectedValue.value.length, filters);
|
|
90
82
|
}
|
|
91
|
-
|
|
92
83
|
const validateDateRange = () => {
|
|
93
84
|
datePicker.value = false;
|
|
94
|
-
|
|
95
85
|
if (!datePickerValue.value || datePickerValue.value.length < 2) {
|
|
96
86
|
return;
|
|
97
87
|
}
|
|
98
88
|
let startDate = localDateForDb(datePickerValue.value[0]);
|
|
99
89
|
let endDate = localDateForDb(datePickerValue.value[datePickerValue.value.length - 1]);
|
|
100
90
|
selectedValue.value = [startDate, endDate];
|
|
101
|
-
}
|
|
102
|
-
|
|
91
|
+
};
|
|
103
92
|
const closeDatePicker = (clear = false) => {
|
|
104
93
|
if (clear) {
|
|
105
94
|
selectedValue.value = null;
|
|
106
95
|
}
|
|
107
96
|
datePicker.value = false;
|
|
108
|
-
}
|
|
109
|
-
watch(searchDialog, (newValue,oldValue) => {
|
|
97
|
+
};
|
|
98
|
+
watch(searchDialog, (newValue, oldValue) => {
|
|
110
99
|
if (!newValue && searchDialogSelectedValue.value != null) {
|
|
111
100
|
selectedValue.value = cloneDeep(searchDialogSelectedValue.value);
|
|
112
|
-
if(newValue !== oldValue) {
|
|
101
|
+
if (newValue !== oldValue) {
|
|
113
102
|
getSearchListValue();
|
|
114
103
|
}
|
|
115
104
|
} else {
|
|
116
105
|
searchDialogSelectedValue.value = cloneDeep(model.value);
|
|
117
106
|
}
|
|
118
107
|
});
|
|
119
|
-
|
|
120
108
|
onMounted(() => {
|
|
121
109
|
model.value = props.modelValue;
|
|
122
|
-
if (props.filter.type ===
|
|
110
|
+
if (props.filter.type === "search" || props.filter.type === "multiSearch") {
|
|
123
111
|
getSearchListValue();
|
|
124
112
|
}
|
|
125
113
|
});
|
|
126
|
-
|
|
127
114
|
const displayForChip = (item) => {
|
|
128
|
-
var searchItem = searchListItems.value.find(inlineItem => inlineItem[props.filter.endpointResponseKey] === item.raw);
|
|
129
|
-
if(!searchItem) {
|
|
115
|
+
var searchItem = searchListItems.value.find((inlineItem) => inlineItem[props.filter.endpointResponseKey] === item.raw);
|
|
116
|
+
if (!searchItem) {
|
|
130
117
|
return "Loading";
|
|
131
118
|
}
|
|
132
119
|
return searchItem[props.filter.endpointDisplayKey] ?? "Loading";
|
|
133
|
-
}
|
|
134
|
-
|
|
120
|
+
};
|
|
135
121
|
</script>
|
|
136
122
|
|
|
137
123
|
<template>
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
declare const _default: import("vue").DefineComponent<{}, {
|
|
2
|
+
$emit: (event: "update:modelValue", ...args: any[]) => void;
|
|
3
|
+
filter: Record<string, any>;
|
|
4
|
+
disabled: boolean;
|
|
5
|
+
modelValue?: any;
|
|
6
|
+
$props: any;
|
|
7
|
+
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
8
|
+
export default _default;
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
<script setup>
|
|
2
2
|
import CrudFilter from "../components/CrudFilter.vue";
|
|
3
|
-
|
|
4
3
|
const model = defineModel();
|
|
5
4
|
const props = defineProps({
|
|
6
5
|
filters: {
|
|
@@ -10,7 +9,6 @@ const props = defineProps({
|
|
|
10
9
|
}
|
|
11
10
|
}
|
|
12
11
|
});
|
|
13
|
-
|
|
14
12
|
</script>
|
|
15
13
|
|
|
16
14
|
<template>
|
|
@@ -20,7 +18,3 @@ const props = defineProps({
|
|
|
20
18
|
</div>
|
|
21
19
|
</div>
|
|
22
20
|
</template>
|
|
23
|
-
|
|
24
|
-
<style scoped>
|
|
25
|
-
|
|
26
|
-
</style>
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
declare const _default: import("vue").DefineComponent<{}, {
|
|
2
|
+
filters: unknown[];
|
|
3
|
+
$props: any;
|
|
4
|
+
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
5
|
+
export default _default;
|