From 08acaf9c466a034a9b79941ac4f517bc64d544a3 Mon Sep 17 00:00:00 2001
From: Georges-Antoine Assi <contact@me.gantoine.com>
Date: Wed, 28 Aug 2024 22:48:32 -0400
Subject: [PATCH] [ROMM-1113] Add file path in rom edit window

---
 .../components/common/Game/Dialog/EditRom.vue | 38 ++++++++++++++-----
 1 file changed, 28 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/common/Game/Dialog/EditRom.vue b/frontend/src/components/common/Game/Dialog/EditRom.vue
index d81bcaac7..8223abaaa 100644
--- a/frontend/src/components/common/Game/Dialog/EditRom.vue
+++ b/frontend/src/components/common/Game/Dialog/EditRom.vue
@@ -12,7 +12,7 @@ import { useDisplay, useTheme } from "vuetify";
 
 // Props
 const theme = useTheme();
-const { lgAndUp } = useDisplay();
+const { lgAndUp, smAndUp } = useDisplay();
 const heartbeat = storeHeartbeat();
 const route = useRoute();
 const show = ref(false);
@@ -115,7 +115,7 @@ function closeDialog() {
     <template #content>
       <v-row class="align-center pa-2" no-gutters>
         <v-col cols="12" md="8" lg="8" xl="9">
-          <v-row class="pa-2" no-gutters>
+          <v-row class="px-2" no-gutters>
             <v-col>
               <v-text-field
                 v-model="rom.name"
@@ -128,23 +128,34 @@ function closeDialog() {
               />
             </v-col>
           </v-row>
-          <v-row class="pa-2" no-gutters>
+          <v-row class="px-2" no-gutters>
             <v-col>
               <v-text-field
                 v-model="rom.file_name"
                 class="py-2"
-                :rules="[
-                  (value: string) => !!value
-                ]"
-                label="File name"
+                :rules="[(value: string) => !!value]"
+                label="Filename"
                 variant="outlined"
                 required
                 hide-details
                 @keyup.enter="updateRom()"
-              />
+              >
+                <v-label
+                  v-if="smAndUp"
+                  id="file-name-label"
+                  class="text-caption"
+                >
+                  <v-icon size="small" class="mr-1">
+                    mdi-folder-file-outline
+                  </v-icon>
+                  <span>
+                    /romm/library/{{ rom.file_path }}/{{ rom.file_name }}
+                  </span>
+                </v-label>
+              </v-text-field>
             </v-col>
           </v-row>
-          <v-row class="pa-2" no-gutters>
+          <v-row class="px-2" no-gutters>
             <v-col>
               <v-textarea
                 v-model="rom.summary"
@@ -173,7 +184,7 @@ function closeDialog() {
                       @click="
                         emitter?.emit(
                           'showSearchCoverDialog',
-                          rom?.name as string
+                          rom?.name as string,
                         )
                       "
                     >
@@ -231,3 +242,10 @@ function closeDialog() {
   max-height: 330px;
 }
 </style>
+
+<style>
+#file-name-label {
+  position: absolute;
+  right: 1rem;
+}
+</style>