[BST-279] feature: has many association (#328)

Author: adrianthedev

features/data-sources/types.d.ts

@@ -11,3 +11,11 @@ interface DataQuery extends PrismaDataQuery {
 }
 
 export default DataQuery;
+
+export type TableMetaData = {
+  name: string;
+  idColumn: string;
+  nameColumn: string;
+  createdAtColumn?: string;
+  updatedAtColumn?: string;
+};

features/fields/components/DummyField.tsx

@@ -0,0 +1,3 @@
+const DummyField = () => null;
+
+export default DummyField;

features/fields/components/FieldWrapper/ShowFieldWrapper.tsx

@@ -3,17 +3,24 @@ import { ReactNode, memo, useMemo } from "react";
 import { getColumnNameLabel, iconForField } from "../..";
 import { isEmpty, isNull, isUndefined } from "lodash";
 import { useResponsive } from "@/hooks";
+import classNames from "classnames";
 
 const ShowFieldWrapper = ({
   field,
   children,
   extra,
+  inline = false,
 }: {
-  field: Field;
+  field: Field<any>;
   children: ReactNode;
   extra?: ReactNode;
+  inline?: boolean;
 }) => {
-  const prettyColumnName = getColumnNameLabel(field?.column?.baseOptions?.label, field?.column?.label, field?.column?.name);
+  const prettyColumnName = getColumnNameLabel(
+    field?.column?.baseOptions?.label,
+    field?.column?.label,
+    field?.column?.name
+  );
 
   const IconElement = useMemo(
     () => iconForField(field.column),
@@ -23,16 +30,30 @@ const ShowFieldWrapper = ({
   const { isMd } = useResponsive();
   const showExtra = useMemo(() => {
     if (isMd) {
-      return true;
+      return !isEmpty(extra);
     } else {
       return !isUndefined(extra) && !isNull(extra) && !isEmpty(extra);
     }
   }, [isMd, extra]);
 
   return (
-    <div className="flex flex-col md:flex-row border-b md:min-h-14 py-3 md:py-0 space-y-3 md:space-y-0 text-sm">
-      <div className="w-full md:w-48 lg:w-64 xl:w-64 px-4 md:px-6 flex items-start space-x-2">
-        <div className="flex items-center space-x-2 md:min-h-14 md:py-3">
+    <div
+      className={classNames("flex flex-col border-b text-sm py-3 md:py-0", {
+        "md:flex-col": inline,
+        "md:flex-row md:min-h-14 space-y-3 md:space-y-0": !inline,
+      })}
+    >
+      <div
+        className={classNames("w-full flex items-start px-4 space-x-2", {
+          "md:w-48 lg:w-64 xl:w-64 md:px-6": !inline,
+        })}
+      >
+        <div
+          className={classNames("flex items-center space-x-2 md:min-h-14", {
+            "pb-3 md:pb-0 md:pt-3": inline,
+            "md:py-3": !inline,
+          })}
+        >
           <IconElement className="h-4 self-start mt-1 lg:self-center lg:mt-0 inline-block flex-shrink-0 text-gray-500" />{" "}
           <span>{prettyColumnName}</span>
         </div>

features/fields/components/GoToRecordLink.tsx

@@ -0,0 +1,26 @@
+import { ArrowRightIcon } from "@heroicons/react/outline";
+import { Tooltip } from "@chakra-ui/react";
+import Link from "next/link";
+import React, { memo } from "react";
+
+function GoToRecord({
+  href,
+  label = "Go to record",
+}: {
+  href: string;
+  label?: string;
+}) {
+  return (
+    <Link href={href}>
+      <a title={label}>
+        <Tooltip label={label}>
+          <span className="inline-flex">
+            <ArrowRightIcon className="inline-block underline text-blue-600 cursor-pointer ml-1 h-4 pt-1" />
+          </span>
+        </Tooltip>
+      </a>
+    </Link>
+  );
+}
+
+export default memo(GoToRecord);

features/fields/factory.ts

@@ -8,6 +8,7 @@ import BooleanShowField from "@/plugins/fields/Boolean/Show";
 import DateTimeEditField from "@/plugins/fields/DateTime/Edit";
 import DateTimeIndexField from "@/plugins/fields/DateTime/Index";
 import DateTimeShowField from "@/plugins/fields/DateTime/Show";
+import DummyField from "./components/DummyField"
 import GravatarIndexField from "@/plugins/fields/Gravatar/Index";
 import GravatarShowField from "@/plugins/fields/Gravatar/Show";
 import IdEditField from "@/plugins/fields/Id/Edit";
@@ -16,6 +17,8 @@ import IdShowField from "@/plugins/fields/Id/Show";
 import JsonEditField from "@/plugins/fields/Json/Edit";
 import JsonIndexField from "@/plugins/fields/Json/Index";
 import JsonShowField from "@/plugins/fields/Json/Show";
+import LinkToIndexField from "@/plugins/fields/LinkTo/Index";
+import LinkToShowField from "@/plugins/fields/LinkTo/Show";
 import NumberEditField from "@/plugins/fields/Number/Edit";
 import NumberIndexField from "@/plugins/fields/Number/Index";
 import NumberShowField from "@/plugins/fields/Number/Show";
@@ -36,6 +39,7 @@ import type { Column } from "./types";
 export const getFieldForEdit = (column: Column) => {
   switch (column.fieldType) {
     default:
+      return DummyField;
     case "Text":
       return TextEditField;
     case "Number":
@@ -62,6 +66,7 @@ export const getFieldForEdit = (column: Column) => {
 export const getFieldForShow = (column: Column) => {
   switch (column.fieldType) {
     default:
+      return DummyField;
     case "Text":
       return TextShowField;
     case "Number":
@@ -80,6 +85,8 @@ export const getFieldForShow = (column: Column) => {
       return JsonShowField;
     case "Association":
       return AssociationShowField;
+    case "LinkTo":
+      return LinkToShowField;
     case "ProgressBar":
       return ProgressBarShowField;
     case "Gravatar":
@@ -90,6 +97,7 @@ export const getFieldForShow = (column: Column) => {
 export const getFieldForIndex = (column: Column) => {
   switch (column.fieldType) {
     default:
+      return DummyField;
     case "Id":
       return IdIndexField;
     case "Text":
@@ -108,6 +116,8 @@ export const getFieldForIndex = (column: Column) => {
       return JsonIndexField;
     case "Association":
       return AssociationIndexField;
+    case "LinkTo":
+      return LinkToIndexField;
     case "ProgressBar":
       return ProgressBarIndexField;
     case "Gravatar":

features/fields/index.ts

@@ -5,18 +5,19 @@ import {
   CheckCircleIcon,
   HashtagIcon,
   KeyIcon,
+  LinkIcon,
   PhotographIcon,
   SelectorIcon,
   TrendingUpIcon,
 } from "@heroicons/react/outline";
+import { BasetoolRecord } from "../records/types"
 import { ElementType } from "react";
 import { compact, first, isPlainObject } from "lodash";
 import BracketsCurlyIcon from "@/components/svg/BracketsCurlyIcon";
 import QuestionIcon from "@/components/svg/QuestionIcon";
 import TextIcon from "@/components/svg/TextIcon";
 import isArray from "lodash/isArray";
 import type { Column, Field, FieldType, FieldValue } from "./types";
-import type { Record } from "@/features/records/types";
 
 export const idColumns = ["id", "_id", "ID", "Id"];
 
@@ -73,6 +74,13 @@ export const getColumnOptions = (
     });
   }
 
+  if (column.baseOptions.computed) {
+    options.push({
+      id: "LinkTo",
+      label: "LinkTo",
+    });
+  }
+
   return options;
 };
 
@@ -104,7 +112,7 @@ export const makeField = ({
   column,
   tableName,
 }: {
-  record: Record;
+  record: BasetoolRecord;
   column: Column;
   tableName: string;
 }): Field => {
@@ -142,6 +150,8 @@ export const iconForField = (field: Column): ElementType => {
       return ArrowRightIcon;
     case "ProgressBar":
       return TrendingUpIcon;
+    case "LinkTo":
+      return LinkIcon;
     case "Gravatar":
       return PhotographIcon;
   }

features/fields/types.d.ts

@@ -1,4 +1,4 @@
-import type { Record as BasetoolRecord } from "@/features/records";
+import type { BasetoolRecord } from "@/features/records";
 
 export type FieldType =
   | "Id"
@@ -11,6 +11,7 @@ export type FieldType =
   | "Json"
   | "Association"
   | "ProgressBar"
+  | "LinkTo"
   | "Gravatar";
 
 export type ForeignKey = {
@@ -65,12 +66,17 @@ export type RecordAssociationValue = {
   foreignId: number;
   foreignTable: string;
   dataSourceId: number;
-}
+};
 
-export type FieldValue = string | number | undefined | boolean | RecordAssociationValue;
+export type FieldValue =
+  | string
+  | number
+  | undefined
+  | boolean
+  | RecordAssociationValue;
 
-export type Field = {
-  value: FieldValue;
+export type Field<T = FieldValue> = {
+  value: T;
   column: Column;
   record: BasetoolRecord;
   tableName: string;

features/records/clientHelpers.ts

@@ -0,0 +1,57 @@
+import { BasetoolRecord, PossibleRecordValues } from "@/features/records/types";
+import { Column } from "../fields/types"
+import { IFilter } from "../tables/types";
+import { isArray, isString } from "lodash";
+
+export const filtersForHasMany = (
+  columnName: string,
+  ids: string | number[]
+): IFilter[] => {
+  let value = "";
+
+  if (isArray(ids)) {
+    value = ids.join(",");
+  } else if (isString(ids)) {
+    value = ids;
+  }
+
+  return [
+    {
+      column: {} as Column,
+      columnName,
+      condition: "is_in",
+      value,
+      verb: "and",
+    },
+  ];
+};
+
+/**
+ * This method tries to extract a pretty name from a record
+ */
+export const getPrettyName = (
+  record: BasetoolRecord,
+  field?: string | undefined
+): string => {
+  // See if we have some `name` column set in the DB
+  let prettyName: PossibleRecordValues = "";
+
+  // Use the `nameColumn` attribute
+  if (field) {
+    prettyName = record[field];
+  } else {
+    // Try and find a common `name` columns
+    if (record.url) prettyName = record.url;
+    if (record.email) prettyName = record.email;
+    if (record.first_name) prettyName = record.first_name;
+    if (record.firstName) prettyName = record.firstName;
+    if (record.title) prettyName = record.title;
+    if (record.name) prettyName = record.name;
+  }
+
+  if (prettyName) return prettyName.toString();
+
+  if (record && record?.id) return record.id.toString();
+
+  return "";
+};

features/records/components/EditRecord.tsx

@@ -1,5 +1,5 @@
 import { Column } from "@/features/fields/types";
-import { getVisibleColumns } from "@/features/fields";
+import { getConnectedColumns, getVisibleColumns } from "@/features/fields";
 import { isEmpty, sortBy } from "lodash";
 import { useACLHelpers } from "@/features/authorization/hooks";
 import { useDataSourceContext } from "@/hooks";
@@ -42,9 +42,10 @@ const EditRecord = () => {
 
   const columns = useMemo(
     () =>
-      sortBy(getVisibleColumns(columnsResponse?.data, "edit"), [
-        (column: Column) => column?.baseOptions?.orderIndex,
-      ]),
+      sortBy(
+        getConnectedColumns(getVisibleColumns(columnsResponse?.data, "edit")),
+        [(column: Column) => column?.baseOptions?.orderIndex]
+      ),
     [columnsResponse?.data]
   );
 

features/records/components/Form.tsx

@@ -1,3 +1,4 @@
+import { BasetoolRecord } from "../types";
 import { Button } from "@chakra-ui/button";
 import { Column } from "@/features/fields/types";
 import { PencilAltIcon } from "@heroicons/react/outline";
@@ -16,16 +17,15 @@ import { useDataSourceContext } from "@/hooks";
 import { useForm } from "react-hook-form";
 import { useRouter } from "next/router";
 import BackButton from "./BackButton";
-import Joi, { ObjectSchema } from "joi";
+import Joi, { ObjectSchema, SchemaLike } from "joi";
 import LoadingOverlay from "@/components/LoadingOverlay";
 import PageWrapper from "@/components/PageWrapper";
 import React, { memo, useEffect, useMemo, useState } from "react";
 import isUndefined from "lodash/isUndefined";
 import logger from "@/lib/logger";
-import type { Record } from "@/features/records/types";
 
-const makeSchema = async (record: Record, columns: Column[]) => {
-  const schema: { [columnName: string]: any } = {};
+const makeSchema = async (record: BasetoolRecord, columns: Column[]) => {
+  const schema: { [columnName: string]: SchemaLike } = {};
 
   // eslint-disable-next-line no-restricted-syntax
   for (const column of columns) {
@@ -57,7 +57,7 @@ const Form = ({
   columns,
   formForCreate = false,
 }: {
-  record: Record;
+  record: BasetoolRecord;
   columns: Column[];
   formForCreate?: boolean;
 }) => {
@@ -89,14 +89,14 @@ const Form = ({
         .map(([columnName, value]) => {
           // Add foreignId for association columns
           if (associationColumnNames.includes(columnName)) {
-            return [columnName, value.foreignId];
+            return [columnName, (value as any)?.foreignId];
           }
 
           return [columnName, value];
         })
         .filter(([columnName]) => {
           // Remove invisible columns
-          if (visibleColumnNames.includes(columnName)) {
+          if (visibleColumnNames.includes(columnName?.toString() || "")) {
             return true;
           }
 
@@ -251,7 +251,7 @@ const Form = ({
                   if (!formData) return null;
 
                   const field = makeField({
-                    record: formData as Record,
+                    record: formData as BasetoolRecord,
                     column,
                     tableName: tableName,
                   });