Merge pull request #568 from frappe/navigable-link-fields

feat: navigable link fields

fyo/model/types.ts

@@ -87,7 +87,7 @@ export interface ColumnConfig {
 
 export type ListViewColumn = string | ColumnConfig;
 export interface ListViewSettings {
-  formRoute?: (doc: Doc) => RouteLocationRaw;
+  formRoute?: (name: string) => RouteLocationRaw;
   columns?: ListViewColumn[];
 }
 

models/baseModels/Item/Item.ts

@@ -112,7 +112,7 @@ export class Item extends Doc {
 
   static getListViewSettings(): ListViewSettings {
     return {
-      formRoute: ({ name }) => `/edit/Item/${name}`,
+      formRoute: (name) => `/edit/Item/${name}`,
       columns: ['name', 'unit', 'tax', 'rate'],
     };
   }

models/baseModels/JournalEntry/JournalEntry.ts

@@ -65,7 +65,7 @@ export class JournalEntry extends Transactional {
 
   static getListViewSettings(): ListViewSettings {
     return {
-      formRoute: ({ name }) => `/edit/JournalEntry/${name}`,
+      formRoute: (name) => `/edit/JournalEntry/${name}`,
       columns: [
         'name',
         {

models/baseModels/Payment/Payment.ts

@@ -617,7 +617,7 @@ export class Payment extends Transactional {
 
   static getListViewSettings(fyo: Fyo): ListViewSettings {
     return {
-      formRoute: ({ name }) => `/edit/Payment/${name}`,
+      formRoute: (name) => `/edit/Payment/${name}`,
       columns: ['name', getDocStatusListColumn(), 'party', 'date', 'amount'],
     };
   }

models/baseModels/PurchaseInvoice/PurchaseInvoice.ts

@@ -37,7 +37,7 @@ export class PurchaseInvoice extends Invoice {
 
   static getListViewSettings(): ListViewSettings {
     return {
-      formRoute: ({ name }) => `/edit/PurchaseInvoice/${name}`,
+      formRoute: (name) => `/edit/PurchaseInvoice/${name}`,
       columns: [
         'name',
         getTransactionStatusColumn(),

models/baseModels/SalesInvoice/SalesInvoice.ts

@@ -37,7 +37,7 @@ export class SalesInvoice extends Invoice {
 
   static getListViewSettings(): ListViewSettings {
     return {
-      formRoute: ({ name }) => `/edit/SalesInvoice/${name}`,
+      formRoute: (name) => `/edit/SalesInvoice/${name}`,
       columns: [
         'name',
         getTransactionStatusColumn(),

models/inventory/PurchaseReceipt.ts

@@ -8,7 +8,7 @@ export class PurchaseReceipt extends StockTransfer {
 
   static getListViewSettings(): ListViewSettings {
     return {
-      formRoute: ({ name }) => `/edit/PurchaseReceipt/${name}`,
+      formRoute: (name) => `/edit/PurchaseReceipt/${name}`,
       columns: [
         'name',
         getTransactionStatusColumn(),

models/inventory/Shipment.ts

@@ -8,7 +8,7 @@ export class Shipment extends StockTransfer {
 
   static getListViewSettings(): ListViewSettings {
     return {
-      formRoute: ({ name }) => `/edit/Shipment/${name}`,
+      formRoute: (name) => `/edit/Shipment/${name}`,
       columns: [
         'name',
         getTransactionStatusColumn(),

models/inventory/StockMovement.ts

@@ -81,7 +81,7 @@ export class StockMovement extends Transfer {
 
   static getListViewSettings(fyo: Fyo): ListViewSettings {
     return {
-      formRoute: ({ name }) => `/edit/StockMovement/${name}`,
+      formRoute: (name) => `/edit/StockMovement/${name}`,
       columns: [
         'name',
         getDocStatusListColumn(),

src/components/Controls/AttachImage.vue

@@ -50,7 +50,7 @@
       :class="[!isReadOnly ? 'group-hover:flex' : '']"
       style="background: rgba(0, 0, 0, 0.2); backdrop-filter: blur(2px)"
     >
-      <button class="bg-gray-300 p-0.5 rounded mb-1" @click="handleClick">
+      <button class="bg-gray-100 p-0.5 rounded mb-1" @click="handleClick">
         <FeatherIcon
           :name="shouldClear ? 'x' : 'upload'"
           class="w-4 h-4 text-gray-600"

src/components/Controls/Attachment.vue

@@ -21,25 +21,21 @@
       />
 
       <!-- Buttons -->
-      <div class="me-2 flex gap-2">
+      <div class="me-2 flex gap-1">
         <!-- Upload Button -->
-        <button v-if="!value" class="bg-gray-300 p-0.5 rounded" @click="upload">
+        <button v-if="!value" class="p-0.5 rounded" @click="upload">
           <FeatherIcon name="upload" class="h-4 w-4 text-gray-600" />
         </button>
 
         <!-- Download Button -->
-        <button
+        <button v-if="value" class="p-0.5 rounded" @click="download">
-          v-if="value"
-          class="bg-gray-300 p-0.5 rounded"
-          @click="download"
-        >
           <FeatherIcon name="download" class="h-4 w-4 text-gray-600" />
         </button>
 
         <!-- Clear Button -->
         <button
           v-if="value && !isReadOnly"
-          class="bg-gray-300 p-0.5 rounded"
+          class="p-0.5 rounded"
           @click="clear"
         >
           <FeatherIcon name="x" class="h-4 w-4 text-gray-600" />

src/components/Controls/AutoComplete.vue

@@ -35,7 +35,7 @@
           @keydown.esc="toggleDropdown(false)"
         />
         <svg
-          v-if="!isReadOnly"
+          v-if="!isReadOnly && !canLink"
           class="w-3 h-3"
           style="background: inherit; margin-right: -3px"
           viewBox="0 0 5 10"
@@ -45,21 +45,30 @@
           <path
             d="M1 2.636L2.636 1l1.637 1.636M1 7.364L2.636 9l1.637-1.636"
             class="stroke-current"
-            :class="showMandatory ? 'text-red-500' : 'text-gray-500'"
+            :class="showMandatory ? 'text-red-400' : 'text-gray-400'"
             fill="none"
             fill-rule="evenodd"
             stroke-linecap="round"
             stroke-linejoin="round"
           />
         </svg>
+        <button
+          v-if="canLink"
+          class="p-0.5 rounded -me1 bg-transparent"
+          @click="routeToLinkedDoc"
+        >
+          <FeatherIcon name="chevron-right" class="w-4 h-4 text-gray-600" />
+        </button>
       </div>
     </template>
   </Dropdown>
 </template>
 <script>
 import { getOptionList } from 'fyo/utils';
+import { FieldTypeEnum } from 'schemas/types';
 import Dropdown from 'src/components/Dropdown.vue';
 import { fuzzyMatch } from 'src/utils';
+import { getFormRoute, routeTo } from 'src/utils/ui';
 import Base from './Base.vue';
 
 export default {
@@ -100,8 +109,52 @@ export default {
 
       return getOptionList(this.df, this.doc);
     },
+    canLink() {
+      if (!this.value || !this.df) {
+        return false;
+      }
+
+      const fieldtype = this.df?.fieldtype;
+      const isLink = fieldtype === FieldTypeEnum.Link;
+      const isDynamicLink = fieldtype === FieldTypeEnum.DynamicLink;
+
+      if (!isLink && !isDynamicLink) {
+        return false;
+      }
+
+      if (isLink && this.df.target) {
+        return true;
+      }
+
+      const references = this.df.references;
+      if (!references) {
+        return false;
+      }
+
+      if (!this.doc?.[references]) {
+        return false;
+      }
+
+      return true;
+    },
   },
   methods: {
+    async routeToLinkedDoc() {
+      let schemaName = this.df?.target;
+      const name = this.value;
+
+      if (!schemaName) {
+        const references = this.df?.references ?? '';
+        schemaName = this.doc?.[references];
+      }
+
+      if (!schemaName || !name) {
+        return;
+      }
+
+      const route = getFormRoute(schemaName, name);
+      await routeTo(route);
+    },
     setLinkValue(value) {
       this.linkValue = value;
     },

src/components/Controls/Datetime.vue

@@ -21,12 +21,7 @@
           {{ inputPlaceholder }}
         </p>
 
-        <button
+        <button v-if="!isReadOnly" class="p-0.5 rounded -me-1 ms-1">
-          v-if="!isReadOnly"
-          class="p-0.5 rounded -me-1 ms-1"
-          :class="showMandatory ? 'bg-red-300' : 'bg-gray-300'"
-          @click="togglePopover"
-        >
           <FeatherIcon
             name="calendar"
             class="w-4 h-4"

src/components/Controls/Select.vue

@@ -50,7 +50,7 @@
         <path
           d="M1 2.636L2.636 1l1.637 1.636M1 7.364L2.636 9l1.637-1.636"
           class="stroke-current"
-          :class="showMandatory ? 'text-red-500' : 'text-gray-500'"
+          :class="showMandatory ? 'text-red-400' : 'text-gray-400'"
           fill="none"
           fill-rule="evenodd"
           stroke-linecap="round"

src/components/Widgets/LinkedEntryWidget.vue

@@ -55,8 +55,7 @@
 
 <script lang="ts">
 import { Money } from 'pesa';
-import { getCreateRoute } from 'src/router';
+import { getFormRoute, routeTo } from 'src/utils/ui';
-import { routeTo } from 'src/utils/ui';
 import { defineComponent, PropType } from 'vue';
 import Button from '../Button.vue';
 import StatusBadge from '../StatusBadge.vue';
@@ -90,7 +89,7 @@ export default defineComponent({
       return 'Saved';
     },
     async openEntry(name: string) {
-      const route = getCreateRoute(this.linked.schemaName, name);
+      const route = getFormRoute(this.linked.schemaName, name);
       await routeTo(route);
     },
   },

src/pages/ListView/ListView.vue

@@ -100,7 +100,7 @@ export default {
       const doc = await this.fyo.doc.getDoc(this.schemaName, name);
 
       if (this.listConfig.formRoute) {
-        return await routeTo(this.listConfig.formRoute(doc));
+        return await routeTo(this.listConfig.formRoute(name));
       }
 
       const { routeFilter } = getRouteData({ doc });
@@ -137,7 +137,7 @@ export default {
       };
 
       if (this.listConfig.formRoute) {
-        path = this.listConfig.formRoute(doc);
+        path = this.listConfig.formRoute(doc.name);
       }
 
       if (typeof path === 'object') {

src/router.ts

@@ -141,28 +141,6 @@ const routes: RouteRecordRaw[] = [
   },
 ];
 
-export function getCreateRoute(
-  schemaName: string,
-  name: string
-): RouteLocationRaw {
-  if (
-    [
-      ModelNameEnum.SalesInvoice,
-      ModelNameEnum.PurchaseInvoice,
-      ModelNameEnum.JournalEntry,
-      ModelNameEnum.Shipment,
-      ModelNameEnum.PurchaseReceipt,
-      ModelNameEnum.StockMovement,
-      ModelNameEnum.Payment,
-      ModelNameEnum.Item,
-    ].includes(schemaName as ModelNameEnum)
-  ) {
-    return `/edit/${schemaName}/${name}`;
-  }
-
-  return `/list/${schemaName}?edit=1&schemaName=${schemaName}&name=${name}`;
-}
-
 const router = createRouter({ routes, history: createWebHistory() });
 
 export default router;

src/utils/search.ts

@@ -4,13 +4,12 @@ import { groupBy } from 'lodash';
 import { ModelNameEnum } from 'models/types';
 import { reports } from 'reports';
 import { OptionField } from 'schemas/types';
-import { getCreateRoute } from 'src/router';
 import { createFilters, routeFilters } from 'src/utils/filters';
 import { GetAllOptions } from 'utils/db/types';
 import { safeParseFloat } from 'utils/index';
 import { RouteLocationRaw } from 'vue-router';
 import { fuzzyMatch } from '.';
-import { routeTo } from './ui';
+import { getFormRoute, routeTo } from './ui';
 
 export const searchGroups = ['Docs', 'List', 'Create', 'Report', 'Page'];
 enum SearchGroupEnum {
@@ -73,17 +72,6 @@ export function getGroupLabelMap() {
   };
 }
 
-async function openQuickEditDoc(schemaName: string, fyo: Fyo) {
-  await routeTo(`/list/${schemaName}`);
-  const doc = await fyo.doc.getNewDoc(schemaName);
-  const { openQuickEdit } = await import('src/utils/ui');
-
-  await openQuickEdit({
-    schemaName,
-    name: doc.name as string,
-  });
-}
-
 async function openFormEditDoc(schemaName: string, fyo: Fyo) {
   const doc = fyo.doc.getNewDoc(schemaName);
   const name = doc.name;
@@ -735,10 +723,10 @@ export class Search {
   _getRouteFromKeyword(keyword: Keyword): RouteLocationRaw {
     const { parent, parentSchemaName, schemaName } = keyword.meta;
     if (parent && parentSchemaName) {
-      return getCreateRoute(parentSchemaName as string, parent as string);
+      return getFormRoute(parentSchemaName as string, parent as string);
     }
 
-    return getCreateRoute(schemaName as string, keyword.values[0]);
+    return getFormRoute(schemaName as string, keyword.values[0]);
   }
 
   _getGroupedKeywords() {

src/utils/ui.ts

@@ -420,3 +420,33 @@ export function getFieldsGroupedByTabAndSection(
 
   return grouped;
 }
+
+export function getFormRoute(
+  schemaName: string,
+  name: string
+): RouteLocationRaw {
+  const route = fyo.models[schemaName]
+    ?.getListViewSettings(fyo)
+    ?.formRoute?.(name);
+
+  if (typeof route === 'string') {
+    return route;
+  }
+
+  if (
+    [
+      ModelNameEnum.SalesInvoice,
+      ModelNameEnum.PurchaseInvoice,
+      ModelNameEnum.JournalEntry,
+      ModelNameEnum.Shipment,
+      ModelNameEnum.PurchaseReceipt,
+      ModelNameEnum.StockMovement,
+      ModelNameEnum.Payment,
+      ModelNameEnum.Item,
+    ].includes(schemaName as ModelNameEnum)
+  ) {
+    return `/edit/${schemaName}/${name}`;
+  }
+
+  return `/list/${schemaName}?edit=1&schemaName=${schemaName}&name=${name}`;
+}