adminforth 1.3.54-next.6 → 1.3.54-next.8

package/package.json

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

package/spa/package-lock.json

@@ -34,6 +34,8 @@
         "autoprefixer": "^10.4.19",
         "eslint": "^8.57.0",
         "eslint-plugin-vue": "^9.23.0",
+        "flag-icons": "^7.2.3",
+        "i18n-iso-countries": "^7.12.0",
         "npm-run-all2": "^6.1.2",
         "postcss": "^8.4.38",
         "sass": "^1.77.2",
@@ -1906,6 +1908,13 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/diacritics": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/diacritics/-/diacritics-1.3.0.tgz",
+      "integrity": "sha512-wlwEkqcsaxvPJML+rDh/2iS824jbREk6DUMUKkEaSlxdYHeS43cClJtsWglvw2RfeXGm6ohKDqsXteJ5sP5enA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/didyoumean": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
@@ -2371,6 +2380,13 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/flag-icons": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/flag-icons/-/flag-icons-7.2.3.tgz",
+      "integrity": "sha512-X2gUdteNuqdNqob2KKTJTS+ZCvyWeLCtDz9Ty8uJP17Y4o82Y+U/Vd4JNrdwTAjagYsRznOn9DZ+E/Q52qbmqg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/flat-cache": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.2.0.tgz",
@@ -2622,6 +2638,19 @@
         "entities": "^4.4.0"
       }
     },
+    "node_modules/i18n-iso-countries": {
+      "version": "7.12.0",
+      "resolved": "https://registry.npmjs.org/i18n-iso-countries/-/i18n-iso-countries-7.12.0.tgz",
+      "integrity": "sha512-NDFf5j/raA5JrcPT/NcHP3RUMH7TkdkxQKAKdvDlgb+MS296WJzzqvV0Y5uwavSm7A6oYvBeSV0AxoHdDiHIiw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "diacritics": "1.3.0"
+      },
+      "engines": {
+        "node": ">= 12"
+      }
+    },
     "node_modules/ignore": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.1.tgz",

package/spa/package.json

@@ -38,6 +38,8 @@
     "autoprefixer": "^10.4.19",
     "eslint": "^8.57.0",
     "eslint-plugin-vue": "^9.23.0",
+    "flag-icons": "^7.2.3",
+    "i18n-iso-countries": "^7.12.0",
     "npm-run-all2": "^6.1.2",
     "postcss": "^8.4.38",
     "sass": "^1.77.2",

package/spa/src/renderers/CompactUUID.vue

@@ -1,15 +1,48 @@
 <template>
-  {{ visualValue }}
+  <span class="flex items-center"  
+    :data-tooltip-target="`tooltip-${id}`"
+    data-tooltip-placement="top"
+  >
+    {{ 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/renderers/CountryFlag.vue

@@ -0,0 +1,69 @@
+<template>
+  <span class="flex items-center">
+    <span 
+      :class="{[`fi-${countryIsoLow}`]: true, 'flag-icon': countryName}"
+      :data-tooltip-target="`tooltip-${id}`"
+    ></span>
+
+    <span v-if="meta.showCountryName" class="ms-2">{{ countryName }}</span>
+    
+    <div 
+      v-if="!meta.showCountryName && countryName"
+      :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"
+    >
+      {{ countryName }}
+      <div class="tooltip-arrow" data-popper-arrow></div>
+    </div>
+  </span>
+  
+</template>
+
+<script setup>  
+
+import { computed, ref, onMounted } from 'vue';
+import { initFlowbite } from 'flowbite';
+import 'flag-icons/css/flag-icons.min.css';
+import isoCountries from 'i18n-iso-countries';
+import enLocal from 'i18n-iso-countries/langs/en.json';
+
+isoCountries.registerLocale(enLocal);
+
+const props = defineProps(['column', 'record', 'meta', 'resource', 'adminUser']);
+
+const id = ref();
+
+
+onMounted(async () => {
+  id.value = Math.random().toString(36).substring(7);
+  await new Promise(resolve => setTimeout(resolve, 0));
+  initFlowbite();
+});
+
+const countryIsoLow = computed(() => {
+  return props.record[props.column.name]?.toLowerCase();
+});
+
+const countryName = computed(() => {
+  if (!countryIsoLow.value) {
+    return '';
+  }
+  return isoCountries.getName(countryIsoLow.value, 'en');
+});
+
+</script>
+
+<style scoped lang="scss">
+
+.flag-icon {
+  width: 2rem;
+  height: 1.5rem;
+  flex-shrink: 0;
+
+  // border radius  for background
+  border-radius: 3px;
+  // add some silkiness to the flag
+  box-shadow: inset -1px -1px 2px 0px rgba(50 50 50 / 0.3), inset 1px 1px 2px 0px rgba(255 255 255 / 0.3);
+}
+
+</style>

package/spa/src/views/ListView.vue

@@ -21,7 +21,6 @@
         @click="()=>{checkboxes = []}"
         v-if="checkboxes.length"
         data-tooltip-target="tooltip-remove-all"
-        data-tooltip-placement="bottom"
         class="flex gap-1  items-center py-1 px-3 me-2 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded border border-gray-300 hover:bg-gray-100 hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-darkListTable dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 rounded-default"
       >
         <IconBanOutline class="w-5 h-5 "/>
@@ -257,7 +256,7 @@ async function init() {
     return {
       field,
       operator,
-      value: decodeURIComponent(route.query[k])
+      value: JSON.parse(decodeURIComponent(route.query[k]))
     }
   });
   if (filters.length) {
@@ -314,7 +313,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 => {