vue-cli/packages/@vue/cli-ui/src/components/configuration/ProjectConfigurations.vue at dev · vuejs/vue-cli · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<template>
  <div class="project-configurations page">
    <ContentView
      :title="$t('org.vue.views.project-configurations.title')"
      class="limit-width"
    >
      <ApolloQuery
        :query="require('@/graphql/configuration/configurations.gql')"
        class="fill-height"
      >
        <template slot-scope="{ result: { data, loading } }">
          <VueLoadingIndicator
            v-if="loading && (!data || !data.configurations)"
            class="overlay"
          />

          <NavContent
            v-else-if="data"
            :items="generateItems(data.configurations)"
            class="configurations"
          >
            <div
              slot="before"
              class="list-header"
            >
              <VueInput
                v-model="search"
                icon-left="search"
                class="search round"
              />
            </div>

            <ConfigurationItem
              slot-scope="{ item, selected }"
              :configuration="item.configuration"
              :selected="selected"
            />
          </NavContent>
        </template>
      </ApolloQuery>
    </ContentView>
  </div>
</template>

<script>
import RestoreRoute from '@/mixins/RestoreRoute'
import { generateSearchRegex } from '@/util/search'

import CONFIGS from '@/graphql/configuration/configurations.gql'

export default {
  mixins: [
    RestoreRoute({
      baseRoute: { name: 'project-configurations' }
    })
  ],

  metaInfo () {
    return {
      title: this.$t('org.vue.views.project-configurations.title')
    }
  },

  data () {
    return {
      search: ''
    }
  },

  bus: {
    quickOpenProject (project) {
      this.$apollo.getClient().writeQuery({
        query: CONFIGS,
        data: {
          configurations: null
        }
      })
    }
  },

  methods: {
    generateItems (configurations) {
      if (!configurations) return []

      const reg = generateSearchRegex(this.search)
      return configurations.filter(
        item => !reg || item.name.match(reg) || item.description.match(reg)
      ).map(
        configuration => ({
          route: {
            name: 'project-configuration-details',
            params: {
              id: configuration.id
            }
          },
          configuration
        })
      )
    }
  }
}
</script>

<style lang="stylus" scoped>
.project-configurations
  .content-view /deep/ > .content
    overflow-y hidden
</style>