From 5836c2b3c429be8bce832770974aea3a76f2057a Mon Sep 17 00:00:00 2001 From: Dean Date: Wed, 5 Oct 2022 09:28:07 +0100 Subject: [PATCH] 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",