From aa58fe730acf2158c2cd17fb4c3655011aa027d0 Mon Sep 17 00:00:00 2001
From: Binyamin Yawitz <316103+byawitz@users.noreply.github.com>
Date: Thu, 11 Apr 2024 21:05:09 -0400
Subject: [PATCH] feat(dashboard): Adding TomSelect for link tags

Signed-off-by: Binyamin Yawitz <316103+byawitz@users.noreply.github.com>
---
 apps/dashboard/package-lock.json              | 36 ++++++++++++
 apps/dashboard/package.json                   |  1 +
 apps/dashboard/src/assets/scss/tabler.scss    |  4 +-
 .../src/components/form/TomSelect.vue         | 56 +++++++++++++++++++
 apps/dashboard/src/locale/languages/en.json   |  3 +-
 apps/dashboard/src/locale/languages/he.json   |  3 +-
 apps/dashboard/src/views/LinkFormView.vue     |  3 +
 7 files changed, 102 insertions(+), 4 deletions(-)
 create mode 100644 apps/dashboard/src/components/form/TomSelect.vue

diff --git a/apps/dashboard/package-lock.json b/apps/dashboard/package-lock.json
index c31dcda..196ffd0 100644
--- a/apps/dashboard/package-lock.json
+++ b/apps/dashboard/package-lock.json
@@ -9,12 +9,14 @@
       "version": "0.0.0",
       "dependencies": {
         "@popperjs/core": "^2.11.8",
+        "@slim-select/vue": "^1.6.0",
         "@tabler/icons-vue": "^3.1.0",
         "apexcharts": "^3.48.0",
         "bootstrap": "5.3.2",
         "litepicker": "^2.0.12",
         "pinia": "^2.1.7",
         "sass": "^1.74.1",
+        "tom-select": "^2.3.1",
         "vue": "^3.4.15",
         "vue-i18n": "^9.10.2",
         "vue-router": "^4.2.5",
@@ -705,6 +707,19 @@
       "integrity": "sha512-XuySG1E38YScSJoMlqovLru4KTUNSjgVTIjyh7qMX6aNN5HY5Ct5LhRJdxO79JtTzKfzV/bnWpz+zquYrISsvw==",
       "dev": true
     },
+    "node_modules/@orchidjs/sifter": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@orchidjs/sifter/-/sifter-1.0.3.tgz",
+      "integrity": "sha512-zCZbwKegHytfsPm8Amcfh7v/4vHqTAaOu6xFswBYcn8nznBOuseu6COB2ON7ez0tFV0mKL0nRNnCiZZA+lU9/g==",
+      "dependencies": {
+        "@orchidjs/unicode-variants": "^1.0.4"
+      }
+    },
+    "node_modules/@orchidjs/unicode-variants": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@orchidjs/unicode-variants/-/unicode-variants-1.0.4.tgz",
+      "integrity": "sha512-NvVBRnZNE+dugiXERFsET1JlKZfM5lJDEpSMilKW4bToYJ7pxf0Zne78xyXB2ny2c2aHfJ6WLnz1AaTNHAmQeQ=="
+    },
     "node_modules/@pkgjs/parseargs": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
@@ -943,6 +958,11 @@
       "integrity": "sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==",
       "dev": true
     },
+    "node_modules/@slim-select/vue": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@slim-select/vue/-/vue-1.6.0.tgz",
+      "integrity": "sha512-v5ZUWs4XkGXDV004VUrBB9R7tc1Seh/pKjPFtgEwhgep/aCciPIgUgnAxR528g0HxoysRd38/bmQnB0G/6kW2w=="
+    },
     "node_modules/@tabler/icons": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/@tabler/icons/-/icons-3.1.0.tgz",
@@ -4409,6 +4429,22 @@
         "node": ">=8.0"
       }
     },
+    "node_modules/tom-select": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/tom-select/-/tom-select-2.3.1.tgz",
+      "integrity": "sha512-QS4vnOcB6StNGqX4sGboGXL2fkhBF2gIBB+8Hwv30FZXYPn0CyYO8kkdATRvwfCTThxiR4WcXwKJZ3cOmtI9eg==",
+      "dependencies": {
+        "@orchidjs/sifter": "^1.0.3",
+        "@orchidjs/unicode-variants": "^1.0.4"
+      },
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/tom-select"
+      }
+    },
     "node_modules/tough-cookie": {
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.3.tgz",
diff --git a/apps/dashboard/package.json b/apps/dashboard/package.json
index 964a8fe..c717b8b 100644
--- a/apps/dashboard/package.json
+++ b/apps/dashboard/package.json
@@ -21,6 +21,7 @@
     "litepicker": "^2.0.12",
     "pinia": "^2.1.7",
     "sass": "^1.74.1",
+    "tom-select": "^2.3.1",
     "vue": "^3.4.15",
     "vue-i18n": "^9.10.2",
     "vue-router": "^4.2.5",
diff --git a/apps/dashboard/src/assets/scss/tabler.scss b/apps/dashboard/src/assets/scss/tabler.scss
index c51a320..e6141f1 100644
--- a/apps/dashboard/src/assets/scss/tabler.scss
+++ b/apps/dashboard/src/assets/scss/tabler.scss
@@ -1,6 +1,6 @@
 @import "core";
+@import "vendor/tom-select";
 
 html[dir="rtl"] {
   @import "tabler.rtl.min";
-}
-
+}
\ No newline at end of file
diff --git a/apps/dashboard/src/components/form/TomSelect.vue b/apps/dashboard/src/components/form/TomSelect.vue
new file mode 100644
index 0000000..188297d
--- /dev/null
+++ b/apps/dashboard/src/components/form/TomSelect.vue
@@ -0,0 +1,56 @@
+<template>
+  <div :class="`mb-${mb}`">
+    <label class="form-label">{{ label }}</label>
+    <select class="form-select" v-model="model" ref="el" multiple style="display: none">
+      <option v-for="option in options" :value="option.value" :key="option.value" v-text="option.text" />
+    </select>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, type PropType, ref } from 'vue';
+import TomSelect from 'tom-select';
+import { useI18n } from 'vue-i18n';
+
+declare type SelectOptions = { value: any; text: string };
+
+defineProps({
+  options: { default: [], type: Array as PropType<SelectOptions[]> },
+  label: { default: '', type: String },
+  mb: { default: '3', type: String }
+});
+
+const model = defineModel();
+const el = ref();
+const { t } = useI18n();
+
+onMounted(() => {
+  new TomSelect(el.value, {
+    createOnBlur: true,
+    create: true,
+    render: {
+      option: (data: any, escape: any) => {
+        return '<div>' + escape(data.text) + '</div>';
+      },
+      item: function (data: any, escape: any) {
+        return '<div>' + escape(data.text) + '</div>';
+      },
+      option_create: function (data: any, escape: any) {
+        return `<div class="create">${t('Add')} <strong>${escape(data.input)}</strong>&hellip;</div>`;
+      },
+      no_results: function (data: any, escape: any) {
+        return `<div class="no-results">${t('no-results-for')} "${escape(data.input)}"</div>`;
+      },
+      not_loading: function (data: any, escape: any) {
+        // no default content
+      },
+      loading: function (data: any, escape: any) {
+        return '<div class="spinner"></div>';
+      },
+      dropdown: function () {
+        return '<div></div>';
+      }
+    }
+  });
+});
+</script>
diff --git a/apps/dashboard/src/locale/languages/en.json b/apps/dashboard/src/locale/languages/en.json
index 52411aa..c2e11bd 100644
--- a/apps/dashboard/src/locale/languages/en.json
+++ b/apps/dashboard/src/locale/languages/en.json
@@ -109,5 +109,6 @@
   "Save": "Save",
   "system-default": "System Default",
   "dark": "Dark",
-  "light": "Light"
+  "light": "Light",
+  "no-results-for": "No results found for"
 }
\ No newline at end of file
diff --git a/apps/dashboard/src/locale/languages/he.json b/apps/dashboard/src/locale/languages/he.json
index 8d723e0..a843f17 100644
--- a/apps/dashboard/src/locale/languages/he.json
+++ b/apps/dashboard/src/locale/languages/he.json
@@ -109,5 +109,6 @@
   "Save": "שמירה",
   "system-default": "ברירת מחדל של המערכת",
   "dark": "כהה",
-  "light": "בהירה"
+  "light": "בהירה",
+  "no-results-for": "לא נמצאו תוצאות עבור"
 }
\ No newline at end of file
diff --git a/apps/dashboard/src/views/LinkFormView.vue b/apps/dashboard/src/views/LinkFormView.vue
index 801ea11..5d63c43 100644
--- a/apps/dashboard/src/views/LinkFormView.vue
+++ b/apps/dashboard/src/views/LinkFormView.vue
@@ -39,6 +39,7 @@
 
                   <div class="col-xl-6">
                     <InputSelect :label="$t('Campaign')" v-model="link.campaign_id" :options="[]" />
+                    <TomSelect :label="$t('Tags')" v-model="tags" :options="[{ text: 'Tag', value: 'Tag' }]" />
 
                     <div class="mb-3">
                       <div class="form-label">{{ $t('Link options') }}</div>
@@ -90,6 +91,7 @@ import InputDate from '@/components/form/InputDate.vue';
 import InputSelect from '@/components/form/InputSelect.vue';
 import Container from '@/components/layouts/Container.vue';
 import { useI18n } from 'vue-i18n';
+import TomSelect from '@/components/form/TomSelect.vue';
 
 const router = useRouter();
 const { t } = useI18n();
@@ -107,6 +109,7 @@ const link: Ref<LinkModel> = ref(new LinkModel());
 const loading = ref(isEdit.value);
 const submitting = ref(false);
 const submittedOnce = ref(false);
+const tags = ref([]);
 
 const pageTitle = computed(() => (isEdit.value ? t('Edit') : t('New link')));