From 721a7ac847ddf4399a99d756dd2ec06cb279be02 Mon Sep 17 00:00:00 2001
From: John Cardinal <support@ayanova.com>
Date: Mon, 13 Sep 2021 23:32:41 +0000
Subject: [PATCH]

---
 ayanova/devdocs/todo.txt            |   8 +-
 ayanova/src/views/home-schedule.vue | 225 +++++++++++++++++++++++++++-
 2 files changed, 227 insertions(+), 6 deletions(-)

diff --git a/ayanova/devdocs/todo.txt b/ayanova/devdocs/todo.txt
index 1f3ccfc1..a061b2c1 100644
--- a/ayanova/devdocs/todo.txt
+++ b/ayanova/devdocs/todo.txt
@@ -37,6 +37,9 @@
 			user selects filter, techs to show, what order etc and then it just uses that when they select it as a view
 			Views could also drive schedule type dashboard widgets as well
 	Copy the fuck out of google calendar UI layout, it's popular and easy to use https://calendar.google.com/calendar/u/0/r/week?pli=1
+		however it is a bit too complex in many areas so just stick to the bare essentials and cleanliness a.m.a.p.
+		This I like about it:
+			One single PLUS button prominently displayed to add an appointment
 		
 
 	CASES
@@ -48,7 +51,10 @@
 		1686 - ability to set how much stuff displays / alt schedule / calendar view??? Not sure really, it's a mish mash
 		729 - mass misc omnibus copied to above the useful bits
 
-
+SCHEDULE TODO:
+	Basically just replicate google calendar UI with our own related objects driving it
+	Day, Week, Month, Year, Schedule (not actually a calendar, but a list, do we need??), 4 days views
+	Data list functionality with filters to drive schedule, however people select them in the UI rather than the way we filter datalists now
 
 
 
diff --git a/ayanova/src/views/home-schedule.vue b/ayanova/src/views/home-schedule.vue
index 5a034b43..cd3b0c59 100644
--- a/ayanova/src/views/home-schedule.vue
+++ b/ayanova/src/views/home-schedule.vue
@@ -1,14 +1,106 @@
 <template>
-  <UnderConstruction data-cy="underconstruction" />
+  <v-row class="fill-height">
+    <v-col>
+      <v-sheet height="64">
+        <v-toolbar flat>
+          <v-btn outlined class="mr-4" color="grey darken-2" @click="setToday">
+            Today
+          </v-btn>
+          <v-btn fab text small color="grey darken-2" @click="prev">
+            <v-icon small>
+              mdi-chevron-left
+            </v-icon>
+          </v-btn>
+          <v-btn fab text small color="grey darken-2" @click="next">
+            <v-icon small>
+              mdi-chevron-right
+            </v-icon>
+          </v-btn>
+          <v-toolbar-title v-if="$refs.calendar">
+            {{ $refs.calendar.title }}
+          </v-toolbar-title>
+          <v-spacer></v-spacer>
+          <v-menu bottom right>
+            <template v-slot:activator="{ on, attrs }">
+              <v-btn outlined color="grey darken-2" v-bind="attrs" v-on="on">
+                <span>{{ typeToLabel[type] }}</span>
+                <v-icon right>
+                  mdi-menu-down
+                </v-icon>
+              </v-btn>
+            </template>
+            <v-list>
+              <v-list-item @click="type = 'day'">
+                <v-list-item-title>Day</v-list-item-title>
+              </v-list-item>
+              <v-list-item @click="type = 'week'">
+                <v-list-item-title>Week</v-list-item-title>
+              </v-list-item>
+              <v-list-item @click="type = 'month'">
+                <v-list-item-title>Month</v-list-item-title>
+              </v-list-item>
+              <v-list-item @click="type = '4day'">
+                <v-list-item-title>4 days</v-list-item-title>
+              </v-list-item>
+            </v-list>
+          </v-menu>
+        </v-toolbar>
+      </v-sheet>
+      <!-- HEIGHT="600" -->
+      <v-sheet>
+        <v-calendar
+          ref="calendar"
+          v-model="focus"
+          color="primary"
+          :events="events"
+          :event-color="getEventColor"
+          :type="type"
+          @click:event="showEvent"
+          @click:more="viewDay"
+          @click:date="viewDay"
+          @change="updateRange"
+        ></v-calendar>
+        <v-menu
+          v-model="selectedOpen"
+          :close-on-content-click="false"
+          :activator="selectedElement"
+          offset-x
+        >
+          <v-card color="grey lighten-4" min-width="350px" flat>
+            <v-toolbar :color="selectedEvent.color" dark>
+              <v-btn icon>
+                <v-icon>mdi-pencil</v-icon>
+              </v-btn>
+              <v-toolbar-title v-html="selectedEvent.name"></v-toolbar-title>
+              <v-spacer></v-spacer>
+              <v-btn icon>
+                <v-icon>mdi-heart</v-icon>
+              </v-btn>
+              <v-btn icon>
+                <v-icon>mdi-dots-vertical</v-icon>
+              </v-btn>
+            </v-toolbar>
+            <v-card-text>
+              <span v-html="selectedEvent.details"></span>
+            </v-card-text>
+            <v-card-actions>
+              <v-btn text color="secondary" @click="selectedOpen = false">
+                Cancel
+              </v-btn>
+            </v-card-actions>
+          </v-card>
+        </v-menu>
+      </v-sheet>
+    </v-col>
+  </v-row>
 </template>
 
 <script>
-import UnderConstruction from "../components/underconstruction.vue";
+const FORM_KEY = "home-schedule";
+const API_BASE_URL = "schedule/";
+const FORM_CUSTOM_TEMPLATE_KEY = "home-schedule"; //<-- Should always be CoreBizObject AyaType name here where possible
 
 export default {
-  components: {
-    UnderConstruction
-  },
   beforeCreate() {
     window.$gz.eventBus.$emit("menu-change", {
       isMain: true,
@@ -16,7 +108,130 @@ export default {
       title: "Schedule",
       helpUrl: "home-schedule"
     });
+  },
+  data() {
+    return {
+      formCustomTemplateKey: FORM_CUSTOM_TEMPLATE_KEY,
+      focus: "",
+      type: "month",
+      typeToLabel: {
+        month: "Month",
+        week: "Week",
+        day: "Day",
+        "4day": "4 Days"
+      },
+      selectedEvent: {},
+      selectedElement: null,
+      selectedOpen: false,
+      events: [],
+      colors: [
+        "blue",
+        "indigo",
+        "deep-purple",
+        "cyan",
+        "green",
+        "orange",
+        "grey darken-1"
+      ],
+      names: [
+        "Meeting",
+        "Holiday",
+        "PTO",
+        "Travel",
+        "Event",
+        "Birthday",
+        "Conference",
+        "Party"
+      ],
+
+      formState: {
+        ready: false,
+        dirty: false,
+        valid: true,
+        readOnly: false,
+        loading: true,
+        errorBoxMessage: null,
+        appError: null,
+        serverError: {}
+      },
+      rights: window.$gz.role.defaultRightsObject(),
+      ayaType: window.$gz.type.Memo,
+      composing: false,
+      replyMode: false,
+      pickListSelectedUserId: null,
+      items: [],
+      toUsers: []
+    };
+  },
+  mounted() {
+    this.$refs.calendar.checkChange();
+  },
+  methods: {
+    viewDay({ date }) {
+      this.focus = date;
+      this.type = "day";
+    },
+    getEventColor(event) {
+      return event.color;
+    },
+    setToday() {
+      this.focus = "";
+    },
+    prev() {
+      this.$refs.calendar.prev();
+    },
+    next() {
+      this.$refs.calendar.next();
+    },
+    showEvent({ nativeEvent, event }) {
+      const open = () => {
+        this.selectedEvent = event;
+        this.selectedElement = nativeEvent.target;
+        requestAnimationFrame(() =>
+          requestAnimationFrame(() => (this.selectedOpen = true))
+        );
+      };
+
+      if (this.selectedOpen) {
+        this.selectedOpen = false;
+        requestAnimationFrame(() => requestAnimationFrame(() => open()));
+      } else {
+        open();
+      }
+
+      nativeEvent.stopPropagation();
+    },
+    updateRange({ start, end }) {
+      const events = [];
+
+      const min = new Date(`${start.date}T00:00:00`);
+      const max = new Date(`${end.date}T23:59:59`);
+      const days = (max.getTime() - min.getTime()) / 86400000;
+      const eventCount = this.rnd(days, days + 20);
+
+      for (let i = 0; i < eventCount; i++) {
+        const allDay = this.rnd(0, 3) === 0;
+        const firstTimestamp = this.rnd(min.getTime(), max.getTime());
+        const first = new Date(firstTimestamp - (firstTimestamp % 900000));
+        const secondTimestamp = this.rnd(2, allDay ? 288 : 8) * 900000;
+        const second = new Date(first.getTime() + secondTimestamp);
+
+        events.push({
+          name: this.names[this.rnd(0, this.names.length - 1)],
+          start: first,
+          end: second,
+          color: this.colors[this.rnd(0, this.colors.length - 1)],
+          timed: !allDay
+        });
+      }
+
+      this.events = events;
+    },
+    rnd(a, b) {
+      return Math.floor((b - a + 1) * Math.random()) + a;
+    }
   }
+  //eol
 };
 
 /*