@things-factory/meta-ui 7.0.1-alpha.36 → 7.0.1-alpha.38

package/client/utils/meta-ui-util.js

@@ -1,7 +1,7 @@
 import '@material/web/icon/icon.js'
 
 import moment from 'moment-timezone'
-import { css, html, render } from 'lit'
+import { css, html, render, nothing } from 'lit'
 
 import { getEditor, getRenderer } from '@operato/data-grist'
 import { getValueGenerators } from '@operato/time-calculator'
@@ -225,10 +225,10 @@ export class MetaUiUtil {
     })
 
     // 7. 검색 필드의 검색 Operator가 in인 경우 디폴트 값을 배열로 변경
-    if(menuMetaData.search && menuMetaData.search.length > 0) {
+    if (menuMetaData.search && menuMetaData.search.length > 0) {
       menuMetaData.search.forEach(c => {
         let value = c.value
-        if(c.operator == 'in' && value.indexOf(',') > 0) {
+        if (c.operator == 'in' && value.indexOf(',') > 0) {
           c.value = value.split(',')
         }
       })
@@ -1013,13 +1013,11 @@ export class MetaUiUtil {
 
                   if (dateKeywords.includes(x)) {
                     defRes.push(todayMoment.startOf(durationType[x]).format(dateFormat[col.type]))
-
                   } else if (x.includes('-')) {
                     let wordSplits = x.split('-')
                     let key = wordSplits[0]
                     let value = wordSplits[1]
                     defRes.push(todayMoment.subtract(value, durationType[key]).startOf(durationType[key]).format(dateFormat[col.type]))
-
                   } else if (x.includes('+')) {
                     let wordSplits = x.split('+')
                     let key = wordSplits[0]
@@ -1986,27 +1984,14 @@ export class MetaUiUtil {
   static getGristPersonalizedStyles() {
     return [
       css`
-        #grist-personal {
-          padding: 5px 6px 0px 0px;
-          margin: 0px;
-          user-select: none;
-          align-self: end;
-          height: var(--padding-narrow);
-        }
-
-        #grist-personal > md-icon {
-          --md-icon-size: 16px;
-          padding: 2px;
-          margin: 0;
-          background-color: rgba(var(--secondary-color-rgb), 0.8);
-          color: var(--theme-white-color);
-          vertical-align: bottom;
+        [slot='setting'] {
+          --md-icon-size: 18px;
+          color: rgba(var(--secondary-color-rgb), 0.8);
           cursor: pointer;
-          border-radius: 50%;
         }
 
-        #grist-personal > md-icon:hover {
-          background-color: var(--primary-color);
+        [slot='setting']:hover {
+          color: var(--primary-color);
         }
       `
     ]
@@ -3138,45 +3123,43 @@ export class MetaUiUtil {
     let useSortButton = JSON.parse((pageView.etcConfig || {}).use_grid_sort_button || 'false')
     useFilterAddButton = useFilterAddButton === true && useAddButton === true
 
-    return useFilterForm == false
-      ? html`
-          <div slot="headroom" style="flex-direction: column;padding: 0px;border-top: none;box-shadow: none;background: none;align-items: stretch;">
-            ${this.getGridColumnPersonalizeButton(pageView)}
-          </div>
-        `
-      : html`
-          <div slot="headroom" style="flex-direction: column;padding: 0px;border-top: none;box-shadow: none;background: none;align-items: stretch;">
-            <div slot="headroom">
-              <div id="filters"><ox-filters-form></ox-filters-form></div>
-              ${useSortButton
-                ? html`
-                    <div id="sorters">
-                      <md-icon
-                        @click=${e => {
-                          const target = e.currentTarget
-                          target.nextElementSibling.open({
-                            right: 0,
-                            top: target.offsetTop + target.offsetHeight
-                          })
-                        }}
-                        >sort</md-icon
-                      >
-                      <ox-popup id="sorter-control">
-                        <ox-sorters-control></ox-sorters-control>
-                      </ox-popup>
-                    </div>
-                  `
-                : html``}
-              ${MetaUiUtil.getGridViewOption(pageView)}
-              <ox-record-creator id="add" ?hidden="${!useFilterAddButton}" .callback=${recordCreationCallback}>
-                <button style="display: flex; justify-content: center">
-                  <md-icon>add</md-icon>
-                </button>
-              </ox-record-creator>
+    return html`
+      ${useFilterForm
+        ? html`
+            <div slot="headroom" style="flex-direction: column;padding: 0px;border-top: none;box-shadow: none;background: none;align-items: stretch;">
+              <div slot="headroom">
+                <div id="filters"><ox-filters-form></ox-filters-form></div>
+                ${useSortButton
+                  ? html`
+                      <div id="sorters">
+                        <md-icon
+                          @click=${e => {
+                            const target = e.currentTarget
+                            target.nextElementSibling.open({
+                              right: 0,
+                              top: target.offsetTop + target.offsetHeight
+                            })
+                          }}
+                          >sort</md-icon
+                        >
+                        <ox-popup id="sorter-control">
+                          <ox-sorters-control></ox-sorters-control>
+                        </ox-popup>
+                      </div>
+                    `
+                  : html``}
+                ${MetaUiUtil.getGridViewOption(pageView)}
+                <ox-record-creator id="add" ?hidden="${!useFilterAddButton}" .callback=${recordCreationCallback}>
+                  <button style="display: flex; justify-content: center">
+                    <md-icon>add</md-icon>
+                  </button>
+                </ox-record-creator>
+              </div>
             </div>
-            ${this.getGridColumnPersonalizeButton(pageView)}
-          </div>
-        `
+          `
+        : nothing}
+      ${this.getGridColumnPersonalizeButton(pageView)}
+    `
   }
 
   /**
@@ -3192,18 +3175,17 @@ export class MetaUiUtil {
 
     if (pageView.is_activity !== true) {
       return html`
-        <div id="grist-personal">
-          <md-icon
-            @click=${e => {
-              let element = MetaApi.createCustomElement('personal-column-selector', 'personal-column-selector')
-              element.configGrist = e.currentTarget.parentElement.parentElement.parentElement
-              element.menuId = pageView.menuId
-
-              MetaApi.openPopupByElement(TermsUtil.tTitle('grid-column-personalize'), 'midium', element, false)
-            }}
-            >settings</md-icon
-          >
-        </div>
+        <md-icon
+          slot="setting"
+          @click=${e => {
+            let element = MetaApi.createCustomElement('personal-column-selector', 'personal-column-selector')
+            element.configGrist = e.currentTarget.closest('ox-grist')
+            element.menuId = pageView.menuId
+
+            MetaApi.openPopupByElement(TermsUtil.tTitle('grid-column-personalize'), 'midium', element, false)
+          }}
+          >tune</md-icon
+        >
       `
     } else {
       return html``