Merge pull request #28 from MZC-CSC/feature/refact-sy

Fix: Source Connection updated & Layout Folder Structure updated

front/src/app/Layouts/index.ts

@@ -1,5 +1 @@
-export * from './layoutHeader';
-export * from './consoleLayout';
-export * from './verticalPageLayout';
 export * from './mainLayout';
-export * from './generalPageLayout';

front/src/app/Layouts/mainLayout/ui/MainLayout.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { LayoutHeader } from '../../layoutHeader';
-import { ConsoleLayout } from '../../consoleLayout';
+import { LayoutHeader, ConsoleLayout } from '@/widgets/layout';
 import { styleVariables, PSidebar } from '@cloudforet-test/mirinae';
 </script>
 
@@ -82,3 +81,4 @@ import { styleVariables, PSidebar } from '@cloudforet-test/mirinae';
   }
 }
 </style>
+../../../../widgets/layout/layoutHeader../../../../widgets/layout/consoleLayout

front/src/features/auth/ui/LoginForm.vue

@@ -10,6 +10,8 @@ import {
 import { Ref, ref, watch } from 'vue';
 import { i18n } from '@/app/i18n';
 import { useInputModel } from '@/shared/hooks/input/useInputModel.ts';
+import { useSidebar } from '@/shared/libs/store/sidebar.ts';
+import { storeToRefs } from 'pinia';
 
 const emit = defineEmits(['handleLoginSuccess']);
 
@@ -23,6 +25,9 @@ const userPW = useInputModel<string | null>(
 );
 
 const resLogin = useGetLogin<IUserLoginResponse, IUserLogin | null>(null);
+const sidebar = useSidebar();
+
+const { isCollapsed, isGnbToolboxShown } = storeToRefs(sidebar);
 
 const handleLogin = async () => {
   if (!userId.touched.value || !userPW.touched.value) {
@@ -38,6 +43,8 @@ const handleLogin = async () => {
     null;
 
   if (userId.isValid.value && userPW.isValid.value) {
+    isCollapsed.value = false;
+    isGnbToolboxShown.value = true;
     resLogin.execute({
       request: {
         id: userId.value.value!,

front/src/features/gnb/index.ts

@@ -0,0 +1,2 @@
+export * from './gnbNavigationRail';
+export * from './gnbToolbox';

front/src/features/sourceServices/sourceConnection/ui/EditSourceConnectionInfo.vue

@@ -55,16 +55,32 @@ watchEffect(() => {
 watchEffect(() => {
   if (props.selectedSourceConnectionIds.length === 1) {
     sourceConnectionsByIds.value = [
-      (addedSourceConnectionInfo.value =
-        sourceConnectionStore.getConnectionById(
+      // (addedSourceConnectionInfo.value =
+      //   sourceConnectionStore.getConnectionById(
+      //     props.selectedSourceConnectionIds[0],
+      //   )),
+      {
+        ...sourceConnectionStore.getConnectionById(
           props.selectedSourceConnectionIds[0],
-        )),
+        ),
+        ssh_port: '',
+        user: '',
+        password: '',
+        private_key: '',
+      },
     ];
   } else if (props.selectedSourceConnectionIds.length > 1) {
     props.selectedSourceConnectionIds.forEach((connId: string) => {
-      sourceConnectionsByIds.value.push(
-        sourceConnectionStore.getConnectionById(connId),
-      );
+      sourceConnectionsByIds.value = [
+        ...sourceConnectionsByIds.value,
+        {
+          ...sourceConnectionStore.getConnectionById(connId),
+          ssh_port: '',
+          user: '',
+          password: '',
+          private_key: '',
+        },
+      ];
     });
   }
 });
@@ -85,10 +101,8 @@ watchEffect(() => {
 });
 
 watchEffect(() => {
-  uniqueSourceConnectionsByIds.value = sourceConnectionsByIds.value.filter(
-    (e, i) => {
-      return sourceConnectionsByIds.value.indexOf(e) === i;
-    },
+  uniqueSourceConnectionsByIds.value = Array.from(
+    new Map(sourceConnectionsByIds.value.map(item => [item.id, item])).values(),
   );
 });
 

front/src/pages/workloadOperations/workloads/ui/WorkloadsPage.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { VerticalPageLayout } from '@/app/Layouts';
+import { VerticalPageLayout } from '@/widgets/layout';
 import { WorkloadsLSB } from '@/widgets/workloads';
 import { computed, reactive } from 'vue';
 import { MENU_ID, useMigratorMenuStore } from '@/entities';

front/src/app/Layouts/consoleLayout/ui/ConsoleLayout.vue → front/src/widgets/layout/consoleLayout/ui/ConsoleLayout.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { GNBToolbox } from '@/widgets/layout';
-import { GNBNavigationRail } from '@/widgets/layout';
+import { GNBToolbox, GNBNavigationRail } from '@/features/gnb';
 import { useSidebar } from '@/shared/libs/store/sidebar.ts';
 import { storeToRefs } from 'pinia';
 

front/src/widgets/layout/index.ts

@@ -1,9 +1,10 @@
 export * from './LSB';
-export * from './gnbNavigationRail';
-export * from './gnbToolbox';
 export * from './menuCategory';
 export * from './topbarNotificationContextMenu';
 export * from './widgetLayout';
 export * from './createForm';
 export * from './simpleEditForm';
 export * from './jsonEditor';
+export * from './consoleLayout';
+export * from './layoutHeader';
+export * from './verticalPageLayout';

front/src/app/Layouts/layoutHeader/ui/LayoutHeader.vue → front/src/widgets/layout/layoutHeader/ui/LayoutHeader.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
-import TopBarWorkspaces from '@/features/topbar/topbarWorkspaces/ui/TopBarWorkspaces.vue';
-import TopBarToolset from '@/features/topbar/topbarToolset/ui/TopBarToolset.vue';
+// import TopBarWorkspaces from '@/features/topbar/topbarWorkspaces/ui/TopBarWorkspaces.vue';
+import { TopBarToolset } from '@/features/topbar';
 import { reactive } from 'vue';
-import { PI } from '@cloudforet-test/mirinae';
 
 const state = reactive({
   openedMenu: '',

front/src/widgets/layout/verticalPageLayout/index.ts

@@ -0,0 +1,3 @@
+import VerticalPageLayout from './ui/VerticalPageLayout.vue';
+
+export { VerticalPageLayout };

front/src/app/Layouts/verticalPageLayout/VerticalPageLayout.vue → front/src/widgets/layout/verticalPageLayout/ui/VerticalPageLayout.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { computed, reactive, ref, watch } from 'vue';
+import { ref, watch } from 'vue';
 import { PVerticalLayout } from '@cloudforet-test/mirinae';
 // import { styleVariables } from '@cloudforet-test/mirinae';
 import type { Breadcrumb } from '@/shared/types';
-import { useSidebar } from '@/shared/libs/store/sidebar';
-import { storeToRefs } from 'pinia';
-import { useWindowSize, useElementSize } from '@vueuse/core';
+// import { useSidebar } from '@/shared/libs/store/sidebar';
+// import { storeToRefs } from 'pinia';
+// import { useWindowSize, useElementSize } from '@vueuse/core';
 
 interface Props {
   breadcrumbs?: Breadcrumb[];
@@ -17,25 +17,25 @@ const props = withDefaults(defineProps<Props>(), {
 
 const containerRef = ref<HTMLElement | null>(null);
 
-const sidebar = useSidebar();
+// const sidebar = useSidebar();
 
-const { isMinimized, isCollapsed } = storeToRefs(sidebar);
+// const { isMinimized, isCollapsed } = storeToRefs(sidebar);
 
 const contentRef = ref<null | HTMLElement>(null);
-const { width } = useWindowSize();
-const { width: contentsWidth } = useElementSize(contentRef);
+// const { width } = useWindowSize();
+// const { width: contentsWidth } = useElementSize(contentRef);
 
-const storeState = reactive({
-  isMinimizeNavRail: computed(() => isMinimized),
-});
+// const storeState = reactive({
+//   isMinimizeNavRail: computed(() => isMinimized),
+// });
 
-const state = reactive({
-  padding: computed(() => {
-    if (contentsWidth.value <= 1920) return '0';
-    if (storeState.isMinimizeNavRail) return width.value - 1980;
-    return width.value - 2180;
-  }),
-});
+// const state = reactive({
+//   padding: computed(() => {
+//     if (contentsWidth.value <= 1920) return '0';
+//     if (storeState.isMinimizeNavRail) return width.value - 1980;
+//     return width.value - 2180;
+//   }),
+// });
 
 watch(
   () => props.breadcrumbs,

front/src/widgets/source/sourceConnections/sourceConnectionModal/ui/EditSourceConnectionModal.vue

@@ -129,13 +129,20 @@ const handleAddSourceConnection = async () => {
 watchEffect(() => {
   connectionInfoData.value.forEach(data => {
     if (
+      props.multiSelectedConnectionIds.length === 0 &&
       data.name !== '' &&
       data.ip_address !== '' &&
       data.user !== '' &&
       data.password !== '' &&
       data.ssh_port !== 0
     ) {
       isDisabled.value = true;
+    } else if (
+      props.multiSelectedConnectionIds.length > 0 &&
+      data.name !== '' &&
+      data.ip_address !== ''
+    ) {
+      isDisabled.value = true;
     } else if (typeof Number(data.ssh_port) !== 'number') {
       isDisabled.value = false;
     } else {