Various frontend tweaks, easier entry of timeElapsed field for person…

…alBest

backend/functions/src/schema/models/github/service.ts

@@ -39,7 +39,9 @@ export class GithubService extends BaseService {
     try {
       // args should be validated already
       const validatedArgs = <any>args;
-      const response = await sendGraphqlRequest(`
+
+      if (env.github.organization) {
+        const response = await sendGraphqlRequest(`
 query { 
   viewer { 
     organization(login: "${env.github.organization}") {
@@ -65,9 +67,39 @@ query {
 }
     `);
 
-      return response.viewer.organization.repository.releases.edges.map(
-        (edge) => edge.node
-      );
+        return response.viewer.organization.repository.releases.edges.map(
+          (edge) => edge.node
+        );
+      } else {
+        // if no organization specified, lookup repository directly
+        const response = await sendGraphqlRequest(`
+query { 
+  viewer { 
+    repository(name: "${env.github.repository}") {
+      releases(first: ${validatedArgs.first}, orderBy: {
+        field: CREATED_AT,
+        direction: DESC
+      }) {
+        edges {
+          node {
+            id
+            tagName
+            name
+            descriptionHTML
+            isLatest
+            createdAt
+          }
+        }
+      }
+    }
+  }
+}
+    `);
+
+        return response.viewer.repository.releases.edges.map(
+          (edge) => edge.node
+        );
+      }
     } catch (err) {
       throw new GiraffeqlBaseError({
         message:
@@ -89,7 +121,8 @@ query {
       // args should be validated already
       const validatedArgs = <any>args;
 
-      const response = await sendGraphqlRequest(`
+      if (env.github.organization) {
+        const response = await sendGraphqlRequest(`
 query { 
   viewer { 
     organization(login: "${env.github.organization}") {
@@ -103,7 +136,23 @@ query {
 }
     `);
 
-      return response.viewer.organization.repository.latestRelease?.tagName;
+        return response.viewer.organization.repository.latestRelease?.tagName;
+      } else {
+        // if no organization specified, lookup repository directly
+        const response = await sendGraphqlRequest(`
+query { 
+  viewer { 
+    repository(name: "${env.github.repository}") {
+      latestRelease {
+        tagName
+      }
+    }
+  }
+}
+    `);
+
+        return response.viewer.repository.latestRelease?.tagName;
+      }
     } catch (err) {
       throw new GiraffeqlBaseError({
         message:

frontend/components/help/viewPbCardInterface/helpButton.vue

@@ -0,0 +1,46 @@
+<template>
+  <v-dialog v-model="dialog" width="500">
+    <template v-slot:activator="{ on, attrs }">
+      <v-btn icon v-bind="attrs" v-on="on">
+        <v-icon>mdi-help</v-icon>
+      </v-btn>
+    </template>
+    <v-card>
+      <v-card-title class="headline"> How to Use This Page </v-card-title>
+
+      <v-card-text>
+        This page shows all of the events alongside several commonly-used PB
+        types, like Single, Ao5, Ao12, etc.
+        <br /><br />
+        To fill in a time, click the <v-icon small>mdi-pencil</v-icon> button in
+        the box, then you will be prompted on how to enter the PB for that
+        specific event and PB type. <br /><br />
+        If you already had a time entered in a particular box, you can add a new
+        PB by also clicking the <v-icon small>mdi-pencil</v-icon> button. Please
+        note that CubePB saves all of your past and current PBs. It will create
+        a new PB record with your new PB for that event and PB Type.
+        <br /><br />
+        If you notice an error with one of the PBs that you have entered (for
+        example, a typo), you can remove that PB by clicking the
+        <v-icon small color="pink">mdi-close</v-icon> button.
+      </v-card-text>
+
+      <v-divider></v-divider>
+
+      <v-card-actions>
+        <v-spacer></v-spacer>
+        <v-btn color="primary" text @click="dialog = false">Close</v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dialog: false,
+    }
+  },
+}
+</script>

frontend/components/interface/crud/crudRecordInterface.vue

@@ -11,7 +11,6 @@
       :footer-props="footerOptions"
       :dense="dense"
       :expanded.sync="expandedItems"
-      :show-expand="hasNested"
       :single-expand="hasNested"
       @update:options="handleTableOptionsUpdated"
       @update:sort-by="setTableOptionsUpdatedTrigger('sort')"
@@ -278,6 +277,20 @@
                     </v-list-item-icon>
                     <v-list-item-title>Delete</v-list-item-title>
                   </v-list-item>
+                  <v-divider v-if="hasNested"></v-divider>
+                  <v-list-item
+                    v-for="(item, i) in recordInfo.expandTypes"
+                    :key="i"
+                    dense
+                    @click="openExpandDialog(props, item)"
+                  >
+                    <v-list-item-icon>
+                      <v-icon>{{ item.icon || item.recordInfo.icon }}</v-icon>
+                    </v-list-item-icon>
+                    <v-list-item-title>{{
+                      item.name || item.recordInfo.name
+                    }}</v-list-item-title>
+                  </v-list-item>
                 </v-list>
               </v-menu>
             </div>
@@ -341,56 +354,6 @@
           }"
           @click="handleRowClick(props.item)"
         >
-          <td v-if="hasNested">
-            <v-btn
-              v-if="recordInfo.expandTypes.length === 1"
-              icon
-              small
-              @click.stop="
-                toggleItemExpanded(
-                  props,
-                  props.isExpanded ? null : recordInfo.expandTypes[0]
-                )
-              "
-            >
-              <v-icon
-                >mdi-chevron-{{ props.isExpanded ? 'up' : 'down' }}</v-icon
-              >
-            </v-btn>
-
-            <v-menu v-else-if="!props.isExpanded" bottom left offset-x>
-              <template v-slot:activator="{ on, attrs }">
-                <v-btn icon small v-bind="attrs" v-on="on">
-                  <v-icon>mdi-chevron-down</v-icon>
-                </v-btn>
-              </template>
-
-              <v-list dense>
-                <v-list-item
-                  v-for="(item, i) in recordInfo.expandTypes"
-                  :key="i"
-                  dense
-                  @click="toggleItemExpanded(props, item)"
-                >
-                  <v-list-item-icon>
-                    <v-icon>{{ item.icon || item.recordInfo.icon }}</v-icon>
-                  </v-list-item-icon>
-                  <v-list-item-title>{{
-                    item.name || item.recordInfo.name
-                  }}</v-list-item-title>
-                </v-list-item>
-              </v-list>
-            </v-menu>
-
-            <v-btn
-              v-else
-              icon
-              small
-              @click.stop="toggleItemExpanded(props, null)"
-            >
-              <v-icon>mdi-chevron-up</v-icon>
-            </v-btn>
-          </td>
           <td
             v-for="(headerItem, i) in headers"
             :key="i"
@@ -456,6 +419,20 @@
                     </v-list-item-icon>
                     <v-list-item-title>Delete</v-list-item-title>
                   </v-list-item>
+                  <v-divider v-if="hasNested"></v-divider>
+                  <v-list-item
+                    v-for="(item, i) in recordInfo.expandTypes"
+                    :key="i"
+                    dense
+                    @click="toggleItemExpanded(props, item)"
+                  >
+                    <v-list-item-icon>
+                      <v-icon>{{ item.icon || item.recordInfo.icon }}</v-icon>
+                    </v-list-item-icon>
+                    <v-list-item-title>{{
+                      item.name || item.recordInfo.name
+                    }}</v-list-item-title>
+                  </v-list-item>
                 </v-list>
               </v-menu>
             </div>
@@ -508,6 +485,29 @@
       @close="dialogs.editRecord = false"
       @handleSubmit="handleListChange()"
     ></EditRecordDialog>
+    <v-dialog v-model="dialogs.expandRecord">
+      <component
+        :is="childInterfaceComponent"
+        v-if="dialogs.expandRecord && expandTypeObject"
+        :record-info="expandTypeObject.recordInfo"
+        :icon="expandTypeObject.icon"
+        :title="expandTypeObject.name"
+        :hidden-headers="expandTypeObject.excludeHeaders"
+        :locked-filters="lockedSubFilters"
+        :page-options="subPageOptions"
+        :hidden-filters="hiddenSubFilters"
+        is-child-component
+        :dense="dense"
+        @pageOptions-updated="handleSubPageOptionsUpdated"
+        @record-changed="reset({ resetExpanded: false })"
+      >
+        <template v-slot:header-action>
+          <v-btn icon @click="dialogs.expandRecord = false">
+            <v-icon>mdi-close</v-icon>
+          </v-btn>
+        </template>
+      </component>
+    </v-dialog>
   </div>
 </template>
 

frontend/components/interface/crud/special/editPersonalBestInterface.vue

@@ -69,6 +69,15 @@ export default {
         return null
       }
     },
+
+    timeElapsed() {
+      try {
+        return this.getInputValue('timeElapsed')
+      } catch {
+        return null
+      }
+    },
+
     visibleInputsArray() {
       return this.inputsArray.filter((ele) => {
         // if no event, only show event input
@@ -125,6 +134,56 @@ export default {
         this.setInputValue('setSize', val.setSize)
       }
     },
+    timeElapsed(val) {
+      if (!val) return
+
+      // if pasted value matches the correct format, don't do anything
+      if (val.match(/^(\d+:)?\d{1,2}\.\d{2}$/)) return
+
+      // if val is 1 or more digits only, parse
+      if (val.match(/^\d+$/)) {
+        return this.setInputValue('timeElapsed', this.parseTimeString(val))
+      }
+
+      // if val is 1 digit off from a correct string, must be due to a keyboard action. parse
+      if (val.match(/^(\d+:)?\d{1,2}\.\d{1,3}$/)) {
+        return this.setInputValue('timeElapsed', this.parseTimeString(val))
+      }
+    },
+  },
+
+  methods: {
+    // remove : and ., then apply them at appropriate places
+    parseTimeString(str) {
+      const strParts = [...str.replace(/\./, '').replace(/:/, '')]
+
+      // if length <= 2, pad with 0s so min length is 3
+      while (strParts.length < 3) {
+        strParts.unshift('0')
+      }
+
+      // if length > 2, insert the "." before the 2nd last digit
+      strParts.splice(-2, 0, '.')
+
+      // get rid of any excess leading 0s
+      if (strParts.length === 5 && strParts[0] === '0') {
+        strParts.shift()
+      }
+
+      // if length is greater than 5, add the ":"
+      // and get rid of any leading 0s
+      if (strParts.length > 5) {
+        strParts.splice(-5, 0, ':')
+        while (strParts[0] === '0') {
+          strParts.shift()
+        }
+      }
+
+      return strParts.join('')
+    },
+    test(str) {
+      console.log(str)
+    },
   },
 }
 </script>