diff --git a/cateditor/src/components/MaterialList.vue b/cateditor/src/components/MaterialList.vue
deleted file mode 100644
index 7943248..0000000
--- a/cateditor/src/components/MaterialList.vue
+++ /dev/null
@@ -1,117 +0,0 @@
-<template>
-  <v-card>
-    <v-card class="subheading font-weight-bold pa-2" color="grey lighten-2">
-      Styles
-    </v-card>
-    <!-- <v-toolbar dense>
-         <v-toolbar-title>Categories</v-toolbar-title>
-         <v-spacer></v-spacer>
-         <v-btn icon><v-icon>add</v-icon></v-btn>
-         </v-toolbar> -->
-
-    <v-card flat class="scroll-area">
-    <draggable v-model="materials" group="materials">
-      <div v-for="item in materials" :key="item.id">
-        <v-hover
-          :key="item.id"
-          :materialid="item.id">
-          <v-list-tile
-            slot-scope="{ hover }"
-            :class="listItemClasses(item.id, hover)"
-            @click="selectMaterial(item.id)"
-          >
-            <v-list-tile-content>
-              <v-list-tile-title><b>{{ item.id }}</b> {{ item.name }}</v-list-tile-title>
-              <v-list-tile-sub-title v-html="item.color"></v-list-tile-sub-title>
-            </v-list-tile-content>
-
-            <v-list-tile-action>
-              <span class="group">
-                <v-btn icon @click="popInfo(item.id)">
-                  <v-icon small color="grey lighten-1">info</v-icon>
-                </v-btn>
-                <v-btn icon @click="popDelete(item.id)">
-                  <v-icon small color="grey lighten-1">delete</v-icon>
-                </v-btn>
-              </span>
-            </v-list-tile-action>
-
-          </v-list-tile>
-        </v-hover>
-      </div>
-    </draggable>
-    </v-card>
-
-    <!-- <v-flex xs5>
-         <RawDisplayer :value="materials" title="Data" />
-         </v-flex> -->
-
-  </v-card>
-</template>
-
-<script>
-import draggable from 'vuedraggable'
-import SelectionMixin from './SelectionMixin'
-/* import RawDisplayer from './RawDisplayer' */
-/* import SectionInfoDialog from './SectionInfoDialog'
- * import SectionDeleteDialog from './SectionDeleteDialog' */
-
-export default {
-  mixins: [SelectionMixin],
-  components: {
-    draggable,
-    /* SectionInfoDialog,
-     * SectionDeleteDialog, */
-    /*     RawDisplayer */
-  },
-  /* props: {
-   * }, */
-  /* data: () => ({
-   * }), */
-  computed: {
-    materials: {
-      get () {
-        if (this.selectedFamilyID != null) {
-          let family = this.selectedFamily()
-          return this.findMaterials(family.materials)
-        } else if (this.selectedModelID != null) {
-          // TODO
-          return []
-        } else {
-          return []
-        }
-      },
-      /* set (value) {
-       *   // TODO complicated logic
-       * } */
-    },
-  },
-  methods: {
-    listItemClasses: function (id, hovering) {
-      /* if (id === this.selectedMaterial) {
-         return 'primary'
-         } else */
-      if (hovering) {
-        return 'grey lighten-4'
-      } else {
-        return ''
-      }
-    },
-    popInfo: function (id) {
-      this.selectMaterial(id)
-      //this.showSectionPopup = true
-    },
-    popDelete: function (id) {
-      this.selectMaterial(id)
-      //this.showDeleteSectionPopup = true
-    },
-  }
-}
-</script>
-
-<style scoped>
-.scroll-area {
-  height: 300px;
-  overflow-y: auto;
-}
-</style>
diff --git a/cateditor/src/components/ProductFamilyList.vue b/cateditor/src/components/ProductFamilyList.vue
deleted file mode 100644
index 978bea1..0000000
--- a/cateditor/src/components/ProductFamilyList.vue
+++ /dev/null
@@ -1,121 +0,0 @@
-<template>
-  <v-card>
-    <v-card class="subheading font-weight-bold pa-2" color="grey lighten-2">
-      Product Families
-    </v-card>
-
-    <v-card flat class="scroll-area">
-      <draggable v-model="families" group="categories">
-        <div v-for="item in families" :key="item.id">
-          <v-hover :key="item.id">
-            <v-list-tile
-              slot-scope="{ hover }"
-              :class="listItemClasses(item.id, hover)"
-              @click="selectFamily(item.id)"
-            >
-              <v-list-tile-content>
-                <v-list-tile-title v-html="item.name"></v-list-tile-title>
-                <v-list-tile-sub-title
-                  class="caption font-weight-light"
-                  color="grey lighten-2">
-                  {{item.models.length}} {{item.models.length | pluralize('model') }}
-                </v-list-tile-sub-title>
-              </v-list-tile-content>
-
-              <v-list-tile-action>
-                <span class="group">
-                  <v-btn icon @click.stop="popInfo(item.id)">
-                    <v-icon small color="grey lighten-1">info</v-icon>
-                  </v-btn>
-                  <v-btn icon @click.stop="popDelete(item.id)">
-                    <v-icon small color="grey lighten-1">delete</v-icon>
-                  </v-btn>
-                </span>
-              </v-list-tile-action>
-            </v-list-tile>
-          </v-hover>
-        </div>
-      </draggable>
-      </v-card>
-
-    <!-- <v-flex xs5>
-         <RawDisplayer :value="families" title="Data" />
-         </v-flex> -->
-
-    <!-- <SectionInfoDialog v-model="showInfoPopup" v-bind:section="selectedSectionID"/>
-         <SectionDeleteDialog v-model="showDeletePopup" v-bind:section="selectedSectionID"/> -->
-  </v-card>
-</template>
-
-<script>
-import draggable from 'vuedraggable'
-import Vue2Filters from 'vue2-filters'
-import SelectionMixin from './SelectionMixin'
-/* import RawDisplayer from './RawDisplayer' */
-/* import SectionInfoDialog from './SectionInfoDialog'
- * import SectionDeleteDialog from './SectionDeleteDialog' */
-
-export default {
-  mixins: [Vue2Filters.mixin,
-           SelectionMixin],
-  components: {
-    draggable,
-    /* SectionInfoDialog,
-     * SectionDeleteDialog, */
-    /*     RawDisplayer, */
-  },
-  props: {
-    selected: Number,
-  },
-  data: () => ({
-    showInfoPopup: false,
-    showDeletePopup: false,
-  }),
-  computed: {
-    families: {
-      get () {
-        return this.selectedFamilies()
-      },
-      set (value) {
-        // TODO complicated logic
-        //this.$store.dispatch('SET_CAT_SECTIONS', value)
-      }
-    },
-    /*currentSectionData: {
-      get () {
-        return this.$store.getters.SELECTED_SECTION
-      },
-    },*/
-  },
-  methods: {
-    listChoose: function (evt) {
-      var id = Number(evt.item.firstChild.getAttribute('familyid'))
-      this.selectFamily(id)
-    },
-    listItemClasses: function (id, hovering) {
-      if (id === this.selectedFamilyID) {
-        return 'primary'
-      } else if (hovering) {
-        return 'grey lighten-4'
-      } else {
-        return ''
-      }
-    },
-    popInfo: function (id) {
-      this.selectFamily(id)
-      this.showInfoPopup = true
-    },
-    popDelete: function (id) {
-      this.selectFamily(id)
-      this.showDeletePopup = true
-    },
-  }
-}
-</script>
-
-<style scoped>
-.scroll-area {
-  height: 300px;
-  overflow-y: auto;
-}
-</style>
diff --git a/cateditor/src/components/SectionList.vue b/cateditor/src/components/SectionList.vue
deleted file mode 100644
index d891c6d..0000000
--- a/cateditor/src/components/SectionList.vue
+++ /dev/null
@@ -1,128 +0,0 @@
-<template>
-  <v-card>
-    <v-card class="subheading font-weight-bold pa-2" color="grey lighten-2">
-      Sections
-    </v-card>
-
-    <!-- <v-toolbar dense>
-         <v-toolbar-title>Sections</v-toolbar-title>
-         <v-spacer></v-spacer>
-         <v-btn icon>
-         <v-tooltip top>
-         <template v-slot:activator="{ on }">
-         <v-icon v-on="on">add</v-icon>
-         </template>
-         <span>Add new section</span>
-         </v-tooltip>
-         </v-btn>
-         </v-toolbar> -->
-
-    <v-card flat class="scroll-area">
-    <draggable v-model="sections" group="categories">
-      <div v-for="item in sections" :key="item.id">
-        <v-hover :key="item.id">
-          <v-list-tile
-            slot-scope="{ hover }"
-            :class="listItemClasses(item.id, hover)"
-            @click="selectSection(item.id)"
-          >
-            <v-list-tile-content>
-              <v-list-tile-title v-html="item.name"></v-list-tile-title>
-                <v-list-tile-sub-title
-                  class="caption font-weight-light"
-                  color="grey lighten-2">
-                  12 models
-                </v-list-tile-sub-title>
-            </v-list-tile-content>
-
-            <v-list-tile-action>
-              <span class="group">
-                <v-btn icon @click.stop="popInfo(item.id)">
-                  <v-icon small color="grey lighten-1">info</v-icon>
-                </v-btn>
-                <v-btn icon @click.stop="popDelete(item.id)">
-                  <v-icon small color="grey lighten-1">delete</v-icon>
-                </v-btn>
-              </span>
-            </v-list-tile-action>
-
-          </v-list-tile>
-        </v-hover>
-      </div>
-    </draggable>
-    </v-card>
-
-    <SectionInfoDialog v-model="showSectionPopup" v-bind:section="selectedSectionID"/>
-    <SectionDeleteDialog v-model="showDeleteSectionPopup" v-bind:section="selectedSectionID"/>
-
-    <!--<v-flex xs5>
-         <RawDisplayer :value="sections" title="Data" />
-         </v-flex>-->
-
-  </v-card>
-</template>
-
-<script>
-import draggable from 'vuedraggable'
-import SelectionMixin from './SelectionMixin'
-/* import RawDisplayer from './RawDisplayer' */
-import SectionInfoDialog from './SectionInfoDialog'
-import SectionDeleteDialog from './SectionDeleteDialog'
-
-export default {
-  mixins: [SelectionMixin],
-  components: {
-    draggable,
-    SectionInfoDialog,
-    SectionDeleteDialog,
-    // RawDisplayer,
-  },
-  props: {
-    selected: Number
-  },
-  data: () => ({
-    showSectionPopup: false,
-    showDeleteSectionPopup: false,
-  }),
-  computed: {
-    sections: {
-      get () {
-        return this.$store.getters.CAT_SECTIONS
-      },
-      set (value) {
-        this.$store.dispatch('SET_CAT_SECTIONS', value)
-      }
-    },
-  },
-  methods: {
-    listChoose: function(evt) {
-      var id = Number(evt.item.firstChild.getAttribute('sectionid'))
-      this.selectSection(id)
-    },
-    listItemClasses: function(id, hovering) {
-      if (id === this.selectedSectionID) {
-        return 'primary'
-      } else if (hovering) {
-        return 'grey lighten-4'
-      } else {
-        return ''
-      }
-    },
-    popInfo: function(id) {
-      this.selectSection(id)
-      this.showSectionPopup = true
-    },
-    popDelete: function(id) {
-      this.selectSection(id)
-      this.showDeleteSectionPopup = true
-    }
-  }
-}
-</script>
-
-<style scoped>
-.scroll-area {
-  height: 300px;
-  overflow-y: auto;
-}
-</style>
diff --git a/cateditor/src/components/SelectionMixin.js b/cateditor/src/components/SelectionMixin.js
deleted file mode 100644
index 7621bb6..0000000
--- a/cateditor/src/components/SelectionMixin.js
+++ /dev/null
@@ -1,111 +0,0 @@
-const SelectionMixin = { // eslint-disable-line no-unused-vars
-  computed: {
-    selectedSectionID: {
-      get() {
-        return this.$store.getters.SELECTED_SECTION_ID
-      },
-      set(value) {
-        this.$store.dispatch('SET_SELECTED_SECTION_ID', value)
-      }
-    },
-    selectedFamilyID: {
-      get() {
-        return this.$store.getters.SELECTED_FAMILY_ID
-      },
-      set(value) {
-        this.$store.dispatch('SET_SELECTED_FAMILY_ID', value)
-      }
-    },
-    selectedModelID: {
-      get() {
-        return this.$store.getters.SELECTED_MODEL_ID
-      },
-      set(value) {
-        this.$store.dispatch('SET_SELECTED_MODEL_ID', value)
-      }
-    },
-    selectedMaterial: {
-      get() {
-        return this.$store.getters.SELECTED_MATERIAL_ID
-      },
-      set(value) {
-        this.$store.dispatch('SET_SELECTED_MATERIAL_ID', value)
-      }
-    },
-  },
-  methods: {
-    selectSection: function(id) {
-      this.selectedSectionID = id
-      // this.selectedFamilyID = null
-      // this.selectedModelID = null
-      // this.selectedMaterial = null
-    },
-    selectFamily: function(id) {
-      this.selectedFamilyID = id
-      // this.selectedModelID = null
-      // this.selectedMaterial = null
-    },
-    selectModel: function(id) {
-      this.selectedModelID = id
-      // this.selectedFamilyID = null
-      // this.selectedMaterial = null
-    },
-    selectMaterial: function(id) {
-      this.selectedMaterial = id
-    },
-    selectedFamilies: function() {
-      let section = this.$store.getters.CAT_SECTION(this.selectedSectionID)
-      let ids = this.sectionIDs(section)
-      let materials = this.findMaterials(ids)
-      return this.makeFamilies(materials)
-    },
-    selectedFamily: function() {
-      let families = this.selectedFamilies()
-      return families.find(s => s.id === this.selectedFamilyID)
-    },
-    sectionIDs: function(section) {
-      let ids = []
-
-      if (section) {
-        for (let page of section.pages) {
-          for (let block of page) {
-            ids.push(...block.ids)
-          }
-        }
-      }
-
-      return ids
-    },
-    findMaterials: function(ids) {
-      return ids.map(id => this.$store.getters.MATERIAL(id))
-    },
-    makeFamilies: function(materials) {
-      let families = []
-
-      for (let mat of materials) {
-        let family = families.length > 0 ? families[families.length - 1] : null
-
-        if (family === null || family.id !== mat.family) {
-          // new family
-          family = { id: mat.family,
-                     name: mat.name, // TODO where does this come from?
-                     models: [mat.model],
-                     materials: [mat.id] }
-          families.push(family)
-        } else {
-          // add to existing
-          family.materials.push(mat.id)
-          family.models.push(mat.model)
-          family.models = this.uniquify(family.models)
-        }
-      }
-
-      return families
-    },
-    uniquify: function(arr) {
-      return [...new Set(arr)]
-    },
-  }
-}
-
-export default SelectionMixin