atom-nuxt 1.0.137 → 1.0.139
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 +27 -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 +22 -23
- 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,119 @@
|
|
|
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);
|
|
26
22
|
const searchDialogSelectedValue = ref(null);
|
|
27
23
|
const search = ref(null);
|
|
28
24
|
const searchDialog = ref(false);
|
|
29
25
|
const datePickerValue = ref(null);
|
|
30
26
|
const datePicker = ref(false);
|
|
31
|
-
|
|
32
27
|
const emitUpdate = () => {
|
|
33
|
-
emit(
|
|
34
|
-
}
|
|
28
|
+
emit("update:modelValue", model.value);
|
|
29
|
+
};
|
|
35
30
|
const debouncedUpdate = useDebounceFn(emitUpdate, 700);
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
const {inputDateForDb, outputDateFromDb, cloneDeep, localDateForDb} = useCrudConverters();
|
|
39
|
-
|
|
31
|
+
const { inputDateForDb, outputDateFromDb, cloneDeep, localDateForDb } = useCrudConverters();
|
|
40
32
|
const datePickerDisplayValue = computed(() => {
|
|
41
33
|
if (!selectedValue.value || selectedValue.value.length !== 2) {
|
|
42
34
|
return null;
|
|
43
35
|
}
|
|
44
|
-
const startDate = outputDateFromDb(selectedValue.value[0],
|
|
45
|
-
const endDate = outputDateFromDb(selectedValue.value[1],
|
|
36
|
+
const startDate = outputDateFromDb(selectedValue.value[0], "dd LLL");
|
|
37
|
+
const endDate = outputDateFromDb(selectedValue.value[1], "dd LLL");
|
|
46
38
|
return `${startDate} - ${endDate}`;
|
|
47
39
|
});
|
|
48
|
-
|
|
49
40
|
const selectedValue = computed({
|
|
50
41
|
get() {
|
|
51
42
|
if (model.value != null) {
|
|
52
|
-
if (props.filter.optionType ===
|
|
43
|
+
if (props.filter.optionType === "DateTimeRange") {
|
|
53
44
|
if (!model.value || model.value.length !== 2) {
|
|
54
45
|
return null;
|
|
55
46
|
}
|
|
56
47
|
return model.value;
|
|
57
48
|
}
|
|
58
49
|
return model.value;
|
|
59
|
-
} else if (props.filter.type ===
|
|
50
|
+
} else if (props.filter.type === "multiOption" || props.filter.type === "multiSearch") {
|
|
60
51
|
return [];
|
|
61
52
|
} else {
|
|
62
53
|
return null;
|
|
63
54
|
}
|
|
64
55
|
},
|
|
65
56
|
set(val) {
|
|
66
|
-
if (props.filter.optionType ===
|
|
57
|
+
if (props.filter.optionType === "DateTimeRange" && val && val[0]) {
|
|
67
58
|
let start = val[0];
|
|
68
59
|
let end = val[1];
|
|
69
|
-
model.value = [start,end];
|
|
60
|
+
model.value = [start, end];
|
|
70
61
|
} else {
|
|
71
62
|
model.value = val;
|
|
72
63
|
}
|
|
73
64
|
debouncedUpdate();
|
|
74
|
-
}
|
|
65
|
+
}
|
|
75
66
|
});
|
|
76
|
-
|
|
77
67
|
const {
|
|
78
68
|
getItems: searchGetItems,
|
|
79
69
|
items: searchListItems,
|
|
80
70
|
listPending: searchLoading
|
|
81
71
|
} = useCrudApi(props.filter.endpoint);
|
|
82
|
-
|
|
83
|
-
|
|
84
72
|
async function getSearchListValue() {
|
|
85
73
|
if (!selectedValue.value || selectedValue.value.length === 0) {
|
|
86
74
|
return;
|
|
87
75
|
}
|
|
88
|
-
const filters = {ids: selectedValue.value};
|
|
76
|
+
const filters = { ids: selectedValue.value };
|
|
89
77
|
await searchGetItems(1, selectedValue.value.length, filters);
|
|
90
78
|
}
|
|
91
|
-
|
|
92
79
|
const validateDateRange = () => {
|
|
93
80
|
datePicker.value = false;
|
|
94
|
-
|
|
95
81
|
if (!datePickerValue.value || datePickerValue.value.length < 2) {
|
|
96
82
|
return;
|
|
97
83
|
}
|
|
98
84
|
let startDate = localDateForDb(datePickerValue.value[0]);
|
|
99
85
|
let endDate = localDateForDb(datePickerValue.value[datePickerValue.value.length - 1]);
|
|
100
86
|
selectedValue.value = [startDate, endDate];
|
|
101
|
-
}
|
|
102
|
-
|
|
87
|
+
};
|
|
103
88
|
const closeDatePicker = (clear = false) => {
|
|
104
89
|
if (clear) {
|
|
105
90
|
selectedValue.value = null;
|
|
106
91
|
}
|
|
107
92
|
datePicker.value = false;
|
|
108
|
-
}
|
|
109
|
-
watch(searchDialog, (newValue,oldValue) => {
|
|
93
|
+
};
|
|
94
|
+
watch(searchDialog, (newValue, oldValue) => {
|
|
110
95
|
if (!newValue && searchDialogSelectedValue.value != null) {
|
|
111
96
|
selectedValue.value = cloneDeep(searchDialogSelectedValue.value);
|
|
112
|
-
if(newValue !== oldValue) {
|
|
97
|
+
if (newValue !== oldValue) {
|
|
113
98
|
getSearchListValue();
|
|
114
99
|
}
|
|
115
100
|
} else {
|
|
116
101
|
searchDialogSelectedValue.value = cloneDeep(model.value);
|
|
117
102
|
}
|
|
118
103
|
});
|
|
119
|
-
|
|
120
104
|
onMounted(() => {
|
|
121
105
|
model.value = props.modelValue;
|
|
122
|
-
if (props.filter.type ===
|
|
106
|
+
if (props.filter.type === "search" || props.filter.type === "multiSearch") {
|
|
123
107
|
getSearchListValue();
|
|
124
108
|
}
|
|
125
109
|
});
|
|
126
|
-
|
|
127
110
|
const displayForChip = (item) => {
|
|
128
|
-
var searchItem = searchListItems.value.find(inlineItem => inlineItem[props.filter.endpointResponseKey] === item.raw);
|
|
129
|
-
if(!searchItem) {
|
|
111
|
+
var searchItem = searchListItems.value.find((inlineItem) => inlineItem[props.filter.endpointResponseKey] === item.raw);
|
|
112
|
+
if (!searchItem) {
|
|
130
113
|
return "Loading";
|
|
131
114
|
}
|
|
132
115
|
return searchItem[props.filter.endpointDisplayKey] ?? "Loading";
|
|
133
|
-
}
|
|
134
|
-
|
|
116
|
+
};
|
|
135
117
|
</script>
|
|
136
118
|
|
|
137
119
|
<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;
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
<script setup>
|
|
2
2
|
import CrudErrorDisplay from "../components/CrudErrorDisplay.vue";
|
|
3
|
-
import {computed} from "vue";
|
|
4
|
-
import {useDisplay} from "vuetify";
|
|
5
|
-
|
|
3
|
+
import { computed } from "vue";
|
|
4
|
+
import { useDisplay } from "vuetify";
|
|
6
5
|
const props = defineProps({
|
|
7
6
|
action: {
|
|
8
7
|
type: String,
|
|
@@ -77,16 +76,13 @@ const props = defineProps({
|
|
|
77
76
|
}
|
|
78
77
|
});
|
|
79
78
|
const item = defineModel();
|
|
80
|
-
const dialogOpen = defineModel(
|
|
79
|
+
const dialogOpen = defineModel("dialog");
|
|
81
80
|
const hasItem = computed(() => item.value && Object.keys(item.value).length > 0);
|
|
82
|
-
|
|
83
81
|
const buttonTitle = computed(() => {
|
|
84
|
-
return props.btnText ? props.btnText :
|
|
82
|
+
return props.btnText ? props.btnText : props.action === "create" ? props.createTitle : props.action === "update" ? props.updateTitle : props.action === "delete" ? props.deleteTitle : "";
|
|
85
83
|
});
|
|
86
|
-
|
|
87
84
|
const display = useDisplay();
|
|
88
85
|
const isLarge = computed(() => display.lgAndUp.value);
|
|
89
|
-
|
|
90
86
|
</script>
|
|
91
87
|
|
|
92
88
|
<template>
|
|
@@ -163,7 +159,3 @@ const isLarge = computed(() => display.lgAndUp.value);
|
|
|
163
159
|
</v-card>
|
|
164
160
|
</v-dialog>
|
|
165
161
|
</template>
|
|
166
|
-
|
|
167
|
-
<style scoped>
|
|
168
|
-
|
|
169
|
-
</style>
|