adminforth 1.3.54-next.6 → 1.3.54-next.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "adminforth",
-  "version": "1.3.54-next.6",
+  "version": "1.3.54-next.7",
   "description": "OpenSource Vue3 powered forth-generation admin panel",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/spa/src/renderers/CompactUUID.vue

@@ -1,15 +1,47 @@
 <template>
-  {{ visualValue }}
+  <span class="flex items-center"  
+      :data-tooltip-target="`tooltip-${id}`"
+      data-tooltip-placement="bottom">
+    {{ visualValue }} <IconFileCopyAltSolid @click.stop="copyToCB" class="w-5 h-5 text-lightPrimary dark:text-darkPrimary"/>
+
+    <div :id="`tooltip-${id}`" role="tooltip"
+          class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
+      {{ props.record[props.column.name] }}
+      <div class="tooltip-arrow" data-popper-arrow></div>
+    </div>
+  </span>
 </template>
 
 <script setup>  
-
+import { computed, ref, onMounted } from 'vue';
 import { IconFileCopyAltSolid } from '@iconify-prerendered/vue-flowbite';
+import { initFlowbite } from 'flowbite';
 
 const visualValue = computed(() => {
-  return record[column.name];
+  // if lenght is more then 8, show only first 4 and last 4 characters, ... in the middle
+  const val = props.record[props.column.name];
+  if (val.length > 8) {
+    return `${val.substr(0, 4)}...${val.substr(val.length - 4)}`;
+  }
+  return val;
 });
 
 const props = defineProps(['column', 'record', 'meta']);
 
+const id = ref();
+
+function copyToCB() {
+  navigator.clipboard.writeText(props.record[props.column.name]);
+  window.adminforth.alert({
+    message: 'ID copied to clipboard',
+    variant: 'success',
+  })
+}
+
+onMounted(async () => {
+  id.value = Math.random().toString(36).substring(7);
+  await new Promise(resolve => setTimeout(resolve, 0));
+  initFlowbite();
+});
+
 </script>

package/spa/src/views/ListView.vue

@@ -257,7 +257,7 @@ async function init() {
     return {
       field,
       operator,
-      value: decodeURIComponent(route.query[k])
+      value: JSON.parse(decodeURIComponent(route.query[k]))
     }
   });
   if (filters.length) {
@@ -314,7 +314,9 @@ watch(() => filtersStore.filters, async (to, from) => {
   const query = {};
   const currentQ = currentQuery();
   filtersStore.filters.forEach(f => {
-    query[`filter__${f.field}__${f.operator}`] = encodeURIComponent(f.value);
+    if (f.value) {
+      query[`filter__${f.field}__${f.operator}`] = encodeURIComponent(JSON.stringify(f.value));
+    }
   });
   // set every key in currentQ which starts with filter_ to undefined if it is not in query
   Object.keys(currentQ).forEach(k => {