Merge pull request #1225 from shariquerik/calendar-fixes

Author: shariquerik

frontend/src/components/Calendar/Attendee.vue

@@ -1,78 +1,70 @@
 <template>
   <div>
-    <div
-      class="flex items-center justify-between text-ink-gray-7 [&>div]:w-full"
-    >
-      <Popover v-model:show="showOptions">
-        <template #target="{ togglePopover }">
-          <TextInput
+    <!-- Combobox Input -->
+    <div class="flex items-center w-full text-ink-gray-8 [&>div]:w-full">
+      <ComboboxRoot
+        :model-value="tempSelection"
+        :open="showOptions"
+        @update:open="(o) => (showOptions = o)"
+        @update:modelValue="onSelect"
+        :ignore-filter="true"
+      >
+        <ComboboxAnchor
+          class="flex w-full text-base items-center gap-1 rounded border border-outline-gray-2 bg-surface-white hover:border-outline-gray-3 focus:border-outline-gray-4 focus:ring-0 focus-visible:ring-2 focus-visible:ring-outline-gray-3 px-2 py-1"
+          :class="[size === 'sm' ? 'h-7' : 'h-8 ', inputClass]"
+          @click="showOptions = true"
+        >
+          <ComboboxInput
             ref="search"
-            type="text"
-            :size="size"
-            class="w-full"
-            variant="outline"
-            v-model="query"
-            :debounce="300"
+            autocomplete="off"
+            class="bg-transparent p-0 outline-none border-0 text-base text-ink-gray-8 h-full placeholder:text-ink-gray-4 w-full focus:outline-none focus:ring-0 focus:border-0"
             :placeholder="placeholder"
-            @click="togglePopover"
-            @keydown="onKeydown"
+            :value="query"
+            @input="onInput"
+            @keydown.enter.prevent="handleEnter"
+            @keydown.escape.stop="showOptions = false"
+          />
+          <FeatherIcon
+            name="chevron-down"
+            class="h-4 text-ink-gray-5 cursor-pointer"
+            @click.stop="showOptions = !showOptions"
+          />
+        </ComboboxAnchor>
+        <ComboboxPortal>
+          <ComboboxContent
+            class="z-10 mt-1 min-w-48 w-full max-w-md bg-surface-modal overflow-hidden rounded-lg shadow-2xl ring-1 ring-black ring-opacity-5"
+            position="popper"
+            :align="'start'"
+            @openAutoFocus.prevent
+            @closeAutoFocus.prevent
           >
-            <template #suffix>
-              <FeatherIcon
-                name="chevron-down"
-                class="h-4 text-ink-gray-5"
-                @click.stop="togglePopover()"
-              />
-            </template>
-          </TextInput>
-        </template>
-        <template #body="{ isOpen }">
-          <div v-show="isOpen">
-            <div
-              class="mt-1 rounded-lg bg-surface-modal shadow-2xl ring-1 ring-black ring-opacity-5 focus:outline-none"
-            >
-              <ul
-                v-if="options.length"
-                role="listbox"
-                class="p-1.5 max-h-[12rem] overflow-y-auto"
-              >
-                <li
-                  v-for="(option, idx) in options"
-                  :key="option.value"
-                  role="option"
-                  :aria-selected="idx === highlightIndex"
-                  @click="selectOption(option)"
-                  @mouseenter="highlightIndex = idx"
-                  class="flex cursor-pointer items-center rounded px-2 py-1 text-base"
-                  :class="{ 'bg-surface-gray-3': idx === highlightIndex }"
-                >
-                  <UserAvatar class="mr-2" :user="option.value" size="lg" />
-                  <div class="flex flex-col gap-1 p-1 text-ink-gray-8">
-                    <div class="text-base font-medium">
-                      {{ option.label }}
-                    </div>
-                    <div class="text-sm text-ink-gray-5">
-                      {{ option.value }}
-                    </div>
-                  </div>
-                </li>
-              </ul>
-              <div
-                v-else
+            <ComboboxViewport class="max-h-60 overflow-auto p-1.5">
+              <ComboboxEmpty
                 class="flex gap-2 rounded px-2 py-1 text-base text-ink-gray-5"
               >
                 <FeatherIcon v-if="fetchContacts" name="search" class="h-4" />
-                {{
-                  fetchContacts
-                    ? __('No results found')
-                    : __('Type an email address to add attendee')
-                }}
-              </div>
-            </div>
-          </div>
-        </template>
-      </Popover>
+                {{ emptyStateText }}
+              </ComboboxEmpty>
+              <ComboboxItem
+                v-for="option in options"
+                :key="option.value"
+                :value="option.value"
+                class="text-base leading-none text-ink-gray-7 rounded flex items-center px-2 py-1 relative select-none data-[highlighted]:outline-none data-[highlighted]:bg-surface-gray-3 cursor-pointer"
+                @mousedown.prevent="onSelect(option.value, option)"
+              >
+                <UserAvatar class="mr-2" :user="option.value" size="lg" />
+                <div class="flex flex-col gap-1 p-1 text-ink-gray-8">
+                  <div class="text-base font-medium">{{ option.label }}</div>
+                  <div class="text-sm text-ink-gray-5">{{ option.value }}</div>
+                </div>
+              </ComboboxItem>
+            </ComboboxViewport>
+          </ComboboxContent>
+        </ComboboxPortal>
+      </ComboboxRoot>
     </div>
+
+    <!-- Selected Attendees -->
     <div
       v-if="values.length"
       class="flex flex-col gap-2 mt-2 max-h-[165px] overflow-y-auto"
@@ -105,8 +97,18 @@
 
 <script setup>
 import UserAvatar from '@/components/UserAvatar.vue'
-import { createResource, TextInput, Popover } from 'frappe-ui'
-import { ref, computed, nextTick, watch } from 'vue'
+import { createResource } from 'frappe-ui'
+import {
+  ComboboxRoot,
+  ComboboxAnchor,
+  ComboboxInput,
+  ComboboxPortal,
+  ComboboxContent,
+  ComboboxViewport,
+  ComboboxItem,
+  ComboboxEmpty,
+} from 'reka-ui'
+import { ref, computed, nextTick } from 'vue'
 import { watchDebounced } from '@vueuse/core'
 
 const props = defineProps({
@@ -154,7 +156,7 @@ const query = ref('')
 const text = ref('')
 const showOptions = ref(false)
 const optionsRef = ref(null)
-const highlightIndex = ref(-1)
+const tempSelection = ref(null)
 
 const metaByEmail = computed(() => {
   const out = {}
@@ -225,6 +227,12 @@ const options = computed(() => {
   return searchedContacts || []
 })
 
+const emptyStateText = computed(() =>
+  props.fetchContacts
+    ? __('No results found')
+    : __('Type an email address to add attendee'),
+)
+
 function reload(val) {
   if (!props.fetchContacts) return
 
@@ -234,34 +242,38 @@ function reload(val) {
   filterOptions.reload()
 }
 
-watch(
-  () => options.value,
-  () => {
-    highlightIndex.value = options.value.length ? 0 : -1
-  },
-)
-
-function selectOption(option) {
-  if (!option) return
-  addValue(option)
-  !error.value && (query.value = '')
-  showOptions.value = false
-}
-
-function onKeydown(e) {
-  if (e.key === 'Enter') {
-    if (highlightIndex.value >= 0 && options.value[highlightIndex.value]) {
-      selectOption(options.value[highlightIndex.value])
-    } else if (query.value) {
-      // Add entered email directly
-      selectOption({ name: 'new', label: query.value, value: query.value })
+function onSelect(val, fullOption = null) {
+  if (!val) return
+  const optionObj = fullOption ||
+    options.value.find((o) => o.value === val) || {
+      name: 'new',
+      label: val,
+      value: val,
     }
-    e.preventDefault()
-  } else if (e.key === 'Escape') {
+  addValue(optionObj)
+  if (!error.value) {
+    query.value = ''
+    tempSelection.value = null
     showOptions.value = false
+    nextTick(() => setFocus())
+  }
+}
+
+function handleEnter() {
+  if (query.value) {
+    onSelect(query.value, {
+      name: 'new',
+      label: query.value,
+      value: query.value,
+    })
   }
 }
 
+function onInput(e) {
+  query.value = e.target.value
+  showOptions.value = true
+}
+
 const addValue = (option) => {
   // Safeguard for falsy option
   if (!option || !option.value) return
@@ -315,7 +327,7 @@ const removeValue = (email) => {
 }
 
 function setFocus() {
-  search.value.$el.focus()
+  search.value?.focus?.()
 }
 
 defineExpose({ setFocus })

frontend/src/components/Calendar/CalendarEventPanel.vue

@@ -43,7 +43,10 @@
 
     <!-- Event Details -->
     <div v-if="mode == 'details'" class="flex flex-col overflow-y-auto">
-      <div class="flex items-start gap-2 px-4.5 py-3 pb-0">
+      <div
+        class="flex items-start gap-2 px-4.5 py-3 pb-0"
+        @dblclick="editDetails"
+      >
         <div
           class="mx-0.5 my-[5px] size-2.5 rounded-full cursor-pointer"
           :style="{
@@ -289,6 +292,9 @@
             class="w-[220px]"
             v-model="_event.referenceDocname"
             :doctype="_event.referenceDoctype"
+            :filters="
+              _event.referenceDoctype === 'CRM Lead' ? { converted: 0 } : {}
+            "
             variant="outline"
             @update:model-value="sync"
           />
@@ -329,6 +335,9 @@
           variant="solid"
           class="w-full"
           :disabled="!dirty"
+          :loading="
+            mode === 'edit' ? events.setValue.loading : events.insert.loading
+          "
           @click="saveEvent"
         >
           {{
@@ -376,7 +385,7 @@ import {
   createDocumentResource,
 } from 'frappe-ui'
 import ShortcutTooltip from '@/components/ShortcutTooltip.vue'
-import { ref, computed, watch, h } from 'vue'
+import { ref, computed, watch, h, inject } from 'vue'
 import { useRouter } from 'vue-router'
 
 const props = defineProps({
@@ -402,6 +411,8 @@ const { $dialog } = globalStore()
 const show = defineModel()
 const event = defineModel('event')
 
+const events = inject('events')
+
 const _event = ref({})
 
 const peoples = computed({
@@ -527,6 +538,8 @@ function updateTime(t, fromTime = false) {
 }
 
 function saveEvent() {
+  if (!dirty.value) return
+
   error.value = null
   if (!_event.value.title) {
     error.value = __('Title is required')

frontend/src/components/Kanban/KanbanView.vue

@@ -56,7 +56,7 @@
               <Dropdown :options="actions(column)">
                 <template #default>
                   <Button
-                    class="hidden group-hover:flex"
+                    class="opacity-0 group-hover:opacity-100 pointer-events-none group-hover:pointer-events-auto transition-opacity"
                     icon="more-horizontal"
                     variant="ghost"
                   />