tmp

webclient/components/CalendarModal.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 // @ts-expect-error vue-simple-calendar does not provide types
 import { CalendarView, CalendarViewHeader } from "vue-simple-calendar";
+import { PlusCircleIcon } from "@heroicons/vue/24/outline";
 import { useFeedback } from "~/composables/feedback";
 import { useCalendar } from "~/composables/calendar";
 // @ts-expect-error vue-simple-calendar does not provide types
@@ -37,7 +38,7 @@ const body = computed<CalendarBody>(() => ({
   end_before: end_before.value,
   ids: calendar.value.showing,
 }));
-const { data, status, error } = useFetch<CalendarResponse>(url, {
+const { data, error } = useFetch<CalendarResponse>(url, {
   method: "POST",
   key: "calendar",
   dedupe: "defer",
@@ -78,20 +79,6 @@ function setShowDate(d: Date) {
 
 <template>
   <LazyModal v-model="calendar.open" :title="t('title')">
-    <ul v-if="calendar.showing.length && data">
-      <li v-for="(key, i) in calendar.showing" :key="key" class="mt-6 flex border-t border-gray-900/5 pt-6">
-        <SearchResultItem
-          :highlighted="i == 0"
-          :item="{
-            id: key,
-            name: data[key].location.name,
-            subtext: data[key].location.type_common_name,
-            subtext_bold: 'bold',
-            type: data[key].location.type,
-          }"
-        />
-      </li>
-    </ul>
     <Toast v-if="error" level="error">
       <p class="text-md font-bold">{{ t("error.header") }}</p>
       <p class="text-sm">
@@ -106,7 +93,7 @@ function setShowDate(d: Date) {
         <template #feedbackForm>
           <button
             type="button"
-            class="bg-transparent visited:text-blue-600 text-blue-600 hover:underline"
+            class="text-blue-600 bg-transparent visited:text-blue-600 hover:underline"
             :aria-label="t('error.feedback-open')"
             @click="
               () => {
@@ -120,9 +107,29 @@ function setShowDate(d: Date) {
         </template>
       </I18nT>
     </Toast>
-    <div v-else>
+    <div v-else-if="data">
+      <ul v-if="calendar.showing.length" class="border-gray-900/5 mb-6 flex gap-2 overflow-x-scroll">
+        <li v-for="(key, i) in calendar.showing" :key="key">
+          <SearchResultItem
+            :highlighted="i != 0"
+            :item="{
+              id: key,
+              name: data[key].location.name,
+              subtext: data[key].location.type_common_name,
+              subtext_bold: 'bold',
+              type: data[key].location.type,
+            }"
+          />
+        </li>
+        <li
+          class="bg-zinc-50 border-zinc-200 min-w-14 rounded-sm border hover:bg-blue-100 flex align-middle justify-items-center object-center justify-self-center place-items-center items-center content-center justify-center origin-center"
+        >
+          <button type="button" class="focusable">
+            <PlusCircleIcon class="mx-auto my-auto h-5 w-5" />
+          </button>
+        </li>
+      </ul>
       <CalendarView
-        v-if="data"
         :items="events"
         :show-date="showDate"
         :show-times="true"
@@ -135,10 +142,6 @@ function setShowDate(d: Date) {
           <CalendarViewHeader :header-props="headerProps" @input="setShowDate" />
         </template>
       </CalendarView>
-      <div v-else-if="status === 'pending'" class="text-zinc-900 flex flex-col items-center gap-5 py-32">
-        <Spinner class="h-8 w-8" />
-        {{ t("Loading data...") }}
-      </div>
 
       <div class="pt-2 text-xs">
         {{ t("footer.disclaimer") }} <br />
@@ -149,6 +152,10 @@ function setShowDate(d: Date) {
         </template>
       </div>
     </div>
+    <div v-else class="text-zinc-900 flex flex-col items-center gap-5 py-32">
+      <Spinner class="h-8 w-8" />
+      {{ t("Loading data...") }}
+    </div>
   </LazyModal>
 </template>