feat: сворачивание групп колонок

Оставлены только фильтры и пресеты колонок по умолчанию
popstas · Nov 18, 2018 · 24d3b57 · 24d3b57
1 parent be7c378
commit 24d3b57
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 22 deletions.
diff --git a/pages/index.scss b/pages/index.scss
@@ -39,15 +39,18 @@
   margin: 0 auto;
   text-align: left;
   columns: 4;
-  @media (max-width: 768px){
+  @media (max-width: 768px) {
     columns: 1;
   }
   max-width: 1140px;
 
   .field-group {
+    &__header {
+      margin-top: 15px;
+    }
     &__name {
       font-weight: bold;
-      margin-top: 15px;
+      cursor: pointer;
     }
     &__all-button {
       padding: 0;
@@ -152,10 +155,10 @@
   }
 
   .table-responsive {
-    @media (max-width: 768px){
+    @media (max-width: 768px) {
       margin: 0 -15px;
     }
-    @media (mix-width: 769px){
+    @media (mix-width: 769px) {
       overflow: none;
     }
   }

diff --git a/pages/index.vue b/pages/index.vue
@@ -4,9 +4,12 @@
       <div>total: {{ filteredSites.length }}</div>
 
       <div class="available-fields">
-        <div class="field-group" v-for="group in fieldGroups" :key="group.name">
-          <div class="field-group__name">
-            {{ group.name }}
+        <a href="#" @click="changeGroupOpenedAll">Развернуть / свернуть все</a>
+
+        <div class="field-group" v-for="group in fieldGroups" :key="group.name" v-if="group.fields.length > 0">
+          <!-- group header -->
+          <div class="field-group__header">
+            <a class="field-group__name" v-html="group.name" @click="changeGroupOpened(group)"></a>
 
             <button class="column-presets__button field-group__all-button" @click="setPreset({name: 'all', columns: [...['domain_idn'],...group.fields.map(f => f.name)]});"
               :title="'Вывести колонки:\n' + group.fields.map(f => f.comment).join('\n')">all
@@ -19,23 +22,26 @@
                 @click="setPreset(preset);" v-html="preset.name" :title="'Вывести колонки:\n' + preset.columns.join('\n')">
               </button>
             </div>
-          </div>
 
-
-          <div class="field-group__filters">
-            <button class="filter-presets__button"
-                v-for="preset in filterPresets" :key="preset.name" v-if="preset.groups.indexOf(group.name) !== -1"
-                @click="q = preset.q" v-html="preset.name" :title="'Отфильтровать:\n' + preset.q">
-            </button>
+            <div class="field-group__filters">
+              <button class="filter-presets__button"
+                  v-for="preset in filterPresets" :key="preset.name" v-if="preset.groups.indexOf(group.name) !== -1"
+                  @click="q = preset.q" v-html="preset.name" :title="'Отфильтровать:\n' + preset.q">
+              </button>
+            </div>
           </div>
 
-          <div :title="field.name + (field.comment ? ` \n${field.comment}` : '') + (field.command ? ` \n${field.command}` : '')" @click="toggleField(field)"
-            :class="{ 'available-fields__field': true, active: fieldIndex(field) != -1 }"
-            v-for="field in group.fields" :key="field.name"
-          >
-            <input type="checkbox" :checked="fieldIndex(field) != -1">
-            <label>{{ field.comment || field.title }}
-            </label>
+          <!-- group content -->
+          <div :id="'filter-' + group.name" :class="{'field-group__content': true, collapse: !fieldGroupsOpened[group.name]}">
+
+            <div :title="field.name + (field.comment ? ` \n${field.comment}` : '') + (field.command ? ` \n${field.command}` : '')" @click="toggleField(field)"
+              :class="{ 'available-fields__field': true, active: fieldIndex(field) != -1 }"
+              v-for="field in group.fields" :key="field.name"
+            >
+              <input type="checkbox" :checked="fieldIndex(field) != -1">
+              <label>{{ field.comment || field.title }}
+              </label>
+            </div>
           </div>
         </div>
       </div>
@@ -101,7 +107,8 @@ export default {
       columnPresets: columnPresets,
       filterPresets: filterPresets,
       routerProcess: false,
-      tests: this.$store.state.tests
+      tests: this.$store.state.tests,
+      fieldGroupsOpened: {}
     };
   },
 
@@ -321,6 +328,24 @@ export default {
       // this.$emit('changeFilter', { name, value });
     },
 
+    // сворачивает/разворачивает одну группу
+    changeGroupOpened(group) {
+      this.fieldGroupsOpened[group.name] =
+        group.name in this.fieldGroupsOpened ? !this.fieldGroupsOpened[group.name] : true;
+      this.$forceUpdate();
+    },
+
+    // сворачивает/разворачивает все группы
+    changeGroupOpenedAll() {
+      let to = true;
+      if ('main' in this.fieldGroupsOpened && this.fieldGroupsOpened.main) to = false;
+
+      Object.keys(this.fieldGroups).forEach(groupName => {
+        this.fieldGroupsOpened[groupName] = to;
+      });
+      this.$forceUpdate();
+    },
+
     // индекс поля в массиве по объекту
     fieldIndex(field) {
       return this.fields.findIndex(column => {