tabshift/pocketbase
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

merge newui branch

Browse Source
This commit is contained in:
Gani Georgiev
2026-04-18 16:29:34 +03:00
parent 58f605e90c
commit 4c44044c0c
804 changed files with 58660 additions and 56663 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/src/fields/geoPoint/init.js
+19
View File
@@ -0,0 +1,19 @@
import { input } from "./input";
import { settings } from "./settings";
import { view } from "./view";
window.app = window.app || {};
window.app.fieldTypes = window.app.fieldTypes || {};
window.app.fieldTypes.geoPoint = {
icon: "ri-map-pin-2-line",
label: "Geo Point",
settings,
input,
view,
identifierExtractor: function(field, prefix = "") {
return [prefix + field.name + ".lon", prefix + field.name + ".lat"];
},
dummyData: (f, forSubmit = false) => {
return { lon: 0, lat: 0 };
},
};
ui/src/fields/geoPoint/input.js
+105
View File
@@ -0,0 +1,105 @@
// {
// get collection: undefined,
// get originalRecord: undefined,
// get record: undefined,
// get field: undefined,
// }
export function input(data) {
const uniqueId = "geo_" + app.utils.randomString();
const local = store({
showMap: false,
});
return t.div(
{ className: "record-field-input field-type-geoPoint" },
t.div(
{ className: () => `field-list ${data.field.required ? "required" : ""}` },
t.label(
{ htmlFor: uniqueId },
t.i({ className: app.fieldTypes.geoPoint.icon }),
t.span({ className: "txt" }, () => data.field.name),
),
t.div(
{ className: "field-list-content" },
t.div(
{ className: "field-list-item p-0" },
t.div(
{ className: "fields" },
t.div({ className: "field addon" }, t.label({ htmlFor: uniqueId + ".lon" }, "Longitude:")),
t.div(
{ className: "field" },
t.input({
id: uniqueId + ".lon",
type: "number",
step: "any",
min: "-180",
max: "180",
placeholder: 0,
name: () => data.field.name,
required: () => data.field.required,
value: () => data.record[data.field.name]?.lon || "",
onchange: (e) => {
data.record[data.field.name] = data.record[data.field.name] || {};
data.record[data.field.name].lon = Number(e.target.value);
},
}),
),
t.span({ className: "delimiter" }),
t.div({ className: "field addon" }, t.label({ htmlFor: uniqueId + ".lat" }, "Latitude:")),
t.div(
{ className: "field" },
t.input({
id: uniqueId + ".lat",
type: "number",
step: "any",
min: "-90",
max: "90",
placeholder: 0,
name: () => data.field.name,
required: () => data.field.required,
value: () => data.record[data.field.name]?.lat || "",
onchange: (e) => {
data.record[data.field.name] = data.record[data.field.name] || {};
data.record[data.field.name].lat = Number(e.target.value);
},
}),
),
t.span({ className: "delimiter" }),
t.div(
{ className: "field addon p-5" },
t.button(
{
type: "button",
className: () => `btn sm circle secondary ${local.showMap ? "" : "transparent"}`,
onclick: () => (local.showMap = !local.showMap),
},
t.i({ className: "ri-map-2-line" }),
),
),
),
),
() => {
if (!local.showMap) {
return;
}
return t.div(
{ className: "field-list-item p-0", style: "height: 250px" },
app.components.leaflet({
point: () => data.record[data.field.name] || { lat: 0, lon: 0 },
onchange: (newPoint) => {
data.record[data.field.name] = structuredClone(newPoint);
},
}),
);
},
),
),
() => {
if (data.field.help) {
return t.div({ className: "field-help" }, data.field.help);
}
},
);
}
ui/src/fields/geoPoint/settings.js
+53
View File
@@ -0,0 +1,53 @@
// {
// originalCollection: undefined,
// collection: undefined,
// field
// get fieldIndex: int/-1,
// get originalField: undefined
// }
export function settings(data) {
const uniqueId = "f_" + app.utils.randomString();
return app.components.fieldSettings(data, {
content: () =>
t.div(
{ className: "grid sm" },
t.div(
{ className: "col-sm-12" },
t.div(
{ className: "field" },
t.label({ htmlFor: uniqueId + ".help" }, "Help text"),
t.input({
type: "text",
id: uniqueId + ".help",
name: () => `fields.${data.fieldIndex}.help`,
value: () => data.field.help || "",
oninput: (e) => (data.field.help = e.target.value),
}),
),
),
),
footer: () => [
t.div(
{ className: "field" },
t.input({
className: "sm",
type: "checkbox",
id: uniqueId + ".required",
name: () => `fields.${data.fieldIndex}.required`,
checked: () => !!data.field.required,
onchange: (e) => (data.field.required = e.target.checked),
}),
t.label(
{ htmlFor: uniqueId + ".required" },
t.span({ className: "txt" }, "Required"),
t.small({ className: "txt-hint" }, "(=true)"),
t.i({
className: "ri-information-line link-hint",
ariaDescription: app.attrs.tooltip("Requires the field value to be true."),
}),
),
),
],
});
}
ui/src/fields/geoPoint/view.js
+14
View File
@@ -0,0 +1,14 @@
// {
// record: undefined,
// field: undefined,
// short: false,
// }
export function view(data) {
return t.div(
{ className: "record-field-view field-type-geoPoint" },
t.span({ className: "label" }, () => {
const coords = data.record[data.field.name];
return `${coords?.lon || 0}, ${coords?.lat || 0}`;
}),
);
}