Rework columns in table view

rommapp · Jan 10, 2025 · 9e4e716 · 9e4e716
1 parent de74688
commit 9e4e716
Show file tree

Hide file tree

Showing 4 changed files with 84 additions and 37 deletions.
diff --git a/backend/models/rom.py b/backend/models/rom.py
@@ -167,7 +167,7 @@ def alternative_names(self) -> list[str]:
     @property
     def first_release_date(self) -> int:
         if self.igdb_metadata:
-            return self.igdb_metadata.get("first_release_date", 0)
+            return self.igdb_metadata.get("first_release_date", 0) * 1000
         return 0
 
     @property

diff --git a/frontend/src/components/Details/Title.vue b/frontend/src/components/Details/Title.vue
@@ -11,7 +11,7 @@ import { useDisplay } from "vuetify";
 const props = defineProps<{ rom: DetailedRom }>();
 const { smAndDown } = useDisplay();
 const releaseDate = new Date(
-  Number(props.rom.first_release_date) * 1000,
+  Number(props.rom.first_release_date),
 ).toLocaleDateString("en-US", {
   day: "2-digit",
   month: "short",

diff --git a/frontend/src/components/common/Game/FavBtn.vue b/frontend/src/components/common/Game/FavBtn.vue
@@ -88,9 +88,8 @@ async function switchFromFavourites() {
     @click.stop="switchFromFavourites"
     class="translucent text-shadow"
     rouded="0"
-    size="x-small"
+    size="small"
     variant="text"
-    icon
     ><v-icon color="romm-accent-1">{{
       collectionsStore.isFav(rom) ? "mdi-star" : "mdi-star-outline"
     }}</v-icon></v-btn

diff --git a/frontend/src/components/common/Game/Table.vue b/frontend/src/components/common/Game/Table.vue
@@ -46,37 +46,37 @@ const HEADERS = [
     sortable: true,
     key: "name",
   },
-  {
-    title: "",
-    align: "start",
-    sortable: false,
-    key: "is_fav",
-  },
   {
     title: "Size",
     align: "start",
     sortable: true,
     key: "file_size_bytes",
   },
   {
-    title: "Reg",
+    title: "Added",
     align: "start",
     sortable: true,
-    key: "regions",
+    key: "created_at",
   },
   {
-    title: "Lang",
+    title: "Released",
     align: "start",
     sortable: true,
+    key: "first_release_date",
+  },
+  {
+    title: "Languages",
+    align: "start",
+    sortable: false,
     key: "languages",
   },
   {
-    title: "Rev",
+    title: "Regions",
     align: "start",
-    sortable: true,
-    key: "revision",
+    sortable: false,
+    key: "regions",
   },
-  { title: "", align: "end", key: "actions", sortable: false },
+  { title: "", align: "center", key: "actions", sortable: false },
 ] as const;
 
 const selectedRomIDs = computed(() => selectedRoms.value.map((rom) => rom.id));
@@ -170,26 +170,26 @@ onMounted(() => {
     </template>
     <template #item.name="{ item }">
       <td>
-        <v-list-item :min-width="400" class="px-0">
+        <v-list-item class="px-0">
           <template #prepend>
             <r-avatar-rom :rom="item" />
           </template>
           <v-row no-gutters>
-            <v-col>{{ item.name }}</v-col></v-row
-          >
-          <v-row no-gutters
-            ><v-col class="text-romm-accent-1">{{
-              item.file_name
-            }}</v-col></v-row
-          >
+            <v-col>{{ item.name }}</v-col>
+          </v-row>
+          <v-row no-gutters>
+            <v-col class="text-romm-accent-1">
+              {{ item.file_name }}
+            </v-col>
+          </v-row>
           <template #append>
             <v-chip
               v-if="
                 item.sibling_roms &&
                 item.sibling_roms.length > 0 &&
                 showSiblings
               "
-              class="translucent-dark ml-2"
+              class="translucent-dark ml-4"
               size="x-small"
             >
               <span class="text-caption">+{{ item.sibling_roms.length }}</span>
@@ -198,26 +198,66 @@ onMounted(() => {
         </v-list-item>
       </td>
     </template>
-    <template #item.is_fav="{ item }">
-      <fav-btn :rom="item" />
-    </template>
     <template #item.file_size_bytes="{ item }">
       <v-chip size="x-small" label>{{
         formatBytes(item.file_size_bytes)
       }}</v-chip>
     </template>
-    <template #item.regions="{ item }">
-      <span class="px-1" v-for="region in item.regions">
-        {{ regionToEmoji(region) }}
-      </span>
+    <template #item.created_at="{ item }">
+      <v-chip v-if="item.created_at" size="x-small" label>{{
+        new Date(item.created_at).toLocaleDateString("en-US", {
+          day: "2-digit",
+          month: "short",
+          year: "numeric",
+        })
+      }}</v-chip>
+    </template>
+    <template #item.first_release_date="{ item }">
+      <v-chip v-if="item.first_release_date" size="x-small" label>{{
+        new Date(item.first_release_date).toLocaleDateString("en-US", {
+          day: "2-digit",
+          month: "short",
+          year: "numeric",
+        })
+      }}</v-chip>
     </template>
     <template #item.languages="{ item }">
-      <span class="px-1" v-for="language in item.languages">
-        {{ languageToEmoji(language) }}
-      </span>
+      <div class="d-flex">
+        <span
+          class="emoji"
+          v-for="language in item.languages.slice(0, 3)"
+          :title="`Languages: ${item.languages.join(', ')}`"
+          :class="{ 'emoji-collection': item.regions.length > 3 }"
+        >
+          {{ languageToEmoji(language) }}
+        </span>
+        <spa class="reglang-super">
+          {{
+            item.languages.length > 3
+              ? `&nbsp;+${item.languages.length - 3}`
+              : ""
+          }}
+        </spa>
+      </div>
+    </template>
+    <template #item.regions="{ item }">
+      <div class="d-flex">
+        <span
+          class="emoji"
+          v-for="region in item.regions.slice(0, 3)"
+          :title="`Regions: ${item.regions.join(', ')}`"
+          :class="{ 'emoji-collection': item.regions.length > 3 }"
+        >
+          {{ regionToEmoji(region) }}
+        </span>
+      </div>
+      <spa class="reglang-super">
+        {{ item.regions.length > 3 ? `&nbsp;+${item.regions.length - 3}` : "" }}
+      </spa>
     </template>
     <template #item.actions="{ item }">
-      <v-btn-group divided density="compact">
+      <v-btn-group density="compact">
+        <fav-btn :rom="item" />
         <v-btn
           :disabled="downloadStore.value.includes(item.id)"
           download
@@ -291,3 +331,11 @@ onMounted(() => {
     </template>
   </v-data-table>
 </template>
+
+<style scoped>
+.reglang-super {
+  vertical-align: super;
+  font-size: 75%;
+  opacity: 75%;
+}
+</style>