feat: add filter for commits

src/api/devcloud/project.ts

@@ -49,3 +49,5 @@ export const getCommitsDiff = (projectId: number, from: string, to: string) => a
 );
 
 export const getRelatedProjects = (projectId: number) => axios.get(`${PROJECT_PREFIX}/relate/${projectId}`);
+
+export const getAllBranches = (projectId: number) => axios.get(`branch/list?projectId=${projectId}`);

src/views/Project/Commit.vue

@@ -3,39 +3,60 @@
     <el-row class="row-item title">
       <h2>commit记录</h2>
     </el-row>
+    {{currentBranch}}
+    {{currentAuthors}}
     <div>
-      <div v-if="gits.length === 0">暂无commit记录！</div>
-<!--      <div v-else>-->
-<!--        <ElTimeline>-->
-<!--          <ElTimelineItem-->
-<!--            v-for="(git, index) in gits"-->
-<!--            :key="index"-->
-<!--            :timestamp="git.timestamp"-->
-<!--            placement="top"-->
-<!--            :color="git.relatedType === 'bug_id' ? 'chocolate' : '#42b983'"-->
-<!--            size="large">-->
-<!--            <ElCard>-->
-<!--              <h3 class="id">#{{git.id}}</h3>-->
-<!--              <div style="margin-top: 10px; font-size: 16px">{{git.message}}</div>-->
-<!--              <div style="margin-top: 10px">-->
-<!--                <el-row>-->
-<!--                  <el-col :span="12">-->
-<!--                    处理人：<span style="font-weight: bold">{{git.gitlabUsername}}</span>-->
-<!--                  </el-col>-->
-<!--                  <el-col :span="12">-->
-<!--                    类型：-->
-<!--                    <span v-if="git.relatedType === 'bug_id'" class="node bug">缺陷</span>-->
-<!--                    <span v-else class="node requirement">需求</span></el-col>-->
-<!--                </el-row>-->
-<!--              </div>-->
-<!--            </ElCard>-->
-<!--          </ElTimelineItem>-->
-<!--        </ElTimeline>-->
-<!--      </div>-->
+      <div v-if="originCommits.length === 0">暂无commit记录！</div>
       <div v-else>
+        <el-row :gutter="20">
+          <el-col :span="6">
+            <el-select v-model="currentBranch" class="m-2" placeholder="Select" size="large">
+              <el-option
+                v-for="(branch, index) in branches"
+                :key="index"
+                :label="branch.name"
+                :value="branch.name"
+                @change="onSearch"
+              />
+            </el-select>
+          </el-col>
+
+          <el-col :span="6">
+              <el-select
+                v-model="currentAuthors"
+                multiple
+                collapse-tags
+                placeholder="Select"
+              >
+                <el-option
+                  v-for="(author, index) in authors"
+                  :key="index"
+                  :label="author"
+                  :value="author"
+                />
+              </el-select>
+          </el-col>
+
+          <el-col :span="10">
+<!--            <el-date-picker-->
+<!--              v-model="value1"-->
+<!--              type="daterange"-->
+<!--              range-separator="To"-->
+<!--              start-placeholder="Start date"-->
+<!--              end-placeholder="End date"-->
+<!--            />-->
+<!--            <el-date-picker v-model="value1" type="date" placeholder="Pick a day" />-->
+            <el-input v-model="keyword" placeholder="输入检索message内容或Hash" clearable />
+          </el-col>
+
+          <el-col :span="2">
+            <el-button type="primary" @click="onSearch">过滤</el-button>
+          </el-col>
+
+        </el-row>
         <ElTimeline>
           <ElTimelineItem
-            v-for="(git, index) in gits"
+            v-for="(git, index) in displayCommits"
             :key="index"
             :timestamp="git.timestamp"
             placement="top"
@@ -43,9 +64,9 @@
             size="large">
             <ElCard shadow="hover"
                     @click="clickCommitCard(git.id)">
-              <h3>{{git.title}}</h3>
+              <h3 class="view-text">{{git.title}}</h3>
 <!--              <h3 class="id">{{git.id}}</h3>-->
-              <div class="view-text" style="margin-top: 10px; font-size: 16px; color: #444">{{git.message}}</div>
+<!--              <div class="view-text" style="margin-top: 10px; font-size: 16px; color: #444">{{git.message}}</div>-->
               <div style="margin-top: 10px">
                 <el-row>
                   <el-col :span="6">
@@ -85,17 +106,38 @@ export default {
   name: 'Commit.vue',
   data() {
     return {
-      gits: [],
+      branches: [],
+      originCommits: [],
+      displayCommits: [],
+      authors: [],
+      lastBranch: '',
+      currentBranch: '',
+      currentAuthors: [],
+      keyword: '',
     };
   },
   async mounted() {
-    this.gits = await ProjectAPI.getCommitsByBranch(this.$store.state.workspace.currentProjectId, 'dev');
-    for (let i = 0; i < this.gits.length; i += 1) {
-      this.gits[i].timestamp = formatter(this.gits[i].timestamp);
+    this.branches = await ProjectAPI.getAllBranches(this.$store.state.workspace.currentProjectId);
+    if (this.branches.length !== 0) {
+      this.currentBranch = this.branches[0].name;
+      this.lastBranch = this.currentBranch;
+      await this.loadBranch();
     }
   },
   methods: {
     copy,
+    async loadBranch() {
+      this.originCommits = await ProjectAPI.getCommitsByBranch(this.$store.state.workspace.currentProjectId, this.currentBranch);
+      this.authors = [];
+      for (let i = 0; i < this.originCommits.length; i += 1) {
+        this.originCommits[i].timestamp = formatter(this.originCommits[i].timestamp);
+        const author = this.originCommits[i].gitlabUsername;
+        if (this.authors.indexOf(author) === -1) {
+          this.authors.push(author);
+        }
+      }
+      this.displayCommits = this.originCommits;
+    },
     clickCommitCard(id) {
       console.log(id);
       this.$router.push({
@@ -105,6 +147,15 @@ export default {
         },
       });
     },
+    async onSearch() {
+      if (this.currentBranch !== this.lastBranch) {
+        await this.loadBranch();
+      }
+      this.displayCommits = this.originCommits
+        .filter((commit) => (this.currentAuthors.length === 0 || this.currentAuthors.indexOf(commit.gitlabUsername) >= 0)
+          && (commit.id.startsWith(this.keyword) || commit.title.indexOf(this.keyword) >= 0));
+      console.log('search');
+    },
   },
 };
 </script>
@@ -148,4 +199,7 @@ export default {
   overflow: hidden;
   text-overflow:ellipsis;
 }
+.el-row{
+  margin-bottom: 20px;
+}
 </style>

src/views/Project/CommitDetails.vue

@@ -14,10 +14,10 @@
         <span>{{ commitId }}</span>
         <i class="el-icon-document-copy"></i>
       </el-link>
-      <div class="description-card-text commit-title">标题：
-        <span>{{ commitInfo.title }}</span>
-      </div>
-      <div class="description-card-text">内容：
+<!--      <div class="description-card-text commit-title">标题：-->
+<!--        <span>{{ commitInfo.title }}</span>-->
+<!--      </div>-->
+      <div class="description-card-text">信息：
         <span>{{ commitInfo.message }}</span>
       </div>
       <div class="description-card-text">时间：
@@ -41,7 +41,7 @@
       变更详情
     </el-divider>
     <div v-if="parentsCount > 0">
-      <el-row>
+      <el-row :gutter="20">
         <el-col :span="8">
           <el-row :gutter="20">
             <el-col :span="12">
@@ -71,7 +71,7 @@
           </el-row>
           <el-row>
             <el-table :data="displayDiff[currentParentIndex]"
-                      max-height="300px"
+                      max-height="350px"
                       style="width: 100%"
                       highlight-current-row
                       @current-change="handleCurrentChange">
@@ -88,10 +88,9 @@
             </el-table>
           </el-row>
         </el-col>
-        <el-col :span="1"> </el-col>
-        <el-col :span="15">
+        <el-col :span="16" style="height: 400px">
           <el-empty v-if="diffHtml === ''" description="请在左侧选择文件查看" />
-          <div v-html="diffHtml" v-cloak></div>
+          <div v-html="diffHtml" v-cloak ></div>
         </el-col>
       </el-row>
     </div>
@@ -175,6 +174,7 @@ export default {
         drawFileList: false,
         matching: 'lines',
         outputFormat: 'line-by-line',
+        // maxLineSizeInBlockForComparison: 10,
       });
     },
     goBack() {