classcard-ui 0.2.1515 → 0.2.1516

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "classcard-ui",
-  "version": "0.2.1515",
+  "version": "0.2.1516",
   "main": "dist/classcard-ui.umd.min.js",
   "scripts": {
     "serve": "vue-cli-service serve",

package/src/components/CCalendar/CCalendar.vue

@@ -81,47 +81,92 @@
                 :key="getDateKey(date)"
                 type="button"
                 :class="{
-                  'flex h-14 flex-col py-2 px-3 hover:bg-gray-100 focus:z-10': true,
+                  'flex h-16 flex-col items-center py-2 px-1 hover:bg-gray-100 focus:z-10': true,
                   'bg-white': isCurrentMonth(date),
-                  'bg-gray-50': !isCurrentMonth(date),
-                  'font-semibold': isSelected(date) || isToday(date),
-                  'text-white': isSelected(date),
-                  'text-indigo-600': !isSelected(date) && isToday(date),
-                  'text-gray-900':
-                    !isSelected(date) && isCurrentMonth(date) && !isToday(date),
-                  'text-gray-500':
-                    !isSelected(date) &&
-                    !isCurrentMonth(date) &&
-                    !isToday(date),
+                  'bg-gray-100': !isCurrentMonth(date),
                 }"
                 @click="handleDateClick(date)"
               >
                 <time
                   :datetime="formatForDateTime(date)"
+                  class="flex h-5 items-center justify-center rounded-full p-1.5 text-sm"
                   :class="{
-                    'ml-auto': true,
-                    'flex h-6 w-6 items-center justify-center rounded-full':
-                      isSelected(date),
-                    'bg-indigo-600': isSelected(date) && isToday(date),
-                    'bg-gray-900': isSelected(date) && !isToday(date),
+                    'bg-gray-900 font-semibold text-white': isToday(date),
+                    'bg-indigo-100 font-semibold text-indigo-700':
+                      isSelected(date) && !isToday(date),
+                    'text-gray-900':
+                      !isToday(date) &&
+                      !isSelected(date) &&
+                      isCurrentMonth(date),
+                    'text-gray-400':
+                      !isToday(date) &&
+                      !isSelected(date) &&
+                      !isCurrentMonth(date),
                   }"
                   >{{ getDayFromDate(date) }}</time
                 >
                 <span v-if="eventsCount" class="sr-only"
                   >{{ getEventsCountForDate(date) }} events</span
                 >
-                <span
-                  v-if="eventsCount && getEventsCountForDate(date) > 0"
-                  class="-mx-0.5 mt-auto flex flex-wrap-reverse"
+                <div
+                  v-if="getDayGlyphs(date)"
+                  class="mt-auto flex h-2 items-center justify-center gap-1"
                 >
                   <span
-                    class="mx-0.5 mb-1 h-1.5 w-1.5 rounded-full bg-gray-400"
-                  ></span>
-                </span>
+                    v-for="(dot, i) in getDayGlyphs(date).dots"
+                    :key="dot + '-' + i"
+                    class="flex"
+                  >
+                    <c-icon
+                      v-if="dot === 'cancelled'"
+                      name="x-mark-solid-v2"
+                      type="solid"
+                      viewBox="0 0 24 24"
+                      class="h-3 w-3 text-red-600"
+                      cursor-type="cursor-pointer"
+                    ></c-icon>
+                    <span
+                      v-else
+                      class="block h-2 w-2 rounded-full"
+                      :class="{
+                        'bg-green-600': dot === 'confirmed',
+                        'border-2 border-yellow-600': dot === 'awaiting',
+                        'bg-gray-400': dot === 'unknown',
+                      }"
+                    ></span>
+                  </span>
+                  <span
+                    v-if="getDayGlyphs(date).extra > 0"
+                    class="text-xs leading-none text-gray-500"
+                    >+{{ getDayGlyphs(date).extra }}</span
+                  >
+                </div>
               </button>
             </div>
           </div>
         </div>
+
+        <div class="flex items-center justify-center gap-x-5 gap-y-1 py-3">
+          <div class="flex items-center gap-1.5">
+            <span class="block h-2 w-2 rounded-full bg-green-600"></span>
+            <p class="text-sm text-gray-500">Confirmed</p>
+          </div>
+          <div class="flex items-center gap-1.5">
+            <span
+              class="block h-2 w-2 rounded-full border-2 border-yellow-600"
+            ></span>
+            <p class="text-sm text-gray-500">Awaiting</p>
+          </div>
+          <div class="flex items-center gap-1.5">
+            <c-icon
+              name="x-mark-solid-v2"
+              type="solid"
+              viewBox="0 0 24 24"
+              class="h-4 w-4 text-red-600"
+            ></c-icon>
+            <p class="text-sm text-gray-500">Cancelled</p>
+          </div>
+        </div>
       </div>
       <slot name="customCardsRender"></slot>
       <section
@@ -153,9 +198,24 @@
             :key="event.id"
             @click="handleEventClick(event)"
           >
-            <div class="text-sm text-gray-900">
-              {{ formatTimeFromDate(event.start) }} -
-              {{ formatTimeFromDate(event.end) }}
+            <div class="flex items-start justify-between gap-2">
+              <div class="text-sm text-gray-900">
+                {{ formatTimeFromDate(event.start) }} -
+                {{ formatTimeFromDate(event.end) }}
+              </div>
+              <div
+                class="flex shrink-0 items-center gap-1 text-sm font-medium"
+                :class="statusTag(event).color"
+              >
+                <c-icon
+                  :name="statusTag(event).icon"
+                  type="solid"
+                  :viewBox="statusTag(event).viewBox"
+                  class="h-5 w-5 flex-shrink-0"
+                  :class="statusTag(event).iconColor"
+                ></c-icon>
+                {{ statusTag(event).label }}
+              </div>
             </div>
             <div
               class="mt-1 flex text-sm font-semibold"
@@ -364,7 +424,7 @@ export default {
     },
     getEventsCountForDate(date) {
       let eventsCountObj = this.eventsCount.find((event) =>
-        dayjs(date).isSame(dayjs(event.date), "day")
+        dayjs(date).isSame(dayjs(event.date), "day"),
       );
       if (eventsCountObj) {
         return eventsCountObj.eventsCount;
@@ -372,6 +432,72 @@ export default {
         return 0;
       }
     },
+    eventStatus(event) {
+      if (event.status === 7) return "cancelled";
+      if (event.isConfirmed === 0) return "awaiting";
+      return "confirmed";
+    },
+    statusTag(event) {
+      switch (this.eventStatus(event)) {
+        case "confirmed":
+          return {
+            icon: "check-circle-solid",
+            viewBox: "0 0 20 20",
+            color: "text-green-700",
+            iconColor: "text-green-600",
+            label: "Confirmed",
+          };
+        case "awaiting":
+          return {
+            icon: "clock-solid-v2",
+            viewBox: "0 0 24 24",
+            color: "text-yellow-700",
+            iconColor: "text-yellow-600",
+            label: "Awaiting",
+          };
+        case "cancelled":
+        default:
+          return {
+            icon: "x-mark-solid-v2",
+            viewBox: "0 0 24 24",
+            color: "text-red-700",
+            iconColor: "text-red-600",
+            label: "Cancelled",
+          };
+      }
+    },
+    getDayGlyphs(date) {
+      // Order exceptions first so truncation never hides a cancellation.
+      let rank = { cancelled: 0, awaiting: 1, confirmed: 2 };
+      // Per-class statuses come from eventsData (spans the visible month), so
+      // when it is loaded it is the source of truth — a day with no events
+      // gets no glyphs rather than falling back to a count.
+      if (this.eventsData) {
+        let dayEvents = this.eventsData.filter((event) =>
+          dayjs(date).isSame(dayjs(event.start), "day"),
+        );
+        if (!dayEvents.length) return null;
+        let sorted = dayEvents
+          .map((event) => this.eventStatus(event))
+          .sort((a, b) => rank[a] - rank[b]);
+        return {
+          dots: sorted.slice(0, sorted.length > 2 ? 1 : 2),
+          extra: sorted.length > 2 ? sorted.length - 1 : 0,
+        };
+      }
+      // eventsData unavailable but counts loaded: grey dot per class + +N.
+      let entry = this.eventsCount
+        ? this.eventsCount.find((event) =>
+            dayjs(date).isSame(dayjs(event.date), "day"),
+          )
+        : null;
+      if (!entry || !entry.eventsCount) return null;
+      let shown = Math.min(entry.eventsCount, 2);
+      return {
+        dots: Array(shown).fill("unknown"),
+        extra: entry.eventsCount - shown,
+      };
+    },
     getActiveStartAndEndDates() {
       return {
         startDate: this.daysArray[0],
@@ -380,7 +506,7 @@ export default {
     },
     getEventsForDate(date) {
       return this.eventsData.filter((event) =>
-        dayjs(date).isSame(dayjs(event.start), "day")
+        dayjs(date).isSame(dayjs(event.start), "day"),
       );
     },
     handleEventClick(event) {

package/src/stories/CCalendar.stories.js

@@ -1,3 +1,4 @@
+import dayjs from "dayjs";
 import { CCalendar } from "../components";
 import "./utils.css";
 
@@ -13,4 +14,64 @@ const Template = (args, { argTypes }) => ({
   template: '<c-calendar v-bind="$props" />',
 });
 
+// Demo data lives in the current month so activeDate (dayjs()) lands on it.
+const day = (d) => dayjs().date(d).format("YYYY-MM-DD");
+const at = (d, h) => `${day(d)}T${String(h).padStart(2, "0")}:00:00`;
+
+const statusFields = {
+  confirmed: { status: 1, isConfirmed: 1 },
+  awaiting: { status: 1, isConfirmed: 0 },
+  cancelled: { status: 7, isConfirmed: 1 },
+};
+const colors = {
+  confirmed: "#047857",
+  awaiting: "#1D4ED8",
+  cancelled: "#DC2626",
+};
+
+// day-of-month -> ordered list of class statuses for that day
+const spec = {
+  3: ["confirmed"],
+  7: ["cancelled", "confirmed"],
+  12: ["awaiting"],
+  13: ["cancelled", "awaiting", "confirmed"],
+  22: ["cancelled", "awaiting", "confirmed", "confirmed", "confirmed", "confirmed", "confirmed"],
+  26: ["cancelled", "cancelled", "confirmed"],
+};
+
+let id = 0;
+const eventsData = Object.entries(spec).flatMap(([d, list]) =>
+  list.map((st, i) => ({
+    id: ++id,
+    start: at(+d, 9 + i),
+    end: at(+d, 10 + i),
+    title: `${st[0].toUpperCase() + st.slice(1)} class`,
+    color: colors[st],
+    duration: 60,
+    subject: "Intermediate Course",
+    staff: "Jyoti Karna",
+    ...statusFields[st],
+  }))
+);
+
+// Real API shape: only date + count, no statuses.
+const eventsCount = Object.entries(spec).map(([d, list]) => ({
+  date: day(+d),
+  eventsCount: list.length,
+}));
+
 export const Default = Template.bind({});
+Default.args = {
+  id: "cal",
+  value: day(13),
+  eventsCount,
+  eventsData,
+};
+
+// Status details failed but counts loaded: grey dot per class + +N.
+export const StatusUnavailable = Template.bind({});
+StatusUnavailable.args = {
+  id: "cal-no-status",
+  value: day(13),
+  eventsCount,
+};