style: created custom tagify scss file and updated gulp file

gulpfile.ts

@@ -43,20 +43,21 @@ export function attributesIcons() {
 export function css() {
   console.log("(re)building css");
 
-  return src(sassSrc).
-    pipe(init()).
-    pipe(
+  return src(sassSrc)
+    .pipe(init())
+    .pipe(
       sass({
         errLogToConsole: true,
         outputStyle: "expanded",
         includePaths: ["./node_modules/foundation-sites/scss"],
       }).on("error", sass.logError)
-    ).
-    pipe(minifyCSS()).
-    pipe(write(".")).
-    pipe(dest("./html/css/dist"));
+    )
+    .pipe(minifyCSS())
+    .pipe(write("."))
+    .pipe(dest("./html/css/dist"));
 }
 
+
 export function copyJs() {
   return src([
     "./node_modules/@webcomponents/**/webcomponentsjs/**/*.js",
@@ -133,16 +134,17 @@ function copyCss() {
     "./node_modules/leaflet/dist/leaflet.css",
     "./node_modules/leaflet.markercluster/dist/MarkerCluster.css",
     "./node_modules/leaflet.markercluster/dist/MarkerCluster.Default.css",
-    "./node_modules/@yaireo/tagify/dist/tagify.css",
+    // "./node_modules/@yaireo/tagify/dist/tagify.css", // This line should be commented out or removed
     "./node_modules/cropperjs/dist/cropper.css",
     "./node_modules/select2/dist/css/select2.min.css",
-  ]).
-    pipe(init()).
-    pipe(minifyCSS()).
-    pipe(write(".")).
-    pipe(dest("./html/css/dist"));
+  ])
+  .pipe(init())
+  .pipe(minifyCSS())
+  .pipe(write("."))
+  .pipe(dest("./html/css/dist"));
 }
 
+
 function copyImages() {
   return src(imagesSrc).pipe(dest("./html/css/dist"));
 }

lib/ProductOpener/APIProductServices.pm

@@ -107,6 +107,7 @@ my %service_functions = (
 	extend_ingredients => \&ProductOpener::Ingredients::extend_ingredients_service,
 	estimate_ingredients_percent => \&ProductOpener::Ingredients::estimate_ingredients_percent_service,
 	analyze_ingredients => \&ProductOpener::Ingredients::analyze_ingredients_service,
+    check_quality => \&check_quality_service,
 );
 
 sub check_product_services_api_input ($request_ref) {
@@ -231,4 +232,40 @@ sub product_services_api ($request_ref) {
 	return;
 }
 
+
+sub check_quality_service ($product_ref, $updated_product_fields_ref) {
+
+    # Call check_quality from DataQuality.pm
+    ProductOpener::DataQuality::check_quality($product_ref);
+
+    # Initialize arrays to store the structured quality issues
+    my $quality_issues = {
+        bugs => [],
+        info => [],
+        warnings => [],
+        errors => [],
+    };
+
+    # Extract and organize the quality tags
+    foreach my $type (qw(bugs info warnings errors)) {
+        my $tag_key = "data_quality_" . $type . "_tags";
+        if (defined $product_ref->{$tag_key} and @{$product_ref->{$tag_key}}) {
+            foreach my $tag (@{$product_ref->{$tag_key}}) {
+                push @{$quality_issues->{$type}}, $tag;
+            }
+        }
+    }
+
+    # Store the quality issues in the product_ref for returning to the client
+    $product_ref->{'data_quality_issues'} = $quality_issues;
+
+    # Indicate that we've updated the data_quality_issues field
+    $updated_product_fields_ref->{'data_quality_issues'} = 1;
+
+    return;
+}
+
+
+
+
 1;

scss/app-ltr.scss

@@ -1,4 +1,6 @@
 @import "variables";
+@import "custom-tagify";
+@import "variables";
 @import "settings";
 @import "sveetoy/f5_settings";
 @import "foundation";

scss/app-rtl.scss

@@ -1,4 +1,6 @@
 @import "variables";
+@import "custom-tagify";
+@import "variables";
 @import "settings-rtl";
 @import "sveetoy/f5_settings";
 @import "foundation";

scss/custom-tagify.scss

@@ -0,0 +1,85 @@
+<<<<<<< HEAD
+
+@import "../node_modules/@yaireo/tagify/src/tagify.scss";
+@import "variables"; 
+
+// Global definitions for CSS custom properties
+:root {
+  // Primary color for Tagify dropdown, set for easy theming
+  $tagify-dd-color-primary: #341100 !important; 
+  --tagify-dd-color-primary: #341100 !important;
+}
+
+// Style adjustments for Tagify input placeholder
+.tagify__input::placeholder {
+  color: $dark; // Use dark color for placeholder text as defined in variables
+}
+
+// Enhance hover state for Tagify tags for better user experience
+.tagify__tag:hover {
+  background-color: var(--chocolate);
+  border-color: var(--chocolate-light);
+}
+
+// Default style for Tagify tag removal button
+=======
+@import "../node_modules/@yaireo/tagify/src/tagify.scss";
+@import "variables"; 
+
+// Placeholder style for Tagify input
+.tagify__input::placeholder {
+  color: $dark;
+}
+
+// Hover state for Tagify tags
+.tagify__tag:hover {
+  background-color: $chocolate; // Use 'chocolate' for better contrast and theme consistency
+  border-color: lighten($chocolate, 10%); // Lighten the chocolate color for border
+}
+
+// Style for the remove button in tags
+>>>>>>> 336c50d8b87fe355cbdfc7d79595992b3fb9dc58
+.tagify__tag .tagify__tag__removeBtn {
+  background-color: $text-color-dark;
+}
+
+<<<<<<< HEAD
+// Hover effect for tag removal button, increases visibility and interactivity
+.tagify__tag .tagify__tag__removeBtn:hover {
+  background-color: var(--chocolate);
+}
+
+// Base styling for dropdown items, setting defaults for readability and aesthetics
+.tagify__dropdown__item {
+  background-color: white;
+  border-color: var(--chocolate-lighter);
+  color: black;
+}
+
+// Hover state for dropdown items to indicate selection possibility
+.tagify__dropdown__item:hover {
+  background-color: var(--chocolate);
+  color: white;
+}
+
+// Active state styling for dropdown items to indicate current selection
+.tagify__dropdown__item--active {
+  background-color: var(--chocolate);
+  color: white;
+=======
+// Hover state for the remove button in tags
+.tagify__tag .tagify__tag__removeBtn:hover {
+  background-color: $chocolate; // Same 'chocolate' color for consistency
+}
+
+// Hover state for dropdown items
+.tagify__dropdown__item--active,
+.tagify__dropdown__item:hover {
+  background-color: $chocolate; // Again, using 'chocolate' for hover state
+}
+
+// Style for dropdown items
+.tagify__dropdown__item {
+  border-color: lighten($chocolate, 20%); // Lighten for subtle borders
+>>>>>>> 336c50d8b87fe355cbdfc7d79595992b3fb9dc58
+}

templates/web/common/site_layout.tt.html

@@ -19,6 +19,7 @@
     <link rel="stylesheet" href="[% static_subdomain %]/css/dist/app-[% edq(lang('text_direction')) %].css?v=[% css_timestamp %]" data-base-layout="true">
     <link rel="stylesheet" href="[% static_subdomain %]/css/dist/jqueryui/themes/base/jquery-ui.css" data-base-layout="true">
     <link rel="stylesheet" href="[% static_subdomain %]/css/dist/select2.min.css">
+	<link rel="stylesheet" href="[% static_subdomain %]/css/dist/custom-tagify.css" data-base-layout="true">
     <link rel="search" href="[% formatted_subdomain %]/cgi/opensearch.pl" type="application/opensearchdescription+xml" title="[% edq(lang('site_name')) %]">
 	[% header %]
     <style media="all">