Add more components + base for history

2024-10-01 15:42:18 +02:00
parent fb4d566007
commit 8f9c83dc2a
38 changed files with 1374 additions and 665 deletions
@@ -0,0 +1,70 @@
+{% load i18n %}
+
+<div>
+    <template v-if="field_type == 'time'">
+        <v-dialog ref="dialog" v-model="modal" :return-value.sync="item[field.value]" persistent width="290px">
+            <template v-slot:activator="{ on, attrs }">
+                <v-text-field
+                    v-model="item[field.value]"
+                    :label="field.text"
+                    :rules="[rules.required]"
+                    prepend-icon="mdi-clock-time-four-outline"
+                    readonly
+                    v-bind="attrs"
+                    v-on="on"
+                ></v-text-field>
+            </template>
+            <v-time-picker v-if="modal" v-model="item[field.value]" full-width format="24hr">
+                <v-spacer></v-spacer>
+                <v-btn text color="primary" @click="modal = false">
+                    {% trans "Cancel" %}
+                </v-btn>
+                <v-btn text color="primary" @click="$refs.dialog.save(item[field.value])">
+                    {% trans "OK" %}
+                </v-btn>
+            </v-time-picker>
+        </v-dialog>
+    </template>
+
+    <template v-else-if="field_type == 'date'">
+        <v-dialog ref="dialog" v-model="modal" :return-value.sync="item[field.value]" persistent width="290px">
+            <template v-slot:activator="{ on, attrs }">
+                <v-text-field
+                    v-model="item[field.value]"
+                    :label="field.text"
+                    :rules="[rules.required]"
+                    prepend-icon="mdi-calendar"
+                    readonly
+                    v-bind="attrs"
+                    v-on="on"
+                ></v-text-field>
+            </template>
+            <v-date-picker v-model="item[field.value]" scrollable>
+                <v-spacer></v-spacer>
+                <v-btn text color="primary" @click="modal = false">
+                    {% trans "Cancel" %}
+                </v-btn>
+                <v-btn text color="primary" @click="$refs.dialog.save(item[field.value])">
+                    {% trans "OK" %}
+                </v-btn>
+            </v-date-picker>
+        </v-dialog>
+    </template>
+
+    <template v-else-if="field_type == 'date'">
+        TODO both ...
+    </template>
+
+    <template v-else-if="field_type == 'uuid'">
+        <v-text-field ref="test" v-model="item[field.value]" :label="field.text" :rules="[rules.required, rules.uuid]"></v-text-field>
+    </template>
+
+    <template v-else-if="field_type == 'ipv4'">
+        <v-text-field v-model="item[field.value]" :label="field.text" is="v-text-field" :rules="[rules.required, rules.ipv4]"></v-text-field>
+    </template>
+
+    <template v-else>
+        <component v-model="item[field.value]" :label="field.text" is="v-text-field" :rules="[rules.required]"></component>
+    </template>
+
+</div>
@@ -0,0 +1,47 @@
+DynField = {
+    template: "#DynField",
+    router_path: "/",
+    delimiters: ["[[", "]]"],
+    props: {
+        field: {
+            default: null,
+        },
+        item: {
+            default: function() {
+                return {}
+            },
+        }
+    },
+
+    data: function() {
+        return {
+            test: null,
+            modal: null,
+            rules: {
+                required: value => !!value || "{{_('Required') | escapejs}}",
+                email: value => {
+                    const pattern = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
+                    return pattern.test(value) || "{{_('Invalid E-mail') | escapejs}}"
+                },
+                uuid: value => {
+                    const pattern = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/
+                    return pattern.test(value) || "{{_('Invalid UUID') | escapejs}}"
+                },
+                ipv4: value => {
+                    const pattern = /^((25[0-5]|(2[0-4]|1\d|[1-9]|)\d)\.?\b){4}$/
+                    return pattern.test(value) || "{{_('Invalid IPv4') | escapejs}}"
+                },
+            },
+        }
+    },
+
+    computed: {
+        field_type: function() {
+            if (this.item?.property?.type == undefined) {
+                return "v-textarea"
+            }
+
+            return this.item?.property?.type
+        },
+    }
+}