newui: work on match details

src/newui/src/components/Player/Demos.vue

@@ -13,6 +13,7 @@ import { DemoApi } from 'src/api/demo';
 import { Format } from 'src/utils/formatters';
 
 import DataTable from 'components/common/DataTable.vue';
+import MatchDetails from 'components/Player/MatchDetails.vue';
 
 /* ====================== Data ====================== */
 
@@ -21,7 +22,7 @@ const props = defineProps<{
 }>();
 
 const tableRef = ref();
-const columns: DataTableHeader[] = [
+const columns = [
   { label: 'Date', name: 'timestamp', align: 'left', style: 'width: 75px' },
   // { label: 'Type', name: 'type' },
   { label: 'Rank', name: 'mmRankUpdate' },
@@ -32,7 +33,8 @@ const columns: DataTableHeader[] = [
   { label: 'D', name: 'deaths' },
   { label: 'KDD', name: 'kdd' },
   { label: 'ADR', name: 'adr' },
-];
+] as DataTableHeader[];
+const matchDetailsRef = ref();
 
 /* ====================== Methods ====================== */
 
@@ -53,11 +55,22 @@ const formatDate = (timestamp: number) => {
 
   return date.formatDate(timestamp * 1000, dateFormat);
 };
+
+const showMatchDetails = (row: DemoResponse) => {
+  matchDetailsRef.value.open(row.demoid);
+};
 </script>
 
 <template>
   <q-page class="">
-    <DataTable ref="tableRef" :columns="columns" entityName="demo" :apiCall="getDemos" rowsPerPage="25">
+    <DataTable
+      ref="tableRef"
+      :apiCall="getDemos"
+      :columns="columns"
+      entityName="demo"
+      rowsPerPage="25"
+      @click:row="showMatchDetails"
+    >
       <template #timestamp="item: DemoResponse">
         {{ formatDate(item.timestamp) }}
       </template>
@@ -68,11 +81,11 @@ const formatDate = (timestamp: number) => {
 
       <template #mmRankUpdate="{ mmRankUpdate }: DemoResponse">
         <q-img
-          fit="fill"
+          :src="`images/ranks/${(mmRankUpdate && mmRankUpdate.rankNew) ?? 0}.png`"
           class="my-1 rounded"
-          width="45px"
+          fit="fill"
           height="19px"
-          :src="`images/ranks/${(mmRankUpdate && mmRankUpdate.rankNew) ?? 0}.png`"
+          width="45px"
         >
           <q-tooltip class="bg-sky-500/95 text-sm shadow-4 text-black" anchor="top middle" self="bottom middle">
             {{ RANKS[(mmRankUpdate && mmRankUpdate.rankNew) ?? 0] }}
@@ -99,6 +112,7 @@ const formatDate = (timestamp: number) => {
         {{ Format.number(damage / roundsWithDamageInfo) }}
       </template>
     </DataTable>
+    <MatchDetails ref="matchDetailsRef" />
   </q-page>
 </template>
 

src/newui/src/components/Player/MatchDetails.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+/* ====================== Data ====================== */
+
+// const props = defineProps<{}>();
+
+const demoId = ref(0);
+const isVisible = ref(false);
+
+/* ====================== Methods ====================== */
+
+const emit = defineEmits(['close']);
+
+const open = (demo: number) => {
+  demoId.value = demo;
+  isVisible.value = true;
+};
+
+const close = () => {
+  isVisible.value = false;
+  emit('close');
+};
+
+/* ====================== Hooks ====================== */
+
+defineExpose({ open, close });
+</script>
+
+<template>
+  <q-dialog v-model="isVisible" content-class="dialog" @hide="close">
+    <q-card class="hsb-min-width" flat>
+      <q-card-section class="row items-center q-pb-none">
+        <q-space />
+        <q-btn icon="close" flat round dense v-close-popup />
+      </q-card-section>
+
+      <q-card-section> Demo ID: {{ demoId }} </q-card-section>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped lang="scss">
+.hsb-min-width {
+  min-width: 1040px;
+}
+</style>

src/newui/src/components/common/DataTable.vue

@@ -1,15 +1,15 @@
 <script setup lang="ts">
 import { AxiosError } from 'axios';
 import debounce from 'lodash/debounce';
-import snakeCase from 'lodash/snakeCase';
 import get from 'lodash/get';
+import has from 'lodash/has';
+import snakeCase from 'lodash/snakeCase';
 import { useQuasar } from 'quasar';
 import { computed, onMounted, ref } from 'vue';
 
 import { DataTableHeader, DataTablePagination, DataTableRequestDetails } from '@/types/dataTable';
 
 import notification from 'src/utils/notification';
-import { has } from 'lodash';
 
 /* ====================== Data ====================== */
 
@@ -54,7 +54,7 @@ const headers = computed(() => {
     }
 
     return el;
-  });
+  }) as DataTableHeader[];
 
   if (props.addActionsSlot) {
     headers = headers.concat([{ classes: 'hs-action', field: 'actions', label: '', name: 'actions', sortable: false }]);
@@ -65,6 +65,10 @@ const headers = computed(() => {
 
 /* ====================== Methods ====================== */
 
+const emit = defineEmits<{
+  (e: 'click:row', item: any): void;
+}>();
+
 const getData = debounce(async (tableProps: DataTableRequestDetails) => {
   isLoading.value = true;
   pagination.value.page = tableProps.pagination?.page;
@@ -111,14 +115,18 @@ const refresh = () => {
   tableRef.value.requestServerInteraction();
 };
 
+const rowClicked = (evt: Event, row: any) => {
+  emit('click:row', row);
+};
+
 /* ====================== Hooks ====================== */
 
 defineExpose({
   refresh,
 });
 
 onMounted(async () => {
-  tableRef.value.requestServerInteraction();
+  refresh();
 });
 </script>
 
@@ -141,6 +149,7 @@ onMounted(async () => {
     separator="horizontal"
     wrap-cells
     @request="getData"
+    @row-click="rowClicked"
   >
     <template #top>
       <div class="flex items-baseline justify-between w-full mb-2" v-show="pagination.rowsNumber > 0">

src/newui/src/types/dataTable.ts

@@ -12,7 +12,7 @@ export type DataTableHeader = {
   /**
    * Row Object property to determine value for this column or function which maps to the required property
    */
-  field?: string | CallableFunction;
+  field: string | CallableFunction;
 
   /**
    * If we use visible-columns, this col will always be visible