From 5be2f3b6e282c81cf5e92d7063594f9ed8c81c7d Mon Sep 17 00:00:00 2001
From: Quentin <quentin.monmert@gmail.com>
Date: Wed, 18 Oct 2023 15:03:23 +0200
Subject: [PATCH] Refactoring: ModulesPatch.vue

---
 src/main/style/organism/_organism.scss        |   1 +
 .../modules-patch/_modules-patch.scss         | 126 ++++++++++++++++++
 .../modules-patch/modules-patch.code.pug      |   3 +
 .../organism/modules-patch/modules-patch.md   |   1 +
 .../modules-patch/modules-patch.mixin.pug     |  38 ++++++
 .../modules-patch/modules-patch.render.pug    |   4 +
 src/main/style/organism/organism.pug          |   2 +
 src/main/style/token/_colors.scss             |   3 +
 src/main/style/token/_token.scss              |   1 +
 src/main/style/token/custom.scss              |   5 +
 .../primary/modules-patch/ModulesPatch.html   |   2 +-
 .../primary/modules-patch/ModulesPatch.vue    | 119 -----------------
 12 files changed, 185 insertions(+), 120 deletions(-)
 create mode 100644 src/main/style/organism/modules-patch/_modules-patch.scss
 create mode 100644 src/main/style/organism/modules-patch/modules-patch.code.pug
 create mode 100644 src/main/style/organism/modules-patch/modules-patch.md
 create mode 100644 src/main/style/organism/modules-patch/modules-patch.mixin.pug
 create mode 100644 src/main/style/organism/modules-patch/modules-patch.render.pug
 create mode 100644 src/main/style/token/custom.scss

diff --git a/src/main/style/organism/_organism.scss b/src/main/style/organism/_organism.scss
index c1ad3d944fb..f73db413834 100644
--- a/src/main/style/organism/_organism.scss
+++ b/src/main/style/organism/_organism.scss
@@ -1,5 +1,6 @@
 @import 'header/header';
 @import 'module-parameters/module-parameters';
+@import 'modules-patch/modules-patch';
 @import 'module-patch-loader/module-patch-loader';
 @import 'module-properties/module-properties';
 @import 'side-menu/side-menu';
diff --git a/src/main/style/organism/modules-patch/_modules-patch.scss b/src/main/style/organism/modules-patch/_modules-patch.scss
new file mode 100644
index 00000000000..823f1236a83
--- /dev/null
+++ b/src/main/style/organism/modules-patch/_modules-patch.scss
@@ -0,0 +1,126 @@
+$jhlite-modules-patch-line-color: $jhlite-global-line-color;
+$jhlite-modules-patch-box-radius: $jhlite-global-box-radius;
+$jhlite-modules-patch-primary-color: $jhlite-global-primary-color;
+$jhlite-modules-patch-line-color: $jhlite-global-line-color;
+$jhlite-modules-patch-applied-module-color: $jhlite-global-applied-module-color;
+$jhlite-modules-patch-primary-color: $jhlite-global-primary-color;
+$jhlite-modules-patch-line-color: $jhlite-global-line-color;
+$jhlite-modules-patch-primary-input-color: $jhlite-global-primary-input-color;
+$jhlite-modules-patch-disabled-color: $jhlite-global-disabled-color;
+
+.jhipster-modules-patch {
+  color: var(--jhlite-global-color-text);
+
+  .jhipster-modules-list {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+
+    &--categories {
+      flex-grow: 1;
+      padding: 0 15px;
+      overflow-y: auto;
+    }
+  }
+
+  .jhipster-modules-filters {
+    display: flex;
+    align-items: center;
+    margin: 15px 0;
+    padding: 0 15px;
+    height: 40px;
+
+    &--tags {
+      margin-right: 10px;
+    }
+
+    &--filter {
+      flex-grow: 1;
+      border: 1px solid $jhlite-modules-patch-line-color;
+      border-radius: $jhlite-modules-patch-box-radius;
+      padding: 0 10px;
+      font-size: 1.4em;
+    }
+
+    &--displayed-modules-count {
+      margin-left: 15px;
+      border-radius: 1em;
+      background-color: $jhlite-modules-patch-primary-color;
+      padding: 3px 1em;
+      color: #fff;
+    }
+  }
+
+  .jhipster-module-category {
+    &--name {
+      font-size: 1.4em;
+      font-weight: 800;
+    }
+  }
+
+  .jhipster-module {
+    display: flex;
+    margin-bottom: 10px;
+    border: 1px solid $jhlite-modules-patch-line-color;
+    border-radius: $jhlite-modules-patch-box-radius;
+
+    &.selected {
+      background-color: $jhlite-modules-patch-primary-color;
+      color: var(--jhlite-white);
+    }
+
+    &--content {
+      flex-grow: 1;
+      cursor: pointer;
+      padding: 5px 10px;
+    }
+
+    &--content.not-selected {
+      display: flex;
+    }
+
+    &--content.applied {
+      background-color: $jhlite-modules-patch-applied-module-color;
+    }
+
+    &--tags.not-selected,
+    &--description.not-selected {
+      display: none;
+    }
+
+    &--tags.selected {
+      display: flex;
+      margin: 5px 0;
+    }
+
+    &--description.selected {
+      display: block;
+    }
+
+    &--tag {
+      margin-right: 7px;
+      border-radius: 1em;
+      background-color: $jhlite-modules-patch-primary-color;
+      padding: 0 0.5em;
+      font-style: italic;
+    }
+
+    &--slug {
+      font-weight: bold;
+    }
+
+    &--apply-button {
+      border: 0;
+      border-left: 1px solid $jhlite-modules-patch-line-color;
+      background-color: transparent;
+      padding: 0 10px;
+      color: $jhlite-modules-patch-primary-input-color;
+      font-size: 1.5em;
+      font-weight: bold;
+    }
+
+    &--apply-button:disabled {
+      color: $jhlite-modules-patch-disabled-color;
+    }
+  }
+}
diff --git a/src/main/style/organism/modules-patch/modules-patch.code.pug b/src/main/style/organism/modules-patch/modules-patch.code.pug
new file mode 100644
index 00000000000..f09ce7ceae2
--- /dev/null
+++ b/src/main/style/organism/modules-patch/modules-patch.code.pug
@@ -0,0 +1,3 @@
+include modules-patch.mixin.pug
+
++jhlite-modules-patch
diff --git a/src/main/style/organism/modules-patch/modules-patch.md b/src/main/style/organism/modules-patch/modules-patch.md
new file mode 100644
index 00000000000..98ba20c0fa8
--- /dev/null
+++ b/src/main/style/organism/modules-patch/modules-patch.md
@@ -0,0 +1 @@
+## Modules patch
diff --git a/src/main/style/organism/modules-patch/modules-patch.mixin.pug b/src/main/style/organism/modules-patch/modules-patch.mixin.pug
new file mode 100644
index 00000000000..35956c561c4
--- /dev/null
+++ b/src/main/style/organism/modules-patch/modules-patch.mixin.pug
@@ -0,0 +1,38 @@
+include /molecule/tag-filter/tag-filter.mixin.pug
+include /organism/module-parameters/module-parameters.mixin.pug
+include /organism/module-properties/module-properties.mixin.pug
+
+mixin jhlite-modules-patch
+  .jhipster-modules-patch.jhlite-menu-content-template
+    .jhipster-modules-list.jhlite-menu-content-template--content
+      .jhipster-modules-filters
+        .jhipster-modules-filters--tags
+          +jhlite-tag-filter
+          +jhlite-tag-filter
+          +jhlite-tag-filter
+        input.jhipster-modules-filters--filter(placeholder='Filter')
+        .jhipster-modules-filters--displayed-modules-count 3 / 5
+
+      .jhipster-modules-list--categories
+        div
+          div
+            h2.jhipster-module-category--name Angular
+            .jhipster-module.not-selected.not-applied
+              .jhipster-module--content.not-selected.not-applied
+                .jhipster-module--tags.not-selected.not-applied
+                  .jhipster-module--tag angular
+                  .jhipster-module--tag client
+                .jhipster-module--slug.not-selected.not-applied angular-core
+                .jhipster-module--description.not-selected.not-applied Add Angular + Angular CLI
+                  +jhlite-module-parameters('selected', 'all-valid-parameters')
+              button.jhipster-module--apply-button
+                span
+                  // TODO: IconVue
+                  em.jhlite-icon.jhlite-icon-play
+
+    aside.jhlite-menu-content-template--menu
+      .jhlite-side-menu
+        .jhlite-side-menu--slot.-expand
+          +jhlite-module-properties
+        .jhlite-side-menu--slot
+          // TODO: ProjectActionsVue
diff --git a/src/main/style/organism/modules-patch/modules-patch.render.pug b/src/main/style/organism/modules-patch/modules-patch.render.pug
new file mode 100644
index 00000000000..ee1642ca326
--- /dev/null
+++ b/src/main/style/organism/modules-patch/modules-patch.render.pug
@@ -0,0 +1,4 @@
+extends /layout
+
+block body
+  include modules-patch.code.pug
diff --git a/src/main/style/organism/organism.pug b/src/main/style/organism/organism.pug
index c8078768ad6..031182d0678 100644
--- a/src/main/style/organism/organism.pug
+++ b/src/main/style/organism/organism.pug
@@ -18,6 +18,8 @@ block content
       include:componentDoc(height=160) landscape-minimap/landscape-minimap.md
     .tikui-vertical-spacing--line
       include:componentDoc(height=230) module-parameters/module-parameters.md
+    .tikui-vertical-spacing--line
+      include:componentDoc(height=700) modules-patch/modules-patch.md
     .tikui-vertical-spacing--line
       include:componentDoc(height=700) module-patch-loader/module-patch-loader.md
     .tikui-vertical-spacing--line
diff --git a/src/main/style/token/_colors.scss b/src/main/style/token/_colors.scss
index b377bca2158..65863ef06ce 100644
--- a/src/main/style/token/_colors.scss
+++ b/src/main/style/token/_colors.scss
@@ -20,6 +20,9 @@ $jhlite-global-secondary-color: #0f172a; /* $jhipster-lite-secondary-color */
 $jhlite-global-line-color: var(--jhlite-line-color); /* $jhipster-lite-line-color */
 $jhlite-global-primary-input-color: var(--jhlite-primary-input-color); /* $jhipster-lite-primary-input-color */
 $jhlite-global-primary-text-color: #ddeffc; /* $jhipster-lite-primary-text-color */
+$jhlite-global-box-radius: 6px; /* $jhipster-lite-box-radius */
+$jhlite-global-applied-module-color: #2f7b17; /* $jhipster-lite-applied-module-color */
+$jhlite-global-disabled-color: #6d6d6d; /* $jhipster-lite-disabled-color */
 
 /** Other */
 $jhlite-global-color-fill-disabled-dark: color.change(
diff --git a/src/main/style/token/_token.scss b/src/main/style/token/_token.scss
index f72feb2804d..1c39f5bb42c 100644
--- a/src/main/style/token/_token.scss
+++ b/src/main/style/token/_token.scss
@@ -3,3 +3,4 @@
 @import 'colors';
 @import 'breakpoint';
 @import 'animation';
+@import 'custom';
diff --git a/src/main/style/token/custom.scss b/src/main/style/token/custom.scss
new file mode 100644
index 00000000000..17098015503
--- /dev/null
+++ b/src/main/style/token/custom.scss
@@ -0,0 +1,5 @@
+// TODO: duplicate properties from src/main/webapp/content/css/custom.css
+
+button:not(:last-child) {
+  margin-right: 0.75rem;
+}
diff --git a/src/main/webapp/app/module/primary/modules-patch/ModulesPatch.html b/src/main/webapp/app/module/primary/modules-patch/ModulesPatch.html
index 8b9137d8449..415ac313afd 100644
--- a/src/main/webapp/app/module/primary/modules-patch/ModulesPatch.html
+++ b/src/main/webapp/app/module/primary/modules-patch/ModulesPatch.html
@@ -1,5 +1,5 @@
 <ModulesPatchLoaderVue v-if="content.isLoading()" />
-<div class="jhipster-modules jhlite-menu-content-template" v-else data-selector="modules-list">
+<div class="jhipster-modules-patch jhlite-menu-content-template" v-else data-selector="modules-list">
   <div class="jhipster-modules-list jhlite-menu-content-template--content">
     <div class="jhipster-modules-filters">
       <div class="jhipster-modules-filters--tags">
diff --git a/src/main/webapp/app/module/primary/modules-patch/ModulesPatch.vue b/src/main/webapp/app/module/primary/modules-patch/ModulesPatch.vue
index c4d2421acf2..07fa0577d91 100644
--- a/src/main/webapp/app/module/primary/modules-patch/ModulesPatch.vue
+++ b/src/main/webapp/app/module/primary/modules-patch/ModulesPatch.vue
@@ -1,122 +1,3 @@
 <template src="./ModulesPatch.html"></template>
 
 <script lang="ts" src="./ModulesPatch.component.ts"></script>
-
-<style lang="scss">
-.jhipster-modules {
-  color: var(--jhlite-global-color-text);
-}
-
-.jhipster-modules-list {
-  flex-grow: 1;
-  display: flex;
-  flex-direction: column;
-
-  &--categories {
-    overflow-y: auto;
-    flex-grow: 1;
-    padding: 0 15px;
-  }
-}
-
-.jhipster-modules-filters {
-  margin: 15px 0;
-  padding: 0 15px;
-  height: 40px;
-  display: flex;
-  align-items: center;
-
-  &--tags {
-    margin-right: 10px;
-  }
-
-  &--filter {
-    font-size: 1.4em;
-    border: 1px solid $jhipster-lite-line-color;
-    border-radius: $jhipster-lite-box-radius;
-    padding: 0 10px;
-    flex-grow: 1;
-  }
-
-  &--displayed-modules-count {
-    margin-left: 15px;
-    background-color: $jhipster-lite-primary-color;
-    padding: 3px 1em;
-    border-radius: 1em;
-    color: #ffffff;
-  }
-}
-
-.jhipster-module-category {
-  &--name {
-    font-size: 1.4em;
-    font-weight: 800;
-  }
-}
-
-.jhipster-module {
-  border: 1px solid $jhipster-lite-line-color;
-  border-radius: $jhipster-lite-box-radius;
-  margin-bottom: 10px;
-  display: flex;
-
-  &.selected {
-    background-color: $jhipster-lite-primary-color;
-    color: var(--jhlite-white);
-  }
-
-  &--content {
-    cursor: pointer;
-    flex-grow: 1;
-    padding: 5px 10px;
-  }
-
-  &--content.not-selected {
-    display: flex;
-  }
-
-  &--content.applied {
-    background-color: $jhipster-lite-applied-module-color;
-  }
-
-  &--tags.not-selected,
-  &--description.not-selected {
-    display: none;
-  }
-
-  &--tags.selected {
-    display: flex;
-    margin: 5px 0;
-  }
-
-  &--description.selected {
-    display: block;
-  }
-
-  &--tag {
-    background-color: $jhipster-lite-secondary-color;
-    font-style: italic;
-    margin-right: 7px;
-    padding: 0 0.5em;
-    border-radius: 1em;
-  }
-
-  &--slug {
-    font-weight: bold;
-  }
-
-  &--apply-button {
-    background-color: transparent;
-    border: 0;
-    border-left: 1px solid $jhipster-lite-line-color;
-    padding: 0 10px;
-    color: $jhipster-lite-primary-input-color;
-    font-weight: bold;
-    font-size: 1.5em;
-  }
-
-  &--apply-button:disabled {
-    color: $jhipster-lite-disabled-color;
-  }
-}
-</style>