Split ElementType management component

vue/Corpus/ElementType.vue

-<template>
-  <div>
-    <h2 class="title is-4">Element types</h2>
-    <table class="table is-fullwidth is-hoverable is-narrow">
-      <thead>
-        <tr>
-          <th>Display name</th>
-          <th>Slug</th>
-          <th>Folder</th>
-          <th></th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr v-for="type in sortedTypes" :key="type.slug">
-          <!-- Edit mode -->
-          <template v-if="updateFields.id === type.id">
-            <td>
-              <input
-                class="input"
-                type="text"
-                :disabled="loading"
-                required
-                v-model="updateFields.display_name"
-              />
-              <template v-if="updateErrors.display_name">
-                <p class="help is-danger" v-for="err in updateErrors.display_name" :key="err">{{ err }}</p>
-              </template>
-            </td>
-            <td>
-              <input
-                class="input"
-                type="text"
-                pattern="[-a-zA-Z0-9_]+"
-                :disabled="loading"
-                required
-                v-model="updateFields.slug"
-              />
-              <template v-if="updateErrors.slug">
-                <p class="help is-danger" v-for="err in updateErrors.slug" :key="err">{{ err }}</p>
-              </template>
-            </td>
-            <td><input type="checkbox" v-model="updateFields.folder" /></td>
-            <td>
-              <button
-                class="button is-success"
-                :disabled="!allowUpdate"
-                v-on:click="save"
-              >
-                <i class="icon-check"></i>
-              </button>
-            </td>
-          </template>
-
-          <!-- Display mode -->
-          <template v-else>
-            <td>{{ type.display_name }}</td>
-            <td>{{ type.slug }}</td>
-            <td>
-              <input
-                type="checkbox"
-                :checked="type.folder"
-                disabled
-              />
-            </td>
-            <td>
-              <button
-                class="button"
-                :disabled="!canEdit"
-                v-on:click="edit(type)"
-              >
-                <i class="icon-edit has-text-primary"></i>
-              </button>
-            </td>
-          </template>
-
-        <!-- Empty line to add new type -->
-        </tr><tr>
-          <td>
-            <input
-              class="input"
-              type="text"
-              :disabled="!canEdit"
-              v-model="createFields.display_name"
-            />
-            <template v-if="createErrors.display_name">
-              <p class="help is-danger" v-for="err in createErrors.display_name" :key="err">{{ err }}</p>
-            </template>
-          </td>
-          <td>
-            <input
-              class="input"
-              type="text"
-              pattern="[-a-zA-Z0-9_]+"
-              :disabled="!canEdit"
-              v-model="createFields.slug"
-            />
-            <template v-if="createErrors.slug">
-              <p class="help is-danger" v-for="err in createErrors.slug" :key="err">{{ err }}</p>
-            </template>
-          </td>
-          <td>
-            <input
-              type="checkbox"
-              v-model="createFields.folder"
-              :disabled="!canEdit"
-            />
-          </td>
-          <td>
-            <button class="button is-primary" v-on:click="create" :disabled="!allowCreate">
-              <i class="icon-plus"></i>
-            </button>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-</template>
-
-<script>
-import { corporaMixin } from '~/js/mixins'
-import { orderBy } from 'lodash'
-export default {
-  mixins: [
-    corporaMixin
-  ],
-  props: {
-    corpusId: {
-      type: String,
-      required: true
-    }
-  },
-  data: () => ({
-    loading: false,
-    updateFields: {
-      id: null
-    },
-    createFields: {
-      display_name: '',
-      slug: '',
-      folder: false
-    },
-    updateErrors: {},
-    createErrors: {}
-  }),
-  computed: {
-    sortedTypes () {
-      return orderBy(this.corpus.types, t => t.slug)
-    },
-    canEdit () {
-      return this.canAdmin(this.corpus) && !this.loading
-    },
-    allowUpdate () {
-      return this.updateFields.id &&
-        this.updateFields.display_name.trim() &&
-        /^[-a-zA-Z0-9_]+$/.test(this.updateFields.slug) &&
-        this.canEdit
-    },
-    allowCreate () {
-      return this.createFields.display_name.trim() &&
-        /^[-a-zA-Z0-9_]+$/.test(this.createFields.slug) &&
-        this.canEdit
-    }
-  },
-  methods: {
-    edit (type) {
-      this.updateFields = { ...type }
-    },
-    async save () {
-      if (!this.allowUpdate) return
-      this.loading = true
-      this.updateErrors = {}
-      try {
-        await this.$store.dispatch('corpora/updateType', { corpus: this.corpus.id, ...this.updateFields })
-        this.updateFields = {
-          id: null
-        }
-      } catch (err) {
-        this.updateErrors = err.response.data
-      } finally {
-        this.loading = false
-      }
-    },
-    async create () {
-      if (!this.allowCreate) return
-      this.loading = true
-      this.createErrors = {}
-      try {
-        await this.$store.dispatch('corpora/createType', { corpus: this.corpus.id, ...this.createFields })
-        this.createFields = {
-          display_name: '',
-          slug: '',
-          folder: false
-        }
-      } catch (err) {
-        this.createErrors = err.response.data
-      } finally {
-        this.loading = false
-      }
-    }
-  }
-}
-</script>
-
-<style scoped>
-input {
-  width: auto;
-}
-</style>

vue/Corpus/ElementType/CreationForm.vue

+<template>
+  <tr>
+    <td>
+      <input
+        class="input"
+        type="text"
+        :disabled="!canEdit"
+        v-model="fields.display_name"
+      />
+      <template v-if="errors.display_name">
+        <p class="help is-danger" v-for="err in errors.display_name" :key="err">{{ err }}</p>
+      </template>
+    </td>
+    <td>
+      <input
+        class="input"
+        type="text"
+        pattern="[-a-zA-Z0-9_]+"
+        :disabled="!canEdit"
+        v-model="fields.slug"
+      />
+      <template v-if="errors.slug">
+        <p class="help is-danger" v-for="err in errors.slug" :key="err">{{ err }}</p>
+      </template>
+    </td>
+    <td>
+      <input
+        type="checkbox"
+        v-model="fields.folder"
+        :disabled="!canEdit"
+      />
+    </td>
+    <td>
+      <button class="button is-primary" v-on:click="create" :disabled="!allowCreate">
+        <i class="icon-plus"></i>
+      </button>
+    </td>
+  </tr>
+</template>
+
+<script>
+import { corporaMixin } from '~/js/mixins'
+
+export default {
+  mixins: [
+    corporaMixin
+  ],
+  props: {
+    corpusId: {
+      type: String,
+      required: true
+    }
+  },
+  data: () => ({
+    loading: false,
+    fields: {
+      display_name: '',
+      slug: '',
+      folder: false
+    },
+    errors: {}
+  }),
+  computed: {
+    canEdit () {
+      return this.canAdmin(this.corpus) && !this.loading
+    },
+    allowCreate () {
+      return this.fields.display_name.trim() &&
+        /^[-a-zA-Z0-9_]+$/.test(this.fields.slug) &&
+        this.canEdit
+    }
+  },
+  methods: {
+    async create () {
+      if (!this.allowCreate) return
+      this.loading = true
+      this.errors = {}
+      try {
+        await this.$store.dispatch('corpora/createType', {
+          corpus: this.corpus.id,
+          ...this.fields
+        })
+        this.fields = {
+          display_name: '',
+          slug: '',
+          folder: false
+        }
+      } catch (err) {
+        this.errors = err.response.data
+      } finally {
+        this.loading = false
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+input {
+  width: auto;
+}
+</style>

vue/Corpus/ElementType/List.vue

+<template>
+  <div>
+    <h2 class="title is-4">Element types</h2>
+    <table class="table is-fullwidth is-hoverable is-narrow">
+      <thead>
+        <tr>
+          <th>Display name</th>
+          <th>Slug</th>
+          <th>Folder</th>
+          <th class="is-narrow">Actions</th>
+        </tr>
+      </thead>
+      <tbody>
+        <Row
+          v-for="type in sortedTypes"
+          :key="type.slug"
+          :type="type"
+          :corpus-id="corpusId"
+        />
+        <CreationForm
+          :corpus-id="corpusId"
+        />
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script>
+import { orderBy } from 'lodash'
+import { corporaMixin } from '~/js/mixins'
+import CreationForm from './CreationForm'
+import Row from './Row'
+
+export default {
+  mixins: [
+    corporaMixin
+  ],
+  components: {
+    Row,
+    CreationForm
+  },
+  props: {
+    corpusId: {
+      type: String,
+      required: true
+    }
+  },
+  computed: {
+    sortedTypes () {
+      return orderBy(this.corpus.types, t => t.slug)
+    }
+  }
+}
+</script>

vue/Corpus/ElementType/Row.vue

+<template>
+  <tr>
+    <!-- Edit mode -->
+    <template v-if="fields.id === type.id">
+      <td>
+        <input
+          class="input"
+          type="text"
+          :disabled="loading"
+          required
+          v-model="fields.display_name"
+        />
+        <template v-if="errors.display_name">
+          <p class="help is-danger" v-for="err in errors.display_name" :key="err">{{ err }}</p>
+        </template>
+      </td>
+      <td>
+        <input
+          class="input"
+          type="text"
+          pattern="[-a-zA-Z0-9_]+"
+          :disabled="loading"
+          required
+          v-model="fields.slug"
+        />
+        <template v-if="errors.slug">
+          <p class="help is-danger" v-for="err in errors.slug" :key="err">{{ err }}</p>
+        </template>
+      </td>
+      <td><input type="checkbox" v-model="fields.folder" /></td>
+      <td>
+        <button
+          class="button is-success"
+          :disabled="!allowUpdate"
+          v-on:click="save"
+        >
+          <i class="icon-check"></i>
+        </button>
+      </td>
+    </template>
+
+    <!-- Display mode -->
+    <template v-else>
+      <td>{{ type.display_name }}</td>
+      <td>{{ type.slug }}</td>
+      <td>
+        <input
+          type="checkbox"
+          :checked="type.folder"
+          disabled
+        />
+      </td>
+      <td>
+        <button
+          class="button"
+          :disabled="!canEdit"
+          v-on:click="edit"
+        >
+          <i class="icon-edit has-text-primary"></i>
+        </button>
+      </td>
+    </template>
+  </tr>
+</template>
+
+<script>
+import { corporaMixin } from '~/js/mixins'
+
+export default {
+  mixins: [
+    corporaMixin
+  ],
+  props: {
+    corpusId: {
+      type: String,
+      required: true
+    },
+    type: {
+      type: Object,
+      required: true
+    }
+  },
+  data: () => ({
+    loading: false,
+    fields: {
+      id: null
+    },
+    errors: {}
+  }),
+  computed: {
+    canEdit () {
+      return this.canAdmin(this.corpus) && !this.loading
+    },
+    allowUpdate () {
+      return this.fields.id &&
+        this.fields.display_name.trim() &&
+        /^[-a-zA-Z0-9_]+$/.test(this.fields.slug) &&
+        this.canEdit
+    }
+  },
+  methods: {
+    edit () {
+      this.fields = { ...this.type }
+    },
+    async save () {
+      if (!this.allowUpdate) return
+      this.loading = true
+      this.errors = {}
+      try {
+        await this.$store.dispatch('corpora/updateType', {
+          corpus: this.corpus.id,
+          ...this.fields
+        })
+        this.fields = {
+          id: null
+        }
+      } catch (err) {
+        this.errors = err.response.data
+      } finally {
+        this.loading = false
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+input {
+  width: auto;
+}
+</style>

vue/Corpus/ElementType/index.js

+export { default } from './List'