feat(dashboard): Adding TomSelect for link tags

Signed-off-by: Binyamin Yawitz <[email protected]>

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",

apps/dashboard/src/assets/scss/tabler.scss

@@ -1,6 +1,6 @@
 @import "core";
+@import "vendor/tom-select";
 
 html[dir="rtl"] {
   @import "tabler.rtl.min";
-}
-
+}

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>

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"
 }

apps/dashboard/src/locale/languages/he.json

@@ -109,5 +109,6 @@
   "Save": "שמירה",
   "system-default": "ברירת מחדל של המערכת",
   "dark": "כהה",
-  "light": "בהירה"
+  "light": "בהירה",
+  "no-results-for": "לא נמצאו תוצאות עבור"
 }

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')));