From 2ec21741d1c889df4c5b8d14d069d2f574e58010 Mon Sep 17 00:00:00 2001 From: Dean Date: Wed, 5 Oct 2022 09:28:07 +0100 Subject: [PATCH 1/8] Initial commit of QR Reader field --- .../screenTemplates/utils/commonComponents.js | 1 + .../DataTable/modals/CreateEditColumn.svelte | 1 + .../TableNavigator/TableDataImport.svelte | 4 + .../design/settings/componentSettings.js | 1 + .../settings/controls/FormFieldSelect.svelte | 2 +- .../builder/src/constants/backend/index.js | 10 ++ .../new/_components/componentStructure.json | 3 +- packages/client/manifest.json | 36 +++++ packages/client/package.json | 1 + .../src/components/app/CodeScanner.svelte | 141 ++++++++++++++++++ .../app/forms/CodeScannerField.svelte | 55 +++++++ .../client/src/components/app/forms/index.js | 1 + packages/client/src/constants.js | 1 + packages/server/src/constants/index.js | 2 + .../server/src/integrations/base/sqlTable.ts | 1 + packages/server/src/utilities/csvParser.js | 1 + .../src/utilities/rowProcessor/index.js | 5 + packages/types/src/sdk/datasources.ts | 1 + 18 files changed, 265 insertions(+), 2 deletions(-) create mode 100644 packages/client/src/components/app/CodeScanner.svelte create mode 100644 packages/client/src/components/app/forms/CodeScannerField.svelte diff --git a/packages/builder/src/builderStore/store/screenTemplates/utils/commonComponents.js b/packages/builder/src/builderStore/store/screenTemplates/utils/commonComponents.js index 9176d535ab..cc8c5ef712 100644 --- a/packages/builder/src/builderStore/store/screenTemplates/utils/commonComponents.js +++ b/packages/builder/src/builderStore/store/screenTemplates/utils/commonComponents.js @@ -138,6 +138,7 @@ const fieldTypeToComponentMap = { attachment: "attachmentfield", link: "relationshipfield", json: "jsonfield", + code: "codescanner", } export function makeDatasourceFormComponents(datasource) { diff --git a/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte b/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte index 21059b32dd..d9993539ce 100644 --- a/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte +++ b/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte @@ -261,6 +261,7 @@ } else { return [ FIELDS.STRING, + FIELDS.CODE, FIELDS.LONGFORM, FIELDS.OPTIONS, FIELDS.DATETIME, diff --git a/packages/builder/src/components/backend/TableNavigator/TableDataImport.svelte b/packages/builder/src/components/backend/TableNavigator/TableDataImport.svelte index 774aac0677..2b53a75152 100644 --- a/packages/builder/src/components/backend/TableNavigator/TableDataImport.svelte +++ b/packages/builder/src/components/backend/TableNavigator/TableDataImport.svelte @@ -124,6 +124,10 @@ label: "Multi-select", value: FIELDS.ARRAY.type, }, + { + label: "Code", + value: FIELDS.CODE.type, + }, ] diff --git a/packages/builder/src/components/design/settings/componentSettings.js b/packages/builder/src/components/design/settings/componentSettings.js index 56ae3de490..21dbeb4beb 100644 --- a/packages/builder/src/components/design/settings/componentSettings.js +++ b/packages/builder/src/components/design/settings/componentSettings.js @@ -51,6 +51,7 @@ const componentMap = { "field/link": FormFieldSelect, "field/array": FormFieldSelect, "field/json": FormFieldSelect, + "field/code": FormFieldSelect, // Some validation types are the same as others, so not all types are // explicitly listed here. e.g. options uses string validation "validation/string": ValidationEditor, diff --git a/packages/builder/src/components/design/settings/controls/FormFieldSelect.svelte b/packages/builder/src/components/design/settings/controls/FormFieldSelect.svelte index 1f08c56ff5..48e8213ee1 100644 --- a/packages/builder/src/components/design/settings/controls/FormFieldSelect.svelte +++ b/packages/builder/src/components/design/settings/controls/FormFieldSelect.svelte @@ -26,7 +26,7 @@ let entries = Object.entries(schema ?? {}) let types = [] - if (type === "field/options") { + if ((type === "field/options", type === "field/code")) { // allow options to be used on both options and string fields types = [type, "field/string"] } else { diff --git a/packages/builder/src/constants/backend/index.js b/packages/builder/src/constants/backend/index.js index 28ce35d9f7..bd2d5bc4e3 100644 --- a/packages/builder/src/constants/backend/index.js +++ b/packages/builder/src/constants/backend/index.js @@ -8,6 +8,15 @@ export const FIELDS = { presence: false, }, }, + CODE: { + name: "Code", + type: "code", + constraints: { + type: "string", + length: {}, + presence: false, + }, + }, LONGFORM: { name: "Long Form Text", type: "longform", @@ -148,6 +157,7 @@ export const ALLOWABLE_STRING_OPTIONS = [ FIELDS.STRING, FIELDS.OPTIONS, FIELDS.LONGFORM, + FIELDS.CODE, ] export const ALLOWABLE_STRING_TYPES = ALLOWABLE_STRING_OPTIONS.map( opt => opt.type diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/componentStructure.json b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/componentStructure.json index 671637f381..be17dbe868 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/componentStructure.json +++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/componentStructure.json @@ -65,7 +65,8 @@ "relationshipfield", "datetimefield", "multifieldselect", - "s3upload" + "s3upload", + "codescanner" ] }, { diff --git a/packages/client/manifest.json b/packages/client/manifest.json index b6d4941e4c..5ccb31409d 100644 --- a/packages/client/manifest.json +++ b/packages/client/manifest.json @@ -3157,6 +3157,42 @@ } ] }, + "codescanner": { + "name": "Code Scanner", + "icon": "Camera", + "styles": [ + "size" + ], + "draggable": true, + "illegalChildren": [ + "section" + ], + "settings": [ + { + "type": "text", + "label": "Label", + "key": "label", + "defaultValue": true + }, + { + "type": "field/code", + "label": "Field", + "key": "field", + "required": true + }, + { + "type": "boolean", + "label": "Disabled", + "key": "disabled", + "defaultValue": false + }, + { + "type": "validation/string", + "label": "Validation", + "key": "validation" + } + ] + }, "embeddedmap": { "name": "Embedded Map", "icon": "Location", diff --git a/packages/client/package.json b/packages/client/package.json index 1e2049ac27..aa8c6da1ea 100644 --- a/packages/client/package.json +++ b/packages/client/package.json @@ -33,6 +33,7 @@ "apexcharts": "^3.22.1", "dayjs": "^1.10.5", "downloadjs": "1.4.7", + "html5-qrcode": "^2.2.1", "leaflet": "^1.7.1", "regexparam": "^1.3.0", "sanitize-html": "^2.7.0", diff --git a/packages/client/src/components/app/CodeScanner.svelte b/packages/client/src/components/app/CodeScanner.svelte new file mode 100644 index 0000000000..7203b30aef --- /dev/null +++ b/packages/client/src/components/app/CodeScanner.svelte @@ -0,0 +1,141 @@ + + +
+ {#if code} +
+ + {code} +
+ {/if} + +
+ +
+ + {/if} + {#if code} +
+ + {code} +
+ {/if} + {#if !code && enabled && videoEle && cameraInit} +
+ + Searching for code... +
+ {/if} +
+
+
+ + + +
+
+ + + + + diff --git a/packages/client/src/components/app/forms/CodeScannerField.svelte b/packages/client/src/components/app/forms/CodeScannerField.svelte new file mode 100644 index 0000000000..034e6eacce --- /dev/null +++ b/packages/client/src/components/app/forms/CodeScannerField.svelte @@ -0,0 +1,55 @@ + + + + {#if fieldState} + + {/if} + diff --git a/packages/client/src/components/app/forms/index.js b/packages/client/src/components/app/forms/index.js index 0ff82cea94..44c1516885 100644 --- a/packages/client/src/components/app/forms/index.js +++ b/packages/client/src/components/app/forms/index.js @@ -13,3 +13,4 @@ export { default as passwordfield } from "./PasswordField.svelte" export { default as formstep } from "./FormStep.svelte" export { default as jsonfield } from "./JSONField.svelte" export { default as s3upload } from "./S3Upload.svelte" +export { default as codescanner } from "./CodeScannerField.svelte" diff --git a/packages/client/src/constants.js b/packages/client/src/constants.js index 51ef3fd124..9bd6d27bb0 100644 --- a/packages/client/src/constants.js +++ b/packages/client/src/constants.js @@ -1,5 +1,6 @@ export const FieldTypes = { STRING: "string", + CODE: "code", LONGFORM: "longform", OPTIONS: "options", NUMBER: "number", diff --git a/packages/server/src/constants/index.js b/packages/server/src/constants/index.js index c002c10f7b..ef15711cb7 100644 --- a/packages/server/src/constants/index.js +++ b/packages/server/src/constants/index.js @@ -31,6 +31,7 @@ exports.NoEmptyFilterStrings = [ exports.FieldTypes = { STRING: "string", + CODE: "code", LONGFORM: "longform", OPTIONS: "options", NUMBER: "number", @@ -51,6 +52,7 @@ exports.CanSwitchTypes = [ exports.FieldTypes.STRING, exports.FieldTypes.OPTIONS, exports.FieldTypes.LONGFORM, + exports.FieldTypes.CODE, ], [exports.FieldTypes.BOOLEAN, exports.FieldTypes.NUMBER], ] diff --git a/packages/server/src/integrations/base/sqlTable.ts b/packages/server/src/integrations/base/sqlTable.ts index af561e81c5..4626297ddc 100644 --- a/packages/server/src/integrations/base/sqlTable.ts +++ b/packages/server/src/integrations/base/sqlTable.ts @@ -40,6 +40,7 @@ function generateSchema( case FieldTypes.STRING: case FieldTypes.OPTIONS: case FieldTypes.LONGFORM: + case FieldTypes.CODE: schema.text(key) break case FieldTypes.NUMBER: diff --git a/packages/server/src/utilities/csvParser.js b/packages/server/src/utilities/csvParser.js index 8f9b3373c9..7eba0493eb 100644 --- a/packages/server/src/utilities/csvParser.js +++ b/packages/server/src/utilities/csvParser.js @@ -4,6 +4,7 @@ const { FieldTypes } = require("../constants") const VALIDATORS = { [FieldTypes.STRING]: () => true, [FieldTypes.OPTIONS]: () => true, + [FieldTypes.CODE]: () => true, [FieldTypes.NUMBER]: attribute => { // allow not to be present if (!attribute) { diff --git a/packages/server/src/utilities/rowProcessor/index.js b/packages/server/src/utilities/rowProcessor/index.js index e4c364eaf3..55b1c09538 100644 --- a/packages/server/src/utilities/rowProcessor/index.js +++ b/packages/server/src/utilities/rowProcessor/index.js @@ -48,6 +48,11 @@ const TYPE_TRANSFORM_MAP = { [null]: "", [undefined]: undefined, }, + [FieldTypes.CODE]: { + "": "", + [null]: "", + [undefined]: undefined, + }, [FieldTypes.FORMULA]: { "": "", [null]: "", diff --git a/packages/types/src/sdk/datasources.ts b/packages/types/src/sdk/datasources.ts index d01d636b86..c76ea376b6 100644 --- a/packages/types/src/sdk/datasources.ts +++ b/packages/types/src/sdk/datasources.ts @@ -24,6 +24,7 @@ export enum QueryType { export enum DatasourceFieldType { STRING = "string", + CODE = "code", LONGFORM = "longForm", BOOLEAN = "boolean", NUMBER = "number", From 617d443890473bb4d49313168cbc57b308f3016e Mon Sep 17 00:00:00 2001 From: Dean Date: Thu, 6 Oct 2022 09:54:43 +0100 Subject: [PATCH 2/8] UX/UI updates and rollup config changes to exclude common warnings --- packages/client/manifest.json | 27 ++- packages/client/rollup.config.js | 9 + .../src/components/app/CodeScanner.svelte | 226 +++++++++++++----- .../app/forms/CodeScannerField.svelte | 34 +-- 4 files changed, 202 insertions(+), 94 deletions(-) diff --git a/packages/client/manifest.json b/packages/client/manifest.json index 5ccb31409d..acb05d58bc 100644 --- a/packages/client/manifest.json +++ b/packages/client/manifest.json @@ -3168,24 +3168,39 @@ "section" ], "settings": [ - { - "type": "text", - "label": "Label", - "key": "label", - "defaultValue": true - }, { "type": "field/code", "label": "Field", "key": "field", "required": true }, + { + "type": "text", + "label": "Label", + "key": "label" + }, + { + "type": "text", + "label": "Button", + "key": "scanButtonText" + }, + { + "type": "text", + "label": "Default value", + "key": "defaultValue" + }, { "type": "boolean", "label": "Disabled", "key": "disabled", "defaultValue": false }, + { + "type": "boolean", + "label": "Allow manual entry", + "key": "allowManualEntry", + "defaultValue": false + }, { "type": "validation/string", "label": "Validation", diff --git a/packages/client/rollup.config.js b/packages/client/rollup.config.js index 5206b63884..be94ace90c 100644 --- a/packages/client/rollup.config.js +++ b/packages/client/rollup.config.js @@ -27,6 +27,15 @@ export default { file: `./dist/budibase-client.js`, }, ], + onwarn(warning, warn) { + if ( + warning.code === "THIS_IS_UNDEFINED" || + warning.code === "CIRCULAR_DEPENDENCY" + ) { + return + } + warn(warning) + }, plugins: [ alias({ entries: [ diff --git a/packages/client/src/components/app/CodeScanner.svelte b/packages/client/src/components/app/CodeScanner.svelte index 7203b30aef..3215875faa 100644 --- a/packages/client/src/components/app/CodeScanner.svelte +++ b/packages/client/src/components/app/CodeScanner.svelte @@ -1,123 +1,189 @@
- {#if code} -
+ {#if value && !manualMode} +
- {code} + {value}
{/if} - + + {#if allowManualEntry && manualMode} +
+ { + dispatch("change", value) + }} + /> +
+ {/if} + + {#if value} + { + dispatch("change", "") + }} + {disabled} + > + Clear + + {:else} + { + showReaderModal() + }} + {disabled} + > + {scanButtonText} + + {/if}
- - {/if} - {#if code} -
- - {code} -
- {/if} - {#if !code && enabled && videoEle && cameraInit} -
- - Searching for code... -
- {/if} +
+
+ + {#if cameraEnabled === false} +
Your camera is disabled.
+ {/if} +
+ {#if cameraEnabled === true} +
+ {#if value} +
+ + {value} +
+ {:else} +
+ + Searching for code... +
+ {/if} +
+ {/if} +
+ {#if allowManualEntry} + + {/if} + - -
@@ -125,17 +191,45 @@
diff --git a/packages/client/src/components/app/forms/CodeScannerField.svelte b/packages/client/src/components/app/forms/CodeScannerField.svelte index 034e6eacce..e2da89d1b5 100644 --- a/packages/client/src/components/app/forms/CodeScannerField.svelte +++ b/packages/client/src/components/app/forms/CodeScannerField.svelte @@ -9,34 +9,18 @@ export let validation export let defaultValue = "" export let onChange + export let allowManualEntry + export let scanButtonText let fieldState let fieldApi - let scannedCode - let loaded = false - - const handleInput = () => { - const changed = fieldApi.setValue(scannedCode) + const handleUpdate = e => { + const changed = fieldApi.setValue(e.detail) if (onChange && changed) { - onChange({ value: scannedCode }) + onChange({ value: e.detail }) } } - - $: if (!loaded && !scannedCode && fieldState?.value) { - scannedCode = fieldState.value + "" - loaded = true - } - - /* - QR Nimiq has rollup issues? - QR qrcodejs 12b bundle? - https://github.com/davidshimjs/qrcodejs - BOTH html5-qrcode has a 330k bundle - https://github.com/mebjas/html5-qrcode - BOTH zxing 360k bundle size - https://github.com/zxing-js/library - */ {#if fieldState} - + {/if} From e251c914ff04a5a2d234d092c8e240d47b266a15 Mon Sep 17 00:00:00 2001 From: Dean Date: Thu, 6 Oct 2022 13:02:17 +0100 Subject: [PATCH 3/8] Review feedback changes. Changed 'Code' labelling to 'Scanned Code' --- .../store/screenTemplates/utils/commonComponents.js | 2 +- .../backend/DataTable/modals/CreateEditColumn.svelte | 2 +- .../backend/TableNavigator/TableDataImport.svelte | 4 ++-- .../src/components/design/settings/componentSettings.js | 2 +- .../design/settings/controls/FormFieldSelect.svelte | 2 +- packages/builder/src/constants/backend/index.js | 8 ++++---- packages/client/manifest.json | 2 +- .../src/components/app/forms/CodeScannerField.svelte | 2 +- packages/client/src/constants.js | 2 +- packages/server/src/constants/index.js | 4 ++-- packages/server/src/integrations/base/sqlTable.ts | 2 +- packages/server/src/utilities/csvParser.js | 2 +- packages/server/src/utilities/rowProcessor/index.js | 2 +- 13 files changed, 18 insertions(+), 18 deletions(-) diff --git a/packages/builder/src/builderStore/store/screenTemplates/utils/commonComponents.js b/packages/builder/src/builderStore/store/screenTemplates/utils/commonComponents.js index cc8c5ef712..a6c71ae54e 100644 --- a/packages/builder/src/builderStore/store/screenTemplates/utils/commonComponents.js +++ b/packages/builder/src/builderStore/store/screenTemplates/utils/commonComponents.js @@ -138,7 +138,7 @@ const fieldTypeToComponentMap = { attachment: "attachmentfield", link: "relationshipfield", json: "jsonfield", - code: "codescanner", + scannedcode: "codescanner", } export function makeDatasourceFormComponents(datasource) { diff --git a/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte b/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte index 8f6b4a746e..a4cddf512f 100644 --- a/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte +++ b/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte @@ -261,7 +261,7 @@ } else { return [ FIELDS.STRING, - FIELDS.CODE, + FIELDS.SCANNEDCODE, FIELDS.LONGFORM, FIELDS.OPTIONS, FIELDS.DATETIME, diff --git a/packages/builder/src/components/backend/TableNavigator/TableDataImport.svelte b/packages/builder/src/components/backend/TableNavigator/TableDataImport.svelte index 2b53a75152..4d827b59b5 100644 --- a/packages/builder/src/components/backend/TableNavigator/TableDataImport.svelte +++ b/packages/builder/src/components/backend/TableNavigator/TableDataImport.svelte @@ -125,8 +125,8 @@ value: FIELDS.ARRAY.type, }, { - label: "Code", - value: FIELDS.CODE.type, + label: "Scanned Code", + value: FIELDS.SCANNEDCODE.type, }, ] diff --git a/packages/builder/src/components/design/settings/componentSettings.js b/packages/builder/src/components/design/settings/componentSettings.js index 21dbeb4beb..eadaecd8cc 100644 --- a/packages/builder/src/components/design/settings/componentSettings.js +++ b/packages/builder/src/components/design/settings/componentSettings.js @@ -51,7 +51,7 @@ const componentMap = { "field/link": FormFieldSelect, "field/array": FormFieldSelect, "field/json": FormFieldSelect, - "field/code": FormFieldSelect, + "field/scannedcode": FormFieldSelect, // Some validation types are the same as others, so not all types are // explicitly listed here. e.g. options uses string validation "validation/string": ValidationEditor, diff --git a/packages/builder/src/components/design/settings/controls/FormFieldSelect.svelte b/packages/builder/src/components/design/settings/controls/FormFieldSelect.svelte index 48e8213ee1..81b01b2b77 100644 --- a/packages/builder/src/components/design/settings/controls/FormFieldSelect.svelte +++ b/packages/builder/src/components/design/settings/controls/FormFieldSelect.svelte @@ -26,7 +26,7 @@ let entries = Object.entries(schema ?? {}) let types = [] - if ((type === "field/options", type === "field/code")) { + if ((type === "field/options", type === "field/scannedcode")) { // allow options to be used on both options and string fields types = [type, "field/string"] } else { diff --git a/packages/builder/src/constants/backend/index.js b/packages/builder/src/constants/backend/index.js index bd2d5bc4e3..93bb90344e 100644 --- a/packages/builder/src/constants/backend/index.js +++ b/packages/builder/src/constants/backend/index.js @@ -8,9 +8,9 @@ export const FIELDS = { presence: false, }, }, - CODE: { - name: "Code", - type: "code", + SCANNEDCODE: { + name: "Scanned Code", + type: "scannedcode", constraints: { type: "string", length: {}, @@ -157,7 +157,7 @@ export const ALLOWABLE_STRING_OPTIONS = [ FIELDS.STRING, FIELDS.OPTIONS, FIELDS.LONGFORM, - FIELDS.CODE, + FIELDS.SCANNEDCODE, ] export const ALLOWABLE_STRING_TYPES = ALLOWABLE_STRING_OPTIONS.map( opt => opt.type diff --git a/packages/client/manifest.json b/packages/client/manifest.json index acb05d58bc..64d90875a7 100644 --- a/packages/client/manifest.json +++ b/packages/client/manifest.json @@ -3169,7 +3169,7 @@ ], "settings": [ { - "type": "field/code", + "type": "field/scannedcode", "label": "Field", "key": "field", "required": true diff --git a/packages/client/src/components/app/forms/CodeScannerField.svelte b/packages/client/src/components/app/forms/CodeScannerField.svelte index e2da89d1b5..38eab79dc8 100644 --- a/packages/client/src/components/app/forms/CodeScannerField.svelte +++ b/packages/client/src/components/app/forms/CodeScannerField.svelte @@ -4,7 +4,7 @@ export let field export let label - export let type = "code" + export let type = "scannedcode" export let disabled = false export let validation export let defaultValue = "" diff --git a/packages/client/src/constants.js b/packages/client/src/constants.js index 9bd6d27bb0..bad0c30371 100644 --- a/packages/client/src/constants.js +++ b/packages/client/src/constants.js @@ -1,6 +1,6 @@ export const FieldTypes = { STRING: "string", - CODE: "code", + SCANNEDCODE: "scannedcode", LONGFORM: "longform", OPTIONS: "options", NUMBER: "number", diff --git a/packages/server/src/constants/index.js b/packages/server/src/constants/index.js index ef15711cb7..4b54424efa 100644 --- a/packages/server/src/constants/index.js +++ b/packages/server/src/constants/index.js @@ -31,7 +31,7 @@ exports.NoEmptyFilterStrings = [ exports.FieldTypes = { STRING: "string", - CODE: "code", + SCANNEDCODE: "scannedcode", LONGFORM: "longform", OPTIONS: "options", NUMBER: "number", @@ -52,7 +52,7 @@ exports.CanSwitchTypes = [ exports.FieldTypes.STRING, exports.FieldTypes.OPTIONS, exports.FieldTypes.LONGFORM, - exports.FieldTypes.CODE, + exports.FieldTypes.SCANNEDCODE, ], [exports.FieldTypes.BOOLEAN, exports.FieldTypes.NUMBER], ] diff --git a/packages/server/src/integrations/base/sqlTable.ts b/packages/server/src/integrations/base/sqlTable.ts index 4626297ddc..52eb25be9d 100644 --- a/packages/server/src/integrations/base/sqlTable.ts +++ b/packages/server/src/integrations/base/sqlTable.ts @@ -40,7 +40,7 @@ function generateSchema( case FieldTypes.STRING: case FieldTypes.OPTIONS: case FieldTypes.LONGFORM: - case FieldTypes.CODE: + case FieldTypes.SCANNEDCODE: schema.text(key) break case FieldTypes.NUMBER: diff --git a/packages/server/src/utilities/csvParser.js b/packages/server/src/utilities/csvParser.js index 7eba0493eb..08962032b6 100644 --- a/packages/server/src/utilities/csvParser.js +++ b/packages/server/src/utilities/csvParser.js @@ -4,7 +4,7 @@ const { FieldTypes } = require("../constants") const VALIDATORS = { [FieldTypes.STRING]: () => true, [FieldTypes.OPTIONS]: () => true, - [FieldTypes.CODE]: () => true, + [FieldTypes.SCANNEDCODE]: () => true, [FieldTypes.NUMBER]: attribute => { // allow not to be present if (!attribute) { diff --git a/packages/server/src/utilities/rowProcessor/index.js b/packages/server/src/utilities/rowProcessor/index.js index 55b1c09538..b61fbe66e1 100644 --- a/packages/server/src/utilities/rowProcessor/index.js +++ b/packages/server/src/utilities/rowProcessor/index.js @@ -48,7 +48,7 @@ const TYPE_TRANSFORM_MAP = { [null]: "", [undefined]: undefined, }, - [FieldTypes.CODE]: { + [FieldTypes.SCANNEDCODE]: { "": "", [null]: "", [undefined]: undefined, From c09154b03ece74b2f405c2a93eb9a8c42f0147f1 Mon Sep 17 00:00:00 2001 From: Dean Date: Fri, 7 Oct 2022 11:00:25 +0100 Subject: [PATCH 4/8] Renamed the 'Scanned Code' field type to 'Barcode/QR'. The component is also now listed as 'Barcode/QR Scanner'. Minor fix to include longform text columns in the table csv import list --- .../store/screenTemplates/utils/commonComponents.js | 2 +- .../backend/DataTable/modals/CreateEditColumn.svelte | 2 +- .../backend/TableNavigator/TableDataImport.svelte | 8 ++++++-- .../src/components/design/settings/componentSettings.js | 2 +- .../design/settings/controls/FormFieldSelect.svelte | 2 +- packages/builder/src/constants/backend/index.js | 8 ++++---- packages/client/manifest.json | 4 ++-- .../src/components/app/forms/CodeScannerField.svelte | 2 +- packages/client/src/constants.js | 2 +- packages/server/src/constants/index.js | 4 ++-- packages/server/src/integrations/base/sqlTable.ts | 2 +- packages/server/src/utilities/csvParser.js | 2 +- packages/server/src/utilities/rowProcessor/index.js | 2 +- 13 files changed, 23 insertions(+), 19 deletions(-) diff --git a/packages/builder/src/builderStore/store/screenTemplates/utils/commonComponents.js b/packages/builder/src/builderStore/store/screenTemplates/utils/commonComponents.js index a6c71ae54e..ac40a10fea 100644 --- a/packages/builder/src/builderStore/store/screenTemplates/utils/commonComponents.js +++ b/packages/builder/src/builderStore/store/screenTemplates/utils/commonComponents.js @@ -138,7 +138,7 @@ const fieldTypeToComponentMap = { attachment: "attachmentfield", link: "relationshipfield", json: "jsonfield", - scannedcode: "codescanner", + barcodeqr: "codescanner", } export function makeDatasourceFormComponents(datasource) { diff --git a/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte b/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte index a4cddf512f..b7249ad60c 100644 --- a/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte +++ b/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte @@ -261,7 +261,7 @@ } else { return [ FIELDS.STRING, - FIELDS.SCANNEDCODE, + FIELDS.BARCODEQR, FIELDS.LONGFORM, FIELDS.OPTIONS, FIELDS.DATETIME, diff --git a/packages/builder/src/components/backend/TableNavigator/TableDataImport.svelte b/packages/builder/src/components/backend/TableNavigator/TableDataImport.svelte index 4d827b59b5..ea0ce59169 100644 --- a/packages/builder/src/components/backend/TableNavigator/TableDataImport.svelte +++ b/packages/builder/src/components/backend/TableNavigator/TableDataImport.svelte @@ -125,8 +125,12 @@ value: FIELDS.ARRAY.type, }, { - label: "Scanned Code", - value: FIELDS.SCANNEDCODE.type, + label: "Barcode/QR", + value: FIELDS.BARCODEQR.type, + }, + { + label: "Long Form Text", + value: FIELDS.LONGFORM.type, }, ] diff --git a/packages/builder/src/components/design/settings/componentSettings.js b/packages/builder/src/components/design/settings/componentSettings.js index eadaecd8cc..4e9b624f12 100644 --- a/packages/builder/src/components/design/settings/componentSettings.js +++ b/packages/builder/src/components/design/settings/componentSettings.js @@ -51,7 +51,7 @@ const componentMap = { "field/link": FormFieldSelect, "field/array": FormFieldSelect, "field/json": FormFieldSelect, - "field/scannedcode": FormFieldSelect, + "field/barcodeqr": FormFieldSelect, // Some validation types are the same as others, so not all types are // explicitly listed here. e.g. options uses string validation "validation/string": ValidationEditor, diff --git a/packages/builder/src/components/design/settings/controls/FormFieldSelect.svelte b/packages/builder/src/components/design/settings/controls/FormFieldSelect.svelte index 81b01b2b77..18653f51a3 100644 --- a/packages/builder/src/components/design/settings/controls/FormFieldSelect.svelte +++ b/packages/builder/src/components/design/settings/controls/FormFieldSelect.svelte @@ -26,7 +26,7 @@ let entries = Object.entries(schema ?? {}) let types = [] - if ((type === "field/options", type === "field/scannedcode")) { + if ((type === "field/options", type === "field/barcodeqr")) { // allow options to be used on both options and string fields types = [type, "field/string"] } else { diff --git a/packages/builder/src/constants/backend/index.js b/packages/builder/src/constants/backend/index.js index 93bb90344e..427e8d80a1 100644 --- a/packages/builder/src/constants/backend/index.js +++ b/packages/builder/src/constants/backend/index.js @@ -8,9 +8,9 @@ export const FIELDS = { presence: false, }, }, - SCANNEDCODE: { - name: "Scanned Code", - type: "scannedcode", + BARCODEQR: { + name: "Barcode/QR", + type: "barcodeqr", constraints: { type: "string", length: {}, @@ -157,7 +157,7 @@ export const ALLOWABLE_STRING_OPTIONS = [ FIELDS.STRING, FIELDS.OPTIONS, FIELDS.LONGFORM, - FIELDS.SCANNEDCODE, + FIELDS.BARCODEQR, ] export const ALLOWABLE_STRING_TYPES = ALLOWABLE_STRING_OPTIONS.map( opt => opt.type diff --git a/packages/client/manifest.json b/packages/client/manifest.json index 64d90875a7..5b4edc8f85 100644 --- a/packages/client/manifest.json +++ b/packages/client/manifest.json @@ -3158,7 +3158,7 @@ ] }, "codescanner": { - "name": "Code Scanner", + "name": "Barcode/QR Scanner", "icon": "Camera", "styles": [ "size" @@ -3169,7 +3169,7 @@ ], "settings": [ { - "type": "field/scannedcode", + "type": "field/barcodeqr", "label": "Field", "key": "field", "required": true diff --git a/packages/client/src/components/app/forms/CodeScannerField.svelte b/packages/client/src/components/app/forms/CodeScannerField.svelte index 38eab79dc8..7f7d82f304 100644 --- a/packages/client/src/components/app/forms/CodeScannerField.svelte +++ b/packages/client/src/components/app/forms/CodeScannerField.svelte @@ -4,7 +4,7 @@ export let field export let label - export let type = "scannedcode" + export let type = "barcodeqr" export let disabled = false export let validation export let defaultValue = "" diff --git a/packages/client/src/constants.js b/packages/client/src/constants.js index bad0c30371..1560552dc4 100644 --- a/packages/client/src/constants.js +++ b/packages/client/src/constants.js @@ -1,6 +1,6 @@ export const FieldTypes = { STRING: "string", - SCANNEDCODE: "scannedcode", + BARCODEQR: "barcodeqr", LONGFORM: "longform", OPTIONS: "options", NUMBER: "number", diff --git a/packages/server/src/constants/index.js b/packages/server/src/constants/index.js index 4b54424efa..2a92e87ff8 100644 --- a/packages/server/src/constants/index.js +++ b/packages/server/src/constants/index.js @@ -31,7 +31,7 @@ exports.NoEmptyFilterStrings = [ exports.FieldTypes = { STRING: "string", - SCANNEDCODE: "scannedcode", + BARCODEQR: "barcodeqr", LONGFORM: "longform", OPTIONS: "options", NUMBER: "number", @@ -52,7 +52,7 @@ exports.CanSwitchTypes = [ exports.FieldTypes.STRING, exports.FieldTypes.OPTIONS, exports.FieldTypes.LONGFORM, - exports.FieldTypes.SCANNEDCODE, + exports.FieldTypes.BARCODEQR, ], [exports.FieldTypes.BOOLEAN, exports.FieldTypes.NUMBER], ] diff --git a/packages/server/src/integrations/base/sqlTable.ts b/packages/server/src/integrations/base/sqlTable.ts index 52eb25be9d..02f7ad8718 100644 --- a/packages/server/src/integrations/base/sqlTable.ts +++ b/packages/server/src/integrations/base/sqlTable.ts @@ -40,7 +40,7 @@ function generateSchema( case FieldTypes.STRING: case FieldTypes.OPTIONS: case FieldTypes.LONGFORM: - case FieldTypes.SCANNEDCODE: + case FieldTypes.BARCODEQR: schema.text(key) break case FieldTypes.NUMBER: diff --git a/packages/server/src/utilities/csvParser.js b/packages/server/src/utilities/csvParser.js index 08962032b6..09449f6fc1 100644 --- a/packages/server/src/utilities/csvParser.js +++ b/packages/server/src/utilities/csvParser.js @@ -4,7 +4,7 @@ const { FieldTypes } = require("../constants") const VALIDATORS = { [FieldTypes.STRING]: () => true, [FieldTypes.OPTIONS]: () => true, - [FieldTypes.SCANNEDCODE]: () => true, + [FieldTypes.BARCODEQR]: () => true, [FieldTypes.NUMBER]: attribute => { // allow not to be present if (!attribute) { diff --git a/packages/server/src/utilities/rowProcessor/index.js b/packages/server/src/utilities/rowProcessor/index.js index b61fbe66e1..91daa1b5a0 100644 --- a/packages/server/src/utilities/rowProcessor/index.js +++ b/packages/server/src/utilities/rowProcessor/index.js @@ -48,7 +48,7 @@ const TYPE_TRANSFORM_MAP = { [null]: "", [undefined]: undefined, }, - [FieldTypes.SCANNEDCODE]: { + [FieldTypes.BARCODEQR]: { "": "", [null]: "", [undefined]: undefined, From 43befea5e9eee81b59ca6c4e9e3f4e15121e3db4 Mon Sep 17 00:00:00 2001 From: Dean Date: Mon, 10 Oct 2022 10:39:34 +0100 Subject: [PATCH 5/8] Code review updates --- packages/client/manifest.json | 13 +++++++++---- .../components/app/{ => forms}/CodeScanner.svelte | 12 ++++++------ .../components/app/forms/CodeScannerField.svelte | 6 ++++-- 3 files changed, 19 insertions(+), 12 deletions(-) rename packages/client/src/components/app/{ => forms}/CodeScanner.svelte (94%) diff --git a/packages/client/manifest.json b/packages/client/manifest.json index 0c114ab703..f19fbd7c64 100644 --- a/packages/client/manifest.json +++ b/packages/client/manifest.json @@ -3163,7 +3163,6 @@ "styles": [ "size" ], - "draggable": true, "illegalChildren": [ "section" ], @@ -3181,7 +3180,7 @@ }, { "type": "text", - "label": "Button", + "label": "Button text", "key": "scanButtonText" }, { @@ -4450,7 +4449,9 @@ "formblock": { "name": "Form Block", "icon": "Form", - "styles": ["size"], + "styles": [ + "size" + ], "block": true, "info": "Form blocks are only compatible with internal or SQL tables", "settings": [ @@ -4458,7 +4459,11 @@ "type": "select", "label": "Type", "key": "actionType", - "options": ["Create", "Update", "View"], + "options": [ + "Create", + "Update", + "View" + ], "defaultValue": "Create" }, { diff --git a/packages/client/src/components/app/CodeScanner.svelte b/packages/client/src/components/app/forms/CodeScanner.svelte similarity index 94% rename from packages/client/src/components/app/CodeScanner.svelte rename to packages/client/src/components/app/forms/CodeScanner.svelte index 3215875faa..8728e707dd 100644 --- a/packages/client/src/components/app/CodeScanner.svelte +++ b/packages/client/src/components/app/forms/CodeScanner.svelte @@ -6,7 +6,7 @@ export let value export let disabled = false export let allowManualEntry = false - export let scanButtonText = "Scan Code" + export let scanButtonText = "Scan code" import { createEventDispatcher } from "svelte" const dispatch = createEventDispatcher() @@ -161,17 +161,17 @@
- {#if allowManualEntry} + {#if allowManualEntry && !manualMode} {/if} @@ -193,7 +193,7 @@