[#2001] Extract c-file-type-checkboxes from Summary, Authorship and Zoom

frontend/src/components/c-file-type-checkboxes.vue

@@ -0,0 +1,120 @@
+<template lang="pug">
+.checkboxes.mui-form--inline(v-if="fileTypes.length > 0")
+  label.all-checkbox
+    input.mui-checkbox--fileType#all(type="checkbox", v-model="isAllChecked", value="all")
+    span(v-if="allCheckboxLabel", v-bind:title="getTitle(allCheckboxLabel)")
+      span {{ getLabel(allCheckboxLabel) }}
+    span(v-else) All&nbsp;
+  label(
+    v-for="fileType, index in fileTypes",
+    v-bind:key="fileType",
+    v-bind:style="{\
+      'background-color': fileTypeColors[fileType],\
+      'color': getFontColor(fileTypeColors[fileType])\
+      }"
+  )
+    input.mui-checkbox--fileType(type="checkbox", v-bind:value="fileType",
+      v-model="localSelectedFileTypes", v-bind:id="fileType")
+    span(v-if="fileTypeCheckboxLabels", v-bind:title="getTitle(fileTypeCheckboxLabels[index])")
+      span {{ getLabel(fileTypeCheckboxLabels[index]) }}
+    span(v-else) {{ this.fileTypes[index] }}&nbsp;
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue';
+
+export default defineComponent({
+  name: 'c-file-type-checkboxes',
+  props: {
+    fileTypes: {
+      type: Array as PropType<Array<string>>,
+      required: true,
+    },
+    fileTypeColors: {
+      type: Object as PropType<Record<string, string>>,
+      required: true,
+    },
+    selectedFileTypes: {
+      type: Array as PropType<Array<string>>,
+      required: true,
+    },
+    allCheckboxLabel: {
+      type: Object as PropType<{
+        fileTitle: string,
+        fileType: string,
+        lineCount: number,
+        blankLineCount: number,
+      }>,
+      default: undefined,
+    },
+    fileTypeCheckboxLabels: {
+      type: Array as PropType<Array<{
+        fileTitle: string,
+        fileType: string,
+        lineCount: number,
+        blankLineCount: number,
+      }>>,
+      default: undefined,
+    },
+  },
+  emits: ['update:selectedFileTypes', 'select-all-checked'],
+  computed: {
+    isAllChecked: {
+      get(): boolean {
+        return this.selectedFileTypes.length === this.fileTypes.length;
+      },
+      set(value: boolean): void {
+        if (value) {
+          this.localSelectedFileTypes = this.fileTypes.slice();
+        } else {
+          this.localSelectedFileTypes = [];
+        }
+        this.$emit('select-all-checked', value);
+      },
+    },
+    localSelectedFileTypes: {
+      get(): Array<string> {
+        return this.selectedFileTypes;
+      },
+      set(value: Array<string>): void {
+        this.$emit('update:selectedFileTypes', value);
+      },
+    },
+  },
+  methods: {
+    getFontColor(color: string): string {
+      return window.getFontColor(color);
+    },
+    getTitle(label: {
+      fileTitle: string,
+      fileType: string,
+      lineCount: number,
+      blankLineCount: number,
+    }): string {
+      return `${label.fileTitle}: Blank: ${label.blankLineCount}, `
+        + `Non-Blank: ${label.lineCount - label.blankLineCount}`;
+    },
+    getLabel(label: {
+      fileTitle: string,
+      fileType: string,
+      lineCount: number,
+      blankLineCount: number,
+    }): string {
+      return `${label.fileType}\xA0\xA0`
+        + `${label.blankLineCount}\xA0\xA0`
+        + `(${label.lineCount - label.blankLineCount})\xA0`;
+    },
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.all-checkbox {
+  background-color: #000000;
+  color: #ffffff;
+}
+
+.mui-checkbox--fileType {
+  vertical-align: middle;
+}
+</style>

frontend/src/views/c-authorship.vue

@@ -61,27 +61,15 @@
           v-model="filterType",
           v-on:change="indicateCheckBoxes"
         )
-        .checkboxes.mui-form--inline(v-if="info.files.length > 0")
-          label(style='background-color: #000000; color: #ffffff')
-            input.mui-checkbox--fileType#all(type="checkbox", v-model="isSelectAllChecked")
-            span(v-bind:title="getTotalFileBlankLineInfo()")
-              span All 
-              span {{ totalLineCount }} 
-              span ({{ totalLineCount - totalBlankLineCount }}) 
-          template(v-for="fileType in Object.keys(fileTypeLinesObj)", v-bind:key="fileType")
-            label(
-              v-bind:style="{\
-                'background-color': fileTypeColors[fileType],\
-                'color': getFontColor(fileTypeColors[fileType])\
-                }"
-            )
-              input.mui-checkbox--fileType(type="checkbox",
-                v-bind:id="fileType", v-bind:value="fileType",
-                v-on:change="indicateCheckBoxes", v-model="selectedFileTypes")
-              span(v-bind:title="getFileTypeBlankLineInfo(fileType)")
-                span {{ fileType }} {{ fileTypeLinesObj[fileType] }} 
-                span ({{ fileTypeLinesObj[fileType] - fileTypeBlankLinesObj[fileType] }}) 
-          br
+        c-file-type-checkboxes(
+          v-bind:file-types="fileTypes",
+          v-bind:file-type-colors="fileTypeColors",
+          v-model:selected-file-types="selectedFileTypes",
+          @update:selected-file-types="indicateCheckBoxes",
+          v-bind:all-checkbox-label="allCheckboxLabel",
+          v-bind:file-type-checkbox-labels="checkboxLabels"
+        )
+        .checkboxes.mui-form--inline
           label.binary-fileType(v-if="binaryFilesCount > 0")
             input.mui-checkbox--fileType(type="checkbox", v-model="isBinaryChecked")
             span(
@@ -112,6 +100,7 @@ import { mapState } from 'vuex';
 import { minimatch } from 'minimatch';
 import brokenLinkDisabler from '../mixin/brokenLinkMixin';
 import cAuthorshipFile from '../components/c-authorship-file.vue';
+import cFileTypeCheckboxes from '../components/c-file-type-checkboxes.vue';
 import getNonRepeatingColor from '../utils/random-color-generator';
 import { StoreState } from '../types/vuex.d';
 import { FileResult, Line } from '../types/zod/authorship-type';
@@ -126,22 +115,22 @@ const filesSortDict = {
 };
 
 function authorshipInitialState(): {
-    isLoaded: boolean,
-    selectedFiles: Array<AuthorshipFile>,
-    filterType: FilterType,
-    selectedFileTypes: Array<string>,
-    fileTypes: Array<string>
-    filesLinesObj: { [key: string]: number}
-    fileTypeBlankLinesObj: { [key: string]: number },
-    filesSortType: FilesSortType,
-    toReverseSortFiles: boolean,
-    isBinaryFilesChecked: boolean,
-    isIgnoredFilesChecked: boolean,
-    searchBarValue: string,
-    authorDisplayName: string,
-    authors: Set<string>,
-    selectedColors: Array<string>
-    } {
+  isLoaded: boolean,
+  selectedFiles: Array<AuthorshipFile>,
+  filterType: FilterType,
+  selectedFileTypes: Array<string>,
+  fileTypes: Array<string>
+  filesLinesObj: { [key: string]: number }
+  fileTypeBlankLinesObj: { [key: string]: number },
+  filesSortType: FilesSortType,
+  toReverseSortFiles: boolean,
+  isBinaryFilesChecked: boolean,
+  isIgnoredFilesChecked: boolean,
+  searchBarValue: string,
+  authorDisplayName: string,
+  authors: Set<string>,
+  selectedColors: Array<string>
+  } {
   return {
     isLoaded: false,
     selectedFiles: [] as Array<AuthorshipFile>,
@@ -168,6 +157,7 @@ export default defineComponent({
   name: 'c-authorship',
   components: {
     cAuthorshipFile,
+    cFileTypeCheckboxes,
   },
   mixins: [brokenLinkDisabler],
   emits: [
@@ -179,7 +169,7 @@ export default defineComponent({
     filterType: FilterType,
     selectedFileTypes: Array<string>,
     fileTypes: Array<string>
-    filesLinesObj: { [key: string]: number}
+    filesLinesObj: { [key: string]: number }
     fileTypeBlankLinesObj: { [key: string]: number },
     filesSortType: FilesSortType,
     toReverseSortFiles: boolean,
@@ -199,21 +189,6 @@ export default defineComponent({
         * window.comparator(filesSortDict[this.filesSortType])(a, b);
     },
 
-    isSelectAllChecked: {
-      get(): boolean {
-        return this.selectedFileTypes.length === this.fileTypes.length;
-      },
-      set(value: boolean): void {
-        if (value) {
-          this.selectedFileTypes = this.fileTypes.slice();
-        } else {
-          this.selectedFileTypes = [];
-        }
-
-        this.indicateCheckBoxes();
-      },
-    },
-
     isBinaryChecked: {
       get(): boolean {
         return this.isBinaryFilesChecked;
@@ -276,6 +251,31 @@ export default defineComponent({
       return this.info.files.filter((file) => file.isIgnored).length;
     },
 
+    allCheckboxLabel(): {
+      fileTitle: string,
+      fileType: string,
+      lineCount: number,
+      blankLineCount: number,
+      } {
+      return this.getCheckboxDetails('Total', 'All', this.totalLineCount, this.totalBlankLineCount);
+    },
+
+    checkboxLabels(): Array<{
+      fileTitle: string,
+      fileType: string,
+      lineCount: number,
+      blankLineCount: number,
+    }> {
+      return this.fileTypes.map(
+        (fileType) => this.getCheckboxDetails(
+          fileType,
+          fileType,
+          this.fileTypeLinesObj[fileType],
+          this.fileTypeBlankLinesObj[fileType],
+        ),
+      );
+    },
+
     ...mapState({
       fileTypeColors: (state: unknown) => (state as StoreState).fileTypeColors,
       info: (state: unknown) => (state as StoreState).tabAuthorshipInfo,
@@ -637,17 +637,18 @@ export default defineComponent({
       this.updateFileTypeHash();
     },
 
-    getFileTypeBlankLineInfo(fileType: string): string {
-      return `${fileType}: Blank: ${this.fileTypeBlankLinesObj[fileType]},
-        Non-Blank: ${this.filesLinesObj[fileType] - this.fileTypeBlankLinesObj[fileType]}`;
-    },
-
-    getTotalFileBlankLineInfo(): string {
-      return `Total: Blank: ${this.totalBlankLineCount}, Non-Blank: ${this.totalLineCount - this.totalBlankLineCount}`;
-    },
-
-    getFontColor(color: string): string {
-      return window.getFontColor(color);
+    getCheckboxDetails(fileTitle: string, fileType: string, lineCount: number, blankLineCount: number): {
+      fileTitle: string,
+      fileType: string,
+      lineCount: number,
+      blankLineCount: number,
+    } {
+      return {
+        fileTitle,
+        fileType,
+        lineCount,
+        blankLineCount,
+      };
     },
   },
 });

frontend/src/views/c-summary.vue

@@ -102,23 +102,13 @@
       a(v-if="!errorIsShowingMore", v-on:click="toggleErrorShowMore()") SHOW ALL...
       a(v-else, v-on:click="toggleErrorShowMore()") SHOW LESS...
   .fileTypes(v-if="filterBreakdown && !isWidgetMode")
-    .checkboxes.mui-form--inline(v-if="Object.keys(fileTypeColors).length > 0")
-      label(style='background-color: #000000; color: #ffffff')
-        input.mui-checkbox--fileType#all(type="checkbox", v-model="checkAllFileTypes")
-        span All: 
-      template(v-for="fileType in Object.keys(fileTypeColors)", v-bind:key="fileType")
-        label(
-          v-bind:style="{ 'background-color': fileTypeColors[fileType], \
-            'color': getFontColor(fileTypeColors[fileType])}"
-        )
-          input.mui-checkbox--fileType(
-            type="checkbox",
-            v-bind:id="fileType",
-            v-bind:value="fileType",
-            v-model="checkedFileTypes",
-            v-on:change="getFiltered"
-          )
-          span {{ fileType }}
+    c-file-type-checkboxes(
+      v-bind:file-types="fileTypes",
+      v-bind:file-type-colors="fileTypeColors",
+      v-model:selected-file-types="checkedFileTypes",
+      @update:selected-file-types="getFiltered"
+    )
+
   c-summary-charts(
     v-bind:filtered="filtered",
     v-bind:checked-file-types="checkedFileTypes",
@@ -142,6 +132,7 @@ import { mapState } from 'vuex';
 import { PropType, defineComponent } from 'vue';
 
 import cSummaryCharts from '../components/c-summary-charts.vue';
+import cFileTypeCheckboxes from '../components/c-file-type-checkboxes.vue';
 import getNonRepeatingColor from '../utils/random-color-generator';
 import sortFiltered from '../utils/repo-sorter';
 import {
@@ -169,6 +160,7 @@ export default defineComponent({
   name: 'c-summary',
   components: {
     cSummaryCharts,
+    cFileTypeCheckboxes,
   },
   props: {
     repos: {
@@ -246,20 +238,6 @@ export default defineComponent({
     };
   },
   computed: {
-    checkAllFileTypes: {
-      get(): boolean {
-        return this.checkedFileTypes.length === this.fileTypes.length;
-      },
-      set(value: boolean): void {
-        if (value) {
-          this.checkedFileTypes = this.fileTypes.slice();
-        } else {
-          this.checkedFileTypes = [];
-        }
-        this.getFiltered();
-      },
-    },
-
     avgContributionSize(): number {
       let totalLines = 0;
       let totalCount = 0;
@@ -842,7 +820,7 @@ export default defineComponent({
         return result;
       });
 
-      if (!this.checkAllFileTypes) {
+      if (!this.isAllFileTypesChecked()) {
         commitResults = commitResults.filter(
           (result) => Object.values(result.fileTypesAndContributionMap).length > 0,
         );
@@ -1010,12 +988,12 @@ export default defineComponent({
       return window.getDateStr(datems);
     },
 
-    getFontColor(color: string) {
-      return window.getFontColor(color);
+    toggleErrorShowMore(): void {
+      this.errorIsShowingMore = !this.errorIsShowingMore;
     },
 
-    toggleErrorShowMore() {
-      this.errorIsShowingMore = !this.errorIsShowingMore;
+    isAllFileTypesChecked(): boolean {
+      return this.checkedFileTypes.length === this.fileTypes.length;
     },
   },
 });