mirror of https://github.com/nocodb/nocodb
աɨռɢӄաօռɢ
2 years ago
committed by
GitHub
37 changed files with 905 additions and 60 deletions
@ -0,0 +1,120 @@ |
|||||||
|
<script setup lang="ts"> |
||||||
|
import type { UITypes } from 'nocodb-sdk' |
||||||
|
import { AllowedColumnTypesForQrAndBarcodes } from 'nocodb-sdk' |
||||||
|
import type { SelectProps } from 'ant-design-vue' |
||||||
|
import { onMounted, useVModel, watch } from '#imports' |
||||||
|
|
||||||
|
const props = defineProps<{ |
||||||
|
modelValue: any |
||||||
|
}>() |
||||||
|
|
||||||
|
const emit = defineEmits(['update:modelValue']) |
||||||
|
|
||||||
|
const meta = inject(MetaInj, ref()) |
||||||
|
|
||||||
|
const activeView = inject(ActiveViewInj, ref()) |
||||||
|
|
||||||
|
const reloadDataHook = inject(ReloadViewDataHookInj)! |
||||||
|
|
||||||
|
const { fields, metaColumnById } = useViewColumns(activeView, meta, () => reloadDataHook.trigger()) |
||||||
|
|
||||||
|
const vModel = useVModel(props, 'modelValue', emit) |
||||||
|
|
||||||
|
const { setAdditionalValidations, validateInfos, column } = useColumnCreateStoreOrThrow() |
||||||
|
|
||||||
|
const columnsAllowedAsBarcodeValue = computed<SelectProps['options']>(() => { |
||||||
|
return fields.value |
||||||
|
?.filter( |
||||||
|
(el) => |
||||||
|
el.fk_column_id && AllowedColumnTypesForQrAndBarcodes.includes(metaColumnById.value[el.fk_column_id].uidt as UITypes), |
||||||
|
) |
||||||
|
.map((field) => { |
||||||
|
return { |
||||||
|
value: field.fk_column_id, |
||||||
|
label: field.title, |
||||||
|
} |
||||||
|
}) |
||||||
|
}) |
||||||
|
|
||||||
|
const supportedBarcodeFormats = [ |
||||||
|
{ value: 'CODE128', label: 'CODE128' }, |
||||||
|
{ value: 'upc', label: 'UPC' }, |
||||||
|
{ value: 'EAN13', label: 'EAN-13' }, |
||||||
|
{ value: 'EAN8', label: 'EAN-8' }, |
||||||
|
{ value: 'EAN5', label: 'EAN-5' }, |
||||||
|
{ value: 'EAN2', label: 'EAN-2' }, |
||||||
|
{ value: 'CODE39', label: 'CODE39' }, |
||||||
|
{ value: 'ITF14', label: 'ITF-14' }, |
||||||
|
{ value: 'MSI', label: 'MSI' }, |
||||||
|
{ value: 'PHARMACODE', label: 'pharmacode' }, |
||||||
|
{ value: 'CODABAR', label: 'codabar' }, |
||||||
|
] |
||||||
|
|
||||||
|
onMounted(() => { |
||||||
|
// set default value |
||||||
|
vModel.value.meta = { |
||||||
|
barcodeFormat: supportedBarcodeFormats[0].value, |
||||||
|
...vModel.value.meta, |
||||||
|
} |
||||||
|
vModel.value.fk_barcode_value_column_id = |
||||||
|
(column?.value?.colOptions as Record<string, any>)?.fk_barcode_value_column_id || columnsAllowedAsBarcodeValue.value?.[0] |
||||||
|
}) |
||||||
|
|
||||||
|
watch(columnsAllowedAsBarcodeValue, (newColumnsAllowedAsBarcodeValue) => { |
||||||
|
if (vModel.value.fk_barcode_value_column_id == null) { |
||||||
|
vModel.value.fk_barcode_value_column_id = newColumnsAllowedAsBarcodeValue?.[0]?.value |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
setAdditionalValidations({ |
||||||
|
fk_barcode_value_column_id: [{ required: true, message: 'Required' }], |
||||||
|
barcode_format: [{ required: true, message: 'Required' }], |
||||||
|
}) |
||||||
|
|
||||||
|
const showBarcodeValueColumnInfoIcon = computed(() => !columnsAllowedAsBarcodeValue.value?.length) |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<a-row> |
||||||
|
<a-col :span="24"> |
||||||
|
<a-form-item |
||||||
|
class="flex pb-2 nc-barcode-value-column-select flex-row" |
||||||
|
:label="$t('labels.barcodeValueColumn')" |
||||||
|
v-bind="validateInfos.fk_barcode_value_column_id" |
||||||
|
> |
||||||
|
<div class="flex w-1/2 flex-row items-center"> |
||||||
|
<a-select |
||||||
|
v-model:value="vModel.fk_barcode_value_column_id" |
||||||
|
:options="columnsAllowedAsBarcodeValue" |
||||||
|
placeholder="Select a column for the Barcode value" |
||||||
|
not-found-content="No valid Column Type can be found." |
||||||
|
@click.stop |
||||||
|
/> |
||||||
|
<div v-if="showBarcodeValueColumnInfoIcon" class="pl-2"> |
||||||
|
<a-tooltip placement="bottom"> |
||||||
|
<template #title> |
||||||
|
<span> |
||||||
|
The valid Column Types for a Barcode Column are: Number, Single Line Text, Long Text, Phone Number, URL, Email, |
||||||
|
Decimal. Please create one first. |
||||||
|
</span> |
||||||
|
</template> |
||||||
|
<mdi-information class="cursor-pointer" /> |
||||||
|
</a-tooltip> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</a-form-item> |
||||||
|
<a-form-item |
||||||
|
class="flex w-1/2 pb-2 nc-barcode-format-select" |
||||||
|
:label="$t('labels.barcodeFormat')" |
||||||
|
v-bind="validateInfos.barcode_format" |
||||||
|
> |
||||||
|
<a-select |
||||||
|
v-model:value="vModel.meta.barcodeFormat" |
||||||
|
:options="supportedBarcodeFormats" |
||||||
|
placeholder="Select a Barcode format" |
||||||
|
@click.stop |
||||||
|
/> |
||||||
|
</a-form-item> |
||||||
|
</a-col> |
||||||
|
</a-row> |
||||||
|
</template> |
||||||
@ -0,0 +1,68 @@ |
|||||||
|
<script setup lang="ts"> |
||||||
|
import JsBarcodeWrapper from './JsBarcodeWrapper.vue' |
||||||
|
|
||||||
|
const maxNumberOfAllowedCharsForBarcodeValue = 100 |
||||||
|
|
||||||
|
const cellValue = inject(CellValueInj) |
||||||
|
|
||||||
|
const column = inject(ColumnInj) |
||||||
|
|
||||||
|
const barcodeValue: ComputedRef<string> = computed(() => String(cellValue?.value || '')) |
||||||
|
|
||||||
|
const tooManyCharsForBarcode = computed(() => barcodeValue.value.length > maxNumberOfAllowedCharsForBarcodeValue) |
||||||
|
|
||||||
|
const modalVisible = ref(false) |
||||||
|
|
||||||
|
const showBarcodeModal = () => { |
||||||
|
modalVisible.value = true |
||||||
|
} |
||||||
|
|
||||||
|
const barcodeMeta = $computed(() => { |
||||||
|
return { |
||||||
|
barcodeFormat: 'CODE128', |
||||||
|
...(column?.value?.meta || {}), |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
const handleModalOkClick = () => (modalVisible.value = false) |
||||||
|
|
||||||
|
const showBarcode = computed(() => barcodeValue?.value.length > 0 && !tooManyCharsForBarcode.value) |
||||||
|
|
||||||
|
const { showEditNonEditableFieldWarning, showClearNonEditableFieldWarning } = useShowNotEditableWarning() |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<a-modal |
||||||
|
v-model:visible="modalVisible" |
||||||
|
:class="{ active: modalVisible }" |
||||||
|
wrap-class-name="nc-barcode-large" |
||||||
|
:body-style="{ padding: '0px' }" |
||||||
|
:footer="null" |
||||||
|
@ok="handleModalOkClick" |
||||||
|
> |
||||||
|
<JsBarcodeWrapper v-if="showBarcode" :barcode-value="barcodeValue" :barcode-format="barcodeMeta.barcodeFormat" /> |
||||||
|
</a-modal> |
||||||
|
<JsBarcodeWrapper |
||||||
|
v-if="showBarcode" |
||||||
|
:barcode-value="barcodeValue" |
||||||
|
:barcode-format="barcodeMeta.barcodeFormat" |
||||||
|
class="nc-barcode-svg" |
||||||
|
@on-click-barcode="showBarcodeModal" |
||||||
|
> |
||||||
|
<template #barcodeRenderError> |
||||||
|
<div class="text-left text-wrap mt-2 text-[#e65100] text-xs" data-testid="barcode-invalid-input-message"> |
||||||
|
{{ $t('msg.warning.barcode.renderError') }} |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
</JsBarcodeWrapper> |
||||||
|
|
||||||
|
<div v-if="tooManyCharsForBarcode" class="text-left text-wrap mt-2 text-[#e65100] text-xs"> |
||||||
|
{{ $t('labels.barcodeValueTooLong') }} |
||||||
|
</div> |
||||||
|
<div v-if="showEditNonEditableFieldWarning" class="text-left text-wrap mt-2 text-[#e65100] text-xs"> |
||||||
|
{{ $t('msg.warning.nonEditableFields.computedFieldUnableToClear') }} |
||||||
|
</div> |
||||||
|
<div v-if="showClearNonEditableFieldWarning" class="text-left text-wrap mt-2 text-[#e65100] text-xs"> |
||||||
|
{{ $t('msg.warning.nonEditableFields.barcodeFieldsCannotBeDirectlyChanged') }} |
||||||
|
</div> |
||||||
|
</template> |
||||||
@ -0,0 +1,39 @@ |
|||||||
|
<script lang="ts" setup> |
||||||
|
import JsBarcode from 'jsbarcode' |
||||||
|
import { onMounted } from '#imports' |
||||||
|
|
||||||
|
const props = defineProps({ |
||||||
|
barcodeValue: { type: String, required: true }, |
||||||
|
barcodeFormat: { type: String, required: true }, |
||||||
|
}) |
||||||
|
|
||||||
|
const emit = defineEmits(['onClickBarcode']) |
||||||
|
|
||||||
|
const barcodeSvgRef = ref(null) |
||||||
|
const errorForCurrentInput = ref(false) |
||||||
|
|
||||||
|
const generate = () => { |
||||||
|
try { |
||||||
|
JsBarcode(barcodeSvgRef.value, String(props.barcodeValue), { |
||||||
|
format: props.barcodeFormat, |
||||||
|
}) |
||||||
|
errorForCurrentInput.value = false |
||||||
|
} catch (e) { |
||||||
|
console.log('e', e) |
||||||
|
errorForCurrentInput.value = true |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const onBarcodeClick = (ev: MouseEvent) => { |
||||||
|
ev.stopPropagation() |
||||||
|
emit('onClickBarcode') |
||||||
|
} |
||||||
|
|
||||||
|
watch([() => props.barcodeValue, () => props.barcodeFormat], generate) |
||||||
|
onMounted(generate) |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<svg v-show="!errorForCurrentInput" ref="barcodeSvgRef" class="w-full" data-testid="barcode" @click="onBarcodeClick"></svg> |
||||||
|
<slot v-if="errorForCurrentInput" name="barcodeRenderError" /> |
||||||
|
</template> |
||||||
@ -1,6 +1,6 @@ |
|||||||
import UITypes from '../UITypes'; |
import UITypes from '../UITypes'; |
||||||
|
|
||||||
export const AllowedColumnTypesForQrCode = [ |
export const AllowedColumnTypesForQrAndBarcodes = [ |
||||||
UITypes.Formula, |
UITypes.Formula, |
||||||
UITypes.SingleLineText, |
UITypes.SingleLineText, |
||||||
UITypes.LongText, |
UITypes.LongText, |
||||||
@ -1 +1 @@ |
|||||||
export * from './QrCodeRules'; |
export * from './QrAndBarcodeRules'; |
||||||
|
|||||||
@ -0,0 +1,26 @@ |
|||||||
|
import { MetaTable } from '../../utils/globals'; |
||||||
|
import { Knex } from 'knex'; |
||||||
|
|
||||||
|
const up = async (knex: Knex) => { |
||||||
|
await knex.schema.createTable(MetaTable.COL_BARCODE, (table) => { |
||||||
|
table.string('id', 20).primary().notNullable(); |
||||||
|
|
||||||
|
table.string('fk_column_id', 20); |
||||||
|
table.foreign('fk_column_id').references(`${MetaTable.COLUMNS}.id`); |
||||||
|
|
||||||
|
table.string('fk_barcode_value_column_id', 20); |
||||||
|
table |
||||||
|
.foreign('fk_barcode_value_column_id') |
||||||
|
.references(`${MetaTable.COLUMNS}.id`); |
||||||
|
|
||||||
|
table.string('barcode_format', 15); |
||||||
|
table.boolean('deleted'); |
||||||
|
table.timestamps(true, true); |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
const down = async (knex: Knex) => { |
||||||
|
await knex.schema.dropTable(MetaTable.COL_BARCODE); |
||||||
|
}; |
||||||
|
|
||||||
|
export { up, down }; |
||||||
@ -0,0 +1,69 @@ |
|||||||
|
import Noco from '../Noco'; |
||||||
|
import { CacheGetType, CacheScope, MetaTable } from '../utils/globals'; |
||||||
|
import NocoCache from '../cache/NocoCache'; |
||||||
|
import { extractProps } from '../meta/helpers/extractProps'; |
||||||
|
|
||||||
|
export default class BarcodeColumn { |
||||||
|
id: string; |
||||||
|
fk_column_id: string; |
||||||
|
fk_barcode_value_column_id: string; |
||||||
|
barcode_format: string; |
||||||
|
|
||||||
|
constructor(data: Partial<BarcodeColumn>) { |
||||||
|
Object.assign(this, data); |
||||||
|
} |
||||||
|
|
||||||
|
public static async insert( |
||||||
|
data: Partial<BarcodeColumn>, |
||||||
|
ncMeta = Noco.ncMeta |
||||||
|
) { |
||||||
|
await ncMeta.metaInsert2(null, null, MetaTable.COL_BARCODE, { |
||||||
|
fk_column_id: data.fk_column_id, |
||||||
|
fk_barcode_value_column_id: data.fk_barcode_value_column_id, |
||||||
|
barcode_format: data.barcode_format, |
||||||
|
}); |
||||||
|
|
||||||
|
return this.read(data.fk_column_id, ncMeta); |
||||||
|
} |
||||||
|
public static async read(columnId: string, ncMeta = Noco.ncMeta) { |
||||||
|
let column = |
||||||
|
columnId && |
||||||
|
(await NocoCache.get( |
||||||
|
`${CacheScope.COL_BARCODE}:${columnId}`, |
||||||
|
CacheGetType.TYPE_OBJECT |
||||||
|
)); |
||||||
|
if (!column) { |
||||||
|
column = await ncMeta.metaGet2( |
||||||
|
null, //,
|
||||||
|
null, //model.db_alias,
|
||||||
|
MetaTable.COL_BARCODE, |
||||||
|
{ fk_column_id: columnId } |
||||||
|
); |
||||||
|
await NocoCache.set(`${CacheScope.COL_BARCODE}:${columnId}`, column); |
||||||
|
} |
||||||
|
|
||||||
|
return column ? new BarcodeColumn(column) : null; |
||||||
|
} |
||||||
|
|
||||||
|
static async update( |
||||||
|
id: string, |
||||||
|
barcode: Partial<BarcodeColumn>, |
||||||
|
ncMeta = Noco.ncMeta |
||||||
|
) { |
||||||
|
const updateObj = extractProps(barcode, [ |
||||||
|
'fk_column_id', |
||||||
|
'fk_barcode_value_column_id', |
||||||
|
'barcode_format', |
||||||
|
]); |
||||||
|
// get existing cache
|
||||||
|
const key = `${CacheScope.COL_BARCODE}:${id}`; |
||||||
|
let o = await NocoCache.get(key, CacheGetType.TYPE_OBJECT); |
||||||
|
if (o) { |
||||||
|
o = { ...o, ...updateObj }; |
||||||
|
// set cache
|
||||||
|
await NocoCache.set(key, o); |
||||||
|
} |
||||||
|
// set meta
|
||||||
|
await ncMeta.metaUpdate(null, null, MetaTable.COL_BARCODE, updateObj, id); |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,25 @@ |
|||||||
|
import { expect } from '@playwright/test'; |
||||||
|
import BasePage from '../../Base'; |
||||||
|
import { FormPage } from '../Form'; |
||||||
|
import { GalleryPage } from '../Gallery'; |
||||||
|
import { GridPage } from '../Grid'; |
||||||
|
import { KanbanPage } from '../Kanban'; |
||||||
|
|
||||||
|
export class BarcodeOverlay extends BasePage { |
||||||
|
constructor(parent: GridPage | GalleryPage | KanbanPage | FormPage) { |
||||||
|
super(parent.rootPage); |
||||||
|
} |
||||||
|
|
||||||
|
get() { |
||||||
|
return this.rootPage.locator(`.nc-barcode-large`); |
||||||
|
} |
||||||
|
|
||||||
|
async verifyBarcodeSvgValue(expectedValue: string) { |
||||||
|
const foundBarcodeSvg = await this.get().getByTestId('barcode').innerHTML(); |
||||||
|
await expect(foundBarcodeSvg).toContain(expectedValue); |
||||||
|
} |
||||||
|
|
||||||
|
async clickCloseButton() { |
||||||
|
await this.get().locator('.ant-modal-close-x').click(); |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,174 @@ |
|||||||
|
import { expect, test } from '@playwright/test'; |
||||||
|
import { DashboardPage } from '../pages/Dashboard'; |
||||||
|
import setup from '../setup'; |
||||||
|
import { GridPage } from '../pages/Dashboard/Grid'; |
||||||
|
|
||||||
|
interface ExpectedBarcodeData { |
||||||
|
referencedValue: string; |
||||||
|
barcodeSvg: string; |
||||||
|
} |
||||||
|
|
||||||
|
test.describe('Virtual Columns', () => { |
||||||
|
let dashboard: DashboardPage; |
||||||
|
let grid: GridPage; |
||||||
|
let context: any; |
||||||
|
|
||||||
|
test.beforeEach(async ({ page }) => { |
||||||
|
context = await setup({ page }); |
||||||
|
dashboard = new DashboardPage(page, context.project); |
||||||
|
grid = dashboard.grid; |
||||||
|
}); |
||||||
|
|
||||||
|
test.describe('Barcode Column', () => { |
||||||
|
const initiallyExpectedBarcodeCellValues: ExpectedBarcodeData[] = [ |
||||||
|
{ |
||||||
|
referencedValue: 'A Corua (La Corua)', |
||||||
|
barcodeSvg: |
||||||
|
'<rect x="0" y="0" width="486" height="142" style="fill:#ffffff;"></rect><g transform="translate(10, 10)" style="fill:#000000;"><rect x="0" y="0" width="4" height="100"></rect><rect x="6" y="0" width="2" height="100"></rect><rect x="12" y="0" width="2" height="100"></rect><rect x="22" y="0" width="2" height="100"></rect><rect x="26" y="0" width="2" height="100"></rect><rect x="34" y="0" width="4" height="100"></rect><rect x="44" y="0" width="4" height="100"></rect><rect x="50" y="0" width="4" height="100"></rect><rect x="58" y="0" width="4" height="100"></rect><rect x="66" y="0" width="2" height="100"></rect><rect x="74" y="0" width="2" height="100"></rect><rect x="82" y="0" width="4" height="100"></rect><rect x="88" y="0" width="2" height="100"></rect><rect x="96" y="0" width="8" height="100"></rect><rect x="106" y="0" width="2" height="100"></rect><rect x="110" y="0" width="2" height="100"></rect><rect x="116" y="0" width="2" height="100"></rect><rect x="122" y="0" width="8" height="100"></rect><rect x="132" y="0" width="2" height="100"></rect><rect x="138" y="0" width="8" height="100"></rect><rect x="150" y="0" width="2" height="100"></rect><rect x="154" y="0" width="2" height="100"></rect><rect x="160" y="0" width="2" height="100"></rect><rect x="164" y="0" width="4" height="100"></rect><rect x="176" y="0" width="4" height="100"></rect><rect x="182" y="0" width="4" height="100"></rect><rect x="190" y="0" width="4" height="100"></rect><rect x="198" y="0" width="2" height="100"></rect><rect x="206" y="0" width="4" height="100"></rect><rect x="214" y="0" width="2" height="100"></rect><rect x="220" y="0" width="2" height="100"></rect><rect x="228" y="0" width="4" height="100"></rect><rect x="234" y="0" width="6" height="100"></rect><rect x="242" y="0" width="2" height="100"></rect><rect x="248" y="0" width="2" height="100"></rect><rect x="252" y="0" width="4" height="100"></rect><rect x="264" y="0" width="4" height="100"></rect><rect x="270" y="0" width="4" height="100"></rect><rect x="278" y="0" width="4" height="100"></rect><rect x="286" y="0" width="2" height="100"></rect><rect x="294" y="0" width="2" height="100"></rect><rect x="302" y="0" width="4" height="100"></rect><rect x="308" y="0" width="2" height="100"></rect><rect x="316" y="0" width="8" height="100"></rect><rect x="326" y="0" width="2" height="100"></rect><rect x="330" y="0" width="2" height="100"></rect><rect x="336" y="0" width="2" height="100"></rect><rect x="342" y="0" width="8" height="100"></rect><rect x="352" y="0" width="2" height="100"></rect><rect x="358" y="0" width="8" height="100"></rect><rect x="370" y="0" width="2" height="100"></rect><rect x="374" y="0" width="2" height="100"></rect><rect x="380" y="0" width="2" height="100"></rect><rect x="384" y="0" width="4" height="100"></rect><rect x="396" y="0" width="4" height="100"></rect><rect x="404" y="0" width="2" height="100"></rect><rect x="410" y="0" width="2" height="100"></rect><rect x="418" y="0" width="6" height="100"></rect><rect x="428" y="0" width="4" height="100"></rect><rect x="436" y="0" width="2" height="100"></rect><rect x="440" y="0" width="4" height="100"></rect><rect x="450" y="0" width="6" height="100"></rect><rect x="458" y="0" width="2" height="100"></rect><rect x="462" y="0" width="4" height="100"></rect><text style="font: 20px monospace" text-anchor="middle" x="233" y="122">A Corua (La Corua)</text></g>', |
||||||
|
}, |
||||||
|
{ |
||||||
|
referencedValue: 'Abha', |
||||||
|
barcodeSvg: |
||||||
|
'<rect x="0" y="0" width="178" height="142" style="fill:#ffffff;"></rect><g transform="translate(10, 10)" style="fill:#000000;"><rect x="0" y="0" width="4" height="100"></rect><rect x="6" y="0" width="2" height="100"></rect><rect x="12" y="0" width="2" height="100"></rect><rect x="22" y="0" width="2" height="100"></rect><rect x="26" y="0" width="2" height="100"></rect><rect x="34" y="0" width="4" height="100"></rect><rect x="44" y="0" width="2" height="100"></rect><rect x="50" y="0" width="2" height="100"></rect><rect x="60" y="0" width="4" height="100"></rect><rect x="66" y="0" width="2" height="100"></rect><rect x="72" y="0" width="4" height="100"></rect><rect x="84" y="0" width="2" height="100"></rect><rect x="88" y="0" width="2" height="100"></rect><rect x="94" y="0" width="2" height="100"></rect><rect x="98" y="0" width="4" height="100"></rect><rect x="110" y="0" width="6" height="100"></rect><rect x="118" y="0" width="2" height="100"></rect><rect x="124" y="0" width="4" height="100"></rect><rect x="132" y="0" width="4" height="100"></rect><rect x="142" y="0" width="6" height="100"></rect><rect x="150" y="0" width="2" height="100"></rect><rect x="154" y="0" width="4" height="100"></rect><text style="font: 20px monospace" text-anchor="middle" x="79" y="122">Abha</text></g>', |
||||||
|
}, |
||||||
|
]; |
||||||
|
|
||||||
|
const barcodeCellValuesForBerlin = { |
||||||
|
referencedValue: 'Berlin', |
||||||
|
barcodeSvg: |
||||||
|
'<rect x="0" y="0" width="222" height="142" style="fill:#ffffff;"></rect><g transform="translate(10, 10)" style="fill:#000000;"><rect x="0" y="0" width="4" height="100"></rect><rect x="6" y="0" width="2" height="100"></rect><rect x="12" y="0" width="2" height="100"></rect><rect x="22" y="0" width="2" height="100"></rect><rect x="30" y="0" width="2" height="100"></rect><rect x="34" y="0" width="4" height="100"></rect><rect x="44" y="0" width="2" height="100"></rect><rect x="48" y="0" width="4" height="100"></rect><rect x="56" y="0" width="2" height="100"></rect><rect x="66" y="0" width="2" height="100"></rect><rect x="72" y="0" width="2" height="100"></rect><rect x="78" y="0" width="8" height="100"></rect><rect x="88" y="0" width="4" height="100"></rect><rect x="96" y="0" width="2" height="100"></rect><rect x="100" y="0" width="2" height="100"></rect><rect x="110" y="0" width="2" height="100"></rect><rect x="120" y="0" width="4" height="100"></rect><rect x="126" y="0" width="2" height="100"></rect><rect x="132" y="0" width="4" height="100"></rect><rect x="144" y="0" width="2" height="100"></rect><rect x="148" y="0" width="2" height="100"></rect><rect x="154" y="0" width="4" height="100"></rect><rect x="164" y="0" width="2" height="100"></rect><rect x="170" y="0" width="2" height="100"></rect><rect x="176" y="0" width="4" height="100"></rect><rect x="186" y="0" width="6" height="100"></rect><rect x="194" y="0" width="2" height="100"></rect><rect x="198" y="0" width="4" height="100"></rect><text style="font: 20px monospace" text-anchor="middle" x="101" y="122">Berlin</text></g>', |
||||||
|
}; |
||||||
|
|
||||||
|
const barcodeCellValuesForIstanbul = { |
||||||
|
referencedValue: 'Istanbul', |
||||||
|
barcodeSvg: |
||||||
|
'<rect x="0" y="0" width="266" height="142" style="fill:#ffffff;"></rect><g transform="translate(10, 10)" style="fill:#000000;"><rect x="0" y="0" width="4" height="100"></rect><rect x="6" y="0" width="2" height="100"></rect><rect x="12" y="0" width="2" height="100"></rect><rect x="22" y="0" width="4" height="100"></rect><rect x="32" y="0" width="2" height="100"></rect><rect x="40" y="0" width="2" height="100"></rect><rect x="44" y="0" width="2" height="100"></rect><rect x="48" y="0" width="8" height="100"></rect><rect x="60" y="0" width="2" height="100"></rect><rect x="66" y="0" width="2" height="100"></rect><rect x="72" y="0" width="8" height="100"></rect><rect x="82" y="0" width="2" height="100"></rect><rect x="88" y="0" width="2" height="100"></rect><rect x="94" y="0" width="2" height="100"></rect><rect x="98" y="0" width="4" height="100"></rect><rect x="110" y="0" width="4" height="100"></rect><rect x="122" y="0" width="2" height="100"></rect><rect x="126" y="0" width="2" height="100"></rect><rect x="132" y="0" width="2" height="100"></rect><rect x="138" y="0" width="2" height="100"></rect><rect x="148" y="0" width="4" height="100"></rect><rect x="154" y="0" width="2" height="100"></rect><rect x="160" y="0" width="8" height="100"></rect><rect x="172" y="0" width="2" height="100"></rect><rect x="176" y="0" width="4" height="100"></rect><rect x="184" y="0" width="2" height="100"></rect><rect x="188" y="0" width="2" height="100"></rect><rect x="198" y="0" width="4" height="100"></rect><rect x="204" y="0" width="4" height="100"></rect><rect x="214" y="0" width="4" height="100"></rect><rect x="220" y="0" width="4" height="100"></rect><rect x="230" y="0" width="6" height="100"></rect><rect x="238" y="0" width="2" height="100"></rect><rect x="242" y="0" width="4" height="100"></rect><text style="font: 20px monospace" text-anchor="middle" x="123" y="122">Istanbul</text></g>', |
||||||
|
}; |
||||||
|
|
||||||
|
const barcodeCode39SvgForBerlin = |
||||||
|
'<rect x="0" y="0" width="276" height="142" style="fill:#ffffff;"></rect><g transform="translate(10, 10)" style="fill:#000000;"><rect x="0" y="0" width="2" height="100"></rect><rect x="8" y="0" width="2" height="100"></rect><rect x="12" y="0" width="6" height="100"></rect><rect x="20" y="0" width="6" height="100"></rect><rect x="28" y="0" width="2" height="100"></rect><rect x="32" y="0" width="2" height="100"></rect><rect x="36" y="0" width="6" height="100"></rect><rect x="44" y="0" width="2" height="100"></rect><rect x="52" y="0" width="2" height="100"></rect><rect x="56" y="0" width="6" height="100"></rect><rect x="64" y="0" width="6" height="100"></rect><rect x="72" y="0" width="2" height="100"></rect><rect x="76" y="0" width="6" height="100"></rect><rect x="88" y="0" width="2" height="100"></rect><rect x="92" y="0" width="2" height="100"></rect><rect x="96" y="0" width="6" height="100"></rect><rect x="104" y="0" width="2" height="100"></rect><rect x="108" y="0" width="2" height="100"></rect><rect x="112" y="0" width="6" height="100"></rect><rect x="124" y="0" width="2" height="100"></rect><rect x="128" y="0" width="2" height="100"></rect><rect x="132" y="0" width="6" height="100"></rect><rect x="140" y="0" width="2" height="100"></rect><rect x="144" y="0" width="2" height="100"></rect><rect x="152" y="0" width="6" height="100"></rect><rect x="160" y="0" width="2" height="100"></rect><rect x="164" y="0" width="6" height="100"></rect><rect x="172" y="0" width="2" height="100"></rect><rect x="180" y="0" width="6" height="100"></rect><rect x="188" y="0" width="2" height="100"></rect><rect x="192" y="0" width="2" height="100"></rect><rect x="196" y="0" width="2" height="100"></rect><rect x="200" y="0" width="6" height="100"></rect><rect x="208" y="0" width="2" height="100"></rect><rect x="216" y="0" width="6" height="100"></rect><rect x="224" y="0" width="2" height="100"></rect><rect x="232" y="0" width="2" height="100"></rect><rect x="236" y="0" width="6" height="100"></rect><rect x="244" y="0" width="6" height="100"></rect><rect x="252" y="0" width="2" height="100"></rect><text style="font: 20px monospace" text-anchor="middle" x="128" y="122">BERLIN</text></g>'; |
||||||
|
|
||||||
|
const expectedBarcodeCellValuesAfterCityNameChange = [ |
||||||
|
barcodeCellValuesForBerlin, |
||||||
|
...initiallyExpectedBarcodeCellValues.slice(1), |
||||||
|
]; |
||||||
|
|
||||||
|
async function barcodeColumnVerify(barcodeColumnTitle: string, expectedBarcodeCodeData: ExpectedBarcodeData[]) { |
||||||
|
for (let i = 0; i < expectedBarcodeCodeData.length; i++) { |
||||||
|
await grid.cell.verifyBarcodeCell({ |
||||||
|
index: i, |
||||||
|
columnHeader: barcodeColumnTitle, |
||||||
|
expectedSvgValue: expectedBarcodeCodeData[i].barcodeSvg, |
||||||
|
}); |
||||||
|
} |
||||||
|
} |
||||||
|
test('creation, showing, updating value and change barcode column title and reference column', async () => { |
||||||
|
// Add barcode code column referencing the City column
|
||||||
|
// and compare the base64 encoded codes/src attributes for the first 3 rows.
|
||||||
|
// Column data from City table (Sakila DB)
|
||||||
|
/** |
||||||
|
* City LastUpdate Address List Country |
||||||
|
* A Corua (La Corua) 2006-02-15 04:45:25 939 Probolinggo Loop Spain |
||||||
|
* Abha 2006-02-15 04:45:25 733 Mandaluyong Place Saudi Arabia |
||||||
|
* Abu Dhabi 2006-02-15 04:45:25 535 Ahmadnagar Manor United Arab Emirates |
||||||
|
*/ |
||||||
|
// close 'Team & Auth' tab
|
||||||
|
await dashboard.closeTab({ title: 'Team & Auth' }); |
||||||
|
|
||||||
|
await dashboard.treeView.openTable({ title: 'City' }); |
||||||
|
|
||||||
|
await grid.column.create({ |
||||||
|
title: 'Barcode1', |
||||||
|
type: 'Barcode', |
||||||
|
barcodeValueColumnTitle: 'City', |
||||||
|
}); |
||||||
|
|
||||||
|
await barcodeColumnVerify('Barcode1', initiallyExpectedBarcodeCellValues); |
||||||
|
|
||||||
|
await grid.cell.fillText({ columnHeader: 'City', index: 0, text: 'Berlin' }); |
||||||
|
|
||||||
|
await barcodeColumnVerify('Barcode1', expectedBarcodeCellValuesAfterCityNameChange); |
||||||
|
|
||||||
|
await grid.cell.get({ columnHeader: 'Barcode1', index: 0 }).click(); |
||||||
|
const barcodeGridOverlay = grid.barcodeOverlay; |
||||||
|
await barcodeGridOverlay.verifyBarcodeSvgValue(barcodeCellValuesForBerlin.barcodeSvg); |
||||||
|
await barcodeGridOverlay.clickCloseButton(); |
||||||
|
|
||||||
|
// Change the barcode column title
|
||||||
|
await grid.column.openEdit({ title: 'Barcode1' }); |
||||||
|
await grid.column.fillTitle({ title: 'Barcode1 Renamed' }); |
||||||
|
await grid.column.save({ isUpdated: true }); |
||||||
|
await barcodeColumnVerify('Barcode1 Renamed', expectedBarcodeCellValuesAfterCityNameChange); |
||||||
|
|
||||||
|
// Change the referenced column title
|
||||||
|
await grid.column.openEdit({ title: 'City' }); |
||||||
|
await grid.column.fillTitle({ title: 'City Renamed' }); |
||||||
|
await grid.column.save({ isUpdated: true }); |
||||||
|
await barcodeColumnVerify('Barcode1 Renamed', expectedBarcodeCellValuesAfterCityNameChange); |
||||||
|
|
||||||
|
// Change the referenced column
|
||||||
|
await grid.column.create({ title: 'New City Column' }); |
||||||
|
await grid.cell.fillText({ columnHeader: 'New City Column', index: 0, text: 'Istanbul' }); |
||||||
|
await grid.column.openEdit({ title: 'Barcode1 Renamed' }); |
||||||
|
await grid.column.changeReferencedColumnForBarcode({ titleOfReferencedColumn: 'New City Column' }); |
||||||
|
|
||||||
|
await barcodeColumnVerify('Barcode1 Renamed', [barcodeCellValuesForIstanbul]); |
||||||
|
|
||||||
|
await dashboard.closeTab({ title: 'City' }); |
||||||
|
}); |
||||||
|
|
||||||
|
test('deletion of the barcode column: a) directly and b) indirectly when the reference value column is deleted', async () => { |
||||||
|
await dashboard.closeTab({ title: 'Team & Auth' }); |
||||||
|
|
||||||
|
await dashboard.treeView.openTable({ title: 'City' }); |
||||||
|
|
||||||
|
await grid.column.create({ title: 'column_name_a' }); |
||||||
|
await grid.column.verify({ title: 'column_name_a' }); |
||||||
|
await grid.column.create({ |
||||||
|
title: 'Barcode2', |
||||||
|
type: 'Barcode', |
||||||
|
barcodeValueColumnTitle: 'column_name_a', |
||||||
|
}); |
||||||
|
await grid.column.verify({ title: 'Barcode2', isVisible: true }); |
||||||
|
await grid.column.delete({ title: 'Barcode2' }); |
||||||
|
await grid.column.verify({ title: 'Barcode2', isVisible: false }); |
||||||
|
|
||||||
|
await grid.column.create({ |
||||||
|
title: 'Barcode2', |
||||||
|
type: 'Barcode', |
||||||
|
barcodeValueColumnTitle: 'column_name_a', |
||||||
|
}); |
||||||
|
await grid.column.verify({ title: 'Barcode2', isVisible: true }); |
||||||
|
await grid.column.delete({ title: 'column_name_a' }); |
||||||
|
await grid.column.verify({ title: 'Barcode2', isVisible: false }); |
||||||
|
|
||||||
|
await dashboard.closeTab({ title: 'City' }); |
||||||
|
}); |
||||||
|
|
||||||
|
test('a) showing an error message for non-compatible barcode input and b) changing the format of the Barcode is reflected in the change of the actual rendered barcode', async () => { |
||||||
|
await dashboard.closeTab({ title: 'Team & Auth' }); |
||||||
|
|
||||||
|
await dashboard.treeView.openTable({ title: 'City' }); |
||||||
|
|
||||||
|
await grid.column.create({ |
||||||
|
title: 'Barcode1', |
||||||
|
type: 'Barcode', |
||||||
|
barcodeValueColumnTitle: 'City', |
||||||
|
}); |
||||||
|
|
||||||
|
await grid.column.openEdit({ |
||||||
|
title: 'Barcode1', |
||||||
|
}); |
||||||
|
await grid.column.changeBarcodeFormat({ barcodeFormatName: 'CODE39' }); |
||||||
|
|
||||||
|
await grid.cell.verifyBarcodeCellShowsInvalidInputMessage({ |
||||||
|
index: 0, |
||||||
|
columnHeader: 'Barcode1', |
||||||
|
}); |
||||||
|
|
||||||
|
await grid.cell.fillText({ columnHeader: 'City', index: 0, text: 'Berlin' }); |
||||||
|
|
||||||
|
await barcodeColumnVerify('Barcode1', [{ referencedValue: 'Berlin', barcodeSvg: barcodeCode39SvgForBerlin }]); |
||||||
|
}); |
||||||
|
}); |
||||||
|
}); |
||||||
Loading…
Reference in new issue