Skip to content

Commit

Permalink
chore: update design of DT add popover (#5273)
Browse files Browse the repository at this point in the history 
Signed-off-by: yuda <[email protected]>
  • Loading branch information
@yuda110
yuda110 authored Dec 20, 2024
1 parent 0457310 commit 94f4369
Show file tree
Hide file tree
Showing 5 changed files with 125 additions and 32 deletions.
109 changes: 77 additions & 32 deletions apps/web/src/common/modules/widgets/_components/WidgetFormDataSourcePopover.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -136,10 +136,10 @@ const state = reactive({
icon: 'ic_db-where',
},
{
key: DATA_TABLE_OPERATOR.PIVOT,
name: 'Pivot',
description: i18n.t('COMMON.WIDGETS.DATA_TABLE.FORM.PIVOT_DESC'),
icon: 'ic_db-pivot',
key: DATA_TABLE_OPERATOR.VALUE_MAPPING,
name: 'Value Mapping',
description: i18n.t('COMMON.WIDGETS.DATA_TABLE.FORM.VALUE_MAPPING_DESC'),
icon: '', // TODO: Add icon
},
{
key: DATA_TABLE_OPERATOR.ADD_LABELS,
Expand All @@ -148,10 +148,10 @@ const state = reactive({
icon: '', // TODO: Add icon
},
{
key: DATA_TABLE_OPERATOR.VALUE_MAPPING,
name: 'Value Mapping',
description: i18n.t('COMMON.WIDGETS.DATA_TABLE.FORM.VALUE_MAPPING_DESC'),
icon: '', // TODO: Add icon
key: DATA_TABLE_OPERATOR.PIVOT,
name: 'Pivot',
description: i18n.t('COMMON.WIDGETS.DATA_TABLE.FORM.PIVOT_DESC'),
icon: 'ic_db-pivot',
},
]),
});
Expand Down Expand Up @@ -388,29 +388,62 @@ watch(() => state.showPopover, (val) => {
<div v-else
class="data-source-popper-operator-wrapper"
>
<p-select-card v-for="(operatorInfo) in state.operatorInfoList"
:key="operatorInfo.key"
value="operatorKey"
label="a"
block
@click="handleClickOperator(operatorInfo.key)"
>
<div class="operator-card-contents">
<p-i :name="operatorInfo.icon"
width="1rem"
height="1rem"
color="inherit"
/>
<div class="contents-wrapper">
<p class="name">
{{ operatorInfo.name }}
</p>
<p class="description">
{{ operatorInfo.description }}
</p>
<div class="left-part">
<div class="part-title">
{{ i18n.t('COMMON.WIDGETS.DATA_TABLE.FORM.MERGE') }}
</div>
<p-select-card v-for="(operatorInfo) in state.operatorInfoList.slice(0, 2)"
:key="operatorInfo.key"
value="operatorKey"
label="a"
block
@click="handleClickOperator(operatorInfo.key)"
>
<div class="operator-card-contents">
<p-i :name="operatorInfo.icon"
width="1rem"
height="1rem"
color="inherit"
/>
<div class="contents-wrapper">
<p class="name">
{{ operatorInfo.name }}
</p>
<p class="description">
{{ operatorInfo.description }}
</p>
</div>
</div>
</p-select-card>
</div>
<div class="right-part">
<div class="part-title">
{{ i18n.t('COMMON.WIDGETS.DATA_TABLE.FORM.TRANSFORMATIONS') }}
</div>
</p-select-card>
<p-select-card v-for="(operatorInfo) in state.operatorInfoList.slice(2)"
:key="operatorInfo.key"
value="operatorKey"
label="a"
block
@click="handleClickOperator(operatorInfo.key)"
>
<div class="operator-card-contents">
<p-i :name="operatorInfo.icon"
width="1rem"
height="1rem"
color="inherit"
/>
<div class="contents-wrapper">
<p class="name">
{{ operatorInfo.name }}
</p>
<p class="description">
{{ operatorInfo.description }}
</p>
</div>
</div>
</p-select-card>
</div>
</div>
</template>
</p-popover>
Expand Down Expand Up @@ -456,12 +489,24 @@ watch(() => state.showPopover, (val) => {
padding: 1rem;
}
.data-source-popper-operator-wrapper {
display: flex;
flex-direction: column;
@apply grid grid-cols-12;
//display: flex;
//flex-direction: column;
gap: 0.5rem;
width: 21.5rem;
width: 43rem;
padding: 1rem;
.left-part, .right-part {
@apply col-span-6;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.part-title {
@apply text-label-sm text-gray-700;
font-weight: bold;
}
.operator-card-contents {
@apply flex gap-1;
.contents-wrapper {
Expand Down
42 changes: 42 additions & 0 deletions packages/language-pack/console-translation-2.8.babel
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23090,6 +23090,27 @@
</translation>
</translations>
</concept_node>
<concept_node>
<name>MERGE</name>
<definition_loaded>false</definition_loaded>
<description/>
<comment/>
<default_text/>
<translations>
<translation>
<language>en-US</language>
<approved>false</approved>
</translation>
<translation>
<language>ja-JP</language>
<approved>false</approved>
</translation>
<translation>
<language>ko-KR</language>
<approved>false</approved>
</translation>
</translations>
</concept_node>
<concept_node>
<name>PATTERN</name>
<definition_loaded>false</definition_loaded>
Expand Down Expand Up @@ -23321,6 +23342,27 @@
</translation>
</translations>
</concept_node>
<concept_node>
<name>TRANSFORMATIONS</name>
<definition_loaded>false</definition_loaded>
<description/>
<comment/>
<default_text/>
<translations>
<translation>
<language>en-US</language>
<approved>false</approved>
</translation>
<translation>
<language>ja-JP</language>
<approved>false</approved>
</translation>
<translation>
<language>ko-KR</language>
<approved>false</approved>
</translation>
</translations>
</concept_node>
<concept_node>
<name>TYPE_DATA_FIELD</name>
<definition_loaded>false</definition_loaded>
Expand Down
2 changes: 2 additions & 0 deletions packages/language-pack/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1295,6 +1295,7 @@
"LEGACY_WARNING_DESC": "This ‘{operator}’ format is no longer supported. Please remove it and implement the new data transformation.",
"LEGACY_WARNING_TITLE": "Unsupported ‘{operator}’ Format",
"MATCHES_WITH": "Matches With",
"MERGE": "Merge",
"PATTERN": "Pattern",
"PIVOT_DESC": "Summarize data by reorganizing key dimensions.",
"QUERY_DESC": "Filter and extract data that meet specific conditions. ",
Expand All @@ -1306,6 +1307,7 @@
"SEPARATE": "Separate Date",
"SEPARATE_DESC": "Separate date into 3 columns (Year, Month, Day)",
"TIME_DIFF": "Time Diff",
"TRANSFORMATIONS": "Transformations",
"TYPE_DATA_FIELD": "Data Field",
"TYPE_LABEL_FIELD": "Label Field",
"UPDATE_DATA_TALBE_INVALID_SUCCESS": "Changes have been successfully applied.",
Expand Down
2 changes: 2 additions & 0 deletions packages/language-pack/ja.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1295,6 +1295,7 @@
"LEGACY_WARNING_DESC": "この「{operator}」形式はサポートされなくなりました。削除して、新しいデータ変換を実装してください。",
"LEGACY_WARNING_TITLE": "サポートされていない「{operator}」形式",
"MATCHES_WITH": "",
"MERGE": "",
"PATTERN": "",
"PIVOT_DESC": "",
"QUERY_DESC": "特定の条件を満たすデータをフィルタリングして抽出します。",
Expand All @@ -1306,6 +1307,7 @@
"SEPARATE": "日付形式の変更",
"SEPARATE_DESC": "日付を3つの列（Year, Month, Day）に分ける",
"TIME_DIFF": "過去データ設定（時間差）",
"TRANSFORMATIONS": "",
"TYPE_DATA_FIELD": "データフィールド",
"TYPE_LABEL_FIELD": "ラベルフィールド",
"UPDATE_DATA_TALBE_INVALID_SUCCESS": "変更が正常に適用されました。",
Expand Down
2 changes: 2 additions & 0 deletions packages/language-pack/ko.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1295,6 +1295,7 @@
"LEGACY_WARNING_DESC": "이 ‘{operator}’ 형식은 더 이상 지원되지 않습니다. 이 형식을 삭제하고 새로운 데이터 변환을 추가해 주세요.",
"LEGACY_WARNING_TITLE": "지원되지 않는 ‘{operator}’ 형식",
"MATCHES_WITH": "",
"MERGE": "",
"PATTERN": "",
"PIVOT_DESC": "",
"QUERY_DESC": "특정 조건을 충족하는 데이터를 필터링하고 추출합니다.",
Expand All @@ -1306,6 +1307,7 @@
"SEPARATE": "날짜 형식 변경",
"SEPARATE_DESC": "Year, Month, Day 3개 컬럼으로 분리 ",
"TIME_DIFF": "과거 데이터 설정(Time Diff)",
"TRANSFORMATIONS": "",
"TYPE_DATA_FIELD": "데이터 필드",
"TYPE_LABEL_FIELD": "레이블 필드",
"UPDATE_DATA_TALBE_INVALID_SUCCESS": "변경 사항 반영 완료",
Expand Down

0 comments on commit 94f4369

Please sign in to comment.