@operato/form 2.0.0-alpha.152 → 2.0.0-alpha.153

package/src/components/ox-search-form.ts

@@ -140,7 +140,7 @@ export class OxSearchForm extends LitElement {
   }
 
   renderSelect(field: SearchFormField) {
-    var { options } = field
+    var { id, options, readonly, label, name, value, placeholder, hidden } = field
 
     if (typeof options === 'function') {
       options = (options as Function).call(field, this)
@@ -155,12 +155,13 @@ export class OxSearchForm extends LitElement {
     }
 
     return html`
-      <label ?hidden=${field.hidden}>${field.label || field.name || field.id}</label>
+      <label ?hidden=${hidden}>${label || name || id}</label>
       <select
-        .value=${field.value}
-        name=${ifDefined(field.name)}
-        placeholder=${ifDefined(field.placeholder)}
-        ?hidden=${field.hidden}
+        .value=${value}
+        name=${ifDefined(name)}
+        placeholder=${ifDefined(placeholder)}
+        ?hidden=${hidden}
+        ?readonly=${readonly}
       >
         ${optionsTemplate!}
       </select>
@@ -175,6 +176,7 @@ export class OxSearchForm extends LitElement {
         name=${ifDefined(field.name)}
         ?checked=${field.value}
         ?hidden=${field.hidden}
+        ?readonly=${field.readonly}
         @click=${(e: MouseEvent) => {
           const checkbox = e.currentTarget as HTMLInputElement & { _value: any }
           if (checkbox.hasAttribute('indeterminate')) {
@@ -211,6 +213,7 @@ export class OxSearchForm extends LitElement {
         .field=${field.field}
         .queryName=${field.queryName}
         ?hidden=${field.hidden}
+        ?readonly=${field.readonly}
         ?autofocus=${!field.hidden && 0 === autofocusConsumed}
       />
     `
@@ -225,6 +228,7 @@ export class OxSearchForm extends LitElement {
         name=${ifDefined(field.name)}
         placeholder=${ifDefined(field.placeholder)}
         ?hidden=${field.hidden}
+        ?readonly=${field.readonly}
         ?autofocus=${!field.hidden && 0 === autofocusConsumed++}
       />
     `
@@ -282,6 +286,10 @@ export class OxSearchForm extends LitElement {
     }
   }
 
+  getFieldByName(name: string) {
+    return this.renderRoot.querySelector(`[name=${name}]`)
+  }
+
   _checkInputValidity() {
     const names = this.fields?.map(i => i.name) || []
     const result = names.every(name => {
@@ -417,10 +425,33 @@ export class OxSearchForm extends LitElement {
     return data
   }
 
-  reset() {
+  reset(value?: string[] | { [field: string]: any }) {
     this.form
       .then((form: HTMLFormElement) => {
-        form.reset()
+        if (value) {
+          if (value instanceof Array) {
+            value
+              .filter(item => typeof item == 'string')
+              .forEach(item => {
+                const field = this.getFieldByName(item)
+                if (field) {
+                  ;(field as HTMLInputElement).value = ''
+                }
+              })
+          } else {
+            const keys = Object.keys(value)
+            keys
+              .filter(key => typeof key == 'string')
+              .forEach(key => {
+                const field = this.getFieldByName(key)
+                if (field) {
+                  ;(field as HTMLInputElement).value = value[key]
+                }
+              })
+          }
+        } else {
+          form.reset()
+        }
       })
       .catch((error: any) => {
         console.error('Error resetting the form:', error)

package/src/filters/filter-checkbox.ts

@@ -5,7 +5,7 @@ import { html } from 'lit-html'
 import { FilterSelectRenderer } from '../types.js'
 
 export const FilterCheckbox: FilterSelectRenderer = (filter, value, owner) => {
-  const { name, label } = filter
+  const { name, label, readonly } = filter
 
   return html`
     <ox-checkbox
@@ -27,6 +27,7 @@ export const FilterCheckbox: FilterSelectRenderer = (filter, value, owner) => {
           })
         )
       }}
+      ?readonly=${readonly}
       ><label><span>${label}</span></label></ox-checkbox
     >
   `

package/src/filters/filter-input-barcode.ts

@@ -5,7 +5,7 @@ import { html } from 'lit-html'
 import { FilterSelectRenderer } from '../types.js'
 
 export const FilterInputBarcode: FilterSelectRenderer = (filter, value, owner) => {
-  const { name, type, options } = filter
+  const { name, readonly, options } = filter
   const { englishOnly, selectAfterChange } = (options || {}) as { [key: string]: any }
 
   return html`
@@ -29,6 +29,7 @@ export const FilterInputBarcode: FilterSelectRenderer = (filter, value, owner) =
         )
       }}
       filter-input
-    />
+      ?readonly=${readonly}
+    ></ox-input-barcode>
   `
 }

package/src/filters/filter-input.ts

@@ -3,7 +3,7 @@ import { html } from 'lit-html'
 import { FilterSelectRenderer } from '../types.js'
 
 export const FilterInput: FilterSelectRenderer = (filter, value, owner) => {
-  const { name, type } = filter
+  const { name, type, readonly } = filter
 
   return html`
     <input
@@ -24,6 +24,7 @@ export const FilterInput: FilterSelectRenderer = (filter, value, owner) => {
           })
         )
       }}
+      ?readonly=${readonly}
     />
   `
 }

package/src/filters/filter-range-date.ts

@@ -15,7 +15,7 @@ function formatDate(type: string, date: Date) {
 }
 
 export const FilterRangeDate: FilterSelectRenderer = (filter, value, owner) => {
-  var { name, type, operator } = filter
+  var { name, type, operator, readonly } = filter
   var [from, to] = value instanceof Array ? value : []
 
   if (type === 'datetime') {
@@ -49,6 +49,7 @@ export const FilterRangeDate: FilterSelectRenderer = (filter, value, owner) => {
           })
         )
       }}
+      ?readonly=${readonly}
     />
     ~
     <input
@@ -74,6 +75,7 @@ export const FilterRangeDate: FilterSelectRenderer = (filter, value, owner) => {
           })
         )
       }}
+      ?readonly=${readonly}
     />
   `
 }

package/src/filters/filter-range-number.ts

@@ -3,7 +3,7 @@ import { html } from 'lit-html'
 import { FilterSelectRenderer } from '../types.js'
 
 export const FilterRangeNumber: FilterSelectRenderer = (filter, value, owner) => {
-  const { name, operator } = filter
+  const { name, operator, readonly } = filter
   const [from, to] = value instanceof Array ? value : []
 
   return html`
@@ -31,6 +31,7 @@ export const FilterRangeNumber: FilterSelectRenderer = (filter, value, owner) =>
           })
         )
       }}
+      ?readonly=${readonly}
     />
     ~
     <input
@@ -57,6 +58,7 @@ export const FilterRangeNumber: FilterSelectRenderer = (filter, value, owner) =>
           })
         )
       }}
+      ?readonly=${readonly}
     />
   `
 }

package/src/filters/filter-styles.ts

@@ -118,5 +118,9 @@ export const FilterStyles = css`
     input {
       flex: 1;
     }
+
+    [readonly] {
+      background-color: #f0f0f0;
+    }
   }
 `

package/src/filters/ox-filters-form-base.ts

@@ -138,7 +138,7 @@ export class OxFiltersFormBase extends LitElement {
         ${(this.personalFilters || [])
           .filter(filter => !filter.hidden)
           .map((filter: FilterConfig) => {
-            const { name, label, type, operator, value: defaultValue } = filter
+            const { name, label, type, operator, readonly, value: defaultValue } = filter
             const idx = operator === 'between' ? 1 : 0
             const renderer = getFilterRenderer(
               operator === 'like' || operator === 'i_like' || operator === 'i_nlike' || operator === 'nlike'
@@ -154,7 +154,12 @@ export class OxFiltersFormBase extends LitElement {
             }
 
             return type === 'search'
-              ? html`<ox-input-search name="search" .value=${value} ?autofocus=${this.autofocus}></ox-input-search>`
+              ? html`<ox-input-search
+                  name="search"
+                  .value=${value}
+                  ?autofocus=${this.autofocus}
+                  ?readonly=${readonly}
+                ></ox-input-search>`
               : type === 'boolean' || type === 'checkbox'
                 ? renderer(filter, value, this)
                 : type !== 'select'
@@ -172,7 +177,7 @@ export class OxFiltersFormBase extends LitElement {
   }
 
   renderSelect(filter: FilterConfig, value: any, renderer: FilterSelectRenderer) {
-    const { name, label, operator, value: defaultValue } = filter
+    const { name, label, operator, readonly, value: defaultValue } = filter
 
     return operator === 'in'
       ? html`
@@ -190,6 +195,7 @@ export class OxFiltersFormBase extends LitElement {
                   }
                 })
               )}
+            ?readonly=${readonly}
           >
             <ox-popup-list multiple attr-selected="checked" with-search>
               ${renderer(filter, value, this)}
@@ -211,6 +217,7 @@ export class OxFiltersFormBase extends LitElement {
                   }
                 })
               )}
+            ?readonly=${readonly}
           >
             <ox-popup-list with-search> ${renderer(filter, value, this)} </ox-popup-list>
           </ox-select>
@@ -394,10 +401,33 @@ export class OxFiltersFormBase extends LitElement {
     return filters
   }
 
-  reset() {
+  reset(value?: string[] | { [field: string]: any }) {
     this.form
       .then((form: HTMLFormElement) => {
-        form.reset()
+        if (value) {
+          if (value instanceof Array) {
+            value
+              .filter(item => typeof item == 'string')
+              .forEach(item => {
+                const field = this.getFieldByName(item)
+                if (field) {
+                  ;(field as HTMLInputElement).value = ''
+                }
+              })
+          } else {
+            const keys = Object.keys(value)
+            keys
+              .filter(key => typeof key == 'string')
+              .forEach(key => {
+                const field = this.getFieldByName(key)
+                if (field) {
+                  ;(field as HTMLInputElement).value = value[key]
+                }
+              })
+          }
+        } else {
+          form.reset()
+        }
       })
       .catch((error: any) => {
         console.error('Error resetting the form:', error)

package/src/styles/search-form-styles.ts

@@ -12,6 +12,7 @@ export const SearchFormStyles = css`
     grid-template-columns: repeat(24, 1fr);
     grid-gap: var(--form-grid-gap, var(--spacing-medium));
     grid-auto-rows: minmax(24px, auto);
+    background-color: var(--search-form-background-color, var(--md-sys-color-surface));
   }
   .search-form label {
     grid-column: span 3;
@@ -19,7 +20,7 @@ export const SearchFormStyles = css`
     align-self: center;
     text-transform: capitalize;
 
-    font-size:var(--md-sys-typescale-label-large-size, 0.875rem);
+    font-size: var(--md-sys-typescale-label-large-size, 0.875rem);
     color: var(--md-sys-color-on-primary-container);
   }
 
@@ -77,11 +78,16 @@ export const SearchFormStyles = css`
     color: var(--search-form-icon-color, var(--md-sys-color-on-surface));
   }
 
+  input[readonly],
+  select[readonly] {
+    background-color: #f0f0f0;
+  }
+
   @media screen and (max-width: 460px) {
     .search-form {
       grid-template-columns: repeat(12, 1fr);
       grid-gap: var(--spacing-medium) var(--spacing-medium);
-      background-color: transparent
+      background-color: transparent;
 
       max-height: 100%;
       overflow-y: auto;

package/src/types.ts

@@ -64,6 +64,7 @@ export type FilterConfig = {
     | undefined
   boundTo?: string[]
   hidden?: boolean
+  readonly?: boolean
   onchange?: FilterChangedCallback
 }
 
@@ -95,6 +96,7 @@ export type SearchFormField = {
   attrs?: string[]
   options?: SelectOption[] | ((form: OxSearchForm) => SelectOption[] | Promise<SelectOption[]>)
   boundTo?: string[]
+  readonly?: boolean
   handlers?: { [event: string]: EventListener }
   onchange?: SearchFilterChangedCallback
 }

package/stories/ox-search-form-change-handler.stories.ts

@@ -213,7 +213,9 @@ RegularContact.args = {
       label: 'name',
       name: 'name',
       type: 'text',
+      value: 'My Name',
       placeholder: 'type your name.',
+      readonly: true,
       props: { searchOper: 'i_like' },
       onchange: value => {
         console.log('changed', value)

package/stories/ox-search-form.stories.ts

@@ -15,6 +15,7 @@ export default {
     fields: { control: 'object' },
     hideSearchButton: { control: 'boolean' },
     autofocus: { control: 'boolean' },
+    resetTarget: { control: 'object' },
     theme: { control: 'select', options: ['light', 'dark'] }
   }
 }
@@ -29,10 +30,17 @@ interface ArgTypes {
   fields?: SearchFormField[]
   hideSearchButton?: boolean
   autofocus?: boolean
+  resetTarget: string[] | { [field: string]: any }
   theme: 'light' | 'dark'
 }
 
-const Template: Story<ArgTypes> = ({ fields, hideSearchButton, autofocus, theme = 'light' }: ArgTypes) => html`
+const Template: Story<ArgTypes> = ({
+  fields,
+  hideSearchButton,
+  autofocus,
+  resetTarget,
+  theme = 'light'
+}: ArgTypes) => html`
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
 
   <link href="/themes/light.css" rel="stylesheet" />
@@ -94,6 +102,9 @@ const Template: Story<ArgTypes> = ({ fields, hideSearchButton, autofocus, theme
       </ox-search-form>
     </div>
   </div>
+
+  <button @click=${() => (document.querySelector('ox-search-form') as any)?.reset(resetTarget)}>Partial Reset</button>
+  <button @click=${() => (document.querySelector('ox-search-form') as any)?.reset()}>Full Reset</button>
 `
 
 const WAREHOUSE = [
@@ -208,6 +219,9 @@ Regular.args = {
     }
   ],
   hideSearchButton: true,
+  resetTarget: {
+    location: ''
+  },
   autofocus: true
 }
 
@@ -218,6 +232,8 @@ RegularContact.args = {
       label: 'name',
       name: 'name',
       type: 'text',
+      readonly: true,
+      value: '남상혁',
       placeholder: 'type your name.',
       props: { searchOper: 'i_like' }
     },
@@ -237,6 +253,7 @@ RegularContact.args = {
       label: 'phone',
       name: 'phone',
       type: 'text',
+      readonly: true,
       props: { searchOper: 'i_like' }
     },
     {
@@ -247,5 +264,6 @@ RegularContact.args = {
     }
   ],
   hideSearchButton: true,
+  resetTarget: ['name', 'email'],
   autofocus: true
 }