FOUR-13921 create a sortable component table

src/App.vue

@@ -1,8 +1,8 @@
 <template>
   <b-container id="screen-builder-container" class="h-100">
-    <b-card id="app" no-body class="h-100 bg-white border-top-0">
+    <b-card id="app" no-body class="h-100 bg-white border-top-0 ">
       <!-- Card Header -->
-      <b-card-header>
+      <b-card-header class="bg-white">
         <b-row>
           <b-col>
             <b-button-group size="sm pr-2">
@@ -49,60 +49,33 @@
           </b-col>
 
           <b-col v-if="displayBuilder && !displayPreview" class="text-right">
-            <div
-              class="btn-group btn-group-sm mr-2"
-              role="group"
-              aria-label="Basic example"
+            <screen-toolbar
+              @undo="$refs.builder.undo()"
+              @redo="$refs.builder.redo()"
+              @open-calc="openComputedProperties"
+              @open-customCss="openCustomCSS"
+              @open-watchers="openWatchersPopup"
             >
-              <button
-                type="button"
-                class="btn btn-secondary"
-                :title="$t('Calculated Properties')"
-                data-cy="topbar-calcs"
-                @click="openComputedProperties"
+              <b-btn
+                v-b-modal="'uploadmodal'"
+                variant="secondary"
+                size="sm"
+                class="mr-2"
+                :title="$t('Load Screen')"
               >
-                <i class="fas fa-flask" />
-                {{ $t("Calcs") }}
-              </button>
-              <button
-                type="button"
-                class="btn btn-secondary"
-                :title="$t('Custom CSS')"
-                data-cy="topbar-css"
-                @click="openCustomCSS"
+                <i class="fas fa-upload mr-1" />
+              </b-btn>
+              <b-btn
+                v-b-modal.preview-config
+                variant="secondary"
+                size="sm"
+                class="mr-2"
+                :title="$t('Save Screen')"
+                @click="saveToLocalStorage()"
               >
-                <i class="fab fa-css3" />
-                {{ $t("CSS") }}
-              </button>
-              <button
-                type="button"
-                class="btn btn-secondary"
-                :title="$t('Watchers')"
-                data-cy="topbar-watchers"
-                @click="openWatchersPopup"
-              >
-                <i class="fas fa-mask" />
-                {{ $t("Watchers") }}
-              </button>
-            </div>
-            <b-btn
-              v-b-modal="'uploadmodal'"
-              variant="secondary"
-              size="sm"
-              class="mr-2"
-              :title="$t('Load Screen')"
-            >
-              <i class="fas fa-upload mr-1" />
-            </b-btn>
-            <button
-              v-b-modal.preview-config
-              type="button"
-              class="btn btn-secondary btn-sm ml-1"
-              :title="$t('Save Screen')"
-              @click="saveToLocalStorage()"
-            >
-              <i class="fas fa-save" />
-            </button>
+                <i class="fas fa-save mr-1" />
+              </b-btn>
+            </screen-toolbar>
           </b-col>
           <b-modal
             id="uploadmodal"
@@ -351,6 +324,7 @@ import WatchersPopup from "./components/watchers-popup.vue";
 import CustomCss from "./components/custom-css.vue";
 import VueFormBuilder from "./components/vue-form-builder.vue";
 import VueFormRenderer from "./components/vue-form-renderer.vue";
+import ScreenToolbar from "./components/ScreenToolbar.vue";
 import canOpenJsonFile from "./mixins/canOpenJsonFile";
 
 // Bring in our initial set of controls
@@ -411,7 +385,8 @@ export default {
     VueFormBuilder,
     VueFormRenderer,
     MonacoEditor,
-    WatchersPopup
+    WatchersPopup,
+    ScreenToolbar,
   },
   mixins: [canOpenJsonFile],
   data() {
@@ -787,6 +762,7 @@ body {
 
 .card-header {
   border-radius: 0 !important;
+  background-color: none !important;
 }
 
 .border-check {

src/components/ScreenToolbar.vue

@@ -0,0 +1,100 @@
+<template>
+  <div class="flex-grow-1 d-flex flex-row-reverse">
+    <b-button-group size="sm" class="bg-white p-2 screen-toolbar">
+      <b-button
+        class="screen-toolbar-button"
+        variant="link"
+        :disabled="!canUndo"
+        data-cy="toolbar-undo"
+        @click="$emit('undo')"
+      >
+        <i class="fas fa-undo" />
+        {{ $t("Undo") }}
+      </b-button>
+      <b-button
+        class="screen-toolbar-button"
+        variant="link"
+        :disabled="!canRedo"
+        data-cy="toolbar-redo"
+        @click="$emit('redo')"
+      >
+        <i class="fas fa-redo" />
+        {{ $t("Redo") }}
+      </b-button>
+      <b-button
+        type="button"
+        class="screen-toolbar-button"
+        variant="link"
+        :title="$t('Calculated Properties')"
+        data-cy="topbar-calcs"
+        @click="$emit('open-calc')"
+      >
+        <i class="fas fa-flask" />
+        {{ $t("Calcs") }}
+      </b-button>
+      <b-button
+        type="button"
+        class="screen-toolbar-button"
+        variant="link"
+        :title="$t('Custom CSS')"
+        data-cy="topbar-css"
+        @click="$emit('open-customCss')"
+      >
+        <i class="fab fa-css3" />
+        {{ $t("CSS") }}
+      </b-button>
+      <b-button
+        type="button"
+        class="screen-toolbar-button"
+        variant="link"
+        :title="$t('Watchers')"
+        data-cy="topbar-watchers"
+        @click="$emit('open-watchers')"
+      >
+        <i class="fas fa-mask" />
+        {{ $t("Watchers") }}
+      </b-button>
+      <b-dropdown
+        type="button"
+        class="screen-toolbar-button"
+        variant="outlined-secondary"
+        :popper-opts="{ placement: 'bottom-end' }"
+        data-cy="topbar-options"
+      >
+        <template v-slot:button-content>
+          <span class="screen-toolbar-button">
+            <i class="fas fa-cog" />
+            {{ $t("Options") }}
+          </span>
+        </template>
+        <template v-slot:default>
+          <slot />
+        </template>
+      </b-dropdown>
+    </b-button-group>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      showToolbar: true
+    };
+  },
+  computed: {
+    canUndo() {
+      return this.$store.getters["undoRedoModule/canUndo"];
+    },
+    canRedo() {
+      return this.$store.getters["undoRedoModule/canRedo"];
+    },
+  }
+};
+</script>
+
+<style scoped>
+.screen-toolbar-button {
+  color: #556271;
+}
+</style>

src/components/sortable/Sortable.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="container sortable-box">
+    <div class="row">
+      <div class="col-sm border rounded-lg p-0 mr-3 sortable-search-box">
+        <i class="fa fa-search sortable-search-icon"></i>
+        <input
+          id="search"
+          class="form-control border-0 shadow-none px-0"
+          v-model="search"
+          :placeholder="$t('Search here')"
+          data-test="search"
+        />
+      </div>
+      <div>
+        <button
+          type="button"
+          class="btn sortable-btn-new"
+          @click="$emit('add-page', $event)"
+        >
+          <i class="fa fa-plus"></i>
+        </button>
+      </div>
+    </div>
+
+    <SortableList
+      :items="items"
+      :filtered-items="filteredItems"
+      @ordered="$emit('ordered', $event)"
+      @item-edit="$emit('item-edit', $event)"
+      @item-delete="$emit('item-delete', $event)"
+    />
+  </div>
+</template>
+
+<script>
+import SortableList from './sortableList/SortableList.vue'
+
+export default {
+  name: 'Sortable',
+  components: {
+    SortableList
+  },
+  props: {
+    items: { type: Array, required: true },
+    filterKey: { type: String, required: true },
+  },
+  data() {
+    return {
+      search: "",
+      filteredItems: this.items,
+    };
+  },
+  watch: {
+    search(value) {
+      const cleanValue = value.trim().toLowerCase();
+
+      this.filteredItems = this.items.filter((item) => item[this.filterKey].toLowerCase().includes(cleanValue));
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped src="./sortable.scss"></style>

src/components/sortable/sortable.scss

@@ -0,0 +1,25 @@
+.sortable {
+  &-box {
+    font-family: "Open Sans", sans-serif !important;
+  }
+
+  &-search-box {
+    display: flex;
+    align-items: center;
+    border-color: #cdddee !important;
+  }
+
+  &-search-icon {
+    margin: {
+      left: 16px;
+      right: 8px;
+    }
+    color: #6A7888;
+  }
+
+  &-btn-new {
+    background: #1572C2;
+    color: #ffffff;
+  }
+}
+