- fix crypto.randomUUID crash when hosting on http

- fix transaction filter by resources whose name that requires html encoding
- fix filter tags black rectangle UI

front/assets/styles/theme.css

@@ -1011,4 +1011,16 @@ img, svg {
     font-size: 13px;
     font-weight: 400;
     line-height: 16px;
+}
+
+.tag-filter {
+    border-radius: 10px;
+    background: #333 !important;
+    padding: 4px 11px !important;
+    color: white;
+    font-size: 12px;
+    font-weight: 400;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }

front/composables/useForm.js

@@ -21,7 +21,8 @@ export function useForm(props) {
   const title = computed(() => (route.params.id ? titleEdit : titleAdd))
 
   let itemId = ref(null)
-  let formName = ref(`form-${crypto.randomUUID()}`)
+  let formName = ref(`form-${crypto.randomUUID ? crypto.randomUUID() : Utils.getGUID()}`)
+
 
   // let itemId = computed(() => route.params.id)
 

front/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.5.0",
+  "version": "1.5.1",
   "private": true,
   "scripts": {
     "start": "npm run dev -- -o",

front/pages/transactions/list.vue

@@ -21,7 +21,7 @@
       </div>
 
       <div class="display-flex flex-wrap gap-1">
-        <div v-for="appliedFilter in filtersDisplayList" class="app-tag van-tag van-tag--round van-tag--medium van-tag--primary">
+        <div v-for="appliedFilter in filtersDisplayList" class="tag-filter">
           <icon-filter size="14" :stroke-width="1.9" />
           <span class="ml-5">{{ appliedFilter }}</span>
         </div>
@@ -179,7 +179,10 @@ let filtersDictionary = computed(() => {
       filter: `date_before:"${DateUtils.dateToString(_filter.dateEnd)}"`,
       active: !!_filter.dateEnd,
     },
-  ]
+  ].map((item) => {
+    item.filter = item.filter.replace(/(\w+):"([^"]+)"/g, (match, key, content) => `${key}:"${encodeURIComponent(content)}"`)
+    return item
+  })
 })
 
 let filtersDisplayList = computed(() => {
@@ -233,5 +236,4 @@ onMounted(() => {
 })
 
 animateSwipeList(list)
-
 </script>

front/stores/dataStore.js

@@ -314,7 +314,6 @@ export const useDataStore = defineStore('data', {
       // let filters = [{ field: 'query', value: filtersBackendList.value.join(' ') }]
 
       let filters = [{ field: 'query', value: `tag_is:"${Tag.getDisplayNameEllipsized(this.tagTodo)}"` }]
-
       let list = await new TransactionRepository().searchTransaction({ filters })
       list = get(list, 'data') ?? []
       this.dashboard.transactionsWithTodo = TransactionTransformer.transformFromApiList(list)