Add history + more components

k356/templates/base.html

@@ -82,12 +82,12 @@
                     </div>
                 </nav>
 
-                <div id="app" class="container">
+                <v-container class="container-xs">
                     <Loading @update_key="update_key" v-if="locked"></Loading>
                     <template v-if="!locked">
                         <router-view></router-view>
                     </template>
-                </div>
+                </v-container>
 
             </div>
         </v-app>

k356/templates/base_components/glist/template.html

@@ -4,9 +4,9 @@
 <v-data-table
     :headers="citems_headers"
     :items="items"
-    :items-per-page="50"
     :search="search"
     :group-by="group_by"
+    :items-per-page="20"
     loading
     dense>
     <template v-slot:top>
@@ -121,8 +121,11 @@
     </template>
 
     <template v-slot:item.id="{ item }">
-        [[ item.id.slice(0, 8) ]]...
+        <v-btn plain @click="showItem(item)">
+            [[ item.id.slice(0, 8) ]]...
+        </v-btn>
     </template>
+
     <template v-slot:item.description="{ item }">
         <template v-if="item.description && item.description.length > 15">
             [[ item.description.slice(0, 15) ]]...
@@ -131,9 +134,11 @@
             [[ item.description ]]
         </template>
     </template>
+
     <template v-slot:item.last_modified_at="{ item }">
         [[ formatDate(item.last_modified_at) ]]
     </template>
+
     <template v-slot:item.created_at="{ item }">
         [[ formatDate(item.created_at) ]]
     </template>

k356/templates/vue/index.js

@@ -35,6 +35,7 @@ const approuter = new Vue({
     el: "#main",
     data: {
         uuid: "{{ user_settings.id }}",
+        ready: null,
     },
 
     computed: {
@@ -43,7 +44,33 @@ const approuter = new Vue({
         }
     },
 
-    mounted: function() {},
+    async created () {
+
+        if (operations == undefined) {
+
+            Swal.fire({title: "{{_('The application cannot be launched. Webcrypto is not available.<br><br>Try another browser!') | escapejs}}", icon: "error", showConfirmButton: false})
+
+            this.ready = false
+
+        } else {
+
+            // Try to generate a random keyPair and encrypting stuff before accepting the client
+            try {
+
+                const keyPair = await this.generateKeyPair()
+
+                this.ready = true
+
+            } catch (err) {
+
+                Swal.fire({title: "{{_('An error occured during testing Webcrypto. Please use a compatible browser.') | escapejs}}", icon: "error", showConfirmButton: false})
+
+                this.ready = false
+
+            }
+
+        }
+    },
 
     methods: {
         async load_keys (aes_key) {
@@ -63,7 +90,7 @@ const approuter = new Vue({
 
                     this.$store.commit('encryption/updateKeyPair', keyPair)
 
-                    Swal.fire({title: "Successfully loaded K356!", icon: "success", position:"top-end", showConfirmButton: false, toast: true, timer: 1000});
+                    Swal.fire({title: "{{_('Successfully loaded K356!') | escapejs}}", icon: "success", position:"top-end", showConfirmButton: false, toast: true, timer: 1000});
 
                 } else {
 
@@ -79,7 +106,7 @@ const approuter = new Vue({
 
                     this.$store.commit('encryption/updateKeyPair', keyPair)
 
-                    Swal.fire({title: "Successfully created K356!", icon: "success", position:"top-end", showConfirmButton: false, toast: true, timer: 1000});
+                    Swal.fire({title: "{{_('Successfully created K356!') | escapejs}}", icon: "success", position:"top-end", showConfirmButton: false, toast: true, timer: 1000});
 
                 }
 

k356/templates/vue/stores.js

@@ -94,6 +94,7 @@ 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 history = {__proto__: storeMixin, namespaced: true}
 
 const store = new Vuex.Store({
     modules: {
@@ -104,5 +105,6 @@ const store = new Vuex.Store({
         properties: propertyStore,
         linkedProperties: linkedPropertyStore,
         relationProperties: relationPropertyStore,
+        history: history,
     }
 })