feat: allow to collapse scm summary

Signed-off-by: Olivier Vernin <[email protected]>
updatecli · Nov 20, 2024 · ce54ad7 · ce54ad7
1 parent da6d6a0
commit ce54ad7
Show file tree

Hide file tree

Showing 2 changed files with 104 additions and 63 deletions.
diff --git a/src/components/scm/_summary.vue b/src/components/scm/_summary.vue
@@ -1,76 +1,104 @@
 <template>
     <v-container
+        class="py-8 px-6"
         fluid
     >
-        <v-row
-            v-for="(scmData, url) in data"
-            :key="url"
+        <v-expansion-panels
+            multiple
+            flat
+            tile
+            v-model="localExpandedSummary"
         >
-            <v-col>
-                <v-toolbar
-                    density="compact"
-                    class="text-white"
-                >
-                    <v-toolbar-title
-                        class="flex text-center"
-                    >
-                        <v-icon>{{ getGitIcon(url) }}</v-icon>{{  sanitizeURL(url) }}
-                    </v-toolbar-title>
-
-                </v-toolbar>
+            <v-expansion-panel
+                v-for="(scmData, url) in data"
+                :key="url"
+                :hide-actions="true"
 
-                <v-card
-                    variant="flat"
+            >
+                <v-expansion-panel-title
                 >
-                    <v-card-text>
-                        <v-timeline
-                            density="compact"
-                            align="start"
-                            justify="center"
-                            direction="vertical"
-                            line-thickness="2"
-                            line-color="grey-darken-3"
+                    <v-toolbar
+                        density="compact"
+                        class="text-white"
+                    >
+                        <v-toolbar-title
+                            class="flex text-center"
                         >
-                            <v-timeline-item
-                                v-for="(branchData, branch) in scmData"
-                                :key="branch"
-                                dot-color="grey-darken-3"
-                                icon-color="white"
-                                fill-dot
-                                icon="mdi-source-branch"
+                            <v-icon>{{ getGitIcon(url) }}</v-icon>{{  sanitizeURL(url) }}
+                        </v-toolbar-title>
+                    </v-toolbar>
+                </v-expansion-panel-title>
+                <v-expansion-panel-text>
+                    <v-card
+                        variant="flat"
+                    >
+                        <v-card-text>
+                            <v-timeline
+                                density="compact"
+                                align="start"
+                                justify="center"
+                                direction="vertical"
+                                line-thickness="2"
+                                line-color="grey-darken-3"
                             >
-                                <v-card
-                                    :href="`/pipeline/reports?scmid=${branchData.id}`"
+                                <v-timeline-item
+                                    v-for="(branchData, branch) in scmData"
+                                    :key="branch"
+                                    dot-color="grey-darken-3"
+                                    icon-color="white"
+                                    fill-dot
+                                    icon="mdi-source-branch"
                                 >
-                                    <v-card-title
-                                        class="bg-grey"
+                                    <v-card
+                                        min-width="300"
+                                        flat
                                     >
-                                        {{  branch }}
-                                    </v-card-title>
-                                </v-card>
-                                <v-card-text
-                                    variant="outlined"
-                                    class="text-center"
-                                >
-                                    {{  branchData.total_result }} reports
-                                    <PolarArea :data="getPolarAreaData(url, branch)" :options="polarAreaOptions" />
-
-                                </v-card-text>
-                                <!--
-                                <v-timeline-item-icon
-                                    color="primary"
-                                >
-                                    <v-icon>mdi-source-branch</v-icon>
-                                    {{  branch }}
-                                </v-timeline-item-icon>
-                            -->
-                            </v-timeline-item>
-                        </v-timeline>
-                    </v-card-text>
-                    <v-divider></v-divider>
-                </v-card>
-            </v-col>
-        </v-row>
+                                        <v-card-title
+                                            variant="flat"
+                                        >
+                                            <v-toolbar
+                                                density="compact"
+                                                class="text-white"
+                                                variant="text"
+                                                flat
+                                            >
+                                                <v-toolbar-title
+                                                    class="flex text-center"
+                                                >
+                                                    {{  branch  }}
+                                                </v-toolbar-title>
+
+                                                <v-btn
+                                                    class="text-right"
+                                                    justify-center
+                                                    v-if="!hideButton"
+                                                    :to="`/pipeline/reports?scmid=${branchData.id}`"
+                                                    icon="mdi-arrow-right-circle"
+                                                    slim
+                                                    density="compact"
+                                                >
+                                                </v-btn>
+                                            </v-toolbar>
+                                        </v-card-title>
+                                        <v-card-text
+                                            variant="outlined"
+                                            class="text-center"
+                                        >
+                                            {{  branchData.total_result }} reports
+                                            <PolarArea
+                                                :data="getPolarAreaData(url, branch)"
+                                                :options="polarAreaOptions"
+                                            />
+                                        </v-card-text>
+                                    </v-card>
+                                </v-timeline-item>
+                            </v-timeline>
+                        </v-card-text>
+                        <v-divider></v-divider>
+                    </v-card>
+                </v-expansion-panel-text>
+            </v-expansion-panel>
+        </v-expansion-panels>
     </v-container>
 </template>
 
@@ -97,9 +125,18 @@ export default {
     name: "SCMSummary",
     props: {
         scmid: {},
+        hideButton: {
+            type: Boolean,
+            default: false
+        },
+        expandedSummary: {
+            type: Array,
+            default: () => [],
+        }
     },
     data: () => ({
         data: {},
+        localExpandedSummary: [],
         polarAreaData: {},
         polarAreaOptions: {
             responsive: true,
@@ -110,6 +147,9 @@ export default {
       scmid () {
         this.getSummaryData();
       },
+      expandedSummary(newVal) {
+        this.localExpandedSummary = newVal;
+      },
   },
 
     methods: {
@@ -272,7 +312,6 @@ export default {
                             ]
                         }
                     }
-
                 }
             }
         },

diff --git a/src/views/pipeline/ReportsView.vue b/src/views/pipeline/ReportsView.vue
@@ -21,6 +21,8 @@
       </v-container>
       <PipelineSCMFilter :scmid="scmid" @update-scmid="updateSCMID"/>
       <PipelineSCMSummary
+        :hideButton=true
+        :expanded-summary="[0]"
         :scmid="scmid"
         @update-scmid="updateSCMID"
         class="align-center justify-center"