feat: updated git logics

crawlab-team · Jun 22, 2024 · 28cc4ee · 28cc4ee
1 parent 0394fc2
commit 28cc4ee
Show file tree

Hide file tree

Showing 15 changed files with 655 additions and 333 deletions.
diff --git a/src/components/button/Button.vue b/src/components/button/Button.vue
@@ -5,7 +5,7 @@ import { computed } from 'vue';
 export interface ButtonProps {
   tooltip?: string;
   type?: string;
-  size?: string;
+  size?: BasicSize;
   round?: boolean;
   circle?: boolean;
   plain?: boolean;
@@ -23,6 +23,10 @@ const props = withDefaults(defineProps<ButtonProps>(), {
   size: 'default',
 });
 
+const emit = defineEmits<{
+  (e: 'click', event: Event): void;
+}>();
+
 const cls = computed<string>(() => {
   const { noMargin, className, isIcon } = props;
   const classes = [];
@@ -45,7 +49,7 @@ const cls = computed<string>(() => {
         :title="tooltip"
         :type="type"
         :loading="loading"
-        @click="() => $emit('click')"
+        @click="event => emit('click', event)"
       >
         <slot></slot>
       </el-button>

diff --git a/src/components/button/FaIconButton.vue b/src/components/button/FaIconButton.vue
@@ -11,6 +11,10 @@ export interface FaIconButtonProps extends ButtonProps {
 
 const props = defineProps<FaIconButtonProps>();
 
+const emit = defineEmits<{
+  (e: 'click', event: Event): void;
+}>();
+
 const cls = computed<string>(() => {
   const { className } = props;
   const classes = ['fa-icon-button'];
@@ -31,11 +35,11 @@ const cls = computed<string>(() => {
     is-icon
     :id="id"
     :class-name="cls"
-    @click="() => $emit('click')"
+    @click="event => emit('click', event)"
   >
-    <font-awesome-icon :icon="icon" :spin="spin" />
+    <cl-icon :icon="icon" :spin="spin" />
     <div v-if="badgeIcon" class="badge-icon">
-      <font-awesome-icon :icon="badgeIcon" />
+      <cl-icon :icon="badgeIcon" />
     </div>
   </cl-button>
 </template>
@@ -49,19 +53,3 @@ const cls = computed<string>(() => {
   color: var(--cl-white);
 }
 </style>
-
-<style scoped>
-.el-button,
-.el-button--mini,
-.fa-icon-button,
-.fa-icon-button:deep(.el-button),
-.fa-icon-button:deep(.el-button--mini),
-.fa-icon-button:deep(.button) {
-  padding: 7px;
-}
-
-.fa-icon-button:deep(.el-button--small) {
-  width: 32px;
-  height: 32px;
-}
-</style>
diff --git a/src/components/git/GitBranchSelect.vue b/src/components/git/GitBranchSelect.vue
@@ -22,6 +22,10 @@ const props = withDefaults(
 const emit = defineEmits<{
   (e: 'select-local', value: string): void;
   (e: 'select-remote', value: string): void;
+  (e: 'delete', value: string): void;
+  (e: 'new-branch'): void;
+  (e: 'delete-branch', value: string): void;
+  (e: 'new-tag'): void;
 }>();
 
 const t = translate;
@@ -78,12 +82,29 @@ const onSelect = (value: string) => {
     emit('select-remote', value);
   }
 };
+
+const onNewBranch = () => {
+  selectRef.value?.blur();
+  emit('new-branch');
+};
+
+const onNewTag = () => {
+  selectRef.value?.blur();
+  emit('new-tag');
+};
+
+const onDeleteBranch = (value: string, event: Event) => {
+  event.stopPropagation();
+  selectRef.value?.blur();
+  emit('delete-branch', value);
+};
 </script>
 
 <template>
-  <div ref="selectRef" class="git-branch-select">
+  <div class="git-branch-select" :class="className">
     <el-select
-      :class="className"
+      ref="selectRef"
+      popper-class="git-branch-select-dropdown"
       v-model="model"
       :disabled="disabled || loading"
       :placeholder="t('components.git.branches.select')"
@@ -102,21 +123,25 @@ const onSelect = (value: string) => {
         :label="op.label"
         :value="op.value"
       >
-        <div
-          style="
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            gap: 24px;
-          "
-        >
-          <div>
+        <div class="branch-wrapper">
+          <div class="icon-wrapper">
             <cl-icon :icon="['fa', 'code-branch']" />
-            <span style="margin-left: 5px">{{ op.label }}</span>
+            <span>{{ op.label }}</span>
           </div>
-          <span style="color: var(--cl-disabled-color); font-weight: normal">
+          <span class="remote">
             {{ getRemoteBranchFromLocalBranch(op.branch)?.name }}
           </span>
+          <div class="actions">
+            <cl-fa-icon-button
+              :icon="['fa', 'trash']"
+              size="small"
+              type="danger"
+              :disabled="model === op.value"
+              @click="
+                (event: Event) => onDeleteBranch(op.value as string, event)
+              "
+            />
+          </div>
         </div>
       </el-option>
       <el-option-group :label="t('components.git.branches.remote')">
@@ -126,21 +151,35 @@ const onSelect = (value: string) => {
           :label="op.label"
           :value="op.value"
         >
-          <div
-            style="
-              display: flex;
-              align-items: center;
-              justify-content: space-between;
-              gap: 24px;
-            "
-          >
-            <div>
+          <div class="branch-wrapper">
+            <div class="icon-wrapper">
               <cl-icon :icon="['fa', 'code-branch']" />
-              <span style="margin-left: 5px">{{ op.label }}</span>
+              <span>{{ op.label }}</span>
             </div>
           </div>
         </el-option>
       </el-option-group>
+
+      <template #footer>
+        <ul class="el-select-dropdown__list">
+          <li class="el-select-dropdown__item" @click="onNewBranch">
+            <div>
+              <cl-icon :icon="['fa', 'plus']" />
+              <span>
+                {{ t('components.git.branches.new') }}
+              </span>
+            </div>
+          </li>
+          <li v-if="false" class="el-select-dropdown__item" @click="onNewTag">
+            <div>
+              <cl-icon :icon="['fa', 'plus']" />
+              <span>
+                {{ t('components.git.tags.new') }}
+              </span>
+            </div>
+          </li>
+        </ul>
+      </template>
     </el-select>
   </div>
 </template>
@@ -151,3 +190,72 @@ const onSelect = (value: string) => {
   margin-right: 10px;
 }
 </style>
+<style lang="scss">
+.git-branch-select-dropdown {
+  .branch-wrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 24px;
+
+    .icon-wrapper {
+      .icon {
+        margin-right: 5px;
+      }
+    }
+
+    .remote {
+      color: var(--cl-disabled-color);
+      font-weight: normal;
+    }
+
+    .actions {
+      height: 100%;
+      position: absolute;
+      right: 0;
+      display: none;
+      align-items: center;
+
+      .button-wrapper {
+        cursor: pointer;
+        color: var(--el-text-color);
+        margin-left: 3px;
+
+        &:last-child {
+          margin-right: 0;
+        }
+      }
+    }
+
+    &:hover {
+      .remote {
+        visibility: hidden;
+      }
+
+      .actions {
+        display: flex;
+      }
+    }
+  }
+
+  .el-select-dropdown__footer {
+    padding: 0;
+
+    .el-select-dropdown__item {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 24px;
+
+      &:hover {
+        background-color: var(--el-fill-color-light);
+      }
+
+      .icon {
+        margin-right: 5px;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/components/nav/NavTabs.vue b/src/components/nav/NavTabs.vue
@@ -4,7 +4,7 @@ import { translate } from '@/utils';
 
 const t = translate;
 
-const props = defineProps<{
+defineProps<{
   items: NavItem[];
   activeKey: string;
   collapsed: boolean;
@@ -43,9 +43,7 @@ const getClassName = (item: NavItem): string => {
       "
     >
       <div class="toggle" @click="onToggle">
-        <font-awesome-icon
-          :icon="collapsed ? ['fa', 'indent'] : ['fa', 'outdent']"
-        />
+        <cl-icon :icon="collapsed ? ['fa', 'indent'] : ['fa', 'outdent']" />
       </div>
     </el-tooltip>
     <el-menu :default-active="activeKey" mode="horizontal" @select="onSelect">
@@ -58,12 +56,12 @@ const getClassName = (item: NavItem): string => {
         :disabled="item.disabled"
       >
         <el-tooltip :content="item.tooltip" :disabled="!item.tooltip">
-          <template v-if="!!item.icon">
-            <font-awesome-icon :icon="item.icon" />
-          </template>
-          <template v-else>
-            {{ item.title ? t(item.title) : '' }}
-          </template>
+          <div class="item-wrapper">
+            <cl-icon :icon="item.icon" />
+            <span class="label">
+              {{ item.title ? t(item.title) : '' }}
+            </span>
+          </div>
         </el-tooltip>
       </el-menu-item>
     </el-menu>
@@ -111,6 +109,15 @@ const getClassName = (item: NavItem): string => {
         color: var(--cl-info-color);
         border-bottom: none;
       }
+
+      .item-wrapper {
+        display: flex;
+        align-items: center;
+
+        .icon {
+          margin-right: 3px;
+        }
+      }
     }
   }
 
@@ -122,9 +129,8 @@ const getClassName = (item: NavItem): string => {
   }
 }
 </style>
-
 <style scoped>
-.nav-tabs:deep(.el-menu--horizontal) {
-  /*border-bottom: none;*/
+.nav-tabs:deep(.el-menu-item .icon) {
+  margin-right: 5px;
 }
 </style>
diff --git a/src/components/table/Table.vue b/src/components/table/Table.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 defineOptions({ name: 'ClTable' });
 import { inject, ref, computed } from 'vue';
+import { ElTable } from 'element-plus';
 import useColumn from '@/components/table/column';
 import useHeader from '@/components/table/header';
 import useAction from '@/components/table/action';
@@ -31,6 +32,8 @@ const props = withDefaults(
     height?: string | number;
     maxHeight?: string | number;
     embedded?: boolean;
+    border?: boolean;
+    fit?: boolean;
   }>(),
   {
     data: emptyArrayFunc,
@@ -43,6 +46,7 @@ const props = withDefaults(
     visibleButtons: emptyArrayFunc,
     paginationLayout: 'total, sizes, prev, pager, next',
     paginationPosition: TABLE_PAGINATION_POSITION_BOTTOM,
+    border: true,
   }
 );
 
@@ -85,9 +89,19 @@ const {
   onEdit,
   onDelete,
   onExport,
+  clearSelection,
 } = useAction(emit, tableRef, actionFunctions as ListLayoutActionFunctions);
 
 const { onCurrentChange, onSizeChange } = usePagination(props, emit);
+
+const checkAll = () => {
+  tableRef.value?.toggleRowSelection(true);
+};
+
+defineExpose({
+  clearSelection,
+  checkAll,
+});
 </script>
 
 <template>
@@ -121,11 +135,11 @@ const { onCurrentChange, onSizeChange } = usePagination(props, emit);
       v-if="selectedColumns.length > 0"
       ref="tableRef"
       :data="tableData"
-      :fit="false"
+      :fit="fit"
       :row-key="rowKey"
       :height="height"
       :max-height="maxHeight"
-      border
+      :border="border"
       @selection-change="onSelectionChange"
     >
       <el-table-column