mirror of https://github.com/nocodb/nocodb
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
60 lines
1.7 KiB
60 lines
1.7 KiB
<script lang="ts" setup> |
|
const { pageMode, IntegrationsPageMode, activeIntegration, categories, activeCategory } = useIntegrationStore() |
|
</script> |
|
|
|
<template> |
|
<div class="flex flex-col nc-workspace-settings-integrations-new"> |
|
<div class="flex flex-col"> |
|
<div class="flex items-center p-6"> |
|
<div class="cursor-pointer text-primary mr-4" @click="pageMode = IntegrationsPageMode.LIST"> |
|
<GeneralIcon icon="arrowLeft" /> |
|
Back |
|
</div> |
|
<WorkspaceIntegrationsIcon :integration-type="activeIntegration.type" size="sm" /> |
|
<div class="text-md font-bold">New {{ activeIntegration.title }}</div> |
|
</div> |
|
<div class="border-b-1 border-gray-200 mx-4"></div> |
|
</div> |
|
<div class="panel-view"> |
|
<div class="panel-indices"> |
|
<div v-for="ct of categories" :key="ct.label" class="panel-index"> |
|
<div class="flex items-center gap-2" :class="{ 'text-primary': activeCategory?.label === ct.label }"> |
|
<div class="logo-wrapper"> |
|
<GeneralIcon :icon="ct.icon" /> |
|
</div> |
|
<div class="text-sm">{{ ct.label }}</div> |
|
</div> |
|
</div> |
|
</div> |
|
<div v-if="activeIntegration" class="panel"> |
|
<WorkspaceIntegrationsFormsEditDatabase /> |
|
</div> |
|
</div> |
|
</div> |
|
</template> |
|
|
|
<style lang="scss" scoped> |
|
.logo-wrapper { |
|
@apply bg-gray-200 p-2 mr-2 rounded-lg flex items-center justify-center; |
|
width: 32px; |
|
height: 32px; |
|
font-size: 2rem; |
|
} |
|
|
|
.panel-view { |
|
@apply flex gap-2 mx-4 mt-6; |
|
max-width: 1024px; |
|
|
|
.panel { |
|
@apply w-3/4; |
|
} |
|
|
|
.panel-indices { |
|
@apply mr-4 flex flex-col cursor-default; |
|
|
|
.panel-index { |
|
@apply p-2 rounded-lg; |
|
} |
|
} |
|
} |
|
</style>
|
|
|