Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: update design of DT add popover #5273

Merged
merged 1 commit into from
Dec 20, 2024
Merged

chore: update design of DT add popover #5273

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
109 changes: 77 additions & 32 deletions apps/web/src/common/modules/widgets/_components/WidgetFormDataSourcePopover.vue
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading