Merge pull request #208 from Worxstr/shift-features

Shift features

Author: alexwohlbruck

src/components/ClockButtons.vue

@@ -19,7 +19,7 @@
         v-btn(text color='success' @click='clockOut(true)' data-cy='confirm-clock-out-button') Yes, clock out
 
       v-fade-transition
-        v-overlay(v-if="loading", absolute, opacity=".2")
+        v-overlay(v-if='togglingClock' absolute opacity='.2')
           v-progress-circular(indeterminate)
 
   .d-flex.flex-row.justify-center.gap-small

src/components/ShiftList.vue

@@ -29,7 +29,7 @@ div
         v-list-item-content
           v-list-item-title
             router-link.alt-style.my-1.font-weight-medium(
-              :to="{name: 'shift', params: {shiftId: shift.id}}"
+              :to="{name: 'shift', params: {jobId: shift.job_id, shiftId: shift.id}}"
             ) {{ shift.site_location }}
 
           v-list-item-subtitle
@@ -40,13 +40,14 @@ div
 
             //- span(v-if='!userIsManager') {Job name} • {n} tasks
 
-        v-chip.mx-4.px-2.flex-grow-0(
-          v-if="shift.active",
-          label,
-          outlined,
-          small,
-          color="green"
-        ) Active
+        //- // TODO
+        //- v-chip.mx-4.px-2.flex-grow-0(
+        //-   v-if="shift.active",
+        //-   label,
+        //-   outlined,
+        //-   small,
+        //-   color="green"
+        //- ) Active
                   
         v-list-item-action(v-if='userIsManager || i != 0')
           .d-flex.flex-column.align-end
@@ -77,7 +78,7 @@ div
         v-list-item-action(:class="{'ml-0': userIsManager}")
           v-btn(
             icon
-            :to="{name: 'shift', params: {shiftId: shift.id}}"
+            :to="{name: 'shift', params: {jobId: shift.job_id, shiftId: shift.id}}"
           )
             v-icon mdi-chevron-right
 </template>

src/components/UpcomingShiftList.vue

@@ -4,12 +4,12 @@
     v-toolbar-title
       h6.text-h6 Upcoming shifts
 
-  div(v-if='!upcomingShifts.length')
+  div(v-if='!loading && !upcomingShifts.length')
     p.text-center
       | You have no shifts assigned. Go have fun! 🥂🎉
 
   div(v-else)
-    shift-list(:shifts='upcomingShifts')
+    shift-list(:shifts='upcomingShifts' :loading='loading')
 
     .my-4.d-flex.justify-center
       v-btn(
@@ -39,7 +39,6 @@ export default class UpcomingShiftList extends Vue {
   loading = false
 
   async mounted() {
-    console.log(getUpcomingShifts)
     this.loadUpcomingShifts()
   }
 

src/components/inputs/RecurringDateInput.vue

@@ -8,7 +8,6 @@
       outlined
       label='Start'
       hide-details
-      :rules='rules.start'
     )
     //- End date
     datetime-input(
@@ -241,12 +240,6 @@ export default class RecurringDateInput extends Vue {
       bymonthday: [exists('Day required')],
       bysetpos: [exists('Ordinal required')],
       byweekday: [exists('Day required')],
-      start: [
-        exists('Start date required'),
-        (v: string) => {
-          return this.duration > 0 || 'Start date must be before end date'
-        },
-      ],
       end: [
         exists('End date required'),
         (v: string) => {

src/layouts/Breadcrumbs.vue

@@ -3,6 +3,7 @@ v-breadcrumbs.nav-breadcrumbs.pl-1.d-flex.flex-nowrap(
   :items="breadcrumbs",
   large,
   v-if="!$route.meta.landing"
+  ref='scrollContainer'
 )
   template(v-slot:item="{ item }")
     v-breadcrumbs-item.subtitle-1.font-weight-medium(
@@ -14,10 +15,26 @@ v-breadcrumbs.nav-breadcrumbs.pl-1.d-flex.flex-nowrap(
 </template>
 
 <script lang="ts">
-import { Component, Vue } from 'vue-property-decorator'
+import { Component, Vue, Watch } from 'vue-property-decorator'
+
+// Find a nested object by dot-syntax string
+// ex. lookup(obj, 'a.b.c') => obj.a.b.c
+function lookup(obj: any, path: string): any {
+  return path.split('.').reduce((prev, curr) => {
+    return prev ? prev[curr] : undefined
+  }, obj)
+}
 
 @Component
 export default class Breadcrumbs extends Vue {
+
+  @Watch('breadcrumbs')
+  breadcrumbsChanged(newVal: any, oldVal: any) {
+    // Scroll to right of container automatically
+    const container: any = this.$refs.scrollContainer
+    container.$el.scrollLeft = container.$el.scrollWidth
+  }
+
   get breadcrumbs() {
 
     /* This generates breadcrumbs for the toolbar dynamically
@@ -26,70 +43,73 @@ export default class Breadcrumbs extends Vue {
        the route metadata can be used to map the parameter name to an item
        in the store state. For example, the metadata
        meta: {
-         paramMap: {
-           jobId: 'jobs',
+         paramMap: [{
+           param: 'jobId',
+           store: 'jobs',
            prop: 'name'
-         }
+         }]
        }
        will replace the :jobId param with the 'name' property of the job in state.jobs
        that matches the id given.
        paramMap can also contain a prop 'propBuilder' that will specify how to build
        the text string
     */
-
+   
+    // ex. ['jobs', '114']
     const segments = this.$route.path
       .replace('/', '')
       .split('/')
 
+    // ex. ['jobs', ':jobId]
     const matched = this.$route.matched[this.$route.matched.length - 1].path
       .replace('/', '')
       .split('/')
 
     return segments.map((pathSegment, i) => {
       let dynamicName
       try {
-        // Get param mapping from route metadata
-        const paramMap = this.$route.meta?.paramMap
         // Extract the param name
+        // ex. jobId
         const param = matched[i].replace(':', '')
-
-        // Get the path in the state of the object
-        const defaultStatePath = segments[0]
-        const customStatePath = paramMap[param]?.split('.') // Split the param map into an array of the nested state keys
+        
+        // Get param mapping from route metadata
+        // ex. { param: 'jobId', store: 'jobs', prop: 'name' }
+        const paramMap = this.$route.meta?.paramMap.find((m: any) => m.param === param)
 
         // Find the item in the store state
-        let item = this.$store.state
-        if (customStatePath) {
-          // A custom path in the store was defined, ex. 'messages.conversations'
-          customStatePath.forEach((key: string) => {
-            item = item[key]
-          })
-        }
-        else {
-          // Use the first name in the path
-          item = item[defaultStatePath]
-        }
-        item = item.byId[pathSegment]
+        const item = lookup(this.$store.state, paramMap.store)
+          .byId[this.$route.params[param]]
 
         // Use the specified prop or propBuilder to get the name of the object
-        dynamicName = paramMap.propBuilder ? paramMap.propBuilder(item) : item[paramMap.prop || 'name']
+        dynamicName = paramMap.propBuilder
+          ? paramMap.propBuilder(item)
+          : lookup(item, paramMap.prop || 'name')
       }
       catch (e) {
         dynamicName = pathSegment
       }
 
-      return {
-        text: matched[i]?.includes(':') ? dynamicName : pathSegment,
-        to: '/' + segments.slice(0, i + 1).join('/'),
+      // Build link text and path
+      const text = matched[i]?.includes(':') ? dynamicName : pathSegment
+      const to = '/' + segments.slice(0, i + 1).join('/')
+
+      // Check if the link exists. If not, we only send back the text with no link
+      const link = this.$router.resolve(to)
+      const hasActiveRoute = link?.resolved?.name !== 'notFound'
+
+      if (hasActiveRoute) {
+        return { text, to }
       }
+      return { text }
     })
   }
 }
 </script>
 
 <style lang="scss">
 .nav-breadcrumbs {
-  overflow: hidden;
+  overflow-y: hidden;
+  overflow-x: auto;
   
   li {
     white-space: nowrap;

src/layouts/NavDrawer.vue

@@ -101,7 +101,7 @@ export default class NavDrawer extends Vue {
   }
   
   get mini() {
-    return this.$store.state.app.preferences.miniNav
+    return this.$vuetify.breakpoint.mdAndUp ? this.$store.state.app.preferences.miniNav : false
   }
 
   toggleMiniNav() {

src/router/index.ts

@@ -201,22 +201,27 @@ const routes = [
     name: 'job',
     component: Job,
     meta: {
-      paramMap: {
-        jobId: 'jobs',
+      paramMap: [{
+        param: 'jobId',
+        store: 'jobs',
         prop: 'name'
-      }
+      }]
     }
   },
   {
-    path: '/shifts/:shiftId',
+    path: '/jobs/:jobId/shifts/:shiftId',
     name: 'shift',
     component: Shift,
     meta: {
-      paramMap: {
-        // TODO: Need to use a getter for this. Come back to it
-        // shiftId: 'shifts',
-        // prop: ''
-      }
+      paramMap: [{
+        param: 'jobId',
+        store: 'jobs',
+        prop: 'name'
+      }, {
+        param: 'shiftId',
+        store: 'shifts',
+        prop: 'site_location'
+      }]
     }
   },
   {
@@ -233,7 +238,6 @@ const routes = [
     component: Schedule,
     meta: {
       icon: 'mdi-calendar-multiselect',
-      fullHeight: true,
       hideNav: true,
     }
   },
@@ -251,10 +255,11 @@ const routes = [
     name: 'user',
     component: User,
     meta: {
-      paramMap: {
-        userId: 'users',
+      paramMap: [{
+        param: 'userId',
+        store: 'users',
         propBuilder: fullName
-      },
+      }],
     }
   },
   {
@@ -272,12 +277,13 @@ const routes = [
         component: Conversation,
         meta: {
           fullHeight: true,
-          paramMap: {
-            conversationId: 'messages.conversations',
+          paramMap: [{
+            param: 'conversationId',
+            store: 'messages.conversations',
             propBuilder(conversation: MessagesTypes.Conversation) {
               return groupNameList(conversation, usersStore.getters.me(usersStore.state))
             },
-          },
+          }],
         },
       },
     ],

src/store/schedule.ts

@@ -50,9 +50,9 @@ const getters = {
           else
             color = hashColor(event.job_id)
           break
-        case 'user':
-          if (rootState.users.byId[event.contractor_id]?.contractor_info?.color)
-            color = rootState.users.byId[event.contractor_id]?.contractor_info?.color
+        case 'contractor':
+          if (rootState.users.byId[event.contractor_id]?.additional_info?.color)
+            color = rootState.users.byId[event.contractor_id]?.additional_info?.color
           else
             color = hashColor(event.contractor_id)
           break

src/util/helpers.ts

@@ -34,7 +34,7 @@ const colorsToUse: any = {...colors}
 delete colorsToUse.grey
 delete colorsToUse.shades
 delete colorsToUse.brown
-delete colorsToUse['blueGrey']
+delete colorsToUse.blueGrey
 
 const colorList = Object.keys(colorsToUse)
 const shades = ['base', /* 'accent1', */ 'accent2', 'accent3', 'accent4']
@@ -50,7 +50,7 @@ export function hashColor(input: number | string) {
   }
   else num = input
 
-  const i = Math.floor(Math.PI * 1.8 * num) % (colorList.length * shades.length)
+  const i = Math.floor(Math.PI * 3548 * num) % (colorList.length * shades.length)
   const color = colorList[i % colorList.length]
   const shade = shades[Math.floor(i / colorList.length)]