From 8d1ef1e088204c6cae54478288fac83ff36261ad Mon Sep 17 00:00:00 2001
From: James Chang <jc4095@nyu.edu>
Date: Fri, 2 Apr 2021 10:35:10 -0400
Subject: [PATCH] Improve mobile viewing experience

---
 .../interface/crud/crudRecordInterface.vue    | 62 +++++++++++++++++++
 .../interface/viewPbCardInterface.vue         | 45 +++++++++++++-
 frontend/layouts/default.vue                  | 12 ++--
 3 files changed, 112 insertions(+), 7 deletions(-)

diff --git a/frontend/components/interface/crud/crudRecordInterface.vue b/frontend/components/interface/crud/crudRecordInterface.vue
index b6e9294..a039679 100644
--- a/frontend/components/interface/crud/crudRecordInterface.vue
+++ b/frontend/components/interface/crud/crudRecordInterface.vue
@@ -207,6 +207,68 @@
       </template>
       <template v-slot:item="props">
         <tr
+          v-if="props.isMobile"
+          :key="props.item.id"
+          class="v-data-table__mobile-table-row"
+          @click="handleRowClick(props.item)"
+        >
+          <td
+            v-for="(headerItem, i) in headers"
+            :key="i"
+            class="v-data-table__mobile-row"
+          >
+            <div class="v-data-table__mobile-row__header">
+              {{ headerItem.text }}
+            </div>
+            <div class="v-data-table__mobile-row__cell">
+              <div v-if="headerItem.value === null">
+                <nuxt-link
+                  v-if="recordInfo.enterOptions && recordInfo.viewRecordRoute"
+                  :to="recordInfo.viewRecordRoute + '?id=' + props.item.id"
+                >
+                  <v-icon small icon>mdi-location-enter</v-icon>
+                </nuxt-link>
+                <v-icon
+                  v-if="recordInfo.shareOptions"
+                  class="mr-2"
+                  @click.stop="openEditDialog('share', props.item)"
+                  >mdi-share-variant</v-icon
+                >
+                <v-icon
+                  v-if="recordInfo.viewOptions"
+                  class="mr-2"
+                  @click.stop="openEditDialog('view', props.item)"
+                  >mdi-eye</v-icon
+                >
+                <v-icon
+                  v-if="recordInfo.editOptions"
+                  class="mr-2"
+                  @click.stop="openEditDialog('edit', props.item)"
+                  >mdi-pencil</v-icon
+                >
+                <v-icon
+                  v-if="recordInfo.deleteOptions"
+                  class="mr-2"
+                  @click.stop="openEditDialog('delete', props.item)"
+                  >mdi-delete</v-icon
+                >
+              </div>
+              <div v-else>
+                <component
+                  :is="headerItem.fieldInfo.component"
+                  v-if="headerItem.fieldInfo.component"
+                  :item="props.item"
+                  :field-path="headerItem.path"
+                ></component>
+                <span v-else>
+                  {{ getTableRowData(headerItem, props.item) }}
+                </span>
+              </div>
+            </div>
+          </td>
+        </tr>
+        <tr
+          v-else
           :key="props.item.id"
           :class="{
             'expanded-row-bg': props.isExpanded,
diff --git a/frontend/components/interface/viewPbCardInterface.vue b/frontend/components/interface/viewPbCardInterface.vue
index 98d2bef..e2f1dbc 100644
--- a/frontend/components/interface/viewPbCardInterface.vue
+++ b/frontend/components/interface/viewPbCardInterface.vue
@@ -15,6 +15,7 @@
       <v-btn icon @click="reset()">
         <v-icon>mdi-refresh</v-icon>
       </v-btn>
+      <slot name="header-action"></slot>
     </v-toolbar>
     <v-data-table
       :headers="headers"
@@ -27,7 +28,49 @@
       hide-default-footer
     >
       <template v-slot:item="props">
-        <tr :key="props.item.id">
+        <tr
+          v-if="props.isMobile"
+          :key="props.item.id"
+          class="v-data-table__mobile-table-row"
+        >
+          <td
+            v-for="(headerItem, i) in headers"
+            :key="i"
+            class="v-data-table__mobile-row"
+          >
+            <div class="v-data-table__mobile-row__header">
+              {{ headerItem.text }}
+            </div>
+            <div class="v-data-table__mobile-row__cell">
+              <EventColumn
+                v-if="headerItem.value === 'event.name'"
+                :item="props.item"
+                field-path="event"
+              ></EventColumn>
+              <span
+                v-else
+                class="d-inline-flex"
+                @click="openEditDialog('view', props.item[headerItem.value])"
+              >
+                <ResultColumn
+                  v-if="props.item[headerItem.value]"
+                  :item="props.item[headerItem.value]"
+                ></ResultColumn>
+                <v-icon
+                  v-if="editable"
+                  small
+                  right
+                  @click.stop="
+                    openAddRecordDialog(props.item.event.id, headerItem.value)
+                  "
+                  >mdi-pencil</v-icon
+                >
+              </span>
+            </div>
+          </td>
+        </tr>
+
+        <tr v-else :key="props.item.id">
           <td
             v-for="(headerItem, i) in headers"
             :key="i"
diff --git a/frontend/layouts/default.vue b/frontend/layouts/default.vue
index a51e2d1..fc7ca56 100644
--- a/frontend/layouts/default.vue
+++ b/frontend/layouts/default.vue
@@ -200,7 +200,7 @@ export default {
   data() {
     return {
       clipped: true,
-      drawer: true,
+      drawer: false,
       fixed: true,
       items: [
         {
@@ -210,16 +210,16 @@ export default {
         },
       ],
       userItems: [
-        {
-          icon: 'mdi-timer',
-          title: 'My PBs',
-          to: '/my-pbs',
-        },
         {
           icon: 'mdi-card-text',
           title: 'My PB Card',
           to: '/my-pb-card',
         },
+        {
+          icon: 'mdi-timer',
+          title: 'My PBs',
+          to: '/my-pbs',
+        },
         {
           icon: 'mdi-timetable',
           title: 'My PB Feed',