From 4c6b1b53575fe164d11361136a7479de058ab495 Mon Sep 17 00:00:00 2001
From: Jeroen De Meerleer <me@jeroened.be>
Date: Wed, 8 Jun 2022 13:24:46 +0200
Subject: [PATCH] BUGFIX: tags were not always parsed

---
 assets/js/job/Utils.js   | 12 ++++++++++++
 assets/js/job/add.js     |  2 ++
 assets/js/job/index.js   | 11 ++---------
 assets/js/job/view.js    | 14 +++-----------
 assets/scss/job/add.scss |  7 ++++++-
 5 files changed, 25 insertions(+), 21 deletions(-)
 create mode 100644 assets/js/job/Utils.js

diff --git a/assets/js/job/Utils.js b/assets/js/job/Utils.js
new file mode 100644
index 0000000..1390c09
--- /dev/null
+++ b/assets/js/job/Utils.js
@@ -0,0 +1,12 @@
+let Utils = {};
+
+Utils.initTags = () =>  {
+    document.querySelectorAll('.tag').forEach(elem => {
+        let backcolor = elem.dataset.backgroundColor;
+        let frontcolor = elem.dataset.color;
+        elem.style.backgroundColor = backcolor;
+        elem.style.color = frontcolor;
+    })
+}
+
+export default Utils;
\ No newline at end of file
diff --git a/assets/js/job/add.js b/assets/js/job/add.js
index a4eba89..a4eae45 100644
--- a/assets/js/job/add.js
+++ b/assets/js/job/add.js
@@ -3,6 +3,7 @@ import moment from 'moment';
 import * as tempusDominus from '@eonasdan/tempus-dominus/dist/js/tempus-dominus';
 import momentparse from './momentjs-parse';
 import '/assets/scss/job/add.scss';
+import Utils from "./Utils";
 
 document.addEventListener("readystatechange", event => {
     if(event.target.readyState === 'complete') {
@@ -14,6 +15,7 @@ document.addEventListener("readystatechange", event => {
         initRangeInput();
         initIntervalPattern();
         initEternalCheckbox();
+        Utils.initTags();
     }
 });
 
diff --git a/assets/js/job/index.js b/assets/js/job/index.js
index 6f74974..2ee08b7 100644
--- a/assets/js/job/index.js
+++ b/assets/js/job/index.js
@@ -1,23 +1,16 @@
 import {Modal} from 'bootstrap';
 import image from '/assets/images/ajax-loader.gif'
 import '/assets/scss/job/index.scss';
+import Utils from "./Utils";
 
 document.addEventListener("readystatechange", event => {
     if(event.target.readyState === 'complete') {
         initDeleteButtons();
         initRunNowButtons();
-        initTags();
+        Utils.initTags();
     }
 });
 
-function initTags() {
-    document.querySelectorAll('.tag').forEach(elem => {
-        let backcolor = elem.dataset.backgroundColor;
-        let frontcolor = elem.dataset.color;
-        elem.style.backgroundColor = backcolor;
-        elem.style.color = frontcolor;
-    })
-}
 function initDeleteButtons() {
     document.querySelectorAll('.delete-btn').forEach(elem => elem.addEventListener("click", event => {
         let me = event.currentTarget;
diff --git a/assets/js/job/view.js b/assets/js/job/view.js
index e9ca90b..83abcc8 100644
--- a/assets/js/job/view.js
+++ b/assets/js/job/view.js
@@ -1,17 +1,9 @@
 import 'bootstrap';
 import '/assets/scss/job/view.scss';
+import Utils from "./Utils";
 
 document.addEventListener("readystatechange", event => {
     if(event.target.readyState === 'complete') {
-        initTags();
+        Utils.initTags();
     }
-});
-
-function initTags() {
-    document.querySelectorAll('.tag').forEach(elem => {
-        let backcolor = elem.dataset.backgroundColor;
-        let frontcolor = elem.dataset.color;
-        elem.style.backgroundColor = backcolor;
-        elem.style.color = frontcolor;
-    })
-}
\ No newline at end of file
+});
\ No newline at end of file
diff --git a/assets/scss/job/add.scss b/assets/scss/job/add.scss
index 71cf1e0..fecaa21 100644
--- a/assets/scss/job/add.scss
+++ b/assets/scss/job/add.scss
@@ -1,4 +1,9 @@
 @import "assets/scss/base";
 @import "assets/scss/icons";
 @import "/node_modules/@eonasdan/tempus-dominus/dist/css/tempus-dominus.css";
-@import "assets/scss/tempus-dominus-dark";
\ No newline at end of file
+@import "assets/scss/tempus-dominus-dark";
+
+.tag {
+ display: inline-block;
+ padding: 0 1em;
+}
\ No newline at end of file