github.com/covergates/covergates@v0.2.2-0.20201009050117-42ef8a19fb95/web/src/components/SettingGenertal.vue (about)

     1  <template>
     2    <div>
     3      <setting-info />
     4      <v-card flat>
     5        <v-card-title>General</v-card-title>
     6        <v-divider />
     7        <v-card-text>
     8          <v-simple-table>
     9            <template v-slot:default>
    10              <tbody>
    11                <tr>
    12                  <td>Project Setting</td>
    13                  <td class="d-flex align-center">
    14                    <v-switch
    15                      :loading="loading"
    16                      value
    17                      v-model="projectProtected"
    18                      label="Protected"
    19                      @change="saveProtected"
    20                    ></v-switch>
    21                    <span class="mx-5 text-caption">Only authorized user can upload report</span>
    22                  </td>
    23                </tr>
    24                <tr>
    25                  <td>Project Webhooks</td>
    26                  <td class="d-flex align-center">
    27                    <hook-button />
    28                    <v-switch
    29                      :loading="loading"
    30                      value
    31                      v-model="autoMerge"
    32                      label="Auto Merge Report"
    33                      class="mx-5"
    34                      @change="saveAutoMerge"
    35                    ></v-switch>
    36                  </td>
    37                </tr>
    38              </tbody>
    39            </template>
    40          </v-simple-table>
    41        </v-card-text>
    42      </v-card>
    43      <v-card flat>
    44        <v-card-title>Filters</v-card-title>
    45        <v-divider />
    46        <v-card-text>
    47          <v-textarea name="filters" v-model="filters" :hint="hint" flat outlined></v-textarea>
    48        </v-card-text>
    49        <v-card-actions>
    50          <v-spacer></v-spacer>
    51          <v-btn class="mr-5" @click="saveFilters" :loading="loading" :disabled="!repo" small>save</v-btn>
    52        </v-card-actions>
    53      </v-card>
    54    </div>
    55  </template>
    56  
    57  <script lang="ts">
    58  import { Component, Watch } from 'vue-property-decorator';
    59  import Vue from '@/vue';
    60  import HookButton from '@/components/HookButton.vue';
    61  import SettingInfo from '@/components/SettingInfo.vue';
    62  
    63  const defaultHint = `
    64  Filter will remove pattern from the path.
    65  Provide a regular expression each line.
    66  `;
    67  
    68  @Component({
    69    name: 'setting-general',
    70    components: {
    71      HookButton,
    72      SettingInfo
    73    }
    74  })
    75  export default class SettingGeneral extends Vue {
    76    private filters: string;
    77    private hint: string;
    78    private autoMerge: boolean;
    79    private projectProtected: boolean;
    80    private loading: boolean;
    81    constructor() {
    82      super();
    83      this.filters = '';
    84      this.hint = defaultHint;
    85      this.loading = false;
    86      this.autoMerge = false;
    87      this.projectProtected = false;
    88    }
    89  
    90    mounted() {
    91      this.syncSetting();
    92    }
    93  
    94    get repo(): Repository | undefined {
    95      return this.$store.state.repository.current;
    96    }
    97  
    98    get setting(): RepositorySetting | undefined {
    99      return this.$store.state.repository.setting;
   100    }
   101  
   102    get filterText(): string {
   103      if (this.setting && this.setting.filters) {
   104        return this.setting.filters.join('\n');
   105      } else {
   106        return '';
   107      }
   108    }
   109  
   110    @Watch('setting', { deep: true })
   111    onSettingUpdate() {
   112      this.syncSetting();
   113    }
   114  
   115    syncSetting() {
   116      this.filters = this.filterText;
   117      if (this.setting) {
   118        this.autoMerge =
   119          this.setting.mergePR !== undefined ? this.setting.mergePR : false;
   120        this.projectProtected =
   121          this.setting.protected !== undefined ? this.setting.protected : false;
   122      }
   123    }
   124  
   125    saveFilters() {
   126      const setting = this.setting
   127        ? this.setting
   128        : ({ filters: [] } as RepositorySetting);
   129      setting.filters = this.filters.trim().split('\n');
   130      this.saveSetting(setting);
   131    }
   132  
   133    saveAutoMerge() {
   134      const setting = this.setting
   135        ? this.setting
   136        : ({ mergePR: false } as RepositorySetting);
   137      setting.mergePR = this.autoMerge;
   138      this.saveSetting(setting);
   139    }
   140  
   141    saveProtected() {
   142      const setting = this.setting
   143        ? this.setting
   144        : ({ projectProtected: false } as RepositorySetting);
   145      setting.protected = this.projectProtected;
   146      this.saveSetting(setting);
   147    }
   148  
   149    saveSetting(setting: RepositorySetting) {
   150      if (this.repo === undefined) {
   151        return;
   152      }
   153      const base = this.$store.state.base;
   154      const { SCM, NameSpace, Name } = this.repo;
   155      this.loading = true;
   156      this.$http
   157        .post(`${base}/api/v1/repos/${SCM}/${NameSpace}/${Name}/setting`, setting)
   158        .finally(() => {
   159          this.loading = false;
   160        });
   161    }
   162  }
   163  </script>