From f484c2b4aa22ea5f365fc088d2b9b2a71b8b7fd4 Mon Sep 17 00:00:00 2001
From: 18alantom <2.alan.tom@gmail.com>
Date: Thu, 16 Mar 2023 10:48:28 +0530
Subject: [PATCH] fix(ux): show dbPath in the DatabaseSelector - set lighter
 colour for disabled input - if readonly not tabable

---
 src/pages/DatabaseSelector.vue | 33 +++++++++++++++++++++++----------
 1 file changed, 23 insertions(+), 10 deletions(-)

diff --git a/src/pages/DatabaseSelector.vue b/src/pages/DatabaseSelector.vue
index f65dc05b..9b927e00 100644
--- a/src/pages/DatabaseSelector.vue
+++ b/src/pages/DatabaseSelector.vue
@@ -72,6 +72,7 @@
           v-for="(file, i) in files"
           :key="file.dbPath"
           @click="selectFile(file)"
+          :title="t`${file.companyName} stored at ${file.dbPath}`"
         >
           <div
             class="
@@ -91,19 +92,24 @@
             {{ i + 1 }}
           </div>
           <div class="w-full">
-            <p class="font-medium">
-              {{ file.companyName }}
-            </p>
-            <div
-              class="text-sm text-gray-600 flex justify-between overflow-x-auto"
-            >
-              <p class="whitespace-nowrap me-2">
+            <div class="flex justify-between overflow-x-auto items-baseline">
+              <h2 class="font-medium">
+                {{ file.companyName }}
+              </h2>
+              <p class="whitespace-nowrap text-sm text-gray-600">
                 {{ formatDate(file.modified) }}
               </p>
-              <p class="text-end" v-if="fyo.store.isDevelopment">
-                {{ file.dbPath }}
-              </p>
             </div>
+            <p
+              class="
+                text-sm text-gray-600
+                overflow-x-auto
+                no-scrollbar
+                whitespace-nowrap
+              "
+            >
+              {{ truncate(file.dbPath) }}
+            </p>
           </div>
           <button
             class="
@@ -244,6 +250,13 @@ export default {
     }
   },
   methods: {
+    truncate(value) {
+      if (value.length < 72) {
+        return value;
+      }
+
+      return '...' + value.slice(value.length - 72);
+    },
     formatDate(isoDate) {
       return DateTime.fromISO(isoDate).toRelative();
     },