Skip to content

Commit

Permalink
fix: refactor datetime components to be consistent and use field to d…
Browse files Browse the repository at this point in the history 
…isplay value rather than changing format
  • Loading branch information
@meenahoda
meenahoda authored and Meena Brend committed Sep 5, 2022
1 parent 7734606 commit 7a99134
Show file tree
Hide file tree
Showing 3 changed files with 179 additions and 173 deletions.
219 changes: 119 additions & 100 deletions lib/builders/Input.Date.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,148 +2,167 @@ const ComponentBuilder = require('./../utils/Component-builder')
const applyErrorCheck = require('./../utils/apply-error-check')
const applySpacing = require('./../utils/apply-spacing')
const applySeparator = require('./../utils/apply-separator')
const applyTooltip = require('./../utils/apply-tooltip')
const applyDateTimeConstraints = require('./../utils/apply-date-time-constraints')
const applyTitleLabel = require('./../utils/apply-title-label')

const MASK = 'YYYY-MM-DDTHH:mm:ss.SSSZ'

module.exports = function (definition, options) {
const {
max,
min = '1900/01/01',
// placeholder,
spacing,
separator,
icon,
tooltip,
title,
subtitle,
id,
clearable,
theme
} = definition

const builder = new ComponentBuilder(definition)

if (title) {
builder
.addTag('div')
.content(title)
.addAttribute('class', 'form-label')
}
const div = builder.addTag('div')

if (theme === 'GDS') {
const container = builder
.addTag('div')

const row = container
.addChildTag('div')
.addAttribute('class', 'row')

const dataPath = `${row.getDataPath()}.${id}`
let errorCheck = `!!(${dataPath}_$DATE && ${dataPath}_$DATE.errors && ${dataPath}_$DATE.errors.length)`

if (id) errorCheck += ` || (v$.data.${id} ? v$.data.${id}.$error : false)`

for (const key of ['date', 'month', 'year']) {
const label = { date: 'Day', month: 'Month', year: 'Year' }[key]

row
.addChildTag('div')
.addAttribute('class', 'col')
.addChildTag('q-input')
.addAttribute('label', label)
.addAttribute('dense', null)
.addAttribute('no-error-icon', null)
.addAttribute('type', 'number')
.addAttribute('debounce', '500')
.addAttribute(':model-value', `${dataPath}_$DATE.${key}`)
.addAttribute('@update:model-value', `val => action('UpdateGDSDate', { dataPath: '${dataPath}', value: val, key: '${key}', min: '${min}', max: '${max}' })`)
.addAttribute(':error', errorCheck)
}

if (clearable) {
row
.addChildTag('div')
.addAttribute('class', 'col')
.addChildTag('q-btn')
.addAttribute('@click', `action('ClearGDSDate', '${dataPath}')`)
.addAttribute('size', 'sm')
.addAttribute('flat', null)
.addAttribute('round', null)
.addAttribute('icon', 'clear')
}

let errorMessages = `{{ ${dataPath}_$DATE && ${dataPath}_$DATE.errors && ${dataPath}_$DATE.errors.join(' ') }}`
if (id) {
errorMessages += ` {{ invalidFields && invalidFields['${id}'] && invalidFields['${id}'].messages ? invalidFields['${id}'].messages.join(' ') : '' }}`
}

container
.addChildTag('div')
.addAttribute('class', 'row q-mt-sm text-negative')
.addAttribute('style', 'line-height: 1; font-size: 11px;')
.addAttribute('v-if', errorCheck)
.content(errorMessages)
applyTitleLabel({ source: div, title, icon, tooltip, subtitle })

applySpacing({ spacing, source: container })
applySeparator({ separator, source: container })
// todo: if (tooltip) applyTooltip({ source: container, tooltip })
if (theme === 'GDS') {
gdsTheme(div, definition)

return builder.compile()
}

const input = builder.addTag('q-input')
input
// .addAttribute(':rules', `['date']`)
const field = div
.addChildTag('q-field')
.addAttribute('dense', null)
.addAttribute('readonly', null)
.addAttribute(':model-value', `formatDate(${input.getDataPath()}.${id}, 'DD/MM/YYYY')`)

applyErrorCheck(input, id)
applyErrorCheck(field, id)

prependTemplate(field, definition)
controlTemplate(field, definition)
appendTemplate(field, definition)

applySpacing({ spacing, source: div })
applySeparator({ separator, source: div })

return builder.compile()
}

function gdsTheme (div, definition) {
const {
max,
min = '1900/01/01',
spacing,
separator,
id,
clearable
} = definition

const container = div.addChildTag('div')

const row = container
.addChildTag('div')
.addAttribute('class', 'row')

const dataPath = `${row.getDataPath()}.${id}`
let errorCheck = `!!(${dataPath}_$DATE && ${dataPath}_$DATE.errors && ${dataPath}_$DATE.errors.length)`

if (id) errorCheck += ` || (v$.data.${id} ? v$.data.${id}.$error : false)`

for (const key of ['date', 'month', 'year']) {
const label = { date: 'Day', month: 'Month', year: 'Year' }[key]

const template = input
row
.addChildTag('div')
.addAttribute('class', 'col')
.addChildTag('q-input')
.addAttribute('label', label)
.addAttribute('dense', null)
.addAttribute('no-error-icon', null)
.addAttribute('type', 'number')
.addAttribute('debounce', '500')
.addAttribute(':model-value', `${dataPath}_$DATE.${key}`)
.addAttribute('@update:model-value', `val => action('UpdateGDSDate', { dataPath: '${dataPath}', value: val, key: '${key}', min: '${min}', max: '${max}' })`)
.addAttribute(':error', errorCheck)
}

if (clearable) {
row
.addChildTag('div')
.addAttribute('class', 'col')
.addChildTag('q-btn')
.addAttribute('@click', `action('ClearGDSDate', '${dataPath}')`)
.addAttribute('size', 'sm')
.addAttribute('flat', null)
.addAttribute('round', null)
.addAttribute('icon', 'clear')
}

let errorMessages = `{{ ${dataPath}_$DATE && ${dataPath}_$DATE.errors && ${dataPath}_$DATE.errors.join(' ') }}`
if (id) {
errorMessages += ` {{ invalidFields && invalidFields['${id}'] && invalidFields['${id}'].messages ? invalidFields['${id}'].messages.join(' ') : '' }}`
}

container
.addChildTag('div')
.addAttribute('class', 'row q-mt-sm text-negative')
.addAttribute('style', 'line-height: 1; font-size: 11px;')
.addAttribute('v-if', errorCheck)
.content(errorMessages)

applySpacing({ spacing, source: container })
applySeparator({ separator, source: container })
}

function prependTemplate (field, definition) {
const { min, max } = definition

const template = field
.addChildTag('template')
.addAttribute('v-slot:prepend', null)

const iconEl = template
const icon = template
.addChildTag('q-icon')
.addAttribute('name', icon || 'event')
.addAttribute('name', 'event')
.addAttribute('class', 'cursor-pointer')

const popUpProxy = iconEl
const popupProxy = icon
.addChildTag('q-popup-proxy')
.addAttribute('ref', 'qDateProxy')
.addAttribute('transition-show', 'scale')
.addAttribute('transition-hide', 'scale')

const dateEl = popUpProxy
const dateEl = popupProxy
.addChildTag('q-date')
.addAttribute('@update:model-value', '() => $refs.qDateProxy.hide()')
.addAttribute('mask', 'YYYY-MM-DDTHH:mm:ss.SSSZ')
// DD-MM-YYYY - display
// YYYY-MM-DDTHH:mm:ss.SSSZ - underlying model
.addAttribute('mask', MASK)

dateEl.bindToModel(definition)

// if (placeholder) input.addAttribute('placeholder', placeholder) // TODO: test
applyDateTimeConstraints(dateEl, min, max)
}

if (clearable) {
input
.addChildTag('template')
.addAttribute('v-slot:append', null)
.addChildTag('q-icon')
.addAttribute('name', 'clear')
.addAttribute('class', 'cursor-pointer')
.addAttribute('@click', `action('SetNullAtDataPath', { dataPath: '${input.getDataPath() + '.' + id}' })`)
// .addAttribute('@click', `setNullAtDataPath('${input.getDataPath() + '.' + id}')`)
// .addAttribute('@click', `action('ClearDate', ${inspect({ dataPath: input.getDataPath() + '.' + id })} )`)
}
function controlTemplate (field, definition) {
const { id } = definition

applySpacing({ spacing, source: input })
applySeparator({ separator, source: input })
field
.addChildTag('template')
.addAttribute('v-slot:control', null)
.content(`{{ formatDate(${field.getDataPath()}.${id}, 'DD/MM/YYYY') }}`)
}

if (tooltip) {
applyTooltip({ source: input, tooltip })
function appendTemplate (field, definition) {
const { clearable, id } = definition

if (clearable !== true) {
return
}

applyDateTimeConstraints(dateEl, min, max)
const template = field
.addChildTag('template')
.addAttribute('v-slot:append', null)

return builder.compile()
template
.addChildTag('q-icon')
.addAttribute('name', 'clear')
.addAttribute('class', 'cursor-pointer')
.addAttribute('@click', `action('SetNullAtDataPath', { dataPath: '${field.getDataPath() + '.' + id}' })`)
}
Loading

0 comments on commit 7a99134

Please sign in to comment.