2020-07-10 19:51:36 +02:00
|
|
|
<template>
|
|
|
|
<BaseContextMenu
|
|
|
|
:context-event="contextEvent"
|
2020-08-12 18:11:48 +02:00
|
|
|
@close-context="closeContext"
|
2020-07-10 19:51:36 +02:00
|
|
|
>
|
2022-07-25 14:56:00 +02:00
|
|
|
<div class="context-element">
|
2022-06-21 17:54:47 +02:00
|
|
|
<span class="d-flex"><i class="mdi mdi-18px mdi-content-copy text-light pr-1" /> {{ t('word.copy') }}</span>
|
2021-06-30 19:27:24 +02:00
|
|
|
<i class="mdi mdi-18px mdi-chevron-right text-light pl-1" />
|
|
|
|
<div class="context-submenu">
|
|
|
|
<div
|
|
|
|
v-if="selectedRows.length === 1"
|
|
|
|
class="context-element"
|
|
|
|
@click="copyCell"
|
|
|
|
>
|
|
|
|
<span class="d-flex">
|
2022-06-21 17:54:47 +02:00
|
|
|
<i class="mdi mdi-18px mdi-numeric-0 mdi-rotate-90 text-light pr-1" /> {{ t('word.cell', 1) }}
|
2021-06-30 19:27:24 +02:00
|
|
|
</span>
|
|
|
|
</div>
|
2022-12-18 23:33:50 +01:00
|
|
|
<div class="context-element" @click="copyRow('html')">
|
|
|
|
<span class="d-flex">
|
|
|
|
<i class="mdi mdi-18px mdi-table-row text-light pr-1" /> {{ t('word.row', selectedRows.length) }} (Table)
|
|
|
|
</span>
|
|
|
|
</div>
|
2022-07-25 14:56:00 +02:00
|
|
|
<div class="context-element" @click="copyRow('json')">
|
2021-06-30 19:27:24 +02:00
|
|
|
<span class="d-flex">
|
2022-07-25 14:56:00 +02:00
|
|
|
<i class="mdi mdi-18px mdi-table-row text-light pr-1" /> {{ t('word.row', selectedRows.length) }} (JSON)
|
2022-07-25 12:42:22 +02:00
|
|
|
</span>
|
|
|
|
</div>
|
2022-07-29 18:53:39 +02:00
|
|
|
<div class="context-element" @click="copyRow('csv')">
|
|
|
|
<span class="d-flex">
|
|
|
|
<i class="mdi mdi-18px mdi-table-row text-light pr-1" /> {{ t('word.row', selectedRows.length) }} (CSV)
|
|
|
|
</span>
|
|
|
|
</div>
|
2022-07-25 14:56:00 +02:00
|
|
|
<div class="context-element" @click="copyRow('sql')">
|
2022-07-25 12:42:22 +02:00
|
|
|
<span class="d-flex">
|
2022-07-25 14:56:00 +02:00
|
|
|
<i class="mdi mdi-18px mdi-table-row text-light pr-1" /> {{ t('word.row', selectedRows.length) }} (SQL INSERT)
|
2021-06-30 19:27:24 +02:00
|
|
|
</span>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
2022-07-19 17:48:51 +02:00
|
|
|
<div
|
|
|
|
v-if="selectedRows.length === 1 && selectedCell.isEditable && mode === 'table'"
|
|
|
|
class="context-element"
|
|
|
|
@click="duplicateRow"
|
|
|
|
>
|
|
|
|
<span class="d-flex">
|
|
|
|
<i class="mdi mdi-18px mdi-content-duplicate text-light pr-1" /> {{ t('word.duplicate') }}
|
|
|
|
</span>
|
|
|
|
</div>
|
2022-09-29 09:17:47 +02:00
|
|
|
<div
|
2022-10-19 01:12:07 +02:00
|
|
|
v-if="selectedRows.length === 1 && selectedCell.isEditable && mode === 'table' && fakerGroup"
|
2022-09-29 09:17:47 +02:00
|
|
|
class="context-element"
|
|
|
|
>
|
|
|
|
<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" />
|
2022-10-19 01:12:07 +02:00
|
|
|
<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>
|
2022-09-29 09:17:47 +02:00
|
|
|
</div>
|
2021-02-28 21:45:38 +01:00
|
|
|
<div
|
2021-07-16 17:09:02 +02:00
|
|
|
v-if="selectedRows.length === 1 && selectedCell.isEditable"
|
2021-02-28 21:45:38 +01:00
|
|
|
class="context-element"
|
|
|
|
@click="setNull"
|
|
|
|
>
|
|
|
|
<span class="d-flex">
|
2022-06-21 17:54:47 +02:00
|
|
|
<i class="mdi mdi-18px mdi-null text-light pr-1" /> {{ t('message.setNull') }}
|
2021-02-28 21:45:38 +01:00
|
|
|
</span>
|
|
|
|
</div>
|
2021-07-16 17:09:02 +02:00
|
|
|
<div
|
|
|
|
v-if="selectedCell.isEditable"
|
|
|
|
class="context-element"
|
|
|
|
@click="showConfirmModal"
|
|
|
|
>
|
2021-02-28 21:45:38 +01:00
|
|
|
<span class="d-flex">
|
2022-06-21 17:54:47 +02:00
|
|
|
<i class="mdi mdi-18px mdi-delete text-light pr-1" /> {{ t('message.deleteRows', selectedRows.length) }}
|
2021-02-28 21:45:38 +01:00
|
|
|
</span>
|
2020-07-10 19:51:36 +02:00
|
|
|
</div>
|
|
|
|
</BaseContextMenu>
|
|
|
|
</template>
|
|
|
|
|
2022-06-21 17:54:47 +02:00
|
|
|
<script setup lang="ts">
|
2022-10-19 01:12:07 +02:00
|
|
|
import { computed, Prop } from 'vue';
|
2022-06-21 17:54:47 +02:00
|
|
|
import BaseContextMenu from '@/components/BaseContextMenu.vue';
|
|
|
|
import { useI18n } from 'vue-i18n';
|
2022-10-19 01:12:07 +02:00
|
|
|
import { TEXT, LONG_TEXT, NUMBER, FLOAT, DATE, TIME, DATETIME, UUID } from 'common/fieldTypes';
|
2020-07-10 19:51:36 +02:00
|
|
|
|
2022-06-21 17:54:47 +02:00
|
|
|
const { t } = useI18n();
|
|
|
|
|
2022-10-19 01:12:07 +02:00
|
|
|
const props = defineProps({
|
2022-06-21 17:54:47 +02:00
|
|
|
contextEvent: MouseEvent,
|
|
|
|
selectedRows: Array,
|
2022-07-19 17:48:51 +02:00
|
|
|
selectedCell: Object,
|
|
|
|
mode: String as Prop<'table' | 'query'>
|
2022-06-21 17:54:47 +02:00
|
|
|
});
|
|
|
|
|
2022-07-19 17:48:51 +02:00
|
|
|
const emit = defineEmits([
|
|
|
|
'show-delete-modal',
|
|
|
|
'close-context',
|
|
|
|
'set-null',
|
|
|
|
'copy-cell',
|
|
|
|
'copy-row',
|
2022-10-19 01:12:07 +02:00
|
|
|
'duplicate-row',
|
|
|
|
'fill-cell'
|
2022-07-19 17:48:51 +02:00
|
|
|
]);
|
2022-06-21 17:54:47 +02:00
|
|
|
|
2022-10-19 01:12:07 +02:00
|
|
|
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' },
|
2022-10-19 10:40:56 +02:00
|
|
|
{ name: 'color', group: 'internet' },
|
|
|
|
{ name: 'uuid', group: 'random' }
|
2022-10-19 01:12:07 +02:00
|
|
|
],
|
|
|
|
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;
|
|
|
|
});
|
|
|
|
|
2022-06-21 17:54:47 +02:00
|
|
|
const showConfirmModal = () => {
|
|
|
|
emit('show-delete-modal');
|
|
|
|
};
|
|
|
|
|
|
|
|
const closeContext = () => {
|
|
|
|
emit('close-context');
|
|
|
|
};
|
|
|
|
|
|
|
|
const setNull = () => {
|
|
|
|
emit('set-null');
|
|
|
|
closeContext();
|
|
|
|
};
|
|
|
|
|
|
|
|
const copyCell = () => {
|
|
|
|
emit('copy-cell');
|
|
|
|
closeContext();
|
|
|
|
};
|
|
|
|
|
2022-07-25 12:42:22 +02:00
|
|
|
const copyRow = (format: string) => {
|
|
|
|
emit('copy-row', format);
|
2022-06-21 17:54:47 +02:00
|
|
|
closeContext();
|
2020-07-10 19:51:36 +02:00
|
|
|
};
|
2022-07-19 17:48:51 +02:00
|
|
|
|
|
|
|
const duplicateRow = () => {
|
|
|
|
emit('duplicate-row');
|
|
|
|
closeContext();
|
|
|
|
};
|
2022-10-19 01:12:07 +02:00
|
|
|
|
|
|
|
const fillCell = (method: {name: string; group: string}) => {
|
|
|
|
emit('fill-cell', { ...method, type: fakerGroup.value });
|
|
|
|
closeContext();
|
|
|
|
};
|
2020-07-10 19:51:36 +02:00
|
|
|
</script>
|