Merge pull request #1864 from frappe/mergify/bp/version-15-hotfix/pr-…

…1855

refactor(PWA): setup frappe-ui git submodule & upgrade frappe-ui (backport #1855)

frontend/package.json

@@ -16,7 +16,7 @@
 		"@vitejs/plugin-vue": "^4.4.0",
 		"dayjs": "^1.11.7",
 		"feather-icons": "^4.28.0",
-		"frappe-ui": "^0.1.18",
+		"frappe-ui": "^0.1.59",
 		"vue": "^3.2.25",
 		"vue-router": "^4.0.12",
 		"autoprefixer": "^10.4.2",

frontend/src/components/FormField.vue

@@ -14,18 +14,26 @@
 			{{ props.label }}
 		</span>
 
-		<!-- Link & Select -->
+		<!-- Select or Link field with predefined options -->
 		<Autocomplete
-			v-if="['Link', 'Select'].includes(props.fieldtype)"
-			ref="autocompleteRef"
+			v-if="props.fieldtype === 'Select' || props.documentList"
 			:class="isReadOnly ? 'pointer-events-none' : ''"
-			:value="modelValue"
-			:placeholder="`Select ${props.options}`"
+			:placeholder="`Select ${props.label}`"
 			:options="selectionList"
-			@change="(v) => emit('update:modelValue', v?.value)"
-			@update:query="(q) => updateLinkFieldOptions(q)"
+			:modelValue="modelValue"
 			v-bind="$attrs"
 			:disabled="isReadOnly"
+			@update:modelValue="(v) => emit('update:modelValue', v?.value)"
+		/>
+
+		<!-- Link field -->
+		<Link
+			v-else-if="props.fieldtype === 'Link'"
+			:doctype="props.options"
+			:modelValue="modelValue"
+			:filters="props.linkFilters"
+			:disabled="isReadOnly"
+			@update:modelValue="(v) => emit('update:modelValue', v)"
 		/>
 
 		<!-- Text -->
@@ -130,8 +138,10 @@
 </template>
 
 <script setup>
-import { createResource, Autocomplete, ErrorMessage, debounce } from "frappe-ui"
-import { ref, computed, onMounted, inject, watchEffect } from "vue"
+import { Autocomplete, ErrorMessage } from "frappe-ui"
+import { ref, computed, onMounted, inject } from "vue"
+
+import Link from "@/components/Link.vue"
 
 const props = defineProps({
 	fieldtype: String,
@@ -161,8 +171,6 @@ const emit = defineEmits(["change", "update:modelValue"])
 const dayjs = inject("$dayjs")
 
 let date = ref(null)
-const autocompleteRef = ref(null)
-const searchText = ref("")
 
 const showField = computed(() => {
 	if (props.readOnly && !isLayoutField.value && !props.modelValue) return false
@@ -183,8 +191,8 @@ const isReadOnly = computed(() => {
 })
 
 const selectionList = computed(() => {
-	if (props.fieldtype == "Link" && props.options) {
-		return props.documentList || linkFieldList?.data
+	if (props.fieldtype === "Link" && props.documentList) {
+		return props.documentList
 	} else if (props.fieldtype == "Select" && props.options) {
 		const options = props.options.split("\n")
 		return options.map((option) => ({
@@ -196,24 +204,6 @@ const selectionList = computed(() => {
 	return []
 })
 
-const linkFieldList = createResource({
-	url: "frappe.desk.search.search_link",
-	params: {
-		doctype: props.options,
-		txt: searchText.value,
-		filters: props.linkFilters,
-	},
-	transform: (data) => {
-		return data.map((doc) => {
-			const title = doc?.description?.split(",")?.[0]
-			return {
-				label: title ? `${title} : ${doc.value}` : doc.value,
-				value: doc.value,
-			}
-		})
-	},
-})
-
 function setDefaultValue() {
 	// set default values
 	if (props.modelValue) return
@@ -235,20 +225,6 @@ function setDefaultValue() {
 	}
 }
 
-const updateLinkFieldOptions = debounce((query) => {
-	searchText.value = query || ""
-	linkFieldList.reload()
-}, 500)
-
-// get link field options from DB only when the field is clicked
-watchEffect(() => {
-	if (autocompleteRef.value && props.fieldtype === "Link") {
-		autocompleteRef.value?.$refs?.search?.$el?.addEventListener("focus", () => {
-			linkFieldList.reload()
-		})
-	}
-})
-
 onMounted(() => {
 	setDefaultValue()
 })

frontend/src/components/Link.vue

@@ -0,0 +1,97 @@
+<template>
+	<Autocomplete
+		ref="autocompleteRef"
+		size="sm"
+		v-model="value"
+		:placeholder="`Select ${doctype}`"
+		:options="options.data"
+		:class="disabled ? 'pointer-events-none' : ''"
+		:disabled="disabled"
+	/>
+</template>
+
+<script setup>
+import { createResource, Autocomplete, debounce } from "frappe-ui"
+import { ref, computed, watch } from "vue"
+
+const props = defineProps({
+	doctype: {
+		type: String,
+		required: true,
+	},
+	modelValue: {
+		type: String,
+		required: false,
+		default: "",
+	},
+	filters: {
+		type: Object,
+		default: {},
+	},
+	disabled: {
+		type: Boolean,
+		default: false,
+	},
+})
+
+const emit = defineEmits(["update:modelValue"])
+
+const autocompleteRef = ref(null)
+const searchText = ref("")
+
+const value = computed({
+	get: () => props.modelValue,
+	set: (val) => {
+		emit("update:modelValue", val?.value || "")
+	},
+})
+
+const options = createResource({
+	url: "frappe.desk.search.search_link",
+	params: {
+		doctype: props.doctype,
+		txt: searchText.value,
+		filters: props.filters,
+	},
+	method: "POST",
+	transform: (data) => {
+		return data.map((doc) => {
+			const title = doc?.description?.split(",")?.[0]
+			return {
+				label: title ? `${title} : ${doc.value}` : doc.value,
+				value: doc.value,
+			}
+		})
+	},
+})
+
+const reloadOptions = debounce((searchTextVal) => {
+	options.update({
+		params: {
+			txt: searchTextVal,
+			doctype: props.doctype,
+		},
+	})
+	options.reload()
+}, 300)
+
+watch(
+	() => props.doctype,
+	() => {
+		if (!props.doctype || props.doctype === options.doctype) return
+		reloadOptions("")
+	},
+	{ immediate: true }
+)
+
+watch(
+	() => autocompleteRef.value?.query,
+	(val) => {
+		val = val || ""
+		if (searchText.value === val) return
+		searchText.value = val
+		reloadOptions(val)
+	},
+	{ immediate: true }
+)
+</script>

frontend/tailwind.config.js

@@ -4,6 +4,7 @@ module.exports = {
 		"./index.html",
 		"./src/**/*.{vue,js,ts,jsx,tsx}",
 		"./node_modules/frappe-ui/src/components/**/*.{vue,js,ts,jsx,tsx}",
+		"../node_modules/frappe-ui/src/components/**/*.{vue,js,ts,jsx,tsx}",
 	],
 	theme: {
 		extend: {

frontend/vite.config.js

@@ -1,6 +1,7 @@
 import { defineConfig } from "vite"
 import vue from "@vitejs/plugin-vue"
 import { VitePWA } from "vite-plugin-pwa"
+import frappeui from "frappe-ui/vite"
 
 import path from "path"
 import fs from "fs"
@@ -12,6 +13,7 @@ export default defineConfig({
 	},
 	plugins: [
 		vue(),
+		frappeui(),
 		VitePWA({
 			registerType: "autoUpdate",
 			strategies: "injectManifest",
@@ -67,10 +69,18 @@ export default defineConfig({
 		commonjsOptions: {
 			include: [/tailwind.config.js/, /node_modules/],
 		},
+		sourcemap: true,
+		rollupOptions: {
+			output: {
+				manualChunks: {
+					"frappe-ui": ["frappe-ui"],
+				},
+			},
+		},
 	},
 	optimizeDeps: {
 		include: [
-			"feather-icons",
+			"frappe-ui > feather-icons",
 			"showdown",
 			"tailwind.config.js",
 			"engine.io-client",