Dev

gui/.gitignore

@@ -28,3 +28,4 @@ yarn.lock
 /gerrit
 
 !.env.docker
+.env

gui/Dockerfile

@@ -4,7 +4,7 @@ WORKDIR /app
 COPY package*.json ./
 COPY .env.docker ./.env
 
-RUN npm install
+RUN npm install --include-dev
 COPY ./ .
 RUN npm run build
 

gui/package.json

@@ -1,9 +1,9 @@
 {
-  "name": "enigma-nebulous",
+  "name": "nebulous-gui",
   "private": true,
-  "version": "0.0.0",
+  "version": "1.0.0",
   "engines": {
-    "node": "v20.9.0"
+    "node": "v20.13.1"
   },
   "scripts": {
     "serve": "vite",
@@ -52,13 +52,13 @@
     "tiny-slider": "^2.9.4",
     "tippy.js": "^6.3.7",
     "toastify-js": "^1.12.0",
-    "tom-select": "^2.3.1",
     "uuid": "^9.0.1",
     "vite-svg-loader": "^5.1.0",
     "vue": "^3.3.9",
     "vue-draggable-next": "^2.2.1",
+    "vue-multiselect": "^3.0.0-beta.3",
     "vue-router": "^4.1.6",
-    "xlsx": "^0.18.5",
+    "vue3-select-component": "^0.5.2",
     "zoom-vanilla.js": "^2.0.6"
   },
   "devDependencies": {
@@ -76,6 +76,7 @@
     "@typescript-eslint/parser": "^6.10.0",
     "@vitejs/plugin-vue": "^4.2.3",
     "@vue/eslint-config-standard": "^8.0.1",
+    "add": "^2.0.6",
     "autoprefixer": "^10.4.14",
     "eslint": "^8.53.0",
     "eslint-config-prettier": "^9.0.0",
@@ -93,6 +94,6 @@
     "typescript": "^5.2.2",
     "vite": "^4.4.2",
     "vue-eslint-parser": "^9.3.2",
-    "vue-tsc": "^1.8.22"
+    "vue-tsc": "^2.0.29"
   }
 }

gui/src/assets/css/app.css

@@ -37,7 +37,6 @@
 @import "simplebar/src/simplebar.css";
 @import "dropzone/dist/dropzone.css";
 @import "tabulator-tables/dist/css/tabulator.css";
-@import "tom-select/dist/css/tom-select.css";
 @import "zoom-vanilla.js/dist/zoom.css";
 @import "toastify-js/src/toastify.css";
 @import "highlight.js/styles/github.css";
@@ -48,6 +47,7 @@
 @import "tiny-slider/dist/tiny-slider.css";
 @import "leaflet/dist/leaflet.css";
 @import "leaflet.markercluster/dist/MarkerCluster.css";
+@import "vue-multiselect/dist/vue-multiselect.css";
 
 /*
    |--------------------------------------------------------------------------
@@ -73,9 +73,12 @@
 @import "./components/_toastify.css";
 @import "./components/_transitions.css";
 @import "./components/_zoom-vanilla.css";
-@import "./components/_tom-select.css";
 @import "./components/_ckeditor.css";
 @import "./components/_litepicker.css";
 @import "./components/_full-calendar.css";
 @import "./components/_tabulator.css";
+@import "./components/_vue-multiselect.css";
 @import "./components/_main.css";
+
+
+

gui/src/assets/css/components/_vue-multiselect.css

@@ -0,0 +1,78 @@
+.dark{
+
+    .multiselect,
+    .multiselect__input,
+    .multiselect__single {
+        font-family: inherit;
+        font-size: inherit;
+    }
+
+    .multiselect {
+        color: inherit;
+    }
+
+    .multiselect__content-wrapper {
+        background: theme('colors.darkmode.700');
+
+    }
+
+    .multiselect--disabled {
+        background: theme('colors.darkmode.700');
+    }
+
+    .multiselect__tag{
+        color:inherit;
+        background: theme('colors.darkmode.600');
+    }
+
+    .multiselect__tags {
+        background: theme('colors.darkmode.800');
+        border-radius: theme('borderRadius.DEFAULT');
+        font-size:inherit;
+
+    }
+    .multiselect__tag-icon::after {
+        color: theme('colors.slate.500');
+    }
+
+    .multiselect__tag-icon:focus::after,
+    .multiselect__tag-icon:hover::after {
+        color: white;
+    }
+
+    .multiselect__option--highlight {
+        background:theme('colors.slate.500');
+        outline: none;
+        color: white;
+    }
+
+    .multiselect__option--highlight::after {
+        content: attr(data-select);
+        background:theme('colors.slate.500');
+        color: white;
+    }
+
+
+    .multiselect__option--selected {
+        background: theme('colors.slate.700');
+        color: inherit;
+        font-weight: bold;
+    }
+
+    .multiselect__input::placeholder {
+        color: theme("colors.slate.500");
+    }
+
+    .multiselect__input,
+    .multiselect__single{
+        background: theme('colors.darkmode.700');
+    }
+
+
+    .multiselect__spinner::before,
+    .multiselect__spinner::after{
+        border-color: theme('colors.slate.600') transparent transparent;
+    }
+
+}
+