ayanova/src/views/svc-schedule.vue

@@ -3,31 +3,37 @@
     <gz-error :error-box-message="formState.errorBoxMessage"></gz-error>
     <!-- {{ categories }}<br />
     {{ events }} -->
+
     <v-sheet height="64">
       <v-toolbar flat dense class="ml-n3">
         <v-btn
-          outlined
-          :small="$vuetify.breakpoint.xs"
-          :large="$vuetify.breakpoint.md"
+          text
+          :small="isXS"
+          :large="issmAndUp"
           class="xxmr-4"
           @click="setToday"
         >
           {{ $ay.t("DateRangeToday") }}
         </v-btn>
         <v-btn fab text small @click="prev">
-          <v-icon small>$prev</v-icon>
+          <v-icon :small="isXS">$prev</v-icon>
         </v-btn>
         <v-btn fab text small @click="next">
-          <v-icon small>$next</v-icon>
+          <v-icon :small="isXS">$next</v-icon>
         </v-btn>
         <v-toolbar-title v-if="$refs.calendar">
-          <v-btn small text @click="viewType = 'month'">
+          <v-btn
+            :small="isXS"
+            :large="issmAndUp"
+            text
+            @click="viewType = 'month'"
+          >
             {{ $refs.calendar.title }}</v-btn
           >
         </v-toolbar-title>
 
-        <v-spacer v-if="!$vuetify.breakpoint.xs"></v-spacer>
-        <template v-if="!$vuetify.breakpoint.xs">
+        <v-spacer v-if="issmAndUp"></v-spacer>
+        <template v-if="issmAndUp">
           <gz-tag-picker
             class="mr-3"
             :place-holder="$ay.t('FilterUsers')"
@@ -39,13 +45,26 @@
             @input="refresh"
           ></gz-tag-picker>
         </template>
-        <v-btn class="mr-3" fab text small @click="settingsDialog = true">
-          <v-icon small>$ayiCog</v-icon>
+        <v-btn
+          class="mr-3"
+          fab
+          text
+          :small="isXS"
+          :large="issmAndUp"
+          @click="settingsDialog = true"
+        >
+          <v-icon :small="isXS" >$ayiCog</v-icon>
         </v-btn>
 
         <v-menu bottom right>
           <template v-slot:activator="{ on, attrs }">
-            <v-btn small outlined v-bind="attrs" v-on="on">
+            <v-btn
+              :small="isXS"
+              :large="issmAndUp"
+              text
+              v-bind="attrs"
+              v-on="on"
+            >
               <span>{{ typeToLabel() }}</span>
               <v-icon right>$sort</v-icon>
             </v-btn>
@@ -105,8 +124,15 @@
         category-show-all
         :categories="categories"
         category-text="name"
-        category-for-invalid="UNKNOWN USER"
+        category-for-invalid="????"
       >
+        <template v-slot:category="{ category }">
+          <div @click="openUserSchedule(category.id)" class="text-center">
+            <v-btn text class="text-none">{{ category.name }}</v-btn>
+          </div>
+        </template>
+
+        <!-- <div class="v-calendar-category__category">Clarabelle Turcotte - SubContractor</div> -->
         <template v-slot:event="{ event, eventSummary }">
           <div class="v-event-draggable">
             <span
@@ -270,7 +296,7 @@
                   $ay.t("Open")
                 }}</v-btn>
 
-                <v-spacer v-if="!$vuetify.breakpoint.xs"></v-spacer>
+                <v-spacer v-if="issmAndUp"></v-spacer>
 
                 <v-btn color="primary" text @click="moreInfoDialog = false">
                   {{ $ay.t("Close") }}
@@ -289,7 +315,7 @@
             <v-card-title>{{ $ay.t("ScheduleOptions") }} </v-card-title>
             <v-card-text>
               <v-row no-gutters>
-                <template v-if="$vuetify.breakpoint.xs">
+                <template v-if="isXS">
                   <v-col cols="12">
                     <gz-tag-picker
                       :label="$ay.t('FilterUsers')"
@@ -344,7 +370,7 @@
               <v-btn text @click="settingsDialog = false" color="primary">{{
                 $ay.t("Cancel")
               }}</v-btn>
-              <v-spacer v-if="!$vuetify.breakpoint.xs"></v-spacer>
+              <v-spacer v-if="issmAndUp"></v-spacer>
               <v-btn
                 color="primary"
                 text
@@ -427,6 +453,9 @@ export default {
     async refresh() {
       await this.fetchEvents({ start: null, end: null });
     },
+    openUserSchedule: function(id) {
+      console.log("STUB OPEN USER SCHEDULE FOR " + id);
+    },
     openObject: function(type, id) {
       window.$gz.eventBus.$emit("openobject", {
         type: type,
@@ -862,6 +891,13 @@ export default {
       return window.$gz.util.DaysOfWeekToWeekdays(
         this.formUserOptions.excludeDaysOfWeek
       );
+    },
+    isXS() {
+      //console.log(this.$vuetify.breakpoint);
+      return this.$vuetify.breakpoint.xs;
+    },
+    issmAndUp() {
+      return this.$vuetify.breakpoint.smAndUp;
     }
   }
 };