frontend admin refakctorálás
This commit is contained in:
Roo
@@ -0,0 +1,154 @@
|
||||
import { defineComponent, computed, ref, watch, mergeProps, useSSRContext } from 'vue';
|
||||
import { ssrRenderAttrs, ssrRenderComponent, ssrRenderAttr, ssrInterpolate, ssrRenderList, ssrRenderClass } from 'vue/server-renderer';
|
||||
import { _ as _export_sfc } from './_plugin-vue_export-helper-1tPrXgE0.mjs';
|
||||
|
||||
const _sfc_main$1 = /* @__PURE__ */ defineComponent({
|
||||
__name: "SmartLocationInput",
|
||||
__ssrInlineRender: true,
|
||||
props: {
|
||||
modelValue: { default: null },
|
||||
label: { default: "" },
|
||||
placeholder: { default: "Kezdj el g\xE9pelni (ir\xE1ny\xEDt\xF3sz\xE1m vagy v\xE1ros)..." },
|
||||
minChars: { default: 2 },
|
||||
countryCode: { default: "HU" },
|
||||
debounceMs: { default: 300 }
|
||||
},
|
||||
emits: ["update:modelValue", "select"],
|
||||
setup(__props, { emit: __emit }) {
|
||||
const props = __props;
|
||||
ref(null);
|
||||
const query = ref("");
|
||||
const selectedItem = ref(props.modelValue);
|
||||
const items = ref([]);
|
||||
const searching = ref(false);
|
||||
const showDropdown = ref(false);
|
||||
const highlightedIndex = ref(0);
|
||||
const displayText = computed(() => {
|
||||
if (selectedItem.value) {
|
||||
return `${selectedItem.value.zip_code} ${selectedItem.value.city}`;
|
||||
}
|
||||
return query.value;
|
||||
});
|
||||
const filteredItems = computed(() => {
|
||||
if (!query.value || query.value.length < props.minChars) return [];
|
||||
const q = query.value.toLowerCase();
|
||||
return items.value.filter(
|
||||
(item) => item.zip_code.toLowerCase().includes(q) || item.city.toLowerCase().includes(q)
|
||||
);
|
||||
});
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
(val) => {
|
||||
selectedItem.value = val;
|
||||
}
|
||||
);
|
||||
return (_ctx, _push, _parent, _attrs) => {
|
||||
_push(`<div${ssrRenderAttrs(mergeProps({ class: "relative" }, _attrs))} data-v-b43e13ca>`);
|
||||
if (__props.label) {
|
||||
_push(`<label class="block text-sm font-medium text-slate-300 mb-1" data-v-b43e13ca>${ssrInterpolate(__props.label)}</label>`);
|
||||
} else {
|
||||
_push(`<!---->`);
|
||||
}
|
||||
_push(`<div class="relative" data-v-b43e13ca><input${ssrRenderAttr("value", displayText.value)}${ssrRenderAttr("placeholder", __props.placeholder)} class="w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-lg text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500 text-sm" data-v-b43e13ca>`);
|
||||
if (searching.value) {
|
||||
_push(`<svg class="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 animate-spin text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-v-b43e13ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" data-v-b43e13ca></path></svg>`);
|
||||
} else {
|
||||
_push(`<!---->`);
|
||||
}
|
||||
if (selectedItem.value && !searching.value) {
|
||||
_push(`<button class="absolute right-3 top-1/2 -translate-y-1/2 text-slate-500 hover:text-white transition" type="button" data-v-b43e13ca><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-v-b43e13ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" data-v-b43e13ca></path></svg></button>`);
|
||||
} else {
|
||||
_push(`<!---->`);
|
||||
}
|
||||
_push(`</div>`);
|
||||
if (showDropdown.value && filteredItems.value.length > 0) {
|
||||
_push(`<div class="absolute z-50 mt-1 w-full bg-slate-800 border border-slate-600 rounded-lg shadow-xl max-h-60 overflow-y-auto" data-v-b43e13ca><!--[-->`);
|
||||
ssrRenderList(filteredItems.value, (item, index) => {
|
||||
_push(`<button class="${ssrRenderClass([index === highlightedIndex.value ? "bg-indigo-500/20 text-white" : "text-slate-300 hover:bg-slate-700", "w-full text-left px-3 py-2 text-sm transition flex items-center gap-2"])}" data-v-b43e13ca><span class="font-mono text-indigo-400" data-v-b43e13ca>${ssrInterpolate(item.zip_code)}</span><span data-v-b43e13ca>${ssrInterpolate(item.city)}</span><span class="text-xs text-slate-500 ml-auto" data-v-b43e13ca>${ssrInterpolate(item.country_code)}</span></button>`);
|
||||
});
|
||||
_push(`<!--]--></div>`);
|
||||
} else {
|
||||
_push(`<!---->`);
|
||||
}
|
||||
if (showDropdown.value && query.value.length >= __props.minChars && filteredItems.value.length === 0 && !searching.value) {
|
||||
_push(`<div class="absolute z-50 mt-1 w-full bg-slate-800 border border-slate-600 rounded-lg shadow-xl p-3 text-sm text-slate-400" data-v-b43e13ca> Nincs tal\xE1lat </div>`);
|
||||
} else {
|
||||
_push(`<!---->`);
|
||||
}
|
||||
_push(`</div>`);
|
||||
};
|
||||
}
|
||||
});
|
||||
const _sfc_setup$1 = _sfc_main$1.setup;
|
||||
_sfc_main$1.setup = (props, ctx) => {
|
||||
const ssrContext = useSSRContext();
|
||||
(ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("components/SmartLocationInput.vue");
|
||||
return _sfc_setup$1 ? _sfc_setup$1(props, ctx) : void 0;
|
||||
};
|
||||
const __nuxt_component_0 = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-b43e13ca"]]);
|
||||
const _sfc_main = /* @__PURE__ */ defineComponent({
|
||||
__name: "SharedAddressForm",
|
||||
__ssrInlineRender: true,
|
||||
props: {
|
||||
modelValue: { default: () => ({
|
||||
zip: null,
|
||||
city: null,
|
||||
street_name: null,
|
||||
street_type: null,
|
||||
house_number: null,
|
||||
stairwell: null,
|
||||
floor: null,
|
||||
door: null,
|
||||
parcel_id: null,
|
||||
full_address_text: null,
|
||||
latitude: null,
|
||||
longitude: null
|
||||
}) }
|
||||
},
|
||||
emits: ["update:modelValue"],
|
||||
setup(__props, { emit: __emit }) {
|
||||
const props = __props;
|
||||
const emit = __emit;
|
||||
const selectedLocation = computed(() => {
|
||||
var _a, _b;
|
||||
if (((_a = props.modelValue) == null ? void 0 : _a.zip) && ((_b = props.modelValue) == null ? void 0 : _b.city)) {
|
||||
return {
|
||||
id: 0,
|
||||
// We don't have the DB id here, but SmartLocationInput handles this
|
||||
zip_code: props.modelValue.zip,
|
||||
city: props.modelValue.city,
|
||||
country_code: "HU"
|
||||
};
|
||||
}
|
||||
return null;
|
||||
});
|
||||
function onLocationSelected(location) {
|
||||
if (location) {
|
||||
const updated = { ...props.modelValue };
|
||||
updated.zip = location.zip_code;
|
||||
updated.city = location.city;
|
||||
emit("update:modelValue", updated);
|
||||
}
|
||||
}
|
||||
return (_ctx, _push, _parent, _attrs) => {
|
||||
const _component_SmartLocationInput = __nuxt_component_0;
|
||||
_push(`<div${ssrRenderAttrs(_attrs)}><div class="bg-slate-800 rounded-xl border border-slate-700 p-6 mb-6"><h2 class="text-lg font-semibold text-white mb-4">C\xEDm adatok</h2><div class="grid grid-cols-1 md:grid-cols-2 gap-4"><div class="md:col-span-2">`);
|
||||
_push(ssrRenderComponent(_component_SmartLocationInput, {
|
||||
"model-value": selectedLocation.value,
|
||||
"onUpdate:modelValue": onLocationSelected,
|
||||
label: "Ir\xE1ny\xEDt\xF3sz\xE1m / V\xE1ros",
|
||||
placeholder: "Kezdj el g\xE9pelni (pl. 1011 vagy Budapest)..."
|
||||
}, null, _parent));
|
||||
_push(`<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-3"><div><label class="block text-xs font-medium text-slate-400 mb-1">Ir\xE1ny\xEDt\xF3sz\xE1m (k\xE9zi)</label><input${ssrRenderAttr("value", __props.modelValue.zip)} placeholder="pl. 1151" class="w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-lg text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500 text-sm"></div><div><label class="block text-xs font-medium text-slate-400 mb-1">V\xE1ros (k\xE9zi)</label><input${ssrRenderAttr("value", __props.modelValue.city)} placeholder="pl. Budapest" class="w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-lg text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500 text-sm"></div></div></div><div><label class="block text-sm font-medium text-slate-300 mb-1">Utca neve</label><input${ssrRenderAttr("value", __props.modelValue.street_name)} placeholder="pl. Egressy" class="w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-lg text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500 text-sm"></div><div><label class="block text-sm font-medium text-slate-300 mb-1">K\xF6zter\xFClet jellege</label><select${ssrRenderAttr("value", __props.modelValue.street_type)} class="w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500 text-sm"><option value="">V\xE1lassz...</option><option value="utca">utca</option><option value="\xFAt">\xFAt</option><option value="t\xE9r">t\xE9r</option><option value="k\xF6r\xFAt">k\xF6r\xFAt</option><option value="sug\xE1r\xFAt">sug\xE1r\xFAt</option><option value="k\xF6z">k\xF6z</option><option value="s\xE9t\xE1ny">s\xE9t\xE1ny</option><option value="lak\xF3park">lak\xF3park</option><option value="liget">liget</option><option value="erd\u0151">erd\u0151</option><option value="d\u0171l\u0151">d\u0171l\u0151</option><option value="major">major</option><option value="puszta">puszta</option><option value="sziget">sziget</option><option value="telep">telep</option></select></div><div><label class="block text-sm font-medium text-slate-300 mb-1">H\xE1zsz\xE1m</label><input${ssrRenderAttr("value", __props.modelValue.house_number)} placeholder="pl. 4/b" class="w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-lg text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500 text-sm"></div><div><label class="block text-sm font-medium text-slate-300 mb-1">L\xE9pcs\u0151h\xE1z</label><input${ssrRenderAttr("value", __props.modelValue.stairwell)} placeholder="pl. 1" class="w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-lg text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500 text-sm"></div><div><label class="block text-sm font-medium text-slate-300 mb-1">Emelet</label><input${ssrRenderAttr("value", __props.modelValue.floor)} placeholder="pl. 3" class="w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-lg text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500 text-sm"></div><div><label class="block text-sm font-medium text-slate-300 mb-1">Ajt\xF3</label><input${ssrRenderAttr("value", __props.modelValue.door)} placeholder="pl. A" class="w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-lg text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500 text-sm"></div><div><label class="block text-sm font-medium text-slate-300 mb-1">Helyrajzi sz\xE1m (hrsz)</label><input${ssrRenderAttr("value", __props.modelValue.parcel_id)} placeholder="pl. 12345/6" class="w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-lg text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500 text-sm"></div></div></div></div>`);
|
||||
};
|
||||
}
|
||||
});
|
||||
const _sfc_setup = _sfc_main.setup;
|
||||
_sfc_main.setup = (props, ctx) => {
|
||||
const ssrContext = useSSRContext();
|
||||
(ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("components/SharedAddressForm.vue");
|
||||
return _sfc_setup ? _sfc_setup(props, ctx) : void 0;
|
||||
};
|
||||
|
||||
export { _sfc_main as _ };
|
||||
//# sourceMappingURL=SharedAddressForm-rsg7wrlQ.mjs.map
|
||||
Reference in New Issue
Block a user