Create TagInput component and replace Buefy Taginput

Author: hannyle

.github/config/.finnishwords.txt

@@ -216,6 +216,7 @@ löydy
 löytää
 löytävät
 löytynyt
+luettelo
 luku
 lukuoikeus
 luo
@@ -496,6 +497,7 @@ tulisi
 tuloksia
 tunniste
 tunnisteet
+tunnisteista
 tunnisteita
 tunnukselle
 tunnuksen

swift_browser_ui_frontend/src/common/conv.js

@@ -228,6 +228,7 @@ export function makeGetObjectsMetaURL(project, container, objects) {
 }
 
 export const taginputConfirmKeys = [",", ";", ":", ".", " ", "Tab", "Enter"];
+export const taginputConfirmKeyCodes = [9, 13, 186, 188];
 
 export function truncate(value, length) {
   if (!value) {

swift_browser_ui_frontend/src/common/globalFunctions.js

@@ -1,4 +1,5 @@
 import store from "@/common/store";
+import { taginputConfirmKeyCodes } from "@/common/conv";
 
 export function toggleCreateFolderModal(folderName) {
   store.commit("toggleCreateFolderModal", true);
@@ -69,5 +70,22 @@ export async function getAccessDetails (
     : [];
 }
 
+export function addNewTag (event, currentTags, onBlur) {
+  if (taginputConfirmKeyCodes.includes(event.keyCode) || onBlur) {
+    event.preventDefault();
+    const newTag = event.target.value.trim();
+    event.target.value = "";
+    if (newTag !== "" && !currentTags.includes(newTag)) {
+      currentTags.push(newTag);
+    }
+  }
+  return currentTags;
+}
+
+export function deleteTag (event, tag, currentTags) {
+  event.preventDefault();
+  return currentTags.filter(el => el !== tag);
+}
+
 
 

swift_browser_ui_frontend/src/common/lang.js

@@ -487,7 +487,9 @@ let default_translations = {
       list_of_shareids: "list of share ids",
       folder_tabs: "different types of folder",
       searchbox: "search for folders",
+      tagsList: "list of tags",
       edit_tag: "modify current tags",
+      delete_tag: "delete tag",
       footer: "copyright information",
     },
   },
@@ -962,7 +964,9 @@ let default_translations = {
       list_of_shareids: "lista jaa tunnuksista",
       folder_tabs: "erityyppisiä kansioita",
       searchbox: "etsi kansioita",
+      tagsList: "luettelo tunnisteista",
       edit_tag: "muokata nykyisiä tunnisteita",
+      delete_tag: "poista tunniste",
       footer: "tekijänoikeustiedot",
     },
   },

swift_browser_ui_frontend/src/components/CopyFolderModal.vue

@@ -28,24 +28,15 @@
             :loading="loadingFoldername"
           />
         </b-field>
-        <b-field
-          custom-class="has-text-dark"
-          :label="$t('message.tagName')"
-          label-for="copy-folder-taginput"
-        >
-          <b-taginput
-            id="copy-folder-taginput"
-            v-model="tags"
-            ellipsis
-            maxlength="20"
-            has-counter
-            rounded
-            type="is-primary"
-            :placeholder="$t('message.tagPlaceholder')"
-            :confirm-keys="taginputConfirmKeys"
-            :on-paste-separators="taginputConfirmKeys"
-          />
-        </b-field>
+        <label label-for="copy-folder-taginput">
+          {{ $t('message.tagName') }}
+        </label>
+        <TagInput
+          id="copy-folder-taginput"
+          :tags="tags"
+          @addTag="addingTag"
+          @deleteTag="deletingTag"
+        />
       </c-card-content>
     </div>
     <c-card-actions justify="space-between">
@@ -73,24 +64,28 @@
 import { debounce, delay } from "lodash";
 import {
   swiftCopyContainer,
-  taginputConfirmKeys,
   updateContainerMeta,
 } from "@/common/api";
 
-import { modifyBrowserPageStyles } from "@/common/globalFunctions";
+import {
+  addNewTag,
+  deleteTag,
+  modifyBrowserPageStyles,
+} from "@/common/globalFunctions";
 import escapeRegExp from "lodash/escapeRegExp";
 import { useObservable } from "@vueuse/rxjs";
 import { liveQuery } from "dexie";
+import TagInput from "@/components/TagInput.vue";
 
 export default {
   name: "CopyFolderModal",
+  components: { TagInput },
   data() {
     return {
       folderExists: false,
       folderName: "",
       loadingFoldername: true,
       tags: [],
-      taginputConfirmKeys,
       folders: [],
     };
   },
@@ -256,6 +251,12 @@ export default {
         );
       });
     },
+    addingTag: function (e, onBlur) {
+      this.tags = addNewTag(e, this.tags, onBlur);
+    },
+    deletingTag: function (e, tag) {
+      this.tags = deleteTag(e, tag, this.tags);
+    },
   },
 };
 </script>
@@ -296,11 +297,16 @@ c-card-content {
   padding: 0;
 }
 
+label {
+  font-weight: bold;
+  margin-bottom: -1rem;
+}
+
 c-card-actions {
   padding: 0;
 }
 
 c-card-actions > c-button {
   margin: 0;
 }
-</style>
+</style>

swift_browser_ui_frontend/src/components/CreateFolderModal.vue

@@ -24,26 +24,16 @@
             data-testid="folder-name"
           />
         </b-field>
-        <b-field
-          custom-class="has-text-dark"
-          :label="$t('message.tagName')"
-          label-for="folder-taginput"
-        >
-          <b-taginput
-            id="folder-taginput"
-            v-model="tags"
-            aria-close-label="delete-tag"
-            ellipsis
-            maxlength="20"
-            has-counter
-            rounded
-            type="is-primary"
-            :placeholder="$t('message.tagPlaceholder')"
-            :confirm-keys="taginputConfirmKeys"
-            :on-paste-separators="taginputConfirmKeys"
-            data-testid="folder-tag"
-          />
-        </b-field>
+        <label label-for="create-folder-taginput">
+          {{ $t('message.tagName') }}
+        </label>
+        <TagInput
+          id="create-folder-taginput"
+          :tags="tags"
+          data-testid="folder-tag"
+          @addTag="addingTag"
+          @deleteTag="deletingTag"
+        />
         <p class="info-text is-size-6">
           {{ $t("message.container_ops.createdFolder") }}
           <b>{{ active.name }}</b>.
@@ -87,12 +77,16 @@ import {
 } from "@/common/conv";
 
 import {
+  addNewTag,
+  deleteTag,
   modifyBrowserPageStyles,
   getProjectNumber,
 } from "@/common/globalFunctions";
+import TagInput from "@/components/TagInput.vue";
 
 export default {
   name: "CreateFolderModal",
+  components: { TagInput },
   data() {
     return {
       folderName: "",
@@ -152,6 +146,12 @@ export default {
       this.create = true;
       modifyBrowserPageStyles();
     },
+    addingTag: function (e, onBlur) {
+      this.tags = addNewTag(e, this.tags, onBlur);
+    },
+    deletingTag: function (e, tag) {
+      this.tags = deleteTag(e, tag, this.tags);
+    },
   },
 };
 </script>
@@ -179,6 +179,11 @@ c-card-content {
   padding: 1.5rem 0 0 0;
 }
 
+label {
+  font-weight: bold;
+  margin-bottom: -1rem;
+}
+
 c-card-actions {
   padding: 0;
 }

swift_browser_ui_frontend/src/components/EditTagsModal.vue

@@ -4,23 +4,11 @@
       {{ $t('message.editTags') }}
     </h2>
     <c-card-content>
-      <b-field
-        custom-class="has-text-dark"
-      >
-        <b-taginput
-          v-model="tags"
-          :aria-label="$t('label.edit_tag')"
-          aria-close-label="delete-tag"
-          ellipsis
-          maxlength="20"
-          has-counter
-          rounded
-          type="is-primary"
-          :placeholder="$t('message.tagPlaceholder')"
-          :confirm-keys="taginputConfirmKeys"
-          :on-paste-separators="taginputConfirmKeys"
-        />
-      </b-field>
+      <TagInput
+        :tags="tags"
+        @addTag="addingTag"
+        @deleteTag="deletingTag"
+      />
     </c-card-content>
     <c-card-actions justify="space-between">
       <c-button
@@ -49,22 +37,28 @@ import {
 } from "@/common/api";
 
 import {
-  taginputConfirmKeys,
   getTagsForObjects,
   getTagsForContainer,
 } from "@/common/conv";
 
-import { modifyBrowserPageStyles } from "@/common/globalFunctions";
+import {
+  addNewTag,
+  deleteTag,
+  modifyBrowserPageStyles,
+} from "@/common/globalFunctions";
+import TagInput from "@/components/TagInput.vue";
+import { mdiClose } from "@mdi/js";
 
 export default {
   name: "EditTagsModal",
+  components: { TagInput },
   data() {
     return {
       container: null,
       object: null,
       tags: [],
       isObject: false,
-      taginputConfirmKeys,
+      mdiClose,
     };
   },
   computed: {
@@ -188,6 +182,12 @@ export default {
         });
       this.toggleEditTagsModal();
     },
+    addingTag: function (e, onBlur) {
+      this.tags = addNewTag(e, this.tags, onBlur);
+    },
+    deletingTag: function (e, tag) {
+      this.tags = deleteTag(e, tag, this.tags);
+    },
   },
 };
 </script>
@@ -204,6 +204,7 @@ export default {
   max-height: 75vh;
 }
 
+h2 { margin: 0 !important; }
 
 c-card-content {
   color: var(--csc-dark-grey);
@@ -214,4 +215,5 @@ c-card-actions {
   padding: 0;
 }
 
+
 </style>