Browse Source

Merge pull request #2971 from nocodb/refactor/gui-v2-improved-email-json-phonenumber-column

vue3: Improved email, json, phonenumber, url, year, time column
pull/2982/head
աɨռɢӄաօռɢ 2 years ago committed by GitHub
parent
commit
33acae955e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 12
      packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
  2. 10
      packages/nc-gui-v2/components/smartsheet-header/CellIcon.vue
  3. 3
      packages/nc-gui-v2/utils/columnUtils.ts

12
packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue

@ -1,4 +1,5 @@
<script lang="ts" setup> <script lang="ts" setup>
import { UITypes } from 'nocodb-sdk'
import { computed, inject, useColumnCreateStoreOrThrow, useMetas, watchEffect } from '#imports' import { computed, inject, useColumnCreateStoreOrThrow, useMetas, watchEffect } from '#imports'
import { MetaInj } from '~/context' import { MetaInj } from '~/context'
import { uiTypes } from '~/utils/columnUtils' import { uiTypes } from '~/utils/columnUtils'
@ -22,6 +23,8 @@ const {
isEdit, isEdit,
} = useColumnCreateStoreOrThrow() } = useColumnCreateStoreOrThrow()
const columnToValidate = [UITypes.Email, UITypes.URL, UITypes.PhoneNumber]
const uiTypesOptions = computed<typeof uiTypes>(() => { const uiTypesOptions = computed<typeof uiTypes>(() => {
return [ return [
...uiTypes.filter((t) => !isEdit || !t.virtual), ...uiTypes.filter((t) => !isEdit || !t.virtual),
@ -94,6 +97,15 @@ watchEffect(() => {
</div> </div>
</div> </div>
<div class="overflow-hidden" :class="advancedOptions ? 'h-min' : 'h-0'"> <div class="overflow-hidden" :class="advancedOptions ? 'h-min' : 'h-0'">
<a-checkbox
v-if="formState.meta && columnToValidate.includes(formState.uidt)"
v-model:checked="formState.meta.validate"
class="ml-1 mb-1"
>
<span class="text-xs text-gray-600">
{{ `Accept only valid ${formState.uidt}` }}
</span>
</a-checkbox>
<SmartsheetColumnAdvancedOptions /> <SmartsheetColumnAdvancedOptions />
</div> </div>
<a-form-item> <a-form-item>

10
packages/nc-gui-v2/components/smartsheet-header/CellIcon.vue

@ -5,10 +5,13 @@ import FilePhoneIcon from '~icons/mdi/file-phone'
import { useColumn } from '#imports' import { useColumn } from '#imports'
import KeyIcon from '~icons/mdi/key-variant' import KeyIcon from '~icons/mdi/key-variant'
import JSONIcon from '~icons/mdi/code-json' import JSONIcon from '~icons/mdi/code-json'
import ClockIcon from '~icons/mdi/clock-time-five'
// import FKIcon from '~icons/mdi/link-variant' // import FKIcon from '~icons/mdi/link-variant'
import WebIcon from '~icons/mdi/web'
import TextAreaIcon from '~icons/mdi/card-text-outline' import TextAreaIcon from '~icons/mdi/card-text-outline'
import StringIcon from '~icons/mdi/alpha-a-box-outline' import StringIcon from '~icons/mdi/alpha-a-box-outline'
import BooleanIcon from '~icons/mdi/check-box-outline' import BooleanIcon from '~icons/mdi/check-box-outline'
import YearIcon from '~icons/mdi/calendar'
import SingleSelectIcon from '~icons/mdi/radiobox-marked' import SingleSelectIcon from '~icons/mdi/radiobox-marked'
import MultiSelectIcon from '~icons/mdi/checkbox-multiple-marked' import MultiSelectIcon from '~icons/mdi/checkbox-multiple-marked'
import DatetimeIcon from '~icons/mdi/calendar-clock' import DatetimeIcon from '~icons/mdi/calendar-clock'
@ -17,7 +20,6 @@ import RatingIcon from '~icons/mdi/star'
import GenericIcon from '~icons/mdi/square-rounded' import GenericIcon from '~icons/mdi/square-rounded'
import NumericIcon from '~icons/mdi/numeric' import NumericIcon from '~icons/mdi/numeric'
import AttachmentIcon from '~icons/mdi/image-multiple-outline' import AttachmentIcon from '~icons/mdi/image-multiple-outline'
import URLIcon from '~icons/mdi/link'
import EmailIcon from '~icons/mdi/email' import EmailIcon from '~icons/mdi/email'
import CurrencyIcon from '~icons/mdi/currency-usd-circle-outline' import CurrencyIcon from '~icons/mdi/currency-usd-circle-outline'
import PercentIcon from '~icons/mdi/percent-outline' import PercentIcon from '~icons/mdi/percent-outline'
@ -48,6 +50,10 @@ const icon = computed(() => {
return TextAreaIcon return TextAreaIcon
} else if (additionalColMeta.isEmail) { } else if (additionalColMeta.isEmail) {
return EmailIcon return EmailIcon
} else if (additionalColMeta.isYear) {
return YearIcon
} else if (additionalColMeta.isTime) {
return ClockIcon
} else if (additionalColMeta.isRating) { } else if (additionalColMeta.isRating) {
return RatingIcon return RatingIcon
} else if (additionalColMeta.isAttachment) { } else if (additionalColMeta.isAttachment) {
@ -61,7 +67,7 @@ const icon = computed(() => {
// return FKIcon // return FKIcon
// } // }
else if (additionalColMeta.isURL) { else if (additionalColMeta.isURL) {
return URLIcon return WebIcon
} else if (additionalColMeta.isCurrency) { } else if (additionalColMeta.isCurrency) {
return CurrencyIcon return CurrencyIcon
} else if (additionalColMeta.isPercent) { } else if (additionalColMeta.isPercent) {

3
packages/nc-gui-v2/utils/columnUtils.ts

@ -3,6 +3,7 @@ import LinkVariant from '~icons/mdi/link-variant'
import TableColumnPlusBefore from '~icons/mdi/table-column-plus-before' import TableColumnPlusBefore from '~icons/mdi/table-column-plus-before'
import FormatColorText from '~icons/mdi/format-color-text' import FormatColorText from '~icons/mdi/format-color-text'
import TextSubject from '~icons/mdi/text-subject' import TextSubject from '~icons/mdi/text-subject'
import JSONIcon from '~icons/mdi/code-json'
import Attachment from '~icons/mdi/attachment' import Attachment from '~icons/mdi/attachment'
import CheckboxMarkedOutline from '~icons/mdi/checkbox-marked-outline' import CheckboxMarkedOutline from '~icons/mdi/checkbox-marked-outline'
import FormatListBulletedSquare from '~icons/mdi/format-list-bulleted-square' import FormatListBulletedSquare from '~icons/mdi/format-list-bulleted-square'
@ -135,7 +136,7 @@ const uiTypes = [
}, },
{ {
name: UITypes.JSON, name: UITypes.JSON,
icon: 'mdi-code-json', icon: JSONIcon,
}, },
{ {
name: UITypes.SpecificDBType, name: UITypes.SpecificDBType,

Loading…
Cancel
Save