From 2ddfee42f7b14b130b43d2c3ac84962192e9e460 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Piggy=20Park=20=28=EB=B0=95=EC=9A=A9=ED=83=9C=29?=
 <samuel.park@megazone.com>
Date: Fri, 27 Sep 2024 18:35:43 +0900
Subject: [PATCH] fix: edit PTab component design & separate folder tab
 compnent (#4784)

* fix: edit PTab component design & separate folder tab compnent

Signed-off-by: samuel.park <samuel.park@megazone.com>

* chore: small fix

Signed-off-by: samuel.park <samuel.park@megazone.com>

* chore: apply review

Signed-off-by: samuel.park <samuel.park@megazone.com>

---------

Signed-off-by: samuel.park <samuel.park@megazone.com>
---
 .../ProjectMainProjectGroupFormModal.vue      |   2 +-
 .../mirinae/src/navigation/tabs/tab/PTab.vue  |  59 ++++-----
 .../tabs/tab/components/FolderTab.vue         | 117 ++++++++++++++++++
 .../translations/language-pack/babel.babel    |  26 ++++
 .../src/translations/language-pack/en.json    |   3 +
 .../src/translations/language-pack/ja.json    |   3 +
 .../src/translations/language-pack/ko.json    |   3 +
 7 files changed, 180 insertions(+), 33 deletions(-)
 create mode 100644 packages/mirinae/src/navigation/tabs/tab/components/FolderTab.vue

diff --git a/apps/web/src/services/project/components/ProjectMainProjectGroupFormModal.vue b/apps/web/src/services/project/components/ProjectMainProjectGroupFormModal.vue
index a9742a1763..76924a2cf1 100644
--- a/apps/web/src/services/project/components/ProjectMainProjectGroupFormModal.vue
+++ b/apps/web/src/services/project/components/ProjectMainProjectGroupFormModal.vue
@@ -146,7 +146,7 @@ watch(() => props.projectGroupId, async (after) => {
                     fade
                     backdrop
                     :visible.sync="state.proxyVisible"
-                    :disabled="state.loading || !isAllValid"
+                    :disabled="state.loading || !isAllValid || storeState.projectGroups[props.projectGroupId]?.name === projectGroupName"
                     @confirm="confirm"
     >
         <template #body>
diff --git a/packages/mirinae/src/navigation/tabs/tab/PTab.vue b/packages/mirinae/src/navigation/tabs/tab/PTab.vue
index 54cfffc62e..7aa65caddc 100644
--- a/packages/mirinae/src/navigation/tabs/tab/PTab.vue
+++ b/packages/mirinae/src/navigation/tabs/tab/PTab.vue
@@ -12,6 +12,7 @@ import PTextButton from '@/inputs/buttons/text-button/PTextButton.vue';
 import PContextMenu from '@/inputs/context-menu/PContextMenu.vue';
 import type { MenuItem } from '@/inputs/context-menu/type';
 import PDivider from '@/layouts/divider/PDivider.vue';
+import FolderTab from '@/navigation/tabs/tab/components/FolderTab.vue';
 import type { TabItem } from '@/navigation/tabs/tab/type';
 
 const CUSTOM_BACK_BUTTON = 'CUSTOM_BACK_BUTTON';
@@ -27,9 +28,8 @@ const emit = defineEmits<{(e: 'update:active-tab', value: string): void;
 }>();
 
 const tabContainerRef = ref<HTMLElement|null>(null);
-const tabItemsRef = ref<(HTMLElement|typeof PDivider)[]>([]);
+const tabItemsRef = ref<(HTMLElement|typeof PDivider|typeof FolderTab)[]>([]);
 const slotRef = ref<HTMLElement|null>(null);
-const groupTabMenuRef = ref<HTMLElement|null>(null);
 const hiddenTabsMenuRef = ref<HTMLElement|null>(null);
 
 const {
@@ -75,7 +75,7 @@ const state = reactive({
                     iconColor: '#0062B8',
                 },
                 {
-                    tabType: 'divider',
+                    type: 'divider',
                 },
                 ...selectedTab?.subItems || [],
             ];
@@ -196,33 +196,17 @@ onClickOutside(hiddenTabsMenuRef, hideHiddenTabs);
                                class="divider-item"
                                vertical
                     />
-                    <li v-else-if="tab.tabType === 'folder'"
-                        :key="tab.name"
-                        ref="tabItemsRef"
-                        :class="{active: tab.subItems?.some((subItem) => activeTab === subItem.name)}"
-                        role="tab"
-                        @keydown.enter="handleSelectGroupTab(tab)"
-                        @click="handleSelectGroupTab(tab)"
-                    >
-                        <div class="content-wrapper">
-                            <span class="label">
-                                {{ tab.label }}
-                            </span>
-                            <p-i class="sub-item-dropdown-icon"
-                                 :name="state.selectedFolderTab === tab.name ? 'ic_chevron-up' : 'ic_chevron-down'"
-                                 width="1.25rem"
-                                 height="1.25rem"
-                                 color="inherit"
-                            />
-                        </div>
-                        <p-context-menu v-if="state.selectedFolderTab === tab.name"
-                                        ref="groupTabMenuRef"
-                                        class="sub-item-menu"
-                                        :menu="tab?.subItems || []"
-                                        :selected="state.selectedContextMenuItem ? [state.selectedContextMenuItem]: undefined"
-                                        @select="handleSelectGroupTabMenu"
-                        />
-                    </li>
+                    <folder-tab v-else-if="tab.tabType === 'folder'"
+                                :key="tab.name"
+                                ref="tabItemsRef"
+                                :tab="tab"
+                                :active-tab="props.activeTab"
+                                :selected-folder-tab="state.selectedFolderTab"
+                                :selected-context-menu-item="state.selectedContextMenuItem"
+                                :visible-sub-menu="state.selectedFolderTab === tab.name"
+                                @select-tab="handleSelectGroupTab(tab)"
+                                @select-tab-menu="handleSelectGroupTabMenu"
+                    />
                     <li v-else
                         :key="tab.name"
                         ref="tabItemsRef"
@@ -274,12 +258,19 @@ onClickOutside(hiddenTabsMenuRef, hideHiddenTabs);
                                 <p-text-button v-if="item?.name === CUSTOM_BACK_BUTTON"
                                                style-type="highlight"
                                 >
-                                    {{ $t('Back') }}
+                                    {{ $t('TAB.BACK') }}
                                 </p-text-button>
                                 <template v-else>
                                     {{ item?.label || item?.name }}
                                 </template>
                             </template>
+                            <template v-if="state.selectedHiddenParentTab && state.hiddenTabMenuItems.length === 2"
+                                      #bottom
+                            >
+                                <div class="empty-sub-menu-item">
+                                    {{ $t('COMPONENT.CONTEXT_MENU.NO_ITEM') }}
+                                </div>
+                            </template>
                         </p-context-menu>
                     </li>
                 </ul>
@@ -342,7 +333,7 @@ onClickOutside(hiddenTabsMenuRef, hideHiddenTabs);
 
             @media (hover: hover) {
                 &:hover {
-                    @apply text-gray-900;
+                    @apply text-gray-900 bg-gray-100;
                 }
             }
             &.active {
@@ -405,4 +396,8 @@ onClickOutside(hiddenTabsMenuRef, hideHiddenTabs);
         flex: 0 0;
     }
 }
+
+.empty-sub-menu-item {
+    @apply text-label-md text-gray-300;
+}
 </style>
diff --git a/packages/mirinae/src/navigation/tabs/tab/components/FolderTab.vue b/packages/mirinae/src/navigation/tabs/tab/components/FolderTab.vue
new file mode 100644
index 0000000000..f06e82ef74
--- /dev/null
+++ b/packages/mirinae/src/navigation/tabs/tab/components/FolderTab.vue
@@ -0,0 +1,117 @@
+<script setup lang="ts">
+
+
+import { reactive, ref, toRef } from 'vue';
+
+import { onClickOutside } from '@vueuse/core';
+
+import PI from '@/foundation/icons/PI.vue';
+import { useContextMenuFixedStyle } from '@/hooks';
+import PContextMenu from '@/inputs/context-menu/PContextMenu.vue';
+import type { MenuItem } from '@/inputs/context-menu/type';
+import type { TabItem } from '@/navigation/tabs/tab/type';
+
+interface Props {
+    tab: TabItem;
+    activeTab: string;
+    selectedFolderTab?: string;
+    selectedContextMenuItem?: MenuItem;
+    visibleSubMenu?: boolean;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits<{(e: 'select-tab'): void;
+    (e: 'select-tab-menu', value: MenuItem, idx?: number): void;
+}>();
+
+const folderTabRef = ref<HTMLElement | null>(null);
+const contextMenuRef = ref<HTMLElement | null>(null);
+
+const state = reactive({
+    visible: props.visibleSubMenu,
+});
+
+const handleSelectTab = () => {
+    if (state.visible) {
+        state.visible = false;
+    } else {
+        state.visible = true;
+    }
+    emit('select-tab');
+};
+
+const handleSelectTabMenu = (menu: MenuItem) => {
+    state.visible = false;
+    emit('select-tab-menu', menu);
+};
+
+const {
+    contextMenuStyle,
+} = useContextMenuFixedStyle({
+    useFixedMenuStyle: true,
+    visibleMenu: toRef(state, 'visible'),
+    targetRef: folderTabRef,
+    position: 'left',
+    menuRef: contextMenuRef,
+    multiSelectable: false,
+});
+
+onClickOutside(folderTabRef, () => {
+    state.visible = false;
+});
+
+</script>
+
+<template>
+    <li ref="folderTabRef"
+        :class="{'folder-tab': true, active: props.tab.subItems?.some((subItem) => activeTab === subItem.name)}"
+        role="tab"
+        @keydown.enter="handleSelectTab"
+        @click="handleSelectTab"
+    >
+        <div class="content-wrapper">
+            <span class="label">
+                {{ tab.label }}
+            </span>
+            <p-i class="sub-item-dropdown-icon"
+                 :name="state.visible ? 'ic_chevron-up' : 'ic_chevron-down'"
+                 width="1.25rem"
+                 height="1.25rem"
+                 color="inherit"
+            />
+        </div>
+        <p-context-menu v-if="state.visible"
+                        ref="contextMenuRef"
+                        class="sub-item-menu"
+                        :style="contextMenuStyle"
+                        :menu="props.tab?.subItems || []"
+                        :selected="props.selectedContextMenuItem ? [props.selectedContextMenuItem]: undefined"
+                        @select="handleSelectTabMenu"
+        />
+    </li>
+</template>
+
+<style lang="postcss">
+.folder-tab {
+    &.active {
+        @apply text-primary border-primary;
+    }
+    .content-wrapper {
+        @apply flex items-center justify-center w-full h-full;
+        .label {
+            @apply w-full text-label-md block truncate;
+        }
+        .sub-item-dropdown-icon {
+            min-width: 1.25rem;
+            margin-left: 0.25rem;
+        }
+        .sub-item-menu {
+            position: absolute;
+            top: 100%;
+            left: 0;
+            z-index: 100;
+            width: max-content;
+        }
+    }
+}
+</style>
diff --git a/packages/mirinae/src/translations/language-pack/babel.babel b/packages/mirinae/src/translations/language-pack/babel.babel
index f8f22b3047..add28841d5 100644
--- a/packages/mirinae/src/translations/language-pack/babel.babel
+++ b/packages/mirinae/src/translations/language-pack/babel.babel
@@ -1270,6 +1270,32 @@
                     </concept_node>
                 </children>
             </folder_node>
+            <folder_node>
+                <name>TAB</name>
+                <children>
+                    <concept_node>
+                        <name>BACK</name>
+                        <definition_loaded>false</definition_loaded>
+                        <description/>
+                        <comment/>
+                        <default_text/>
+                        <translations>
+                            <translation>
+                                <language>en-US</language>
+                                <approved>true</approved>
+                            </translation>
+                            <translation>
+                                <language>ja-JP</language>
+                                <approved>true</approved>
+                            </translation>
+                            <translation>
+                                <language>ko-KR</language>
+                                <approved>true</approved>
+                            </translation>
+                        </translations>
+                    </concept_node>
+                </children>
+            </folder_node>
             <folder_node>
                 <name>TEXT_INPUT</name>
                 <children>
diff --git a/packages/mirinae/src/translations/language-pack/en.json b/packages/mirinae/src/translations/language-pack/en.json
index 7972f3cf01..04aa5f5227 100644
--- a/packages/mirinae/src/translations/language-pack/en.json
+++ b/packages/mirinae/src/translations/language-pack/en.json
@@ -101,6 +101,9 @@
 	"SELECT_DROPDOWN": {
 		"SELECT": "Select"
 	},
+	"TAB": {
+		"BACK": "Back"
+	},
 	"TEXT_INPUT": {
 		"HIDE": "Hide",
 		"SHOW": "Show"
diff --git a/packages/mirinae/src/translations/language-pack/ja.json b/packages/mirinae/src/translations/language-pack/ja.json
index aa5faa9367..d7325d98ba 100644
--- a/packages/mirinae/src/translations/language-pack/ja.json
+++ b/packages/mirinae/src/translations/language-pack/ja.json
@@ -101,6 +101,9 @@
 	"SELECT_DROPDOWN": {
 		"SELECT": "選択"
 	},
+	"TAB": {
+		"BACK": "戻る"
+	},
 	"TEXT_INPUT": {
 		"HIDE": "隠す",
 		"SHOW": "もっと見る"
diff --git a/packages/mirinae/src/translations/language-pack/ko.json b/packages/mirinae/src/translations/language-pack/ko.json
index de3584927a..76ac5c454a 100644
--- a/packages/mirinae/src/translations/language-pack/ko.json
+++ b/packages/mirinae/src/translations/language-pack/ko.json
@@ -101,6 +101,9 @@
 	"SELECT_DROPDOWN": {
 		"SELECT": "선택"
 	},
+	"TAB": {
+		"BACK": "돌아가기"
+	},
 	"TEXT_INPUT": {
 		"HIDE": "숨기기",
 		"SHOW": "보이기"