@operato/data-grist 1.17.9 → 1.19.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@operato/data-grist",
-  "version": "1.17.9",
+  "version": "1.19.0",
   "description": "User interface for grid (desktop) and list (mobile)",
   "author": "heartyoh",
   "main": "dist/index.js",
@@ -57,11 +57,11 @@
   "dependencies": {
     "@material/mwc-icon": "^0.27.0",
     "@operato/headroom": "^1.17.9",
-    "@operato/input": "^1.17.9",
-    "@operato/popup": "^1.17.9",
+    "@operato/input": "^1.19.0",
+    "@operato/popup": "^1.19.0",
     "@operato/pull-to-refresh": "^1.17.9",
-    "@operato/styles": "^1.17.9",
-    "@operato/utils": "^1.17.9",
+    "@operato/styles": "^1.18.0",
+    "@operato/utils": "^1.19.0",
     "i18next": "^21.5.4",
     "json5": "^2.2.0",
     "lit": "^2.5.0",
@@ -100,5 +100,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "3ee2a9ccedbe46a0ff0277e41bb75ba5428d4e04"
+  "gitHead": "8fe8f9edb649dc99453b5f3970244df21502a042"
 }

package/src/filters/filter-select.ts

@@ -3,6 +3,12 @@ import '@operato/input/ox-checkbox.js'
 import { FilterConfigObject, FilterSelectRenderer } from '../types'
 
 import { html } from 'lit-html'
+import { i18next } from '@operato/i18n'
+
+interface Option {
+  display: string
+  value: string
+}
 
 export const FilterSelect: FilterSelectRenderer = (column, value, owner) => {
   /* value는 filters-form이나 grid-header에서 처리되므로 이 곳에서는 무시한다. */
@@ -39,17 +45,41 @@ export const FilterSelect: FilterSelectRenderer = (column, value, owner) => {
 
   return operator === 'in'
     ? html`
+        <ox-checkbox
+          checkAll
+          @click=${(e: any) => {
+            // 전체 체크시 모든 옵션으로 변경 or 공백으로 변경
+            const checked = e.target.checked
+            const val = checked ? options.map((opt: Option) => opt.value) : []
+
+            e.target?.dispatchEvent(new CustomEvent('select', { bubbles: true, detail: val }))
+          }}
+          >${i18next.t('label.all')}</ox-checkbox
+        >
         ${options
-          ?.filter((option: { display: string; value: any }) => !!option)
+          ?.filter((option: Option) => !!option.value)
           .map(
-            (option: { display: string; value: any }) =>
-              html` <ox-checkbox option value=${option.value}>${option.display}</ox-checkbox> `
+            (option: Option) =>
+              html`
+                <ox-checkbox
+                  option
+                  value=${option.value}
+                  @change=${(e: any) => {
+                    // 체크가 바뀌었을때 전체 체크 버튼 자동 체크 or 체크 해제
+                    const parent = e.target.parentElement
+                    const checkCnt = e.target.checked ? 1 : -1
+                    const checkedLen = parent.querySelectorAll('ox-checkbox[option][checked]').length + checkCnt
+
+                    // TODO 필터는 공백값 지워지면 제거 예정
+                    parent.querySelector('ox-checkbox[checkAll]').checked =
+                      options.filter((option: Option) => !!option.value).length === checkedLen
+                  }}
+                  >${option.display}</ox-checkbox
+                >
+              `
           )}
       `
     : html`
-        ${options?.map(
-          (option: { display: string; value: any }) =>
-            html` <div option value=${option.value}>${option.display}&nbsp;</div> `
-        )}
+        ${options?.map((option: Option) => html` <div option value=${option.value}>${option.display}&nbsp;</div> `)}
       `
 }

package/src/filters/filters-form.ts

@@ -178,18 +178,33 @@ export class FiltersForm extends LitElement {
                       name=${name}
                       placeholder=${labelText}
                       .value=${value}
-                      @change=${(e: CustomEvent) =>
+                      @change=${(e: CustomEvent) => {
+                        // 멀티 셀렉트가 한개도 선택이 안되었다면 빈값이 아닌 나의 모든 값들을 넣음 (필터에서 뺀 상태까지 검색 방지)
+                        let val = e.detail
+                        if (e.detail?.length === 0) {
+                          val = column.record.options
+                            .filter((option: any) => (typeof option === 'string' ? !!option : !!option.value)) // 빈값 제거 (TODO 필터는 공백값 지워지면 제거 예정)
+                            .map((opt: any) => (typeof opt === 'string' ? opt : opt.value)) // 값 리스트
+
+                          // 전체 값을 선택
+                          const input = this.renderRoot.querySelector(`form [name="${name}"]`) as HTMLInputElement
+                          input.value = val
+                          // "전체" 버튼 체크
+                          ;(input.querySelector('ox-checkbox[checkAll]') as HTMLInputElement).checked = true
+                        }
+
                         e.target?.dispatchEvent(
                           new CustomEvent('filter-change', {
                             detail: {
                               name,
                               operator,
-                              value: e.detail
+                              value: val
                             }
                           })
-                        )}
+                        )
+                      }}
                     >
-                      <ox-popup-list multiple attr-selected="checked" with-search>
+                      <ox-popup-list multiple attr-selected="checked" with-search align-left>
                         ${renderer(column, value, this)}
                       </ox-popup-list>
                     </ox-select>

package/stories/dynamic-editable.stories.ts

@@ -133,6 +133,27 @@ function buildConfig({ headerFilter }: { headerFilter: boolean }) {
         header: 'date',
         width: 120
       },
+      {
+        type: 'select',
+        name: 'role',
+        label: true,
+        header: 'role',
+        record: {
+          // options: ['', 'admin', 'worker', 'tester'],
+          options: [
+            { display: 'admin', value: 'admin' },
+            { display: 'worker', value: 'worker' },
+            { display: 'tester', value: 'tester' }
+          ],
+          editable: true
+        },
+        filter: {
+          operator: 'in',
+          value: ['worker']
+        },
+        sortable: true,
+        width: 120
+      },
       {
         type: 'object',
         name: 'routing',

package/translations/en.json

@@ -3,5 +3,6 @@
   "label.accumulator_avg": "avg",
   "label.accumulator_count": "cnt",
   "label.accumulator_max": "min",
-  "label.accumulator_min": "max"
+  "label.accumulator_min": "max",
+  "label.all": "All"
 }

package/translations/ko.json

@@ -3,5 +3,6 @@
   "label.accumulator_avg": "평균",
   "label.accumulator_count": "계수",
   "label.accumulator_max": "최소",
-  "label.accumulator_min": "최대"
+  "label.accumulator_min": "최대",
+  "label.all": "전체"
 }