feat: custom fields in colview, KOpenAPI for documented options

package.json

@@ -38,7 +38,7 @@
     "vue-color": "^2.8.1",
     "vue-form-generator": "^2.3.4",
     "vue-multipane": "^0.9.5",
-    "vue-multiselect": "^3.1.0",
+    "vue-multiselect": "^2.1.7",
     "vue-router": "^3.6.5",
     "vue2-leaflet": "^2.7.1",
     "vuedraggable": "^2.24.3",

src/components/ApiAction.vue

@@ -308,11 +308,17 @@ export default {
     },
     async getKuzzleOpenApi() {
       try {
-        const openApi = await this.$kuzzle.query({
+        const openApiKuzzle = await this.$kuzzle.query({
           controller: 'server',
           action: 'openapi',
+          scope: 'kuzzle',
         });
-        this.openapi = openApi.paths;
+        const openApiApp = await this.$kuzzle.query({
+          controller: 'server',
+          action: 'openapi',
+          scope: 'app',
+        });
+        this.openapi = { ...openApiApp.paths, ...openApiKuzzle.paths };
       } catch (error) {
         this.$log.error(error);
         this.$bvToast.toast(

src/components/ApiAction/QueryCard.vue

@@ -230,7 +230,7 @@ export default {
         const obj = {
           controller: query.controller,
           action: query.action,
-          body: query.body,
+          body: {},
         };
         this.jsonQuery = JSON.stringify(obj, null, 2);
         this.$refs[`queryEditorWrapper-${this.tabIdx}`].setContent(this.jsonQuery);
@@ -246,6 +246,31 @@ export default {
           query[param.name] = '';
         }
       }
+      const body = _.get(this.openapi, `${openApiPath}.${verb}.requestBody`, null);
+      if (body && body.content['application/json']) {
+        const prefilledBody = body.content['application/json'].schema.properties;
+        for (const key of Object.keys(prefilledBody)) {
+          switch (prefilledBody[key].type) {
+            case 'string':
+              query.body[key] = '';
+              break;
+            case 'number' || 'integer':
+              query.body[key] = 0;
+              break;
+            case 'boolean':
+              query.body[key] = false;
+              break;
+            case 'array':
+              query.body[key] = [];
+              break;
+            case 'object':
+              query.body[key] = {};
+              break;
+            default:
+              query.body[key] = '';
+          }
+        }
+      }
       this.jsonQuery = JSON.stringify(query, null, 2);
       this.$refs[`queryEditorWrapper-${this.tabIdx}`].setContent(this.jsonQuery);
     },

src/components/Data/Documents/Views/Column/Column.vue

@@ -1,52 +1,35 @@
 <template>
   <div class="Column" data-cy="DocumentList-Column">
     <div class="d-flex flex-row align-items-center">
-      <div class="flex-grow-1">
-        <b-dropdown
-          class="mr-2"
-          data-cy="SelectField"
-          variant="outline-secondary"
-          menu-class="dropdownScroll"
-          text="Fields"
-          no-flip
+      <div class="flex-grow-1 d-flex align-items-stretch">
+        <div class="d-inline-block mr-2 w-full max-w-24rem">
+          <multiselect
+            v-model="selectedFieldsComputed"
+            :options="dropdownFields.map((field) => field.text)"
+            :taggable="true"
+            tag-placeholder="Add custom field"
+            placeholder="Select fields"
+            :multiple="true"
+            :close-on-select="false"
+            :allow-empty="true"
+            @tag="addCustomField"
+          />
+        </div>
+        <b-button
+          variant="outline-dark"
+          class="mr-2 align-self-center"
+          @click="$emit('toggle-all')"
         >
-          <b-dropdown-item-button
-            v-if="selectedFields.length !== 0"
-            class="pl-4"
-            @click="resetColumns"
-          >
-            Unselect all
-          </b-dropdown-item-button>
-          <b-dropdown-text
-            v-for="field of dropdownFields"
-            :key="`dropdown-${field.text}`"
-            class="dropdown-text inlineDisplay pointer p-0"
-          >
-            <span class="inlineDisplay-item">
-              <b-form-checkbox
-                :id="field.text"
-                class="mx-2"
-                :checked="field.displayed"
-                :data-cy="`SelectField--${field.text}`"
-                @change="toggleColumn(field.text, $event)"
-              />
-            </span>
-            <label class="inlineDisplay-item code pointer" :for="field.text" :title="field.text">{{
-              field.text
-            }}</label>
-          </b-dropdown-text>
-          <b-dropdown-item v-if="dropdownFields.length === 0">
-            <span class="inlineDisplay-item"> No searchable field </span>
-          </b-dropdown-item>
-        </b-dropdown>
-        <b-button variant="outline-dark" class="mr-2" @click="$emit('toggle-all')">
           <i :class="`far ${allChecked ? 'fa-check-square' : 'fa-square'} left`" />
           Toggle all
         </b-button>
+        <b-button variant="outline-secondary" class="mr-2 align-self-center" @click="resetColumns">
+          Reset
+        </b-button>
 
         <b-button
           variant="outline-danger"
-          class="mr-2"
+          class="mr-2 align-self-center"
           :disabled="!bulkDeleteEnabled"
           @click="$emit('bulk-delete')"
         >
@@ -56,7 +39,7 @@
 
         <b-button
           variant="outline-secondary"
-          class="mr-2"
+          class="mr-2 align-self-center"
           data-cy="Column-btnExportCSV"
           title="Export columns to CSV"
           @click.prevent="displayModalExportCSV"
@@ -236,6 +219,8 @@
 import HeaderTableView from './HeaderTableView.vue';
 import HighlightableRow from './HighlightableRow.vue';
 import TableCell from './TableCell.vue';
+import Multiselect from 'vue-multiselect';
+import {} from 'vue-multiselect/dist/vue-multiselect.min.css';
 
 export default {
   name: 'Column',
@@ -249,6 +234,7 @@
     TableCell,
     HighlightableRow,
     NewDocumentsBadge,
+    Multiselect,
   },
   props: {
     searchQuery: Object,
@@ -355,6 +341,14 @@
     fieldList() {
       return Object.keys(this.flatMapping);
     },
+    selectedFieldsComputed: {
+      get() {
+        return this.selectedFields;
+      },
+      set(value) {
+        this.selectedFields.splice(0, this.selectedFields.length, ...value);
+      },
+    },
   },
   watch: {
     $route: {
@@ -404,7 +398,7 @@
       };
     },
     resetColumns() {
-      this.selectedFields = [];
+      this.selectedFields.splice(0, this.selectedFields.length);
     },
     truncateName,
     isChecked(id) {
@@ -420,12 +414,10 @@
     initSelectedFields() {
       this.selectedFields = get(this.collectionSettings, 'columnView.fields', []);
     },
-    toggleColumn(field, value) {
-      if (value && !this.selectedFields.includes(field)) {
-        this.selectedFields.push(field);
-      }
-      if (!value) {
-        this.$delete(this.selectedFields, this.selectedFields.indexOf(field));
+    addCustomField(newField) {
+      const trimmedField = newField.trim();
+      if (trimmedField && !this.selectedFields.includes(trimmedField)) {
+        this.selectedFields.push(trimmedField);
       }
     },
     toggleJsonFormatter(id) {
@@ -502,4 +494,12 @@
     'Noto Sans', 'Liberation Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
     'Segoe UI Symbol', 'Noto Color Emoji';
 }
+
+.multiselect__option--selected.multiselect__option--highlight {
+  background: #e64472 !important;
+}
+
+.max-w-24rem {
+  max-width: 24rem;
+}
 </style>