From 8da41608fd4cb306e535914e756e794d3e74fe28 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 26 Feb 2025 19:31:12 +0530
Subject: [PATCH 1/3] fix: restrict Table Multiselect in sidebar panel

---
 frontend/src/components/SidePanelLayoutEditor.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/src/components/SidePanelLayoutEditor.vue b/frontend/src/components/SidePanelLayoutEditor.vue
index 7b277db7..3b7ab0a3 100644
--- a/frontend/src/components/SidePanelLayoutEditor.vue
+++ b/frontend/src/components/SidePanelLayoutEditor.vue
@@ -158,6 +158,7 @@ const props = defineProps({
 
 const restrictedFieldTypes = [
   'Table',
+  'Table MultiSelect',
   'Geolocation',
   'Attach',
   'Attach Image',

From d64c77aef0ecb7c5327d5b9062dedf3bac536deb Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 26 Feb 2025 19:31:59 +0530
Subject: [PATCH 2/3] feat: added Table MultiSelect Control

---
 .../Controls/TableMultiselectInput.vue        | 140 ++++++++++++++++++
 1 file changed, 140 insertions(+)
 create mode 100644 frontend/src/components/Controls/TableMultiselectInput.vue

diff --git a/frontend/src/components/Controls/TableMultiselectInput.vue b/frontend/src/components/Controls/TableMultiselectInput.vue
new file mode 100644
index 00000000..683a2cd0
--- /dev/null
+++ b/frontend/src/components/Controls/TableMultiselectInput.vue
@@ -0,0 +1,140 @@
+<template>
+  <div>
+    <div
+      class="group flex flex-wrap gap-1 min-h-20 p-1.5 rounded text-base bg-surface-gray-2 hover:bg-surface-gray-3 focus:border-outline-gray-4 focus:ring-0 focus-visible:ring-2 focus-visible:ring-outline-gray-3 text-ink-gray-8 transition-colors w-full"
+    >
+      <Button
+        ref="valuesRef"
+        v-for="value in parsedValues"
+        :key="value"
+        :label="value"
+        theme="gray"
+        variant="subtle"
+        class="rounded bg-surface-white hover:!bg-surface-gray-1 focus-visible:ring-outline-gray-4"
+        @keydown.delete.capture.stop="removeLastValue"
+      >
+        <template #suffix>
+          <FeatherIcon
+            class="h-3.5"
+            name="x"
+            @click.stop="removeValue(value)"
+          />
+        </template>
+      </Button>
+      <div class="w-full">
+        <Link
+          v-if="linkField"
+          class="form-control flex-1 truncate cursor-text"
+          :value="query"
+          :filters="filters"
+          :doctype="linkField.options"
+          @change="(v) => addValue(v)"
+          :hideMe="true"
+        >
+          <template #target="{ togglePopover }">
+            <button
+              class="w-full h-7 cursor-text"
+              @click.stop="togglePopover"
+            />
+          </template>
+        </Link>
+      </div>
+    </div>
+    <ErrorMessage class="mt-2 pl-2" v-if="error" :message="error" />
+  </div>
+</template>
+
+<script setup>
+import Link from '@/components/Controls/Link.vue'
+import { getMeta } from '@/stores/meta'
+import { ref, computed, nextTick } from 'vue'
+
+const props = defineProps({
+  doctype: {
+    type: String,
+    required: true,
+  },
+  errorMessage: {
+    type: Function,
+    default: (value) => `${value} is an Invalid value`,
+  },
+})
+
+const { getFields } = getMeta(props.doctype)
+
+const values = defineModel()
+
+const valuesRef = ref([])
+const error = ref(null)
+const query = ref('')
+
+const linkField = ref('')
+
+const filters = computed(() => {
+  if (!linkField.value) return []
+  return {
+    name: ['not in', parsedValues.value],
+  }
+})
+
+const parsedValues = computed(() => {
+  error.value = ''
+  getLinkField()
+  if (!linkField.value) return []
+  return values.value.map((row) => row[linkField.value.fieldname])
+})
+
+const getLinkField = () => {
+  error.value = ''
+  if (!linkField.value) {
+    let fields = getFields()
+    linkField.value = fields?.find((df) =>
+      ['Link', 'User'].includes(df.fieldtype),
+    )
+    if (!linkField.value) {
+      error.value =
+        'Table MultiSelect requires a Table with atleast one Link field'
+    }
+  }
+  return linkField.value
+}
+
+const addValue = (value) => {
+  error.value = null
+
+  if (values.value.some((row) => row[linkField.value.fieldname] === value)) {
+    error.value = 'Value already exists'
+    return
+  }
+
+  if (value) {
+    values.value.push({ [linkField.value.fieldname]: value })
+    !error.value && (query.value = '')
+  }
+}
+
+const removeValue = (value) => {
+  values.value = values.value.filter(
+    (row) => row[linkField.value.fieldname] !== value,
+  )
+}
+
+const removeLastValue = () => {
+  if (query.value) return
+
+  let valueRef = valuesRef.value[valuesRef.value.length - 1]?.$el
+  if (document.activeElement === valueRef) {
+    values.value.pop()
+    nextTick(() => {
+      if (values.value.length) {
+        valueRef = valuesRef.value[valuesRef.value.length - 1].$el
+        valueRef?.focus()
+      } else {
+        setFocus()
+      }
+    })
+  } else {
+    valueRef?.focus()
+  }
+}
+</script>

From aee5048cae993ef7eb33fdc46034c5d77cde83b1 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 26 Feb 2025 19:32:32 +0530
Subject: [PATCH 3/3] fix: added Table multiselect control in Field layout

---
 frontend/src/components/Controls/Link.vue            | 4 ++--
 frontend/src/components/Controls/MultiValueInput.vue | 1 -
 frontend/src/components/FieldLayout/Field.vue        | 7 +++++++
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/Controls/Link.vue b/frontend/src/components/Controls/Link.vue
index e6cb4356..89a92cce 100644
--- a/frontend/src/components/Controls/Link.vue
+++ b/frontend/src/components/Controls/Link.vue
@@ -82,7 +82,7 @@ const props = defineProps({
     required: true,
   },
   filters: {
-    type: [Array, String],
+    type: [Array, Object, String],
     default: [],
   },
   modelValue: {
@@ -133,7 +133,7 @@ watchDebounced(
 
 const options = createResource({
   url: 'frappe.desk.search.search_link',
-  cache: [props.doctype, text.value, props.hideMe],
+  cache: [props.doctype, text.value, props.hideMe, props.filters],
   method: 'POST',
   params: {
     txt: text.value,
diff --git a/frontend/src/components/Controls/MultiValueInput.vue b/frontend/src/components/Controls/MultiValueInput.vue
index 9574c378..43e3e11a 100644
--- a/frontend/src/components/Controls/MultiValueInput.vue
+++ b/frontend/src/components/Controls/MultiValueInput.vue
@@ -39,7 +39,6 @@
 </template>
 
 <script setup>
-import { TextInput } from 'frappe-ui'
 import { ref, nextTick } from 'vue'
 
 const props = defineProps({
diff --git a/frontend/src/components/FieldLayout/Field.vue b/frontend/src/components/FieldLayout/Field.vue
index 19dc5ae2..dc46b365 100644
--- a/frontend/src/components/FieldLayout/Field.vue
+++ b/frontend/src/components/FieldLayout/Field.vue
@@ -81,6 +81,12 @@
       </Button>
     </div>
 
+    <TableMultiselectInput
+      v-else-if="field.fieldtype === 'Table MultiSelect'"
+      v-model="data[field.fieldname]"
+      :doctype="field.options"
+    />
+
     <Link
       v-else-if="field.fieldtype === 'User'"
       class="form-control"
@@ -177,6 +183,7 @@
 import EditIcon from '@/components/Icons/EditIcon.vue'
 import IndicatorIcon from '@/components/Icons/IndicatorIcon.vue'
 import UserAvatar from '@/components/UserAvatar.vue'
+import TableMultiselectInput from '@/components/Controls/TableMultiselectInput.vue'
 import Link from '@/components/Controls/Link.vue'
 import Grid from '@/components/Controls/Grid.vue'
 import { getFormat, evaluateDependsOnValue } from '@/utils'