feat: context menu option to fill cell with random values

This commit is contained in:
Fabio Di Stasio 2022-10-19 01:12:07 +02:00
parent a8521317a5
commit 0a2124f2c2
5 changed files with 137 additions and 9 deletions

View File

@ -29,7 +29,6 @@ export const NUMBER = [
'SMALLINT',
'MEDIUMINT',
'BIGINT',
'DECIMAL',
'NUMERIC',
'INTEGER',
'SMALLSERIAL',

View File

@ -18,6 +18,7 @@
@show-delete-modal="showDeleteConfirmModal"
@set-null="setNull"
@copy-cell="copyCell"
@fill-cell="fillCell"
@copy-row="copyRow"
@duplicate-row="duplicateRow"
@close-context="closeContext"
@ -122,7 +123,7 @@ import { useSettingsStore } from '@/stores/settings';
import { useWorkspacesStore } from '@/stores/workspaces';
import { useConsoleStore } from '@/stores/console';
import { exportRows } from '../libs/exportRows';
import { TEXT, LONG_TEXT, BLOB } from 'common/fieldTypes';
import { TEXT, LONG_TEXT, BLOB, DATE, DATETIME, TIME } from 'common/fieldTypes';
import BaseVirtualScroll from '@/components/BaseVirtualScroll.vue';
import WorkspaceTabQueryTableRow from '@/components/WorkspaceTabQueryTableRow.vue';
import TableContext from '@/components/WorkspaceTabQueryTableContext.vue';
@ -133,6 +134,7 @@ import { TableField, QueryResult } from 'common/interfaces/antares';
import { TableUpdateParams } from 'common/interfaces/tableApis';
import { jsonToSqlInsert } from 'common/libs/sqlUtils';
import { unproxify } from '@/libs/unproxify';
import faker from '@faker-js/faker';
const { t } = useI18n();
@ -463,6 +465,51 @@ const copyRow = (format: string) => {
}
};
const fillCell = (event: { name: string; group: string; type: string }) => {
const row = localResults.value.find((row: any) => selectedRows.value.includes(row._antares_id));
let fakeValue;
let datePrecision = '';
for (let i = 0; i < selectedCell.value.length; i++)
datePrecision += i === 0 ? '.S' : 'S';
if (event.group === 'custom') {
if (event.type === 'time' && event.name === 'now')
fakeValue = moment().format(`HH:mm:ss${datePrecision}`);
else if (event.type === 'time' && event.name === 'random')
fakeValue = moment(faker.date.recent()).format(`HH:mm:ss${datePrecision}`);
else if (event.type === 'datetime' && event.name === 'now')
fakeValue = moment().format(`YYYY-MM-DD HH:mm:ss${datePrecision}`);
}
else {
fakeValue = (faker as any)[event.group][event.name]();
if (['string', 'number'].includes(typeof fakeValue)) {
if (typeof fakeValue === 'number')
fakeValue = String(fakeValue);
if (selectedCell.value.length)
fakeValue = fakeValue.substring(0, selectedCell.value.length);
}
else if ([...DATE, ...DATETIME].includes(selectedCell.value.type))
fakeValue = moment(fakeValue).format(`YYYY-MM-DD HH:mm:ss${datePrecision}`);
else if (TIME.includes(selectedCell.value.type))
fakeValue = moment(fakeValue).format(`HH:mm:ss${datePrecision}`);
}
const params = {
primary: primaryField.value?.name,
schema: getSchema(resultsetIndex.value),
table: getTable(resultsetIndex.value),
id: getPrimaryValue(row),
row,
orgRow: row,
field: selectedCell.value.field,
content: fakeValue
};
emit('update-field', params);
};
const duplicateRow = () => {
const row = localResults.value.find((row: any) => selectedRows.value.includes(row._antares_id));
const rowToDuplicate = JSON.parse(JSON.stringify(row));

View File

@ -43,14 +43,25 @@
</span>
</div>
<div
v-if="selectedRows.length === 1 && selectedCell.isEditable && mode === 'table'"
v-if="selectedRows.length === 1 && selectedCell.isEditable && mode === 'table' && fakerGroup"
class="context-element"
@click="duplicateRow"
>
<span class="d-flex">
<i class="mdi mdi-18px mdi-auto-fix text-light pr-1" /> {{ t('message.fillCell') }}
</span>
<i class="mdi mdi-18px mdi-chevron-right text-light pl-1" />
<div class="context-submenu">
<div
v-for="method in fakerMethods[fakerGroup]"
:key="method.name"
class="context-element"
@click="fillCell(method)"
>
<span class="d-flex">
{{ t(`faker.${method.name}`) }}
</span>
</div>
</div>
</div>
<div
v-if="selectedRows.length === 1 && selectedCell.isEditable"
@ -74,13 +85,14 @@
</template>
<script setup lang="ts">
import { Prop } from 'vue';
import { computed, Prop } from 'vue';
import BaseContextMenu from '@/components/BaseContextMenu.vue';
import { useI18n } from 'vue-i18n';
import { TEXT, LONG_TEXT, NUMBER, FLOAT, DATE, TIME, DATETIME, UUID } from 'common/fieldTypes';
const { t } = useI18n();
defineProps({
const props = defineProps({
contextEvent: MouseEvent,
selectedRows: Array,
selectedCell: Object,
@ -93,9 +105,61 @@ const emit = defineEmits([
'set-null',
'copy-cell',
'copy-row',
'duplicate-row'
'duplicate-row',
'fill-cell'
]);
const fakerMethods = {
string: [
{ name: 'word', group: 'lorem' },
{ name: 'text', group: 'lorem' },
{ name: 'firstName', group: 'name' },
{ name: 'lastName', group: 'name' },
{ name: 'jobTitle', group: 'name' },
{ name: 'phoneNumber', group: 'phone' },
{ name: 'exampleEmail', group: 'internet' },
{ name: 'ip', group: 'internet' },
{ name: 'domainName', group: 'internet' },
{ name: 'color', group: 'internet' }
],
number: [
{ name: 'number', group: 'random' }
],
float: [
{ name: 'float', group: 'random' },
{ name: 'amount', group: 'finance' }
],
datetime: [
{ name: 'now', group: 'custom' },
{ name: 'past', group: 'date' },
{ name: 'future', group: 'date' }
],
time: [
{ name: 'now', group: 'custom' },
{ name: 'random', group: 'custom' }
],
uuid: [
{ name: 'uuid', group: 'random' }
]
};
const fakerGroup = computed(() => {
if ([...TEXT, ...LONG_TEXT].includes(props.selectedCell.type))
return 'string';
else if (NUMBER.includes(props.selectedCell.type))
return 'number';
else if (FLOAT.includes(props.selectedCell.type))
return 'float';
else if ([...DATE, ...DATETIME].includes(props.selectedCell.type))
return 'datetime';
else if (TIME.includes(props.selectedCell.type))
return 'time';
else if (UUID.includes(props.selectedCell.type))
return 'uuid';
else
return false;
});
const showConfirmModal = () => {
emit('show-delete-modal');
};
@ -123,4 +187,9 @@ const duplicateRow = () => {
emit('duplicate-row');
closeContext();
};
const fillCell = (method: {name: string; group: string}) => {
emit('fill-cell', { ...method, type: fakerGroup.value });
closeContext();
};
</script>

View File

@ -11,7 +11,12 @@
:class="{selected: selectedCell === cKey}"
@click="selectRow($event, cKey)"
@contextmenu.prevent="openContext($event, { id: row._antares_id, orgField: cKey })"
@contextmenu.prevent="openContext($event, {
id: row._antares_id,
orgField: cKey,
type: fields[cKey].type,
length: fields[cKey].charLength || fields[cKey].length
})"
>
<template v-if="cKey !== '_antares_id'">
<span
@ -530,7 +535,14 @@ const getKeyUsage = (keyName: string) => {
return props.keyUsage.find(key => key.field === keyName);
};
const openContext = (event: MouseEvent, payload: { id: string; field?: string; orgField: string; isEditable?: boolean }) => {
const openContext = (event: MouseEvent, payload: {
id: string;
field?: string;
orgField: string;
isEditable?: boolean;
type: string;
length: number | false;
}) => {
payload.field = props.fields[payload.orgField].name;// Ensures field name only
payload.isEditable = isEditable.value;
emit('contextmenu', event, payload);

View File

@ -389,6 +389,7 @@ export const enUS = {
collation: 'Collation',
engine: 'Engine',
past: 'Past',
now: 'Now',
future: 'Future',
between: 'Between',
recent: 'Recent',