refactor: remove Table from FormControl

- Table fields are only used on CommonForms anyways
- Causes circular import

src/components/Controls/FormControl.vue

@@ -14,7 +14,6 @@ import Float from './Float.vue';
 import Int from './Int.vue';
 import Link from './Link.vue';
 import Select from './Select.vue';
-import Table from './Table.vue';
 import Text from './Text.vue';
 
 const components = {
@@ -26,7 +25,6 @@ const components = {
   Link,
   Date,
   Datetime,
-  Table,
   AutoComplete,
   DynamicLink,
   Int,

src/components/Controls/LanguageSelector.vue

@@ -1,5 +1,5 @@
 <template>
-  <FormControl
+  <AutoComplete
     :df="languageDf"
     :value="value"
     @change="onChange"
@@ -9,10 +9,11 @@
 </template>
 <script lang="ts">
 import { DEFAULT_LANGUAGE } from 'fyo/utils/consts';
+import { OptionField } from 'schemas/types';
 import { fyo } from 'src/initFyo';
 import { languageCodeMap, setLanguageMap } from 'src/utils/language';
 import { defineComponent } from 'vue';
-import FormControl from './FormControl.vue';
+import AutoComplete from './AutoComplete.vue';
 
 export default defineComponent({
   props: {
@@ -21,7 +22,7 @@ export default defineComponent({
       default: false,
     },
   },
-  components: { FormControl },
+  components: { AutoComplete },
   methods: {
     onChange(value: unknown) {
       if (typeof value !== 'string') {
@@ -39,13 +40,22 @@ export default defineComponent({
     value() {
       return fyo.config.get('language') ?? DEFAULT_LANGUAGE;
     },
-    languageDf() {
+    languageDf(): OptionField {
+      const preset = fyo.config.get('language');
+      let language = DEFAULT_LANGUAGE;
+      if (typeof preset === 'string') {
+        language = preset;
+      }
+
       return {
         fieldname: 'language',
         label: this.t`Language`,
         fieldtype: 'AutoComplete',
-        options: Object.keys(languageCodeMap),
+        options: Object.keys(languageCodeMap).map((value) => ({
-        default: fyo.config.get('language') ?? DEFAULT_LANGUAGE,
+          label: value,
+          value,
+        })),
+        default: language,
         description: this.t`Set the display language.`,
       };
     },

src/components/FilterDropdown.vue

@@ -55,11 +55,12 @@
                     {{ i + 1 }}
                   </span>
                 </div>
-                <FormControl
+                <Select
                   :border="true"
                   size="small"
                   class="w-24"
                   :df="{
+                    label: t`Field`,
                     placeholder: t`Field`,
                     fieldname: 'fieldname',
                     fieldtype: 'Select',
@@ -68,11 +69,12 @@
                   :value="filter.fieldname"
                   @change="(value) => (filter.fieldname = value)"
                 />
-                <FormControl
+                <Select
                   :border="true"
                   size="small"
                   class="w-24"
                   :df="{
+                    label: t`Condition`,
                     placeholder: t`Condition`,
                     fieldname: 'condition',
                     fieldtype: 'Select',
@@ -81,11 +83,12 @@
                   :value="filter.condition"
                   @change="(value) => (filter.condition = value)"
                 />
-                <FormControl
+                <Data
                   :border="true"
                   size="small"
                   class="w-24"
                   :df="{
+                    label: t`Value`,
                     placeholder: t`Value`,
                     fieldname: 'value',
                     fieldtype: 'Data',
@@ -124,14 +127,16 @@
 </template>
 <script lang="ts">
 import { t } from 'fyo';
-import { Field, FieldTypeEnum } from 'schemas/types';
+import { Field, FieldTypeEnum, SelectOption } from 'schemas/types';
 import { fyo } from 'src/initFyo';
 import { getRandomString } from 'utils';
+import { defineComponent } from 'vue';
 import Button from './Button.vue';
-import FormControl from './Controls/FormControl.vue';
+import Data from './Controls/Data.vue';
+import Select from './Controls/Select.vue';
 import Icon from './Icon.vue';
 import Popover from './Popover.vue';
-import { defineComponent } from 'vue';
+import { cloneDeep } from 'lodash';
 
 const conditions = [
   { label: t`Is`, value: '=' },
@@ -159,7 +164,8 @@ export default defineComponent({
     Popover,
     Button,
     Icon,
-    FormControl,
+    Select,
+    Data,
   },
   props: { schemaName: { type: String, required: true } },
   emits: ['change'],
@@ -255,8 +261,8 @@ export default defineComponent({
         value: df.fieldname,
       }));
     },
-    conditions(): typeof conditions {
+    conditions(): { label: string; value: string }[] {
-      return conditions;
+      return [...conditions];
     },
     explicitFilters(): Filter[] {
       return this.filters.filter((f) => !f.implicit);

src/pages/CommonForm/CommonFormSection.vue

@@ -25,7 +25,19 @@
           field.fieldtype === 'Check' ? 'mt-auto' : 'mb-auto',
         ]"
       >
+        <Table
+          v-if="field.fieldtype === 'Table'"
+          ref="fields"
+          :show-label="true"
+          :border="true"
+          :df="field"
+          :value="tableValue(doc[field.fieldname])"
+          @editrow="(doc: Doc) => $emit('editrow', doc)"
+          @change="(value: DocValue) => $emit('value-change', field, value)"
+          @row-change="(field:Field, value:DocValue, parentfield:Field) => $emit('row-change',field, value, parentfield)"
+        />
         <FormControl
+          v-else
           :ref="field.fieldname === 'name' ? 'nameField' : 'fields'"
           :size="field.fieldtype === 'AttachImage' ? 'form' : undefined"
           :show-label="true"
@@ -48,6 +60,7 @@ import { DocValue } from 'fyo/core/types';
 import { Doc } from 'fyo/model/doc';
 import { Field } from 'schemas/types';
 import FormControl from 'src/components/Controls/FormControl.vue';
+import Table from 'src/components/Controls/Table.vue';
 import { focusOrSelectFormControl } from 'src/utils/ui';
 import { defineComponent, PropType } from 'vue';
 
@@ -70,6 +83,13 @@ export default defineComponent({
     focusOrSelectFormControl(this.doc, this.$refs.nameField);
   },
   methods: {
+    tableValue(value: unknown): unknown[] {
+      if (Array.isArray(value)) {
+        return value;
+      }
+
+      return [];
+    },
     toggleCollapsed() {
       if (!this.collapsible) {
         return;
@@ -78,6 +98,6 @@ export default defineComponent({
       this.collapsed = !this.collapsed;
     },
   },
-  components: { FormControl },
+  components: { FormControl, Table },
 });
 </script>

src/pages/QuickEditForm.vue

@@ -51,11 +51,11 @@
       }"
       v-if="doc && (titleField || imageField)"
     >
-      <FormControl
+      <AttachImage
         v-if="imageField"
         class="ms-4"
         :df="imageField"
-        :value="doc[imageField.fieldname]"
+        :value="String(doc[imageField.fieldname] ?? '')"
         @change="(value) => valueChange(imageField as Field, value)"
         :letter-placeholder="letterPlaceHolder"
       />
@@ -92,6 +92,7 @@ import { t } from 'fyo';
 import { DocValue } from 'fyo/core/types';
 import { Field, Schema } from 'schemas/types';
 import Button from 'src/components/Button.vue';
+import AttachImage from 'src/components/Controls/AttachImage.vue';
 import FormControl from 'src/components/Controls/FormControl.vue';
 import TwoColumnForm from 'src/components/TwoColumnForm.vue';
 import { fyo } from 'src/initFyo';
@@ -117,6 +118,7 @@ export default defineComponent({
     Button,
     FormControl,
     TwoColumnForm,
+    AttachImage,
   },
   emits: ['close'],
   setup() {

src/pages/TemplateBuilder/TemplateBuilder.vue

@@ -84,7 +84,7 @@
           />
 
           <!-- Display Doc -->
-          <FormControl
+          <Link
             v-if="doc.type"
             :title="displayDocField.label"
             class="w-40 border-r flex-shrink-0"
@@ -223,6 +223,7 @@ import { saveExportData } from 'reports/commonExporter';
 import { Field, TargetField } from 'schemas/types';
 import Button from 'src/components/Button.vue';
 import FormControl from 'src/components/Controls/FormControl.vue';
+import Link from 'src/components/Controls/Link.vue';
 import DropdownWithActions from 'src/components/DropdownWithActions.vue';
 import HorizontalResizer from 'src/components/HorizontalResizer.vue';
 import Modal from 'src/components/Modal.vue';
@@ -252,9 +253,9 @@ import { useDocShortcuts } from 'src/utils/vueUtils';
 import { getMapFromList } from 'utils/index';
 import { computed, defineComponent, inject, ref } from 'vue';
 import PrintContainer from './PrintContainer.vue';
+import SetPrintSize from './SetPrintSize.vue';
 import TemplateBuilderHint from './TemplateBuilderHint.vue';
 import TemplateEditor from './TemplateEditor.vue';
-import SetPrintSize from './SetPrintSize.vue';
 
 export default defineComponent({
   props: { name: String },
@@ -268,6 +269,7 @@ export default defineComponent({
     FormControl,
     TemplateBuilderHint,
     ShortcutKeys,
+    Link,
     Modal,
     SetPrintSize,
   },