Add more components + base for history

k356/app/settings.py

@@ -75,6 +75,7 @@ BOWER_INSTALLED_APPS = [
     "https://cdn.jsdelivr.net/npm/sweetalert2",
     "https://cdn.jsdelivr.net/npm/vue-resource",
     "https://unpkg.com/vuex@3.6.2/dist/vuex.js",
+    "vuex-extensions=https://unpkg.com/vuex-extensions@4.1.0/lib/index.js",
     "https://cdn.jsdelivr.net/npm/js-cookie@3.0.5/dist/js.cookie.min.js",
     "https://unpkg.com/vue-router@3/dist/vue-router.js",
     "https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css",

k356/app/utils/api/api_list.py

@@ -13,5 +13,6 @@ def header_for_table(model):
             "text": "Actions",
             "value": "actions",
             "sortable": False,
+            "details": False,
         },
     ]

k356/app/utils/models.py

@@ -25,6 +25,8 @@ class BaseQuerySet(models.QuerySet):
                     "editable": field.name not in self.model.Serialization.excluded_fields_edit,
                     "field_widget": "v-textarea",
                     "choices": None,
+                    "details": True,
+                    "dynamic_field_type": field.name in self.model.Serialization.dynamic_field_type,
                 }
             }
 
@@ -48,7 +50,6 @@ class BaseQuerySet(models.QuerySet):
 
             if field.choices:
                 ret[field.name].update(
-                    text="",
                     field_widget="v-select",
                     choices=[
                         {
@@ -92,6 +93,7 @@ class BaseModel(models.Model):
         # Exclude fields from serialization
         excluded_fields = []
         excluded_fields_edit = ["id", "created_at", "last_modified_at"]
+        dynamic_field_type = []
 
     class Encryption:
         fields = ["name", "description", "custom_identifier"]

k356/items/migrations/0005_alter_property_type.py

@@ -0,0 +1,36 @@
+# Generated by Django 5.1.1 on 2024-09-30 19:33
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("items", "0004_alter_property_type"),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name="property",
+            name="type",
+            field=models.CharField(
+                choices=[
+                    ("text", "Text"),
+                    ("date", "Date"),
+                    ("datetime", "Date & time"),
+                    ("time", "Time"),
+                    ("duration", "Duration"),
+                    ("uuid", "UUID"),
+                    ("number", "Number"),
+                    ("float", "Float"),
+                    ("boolean", "Boolean"),
+                    ("email", "Email"),
+                    ("ipv4", "IPv4 address"),
+                    ("ipv6", "IPv6 address"),
+                    ("json", "JSON"),
+                ],
+                default="text",
+                max_length=32,
+            ),
+        ),
+    ]

k356/items/migrations/0006_historicalitem_historicalitemrelation_and_more.py

@@ -0,0 +1,325 @@
+# Generated by Django 5.1.1 on 2024-10-01 13:41
+
+import django.db.models.deletion
+import simple_history.models
+import uuid
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("items", "0005_alter_property_type"),
+        ("users", "0006_historicalusersettings"),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name="HistoricalItem",
+            fields=[
+                ("id", models.UUIDField(db_index=True, default=uuid.uuid4, editable=False)),
+                ("custom_identifier", models.TextField(blank=True, max_length=2048, null=True)),
+                ("created_at", models.DateTimeField(blank=True, editable=False)),
+                ("last_modified_at", models.DateTimeField(blank=True, editable=False)),
+                ("name", models.TextField(max_length=2048)),
+                ("description", models.TextField(max_length=2048)),
+                ("history_id", models.AutoField(primary_key=True, serialize=False)),
+                ("history_date", models.DateTimeField(db_index=True)),
+                ("history_change_reason", models.CharField(max_length=100, null=True)),
+                ("history_type", models.CharField(choices=[("+", "Created"), ("~", "Changed"), ("-", "Deleted")], max_length=1)),
+                (
+                    "author",
+                    models.ForeignKey(
+                        blank=True,
+                        db_constraint=False,
+                        null=True,
+                        on_delete=django.db.models.deletion.DO_NOTHING,
+                        related_name="+",
+                        to="users.usersettings",
+                    ),
+                ),
+                (
+                    "history_user",
+                    models.ForeignKey(null=True, on_delete=django.db.models.deletion.SET_NULL, related_name="+", to="users.usersettings"),
+                ),
+                (
+                    "type",
+                    models.ForeignKey(
+                        blank=True,
+                        db_constraint=False,
+                        null=True,
+                        on_delete=django.db.models.deletion.DO_NOTHING,
+                        related_name="+",
+                        to="items.itemtype",
+                    ),
+                ),
+            ],
+            options={
+                "verbose_name": "historical item",
+                "verbose_name_plural": "historical items",
+                "ordering": ("-history_date", "-history_id"),
+                "get_latest_by": ("history_date", "history_id"),
+            },
+            bases=(simple_history.models.HistoricalChanges, models.Model),
+        ),
+        migrations.CreateModel(
+            name="HistoricalItemRelation",
+            fields=[
+                ("id", models.UUIDField(db_index=True, default=uuid.uuid4, editable=False)),
+                ("name", models.TextField(blank=True, max_length=2048, null=True)),
+                ("description", models.TextField(blank=True, max_length=2048, null=True)),
+                ("custom_identifier", models.TextField(blank=True, max_length=2048, null=True)),
+                ("created_at", models.DateTimeField(blank=True, editable=False)),
+                ("last_modified_at", models.DateTimeField(blank=True, editable=False)),
+                ("history_id", models.AutoField(primary_key=True, serialize=False)),
+                ("history_date", models.DateTimeField(db_index=True)),
+                ("history_change_reason", models.CharField(max_length=100, null=True)),
+                ("history_type", models.CharField(choices=[("+", "Created"), ("~", "Changed"), ("-", "Deleted")], max_length=1)),
+                (
+                    "author",
+                    models.ForeignKey(
+                        blank=True,
+                        db_constraint=False,
+                        null=True,
+                        on_delete=django.db.models.deletion.DO_NOTHING,
+                        related_name="+",
+                        to="users.usersettings",
+                    ),
+                ),
+                (
+                    "child",
+                    models.ForeignKey(
+                        blank=True, db_constraint=False, null=True, on_delete=django.db.models.deletion.DO_NOTHING, related_name="+", to="items.item"
+                    ),
+                ),
+                (
+                    "history_user",
+                    models.ForeignKey(null=True, on_delete=django.db.models.deletion.SET_NULL, related_name="+", to="users.usersettings"),
+                ),
+                (
+                    "parent",
+                    models.ForeignKey(
+                        blank=True, db_constraint=False, null=True, on_delete=django.db.models.deletion.DO_NOTHING, related_name="+", to="items.item"
+                    ),
+                ),
+            ],
+            options={
+                "verbose_name": "historical item relation",
+                "verbose_name_plural": "historical item relations",
+                "ordering": ("-history_date", "-history_id"),
+                "get_latest_by": ("history_date", "history_id"),
+            },
+            bases=(simple_history.models.HistoricalChanges, models.Model),
+        ),
+        migrations.CreateModel(
+            name="HistoricalItemType",
+            fields=[
+                ("id", models.UUIDField(db_index=True, default=uuid.uuid4, editable=False)),
+                ("name", models.TextField(blank=True, max_length=2048, null=True)),
+                ("description", models.TextField(blank=True, max_length=2048, null=True)),
+                ("custom_identifier", models.TextField(blank=True, max_length=2048, null=True)),
+                ("created_at", models.DateTimeField(blank=True, editable=False)),
+                ("last_modified_at", models.DateTimeField(blank=True, editable=False)),
+                ("history_id", models.AutoField(primary_key=True, serialize=False)),
+                ("history_date", models.DateTimeField(db_index=True)),
+                ("history_change_reason", models.CharField(max_length=100, null=True)),
+                ("history_type", models.CharField(choices=[("+", "Created"), ("~", "Changed"), ("-", "Deleted")], max_length=1)),
+                (
+                    "author",
+                    models.ForeignKey(
+                        blank=True,
+                        db_constraint=False,
+                        null=True,
+                        on_delete=django.db.models.deletion.DO_NOTHING,
+                        related_name="+",
+                        to="users.usersettings",
+                    ),
+                ),
+                (
+                    "history_user",
+                    models.ForeignKey(null=True, on_delete=django.db.models.deletion.SET_NULL, related_name="+", to="users.usersettings"),
+                ),
+            ],
+            options={
+                "verbose_name": "historical item type",
+                "verbose_name_plural": "historical item types",
+                "ordering": ("-history_date", "-history_id"),
+                "get_latest_by": ("history_date", "history_id"),
+            },
+            bases=(simple_history.models.HistoricalChanges, models.Model),
+        ),
+        migrations.CreateModel(
+            name="HistoricalLinkedProperty",
+            fields=[
+                ("id", models.UUIDField(db_index=True, default=uuid.uuid4, editable=False)),
+                ("name", models.TextField(blank=True, max_length=2048, null=True)),
+                ("description", models.TextField(blank=True, max_length=2048, null=True)),
+                ("custom_identifier", models.TextField(blank=True, max_length=2048, null=True)),
+                ("created_at", models.DateTimeField(blank=True, editable=False)),
+                ("last_modified_at", models.DateTimeField(blank=True, editable=False)),
+                ("value", models.TextField(max_length=2048)),
+                ("history_id", models.AutoField(primary_key=True, serialize=False)),
+                ("history_date", models.DateTimeField(db_index=True)),
+                ("history_change_reason", models.CharField(max_length=100, null=True)),
+                ("history_type", models.CharField(choices=[("+", "Created"), ("~", "Changed"), ("-", "Deleted")], max_length=1)),
+                (
+                    "author",
+                    models.ForeignKey(
+                        blank=True,
+                        db_constraint=False,
+                        null=True,
+                        on_delete=django.db.models.deletion.DO_NOTHING,
+                        related_name="+",
+                        to="users.usersettings",
+                    ),
+                ),
+                (
+                    "history_user",
+                    models.ForeignKey(null=True, on_delete=django.db.models.deletion.SET_NULL, related_name="+", to="users.usersettings"),
+                ),
+                (
+                    "item",
+                    models.ForeignKey(
+                        blank=True, db_constraint=False, null=True, on_delete=django.db.models.deletion.DO_NOTHING, related_name="+", to="items.item"
+                    ),
+                ),
+                (
+                    "property",
+                    models.ForeignKey(
+                        blank=True,
+                        db_constraint=False,
+                        null=True,
+                        on_delete=django.db.models.deletion.DO_NOTHING,
+                        related_name="+",
+                        to="items.property",
+                    ),
+                ),
+            ],
+            options={
+                "verbose_name": "historical linked property",
+                "verbose_name_plural": "historical linked propertys",
+                "ordering": ("-history_date", "-history_id"),
+                "get_latest_by": ("history_date", "history_id"),
+            },
+            bases=(simple_history.models.HistoricalChanges, models.Model),
+        ),
+        migrations.CreateModel(
+            name="HistoricalProperty",
+            fields=[
+                ("id", models.UUIDField(db_index=True, default=uuid.uuid4, editable=False)),
+                ("name", models.TextField(blank=True, max_length=2048, null=True)),
+                ("description", models.TextField(blank=True, max_length=2048, null=True)),
+                ("custom_identifier", models.TextField(blank=True, max_length=2048, null=True)),
+                ("created_at", models.DateTimeField(blank=True, editable=False)),
+                ("last_modified_at", models.DateTimeField(blank=True, editable=False)),
+                (
+                    "type",
+                    models.CharField(
+                        choices=[
+                            ("text", "Text"),
+                            ("date", "Date"),
+                            ("datetime", "Date & time"),
+                            ("time", "Time"),
+                            ("duration", "Duration"),
+                            ("uuid", "UUID"),
+                            ("number", "Number"),
+                            ("float", "Float"),
+                            ("boolean", "Boolean"),
+                            ("email", "Email"),
+                            ("ipv4", "IPv4 address"),
+                            ("ipv6", "IPv6 address"),
+                            ("json", "JSON"),
+                        ],
+                        default="text",
+                        max_length=32,
+                    ),
+                ),
+                ("history_id", models.AutoField(primary_key=True, serialize=False)),
+                ("history_date", models.DateTimeField(db_index=True)),
+                ("history_change_reason", models.CharField(max_length=100, null=True)),
+                ("history_type", models.CharField(choices=[("+", "Created"), ("~", "Changed"), ("-", "Deleted")], max_length=1)),
+                (
+                    "author",
+                    models.ForeignKey(
+                        blank=True,
+                        db_constraint=False,
+                        null=True,
+                        on_delete=django.db.models.deletion.DO_NOTHING,
+                        related_name="+",
+                        to="users.usersettings",
+                    ),
+                ),
+                (
+                    "history_user",
+                    models.ForeignKey(null=True, on_delete=django.db.models.deletion.SET_NULL, related_name="+", to="users.usersettings"),
+                ),
+            ],
+            options={
+                "verbose_name": "historical property",
+                "verbose_name_plural": "historical propertys",
+                "ordering": ("-history_date", "-history_id"),
+                "get_latest_by": ("history_date", "history_id"),
+            },
+            bases=(simple_history.models.HistoricalChanges, models.Model),
+        ),
+        migrations.CreateModel(
+            name="HistoricalRelationProperty",
+            fields=[
+                ("id", models.UUIDField(db_index=True, default=uuid.uuid4, editable=False)),
+                ("name", models.TextField(blank=True, max_length=2048, null=True)),
+                ("description", models.TextField(blank=True, max_length=2048, null=True)),
+                ("custom_identifier", models.TextField(blank=True, max_length=2048, null=True)),
+                ("created_at", models.DateTimeField(blank=True, editable=False)),
+                ("last_modified_at", models.DateTimeField(blank=True, editable=False)),
+                ("value", models.TextField(max_length=2048)),
+                ("history_id", models.AutoField(primary_key=True, serialize=False)),
+                ("history_date", models.DateTimeField(db_index=True)),
+                ("history_change_reason", models.CharField(max_length=100, null=True)),
+                ("history_type", models.CharField(choices=[("+", "Created"), ("~", "Changed"), ("-", "Deleted")], max_length=1)),
+                (
+                    "author",
+                    models.ForeignKey(
+                        blank=True,
+                        db_constraint=False,
+                        null=True,
+                        on_delete=django.db.models.deletion.DO_NOTHING,
+                        related_name="+",
+                        to="users.usersettings",
+                    ),
+                ),
+                (
+                    "history_user",
+                    models.ForeignKey(null=True, on_delete=django.db.models.deletion.SET_NULL, related_name="+", to="users.usersettings"),
+                ),
+                (
+                    "property",
+                    models.ForeignKey(
+                        blank=True,
+                        db_constraint=False,
+                        null=True,
+                        on_delete=django.db.models.deletion.DO_NOTHING,
+                        related_name="+",
+                        to="items.property",
+                    ),
+                ),
+                (
+                    "relation",
+                    models.ForeignKey(
+                        blank=True,
+                        db_constraint=False,
+                        null=True,
+                        on_delete=django.db.models.deletion.DO_NOTHING,
+                        related_name="+",
+                        to="items.itemrelation",
+                    ),
+                ),
+            ],
+            options={
+                "verbose_name": "historical relation property",
+                "verbose_name_plural": "historical relation propertys",
+                "ordering": ("-history_date", "-history_id"),
+                "get_latest_by": ("history_date", "history_id"),
+            },
+            bases=(simple_history.models.HistoricalChanges, models.Model),
+        ),
+    ]

k356/items/models.py

@@ -6,6 +6,9 @@ from app.utils.models import BaseModel
 from users.models import UserSettings
 
 
+from simple_history.models import HistoricalRecords
+
+
 class ItemBase(BaseModel):
     class Meta:
         abstract = True
@@ -15,6 +18,15 @@ class ItemBase(BaseModel):
         excluded_fields_edit = BaseModel.Serialization.excluded_fields_edit + ["author"]
 
     author = models.ForeignKey(UserSettings, on_delete=models.PROTECT)
+    history = HistoricalRecords(inherit=True, user_model=UserSettings)
+
+    @property
+    def _history_user(self):
+        return self.author
+
+    @_history_user.setter
+    def _history_user(self, value):
+        self.author = value
 
 
 class ItemType(ItemBase):
@@ -56,7 +68,8 @@ class PropertyType(models.TextChoices):
     FLOAT = "float", _("Float")
     BOOLEAN = "boolean", _("Boolean")
     EMAIL = "email", _("Email")
-    IP = "ip", _("IP address")
+    IPV4 = "ipv4", _("IPv4 address")
+    IPV6 = "ipv6", _("IPv6 address")
     JSON = "json", _("JSON")
 
     # TODO: Add more property types (location, etc)
@@ -70,6 +83,12 @@ class BaseLinkedProperty(ItemBase):
     class Meta:
         abstract = True
 
+    class Serialization(ItemBase.Serialization):
+        dynamic_field_type = ItemBase.Serialization.dynamic_field_type + ["value"]
+
+    class Encryption(ItemBase.Encryption):
+        fields = ItemBase.Encryption.fields + ["value"]
+
     property = models.ForeignKey(Property, on_delete=models.CASCADE)
 
     # Value is encrypted too

k356/items/templates/components/DynField/template.html

@@ -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>

k356/items/templates/components/DynField/vue.js

@@ -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
+        },
+    }
+}

k356/items/templates/components/ItemDetail/template.html

@@ -2,18 +2,40 @@
 
 <div>
     <div class="card mt-4 pt-2 ps-lg-2">
-        <h5 class="card-header">{% trans "Properties" %} [[ this.$route.params.id ]]</h5>
+        <h5 class="card-header">{% trans "Item" %} [[ this.$route.params.id ]]</h5>
         <div class="card-body">
-            <PropertyList
+
-                :items="properties"
+            <v-container fluid v-if="object">
-                :items_headers="properties_headers"
+                <template v-for="field in headers">
-                :items_relations="{}"
+                    <v-row v-if="field.details">
-                :hidden_fields="[]"
+                        <v-col cols="4">
+                            <v-subheader>[[ field.text ]]</v-subheader>
+                        </v-col>
+                        <v-col cols="8">
+                            <v-text-field :value="object[field.value]" readonly dense></v-text-field>
+                        </v-col>
+                    </v-row>
+                </template>
+            </v-container>
+
+        </div>
+    </div>
+
+    <div class="card mt-4 pt-2 ps-lg-2">
+        <h5 class="card-header">{% trans "Properties" %}</h5>
+        <div class="card-body">
+            <LinkedPropertyList
+                :items="linked_properties"
+                :items_headers="linked_properties_headers"
+                :items_relations="{'property': all_properties}"
+                :hidden_fields="['name', 'description', 'custom_identifier']"
+                :non_editable_fields="['item']"
+                show_item="property"
                 group_by="type"
-                @deleteItem="deleteItem"
+                @deleteItem="deleteLinkedProperty"
-                @createItem="createItem"
+                @createItem="createLinkedProperty"
-                @editItem="editItem"
+                @editItem="editLinkedProperty"
-            ></PropertyList>
+            ></LinkedPropertyList>
         </div>
     </div>
 
@@ -23,12 +45,12 @@
             <ItemRelationList
                 :items="children"
                 :items_headers="children_headers"
-                :items_relations="{}"
                 :hidden_fields="['parent__name']"
+                :items_relations="{'parent': [object], 'child': all_items}"
                 group_by="type__name"
-                @deleteItem="deleteItem"
+                @deleteItem="deleteRelation"
-                @createItem="createItem"
+                @createItem="createRelation"
-                @editItem="editItem"
+                @editItem="editRelation"
             ></ItemRelationList>
         </div>
     </div>
@@ -38,13 +60,13 @@
         <div class="card-body">
             <ItemRelationList
                 :items="parents"
-                :items_headers="parents_headers"
+                :items_headers="children_headers"
-                :items_relations="{}"
                 :hidden_fields="['child__name']"
+                :items_relations="{'child': [object], 'parent': all_items}"
                 group_by="type__name"
-                @deleteItem="deleteItem"
+                @deleteItem="deleteRelation"
-                @createItem="createItem"
+                @createItem="createRelation"
-                @editItem="editItem"
+                @editItem="editRelation"
             ></ItemRelationList>
         </div>
     </div>

k356/items/templates/components/ItemDetail/vue.js

@@ -3,95 +3,109 @@ ItemDetail = {
     router_path: "/ItemDetail/:id",
     delimiters: ["[[", "]]"],
 
-    data: function() {
-        return {
-            properties: [],
-            linked_properties: [],
-            children: [],
-            parents: [],
-            // TODO: Also remove this tedious things
-            properties_headers: [],
-            linked_properties_headers: [],
-            children_headers: [],
-            parents_headers: [],
-        }
-    },
-
     computed: {
-        // TODO: Remove this by a generic things at some points, this become tedious and repetitive
+        object: function() {
-        properties_efields: function() {
+            return this.$store.state.items.items.find(i => i.id == this.$route.params.id)
-            return this.properties_headers.filter(e => e.encrypted).map(e => e.value)
         },
 
-        linked_properties_efields: function() {
+        linked_properties: function() {
-            return this.linked_properties_headers.filter(e => e.encrypted).map(e => e.value)
+            return this.$store.state.linkedProperties.items.filter(lp => lp.item == this.$route.params.id)
         },
 
-        children_efields: function() {
+        linked_properties_headers: function() {
-            return this.children_headers.filter(e => e.encrypted).map(e => e.value)
+            return this.$store.state.linkedProperties.headers
         },
 
-        parents_efields: function() {
+        properties: function() {
-            return this.parents_headers.filter(e => e.encrypted).map(e => e.value)
+            return this.$store.state.properties.items.filter(p => this.linked_properties.map(e => e.property).includes(p.id))
-        },
         },
 
-    mounted: function() {
+        properties_headers: function() {
+            return this.$store.state.properties.headers
+        },
 
-        this.reload()
+        children: function() {
+            return this.$store.state.relations.items.filter(p => p.parent == this.$route.params.id)
+        },
 
+        parents: function() {
+            return this.$store.state.relations.items.filter(p => p.child == this.$route.params.id)
+        },
+
+        children_headers: function() {
+            return this.$store.state.relations.headers
+        },
+
+        headers: function() {
+            return this.$store.state.items.headers
+        },
+
+        all_items: function() {
+            return this.$store.state.items.items
+        },
+
+        all_properties: function() {
+            return this.$store.state.properties.items
+        },
     },
 
     methods: {
 
-        async reload () {
+        linkedPropertyEdition (method, item) {
+            return this.object_edit("items:linked.property.edit", "items:linked.property.create", 'linkedProperties', method, item)
+        },
 
-            try {
+        relationPropertiesEdition (method, item) {
+            return this.object_edit("items:relation.property.edit", "items:relation.property.create", 'relationProperties', method, item)
+        },
 
-                const response = await this.$http.get(Urls["items:details"](this.$route.params.id))
+        relationEdition (method, item) {
+            return this.object_edit("items:relation.edit", "items:relation.create", 'relations', method, item)
+        },
 
-                this.properties_headers = response.data.properties_headers
+        async deleteLinkedProperty (item) {
-                this.linked_properties_headers = response.data.linked_properties_headers
+            await this.linkedPropertyEdition("delete", item)
-                this.children_headers = response.data.children_headers
+            this.$store.commit("linkedProperties/removeItem", item.id)
-                this.parents_headers = response.data.parents_headers
+        },
 
-                // TODO: TEDIOUUUUUS
+        async createLinkedProperty (item) {
-                response.data.parents.forEach(async e => {
+            item.item = this.$route.params.id
-                    this.parents.push(await this.decryptObject(this.parents_efields, e))
+            const new_item = await this.linkedPropertyEdition("post", item)
-                })
+            this.$store.commit("linkedProperties/addItem", new_item)
+        },
 
-                response.data.children.forEach(async e => {
+        async editLinkedProperty (item) {
-                    this.children.push(await this.decryptObject(this.children_efields, e))
+            item.item = this.$route.params.id
-                })
+            const new_item = await this.linkedPropertyEdition("post", item)
+            this.$store.commit("linkedProperties/editItem", new_item)
+        },
 
-                response.data.properties.forEach(async e => {
+        async deleteProperty (item) {
-                    this.properties.push(await this.decryptObject(this.properties_efields, e))
+            console.log(item)
-                })
+        },
 
-                response.data.linked_properties.forEach(async e => {
+        async createProperty (item) {
-                    this.linked_properties.push(await this.decryptObject(this.linked_properties_efields, e))
+            console.log(item)
-                })
+        },
 
-            } catch (err) {
+        async editProperty (item) {
+            console.log(item)
+        },
 
-                Swal.fire({title: "{{_('Error during loading of items') | escapejs}}", icon: "error", position:"top-end", showConfirmButton: false, toast: true, timer: 1000})
+        async deleteRelation (item) {
+            await this.relationEdition("delete", item)
+            this.$store.commit("relations/removeItem", item.id)
+        },
 
-                throw err
+        async createRelation (item) {
+            const new_item = await this.relationEdition("post", item)
+            this.$store.commit("relations/addItem", new_item)
+        },
+
+        async editRelation (item) {
+            const new_item = await this.relationEdition("post", item)
+            this.$store.commit("relations/editItem", new_item)
+        },
 
     }
-
-        },
-
-        async deleteItem () {
-
-        },
-
-        async createItem () {
-
-        },
-
-        async editItem() {
-
-        },
-    }
 }

k356/items/templates/components/ItemRelationDetail/template.html

@@ -1 +1,55 @@
-<div>[[ this.$route.params.id ]]</div>
+{% load i18n %}
+
+<div>
+    <div class="card mt-4 pt-2 ps-lg-2">
+        <h5 class="card-header">{% trans "Relation" %} [[ this.$route.params.id ]]</h5>
+        <div class="card-body">
+
+            <v-container fluid v-if="object">
+                <template v-for="field in headers">
+                    <v-row v-if="field.details">
+                        <v-col cols="4">
+                            <v-subheader>[[ field.text ]]</v-subheader>
+                        </v-col>
+                        <template v-if="field.value == 'parent' || field.value == 'child'">
+                            <v-col cols="7">
+                                <v-text-field :value="object[field.value]" readonly dense></v-text-field>
+                            </v-col>
+                            <v-col cols="1">
+                                <v-btn color="primary" dark class="mb-2" @click="showItem(object[field.value])">
+                                    <v-icon small class="mr-2">mdi-eye</v-icon>
+                                    {% trans "Link" %}
+                                </v-btn>
+                            </v-col>
+                        </template>
+
+                        <template v-else>
+                            <v-col cols="8">
+                                <v-text-field :value="object[field.value]" readonly dense></v-text-field>
+                            </v-col>
+                        </template>
+                    </v-row>
+                </template>
+            </v-container>
+
+        </div>
+    </div>
+
+    <div class="card mt-4 pt-2 ps-lg-2">
+        <h5 class="card-header">{% trans "Properties" %}</h5>
+        <div class="card-body">
+            <RelationPropertyList
+                :items="relation_properties"
+                :items_headers="relation_properties_headers"
+                :items_relations="{'property': all_properties}"
+                :hidden_fields="['name', 'description', 'custom_identifier', 'relation__name']"
+                :non_editable_fields="['relation']"
+                show_item="property"
+                show_url="PropertyDetail"
+                @deleteItem="deleteRelationProperty"
+                @createItem="createRelationProperty"
+                @editItem="editRelationProperty"
+            ></RelationPropertyList>
+        </div>
+    </div>
+</div>

k356/items/templates/components/ItemRelationDetail/vue.js

@@ -3,24 +3,55 @@ ItemRelationDetail = {
     router_path: "/ItemRelationDetail/:id",
     delimiters: ["[[", "]]"],
 
-    data: function() {
+    computed: {
-        return {
+        object: function() {
-            data: null
+            return this.$store.state.relations.items.find(i => i.id == this.$route.params.id)
-        }
         },
 
-    mounted: function() {
+        headers: function() {
+            return this.$store.state.relations.headers
+        },
 
-        this.reload()
+        relation_properties: function() {
+            return this.$store.state.relationProperties.items.filter(i => i.relation == this.$route.params.id)
+        },
 
+        relation_properties_headers: function() {
+            return this.$store.state.relationProperties.headers
+        },
+
+        all_properties: function() {
+            return this.$store.state.properties.items
+        }
     },
 
     methods: {
 
-        async reload () {
+        showItem (id) {
+            this.$router.push({ name: 'ItemDetail', params: { id: id }})
+        },
 
-            const response = await this.$http.get(Urls["items:relation.details"](this.$route.params.id))
+        relationPropertyEdition (method, item) {
+            return this.object_edit("items:relation.property.edit", "items:relation.property.create", 'relationProperties', method, item)
+        },
+
+        async deleteRelationProperty (item) {
+            await this.relationPropertyEdition("delete", item)
+            this.$store.commit("relationProperties/removeItem", item.id)
+        },
+
+        async createRelationProperty (item) {
+            item.relation = this.$route.params.id
+            const new_item = await this.relationPropertyEdition("post", item)
+            this.$store.commit("relationProperties/addItem", new_item)
+        },
+
+        async editRelationProperty (item) {
+            item.relation = this.$route.params.id
+            const new_item = await this.relationPropertyEdition("post", item)
+            this.$store.commit("relationProperties/editItem", new_item)
+        },
 
     }
-    }
+
 }

k356/items/templates/components/ItemView/template.html

@@ -9,7 +9,6 @@
                 :items="items"
                 :items_headers="items_headers"
                 :items_relations="{'type': types}"
-                :hidden_fields="[]"
                 group_by="type__name"
                 @deleteItem="deleteItem"
                 @createItem="createItem"
@@ -26,8 +25,6 @@
             <ItemList
                 :items="types"
                 :items_headers="types_headers"
-                :items_relations="{}"
-                :hidden_fields="[]"
                 group_by="[]"
                 @deleteItem="deleteType"
                 @createItem="createType"

k356/items/templates/components/ItemView/vue.js

@@ -4,213 +4,53 @@ ItemView = {
     delimiters: ["[[", "]]"],
     props: [],
 
-    data: function() {
-        return {
-            items: [],
-            items_headers: [],
-            types: [],
-            types_headers: [],
-        }
-    },
-
-    mounted: function() {
-        this.reload()
-    },
-
     computed: {
-        items_efields: function() {
+        ...Vuex.mapState({
-            return this.items_headers.filter(e => e.encrypted).map(e => e.value)
+            items: state => state.items.items,
-        },
+            items_headers: state => state.items.headers,
-
+            types: state => state.types.items,
-        types_efields: function() {
+            types_headers: state => state.types.headers,
-            return this.types_headers.filter(e => e.encrypted).map(e => e.value)
+        }),
-        },
     },
 
     methods: {
 
-        async reload () {
-
-            try {
-                const response = await this.$http.get(Urls["items:list"]())
-
-                this.items_headers = response.data.result.items_headers
-                this.types_headers = response.data.result.types_headers
-
-                // Decrypt all item the push
-                response.data.result.items.forEach(async item => {
-                    const new_item = await this.decryptObject(this.items_efields, item)
-
-                    this.items.push(new_item)
-                })
-
-                // Decrypt all type the push
-                response.data.result.types.forEach(async type => {
-                    const new_type = await this.decryptObject(this.types_efields, type)
-
-                    this.types.push(new_type)
-                })
-
-            } catch (err) {
-
-                Swal.fire({title: "{{_('Error during loading of items') | escapejs}}", icon: "error", position:"top-end", showConfirmButton: false, toast: true, timer: 1000})
-
-            }
-
-        },
-
-        async object_edit(url_edit, url_create, encrypted_fields, method, obj) {
-
-            let url = null
-
-            if (obj.id == undefined || obj.id == null) {
-                url = Urls[url_create]()
-            } else {
-                url = Urls[url_edit](obj.id)
-            }
-
-            try {
-
-                const newobj = await this.encryptObject(encrypted_fields, obj)
-                const response = await this.$http[method](url, newobj)
-
-                if (method != "delete") {
-                    return await this.decryptObject(encrypted_fields, response.data.object)
-                }
-
-            } catch (err) {
-
-                let msg = "{{_('Error during edition') | escapejs}}"
-                if (method == "delete") {
-                    msg = "{{_('Error during deletion') | escapejs}}"
-                }
-
-                Swal.fire({title: msg, icon: "error", position:"top-end", showConfirmButton: false, toast: true, timer: 1000})
-
-                throw err
-
-            }
-
-        },
-
         item_edition (method, item) {
-            return this.object_edit("items:edit", "items:create", this.items_efields, method, item)
+            return this.object_edit("items:edit", "items:create", 'items', method, item)
         },
 
         type_edition (method, item) {
-            return this.object_edit("items:type.edit", "items:type.create", this.types_efields, method, item)
+            return this.object_edit("items:type.edit", "items:type.create", 'types', method, item)
         },
 
         async createItem (item) {
-
-            try {
-
             const new_item = await this.item_edition("post", item)
-                this.items.push(new_item)
+            this.$store.commit("items/addItem", new_item)
-
-                Swal.fire({title: "{{_('Item successfully created!') | escapejs}}", icon: "success", position:"top-end", showConfirmButton: false, toast: true, timer: 1000})
-
-            } catch (err) {
-
-            }
-
         },
 
-        async editItem (index, item) {
+        async editItem (item) {
-
-            try {
-
-                // Remove the item
-                this.items.splice(index, 1)
-
             const new_item = await this.item_edition("post", item)
-
+            this.$store.commit("items/editItem", new_item)
-                // Add the new item
-                this.items.push(new_item)
-
-                Swal.fire({title: "{{_('Item successfully edited') | escapejs}}", icon: "success", position:"top-end", showConfirmButton: false, toast: true, timer: 1000})
-
-            } catch (err) {
-
-                this.items.push(item)
-
-            }
-
         },
         
-        async deleteItem (index) {
+        async deleteItem (item) {
-
-            var item = this.items[index]
-
-            try {
-
-                // Remove the item
-                this.items.splice(index, 1)
             await this.item_edition("delete", item)
-
+            this.$store.commit("items/removeItem", item.id)
-                Swal.fire({title: "{{_('Item successfully deleted!') | escapejs}}", icon: "success", position:"top-end", showConfirmButton: false, toast: true, timer: 1000})
-
-            } catch (err) {
-
-                this.items.push(item)
-
-            }
-
         },
 
         async createType (type) {
-
-            try {
-
             const new_type = await this.type_edition("post", type)
-                this.types.push(new_type)
+            this.$store.commit("types/addItem", new_type)
-
-                Swal.fire({title: "{{_('Type successfully created!') | escapejs}}", icon: "success", position:"top-end", showConfirmButton: false, toast: true, timer: 1000})
-
-            } catch (err) {
-
-            }
-
         },
 
-        async editType (index, type) {
+        async editType (type) {
-
-            try {
-
-                this.types.splice(index, 1)
-
             const new_type = await this.type_edition("post", type)
-
+            this.$store.commit("types/editItem", new_type)
-                this.types.push(new_type)
-
-                Swal.fire({title: "{{_('Type successfully edited') | escapejs}}", icon: "success", position:"top-end", showConfirmButton: false, toast: true, timer: 1000})
-
-            } catch (err) {
-
-                this.types.push(type)
-
-            }
-
         },
         
-        async deleteType (index) {
+        async deleteType (type) {
-
-            var type = this.types[index]
-
-            try {
-
-                // Remove the type
-                this.types.splice(index, 1)
-
             await this.type_edition("delete", type)
-
+            this.$store.commit("types/removeItem", type.id)
-                Swal.fire({title: "{{_('Type successfully deleted!') | escapejs}}", icon: "success", position:"top-end", showConfirmButton: false, toast: true, timer: 1000})
-
-            } catch (err) {
-
-                this.types.push(type)
-
-            }
         },
 
     },

k356/items/templates/components/LinkedPropertyList/template.html

@@ -0,0 +1 @@
+{% extends "base_components/glist/template.html" %}

k356/items/templates/components/LinkedPropertyList/vue.js

@@ -0,0 +1,8 @@
+{% extends "base_components/glist/vue.js" %}
+{% load main %}
+
+{% block component %}
+    {% define 'items' 'items' %}
+    {% define 'show_url' 'PropertyDetail' %}
+    {{ block.super }}
+{% endblock %}

k356/items/templates/components/PropertyDetail/template.html

@@ -1 +1,61 @@
-<div>PropertyDetail</div>
+{% load i18n %}
+
+<div>
+    <div class="card mt-4 pt-2 ps-lg-2">
+        <h5 class="card-header">{% trans "Property" %} [[ this.$route.params.id ]]</h5>
+        <div class="card-body">
+
+            <v-container fluid v-if="object">
+                <template v-for="field in headers">
+                    <v-row v-if="field.details">
+                        <v-col cols="4">
+                            <v-subheader>[[ field.text ]]</v-subheader>
+                        </v-col>
+                        <v-col cols="8">
+                            <v-text-field :value="object[field.value]" readonly dense></v-text-field>
+                        </v-col>
+                    </v-row>
+                </template>
+            </v-container>
+
+        </div>
+    </div>
+
+    <div class="card mt-4 pt-2 ps-lg-2">
+        <h5 class="card-header">{% trans "Item Properties" %}</h5>
+        <div class="card-body">
+            <LinkedPropertyList
+                :items="linked_properties"
+                :items_headers="linked_properties_headers"
+                :items_relations="{'item': all_items, 'property': [object]}"
+                :hidden_fields="['name', 'description', 'custom_identifier']"
+                :non_editable_fields="[]"
+                show_item="item"
+                show_url="ItemDetail"
+                group-by="property__name"
+                @deleteItem="deleteLinkedProperty"
+                @createItem="createLinkedProperty"
+                @editItem="editLinkedProperty"
+            ></LinkedPropertyList>
+        </div>
+    </div>
+
+    <div class="card mt-4 pt-2 ps-lg-2">
+        <h5 class="card-header">{% trans "Relation Properties" %}</h5>
+        <div class="card-body">
+            <LinkedPropertyList
+                :items="relation_properties"
+                :items_headers="relation_properties_headers"
+                :items_relations="{'item': all_items, 'property': [object]}"
+                :hidden_fields="['name', 'description', 'custom_identifier']"
+                :non_editable_fields="[]"
+                show_item="relation"
+                show_url="ItemRelationDetail"
+                group-by="property__name"
+                @deleteItem="deleteRelationProperty"
+                @createItem="createRelationProperty"
+                @editItem="editRelationProperty"
+            ></LinkedPropertyList>
+        </div>
+    </div>
+</div>

k356/items/templates/components/PropertyDetail/vue.js

@@ -1,4 +1,79 @@
 PropertyDetail = {
     template: "#PropertyDetail",
     router_path: "/PropertyDetail/:id",
+    delimiters: ["[[", "]]"],
+
+    computed: {
+        object: function() {
+            return this.$store.state.properties.items.find(i => i.id == this.$route.params.id)
+        },
+
+        headers: function() {
+            return this.$store.state.properties.headers
+        },
+
+        linked_properties: function() {
+            return this.$store.state.linkedProperties.items.filter(i => i.property == this.$route.params.id)
+        },
+
+        linked_properties_headers: function() {
+            return this.$store.state.linkedProperties.headers
+        },
+
+        relation_properties: function() {
+            return this.$store.state.relationProperties.items.filter(i => i.property == this.$route.params.id)
+        },
+
+        relation_properties_headers: function() {
+            return this.$store.state.relationProperties.headers
+        },
+
+        all_items: function() {
+            return this.$store.state.items.items
+        }
+    },
+
+    methods: {
+        linkedPropertyEdition (method, item) {
+            return this.object_edit("items:linked.property.edit", "items:linked.property.create", 'linkedProperties', method, item)
+        },
+
+        relationPropertyEdition (method, item) {
+            return this.object_edit("items:relation.property.edit", "items:relation.property.create", 'relationProperties', method, item)
+        },
+
+        async deleteLinkedProperty (item) {
+            await this.linkedPropertyEdition("delete", item)
+            this.$store.commit("linkedProperties/removeItem", item.id)
+        },
+
+        async createLinkedProperty (item) {
+            item.property = this.$route.params.id
+            const new_item = await this.linkedPropertyEdition("post", item)
+            this.$store.commit("linkedProperties/addItem", new_item)
+        },
+
+        async editLinkedProperty (item) {
+            item.property = this.$route.params.id
+            const new_item = await this.linkedPropertyEdition("post", item)
+            this.$store.commit("linkedProperties/editItem", new_item)
+        },
+
+        async deleteRelationProperty (item) {
+            await this.relationPropertyEdition("delete", item)
+            this.$store.commit("relationProperties/removeItem", item.id)
+        },
+
+        async createRelationProperty (item) {
+            item.property = this.$route.params.id
+            const new_item = await this.relationPropertyEdition("post", item)
+            this.$store.commit("relationProperties/addItem", new_item)
+        },
+
+        async editRelationProperty (item) {
+            item.property = this.$route.params.id
+            const new_item = await this.relationPropertyEdition("post", item)
+            this.$store.commit("relationProperties/editItem", new_item)
+        },
+    }
 },

k356/items/templates/components/PropertyView/template.html

@@ -9,7 +9,6 @@
                 :items="properties"
                 :items_headers="properties_headers"
                 :items_relations="{}"
-                :hidden_fields="[]"
                 group_by="type"
                 @deleteItem="deleteItem"
                 @createItem="createItem"

k356/items/templates/components/PropertyView/vue.js

@@ -4,21 +4,11 @@ PropertyView = {
     delimiters: ["[[", "]]"],
     props: [],
 
-    data: function() {
-        return {
-            properties: [],
-            properties_headers: [],
-        }
-    },
-
-    mounted: function() {
-        this.reload()
-    },
-
     computed: {
-        properties_encrypted_fields: function() {
+        ...Vuex.mapState({
-            return this.properties_headers.filter(e => e.encrypted).map(e => e.value)
+            properties: state => state.properties.items,
-        },
+            properties_headers: state => state.properties.headers,
+        }),
 
         properties_relations: function() {
             return this.properties_headers.filter(e => e.choices != null)
@@ -27,156 +17,23 @@ PropertyView = {
 
     methods: {
 
-        async reload () {
-
-            try {
-                const response = await this.$http.get(Urls["items:property.list"]())
-
-                this.properties_headers = response.data.result.properties_headers
-
-                // Decrypt all item the push
-                response.data.result.properties.forEach(async item => {
-                    const new_item = await this.decryptObject(this.properties_encrypted_fields, item)
-
-                    this.properties.push(new_item)
-                })
-
-            } catch (err) {
-
-                Swal.fire({title: "{{_('Error during loading of properties') | escapejs}}", icon: "error", position:"top-end", showConfirmButton: false, toast: true, timer: 1000})
-
-                throw err
-
-            }
-
-        },
-
-        async decryptObject (encrypted_fields, obj) {
-            // Decrypt all fields and return a new object
-
-            var newobj = {}
-            await Promise.all(Object.keys(obj).map(async field => {
-                if (encrypted_fields.includes(field) && obj[field] != null) {
-                    newobj[field] = await this.decrypt(obj[field])
-                } else {
-                    newobj[field] = obj[field]
-                }
-            }))
-
-            return newobj
-
-        },
-
-        async encryptObject (encrypted_fields, obj) {
-            // Encrypt all fields and return a new object
-
-            var newobj = {}
-
-            await Promise.all(Object.keys(obj).map(async field => {
-                if (encrypted_fields.includes(field) && obj[field] != null) {
-                    newobj[field] = await this.encrypt(obj[field])
-                } else {
-                    newobj[field] = obj[field]
-                }
-            }))
-
-            return newobj
-
-        },
-
-        async object_edit(url_edit, url_create, encrypted_fields, method, obj) {
-
-            let url = null
-
-            if (obj.id == undefined || obj.id == null) {
-                url = Urls[url_create]()
-            } else {
-                url = Urls[url_edit](obj.id)
-            }
-
-            try {
-
-                const newobj = await this.encryptObject(encrypted_fields, obj)
-                const response = await this.$http[method](url, newobj)
-
-                if (method != "delete") {
-                    return await this.decryptObject(encrypted_fields, response.data.object)
-                }
-
-            } catch (err) {
-
-                let msg = "{{_('Error during edition') | escapejs}}"
-                if (method == "delete") {
-                    msg = "{{_('Error during deletion') | escapejs}}"
-                }
-
-                Swal.fire({title: msg, icon: "error", position:"top-end", showConfirmButton: false, toast: true, timer: 1000})
-
-                throw err
-
-            }
-
-        },
-
         property_edition (method, item) {
-            return this.object_edit("items:property.edit", "items:property.create", this.properties_encrypted_fields, method, item)
+            return this.object_edit("items:property.edit", "items:property.create", "properties", method, item)
         },
 
         async createItem (item) {
-
-            try {
-
             const new_item = await this.property_edition("post", item)
-                this.properties.push(new_item)
+            this.$store.commit("properties/addItem", new_item)
-
-                Swal.fire({title: "{{_('Item successfully created!') | escapejs}}", icon: "success", position:"top-end", showConfirmButton: false, toast: true, timer: 1000})
-
-            } catch (err) {
-
-            }
-
         },
 
-        async editItem (index, item) {
+        async editItem (item) {
-
-            try {
-
-                // Remove the item
-                this.properties.splice(index, 1)
-
             const new_item = await this.property_edition("post", item)
-
+            this.$store.commit("properties/editItem", new_item)
-                // Add the new item
-                this.properties.push(new_item)
-
-                Swal.fire({title: "{{_('Item successfully edited') | escapejs}}", icon: "success", position:"top-end", showConfirmButton: false, toast: true, timer: 1000})
-
-            } catch (err) {
-
-                this.properties.push(item)
-
-            }
-
         },
         
-        async deleteItem (index) {
+        async deleteItem (item) {
-
-            var item = this.properties[index]
-
-            try {
-
-                // Remove the item
-                this.properties.splice(index, 1)
             await this.property_edition("delete", item)
-
+            this.$store.commit("properties/removeItem", item.id)
-                Swal.fire({title: "{{_('Item successfully deleted!') | escapejs}}", icon: "success", position:"top-end", showConfirmButton: false, toast: true, timer: 1000})
-
-            } catch (err) {
-
-                this.properties.push(item)
-
-            }
-
         },
 
     },

k356/items/templates/components/RelationPropertyList/template.html

@@ -0,0 +1 @@
+{% extends "base_components/glist/template.html" %}

k356/items/templates/components/RelationPropertyList/vue.js

@@ -0,0 +1,8 @@
+{% extends "base_components/glist/vue.js" %}
+{% load main %}
+
+{% block component %}
+    {% define 'items' 'items' %}
+    {% define 'show_url' 'ItemDetail' %}
+    {{ block.super }}
+{% endblock %}

k356/items/urls.py

@@ -19,9 +19,15 @@ urlpatterns = [
     path("property/list", property_view.property_list, name="property.list"),
     path("property/<uuid:id>", property_view.property_edit, name="property.edit"),
     path("property/create", property_view.property_edit, {"id": None}, name="property.create"),
+    # Linked property
+    path("property/linked/<uuid:id>", property_view.linked_property_edit, name="linked.property.edit"),
+    path("property/linked/create", property_view.linked_property_edit, {"id": None}, name="linked.property.create"),
+    # Relation property
+    path("property/relation/<uuid:id>", property_view.relation_property_edit, name="relation.property.edit"),
+    path("property/relation/create", property_view.relation_property_edit, {"id": None}, name="relation.property.create"),
     # Relations
-    # path("relation/list", relation_view.relation_list, name="relation.list"),
+    path("relation/list", relation_view.relation_list, name="relation.list"),
-    # path("relation/<uuid:id>", relation_view.relation_edit, name="relation.edit"),
+    path("relation/<uuid:id>", relation_view.relation_edit, name="relation.edit"),
     path("relation/<uuid:id>/details", relation_view.relation_details, name="relation.details"),
-    # path("relation/create", relation_view.relation_edit, {"id": None}, name="relation.create"),
+    path("relation/create", relation_view.relation_edit, {"id": None}, name="relation.create"),
 ]

k356/items/views/base.py

@@ -41,10 +41,16 @@ def generic_edit(model, request, id=None):
             continue
 
         if isinstance(field, RelatedField):
-            # For now, disregard related field (fk, m2m, 1-1)
             if isinstance(field, models.ForeignKey):
+
+                # Also allow for nested object (giving the full object instead of the id only)
+                if isinstance(data[field.name], dict):
+                    setattr(item, f"{field.name}_id", data[field.name]["id"])
+
+                else:
                     setattr(item, f"{field.name}_id", data[field.name])
 
+            # For now, disregard m2m fields
             continue
 
         if field.name not in data:

k356/items/views/item_view.py

@@ -21,7 +21,7 @@ def item_list(request):
                 "types": list(types.serialize()),
                 "types_headers": header_for_table(ItemType),
             },
-            "count": items.count(),
+            "count": items.count() + types.count(),
         }
     )
 
@@ -44,6 +44,7 @@ def item_details(request, id):
     return JsonResponse(
         {
             "object": item.serialize(),
+            "headers": header_for_table(Item),
             "parents": list(item.parents.serialize()),
             "parents_headers": header_for_table(ItemRelation),
             "children": list(item.children.serialize()),

k356/items/views/property_view.py

@@ -3,22 +3,28 @@ from django.http import JsonResponse
 
 
 from app.utils.api.api_list import header_for_table
-from items.models import Property
+from items.models import LinkedProperty, Property, RelationProperty
 from items.views.base import generic_edit
 
 
 @login_required
 def property_list(request):
 
-    items = Property.objects.filter(author=request.user.setting)
+    properties = Property.objects.filter(author=request.user.setting)
+    linked_properties = LinkedProperty.objects.filter(author=request.user.setting)
+    relation_properties = RelationProperty.objects.filter(author=request.user.setting)
 
     return JsonResponse(
         {
             "result": {
-                "properties": list(items.serialize()),
+                "properties": list(properties.serialize()),
                 "properties_headers": header_for_table(Property),
+                "linked_properties": list(linked_properties.serialize()),
+                "linked_properties_headers": header_for_table(LinkedProperty),
+                "relation_properties": list(relation_properties.serialize()),
+                "relation_properties_headers": header_for_table(RelationProperty),
             },
-            "count": items.count(),
+            "count": properties.count() + linked_properties.count() + relation_properties.count(),
         }
     )
 
@@ -28,3 +34,17 @@ def property_edit(request, id=None):
     """Create/edit property view."""
 
     return generic_edit(Property, request, id)
+
+
+@login_required
+def linked_property_edit(request, id=None):
+    """Create/edit linked property view."""
+
+    return generic_edit(LinkedProperty, request, id)
+
+
+@login_required
+def relation_property_edit(request, id=None):
+    """Create/edit relation property view."""
+
+    return generic_edit(RelationProperty, request, id)

k356/items/views/relation_view.py

@@ -4,6 +4,23 @@ from django.http import JsonResponse
 
 from app.utils.api.api_list import header_for_table
 from items.models import Item, ItemRelation, Property, RelationProperty
+from items.views.base import generic_edit
+
+
+@login_required
+def relation_list(request):
+
+    relations = ItemRelation.objects.filter(author=request.user.setting)
+
+    return JsonResponse(
+        {
+            "result": {
+                "relations": list(relations.serialize()),
+                "headers": header_for_table(ItemRelation),
+            },
+            "count": relations.count(),
+        }
+    )
 
 
 @login_required
@@ -27,3 +44,10 @@ def relation_details(request, id):
             "relation_properties_headers": header_for_table(RelationProperty),
         }
     )
+
+
+@login_required
+def relation_edit(request, id=None):
+    """Create/edit relation view."""
+
+    return generic_edit(ItemRelation, request, id)

k356/main/templates/components/Loading/vue.js

@@ -9,17 +9,13 @@ Loading = {
         }
     },
 
-    mounted: function() {
-        // FIX: Remove this, this is the key for debugging
-        this.generate_aes_key('asd')
-    },
-
     methods: {
 
         async generate_aes_key (password) {
-            const key = await this.deriveKeyFromPassphrase(password, "{{ user_setting.id }}--aes")
 
+            const key = await this.deriveKeyFromPassphrase(password, "{{ user_setting.id }}--aes")
             this.$emit("update_key", key)
+
         },
 
     }

k356/pyproject.toml

@@ -62,6 +62,7 @@ authors = []
 python = "^3.11"
 Django = "^5.0"
 django-bower = {git = "https://github.com/ArcaniteSolutions/django-bower.git"}
+django-simple-history = "^3.7"
 
 [tool.poetry.dev-dependencies]
 black = "^24.4.0"

k356/templates/base.html

@@ -41,7 +41,10 @@
 
                 <nav class="navbar navbar-expand-lg bg-primary" data-bs-theme="dark">
                     <div class="container-fluid">
-                        <a href="#" @click="lock_me" class="navbar-brand">{% trans "Lock" %}</a>
+                        <v-btn color="navbar-brand" text @click="lock_me">
+                            <v-icon small class="mr-2">mdi-lock</v-icon>
+                            {% trans "Lock" %}
+                        </v-btn>
 
                         <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
                             <span class="navbar-toggler-icon"></span>
@@ -49,12 +52,6 @@
 
                         <div class="collapse navbar-collapse" id="navbarColor01">
                             <ul class="navbar-nav me-auto">
-                                <li class="nav-item">
-                                    <router-link class="nav-link active" to="{% url 'main:home' %}">
-                                        {% trans "K356" %}
-                                        <span class="visually-hidden"></span>
-                                    </router-link>
-                                </li>
                                 <li class="nav-item">
                                     <router-link class="nav-link" to="/ItemView">{% trans "Items" %}</router-link>
                                 </li>

k356/templates/base_components/glist/template.html

@@ -32,36 +32,56 @@
                     <v-card-text>
                         <v-container>
                             <v-row>
+                                <v-form ref="form" v-model="valid">
+
                                     <template v-for="field in editable_fields">
+
                                         <template v-if="field.field_widget == 'v-select'">
                                             <template v-if="field.choices">
                                                 <v-select
                                                     v-model="editedItem[field.value]"
                                                     :items="field.choices"
                                                     :label="field.text"
+                                                    :rules="[rules.required]"
                                                     item-text="text"
                                                     item-value="value"
                                                     persistent-hint>
                                                 </v-select>
                                             </template>
+
                                             <template v-else>
                                                 <v-select
                                                     v-model="editedItem[field.value]"
                                                     :items="items_relations[field.value]"
                                                     :label="field.text"
+                                                    :rules="[rules.required]"
                                                     item-text="name"
                                                     item-value="id"
+                                                    return-object
                                                     persistent-hint>
                                                     <template slot="item" slot-scope="data">
-                                                    [[ data.item.name ]] - [[ data.item.custom_identifier ]]
+                                                        <template v-if="data.item.custom_identifier">
+                                                            [[ data.item.custom_identifier ]] - [[ data.item.name ]]
+                                                        </template>
+                                                        <template v-else>
+                                                            [[ data.item.name ]]
+                                                        </template>
                                                     </template>
                                                 </v-select>
                                             </template>
                                         </template>
+
+                                        <template v-else-if="field?.dynamic_field_type">
+                                            <DynField :item="editedItem" :field="field"></DynField>
+                                        </template>
+
                                         <template v-else>
                                             <component :is="field.field_widget" v-model="editedItem[field.value]" :label="field.text"></component>
                                         </template>
+
                                     </template>
+
+                                </v-form>
                             </v-row>
                         </v-container>
                     </v-card-text>

k356/templates/base_components/glist/vue.js

@@ -3,24 +3,51 @@
     template: "#{{ name }}",
     router_path: "/{{ name }}",
     delimiters: ["[[", "]]"],
-    props: ["crypto_key", "items", "items_headers", "items_relations", "group_by", "hidden_fields"],
+    props: {
+        items: Array,
+        items_headers: Array,
+        items_relations: {
+            default: function () {
+                return {}
+            },
+        },
+        group_by: String,
+        hidden_fields: {
+            default: function () {
+                return []
+            },
+        },
+        non_editable_fields: {
+            default: function () {
+                return []
+            },
+        },
+        show_item: {
+            default: "id",
+        },
+        show_url: {
+            default: "{{ show_url|default:'' }}",
+        },
+    },
 
     data: function() {
         return {
+            valid: false,
             dialog: false,
             dialogDelete: false,
-            editedIndex: -1,
             defaultItem: {},
             editedItem: {},
             search: null,
-            show_url: "{{ show_url|default:'' }}",
+            default_hidden_fields: [{% for field in default_hidden_fields %}"{{ field }}",{% endfor %}],
-            default_hidden_fields: [{% for field in default_hidden_fields %}"{{ field }}",{% endfor %}]
+            rules: {
+                required: value => !!value || "{{_('Required') | escapejs}}",
+            },
         }
     },
 
     computed: {
         editable_fields: function() {
-            return this.items_headers.filter(e => e.editable)
+            return this.items_headers.filter(e => e.editable).filter(e => !this.non_editable_fields.includes(e.value))
         },
 
         citems_headers: function() {
@@ -44,23 +71,21 @@
         },
 
         showItem (item) {
-            this.$router.replace({ name: this.show_url, params: { id: item.id }})
+            this.$router.push({ name: this.show_url, params: { id: item[this.show_item] }})
         },
 
         editItem (item) {
-            this.editedIndex = this.items.indexOf(item)
             this.editedItem = Object.assign({}, item)
             this.dialog = true
         },
 
         deleteItem (item) {
-            this.editedIndex = this.items.indexOf(item)
             this.editedItem = Object.assign({}, item)
             this.dialogDelete = true
         },
 
         deleteItemConfirm () {
-            this.$emit("deleteItem", this.editedIndex)
+            this.$emit("deleteItem", this.editedItem)
             this.closeDelete()
 
         },
@@ -68,25 +93,26 @@
         close () {
             this.dialog = false
             this.editedItem = Object.assign({}, this.defaultItem)
-            this.editedIndex = -1
         },
 
         closeDelete () {
             this.dialogDelete = false
             this.editedItem = Object.assign({}, this.defaultItem)
-            this.editedIndex = -1
         },
 
 
         save () {
 
-            if (this.editedIndex > -1) {
+            const isValid = this.$refs.form.validate()
+            if (!isValid) return
 
-                this.$emit("editItem", this.editedIndex, this.editedItem)
+            if (this.editedItem.id == null) {
+
+                this.$emit("createItem", this.editedItem)
 
             } else {
 
-                this.$emit("createItem", this.editedItem)
+                this.$emit("editItem", this.editedItem)
 
             }
 

k356/templates/scripts.js

@@ -1,51 +1,3 @@
-async function init() {
-
-    const operations = crypto.subtle
-
-    const KEY_LEN = 256
-
-    const ENCRYPTION_ALGO = "AES-GCM"
-    const ENCRYPTION_USAGES = ["encrypt", "decrypt"]
-    const ENCRYPTION_PARAMS = { name: ENCRYPTION_ALGO, length: KEY_LEN }
-
-    const WRAPPING_ALGO = "AES-KW"
-    const WRAPPING_USAGES = ["wrapKey", "unwrapKey"]
-
-    const DERIVATION_ALGO = "ECDH"
-
-    const { publicKey, privateKey } = await operations.generateKey(
-        {
-            name: DERIVATION_ALGO,
-            namedCurve: "P-384",
-        },
-        false,
-        ["derivekey"]
-    )
-
-    const encryptionKey = await operations.deriveKey(
-        {
-            name: DERIVATION_ALGO,
-            public: publicKey,
-        },
-        privateKey,
-        ENCRYPTION_PARAMS,
-        false,
-        ["encrypt"]
-    )
-
-    const decryptionKey = await operations.deriveKey(
-        { name: DERIVATION_ALGO, public: publicKey },
-        privateKey,
-        ENCRYPTION_PARAMS,
-        false,
-        ['decrypt']
-    )
-
-    return { encryptionKey, decryptionKey }
-
-}
-
-
 function stringToArrayBuffer(str) {
     var buf = new ArrayBuffer(str.length);
     var bufView = new Uint8Array(buf);
@@ -64,59 +16,3 @@ function arrayBufferToString(str) {
     }
     return byteString;
 }
-
-
-async function aEncryptWithKey(key, data) {
-    // Encrypt data with key. Return a Promise
-    return new Promise((resolve) => {
-        window.crypto.subtle.encrypt(
-            {
-                name: "AES-GCM",
-                iv: stringToArrayBuffer(key.uuid),
-            },
-            key.key,
-            stringToArrayBuffer(data)
-        ).then(text => {
-
-            resolve(btoa(arrayBufferToString(text)));
-
-        });
-    });
-}
-
-function encryptWithKey(key, data) {
-    // Encrypt data with key. Return a Promise
-    return new Promise((resolve) => {
-        window.crypto.subtle.encrypt(
-            {
-                name: "AES-GCM",
-                iv: stringToArrayBuffer(key.uuid),
-            },
-            key.key,
-            stringToArrayBuffer(data)
-        ).then(text => {
-
-            resolve(btoa(arrayBufferToString(text)));
-
-        });
-    });
-}
-
-
-function decryptWithKey(key, data) {
-    // Decrypt data with key. Return a Promise
-    return new Promise((resolve) => {
-        window.crypto.subtle.decrypt(
-            {
-                name: "AES-GCM",
-                iv: stringToArrayBuffer(key.uuid),
-            },
-            key.key,
-            stringToArrayBuffer(atob(data))
-        ).then(text => {
-
-            resolve(arrayBufferToString(text));
-
-        });
-    })
-}

k356/templates/vue/index.js

@@ -1,6 +1,7 @@
-
 {% include "vue/plugins.js" %}
 
+Vue.config.devtools = true
+
 Vue.use(VueRouter)
 Vue.use(Vuex)
 Vue.use(EncryptionPlugin)
@@ -24,29 +25,13 @@ const routes = [
     {% endfor %}
 ]
 
-
+{% include "vue/stores.js" %}
-const encryptionStore = new Vuex.Store({
-    state: {
-        aes_key: null,
-        keyPair: null,
-    },
-
-    mutations: {
-        update_aes_key (state, key) {
-            state.aes_key = key
-        },
-
-        update_keyPair (state, keyPair) {
-            state.keyPair = keyPair
-        },
-    }
-})
 
 const router = new VueRouter({routes})
 const approuter = new Vue({
     router,
     vuetify: new Vuetify(),
-    store: encryptionStore,
+    store: store,
     el: "#main",
     data: {
         uuid: "{{ user_settings.id }}",
@@ -54,7 +39,7 @@ const approuter = new Vue({
 
     computed: {
         locked: function() {
-            return this.$store.state.aes_key == null || this.$store.state.keyPair?.privateKey == null
+            return this.$store.state.encryption.aes_key == null || this.$store.state.encryption.keyPair?.privateKey == null
         }
     },
 
@@ -62,6 +47,8 @@ const approuter = new Vue({
 
     methods: {
         async load_keys (aes_key) {
+            try {
+
                 const response = await this.$http.get(Urls["users:keys"]())
 
                 const iv_private = `${this.uuid}--private`
@@ -74,7 +61,7 @@ const approuter = new Vue({
                         publicKey: await this.unwrapKey(aes_key, response.data.publicKey, iv_public, ["encrypt"]),
                     }
 
-                this.$store.commit('update_keyPair', keyPair)
+                    this.$store.commit('encryption/updateKeyPair', keyPair)
 
                     Swal.fire({title: "Successfully loaded K356!", icon: "success", position:"top-end", showConfirmButton: false, toast: true, timer: 1000});
 
@@ -90,28 +77,83 @@ const approuter = new Vue({
                         }
                     )
 
-                this.$store.commit('update_keyPair', keyPair)
+                    this.$store.commit('encryption/updateKeyPair', keyPair)
 
                     Swal.fire({title: "Successfully created K356!", icon: "success", position:"top-end", showConfirmButton: false, toast: true, timer: 1000});
 
                 }
 
+                this.load_items()
+                this.load_properties()
+                this.load_relations()
+
+            } catch (err) {
+
+                Swal.fire({title: "{{_('Error during unwrapping of private key.<br><br>Maybe your password is wrong?') | escapejs}}", icon: "error", showConfirmButton: false})
+
+            }
+
         },
 
         update_key: function(key) {
-            this.$store.commit('update_aes_key', key)
+            this.$store.commit('encryption/updateAesKey', key)
 
             this.load_keys(key)
         },
 
         lock_me: function() {
-            this.$store.commit('update_keyPair', null)
+            this.$store.commit('encryption/updateKeyPair', null)
-            this.$store.commit('update_aes_key', null)
+            this.$store.commit('encryption/updateAesKey', null)
-        }
+
+            // Lock all stores
+            this.$store.commit('encryption/lock')
+            this.$store.commit('items/lock')
+            this.$store.commit('types/lock')
+            this.$store.commit('relations/lock')
+            this.$store.commit('properties/lock')
+            this.$store.commit('linkedProperties/lock')
+            this.$store.commit('relationProperties/lock')
+        },
+
+        async load_items () {
+
+            const response = await this.$http.get(Urls["items:list"]())
+
+            this.$store.state.items.headers = response.data.result.items_headers
+            this.$store.state.types.headers = response.data.result.types_headers
+
+            this.$store.dispatch("items/setItems", { self: this, items: response.data.result.items })
+            this.$store.dispatch("types/setItems", { self: this, items: response.data.result.types })
+
+        },
+
+        async load_properties () {
+
+            const response = await this.$http.get(Urls["items:property.list"]())
+
+            this.$store.state.properties.headers = response.data.result.properties_headers
+            this.$store.state.linkedProperties.headers = response.data.result.linked_properties_headers
+            this.$store.state.relationProperties.headers = response.data.result.relation_properties_headers
+
+            this.$store.dispatch("properties/setItems", { self: this, items: response.data.result.properties })
+            this.$store.dispatch("linkedProperties/setItems", { self: this, items: response.data.result.linked_properties })
+            this.$store.dispatch("relationProperties/setItems", { self: this, items: response.data.result.relation_properties })
+
+        },
+
+        async load_relations () {
+
+            const response = await this.$http.get(Urls["items:relation.list"]())
+
+            this.$store.state.relations.headers = response.data.result.headers
+
+            this.$store.dispatch("relations/setItems", { self: this, items: response.data.result.relations })
+
+        },
     }
 })
 
 router.beforeEach((to, from, next) => {
-    // Prevent from routing if key is not present.
+    // Prevent from routing when locked or loading.
     next(!approuter.locked)
 })

k356/templates/vue/plugins.js

@@ -105,7 +105,7 @@ const EncryptionPlugin = {
 
             return btoa(arrayBufferToString(await operations.encrypt(
                 { name: "RSA-OAEP" },
-                this.$store.state.keyPair.publicKey,
+                this.$store.state.encryption.keyPair.publicKey,
                 stringToArrayBuffer(data),
             )))
 
@@ -115,7 +115,7 @@ const EncryptionPlugin = {
 
             return arrayBufferToString(await operations.decrypt(
                 { name: "RSA-OAEP" },
-                this.$store.state.keyPair.privateKey,
+                this.$store.state.encryption.keyPair.privateKey,
                 stringToArrayBuffer(atob(armored_data))
             ))
 
@@ -153,6 +153,42 @@ const EncryptionPlugin = {
             }))
 
             return newobj
+        },
+
+        Vue.prototype.object_edit = async function (url_edit, url_create, type, method, obj) {
+
+            let url = null
+
+            if (obj.id == undefined || obj.id == null) {
+                url = Urls[url_create]()
+            } else {
+                url = Urls[url_edit](obj.id)
+            }
+
+            const efields = this.$store.getters[`${type}/encryptedFields`]
+
+            try {
+
+                const newobj = await this.encryptObject(efields, obj)
+                const response = await this.$http[method](url, newobj)
+
+                if (method != "delete") {
+                    return await this.decryptObject(efields, response.data.object)
+                }
+
+            } catch (err) {
+
+                let msg = "{{_('Error during edition') | escapejs}}"
+                if (method == "delete") {
+                    msg = "{{_('Error during deletion') | escapejs}}"
+                }
+
+                Swal.fire({title: msg, icon: "error", position:"top-end", showConfirmButton: false, toast: true, timer: 1000})
+
+                throw err
+
+            }
+            
         }
 
     }

k356/templates/vue/stores.js

@@ -0,0 +1,108 @@
+const encryptionStore = {
+    namespaced: true,
+    state: () => (
+        {
+            aes_key: null,
+            keyPair: null,
+        }
+    ),
+
+    mutations: {
+        lock (state) {
+            state.aes_key = null
+            state.keyPair = null
+        },
+
+        updateAesKey (state, key) {
+            state.aes_key = key
+        },
+
+        updateKeyPair (state, keyPair) {
+            state.keyPair = keyPair
+        },
+    },
+}
+
+const storeMixin = {
+    state: () => (
+        {
+            items: [],
+            headers: [],
+        }
+    ),
+
+    mutations: {
+        lock (state) {
+            state.items = []
+        },
+
+        addItem (state, item) {
+            state.items.push(item)
+        },
+
+        removeItem (state, id) {
+            state.items = state.items.filter(i => i.id != id)
+
+            Swal.fire({title: "{{_('Successfully deleted!') | escapejs}}", icon: "success", position:"top-end", showConfirmButton: false, toast: true, timer: 1000})
+        },
+
+        editItem (state, item_edited) {
+            state.items = state.items.map(i => {
+                if (i.id == item_edited.id) {
+                    return item_edited
+                }
+
+                return i
+            })
+
+            Swal.fire({title: "{{_('Successfully edited') | escapejs}}", icon: "success", position:"top-end", showConfirmButton: false, toast: true, timer: 1000})
+        },
+    },
+
+    getters: {
+        encryptedFields (state) {
+            return state.headers.filter(e => e.encrypted).map(e => e.value)
+        },
+
+        getById: (state) => (id) => {
+            return state.items.find(e => e.id == id)
+        },
+    },
+
+    actions: {
+        async setItems ({ commit, getters }, payload) {
+            return payload.items.map(async item => {
+                const new_item = await payload.self.decryptObject(getters.encryptedFields, item)
+
+                return await commit('addItem', new_item)
+            })
+        },
+
+        async addItem ({ getters, commit }, payload) {
+
+            const new_item = await payload.self.decryptObject(getters.encryptedFields, payload.item)
+
+            return await commit('addItem', new_item)
+
+        },
+    }
+}
+
+const itemStore = {__proto__: storeMixin, namespaced: true}
+const typeStore = {__proto__: storeMixin, namespaced: true}
+const relationStore = {__proto__: storeMixin, namespaced: true}
+const propertyStore = {__proto__: storeMixin, namespaced: true}
+const linkedPropertyStore = {__proto__: storeMixin, namespaced: true}
+const relationPropertyStore = {__proto__: storeMixin, namespaced: true}
+
+const store = new Vuex.Store({
+    modules: {
+        encryption: encryptionStore,
+        items: itemStore,
+        types: typeStore,
+        relations: relationStore,
+        properties: propertyStore,
+        linkedProperties: linkedPropertyStore,
+        relationProperties: relationPropertyStore,
+    }
+})

k356/users/migrations/0006_historicalusersettings.py

@@ -0,0 +1,57 @@
+# Generated by Django 5.1.1 on 2024-10-01 13:41
+
+import django.db.models.deletion
+import simple_history.models
+import uuid
+from django.conf import settings
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("users", "0005_alter_usersettings_custom_identifier_and_more"),
+        migrations.swappable_dependency(settings.AUTH_USER_MODEL),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name="HistoricalUserSettings",
+            fields=[
+                ("id", models.UUIDField(db_index=True, default=uuid.uuid4, editable=False)),
+                ("name", models.TextField(blank=True, max_length=2048, null=True)),
+                ("description", models.TextField(blank=True, max_length=2048, null=True)),
+                ("custom_identifier", models.TextField(blank=True, max_length=2048, null=True)),
+                ("created_at", models.DateTimeField(blank=True, editable=False)),
+                ("last_modified_at", models.DateTimeField(blank=True, editable=False)),
+                ("public_key", models.TextField(max_length=2048, null=True)),
+                ("private_key", models.TextField(max_length=2048, null=True)),
+                ("history_id", models.AutoField(primary_key=True, serialize=False)),
+                ("history_date", models.DateTimeField(db_index=True)),
+                ("history_change_reason", models.CharField(max_length=100, null=True)),
+                ("history_type", models.CharField(choices=[("+", "Created"), ("~", "Changed"), ("-", "Deleted")], max_length=1)),
+                (
+                    "history_user",
+                    models.ForeignKey(null=True, on_delete=django.db.models.deletion.SET_NULL, related_name="+", to=settings.AUTH_USER_MODEL),
+                ),
+                (
+                    "user",
+                    models.ForeignKey(
+                        blank=True,
+                        db_constraint=False,
+                        null=True,
+                        on_delete=django.db.models.deletion.DO_NOTHING,
+                        related_name="+",
+                        to=settings.AUTH_USER_MODEL,
+                    ),
+                ),
+            ],
+            options={
+                "verbose_name": "historical user settings",
+                "verbose_name_plural": "historical user settingss",
+                "ordering": ("-history_date", "-history_id"),
+                "get_latest_by": ("history_date", "history_id"),
+            },
+            bases=(simple_history.models.HistoricalChanges, models.Model),
+        ),
+    ]

k356/users/models.py

@@ -5,6 +5,9 @@ from django.db import models
 from app.utils.models import BaseModel
 
 
+from simple_history.models import HistoricalRecords
+
+
 User = get_user_model()
 
 
@@ -14,3 +17,5 @@ class UserSettings(BaseModel):
     # The private and public key are wrapped with the AES key from the front-end
     public_key = models.TextField(max_length=2048, null=True)
     private_key = models.TextField(max_length=2048, null=True)
+
+    history = HistoricalRecords()