mirror of https://github.com/nocodb/nocodb
204 changed files with 5362 additions and 3756 deletions
@ -0,0 +1,194 @@ |
|||||||
|
<script setup lang="ts"> |
||||||
|
import type { ColumnType } from 'nocodb-sdk' |
||||||
|
import { |
||||||
|
ColumnInj, |
||||||
|
EditModeInj, |
||||||
|
ReadonlyInj, |
||||||
|
computed, |
||||||
|
isBoolean, |
||||||
|
isCurrency, |
||||||
|
isDate, |
||||||
|
isDateTime, |
||||||
|
isDecimal, |
||||||
|
isDuration, |
||||||
|
isFloat, |
||||||
|
isInt, |
||||||
|
isMultiSelect, |
||||||
|
isPercent, |
||||||
|
isRating, |
||||||
|
isSingleSelect, |
||||||
|
isTextArea, |
||||||
|
isTime, |
||||||
|
isYear, |
||||||
|
provide, |
||||||
|
ref, |
||||||
|
toRef, |
||||||
|
useProject, |
||||||
|
} from '#imports' |
||||||
|
import type { Filter } from '~/lib' |
||||||
|
import SingleSelect from '~/components/cell/SingleSelect.vue' |
||||||
|
import MultiSelect from '~/components/cell/MultiSelect.vue' |
||||||
|
import DatePicker from '~/components/cell/DatePicker.vue' |
||||||
|
import YearPicker from '~/components/cell/YearPicker.vue' |
||||||
|
import DateTimePicker from '~/components/cell/DateTimePicker.vue' |
||||||
|
import TimePicker from '~/components/cell/TimePicker.vue' |
||||||
|
import Rating from '~/components/cell/Rating.vue' |
||||||
|
import Duration from '~/components/cell/Duration.vue' |
||||||
|
import Percent from '~/components/cell/Percent.vue' |
||||||
|
import Currency from '~/components/cell/Currency.vue' |
||||||
|
import Decimal from '~/components/cell/Decimal.vue' |
||||||
|
import Integer from '~/components/cell/Integer.vue' |
||||||
|
import Float from '~/components/cell/Float.vue' |
||||||
|
import Text from '~/components/cell/Text.vue' |
||||||
|
|
||||||
|
interface Props { |
||||||
|
column: ColumnType |
||||||
|
filter: Filter |
||||||
|
} |
||||||
|
|
||||||
|
interface Emits { |
||||||
|
(event: 'updateFilterValue', model: any): void |
||||||
|
} |
||||||
|
|
||||||
|
const props = defineProps<Props>() |
||||||
|
|
||||||
|
const emit = defineEmits<Emits>() |
||||||
|
|
||||||
|
const column = toRef(props, 'column') |
||||||
|
|
||||||
|
const editEnabled = ref(true) |
||||||
|
|
||||||
|
provide(ColumnInj, column) |
||||||
|
|
||||||
|
provide(EditModeInj, readonly(editEnabled)) |
||||||
|
|
||||||
|
provide(ReadonlyInj, ref(false)) |
||||||
|
|
||||||
|
const checkTypeFunctions = { |
||||||
|
isSingleSelect, |
||||||
|
isMultiSelect, |
||||||
|
isDate, |
||||||
|
isYear, |
||||||
|
isDateTime, |
||||||
|
isTime, |
||||||
|
isRating, |
||||||
|
isDuration, |
||||||
|
isPercent, |
||||||
|
isCurrency, |
||||||
|
isDecimal, |
||||||
|
isInt, |
||||||
|
isFloat, |
||||||
|
isTextArea, |
||||||
|
} |
||||||
|
|
||||||
|
type FilterType = keyof typeof checkTypeFunctions |
||||||
|
|
||||||
|
const { sqlUi } = $(useProject()) |
||||||
|
|
||||||
|
const abstractType = $computed(() => (column.value?.dt && sqlUi ? sqlUi.getAbstractType(column.value) : null)) |
||||||
|
|
||||||
|
const checkType = (filterType: FilterType) => { |
||||||
|
const checkTypeFunction = checkTypeFunctions[filterType] |
||||||
|
|
||||||
|
if (!column.value || !checkTypeFunction) { |
||||||
|
return false |
||||||
|
} |
||||||
|
|
||||||
|
return checkTypeFunction(column.value, abstractType) |
||||||
|
} |
||||||
|
|
||||||
|
const filterInput = computed({ |
||||||
|
get: () => { |
||||||
|
return props.filter.value |
||||||
|
}, |
||||||
|
set: (value) => { |
||||||
|
emit('updateFilterValue', value) |
||||||
|
}, |
||||||
|
}) |
||||||
|
|
||||||
|
const booleanOptions = [ |
||||||
|
{ value: true, label: 'true' }, |
||||||
|
{ value: false, label: 'false' }, |
||||||
|
{ value: null, label: 'unset' }, |
||||||
|
] |
||||||
|
|
||||||
|
const componentMap: Partial<Record<FilterType, any>> = $computed(() => { |
||||||
|
return { |
||||||
|
// use MultiSelect for SingleSelect columns for anyof / nanyof filters |
||||||
|
isSingleSelect: ['anyof', 'nanyof'].includes(props.filter.comparison_op!) ? MultiSelect : SingleSelect, |
||||||
|
isMultiSelect: MultiSelect, |
||||||
|
isDate: DatePicker, |
||||||
|
isYear: YearPicker, |
||||||
|
isDateTime: DateTimePicker, |
||||||
|
isTime: TimePicker, |
||||||
|
isRating: Rating, |
||||||
|
isDuration: Duration, |
||||||
|
isPercent: Percent, |
||||||
|
isCurrency: Currency, |
||||||
|
isDecimal: Decimal, |
||||||
|
isInt: Integer, |
||||||
|
isFloat: Float, |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
const filterType = $computed(() => { |
||||||
|
return Object.keys(componentMap).find((key) => checkType(key as FilterType)) |
||||||
|
}) |
||||||
|
|
||||||
|
const componentProps = $computed(() => { |
||||||
|
switch (filterType) { |
||||||
|
case 'isSingleSelect': |
||||||
|
case 'isMultiSelect': { |
||||||
|
return { disableOptionCreation: true } |
||||||
|
} |
||||||
|
case 'isPercent': |
||||||
|
case 'isDecimal': |
||||||
|
case 'isFloat': |
||||||
|
case 'isInt': { |
||||||
|
return { class: 'h-32px' } |
||||||
|
} |
||||||
|
case 'isDuration': { |
||||||
|
return { showValidationError: false } |
||||||
|
} |
||||||
|
default: { |
||||||
|
return {} |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
const hasExtraPadding = $computed(() => { |
||||||
|
return ( |
||||||
|
column.value && |
||||||
|
(isInt(column.value, abstractType) || |
||||||
|
isDate(column.value, abstractType) || |
||||||
|
isDateTime(column.value, abstractType) || |
||||||
|
isTime(column.value, abstractType) || |
||||||
|
isYear(column.value, abstractType)) |
||||||
|
) |
||||||
|
}) |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<a-select |
||||||
|
v-if="column && isBoolean(column, abstractType)" |
||||||
|
v-model:value="filterInput" |
||||||
|
:disabled="filter.readOnly" |
||||||
|
:options="booleanOptions" |
||||||
|
/> |
||||||
|
<div |
||||||
|
v-else |
||||||
|
class="bg-white border-1 flex min-w-120px max-w-170px min-h-32px h-full" |
||||||
|
:class="{ 'px-2': hasExtraPadding }" |
||||||
|
@mouseup.stop |
||||||
|
> |
||||||
|
<component |
||||||
|
:is="filterType ? componentMap[filterType] : Text" |
||||||
|
v-model="filterInput" |
||||||
|
:disabled="filter.readOnly" |
||||||
|
placeholder="Enter a value" |
||||||
|
:column="column" |
||||||
|
class="flex" |
||||||
|
v-bind="componentProps" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
</template> |
File diff suppressed because it is too large
Load Diff
@ -1,22 +0,0 @@ |
|||||||
--- |
|
||||||
title: 'Account Settings > App Store' |
|
||||||
description: 'NocoDB provides different integrations in three main categories in App Store' |
|
||||||
position: 590 |
|
||||||
category: 'Product' |
|
||||||
menuTitle: 'Account Settings > App Store' |
|
||||||
--- |
|
||||||
|
|
||||||
## Overview |
|
||||||
|
|
||||||
To access it, click the down arrow button next to Project Name on the top left side, then select `Account Settings` and clicking `App Store`. |
|
||||||
|
|
||||||
<img width="304" alt="Screenshot 2023-02-07 at 5 14 11 PM" src="https://user-images.githubusercontent.com/43586156/217380060-bc654146-233c-4f8a-9a7d-bb0d30a2eac9.png"> | <img width="200" alt="Screenshot 2023-02-07 at 5 14 30 PM" src="https://user-images.githubusercontent.com/43586156/217380195-dfe5de7f-0ad9-4af8-ba24-33805f72c32d.png"> |
|
||||||
|--|--| |
|
||||||
|
|
||||||
We provide different integrations in three main categories. |
|
||||||
|
|
||||||
| Category | App Name | |
|
||||||
|---|---| |
|
||||||
| Chat | Microsoft Teams <br/> Discord <br/> Twilio <br/> Whatsapp Twilio<br/> Mattermost<br/> Slack | |
|
||||||
| Email | SMTP<br/> MailerSend<br/> AWS SES | |
|
||||||
| Storage | AWS S3 <br/> Minio <br/> Google Cloud Storage <br/> Spaces <br/> Backblaze B2 <br/> Vultr Object Storage <br/> OvhCloud Object Storage <br/> Linode Object Storage <br/> UpCloud Object Storage <br/> Scaleway Object Storage | |
|
@ -1,40 +1,42 @@ |
|||||||
--- |
--- |
||||||
title: "Primary Value" |
title: "Display Value" |
||||||
description: "Understanding Primary Value in NocoDB!" |
description: "Understanding Display Value in NocoDB!" |
||||||
position: 580 |
position: 580 |
||||||
category: "Product" |
category: "Product" |
||||||
menuTitle: "Primary Value" |
menuTitle: "Display Value" |
||||||
--- |
--- |
||||||
|
|
||||||
## What is a Primary Value ? |
## What is a Display Value ? |
||||||
- Primary value as the name stands is the primary or main value within a row of a table that you generally associate that row with. |
|
||||||
|
- Display Value as the name stands is the primary or main value within a row of a table that you generally associate that row with. |
||||||
- It should be usually associated with a column which is uniquely identifiable. However, this uniqueness is not enforced at the database level. |
- It should be usually associated with a column which is uniquely identifiable. However, this uniqueness is not enforced at the database level. |
||||||
|
- Before v0.105.0, Display Value was known as Primary Value. |
||||||
|
|
||||||
## What is the use of Primary Value ? |
## What is the use of Display Value ? |
||||||
- Within a spreadsheet, primary value are always highlighted so that it is easier to recognise what row we are in. |
- Within a spreadsheet, Display Value are always highlighted so that it is easier to recognise what row we are in. |
||||||
- And when LinkToAnotherRecord is created between two tables - it is the primary value that appears in LinkToAnotheRecord column. |
- And when LinkToAnotherRecord is created between two tables - it is the Display Value that appears in LinkToAnotheRecord column. |
||||||
|
|
||||||
#### Example : Primary Value highlighted in Actor table |
#### Example : Display Value highlighted in Actor table |
||||||
<img width="646" alt="image" src="https://user-images.githubusercontent.com/35857179/189114321-58ebaa16-20e2-4615-abda-39417a5df5bf.png"> |
<img width="646" alt="image" src="https://user-images.githubusercontent.com/35857179/189114321-58ebaa16-20e2-4615-abda-39417a5df5bf.png"> |
||||||
|
|
||||||
#### Example : Primary Value highlighted in Film table |
#### Example : Display Value highlighted in Film table |
||||||
<img width="643" alt="image" src="https://user-images.githubusercontent.com/35857179/189114462-a7fef0e2-f9ac-4943-98d5-fee9f60a4ab5.png"> |
<img width="643" alt="image" src="https://user-images.githubusercontent.com/35857179/189114462-a7fef0e2-f9ac-4943-98d5-fee9f60a4ab5.png"> |
||||||
|
|
||||||
#### Example : Primary Value associated when LinkToAnotherRecord is created |
#### Example : Display Value associated when LinkToAnotherRecord is created |
||||||
<img width="311" alt="image" src="https://user-images.githubusercontent.com/35857179/189114548-193acc4d-f714-4204-a560-97668db7884c.png"> |
<img width="311" alt="image" src="https://user-images.githubusercontent.com/35857179/189114548-193acc4d-f714-4204-a560-97668db7884c.png"> |
||||||
|
|
||||||
## How to set Primary Value ? |
## How to set Display Value ? |
||||||
|
|
||||||
Click down arrow in the target column. Click `Set as Primary Value`. |
Click down arrow in the target column. Click `Set as Display Value`. |
||||||
|
|
||||||
<img width="251" alt="image" src="https://user-images.githubusercontent.com/35857179/189114857-b452aa6b-5cdb-4a74-9980-cb839d7d15fd.png"> |
![image](https://user-images.githubusercontent.com/35857179/219339727-dee5fdea-6db7-4a06-9e48-df7113cc63b1.png) |
||||||
|
|
||||||
|
|
||||||
## How is Primary Value identfied for existing database tables ? |
## How is Display Value identfied for existing database tables ? |
||||||
|
|
||||||
- It is usually the first column after the primary key which is not a number. |
- It is usually the first column after the primary key which is not a number. |
||||||
- If there is no column which is not a number then the column adjacent to primary key is chosen. |
- If there is no column which is not a number then the column adjacent to primary key is chosen. |
||||||
|
|
||||||
## Can I change the Primary Value to another column within tables ? |
## Can I change the Display Value to another column within tables ? |
||||||
|
|
||||||
- Yes, you can use the same way mentioned above to set Primary Value. |
- Yes, you can use the same way mentioned above to set Display Value. |
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue