mirror of https://github.com/nocodb/nocodb
github-actions[bot]
2 years ago
committed by
GitHub
310 changed files with 18475 additions and 2731 deletions
@ -0,0 +1,52 @@ |
|||||||
|
version: '3' |
||||||
|
|
||||||
|
x-uffizzi: |
||||||
|
ingress: |
||||||
|
service: nocodb |
||||||
|
port: 8080 |
||||||
|
|
||||||
|
services: |
||||||
|
postgres: |
||||||
|
image: postgres |
||||||
|
environment: |
||||||
|
POSTGRES_PASSWORD: password |
||||||
|
POSTGRES_USER: postgres |
||||||
|
POSTGRES_DB: root_db |
||||||
|
deploy: |
||||||
|
resources: |
||||||
|
limits: |
||||||
|
memory: 500M |
||||||
|
mssql: |
||||||
|
image: "mcr.microsoft.com/mssql/server:2017-latest" |
||||||
|
environment: |
||||||
|
ACCEPT_EULA: "Y" |
||||||
|
SA_PASSWORD: Password123. |
||||||
|
deploy: |
||||||
|
resources: |
||||||
|
limits: |
||||||
|
memory: 1000M |
||||||
|
mysql: |
||||||
|
environment: |
||||||
|
MYSQL_DATABASE: root_db |
||||||
|
MYSQL_PASSWORD: password |
||||||
|
MYSQL_ROOT_PASSWORD: password |
||||||
|
MYSQL_USER: noco |
||||||
|
image: "mysql:5.7" |
||||||
|
deploy: |
||||||
|
resources: |
||||||
|
limits: |
||||||
|
memory: 500M |
||||||
|
nocodb: |
||||||
|
image: "${NOCODB_IMAGE}" |
||||||
|
ports: |
||||||
|
- "8080:8080" |
||||||
|
entrypoint: /bin/sh |
||||||
|
command: ["-c", "apk add wait4ports && wait4ports tcp://localhost:5432 && /usr/src/appEntry/start.sh"] |
||||||
|
environment: |
||||||
|
NC_DB: "pg://localhost:5432?u=postgres&p=password&d=root_db" |
||||||
|
NC_ADMIN_EMAIL: admin@nocodb.com |
||||||
|
NC_ADMIN_PASSWORD: password |
||||||
|
deploy: |
||||||
|
resources: |
||||||
|
limits: |
||||||
|
memory: 500M |
||||||
@ -0,0 +1,89 @@ |
|||||||
|
name: Deploy Uffizzi Preview |
||||||
|
|
||||||
|
on: |
||||||
|
workflow_run: |
||||||
|
workflows: |
||||||
|
- "PR Release" |
||||||
|
types: |
||||||
|
- completed |
||||||
|
|
||||||
|
jobs: |
||||||
|
cache-compose-file: |
||||||
|
name: Cache Compose File |
||||||
|
runs-on: ubuntu-latest |
||||||
|
if: ${{ github.event.workflow_run.conclusion == 'success' }} |
||||||
|
outputs: |
||||||
|
compose-file-cache-key: ${{ env.COMPOSE_FILE_HASH }} |
||||||
|
pr-number: ${{ env.PR_NUMBER }} |
||||||
|
steps: |
||||||
|
- name: 'Download artifacts' |
||||||
|
# Fetch output (zip archive) from the workflow run that triggered this workflow. |
||||||
|
uses: actions/github-script@v6 |
||||||
|
with: |
||||||
|
script: | |
||||||
|
let allArtifacts = await github.rest.actions.listWorkflowRunArtifacts({ |
||||||
|
owner: context.repo.owner, |
||||||
|
repo: context.repo.repo, |
||||||
|
run_id: context.payload.workflow_run.id, |
||||||
|
}); |
||||||
|
let matchArtifact = allArtifacts.data.artifacts.filter((artifact) => { |
||||||
|
return artifact.name == "preview-spec" |
||||||
|
})[0]; |
||||||
|
let download = await github.rest.actions.downloadArtifact({ |
||||||
|
owner: context.repo.owner, |
||||||
|
repo: context.repo.repo, |
||||||
|
artifact_id: matchArtifact.id, |
||||||
|
archive_format: 'zip', |
||||||
|
}); |
||||||
|
let fs = require('fs'); |
||||||
|
fs.writeFileSync(`${process.env.GITHUB_WORKSPACE}/preview-spec.zip`, Buffer.from(download.data)); |
||||||
|
|
||||||
|
- name: 'Unzip artifact' |
||||||
|
run: unzip preview-spec.zip |
||||||
|
|
||||||
|
- name: Read Event into ENV |
||||||
|
run: | |
||||||
|
echo 'EVENT_JSON<<EOF' >> $GITHUB_ENV |
||||||
|
cat event.json >> $GITHUB_ENV |
||||||
|
echo 'EOF' >> $GITHUB_ENV |
||||||
|
|
||||||
|
- name: Hash Rendered Compose File |
||||||
|
id: hash |
||||||
|
# If the previous workflow was triggered by a PR close event, we will not have a compose file artifact. |
||||||
|
if: ${{ fromJSON(env.EVENT_JSON).action != 'closed' }} |
||||||
|
run: echo "COMPOSE_FILE_HASH=$(md5sum docker-compose.rendered.yml | awk '{ print $1 }')" >> $GITHUB_ENV |
||||||
|
|
||||||
|
- name: Cache Rendered Compose File |
||||||
|
if: ${{ fromJSON(env.EVENT_JSON).action != 'closed' }} |
||||||
|
uses: actions/cache@v3 |
||||||
|
with: |
||||||
|
path: docker-compose.rendered.yml |
||||||
|
key: ${{ env.COMPOSE_FILE_HASH }} |
||||||
|
|
||||||
|
- name: Read PR Number From Event Object |
||||||
|
id: pr |
||||||
|
run: echo "PR_NUMBER=${{ fromJSON(env.EVENT_JSON).number }}" >> $GITHUB_ENV |
||||||
|
|
||||||
|
- name: DEBUG - Print Job Outputs |
||||||
|
if: ${{ runner.debug }} |
||||||
|
run: | |
||||||
|
echo "PR number: ${{ env.PR_NUMBER }}" |
||||||
|
echo "Compose file hash: ${{ env.COMPOSE_FILE_HASH }}" |
||||||
|
cat event.json |
||||||
|
|
||||||
|
deploy-uffizzi-preview: |
||||||
|
name: Use Remote Workflow to Preview on Uffizzi |
||||||
|
needs: |
||||||
|
- cache-compose-file |
||||||
|
uses: UffizziCloud/preview-action/.github/workflows/reusable.yaml@v2 |
||||||
|
with: |
||||||
|
# If this workflow was triggered by a PR close event, cache-key will be an empty string |
||||||
|
# and this reusable workflow will delete the preview deployment. |
||||||
|
compose-file-cache-key: ${{ needs.cache-compose-file.outputs.compose-file-cache-key }} |
||||||
|
compose-file-cache-path: docker-compose.rendered.yml |
||||||
|
server: https://app.uffizzi.com |
||||||
|
pr-number: ${{ needs.cache-compose-file.outputs.pr-number }} |
||||||
|
permissions: |
||||||
|
contents: read |
||||||
|
pull-requests: write |
||||||
|
id-token: write |
||||||
@ -0,0 +1,430 @@ |
|||||||
|
<script setup lang="ts"> |
||||||
|
import Draggable from 'vuedraggable' |
||||||
|
import type { BaseType } from 'nocodb-sdk' |
||||||
|
import CreateBase from './data-sources/CreateBase.vue' |
||||||
|
import EditBase from './data-sources/EditBase.vue' |
||||||
|
import Metadata from './Metadata.vue' |
||||||
|
import UIAcl from './UIAcl.vue' |
||||||
|
import Erd from './Erd.vue' |
||||||
|
import { ClientType, DataSourcesSubTab } from '~/lib' |
||||||
|
import { useNuxtApp, useProject } from '#imports' |
||||||
|
|
||||||
|
interface Props { |
||||||
|
state: string |
||||||
|
reload: boolean |
||||||
|
} |
||||||
|
|
||||||
|
const props = defineProps<Props>() |
||||||
|
|
||||||
|
const emits = defineEmits(['update:state', 'update:reload', 'awaken']) |
||||||
|
|
||||||
|
const vState = useVModel(props, 'state', emits) |
||||||
|
const vReload = useVModel(props, 'reload', emits) |
||||||
|
|
||||||
|
const { $api, $e } = useNuxtApp() |
||||||
|
const { project, loadProject } = useProject() |
||||||
|
|
||||||
|
let sources = $ref<BaseType[]>([]) |
||||||
|
let activeBaseId = $ref('') |
||||||
|
let metadiffbases = $ref<string[]>([]) |
||||||
|
let clientType = $ref<ClientType>(ClientType.MYSQL) |
||||||
|
let isReloading = $ref(false) |
||||||
|
let forceAwakened = $ref(false) |
||||||
|
|
||||||
|
async function loadBases() { |
||||||
|
try { |
||||||
|
if (!project.value?.id) return |
||||||
|
|
||||||
|
isReloading = true |
||||||
|
vReload.value = true |
||||||
|
const baseList = await $api.base.list(project.value?.id) |
||||||
|
if (baseList.bases.list && baseList.bases.list.length) { |
||||||
|
sources = baseList.bases.list |
||||||
|
} |
||||||
|
} catch (e) { |
||||||
|
console.error(e) |
||||||
|
} finally { |
||||||
|
vReload.value = false |
||||||
|
isReloading = false |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
async function loadMetaDiff() { |
||||||
|
try { |
||||||
|
if (!project.value?.id) return |
||||||
|
|
||||||
|
metadiffbases = [] |
||||||
|
|
||||||
|
const metadiff = await $api.project.metaDiffGet(project.value?.id) |
||||||
|
for (const model of metadiff) { |
||||||
|
if (model.detectedChanges?.length > 0) { |
||||||
|
metadiffbases.push(model.base_id) |
||||||
|
} |
||||||
|
} |
||||||
|
} catch (e) { |
||||||
|
console.error(e) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const baseAction = (baseId?: string, action?: string) => { |
||||||
|
if (!baseId) return |
||||||
|
activeBaseId = baseId |
||||||
|
vState.value = action || '' |
||||||
|
} |
||||||
|
|
||||||
|
const deleteBase = (base: BaseType) => { |
||||||
|
$e('c:base:delete') |
||||||
|
|
||||||
|
Modal.confirm({ |
||||||
|
title: `Do you want to delete '${base.alias}' project?`, |
||||||
|
wrapClassName: 'nc-modal-base-delete', |
||||||
|
okText: 'Yes', |
||||||
|
okType: 'danger', |
||||||
|
cancelText: 'No', |
||||||
|
async onOk() { |
||||||
|
try { |
||||||
|
await $api.base.delete(base.project_id as string, base.id as string) |
||||||
|
|
||||||
|
$e('a:base:delete') |
||||||
|
|
||||||
|
sources.splice(sources.indexOf(base), 1) |
||||||
|
await loadProject() |
||||||
|
} catch (e: any) { |
||||||
|
message.error(await extractSdkResponseErrorMsg(e)) |
||||||
|
} |
||||||
|
}, |
||||||
|
style: 'top: 30%!important', |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
const toggleBase = async (base: BaseType, state: boolean) => { |
||||||
|
try { |
||||||
|
if (!state && sources.filter((src) => src.enabled).length < 2) { |
||||||
|
message.info('There should be at least one enabled base!') |
||||||
|
return |
||||||
|
} |
||||||
|
base.enabled = state |
||||||
|
await $api.base.update(base.project_id as string, base.id as string, { |
||||||
|
id: base.id, |
||||||
|
project_id: base.project_id, |
||||||
|
enabled: base.enabled, |
||||||
|
}) |
||||||
|
await loadProject() |
||||||
|
} catch (e: any) { |
||||||
|
message.error(await extractSdkResponseErrorMsg(e)) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const moveBase = async (e: any) => { |
||||||
|
try { |
||||||
|
if (e.oldIndex === e.newIndex) return |
||||||
|
// sources list is mutated so we have to get the new index and mirror it to backend |
||||||
|
const base = sources[e.newIndex] |
||||||
|
if (base) { |
||||||
|
if (!base.order) { |
||||||
|
// empty update call to reorder bases (migration) |
||||||
|
await $api.base.update(base.project_id as string, base.id as string, { |
||||||
|
id: base.id, |
||||||
|
project_id: base.project_id, |
||||||
|
}) |
||||||
|
message.info('Bases are migrated. Please try again.') |
||||||
|
} else { |
||||||
|
await $api.base.update(base.project_id as string, base.id as string, { |
||||||
|
id: base.id, |
||||||
|
project_id: base.project_id, |
||||||
|
order: e.newIndex + 1, |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
await loadProject() |
||||||
|
await loadBases() |
||||||
|
} catch (e: any) { |
||||||
|
message.error(await extractSdkResponseErrorMsg(e)) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const forceAwaken = () => { |
||||||
|
forceAwakened = !forceAwakened |
||||||
|
emits('awaken', forceAwakened) |
||||||
|
} |
||||||
|
|
||||||
|
onMounted(async () => { |
||||||
|
if (sources.length === 0) { |
||||||
|
await loadBases() |
||||||
|
await loadMetaDiff() |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
watch( |
||||||
|
() => props.reload, |
||||||
|
async (reload) => { |
||||||
|
if (reload && !isReloading) { |
||||||
|
await loadBases() |
||||||
|
await loadMetaDiff() |
||||||
|
} |
||||||
|
}, |
||||||
|
) |
||||||
|
|
||||||
|
watch( |
||||||
|
() => sources.length, |
||||||
|
(l) => { |
||||||
|
if (l > 1 && !forceAwakened) { |
||||||
|
emits('awaken', false) |
||||||
|
} else { |
||||||
|
emits('awaken', true) |
||||||
|
} |
||||||
|
}, |
||||||
|
{ immediate: true }, |
||||||
|
) |
||||||
|
|
||||||
|
watch( |
||||||
|
vState, |
||||||
|
async (newState) => { |
||||||
|
if (!sources.length) { |
||||||
|
await loadBases() |
||||||
|
} |
||||||
|
switch (newState) { |
||||||
|
case ClientType.MYSQL: |
||||||
|
clientType = ClientType.MYSQL |
||||||
|
vState.value = DataSourcesSubTab.New |
||||||
|
break |
||||||
|
case ClientType.PG: |
||||||
|
clientType = ClientType.PG |
||||||
|
vState.value = DataSourcesSubTab.New |
||||||
|
break |
||||||
|
case ClientType.SQLITE: |
||||||
|
clientType = ClientType.SQLITE |
||||||
|
vState.value = DataSourcesSubTab.New |
||||||
|
break |
||||||
|
case ClientType.MSSQL: |
||||||
|
clientType = ClientType.MSSQL |
||||||
|
vState.value = DataSourcesSubTab.New |
||||||
|
break |
||||||
|
case ClientType.SNOWFLAKE: |
||||||
|
clientType = ClientType.SNOWFLAKE |
||||||
|
vState.value = DataSourcesSubTab.New |
||||||
|
break |
||||||
|
case DataSourcesSubTab.New: |
||||||
|
if (sources.length > 1 && !forceAwakened) { |
||||||
|
vState.value = '' |
||||||
|
} |
||||||
|
break |
||||||
|
} |
||||||
|
}, |
||||||
|
{ immediate: true }, |
||||||
|
) |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<div class="flex flex-row w-full h-full"> |
||||||
|
<div class="flex flex-col w-full overflow-auto"> |
||||||
|
<div v-if="vState === ''" class="max-h-600px min-w-1200px overflow-y-auto"> |
||||||
|
<div class="ds-table-head"> |
||||||
|
<div class="ds-table-row"> |
||||||
|
<div class="ds-table-col ds-table-name">Name</div> |
||||||
|
<div class="ds-table-col ds-table-actions">Actions</div> |
||||||
|
<div class="ds-table-col ds-table-enabled cursor-pointer" @dblclick="forceAwaken">Show / Hide</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="ds-table-body"> |
||||||
|
<Draggable :list="sources" item-key="id" handle=".ds-table-handle" @end="moveBase"> |
||||||
|
<template #header> |
||||||
|
<div v-if="sources[0]" class="ds-table-row border-gray-200"> |
||||||
|
<div class="ds-table-col ds-table-name"> |
||||||
|
<div class="flex items-center gap-1"> |
||||||
|
<GeneralBaseLogo :base-type="sources[0].type" /> |
||||||
|
BASE |
||||||
|
<span class="text-gray-400 text-xs">({{ sources[0].type }})</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="ds-table-col ds-table-actions"> |
||||||
|
<div class="flex items-center gap-2"> |
||||||
|
<a-button |
||||||
|
class="nc-action-btn cursor-pointer outline-0" |
||||||
|
@click="baseAction(sources[0].id, DataSourcesSubTab.Metadata)" |
||||||
|
> |
||||||
|
<div class="flex items-center gap-2 text-gray-600 font-light"> |
||||||
|
<a-tooltip v-if="metadiffbases.includes(sources[0].id as string)"> |
||||||
|
<template #title>Out of sync</template> |
||||||
|
<MdiDatabaseAlert class="text-lg group-hover:text-accent text-primary" /> |
||||||
|
</a-tooltip> |
||||||
|
<MdiDatabaseSync v-else class="text-lg group-hover:text-accent" /> |
||||||
|
Sync Metadata |
||||||
|
</div> |
||||||
|
</a-button> |
||||||
|
<a-button |
||||||
|
class="nc-action-btn cursor-pointer outline-0" |
||||||
|
@click="baseAction(sources[0].id, DataSourcesSubTab.UIAcl)" |
||||||
|
> |
||||||
|
<div class="flex items-center gap-2 text-gray-600 font-light"> |
||||||
|
<MdiDatabaseLockOutline class="text-lg group-hover:text-accent" /> |
||||||
|
UI ACL |
||||||
|
</div> |
||||||
|
</a-button> |
||||||
|
<a-button |
||||||
|
class="nc-action-btn cursor-pointer outline-0" |
||||||
|
@click="baseAction(sources[0].id, DataSourcesSubTab.ERD)" |
||||||
|
> |
||||||
|
<div class="flex items-center gap-2 text-gray-600 font-light"> |
||||||
|
<MdiGraphOutline class="text-lg group-hover:text-accent" /> |
||||||
|
ERD |
||||||
|
</div> |
||||||
|
</a-button> |
||||||
|
<a-button |
||||||
|
v-if="!sources[0].is_meta" |
||||||
|
class="nc-action-btn cursor-pointer outline-0" |
||||||
|
@click="baseAction(sources[0].id, DataSourcesSubTab.Edit)" |
||||||
|
> |
||||||
|
<div class="flex items-center gap-2 text-gray-600 font-light"> |
||||||
|
<MdiEditOutline class="text-lg group-hover:text-accent" /> |
||||||
|
Edit |
||||||
|
</div> |
||||||
|
</a-button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="ds-table-col ds-table-enabled"> |
||||||
|
<div class="flex items-center gap-1 cursor-pointer"> |
||||||
|
<a-tooltip> |
||||||
|
<template #title> |
||||||
|
<template v-if="sources[0].enabled">Hide in UI</template> |
||||||
|
<template v-else>Show in UI</template> |
||||||
|
</template> |
||||||
|
<a-switch :checked="sources[0].enabled ? true : false" @change="toggleBase(sources[0], $event)" /> |
||||||
|
</a-tooltip> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<template #item="{ element: base, index }"> |
||||||
|
<div v-if="index !== 0" class="ds-table-row border-gray-200"> |
||||||
|
<div class="ds-table-col ds-table-name"> |
||||||
|
<MdiDragVertical v-if="sources.length > 2" small class="ds-table-handle" /> |
||||||
|
<div class="flex items-center gap-1"> |
||||||
|
<GeneralBaseLogo :base-type="base.type" /> |
||||||
|
{{ base.is_meta ? 'BASE' : base.alias }} <span class="text-gray-400 text-xs">({{ base.type }})</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="ds-table-col ds-table-actions"> |
||||||
|
<div class="flex items-center gap-2"> |
||||||
|
<a-button |
||||||
|
class="nc-action-btn cursor-pointer outline-0" |
||||||
|
@click="baseAction(base.id, DataSourcesSubTab.Metadata)" |
||||||
|
> |
||||||
|
<div class="flex items-center gap-2 text-gray-600 font-light"> |
||||||
|
<a-tooltip v-if="metadiffbases.includes(base.id as string)"> |
||||||
|
<template #title>Out of sync</template> |
||||||
|
<MdiDatabaseAlert class="text-lg group-hover:text-accent text-primary" /> |
||||||
|
</a-tooltip> |
||||||
|
<MdiDatabaseSync v-else class="text-lg group-hover:text-accent" /> |
||||||
|
Sync Metadata |
||||||
|
</div> |
||||||
|
</a-button> |
||||||
|
<a-button |
||||||
|
class="nc-action-btn cursor-pointer outline-0" |
||||||
|
@click="baseAction(base.id, DataSourcesSubTab.UIAcl)" |
||||||
|
> |
||||||
|
<div class="flex items-center gap-2 text-gray-600 font-light"> |
||||||
|
<MdiDatabaseLockOutline class="text-lg group-hover:text-accent" /> |
||||||
|
UI ACL |
||||||
|
</div> |
||||||
|
</a-button> |
||||||
|
<a-button class="nc-action-btn cursor-pointer outline-0" @click="baseAction(base.id, DataSourcesSubTab.ERD)"> |
||||||
|
<div class="flex items-center gap-2 text-gray-600 font-light"> |
||||||
|
<MdiGraphOutline class="text-lg group-hover:text-accent" /> |
||||||
|
ERD |
||||||
|
</div> |
||||||
|
</a-button> |
||||||
|
<a-button |
||||||
|
v-if="!base.is_meta" |
||||||
|
class="nc-action-btn cursor-pointer outline-0" |
||||||
|
@click="baseAction(base.id, DataSourcesSubTab.Edit)" |
||||||
|
> |
||||||
|
<div class="flex items-center gap-2 text-gray-600 font-light"> |
||||||
|
<MdiEditOutline class="text-lg group-hover:text-accent" /> |
||||||
|
Edit |
||||||
|
</div> |
||||||
|
</a-button> |
||||||
|
<a-button v-if="!base.is_meta" class="nc-action-btn cursor-pointer outline-0" @click="deleteBase(base)"> |
||||||
|
<div class="flex items-center gap-2 text-red-500 font-light"> |
||||||
|
<MdiDeleteOutline class="text-lg group-hover:text-accent" /> |
||||||
|
Delete |
||||||
|
</div> |
||||||
|
</a-button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="ds-table-col ds-table-enabled"> |
||||||
|
<div class="flex items-center gap-1 cursor-pointer"> |
||||||
|
<a-tooltip> |
||||||
|
<template #title> |
||||||
|
<template v-if="base.enabled">Hide in UI</template> |
||||||
|
<template v-else>Show in UI</template> |
||||||
|
</template> |
||||||
|
<a-switch :checked="base.enabled ? true : false" @change="toggleBase(base, $event)" /> |
||||||
|
</a-tooltip> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
</Draggable> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div v-else-if="vState === DataSourcesSubTab.New" class="max-h-600px overflow-y-auto"> |
||||||
|
<CreateBase :connection-type="clientType" @base-created="loadBases" /> |
||||||
|
</div> |
||||||
|
<div v-else-if="vState === DataSourcesSubTab.Metadata" class="max-h-600px overflow-y-auto"> |
||||||
|
<Metadata :base-id="activeBaseId" @base-synced="loadBases" /> |
||||||
|
</div> |
||||||
|
<div v-else-if="vState === DataSourcesSubTab.UIAcl" class="max-h-600px overflow-y-auto"> |
||||||
|
<UIAcl :base-id="activeBaseId" /> |
||||||
|
</div> |
||||||
|
<div v-else-if="vState === DataSourcesSubTab.ERD" class="max-h-600px overflow-y-auto"> |
||||||
|
<Erd :base-id="activeBaseId" /> |
||||||
|
</div> |
||||||
|
<div v-else-if="vState === DataSourcesSubTab.Edit" class="max-h-600px overflow-y-auto"> |
||||||
|
<EditBase :base-id="activeBaseId" @base-updated="loadBases" /> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<style> |
||||||
|
.ds-table-head { |
||||||
|
@apply flex items-center border-t bg-gray-100 font-bold text-gray-500; |
||||||
|
} |
||||||
|
|
||||||
|
.ds-table-body { |
||||||
|
@apply flex flex-col; |
||||||
|
} |
||||||
|
|
||||||
|
.ds-table-row { |
||||||
|
@apply grid grid-cols-20 border-b w-full h-full border-l border-r; |
||||||
|
} |
||||||
|
|
||||||
|
.ds-table-col { |
||||||
|
@apply flex items-center p-3 border-r-1 mr-2 h-50px; |
||||||
|
} |
||||||
|
|
||||||
|
.ds-table-enabled { |
||||||
|
@apply col-span-2 flex justify-center; |
||||||
|
} |
||||||
|
|
||||||
|
.ds-table-name { |
||||||
|
@apply col-span-8; |
||||||
|
} |
||||||
|
|
||||||
|
.ds-table-actions { |
||||||
|
@apply col-span-10; |
||||||
|
} |
||||||
|
|
||||||
|
.ds-table-col:last-child { |
||||||
|
@apply border-r-0; |
||||||
|
} |
||||||
|
|
||||||
|
.ds-table-handle { |
||||||
|
@apply cursor-pointer justify-self-start mr-2; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -1,5 +1,11 @@ |
|||||||
|
<script setup lang="ts"> |
||||||
|
const props = defineProps<{ |
||||||
|
baseId: string |
||||||
|
}>() |
||||||
|
</script> |
||||||
|
|
||||||
<template> |
<template> |
||||||
<div class="w-full h-full !p-0 h-70vh"> |
<div class="w-full h-full !p-0 h-70vh"> |
||||||
<ErdView /> |
<ErdView :base-id="props.baseId" /> |
||||||
</div> |
</div> |
||||||
</template> |
</template> |
||||||
|
|||||||
@ -0,0 +1,676 @@ |
|||||||
|
<script lang="ts" setup> |
||||||
|
import { Form, Modal, message } from 'ant-design-vue' |
||||||
|
import type { SelectHandler } from 'ant-design-vue/es/vc-select/Select' |
||||||
|
import type { ProjectCreateForm } from '#imports' |
||||||
|
import { |
||||||
|
CertTypes, |
||||||
|
ClientType, |
||||||
|
DefaultConnection, |
||||||
|
SQLiteConnection, |
||||||
|
SSLUsage, |
||||||
|
clientTypes as _clientTypes, |
||||||
|
computed, |
||||||
|
extractSdkResponseErrorMsg, |
||||||
|
fieldRequiredValidator, |
||||||
|
generateUniqueName, |
||||||
|
getDefaultConnectionConfig, |
||||||
|
getTestDatabaseName, |
||||||
|
nextTick, |
||||||
|
onMounted, |
||||||
|
projectTitleValidator, |
||||||
|
readFile, |
||||||
|
ref, |
||||||
|
useApi, |
||||||
|
useGlobal, |
||||||
|
useI18n, |
||||||
|
useNuxtApp, |
||||||
|
watch, |
||||||
|
} from '#imports' |
||||||
|
|
||||||
|
const { connectionType } = defineProps<{ connectionType: ClientType }>() |
||||||
|
|
||||||
|
const emit = defineEmits(['baseCreated']) |
||||||
|
|
||||||
|
const { appInfo } = useGlobal() |
||||||
|
|
||||||
|
const { project, loadProject } = useProject() |
||||||
|
|
||||||
|
const useForm = Form.useForm |
||||||
|
|
||||||
|
const testSuccess = ref(false) |
||||||
|
|
||||||
|
const form = ref<typeof Form>() |
||||||
|
|
||||||
|
const { api } = useApi() |
||||||
|
|
||||||
|
const { $e } = useNuxtApp() |
||||||
|
|
||||||
|
const { t } = useI18n() |
||||||
|
|
||||||
|
const toggleDialog = inject(ToggleDialogInj, () => {}) |
||||||
|
|
||||||
|
let formState = $ref<ProjectCreateForm>({ |
||||||
|
title: '', |
||||||
|
dataSource: { ...getDefaultConnectionConfig(ClientType.MYSQL) }, |
||||||
|
inflection: { |
||||||
|
inflectionColumn: 'camelize', |
||||||
|
inflectionTable: 'camelize', |
||||||
|
}, |
||||||
|
sslUse: SSLUsage.No, |
||||||
|
extraParameters: [], |
||||||
|
}) |
||||||
|
|
||||||
|
const customFormState = ref<ProjectCreateForm>({ |
||||||
|
title: '', |
||||||
|
dataSource: { ...getDefaultConnectionConfig(ClientType.MYSQL) }, |
||||||
|
inflection: { |
||||||
|
inflectionColumn: 'camelize', |
||||||
|
inflectionTable: 'camelize', |
||||||
|
}, |
||||||
|
sslUse: SSLUsage.No, |
||||||
|
extraParameters: [], |
||||||
|
}) |
||||||
|
|
||||||
|
const clientTypes = computed(() => { |
||||||
|
return _clientTypes.filter((type) => { |
||||||
|
return appInfo.value?.ee || type.value !== ClientType.SNOWFLAKE |
||||||
|
}) |
||||||
|
}) |
||||||
|
|
||||||
|
const validators = computed(() => { |
||||||
|
let clientValidations: Record<string, any[]> = { |
||||||
|
'dataSource.connection.host': [fieldRequiredValidator()], |
||||||
|
'dataSource.connection.port': [fieldRequiredValidator()], |
||||||
|
'dataSource.connection.user': [fieldRequiredValidator()], |
||||||
|
'dataSource.connection.password': [fieldRequiredValidator()], |
||||||
|
'dataSource.connection.database': [fieldRequiredValidator()], |
||||||
|
} |
||||||
|
|
||||||
|
switch (formState.dataSource.client) { |
||||||
|
case ClientType.SQLITE: |
||||||
|
clientValidations = { |
||||||
|
'dataSource.connection.connection.filename': [fieldRequiredValidator()], |
||||||
|
} |
||||||
|
break |
||||||
|
case ClientType.SNOWFLAKE: |
||||||
|
clientValidations = { |
||||||
|
'dataSource.connection.account': [fieldRequiredValidator()], |
||||||
|
'dataSource.connection.username': [fieldRequiredValidator()], |
||||||
|
'dataSource.connection.password': [fieldRequiredValidator()], |
||||||
|
'dataSource.connection.warehouse': [fieldRequiredValidator()], |
||||||
|
'dataSource.connection.database': [fieldRequiredValidator()], |
||||||
|
'dataSource.connection.schema': [fieldRequiredValidator()], |
||||||
|
} |
||||||
|
break |
||||||
|
case ClientType.PG: |
||||||
|
case ClientType.MSSQL: |
||||||
|
clientValidations['dataSource.searchPath.0'] = [fieldRequiredValidator()] |
||||||
|
break |
||||||
|
} |
||||||
|
|
||||||
|
return { |
||||||
|
'title': [ |
||||||
|
{ |
||||||
|
required: true, |
||||||
|
message: 'Base name is required', |
||||||
|
}, |
||||||
|
projectTitleValidator, |
||||||
|
], |
||||||
|
'extraParameters': [extraParameterValidator], |
||||||
|
'dataSource.client': [fieldRequiredValidator()], |
||||||
|
...clientValidations, |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
const { validate, validateInfos } = useForm(formState, validators) |
||||||
|
|
||||||
|
const populateName = (v: string) => { |
||||||
|
formState.dataSource.connection.database = `${v.trim()}_noco` |
||||||
|
} |
||||||
|
|
||||||
|
const onClientChange = () => { |
||||||
|
formState.dataSource = { ...getDefaultConnectionConfig(formState.dataSource.client) } |
||||||
|
populateName(formState.title) |
||||||
|
} |
||||||
|
|
||||||
|
const onSSLModeChange = ((mode: SSLUsage) => { |
||||||
|
if (formState.dataSource.client !== ClientType.SQLITE) { |
||||||
|
const connection = formState.dataSource.connection as DefaultConnection |
||||||
|
switch (mode) { |
||||||
|
case SSLUsage.No: |
||||||
|
delete connection.ssl |
||||||
|
break |
||||||
|
case SSLUsage.Allowed: |
||||||
|
connection.ssl = 'true' |
||||||
|
break |
||||||
|
default: |
||||||
|
connection.ssl = { |
||||||
|
ca: '', |
||||||
|
cert: '', |
||||||
|
key: '', |
||||||
|
} |
||||||
|
break |
||||||
|
} |
||||||
|
} |
||||||
|
}) as SelectHandler |
||||||
|
|
||||||
|
const updateSSLUse = () => { |
||||||
|
if (formState.dataSource.client !== ClientType.SQLITE) { |
||||||
|
const connection = formState.dataSource.connection as DefaultConnection |
||||||
|
if (connection.ssl) { |
||||||
|
if (typeof connection.ssl === 'string') { |
||||||
|
formState.sslUse = SSLUsage.Allowed |
||||||
|
} else { |
||||||
|
formState.sslUse = SSLUsage.Preferred |
||||||
|
} |
||||||
|
} else { |
||||||
|
formState.sslUse = SSLUsage.No |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const addNewParam = () => { |
||||||
|
formState.extraParameters.push({ key: '', value: '' }) |
||||||
|
} |
||||||
|
|
||||||
|
const removeParam = (index: number) => { |
||||||
|
formState.extraParameters.splice(index, 1) |
||||||
|
} |
||||||
|
|
||||||
|
const inflectionTypes = ['camelize', 'none'] |
||||||
|
const importURL = ref('') |
||||||
|
const configEditDlg = ref(false) |
||||||
|
const importURLDlg = ref(false) |
||||||
|
|
||||||
|
const caFileInput = ref<HTMLInputElement>() |
||||||
|
const keyFileInput = ref<HTMLInputElement>() |
||||||
|
const certFileInput = ref<HTMLInputElement>() |
||||||
|
|
||||||
|
const onFileSelect = (key: CertTypes, el?: HTMLInputElement) => { |
||||||
|
if (!el) return |
||||||
|
|
||||||
|
readFile(el, (content) => { |
||||||
|
if ('ssl' in formState.dataSource.connection && typeof formState.dataSource.connection.ssl === 'object') |
||||||
|
formState.dataSource.connection.ssl[key] = content ?? '' |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
const sslFilesRequired = computed( |
||||||
|
() => !!formState.sslUse && formState.sslUse !== SSLUsage.No && formState.sslUse !== SSLUsage.Allowed, |
||||||
|
) |
||||||
|
|
||||||
|
function getConnectionConfig() { |
||||||
|
const extraParameters = Object.fromEntries(new Map(formState.extraParameters.map((object) => [object.key, object.value]))) |
||||||
|
|
||||||
|
const connection = { |
||||||
|
...formState.dataSource.connection, |
||||||
|
...extraParameters, |
||||||
|
} |
||||||
|
|
||||||
|
if ('ssl' in connection && connection.ssl) { |
||||||
|
if ( |
||||||
|
formState.sslUse === SSLUsage.No || |
||||||
|
(typeof connection.ssl === 'object' && Object.values(connection.ssl).every((v) => v === null || v === undefined)) |
||||||
|
) { |
||||||
|
delete connection.ssl |
||||||
|
} |
||||||
|
} |
||||||
|
return connection |
||||||
|
} |
||||||
|
|
||||||
|
const focusInvalidInput = () => { |
||||||
|
form.value?.$el.querySelector('.ant-form-item-explain-error')?.parentNode?.parentNode?.querySelector('input')?.focus() |
||||||
|
} |
||||||
|
|
||||||
|
const createBase = async () => { |
||||||
|
try { |
||||||
|
await validate() |
||||||
|
} catch (e) { |
||||||
|
focusInvalidInput() |
||||||
|
return |
||||||
|
} |
||||||
|
|
||||||
|
try { |
||||||
|
if (!project.value?.id) return |
||||||
|
|
||||||
|
const connection = getConnectionConfig() |
||||||
|
|
||||||
|
const config = { ...formState.dataSource, connection } |
||||||
|
|
||||||
|
await api.base.create(project.value?.id, { |
||||||
|
alias: formState.title, |
||||||
|
type: formState.dataSource.client, |
||||||
|
config, |
||||||
|
inflection_column: formState.inflection.inflectionColumn, |
||||||
|
inflection_table: formState.inflection.inflectionTable, |
||||||
|
}) |
||||||
|
|
||||||
|
$e('a:base:create:extdb') |
||||||
|
|
||||||
|
await loadProject() |
||||||
|
emit('baseCreated') |
||||||
|
message.success('Base created!') |
||||||
|
toggleDialog(true, 'dataSources', '') |
||||||
|
} catch (e: any) { |
||||||
|
message.error(await extractSdkResponseErrorMsg(e)) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const testConnection = async () => { |
||||||
|
try { |
||||||
|
await validate() |
||||||
|
} catch (e) { |
||||||
|
focusInvalidInput() |
||||||
|
return |
||||||
|
} |
||||||
|
|
||||||
|
$e('a:base:create:extdb:test-connection', []) |
||||||
|
|
||||||
|
try { |
||||||
|
if (formState.dataSource.client === ClientType.SQLITE) { |
||||||
|
testSuccess.value = true |
||||||
|
} else { |
||||||
|
const connection = getConnectionConfig() |
||||||
|
|
||||||
|
connection.database = getTestDatabaseName(formState.dataSource)! |
||||||
|
|
||||||
|
const testConnectionConfig = { |
||||||
|
...formState.dataSource, |
||||||
|
connection, |
||||||
|
} |
||||||
|
|
||||||
|
const result = await api.utils.testConnection(testConnectionConfig) |
||||||
|
|
||||||
|
if (result.code === 0) { |
||||||
|
testSuccess.value = true |
||||||
|
|
||||||
|
Modal.confirm({ |
||||||
|
title: t('msg.info.dbConnected'), |
||||||
|
icon: null, |
||||||
|
type: 'success', |
||||||
|
okText: 'Ok & Add Base', |
||||||
|
okType: 'primary', |
||||||
|
cancelText: t('general.cancel'), |
||||||
|
onOk: createBase, |
||||||
|
style: 'top: 30%!important', |
||||||
|
}) |
||||||
|
} else { |
||||||
|
testSuccess.value = false |
||||||
|
|
||||||
|
message.error(`${t('msg.error.dbConnectionFailed')} ${result.message}`) |
||||||
|
} |
||||||
|
} |
||||||
|
} catch (e: any) { |
||||||
|
testSuccess.value = false |
||||||
|
|
||||||
|
message.error(await extractSdkResponseErrorMsg(e)) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const handleImportURL = async () => { |
||||||
|
if (!importURL.value || importURL.value === '') return |
||||||
|
|
||||||
|
const connectionConfig = await api.utils.urlToConfig({ url: importURL.value }) |
||||||
|
|
||||||
|
if (connectionConfig) { |
||||||
|
formState.dataSource.client = connectionConfig.client |
||||||
|
formState.dataSource.connection = { ...connectionConfig.connection } |
||||||
|
} else { |
||||||
|
message.error(t('msg.error.invalidURL')) |
||||||
|
} |
||||||
|
importURLDlg.value = false |
||||||
|
updateSSLUse() |
||||||
|
} |
||||||
|
|
||||||
|
const handleEditJSON = () => { |
||||||
|
customFormState.value = { ...formState } |
||||||
|
configEditDlg.value = true |
||||||
|
} |
||||||
|
|
||||||
|
const handleOk = () => { |
||||||
|
formState = { ...customFormState.value } |
||||||
|
configEditDlg.value = false |
||||||
|
updateSSLUse() |
||||||
|
} |
||||||
|
|
||||||
|
// reset test status on config change |
||||||
|
watch( |
||||||
|
() => formState.dataSource, |
||||||
|
() => (testSuccess.value = false), |
||||||
|
{ deep: true }, |
||||||
|
) |
||||||
|
|
||||||
|
// populate database name based on title |
||||||
|
watch( |
||||||
|
() => formState.title, |
||||||
|
(v) => populateName(v), |
||||||
|
) |
||||||
|
|
||||||
|
// select and focus title field on load |
||||||
|
onMounted(async () => { |
||||||
|
formState.title = await generateUniqueName() |
||||||
|
nextTick(() => { |
||||||
|
// todo: replace setTimeout and follow better approach |
||||||
|
setTimeout(() => { |
||||||
|
const input = form.value?.$el?.querySelector('input[type=text]') |
||||||
|
input.setSelectionRange(0, formState.title.length) |
||||||
|
input.focus() |
||||||
|
}, 500) |
||||||
|
}) |
||||||
|
}) |
||||||
|
|
||||||
|
watch( |
||||||
|
() => connectionType, |
||||||
|
(v) => { |
||||||
|
formState.dataSource.client = v |
||||||
|
onClientChange() |
||||||
|
}, |
||||||
|
{ immediate: true }, |
||||||
|
) |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<div class="create-base max-w-800px mx-auto bg-white relative flex flex-col justify-center gap-2 w-full p-8"> |
||||||
|
<h1 class="prose-2xl font-bold self-center my-4">New Base</h1> |
||||||
|
|
||||||
|
<a-form |
||||||
|
ref="form" |
||||||
|
:model="formState" |
||||||
|
name="external-project-create-form" |
||||||
|
layout="horizontal" |
||||||
|
no-style |
||||||
|
:label-col="{ span: 8 }" |
||||||
|
> |
||||||
|
<a-form-item label="Base Name" v-bind="validateInfos.title"> |
||||||
|
<a-input v-model:value="formState.title" class="nc-extdb-proj-name" /> |
||||||
|
</a-form-item> |
||||||
|
|
||||||
|
<a-form-item :label="$t('labels.dbType')" v-bind="validateInfos['dataSource.client']"> |
||||||
|
<a-select |
||||||
|
v-model:value="formState.dataSource.client" |
||||||
|
class="nc-extdb-db-type" |
||||||
|
dropdown-class-name="nc-dropdown-ext-db-type" |
||||||
|
@change="onClientChange" |
||||||
|
> |
||||||
|
<a-select-option v-for="client in clientTypes" :key="client.value" :value="client.value" |
||||||
|
>{{ client.text }} |
||||||
|
</a-select-option> |
||||||
|
</a-select> |
||||||
|
</a-form-item> |
||||||
|
|
||||||
|
<!-- SQLite File --> |
||||||
|
<a-form-item |
||||||
|
v-if="formState.dataSource.client === ClientType.SQLITE" |
||||||
|
:label="$t('labels.sqliteFile')" |
||||||
|
v-bind="validateInfos['dataSource.connection.connection.filename']" |
||||||
|
> |
||||||
|
<a-input v-model:value="(formState.dataSource.connection as SQLiteConnection).connection.filename" /> |
||||||
|
</a-form-item> |
||||||
|
|
||||||
|
<template v-else-if="formState.dataSource.client === ClientType.SNOWFLAKE"> |
||||||
|
<!-- Account --> |
||||||
|
<a-form-item label="Account" v-bind="validateInfos['dataSource.connection.account']"> |
||||||
|
<a-input v-model:value="formState.dataSource.connection.account" class="nc-extdb-account" /> |
||||||
|
</a-form-item> |
||||||
|
|
||||||
|
<!-- Username --> |
||||||
|
<a-form-item :label="$t('labels.username')" v-bind="validateInfos['dataSource.connection.username']"> |
||||||
|
<a-input v-model:value="formState.dataSource.connection.username" class="nc-extdb-host-user" /> |
||||||
|
</a-form-item> |
||||||
|
|
||||||
|
<!-- Password --> |
||||||
|
<a-form-item :label="$t('labels.password')" v-bind="validateInfos['dataSource.connection.password']"> |
||||||
|
<a-input-password v-model:value="formState.dataSource.connection.password" class="nc-extdb-host-password" /> |
||||||
|
</a-form-item> |
||||||
|
|
||||||
|
<!-- Warehouse --> |
||||||
|
<a-form-item label="Warehouse" v-bind="validateInfos['dataSource.connection.warehouse']"> |
||||||
|
<a-input v-model:value="formState.dataSource.connection.warehouse" /> |
||||||
|
</a-form-item> |
||||||
|
|
||||||
|
<!-- Database --> |
||||||
|
<a-form-item :label="$t('labels.database')" v-bind="validateInfos['dataSource.connection.database']"> |
||||||
|
<!-- Database : create if not exists --> |
||||||
|
<a-input |
||||||
|
v-model:value="formState.dataSource.connection.database" |
||||||
|
:placeholder="$t('labels.dbCreateIfNotExists')" |
||||||
|
class="nc-extdb-host-database" |
||||||
|
/> |
||||||
|
</a-form-item> |
||||||
|
|
||||||
|
<!-- Schema name --> |
||||||
|
<a-form-item :label="$t('labels.schemaName')" v-bind="validateInfos['dataSource.connection.schema']"> |
||||||
|
<a-input v-model:value="formState.dataSource.connection.schema" /> |
||||||
|
</a-form-item> |
||||||
|
</template> |
||||||
|
|
||||||
|
<template v-else> |
||||||
|
<!-- Host Address --> |
||||||
|
<a-form-item :label="$t('labels.hostAddress')" v-bind="validateInfos['dataSource.connection.host']"> |
||||||
|
<a-input v-model:value="(formState.dataSource.connection as DefaultConnection).host" class="nc-extdb-host-address" /> |
||||||
|
</a-form-item> |
||||||
|
|
||||||
|
<!-- Port Number --> |
||||||
|
<a-form-item :label="$t('labels.port')" v-bind="validateInfos['dataSource.connection.port']"> |
||||||
|
<a-input-number |
||||||
|
v-model:value="(formState.dataSource.connection as DefaultConnection).port" |
||||||
|
class="!w-full nc-extdb-host-port" |
||||||
|
/> |
||||||
|
</a-form-item> |
||||||
|
|
||||||
|
<!-- Username --> |
||||||
|
<a-form-item :label="$t('labels.username')" v-bind="validateInfos['dataSource.connection.user']"> |
||||||
|
<a-input v-model:value="(formState.dataSource.connection as DefaultConnection).user" class="nc-extdb-host-user" /> |
||||||
|
</a-form-item> |
||||||
|
|
||||||
|
<!-- Password --> |
||||||
|
<a-form-item :label="$t('labels.password')"> |
||||||
|
<a-input-password |
||||||
|
v-model:value="(formState.dataSource.connection as DefaultConnection).password" |
||||||
|
class="nc-extdb-host-password" |
||||||
|
/> |
||||||
|
</a-form-item> |
||||||
|
|
||||||
|
<!-- Database --> |
||||||
|
<a-form-item :label="$t('labels.database')" v-bind="validateInfos['dataSource.connection.database']"> |
||||||
|
<!-- Database : create if not exists --> |
||||||
|
<a-input |
||||||
|
v-model:value="formState.dataSource.connection.database" |
||||||
|
:placeholder="$t('labels.dbCreateIfNotExists')" |
||||||
|
class="nc-extdb-host-database" |
||||||
|
/> |
||||||
|
</a-form-item> |
||||||
|
|
||||||
|
<!-- Schema name --> |
||||||
|
<a-form-item |
||||||
|
v-if="[ClientType.MSSQL, ClientType.PG].includes(formState.dataSource.client) && formState.dataSource.searchPath" |
||||||
|
:label="$t('labels.schemaName')" |
||||||
|
v-bind="validateInfos['dataSource.searchPath.0']" |
||||||
|
> |
||||||
|
<a-input v-model:value="formState.dataSource.searchPath[0]" /> |
||||||
|
</a-form-item> |
||||||
|
|
||||||
|
<a-collapse ghost expand-icon-position="right" class="!mt-6"> |
||||||
|
<a-collapse-panel key="1"> |
||||||
|
<template #header> |
||||||
|
<div class="flex items-center gap-2"> |
||||||
|
<!-- Use Connection URL --> |
||||||
|
<a-button type="default" class="nc-extdb-btn-import-url" @click.stop="importURLDlg = true"> |
||||||
|
{{ $t('activity.useConnectionUrl') }} |
||||||
|
</a-button> |
||||||
|
<span>{{ $t('title.advancedParameters') }}</span> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<a-form-item label="SSL mode"> |
||||||
|
<a-select v-model:value="formState.sslUse" dropdown-class-name="nc-dropdown-ssl-mode" @select="onSSLModeChange"> |
||||||
|
<a-select-option v-for="opt in Object.values(SSLUsage)" :key="opt" :value="opt">{{ opt }}</a-select-option> |
||||||
|
</a-select> |
||||||
|
</a-form-item> |
||||||
|
|
||||||
|
<a-form-item label="SSL keys"> |
||||||
|
<div class="flex gap-2"> |
||||||
|
<a-tooltip placement="top"> |
||||||
|
<!-- Select .cert file --> |
||||||
|
<template #title> |
||||||
|
<span>{{ $t('tooltip.clientCert') }}</span> |
||||||
|
</template> |
||||||
|
|
||||||
|
<a-button :disabled="!sslFilesRequired" class="shadow" @click="certFileInput?.click()"> |
||||||
|
{{ $t('labels.clientCert') }} |
||||||
|
</a-button> |
||||||
|
</a-tooltip> |
||||||
|
|
||||||
|
<a-tooltip placement="top"> |
||||||
|
<!-- Select .key file --> |
||||||
|
<template #title> |
||||||
|
<span>{{ $t('tooltip.clientKey') }}</span> |
||||||
|
</template> |
||||||
|
<a-button :disabled="!sslFilesRequired" class="shadow" @click="keyFileInput?.click()"> |
||||||
|
{{ $t('labels.clientKey') }} |
||||||
|
</a-button> |
||||||
|
</a-tooltip> |
||||||
|
|
||||||
|
<a-tooltip placement="top"> |
||||||
|
<!-- Select CA file --> |
||||||
|
<template #title> |
||||||
|
<span>{{ $t('tooltip.clientCA') }}</span> |
||||||
|
</template> |
||||||
|
|
||||||
|
<a-button :disabled="!sslFilesRequired" class="shadow" @click="caFileInput?.click()"> |
||||||
|
{{ $t('labels.serverCA') }} |
||||||
|
</a-button> |
||||||
|
</a-tooltip> |
||||||
|
</div> |
||||||
|
</a-form-item> |
||||||
|
|
||||||
|
<input ref="caFileInput" type="file" class="!hidden" @change="onFileSelect(CertTypes.ca, caFileInput)" /> |
||||||
|
|
||||||
|
<input ref="certFileInput" type="file" class="!hidden" @change="onFileSelect(CertTypes.cert, certFileInput)" /> |
||||||
|
|
||||||
|
<input ref="keyFileInput" type="file" class="!hidden" @change="onFileSelect(CertTypes.key, keyFileInput)" /> |
||||||
|
|
||||||
|
<a-divider /> |
||||||
|
|
||||||
|
<!-- Extra connection parameters --> |
||||||
|
<a-form-item class="mb-2" :label="$t('labels.extraConnectionParameters')" v-bind="validateInfos.extraParameters"> |
||||||
|
<a-card> |
||||||
|
<div v-for="(item, index) of formState.extraParameters" :key="index"> |
||||||
|
<div class="flex py-1 items-center gap-1"> |
||||||
|
<a-input v-model:value="item.key" /> |
||||||
|
|
||||||
|
<span>:</span> |
||||||
|
|
||||||
|
<a-input v-model:value="item.value" /> |
||||||
|
|
||||||
|
<MdiClose :style="{ 'font-size': '1.5em', 'color': 'red' }" @click="removeParam(index)" /> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<a-button type="dashed" class="w-full caption mt-2" @click="addNewParam"> |
||||||
|
<div class="flex items-center justify-center"><MdiPlus /></div> |
||||||
|
</a-button> |
||||||
|
</a-card> |
||||||
|
</a-form-item> |
||||||
|
|
||||||
|
<a-divider /> |
||||||
|
|
||||||
|
<a-form-item :label="$t('labels.inflection.tableName')"> |
||||||
|
<a-select |
||||||
|
v-model:value="formState.inflection.inflectionTable" |
||||||
|
dropdown-class-name="nc-dropdown-inflection-table-name" |
||||||
|
> |
||||||
|
<a-select-option v-for="type in inflectionTypes" :key="type" :value="type">{{ type }}</a-select-option> |
||||||
|
</a-select> |
||||||
|
</a-form-item> |
||||||
|
|
||||||
|
<a-form-item :label="$t('labels.inflection.columnName')"> |
||||||
|
<a-select |
||||||
|
v-model:value="formState.inflection.inflectionColumn" |
||||||
|
dropdown-class-name="nc-dropdown-inflection-column-name" |
||||||
|
> |
||||||
|
<a-select-option v-for="type in inflectionTypes" :key="type" :value="type">{{ type }}</a-select-option> |
||||||
|
</a-select> |
||||||
|
</a-form-item> |
||||||
|
|
||||||
|
<div class="flex justify-end"> |
||||||
|
<a-button class="!shadow-md" @click="handleEditJSON()"> |
||||||
|
<!-- Edit connection JSON --> |
||||||
|
{{ $t('activity.editConnJson') }} |
||||||
|
</a-button> |
||||||
|
</div> |
||||||
|
</a-collapse-panel> |
||||||
|
</a-collapse> |
||||||
|
</template> |
||||||
|
|
||||||
|
<a-form-item class="flex justify-center !mt-5"> |
||||||
|
<div class="flex justify-center gap-2"> |
||||||
|
<a-button type="primary" ghost class="nc-extdb-btn-test-connection" @click="testConnection"> |
||||||
|
{{ $t('activity.testDbConn') }} |
||||||
|
</a-button> |
||||||
|
|
||||||
|
<a-button type="primary" :disabled="!testSuccess" class="nc-extdb-btn-submit !shadow" @click="createBase"> |
||||||
|
{{ $t('general.submit') }} |
||||||
|
</a-button> |
||||||
|
</div> |
||||||
|
</a-form-item> |
||||||
|
</a-form> |
||||||
|
|
||||||
|
<a-modal |
||||||
|
v-model:visible="configEditDlg" |
||||||
|
:title="$t('activity.editConnJson')" |
||||||
|
width="600px" |
||||||
|
wrap-class-name="nc-modal-edit-connection-json" |
||||||
|
@ok="handleOk" |
||||||
|
> |
||||||
|
<MonacoEditor v-if="configEditDlg" v-model="customFormState" class="h-[400px] w-full" /> |
||||||
|
</a-modal> |
||||||
|
|
||||||
|
<!-- Use Connection URL --> |
||||||
|
<a-modal |
||||||
|
v-model:visible="importURLDlg" |
||||||
|
:title="$t('activity.useConnectionUrl')" |
||||||
|
width="600px" |
||||||
|
:ok-text="$t('general.ok')" |
||||||
|
:cancel-text="$t('general.cancel')" |
||||||
|
wrap-class-name="nc-modal-connection-url" |
||||||
|
@ok="handleImportURL" |
||||||
|
> |
||||||
|
<a-input v-model:value="importURL" /> |
||||||
|
</a-modal> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
:deep(.ant-collapse-header) { |
||||||
|
@apply !pr-10 !-mt-4 text-right justify-end; |
||||||
|
} |
||||||
|
|
||||||
|
:deep(.ant-collapse-content-box) { |
||||||
|
@apply !px-0; |
||||||
|
} |
||||||
|
|
||||||
|
:deep(.ant-form-item-explain-error) { |
||||||
|
@apply !text-xs; |
||||||
|
} |
||||||
|
|
||||||
|
:deep(.ant-form-item) { |
||||||
|
@apply mb-2; |
||||||
|
} |
||||||
|
|
||||||
|
:deep(.ant-form-item-with-help .ant-form-item-explain) { |
||||||
|
@apply !min-h-0; |
||||||
|
} |
||||||
|
|
||||||
|
.create-base { |
||||||
|
:deep(.ant-input-affix-wrapper), |
||||||
|
:deep(.ant-input), |
||||||
|
:deep(.ant-select) { |
||||||
|
@apply !appearance-none border-1 border-solid rounded; |
||||||
|
} |
||||||
|
|
||||||
|
:deep(.ant-input-password) { |
||||||
|
input { |
||||||
|
@apply !border-none my-0; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,652 @@ |
|||||||
|
<script lang="ts" setup> |
||||||
|
import type { BaseType } from 'nocodb-sdk' |
||||||
|
import { Form, Modal, message } from 'ant-design-vue' |
||||||
|
import type { SelectHandler } from 'ant-design-vue/es/vc-select/Select' |
||||||
|
import type { ProjectCreateForm } from '#imports' |
||||||
|
import { |
||||||
|
CertTypes, |
||||||
|
ClientType, |
||||||
|
DefaultConnection, |
||||||
|
SQLiteConnection, |
||||||
|
SSLUsage, |
||||||
|
clientTypes, |
||||||
|
computed, |
||||||
|
extractSdkResponseErrorMsg, |
||||||
|
fieldRequiredValidator, |
||||||
|
getDefaultConnectionConfig, |
||||||
|
getTestDatabaseName, |
||||||
|
onMounted, |
||||||
|
projectTitleValidator, |
||||||
|
readFile, |
||||||
|
ref, |
||||||
|
useApi, |
||||||
|
useI18n, |
||||||
|
useNuxtApp, |
||||||
|
watch, |
||||||
|
} from '#imports' |
||||||
|
|
||||||
|
const props = defineProps<{ |
||||||
|
baseId: string |
||||||
|
}>() |
||||||
|
|
||||||
|
const emit = defineEmits(['baseUpdated']) |
||||||
|
|
||||||
|
const { project, loadProject } = useProject() |
||||||
|
|
||||||
|
const useForm = Form.useForm |
||||||
|
|
||||||
|
const testSuccess = ref(false) |
||||||
|
|
||||||
|
const form = ref<typeof Form>() |
||||||
|
|
||||||
|
const { api } = useApi() |
||||||
|
|
||||||
|
const { $e } = useNuxtApp() |
||||||
|
|
||||||
|
const { t } = useI18n() |
||||||
|
|
||||||
|
const toggleDialog = inject(ToggleDialogInj, () => {}) |
||||||
|
|
||||||
|
const formState = ref<ProjectCreateForm>({ |
||||||
|
title: '', |
||||||
|
dataSource: { ...getDefaultConnectionConfig(ClientType.MYSQL) }, |
||||||
|
inflection: { |
||||||
|
inflectionColumn: 'camelize', |
||||||
|
inflectionTable: 'camelize', |
||||||
|
}, |
||||||
|
sslUse: SSLUsage.No, |
||||||
|
extraParameters: [], |
||||||
|
}) |
||||||
|
|
||||||
|
const customFormState = ref<ProjectCreateForm>({ |
||||||
|
title: '', |
||||||
|
dataSource: { ...getDefaultConnectionConfig(ClientType.MYSQL) }, |
||||||
|
inflection: { |
||||||
|
inflectionColumn: 'camelize', |
||||||
|
inflectionTable: 'camelize', |
||||||
|
}, |
||||||
|
sslUse: SSLUsage.No, |
||||||
|
extraParameters: [], |
||||||
|
}) |
||||||
|
|
||||||
|
const validators = computed(() => { |
||||||
|
return { |
||||||
|
'title': [projectTitleValidator], |
||||||
|
'extraParameters': [extraParameterValidator], |
||||||
|
'dataSource.client': [fieldRequiredValidator()], |
||||||
|
...(formState.value.dataSource.client === ClientType.SQLITE |
||||||
|
? { |
||||||
|
'dataSource.connection.connection.filename': [fieldRequiredValidator()], |
||||||
|
} |
||||||
|
: formState.value.dataSource.client === ClientType.SNOWFLAKE |
||||||
|
? { |
||||||
|
'dataSource.connection.account': [fieldRequiredValidator()], |
||||||
|
'dataSource.connection.username': [fieldRequiredValidator()], |
||||||
|
'dataSource.connection.password': [fieldRequiredValidator()], |
||||||
|
'dataSource.connection.warehouse': [fieldRequiredValidator()], |
||||||
|
'dataSource.connection.database': [fieldRequiredValidator()], |
||||||
|
'dataSource.connection.schema': [fieldRequiredValidator()], |
||||||
|
} |
||||||
|
: { |
||||||
|
'dataSource.connection.host': [fieldRequiredValidator()], |
||||||
|
'dataSource.connection.port': [fieldRequiredValidator()], |
||||||
|
'dataSource.connection.user': [fieldRequiredValidator()], |
||||||
|
'dataSource.connection.password': [fieldRequiredValidator()], |
||||||
|
'dataSource.connection.database': [fieldRequiredValidator()], |
||||||
|
...([ClientType.PG, ClientType.MSSQL].includes(formState.value.dataSource.client) |
||||||
|
? { |
||||||
|
'dataSource.searchPath.0': [fieldRequiredValidator()], |
||||||
|
} |
||||||
|
: {}), |
||||||
|
}), |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
const { validate, validateInfos } = useForm(formState, validators) |
||||||
|
|
||||||
|
const onClientChange = () => { |
||||||
|
formState.value.dataSource = { ...getDefaultConnectionConfig(formState.value.dataSource.client) } |
||||||
|
} |
||||||
|
|
||||||
|
const onSSLModeChange = ((mode: SSLUsage) => { |
||||||
|
if (formState.value.dataSource.client !== ClientType.SQLITE) { |
||||||
|
const connection = formState.value.dataSource.connection as DefaultConnection |
||||||
|
switch (mode) { |
||||||
|
case SSLUsage.No: |
||||||
|
delete connection.ssl |
||||||
|
break |
||||||
|
case SSLUsage.Allowed: |
||||||
|
connection.ssl = 'true' |
||||||
|
break |
||||||
|
default: |
||||||
|
connection.ssl = { |
||||||
|
ca: '', |
||||||
|
cert: '', |
||||||
|
key: '', |
||||||
|
} |
||||||
|
break |
||||||
|
} |
||||||
|
} |
||||||
|
}) as SelectHandler |
||||||
|
|
||||||
|
const updateSSLUse = () => { |
||||||
|
if (formState.value.dataSource.client !== ClientType.SQLITE) { |
||||||
|
const connection = formState.value.dataSource.connection as DefaultConnection |
||||||
|
if (connection.ssl) { |
||||||
|
if (typeof connection.ssl === 'string') { |
||||||
|
formState.value.sslUse = SSLUsage.Allowed |
||||||
|
} else { |
||||||
|
formState.value.sslUse = SSLUsage.Preferred |
||||||
|
} |
||||||
|
} else { |
||||||
|
formState.value.sslUse = SSLUsage.No |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const addNewParam = () => { |
||||||
|
formState.value.extraParameters.push({ key: '', value: '' }) |
||||||
|
} |
||||||
|
|
||||||
|
const removeParam = (index: number) => { |
||||||
|
formState.value.extraParameters.splice(index, 1) |
||||||
|
} |
||||||
|
|
||||||
|
const inflectionTypes = ['camelize', 'none'] |
||||||
|
const importURL = ref('') |
||||||
|
const configEditDlg = ref(false) |
||||||
|
const importURLDlg = ref(false) |
||||||
|
|
||||||
|
const caFileInput = ref<HTMLInputElement>() |
||||||
|
const keyFileInput = ref<HTMLInputElement>() |
||||||
|
const certFileInput = ref<HTMLInputElement>() |
||||||
|
|
||||||
|
const onFileSelect = (key: CertTypes, el?: HTMLInputElement) => { |
||||||
|
if (!el) return |
||||||
|
|
||||||
|
readFile(el, (content) => { |
||||||
|
if ('ssl' in formState.value.dataSource.connection && typeof formState.value.dataSource.connection.ssl === 'object') |
||||||
|
formState.value.dataSource.connection.ssl[key] = content ?? '' |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
const sslFilesRequired = computed( |
||||||
|
() => !!formState.value.sslUse && formState.value.sslUse !== SSLUsage.No && formState.value.sslUse !== SSLUsage.Allowed, |
||||||
|
) |
||||||
|
|
||||||
|
function getConnectionConfig() { |
||||||
|
const extraParameters = Object.fromEntries(new Map(formState.value.extraParameters.map((object) => [object.key, object.value]))) |
||||||
|
|
||||||
|
const connection = { |
||||||
|
...formState.value.dataSource.connection, |
||||||
|
...extraParameters, |
||||||
|
} |
||||||
|
|
||||||
|
if ('ssl' in connection && connection.ssl) { |
||||||
|
if ( |
||||||
|
formState.value.sslUse === SSLUsage.No || |
||||||
|
(typeof connection.ssl === 'object' && Object.values(connection.ssl).every((v) => v === null || v === undefined)) |
||||||
|
) { |
||||||
|
delete connection.ssl |
||||||
|
} |
||||||
|
} |
||||||
|
return connection |
||||||
|
} |
||||||
|
|
||||||
|
const focusInvalidInput = () => { |
||||||
|
form.value?.$el.querySelector('.ant-form-item-explain-error')?.parentNode?.parentNode?.querySelector('input')?.focus() |
||||||
|
} |
||||||
|
|
||||||
|
const editBase = async () => { |
||||||
|
try { |
||||||
|
await validate() |
||||||
|
} catch (e) { |
||||||
|
focusInvalidInput() |
||||||
|
return |
||||||
|
} |
||||||
|
|
||||||
|
try { |
||||||
|
if (!project.value?.id) return |
||||||
|
|
||||||
|
const connection = getConnectionConfig() |
||||||
|
|
||||||
|
const config = { ...formState.value.dataSource, connection } |
||||||
|
|
||||||
|
await api.base.update(project.value?.id, props.baseId, { |
||||||
|
alias: formState.value.title, |
||||||
|
type: formState.value.dataSource.client, |
||||||
|
config, |
||||||
|
inflection_column: formState.value.inflection.inflectionColumn, |
||||||
|
inflection_table: formState.value.inflection.inflectionTable, |
||||||
|
}) |
||||||
|
|
||||||
|
$e('a:base:edit:extdb') |
||||||
|
|
||||||
|
await loadProject() |
||||||
|
emit('baseUpdated') |
||||||
|
message.success('Base updated!') |
||||||
|
toggleDialog(true, 'dataSources', '') |
||||||
|
} catch (e: any) { |
||||||
|
message.error(await extractSdkResponseErrorMsg(e)) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const testConnection = async () => { |
||||||
|
try { |
||||||
|
await validate() |
||||||
|
} catch (e) { |
||||||
|
focusInvalidInput() |
||||||
|
return |
||||||
|
} |
||||||
|
|
||||||
|
$e('a:base:edit:extdb:test-connection', []) |
||||||
|
|
||||||
|
try { |
||||||
|
if (formState.value.dataSource.client === ClientType.SQLITE) { |
||||||
|
testSuccess.value = true |
||||||
|
} else { |
||||||
|
const connection = getConnectionConfig() |
||||||
|
|
||||||
|
connection.database = getTestDatabaseName(formState.value.dataSource)! |
||||||
|
|
||||||
|
const testConnectionConfig = { |
||||||
|
...formState.value.dataSource, |
||||||
|
connection, |
||||||
|
} |
||||||
|
|
||||||
|
const result = await api.utils.testConnection(testConnectionConfig) |
||||||
|
|
||||||
|
if (result.code === 0) { |
||||||
|
testSuccess.value = true |
||||||
|
|
||||||
|
Modal.confirm({ |
||||||
|
title: t('msg.info.dbConnected'), |
||||||
|
icon: null, |
||||||
|
type: 'success', |
||||||
|
okText: 'Ok & Edit Base', |
||||||
|
okType: 'primary', |
||||||
|
cancelText: t('general.cancel'), |
||||||
|
onOk: editBase, |
||||||
|
style: 'top: 30%!important', |
||||||
|
}) |
||||||
|
} else { |
||||||
|
testSuccess.value = false |
||||||
|
|
||||||
|
message.error(`${t('msg.error.dbConnectionFailed')} ${result.message}`) |
||||||
|
} |
||||||
|
} |
||||||
|
} catch (e: any) { |
||||||
|
testSuccess.value = false |
||||||
|
|
||||||
|
message.error(await extractSdkResponseErrorMsg(e)) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const handleImportURL = async () => { |
||||||
|
if (!importURL.value || importURL.value === '') return |
||||||
|
|
||||||
|
const connectionConfig = await api.utils.urlToConfig({ url: importURL.value }) |
||||||
|
|
||||||
|
if (connectionConfig) { |
||||||
|
formState.value.dataSource.client = connectionConfig.client |
||||||
|
formState.value.dataSource.connection = { ...connectionConfig.connection } |
||||||
|
} else { |
||||||
|
message.error(t('msg.error.invalidURL')) |
||||||
|
} |
||||||
|
importURLDlg.value = false |
||||||
|
updateSSLUse() |
||||||
|
} |
||||||
|
|
||||||
|
const handleEditJSON = () => { |
||||||
|
customFormState.value = formState.value |
||||||
|
configEditDlg.value = true |
||||||
|
} |
||||||
|
|
||||||
|
const handleOk = () => { |
||||||
|
formState.value = customFormState.value |
||||||
|
configEditDlg.value = false |
||||||
|
updateSSLUse() |
||||||
|
} |
||||||
|
|
||||||
|
// reset test status on config change |
||||||
|
watch( |
||||||
|
() => formState.value.dataSource, |
||||||
|
() => (testSuccess.value = false), |
||||||
|
{ deep: true }, |
||||||
|
) |
||||||
|
|
||||||
|
// load base config |
||||||
|
onMounted(async () => { |
||||||
|
if (project.value?.id) { |
||||||
|
const definedParameters = ['host', 'port', 'user', 'password', 'database'] |
||||||
|
|
||||||
|
const activeBase = (await api.base.read(project.value?.id, props.baseId)) as BaseType |
||||||
|
|
||||||
|
const tempParameters = Object.entries(activeBase.config.connection) |
||||||
|
.filter(([key]) => !definedParameters.includes(key)) |
||||||
|
.map(([key, value]) => ({ key: key as string, value: value as string })) |
||||||
|
|
||||||
|
formState.value = { |
||||||
|
title: activeBase.alias || '', |
||||||
|
dataSource: activeBase.config, |
||||||
|
inflection: { |
||||||
|
inflectionColumn: activeBase.inflection_column, |
||||||
|
inflectionTable: activeBase.inflection_table, |
||||||
|
}, |
||||||
|
extraParameters: tempParameters, |
||||||
|
sslUse: SSLUsage.No, |
||||||
|
} |
||||||
|
updateSSLUse() |
||||||
|
} |
||||||
|
}) |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<div class="edit-base max-w-800px mx-auto bg-white relative flex flex-col justify-center gap-2 w-full p-8"> |
||||||
|
<h1 class="prose-2xl font-bold self-center my-4">Edit Base</h1> |
||||||
|
|
||||||
|
<a-form |
||||||
|
ref="form" |
||||||
|
:model="formState" |
||||||
|
name="external-project-create-form" |
||||||
|
layout="horizontal" |
||||||
|
no-style |
||||||
|
:label-col="{ span: 8 }" |
||||||
|
> |
||||||
|
<a-form-item label="Base Name" v-bind="validateInfos.title"> |
||||||
|
<a-input v-model:value="formState.title" class="nc-extdb-proj-name" /> |
||||||
|
</a-form-item> |
||||||
|
|
||||||
|
<a-form-item :label="$t('labels.dbType')" v-bind="validateInfos['dataSource.client']"> |
||||||
|
<a-select |
||||||
|
v-model:value="formState.dataSource.client" |
||||||
|
class="nc-extdb-db-type" |
||||||
|
dropdown-class-name="nc-dropdown-ext-db-type" |
||||||
|
@change="onClientChange" |
||||||
|
> |
||||||
|
<a-select-option v-for="client in clientTypes" :key="client.value" :value="client.value" |
||||||
|
>{{ client.text }} |
||||||
|
</a-select-option> |
||||||
|
</a-select> |
||||||
|
</a-form-item> |
||||||
|
|
||||||
|
<!-- SQLite File --> |
||||||
|
<a-form-item |
||||||
|
v-if="formState.dataSource.client === ClientType.SQLITE" |
||||||
|
:label="$t('labels.sqliteFile')" |
||||||
|
v-bind="validateInfos['dataSource.connection.connection.filename']" |
||||||
|
> |
||||||
|
<a-input v-model:value="(formState.dataSource.connection as SQLiteConnection).connection.filename" /> |
||||||
|
</a-form-item> |
||||||
|
|
||||||
|
<template v-else-if="formState.dataSource.client === ClientType.SNOWFLAKE"> |
||||||
|
<!-- Account --> |
||||||
|
<a-form-item label="Account" v-bind="validateInfos['dataSource.connection.account']"> |
||||||
|
<a-input v-model:value="formState.dataSource.connection.account" class="nc-extdb-account" /> |
||||||
|
</a-form-item> |
||||||
|
|
||||||
|
<!-- Username --> |
||||||
|
<a-form-item :label="$t('labels.username')" v-bind="validateInfos['dataSource.connection.username']"> |
||||||
|
<a-input v-model:value="formState.dataSource.connection.username" class="nc-extdb-host-user" /> |
||||||
|
</a-form-item> |
||||||
|
|
||||||
|
<!-- Password --> |
||||||
|
<a-form-item :label="$t('labels.password')" v-bind="validateInfos['dataSource.connection.password']"> |
||||||
|
<a-input-password v-model:value="formState.dataSource.connection.password" class="nc-extdb-host-password" /> |
||||||
|
</a-form-item> |
||||||
|
|
||||||
|
<!-- Warehouse --> |
||||||
|
<a-form-item label="Warehouse" v-bind="validateInfos['dataSource.connection.warehouse']"> |
||||||
|
<a-input v-model:value="formState.dataSource.connection.warehouse" /> |
||||||
|
</a-form-item> |
||||||
|
|
||||||
|
<!-- Database --> |
||||||
|
<a-form-item :label="$t('labels.database')" v-bind="validateInfos['dataSource.connection.database']"> |
||||||
|
<!-- Database : create if not exists --> |
||||||
|
<a-input |
||||||
|
v-model:value="formState.dataSource.connection.database" |
||||||
|
:placeholder="$t('labels.dbCreateIfNotExists')" |
||||||
|
class="nc-extdb-host-database" |
||||||
|
/> |
||||||
|
</a-form-item> |
||||||
|
|
||||||
|
<!-- Schema name --> |
||||||
|
<a-form-item :label="$t('labels.schemaName')" v-bind="validateInfos['dataSource.connection.schema']"> |
||||||
|
<a-input v-model:value="formState.dataSource.connection.schema" /> |
||||||
|
</a-form-item> |
||||||
|
</template> |
||||||
|
|
||||||
|
<template v-else> |
||||||
|
<!-- Host Address --> |
||||||
|
<a-form-item :label="$t('labels.hostAddress')" v-bind="validateInfos['dataSource.connection.host']"> |
||||||
|
<a-input v-model:value="(formState.dataSource.connection as DefaultConnection).host" class="nc-extdb-host-address" /> |
||||||
|
</a-form-item> |
||||||
|
|
||||||
|
<!-- Port Number --> |
||||||
|
<a-form-item :label="$t('labels.port')" v-bind="validateInfos['dataSource.connection.port']"> |
||||||
|
<a-input-number |
||||||
|
v-model:value="(formState.dataSource.connection as DefaultConnection).port" |
||||||
|
class="!w-full nc-extdb-host-port" |
||||||
|
/> |
||||||
|
</a-form-item> |
||||||
|
|
||||||
|
<!-- Username --> |
||||||
|
<a-form-item :label="$t('labels.username')" v-bind="validateInfos['dataSource.connection.user']"> |
||||||
|
<a-input v-model:value="(formState.dataSource.connection as DefaultConnection).user" class="nc-extdb-host-user" /> |
||||||
|
</a-form-item> |
||||||
|
|
||||||
|
<!-- Password --> |
||||||
|
<a-form-item :label="$t('labels.password')"> |
||||||
|
<a-input-password |
||||||
|
v-model:value="(formState.dataSource.connection as DefaultConnection).password" |
||||||
|
class="nc-extdb-host-password" |
||||||
|
/> |
||||||
|
</a-form-item> |
||||||
|
|
||||||
|
<!-- Database --> |
||||||
|
<a-form-item :label="$t('labels.database')" v-bind="validateInfos['dataSource.connection.database']"> |
||||||
|
<!-- Database : create if not exists --> |
||||||
|
<a-input |
||||||
|
v-model:value="formState.dataSource.connection.database" |
||||||
|
:placeholder="$t('labels.dbCreateIfNotExists')" |
||||||
|
class="nc-extdb-host-database" |
||||||
|
/> |
||||||
|
</a-form-item> |
||||||
|
|
||||||
|
<!-- Schema name --> |
||||||
|
<a-form-item |
||||||
|
v-if="[ClientType.MSSQL, ClientType.PG].includes(formState.dataSource.client) && formState.dataSource.searchPath" |
||||||
|
:label="$t('labels.schemaName')" |
||||||
|
v-bind="validateInfos['dataSource.searchPath.0']" |
||||||
|
> |
||||||
|
<a-input v-model:value="formState.dataSource.searchPath[0]" /> |
||||||
|
</a-form-item> |
||||||
|
|
||||||
|
<a-collapse ghost expand-icon-position="right" class="!mt-6"> |
||||||
|
<a-collapse-panel key="1"> |
||||||
|
<template #header> |
||||||
|
<div class="flex items-center gap-2"> |
||||||
|
<!-- Use Connection URL --> |
||||||
|
<a-button type="default" class="nc-extdb-btn-import-url" @click.stop="importURLDlg = true"> |
||||||
|
{{ $t('activity.useConnectionUrl') }} |
||||||
|
</a-button> |
||||||
|
<span>{{ $t('title.advancedParameters') }}</span> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<a-form-item label="SSL mode"> |
||||||
|
<a-select v-model:value="formState.sslUse" dropdown-class-name="nc-dropdown-ssl-mode" @select="onSSLModeChange"> |
||||||
|
<a-select-option v-for="opt in Object.values(SSLUsage)" :key="opt" :value="opt">{{ opt }}</a-select-option> |
||||||
|
</a-select> |
||||||
|
</a-form-item> |
||||||
|
|
||||||
|
<a-form-item label="SSL keys"> |
||||||
|
<div class="flex gap-2"> |
||||||
|
<a-tooltip placement="top"> |
||||||
|
<!-- Select .cert file --> |
||||||
|
<template #title> |
||||||
|
<span>{{ $t('tooltip.clientCert') }}</span> |
||||||
|
</template> |
||||||
|
|
||||||
|
<a-button :disabled="!sslFilesRequired" class="shadow" @click="certFileInput?.click()"> |
||||||
|
{{ $t('labels.clientCert') }} |
||||||
|
</a-button> |
||||||
|
</a-tooltip> |
||||||
|
|
||||||
|
<a-tooltip placement="top"> |
||||||
|
<!-- Select .key file --> |
||||||
|
<template #title> |
||||||
|
<span>{{ $t('tooltip.clientKey') }}</span> |
||||||
|
</template> |
||||||
|
<a-button :disabled="!sslFilesRequired" class="shadow" @click="keyFileInput?.click()"> |
||||||
|
{{ $t('labels.clientKey') }} |
||||||
|
</a-button> |
||||||
|
</a-tooltip> |
||||||
|
|
||||||
|
<a-tooltip placement="top"> |
||||||
|
<!-- Select CA file --> |
||||||
|
<template #title> |
||||||
|
<span>{{ $t('tooltip.clientCA') }}</span> |
||||||
|
</template> |
||||||
|
|
||||||
|
<a-button :disabled="!sslFilesRequired" class="shadow" @click="caFileInput?.click()"> |
||||||
|
{{ $t('labels.serverCA') }} |
||||||
|
</a-button> |
||||||
|
</a-tooltip> |
||||||
|
</div> |
||||||
|
</a-form-item> |
||||||
|
|
||||||
|
<input ref="caFileInput" type="file" class="!hidden" @change="onFileSelect(CertTypes.ca, caFileInput)" /> |
||||||
|
|
||||||
|
<input ref="certFileInput" type="file" class="!hidden" @change="onFileSelect(CertTypes.cert, certFileInput)" /> |
||||||
|
|
||||||
|
<input ref="keyFileInput" type="file" class="!hidden" @change="onFileSelect(CertTypes.key, keyFileInput)" /> |
||||||
|
|
||||||
|
<a-divider /> |
||||||
|
|
||||||
|
<!-- Extra connection parameters --> |
||||||
|
<a-form-item class="mb-2" :label="$t('labels.extraConnectionParameters')" v-bind="validateInfos.extraParameters"> |
||||||
|
<a-card> |
||||||
|
<div v-for="(item, index) of formState.extraParameters" :key="index"> |
||||||
|
<div class="flex py-1 items-center gap-1"> |
||||||
|
<a-input v-model:value="item.key" /> |
||||||
|
|
||||||
|
<span>:</span> |
||||||
|
|
||||||
|
<a-input v-model:value="item.value" /> |
||||||
|
|
||||||
|
<MdiClose :style="{ 'font-size': '1.5em', 'color': 'red' }" @click="removeParam(index)" /> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<a-button type="dashed" class="w-full caption mt-2" @click="addNewParam"> |
||||||
|
<div class="flex items-center justify-center"><MdiPlus /></div> |
||||||
|
</a-button> |
||||||
|
</a-card> |
||||||
|
</a-form-item> |
||||||
|
|
||||||
|
<a-divider /> |
||||||
|
|
||||||
|
<a-form-item :label="$t('labels.inflection.tableName')"> |
||||||
|
<a-select |
||||||
|
v-model:value="formState.inflection.inflectionTable" |
||||||
|
dropdown-class-name="nc-dropdown-inflection-table-name" |
||||||
|
> |
||||||
|
<a-select-option v-for="type in inflectionTypes" :key="type" :value="type">{{ type }}</a-select-option> |
||||||
|
</a-select> |
||||||
|
</a-form-item> |
||||||
|
|
||||||
|
<a-form-item :label="$t('labels.inflection.columnName')"> |
||||||
|
<a-select |
||||||
|
v-model:value="formState.inflection.inflectionColumn" |
||||||
|
dropdown-class-name="nc-dropdown-inflection-column-name" |
||||||
|
> |
||||||
|
<a-select-option v-for="type in inflectionTypes" :key="type" :value="type">{{ type }}</a-select-option> |
||||||
|
</a-select> |
||||||
|
</a-form-item> |
||||||
|
|
||||||
|
<div class="flex justify-end"> |
||||||
|
<a-button class="!shadow-md" @click="handleEditJSON()"> |
||||||
|
<!-- Edit connection JSON --> |
||||||
|
{{ $t('activity.editConnJson') }} |
||||||
|
</a-button> |
||||||
|
</div> |
||||||
|
</a-collapse-panel> |
||||||
|
</a-collapse> |
||||||
|
</template> |
||||||
|
|
||||||
|
<a-form-item class="flex justify-center !mt-5"> |
||||||
|
<div class="flex justify-center gap-2"> |
||||||
|
<a-button type="primary" ghost class="nc-extdb-btn-test-connection" @click="testConnection"> |
||||||
|
{{ $t('activity.testDbConn') }} |
||||||
|
</a-button> |
||||||
|
|
||||||
|
<a-button type="primary" :disabled="!testSuccess" class="nc-extdb-btn-submit !shadow" @click="editBase"> |
||||||
|
{{ $t('general.submit') }} |
||||||
|
</a-button> |
||||||
|
</div> |
||||||
|
</a-form-item> |
||||||
|
<div class="w-full flex items-center mt-2 text-[#e65100]"> |
||||||
|
<MdiWarning class="mr-1" /> |
||||||
|
Please make sure database you are trying to connect is valid! This operation can cause schema loss!! |
||||||
|
</div> |
||||||
|
</a-form> |
||||||
|
|
||||||
|
<a-modal |
||||||
|
v-model:visible="configEditDlg" |
||||||
|
:title="$t('activity.editConnJson')" |
||||||
|
width="600px" |
||||||
|
wrap-class-name="nc-modal-edit-connection-json" |
||||||
|
@ok="handleOk" |
||||||
|
> |
||||||
|
<MonacoEditor v-if="configEditDlg" v-model="customFormState" class="h-[400px] w-full" /> |
||||||
|
</a-modal> |
||||||
|
|
||||||
|
<!-- Use Connection URL --> |
||||||
|
<a-modal |
||||||
|
v-model:visible="importURLDlg" |
||||||
|
:title="$t('activity.useConnectionUrl')" |
||||||
|
width="600px" |
||||||
|
:ok-text="$t('general.ok')" |
||||||
|
:cancel-text="$t('general.cancel')" |
||||||
|
wrap-class-name="nc-modal-connection-url" |
||||||
|
@ok="handleImportURL" |
||||||
|
> |
||||||
|
<a-input v-model:value="importURL" /> |
||||||
|
</a-modal> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
:deep(.ant-collapse-header) { |
||||||
|
@apply !pr-10 !-mt-4 text-right justify-end; |
||||||
|
} |
||||||
|
|
||||||
|
:deep(.ant-collapse-content-box) { |
||||||
|
@apply !px-0; |
||||||
|
} |
||||||
|
|
||||||
|
:deep(.ant-form-item-explain-error) { |
||||||
|
@apply !text-xs; |
||||||
|
} |
||||||
|
|
||||||
|
:deep(.ant-form-item) { |
||||||
|
@apply mb-2; |
||||||
|
} |
||||||
|
|
||||||
|
:deep(.ant-form-item-with-help .ant-form-item-explain) { |
||||||
|
@apply !min-h-0; |
||||||
|
} |
||||||
|
|
||||||
|
.edit-base { |
||||||
|
:deep(.ant-input-affix-wrapper), |
||||||
|
:deep(.ant-input), |
||||||
|
:deep(.ant-select) { |
||||||
|
@apply !appearance-none border-1 border-solid rounded; |
||||||
|
} |
||||||
|
|
||||||
|
:deep(.ant-input-password) { |
||||||
|
input { |
||||||
|
@apply !border-none my-0; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,22 @@ |
|||||||
|
<script setup lang="ts"> |
||||||
|
const { isUIAllowed } = useUIPermission() |
||||||
|
|
||||||
|
const { t } = useI18n() |
||||||
|
|
||||||
|
const toggleDialog = inject(ToggleDialogInj, () => {}) |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<div |
||||||
|
v-if="isUIAllowed('settings')" |
||||||
|
class="flex items-center w-full pl-3 hover:(text-primary bg-primary bg-opacity-5)" |
||||||
|
@click="toggleDialog(true)" |
||||||
|
> |
||||||
|
<div> |
||||||
|
<div class="flex items-center space-x-1"> |
||||||
|
<RiTeamFill class="mr-1 nc-new-base" /> |
||||||
|
<div>{{ t('title.teamAndSettings') }}</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
@ -0,0 +1,31 @@ |
|||||||
|
<script setup lang="ts"> |
||||||
|
import LogosMysqlIcon from '~icons/logos/mysql-icon' |
||||||
|
import LogosPostgresql from '~icons/logos/postgresql' |
||||||
|
import VscodeIconsFileTypeSqlite from '~icons/vscode-icons/file-type-sqlite' |
||||||
|
import SimpleIconsMicrosoftsqlserver from '~icons/simple-icons/microsoftsqlserver' |
||||||
|
import LogosSnowflakeIcon from '~icons/logos/snowflake-icon' |
||||||
|
import MdiDatabaseOutline from '~icons/mdi/database-outline' |
||||||
|
|
||||||
|
const { baseType } = defineProps<{ baseType?: string }>() |
||||||
|
|
||||||
|
const baseIcon = computed(() => { |
||||||
|
switch (baseType) { |
||||||
|
case ClientType.MYSQL: |
||||||
|
return LogosMysqlIcon |
||||||
|
case ClientType.PG: |
||||||
|
return LogosPostgresql |
||||||
|
case ClientType.SQLITE: |
||||||
|
return VscodeIconsFileTypeSqlite |
||||||
|
case ClientType.MSSQL: |
||||||
|
return SimpleIconsMicrosoftsqlserver |
||||||
|
case ClientType.SNOWFLAKE: |
||||||
|
return LogosSnowflakeIcon |
||||||
|
default: |
||||||
|
return MdiDatabaseOutline |
||||||
|
} |
||||||
|
}) |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<component :is="baseIcon" /> |
||||||
|
</template> |
||||||
@ -0,0 +1,58 @@ |
|||||||
|
<script lang="ts" setup> |
||||||
|
import { Icon } from '@iconify/vue' |
||||||
|
import InfiniteLoading from 'v3-infinite-loading' |
||||||
|
import { emojiIcons } from '#imports' |
||||||
|
|
||||||
|
const emit = defineEmits(['selectIcon']) |
||||||
|
let search = $ref('') |
||||||
|
|
||||||
|
// keep a variable to load icons with infinite scroll |
||||||
|
// set initial value to 60 to load first 60 icons (index - `0 - 59`) |
||||||
|
// and next value will be 120 and shows first 120 icons ( index - `0 - 129`) |
||||||
|
let toIndex = $ref(60) |
||||||
|
|
||||||
|
const filteredIcons = computed(() => { |
||||||
|
return emojiIcons.filter((icon) => !search || icon.toLowerCase().includes(search.toLowerCase())).slice(0, toIndex) |
||||||
|
}) |
||||||
|
|
||||||
|
const load = () => { |
||||||
|
// increment `toIndex` to include next set of icons |
||||||
|
toIndex += Math.min(filteredIcons.value.length, toIndex + 60) |
||||||
|
if (toIndex > filteredIcons.value.length) { |
||||||
|
toIndex = filteredIcons.value.length |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const selectIcon = (icon: string) => { |
||||||
|
search = '' |
||||||
|
emit('selectIcon', `emojione:${icon}`) |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<div class="p-1 w-[280px] h-[280px] flex flex-col gap-1 justify-start nc-emoji" data-testid="nc-emoji-container"> |
||||||
|
<div @click.stop> |
||||||
|
<input |
||||||
|
v-model="search" |
||||||
|
data-testid="nc-emoji-filter" |
||||||
|
class="p-1 text-xs border-1 w-full overflow-y-auto" |
||||||
|
placeholder="Search" |
||||||
|
@input="toIndex = 60" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
<div class="flex gap-1 flex-wrap w-full flex-shrink overflow-y-auto scrollbar-thin-dull"> |
||||||
|
<div v-for="icon of filteredIcons" :key="icon" @click="selectIcon(icon)"> |
||||||
|
<span class="cursor-pointer nc-emoji-item"> |
||||||
|
<Icon class="text-xl iconify" :icon="`emojione:${icon}`"></Icon> |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
<InfiniteLoading @infinite="load"><span /></InfiniteLoading> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
.nc-emoji-item { |
||||||
|
@apply hover:(bg-primary bg-opacity-10) active:(bg-primary !bg-opacity-20) rounded-md w-[38px] h-[38px] block flex items-center justify-center; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,22 @@ |
|||||||
|
<script lang="ts" setup> |
||||||
|
import { Icon as IcIcon } from '@iconify/vue' |
||||||
|
import type { TableType } from 'nocodb-sdk' |
||||||
|
|
||||||
|
const { meta: tableMeta } = defineProps<{ |
||||||
|
meta: TableType |
||||||
|
}>() |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<IcIcon |
||||||
|
v-if="tableMeta.meta?.icon" |
||||||
|
:data-testid="`nc-icon-${tableMeta.meta?.icon}`" |
||||||
|
class="text-lg" |
||||||
|
:icon="tableMeta.meta?.icon" |
||||||
|
/> |
||||||
|
|
||||||
|
<MdiEyeCircleOutline v-else-if="tableMeta?.type === 'view'" class="w-5" /> |
||||||
|
<MdiTableLarge v-else class="w-5" /> |
||||||
|
</template> |
||||||
|
|
||||||
|
<style scoped></style> |
||||||
@ -0,0 +1,28 @@ |
|||||||
|
<script lang="ts" setup> |
||||||
|
import { Icon as IcIcon } from '@iconify/vue' |
||||||
|
import type { TableType } from 'nocodb-sdk' |
||||||
|
import { toRef, viewIcons } from '#imports' |
||||||
|
|
||||||
|
const props = defineProps<{ |
||||||
|
meta: TableType |
||||||
|
}>() |
||||||
|
|
||||||
|
const viewMeta = toRef(props, 'meta') |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<IcIcon |
||||||
|
v-if="viewMeta?.meta?.icon" |
||||||
|
:data-testid="`nc-icon-${viewMeta?.meta?.icon}`" |
||||||
|
class="text-[16px]" |
||||||
|
:icon="viewMeta?.meta?.icon" |
||||||
|
/> |
||||||
|
<component |
||||||
|
:is="viewIcons[viewMeta.type]?.icon" |
||||||
|
v-else |
||||||
|
class="nc-view-icon group-hover" |
||||||
|
:style="{ color: viewIcons[viewMeta.type]?.color }" |
||||||
|
/> |
||||||
|
</template> |
||||||
|
|
||||||
|
<style scoped></style> |
||||||
@ -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,38 @@ |
|||||||
|
<script setup lang="ts"> |
||||||
|
import { dateFormats, timeFormats, useVModel } from '#imports' |
||||||
|
|
||||||
|
const props = defineProps<{ |
||||||
|
value: any |
||||||
|
}>() |
||||||
|
|
||||||
|
const emit = defineEmits(['update:value']) |
||||||
|
|
||||||
|
const vModel = useVModel(props, 'value', emit) |
||||||
|
|
||||||
|
if (!vModel.value.meta?.date_format) { |
||||||
|
if (!vModel.value.meta) vModel.value.meta = {} |
||||||
|
vModel.value.meta.date_format = dateFormats[0] |
||||||
|
} |
||||||
|
|
||||||
|
if (!vModel.value.meta?.time_format) { |
||||||
|
if (!vModel.value.meta) vModel.value.meta = {} |
||||||
|
vModel.value.meta.time_format = timeFormats[0] |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<a-form-item label="Date Format"> |
||||||
|
<a-select v-model:value="vModel.meta.date_format" class="nc-date-select" dropdown-class-name="nc-dropdown-date-format"> |
||||||
|
<a-select-option v-for="(format, i) of dateFormats" :key="i" :value="format"> |
||||||
|
{{ format }} |
||||||
|
</a-select-option> |
||||||
|
</a-select> |
||||||
|
</a-form-item> |
||||||
|
<a-form-item label="Time Format"> |
||||||
|
<a-select v-model:value="vModel.meta.time_format" class="nc-time-select" dropdown-class-name="nc-dropdown-time-format"> |
||||||
|
<a-select-option v-for="(format, i) of timeFormats" :key="i" :value="format"> |
||||||
|
{{ format }} |
||||||
|
</a-select-option> |
||||||
|
</a-select> |
||||||
|
</a-form-item> |
||||||
|
</template> |
||||||
@ -0,0 +1,9 @@ |
|||||||
|
const relationNames = { |
||||||
|
mm: 'Many To Many', |
||||||
|
hm: 'Has Many', |
||||||
|
bt: 'Belongs To', |
||||||
|
} as const |
||||||
|
|
||||||
|
export function getRelationName(type: string) { |
||||||
|
return relationNames[type as keyof typeof relationNames] |
||||||
|
} |
||||||
@ -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> |
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue