From 50ce87a35cd57cbf4471d3c2b068e64cae6151a5 Mon Sep 17 00:00:00 2001
From: Yannic Hock <yannic.hock@dfki.de>
Date: Wed, 18 Sep 2024 14:06:29 +0200
Subject: [PATCH] Updated Download Modal to include select all Buttons as well
 as including version-number in filename of downloaded file

---
 .idea/ajan-editor.iml                      |   6 +-
 .idea/workspace.xml                        | 124 ++++++++++++++++++---
 app/helpers/ui/export-modals/info-modal.js |  56 ++++------
 app/styles/_globals/modal.css              |   7 --
 4 files changed, 134 insertions(+), 59 deletions(-)

diff --git a/.idea/ajan-editor.iml b/.idea/ajan-editor.iml
index 72386636..66664563 100644
--- a/.idea/ajan-editor.iml
+++ b/.idea/ajan-editor.iml
@@ -1,7 +1,11 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <module type="PYTHON_MODULE" version="4">
   <component name="NewModuleRootManager">
-    <content url="file://$MODULE_DIR$" />
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/node_modules" />
+      <excludeFolder url="file://$MODULE_DIR$/npm" />
+      <excludeFolder url="file://$MODULE_DIR$/tmp" />
+    </content>
     <orderEntry type="inheritedJdk" />
     <orderEntry type="sourceFolder" forTests="false" />
   </component>
diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 669b6cb5..817cc286 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -1,11 +1,14 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
+  <component name="AutoImportSettings">
+    <option name="autoReloadType" value="SELECTIVE" />
+  </component>
   <component name="ChangeListManager">
-    <list default="true" id="0d184157-912c-4576-b7f7-f73b4493558b" name="Default Changelist" comment="Added Dockerfile">
+    <list default="true" id="0d184157-912c-4576-b7f7-f73b4493558b" name="Default Changelist" comment="Updated Download Modal to include select all Buttons as well as including version-number in filename of downloaded file">
+      <change beforePath="$PROJECT_DIR$/.idea/ajan-editor.iml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/ajan-editor.iml" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/app/components/behaviors/action-bar.js" beforeDir="false" afterPath="$PROJECT_DIR$/app/components/behaviors/action-bar.js" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/app/styles/components/ui/buttons/create-button.css" beforeDir="false" afterPath="$PROJECT_DIR$/app/styles/components/ui/buttons/create-button.css" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/app/templates/components/behaviors/action-bar.hbs" beforeDir="false" afterPath="$PROJECT_DIR$/app/templates/components/behaviors/action-bar.hbs" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/app/helpers/ui/export-modals/info-modal.js" beforeDir="false" afterPath="$PROJECT_DIR$/app/helpers/ui/export-modals/info-modal.js" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/app/styles/_globals/modal.css" beforeDir="false" afterPath="$PROJECT_DIR$/app/styles/_globals/modal.css" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -80,6 +83,18 @@
   <component name="Git.Settings">
     <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
   </component>
+  <component name="GitHubPullRequestSearchHistory">{
+  &quot;lastFilter&quot;: {
+    &quot;state&quot;: &quot;OPEN&quot;,
+    &quot;assignee&quot;: &quot;YannicHock&quot;
+  }
+}</component>
+  <component name="GithubPullRequestsUISettings">{
+  &quot;selectedUrlAndAccountId&quot;: {
+    &quot;url&quot;: &quot;git@github.com:aantakli/AJAN-editor.git&quot;,
+    &quot;accountId&quot;: &quot;d960d26e-9041-4fcd-9a72-da64ef3c5e99&quot;
+  }
+}</component>
   <component name="IdeDocumentHistory">
     <option name="CHANGED_PATHS">
       <list>
@@ -140,13 +155,19 @@
   <component name="MarkdownSettingsMigration">
     <option name="stateVersion" value="1" />
   </component>
+  <component name="PackageJsonUpdateNotifier">
+    <dismissed value="$PROJECT_DIR$/tmp/funnel-input_base_path-yx4RZwNu.tmp/package.json" />
+  </component>
+  <component name="ProjectColorInfo">{
+  &quot;associatedIndex&quot;: 6
+}</component>
   <component name="ProjectFrameBounds">
     <option name="y" value="33" />
     <option name="width" value="1184" />
     <option name="height" value="773" />
   </component>
   <component name="ProjectId" id="26dl8NHBbJ1MDZyPUiV9ds4gQAo" />
-  <component name="ProjectLevelVcsManager">
+  <component name="ProjectLevelVcsManager" settingsEditedManually="true">
     <ConfirmationsSetting value="2" id="Add" />
   </component>
   <component name="ProjectView">
@@ -322,16 +343,25 @@
     <option name="hideEmptyMiddlePackages" value="true" />
     <option name="showLibraryContents" value="true" />
   </component>
-  <component name="PropertiesComponent"><![CDATA[{
-  "keyToString": {
-    "WebServerToolWindowFactoryState": "false",
-    "last_opened_file_path": "/home/arch/projects/work/ajan/AJAN-editor/app",
-    "node.js.detected.package.eslint": "true",
-    "node.js.selected.package.eslint": "(autodetect)",
-    "nodejs_package_manager_path": "npm",
-    "vue.rearranger.settings.migration": "true"
+  <component name="PropertiesComponent">{
+  &quot;keyToString&quot;: {
+    &quot;RunOnceActivity.ShowReadmeOnStart&quot;: &quot;true&quot;,
+    &quot;WebServerToolWindowFactoryState&quot;: &quot;false&quot;,
+    &quot;git-widget-placeholder&quot;: &quot;feature/download&quot;,
+    &quot;ignore.virus.scanning.warn.message&quot;: &quot;true&quot;,
+    &quot;last_opened_file_path&quot;: &quot;C:/Users/yanni/Documents/Projects/AJAN-editor&quot;,
+    &quot;node.js.detected.package.eslint&quot;: &quot;true&quot;,
+    &quot;node.js.detected.package.tslint&quot;: &quot;true&quot;,
+    &quot;node.js.selected.package.eslint&quot;: &quot;(autodetect)&quot;,
+    &quot;node.js.selected.package.tslint&quot;: &quot;(autodetect)&quot;,
+    &quot;nodejs_package_manager_path&quot;: &quot;npm&quot;,
+    &quot;npm.build.executor&quot;: &quot;Run&quot;,
+    &quot;npm.serve.executor&quot;: &quot;Run&quot;,
+    &quot;npm.start.executor&quot;: &quot;Run&quot;,
+    &quot;settings.editor.selected.configurable&quot;: &quot;preferences.pluginManager&quot;,
+    &quot;vue.rearranger.settings.migration&quot;: &quot;true&quot;
   }
-}]]></component>
+}</component>
   <component name="RecentsManager">
     <key name="CopyFile.RECENT_KEYS">
       <recent name="$PROJECT_DIR$/app/styles/components" />
@@ -341,8 +371,8 @@
       <recent name="$PROJECT_DIR$/app/helpers/agents/actions" />
     </key>
   </component>
-  <component name="RunManager">
-    <configuration name="Build" type="docker-deploy" factoryName="dockerfile" server-name="local">
+  <component name="RunManager" selected="npm.start">
+    <configuration name="Build" type="docker-deploy" factoryName="dockerfile">
       <deployment type="dockerfile">
         <settings>
           <option name="imageTag" value="ajan-editor:latest" />
@@ -360,6 +390,49 @@
       </deployment>
       <method v="2" />
     </configuration>
+    <configuration name="build" type="js.build_tools.npm" nameIsGenerated="true">
+      <package-json value="$PROJECT_DIR$/package.json" />
+      <command value="run" />
+      <scripts>
+        <script value="build" />
+      </scripts>
+      <node-interpreter value="project" />
+      <envs />
+      <method v="2" />
+    </configuration>
+    <configuration name="serve" type="js.build_tools.npm" nameIsGenerated="true">
+      <package-json value="$PROJECT_DIR$/package.json" />
+      <command value="run" />
+      <scripts>
+        <script value="serve" />
+      </scripts>
+      <node-interpreter value="project" />
+      <envs />
+      <method v="2" />
+    </configuration>
+    <configuration name="start" type="js.build_tools.npm" nameIsGenerated="true">
+      <package-json value="$PROJECT_DIR$/package.json" />
+      <command value="run" />
+      <scripts>
+        <script value="start" />
+      </scripts>
+      <node-interpreter value="project" />
+      <envs />
+      <method v="2" />
+    </configuration>
+    <list>
+      <item itemvalue="Docker.Build" />
+      <item itemvalue="npm.build" />
+      <item itemvalue="npm.serve" />
+      <item itemvalue="npm.start" />
+    </list>
+  </component>
+  <component name="SharedIndexes">
+    <attachedChunks>
+      <set>
+        <option value="bundled-js-predefined-d6986cc7102b-7c0b70fcd90d-JavaScript-WS-242.21829.149" />
+      </set>
+    </attachedChunks>
   </component>
   <component name="SpellCheckerSettings" RuntimeDictionaries="0" Folders="0" CustomDictionaries="0" DefaultDictionary="application-level" UseSingleDictionary="true" transferred="true" />
   <component name="SvnConfiguration">
@@ -427,6 +500,12 @@
       <workItem from="1647851839839" duration="267000" />
       <workItem from="1648573764861" duration="3516000" />
       <workItem from="1678548669618" duration="5439000" />
+      <workItem from="1724241500573" duration="1466000" />
+      <workItem from="1724243088424" duration="7409000" />
+      <workItem from="1724418363940" duration="1959000" />
+      <workItem from="1725374516812" duration="13000" />
+      <workItem from="1725907590544" duration="702000" />
+      <workItem from="1725908337642" duration="8864000" />
     </task>
     <task id="LOCAL-00001" summary="Added Dockerfile">
       <created>1647763371190</created>
@@ -435,7 +514,15 @@
       <option name="project" value="LOCAL" />
       <updated>1647763371191</updated>
     </task>
-    <option name="localTasksCounter" value="2" />
+    <task id="LOCAL-00002" summary="Updated Download Modal to include select all Buttons as well as including version-number in filename of downloaded file">
+      <option name="closed" value="true" />
+      <created>1724249900784</created>
+      <option name="number" value="00002" />
+      <option name="presentableId" value="LOCAL-00002" />
+      <option name="project" value="LOCAL" />
+      <updated>1724249900784</updated>
+    </task>
+    <option name="localTasksCounter" value="3" />
     <servers />
   </component>
   <component name="TimeTrackingManager">
@@ -507,7 +594,8 @@
   </component>
   <component name="VcsManagerConfiguration">
     <MESSAGE value="Added Dockerfile" />
-    <option name="LAST_COMMIT_MESSAGE" value="Added Dockerfile" />
+    <MESSAGE value="Updated Download Modal to include select all Buttons as well as including version-number in filename of downloaded file" />
+    <option name="LAST_COMMIT_MESSAGE" value="Updated Download Modal to include select all Buttons as well as including version-number in filename of downloaded file" />
   </component>
   <component name="editorHistoryManager">
     <entry file="file://$PROJECT_DIR$/app/templates/components/ui/delimiter-horizontal.hbs">
diff --git a/app/helpers/ui/export-modals/info-modal.js b/app/helpers/ui/export-modals/info-modal.js
index a391931b..eb0f237c 100644
--- a/app/helpers/ui/export-modals/info-modal.js
+++ b/app/helpers/ui/export-modals/info-modal.js
@@ -41,8 +41,12 @@ function getInfoHTML($body, info) {
   info.version = createInputField($info, "Version");
   info.comment = createInputField($info, "Comment");
 
-  let $selectAll = $("<button class='selection-toggle rightmost' data-toggleTarget='all' data-toggle='true'>Select All</button>")
-  $info.append($selectAll);
+  let $selectionfield = $("<div>", {style: "display: flex; align-items: baseline;"});
+  $info.append($selectionfield);
+  let $selection = $("<p>De/-Select All</p>");
+  $selectionfield.append($selection);
+  let $selectAll = $("<button style='margin-left: 5px' class='selection-toggle ui yellow icon button' data-toggleTarget='all' data-toggle='true'><i class='square outline icon no-side-margins'></i></button>")
+  $selectionfield.append($selectAll);
   $selectAll.on('click', {event}, selectAll);
 
   let $infoDiv = createModelsDiv($header, $info);
@@ -50,10 +54,16 @@ function getInfoHTML($body, info) {
   $body.append($infoDiv);
 }
 
-function createHeader(text, active) {
+function createHeader(text, active = "", selection = false) {
   let $header = $("<div>", { class: "modal-models-header title " + active })
   $header.append($("<i>", { class: "dropdown icon" }))
   $header.append($("<span>", {}).text(text));
+  if (selection) {
+    let $selectAll = $("<button class='selection-toggle add-optional ui yellow icon button' data-toggle='true'></button>")
+      .append($("<i class='square outline icon no-side-margins'></i>"));
+    $header.append($selectAll);
+    $selectAll.on('click', {event}, selectAll);
+  }
   return $header;
 }
 
@@ -70,7 +80,7 @@ function createModelsDiv($header, $info) {
 
 function getOptionals($body, info) {
   let $header = createHeader("Add Optionals");
-  let $add = $("<button>", { class: "add-optional ui yellow icon button rightmost" })
+  let $add = $("<button>", { class: "add-optional ui yellow icon button  " })
     .append($("<i class='add icon no-side-margins'></i>"));
   $header.append($add);
   let $info = $("<div>", { class: "modal-models-overview" });
@@ -87,7 +97,7 @@ function addOptional(event) {
   let $optional = $("<div>", { class: "modal-models-optional" });
   let fields = { "id": utility.generateUUID(), "name": createInputField($optional, "Name"), "value": createInputField($optional, "Value") };
   //remove Button
-  let $remove = $("<button>", { class: "remove-optional ui red icon button rightmost" })
+  let $remove = $("<button>", { class: "remove-optional ui red icon button  " })
     .append($("<i class='remove icon no-side-margins'></i>"));
   $remove.on('click', { optional_info: info, optional_fields: fields }, removeOptional);
   $optional.append($remove);
@@ -114,7 +124,7 @@ function removeOptional(event) {
 // ---------------------------------
 
 function getAgentModels($body, model) {
-  let $header = createHeader("Add Agent Models");
+  let $header = createHeader("Add Agent Models", "", true);
   let $info = $("<div>", { class: "modal-models-overview" });
   createTemplates($info, model);
   createBehaviors($info, model);
@@ -128,13 +138,10 @@ function getAgentModels($body, model) {
 }
 
 function createTemplates($info, model) {
-  let $selectAll = $("<button class='selection-toggle rightmost' data-toggle='true'>Select All</button>")
-  $info.append($selectAll);
   $info.append($("<h3>Agent Templates</h3>"));
   model.defs.templates.forEach(function (entry) {
     entry.field = createSelectField($info, entry);
   });
-  $selectAll.on('click', {event}, selectAll);
 }
 
 function createBehaviors($info, model) {
@@ -211,7 +218,7 @@ function createSelectField($info, object) {
 // ---------------------------------
 
 function getBehaviorModels($body, model) {
-  let $header = createHeader("Add Behavior Models");
+  let $header = createHeader("Add Behavior Models", "", true);
   let $info = $("<div>", { class: "modal-models-overview" });
   createBTs($info, model);
 
@@ -221,13 +228,10 @@ function getBehaviorModels($body, model) {
 }
 
 function createBTs($info, model) {
-  let $selectAll = $("<button class='selection-toggle rightmost' data-toggle='true'>Select All</button>")
-  $info.append($selectAll);
   $info.append($("<h3>Behavior Trees</h3>"));
   model.defs.forEach(function (entry) {
     entry.field = createSelectField($info, entry);
   });
-  $selectAll.on('click', {event}, selectAll);
 }
 
 // ---------------------------------
@@ -235,7 +239,7 @@ function createBTs($info, model) {
 // ---------------------------------
 
 function getActionModels($body, model) {
-  let $header = createHeader("Add Action Models");
+  let $header = createHeader("Add Action Models", "", true);
   let $info = $("<div>", { class: "modal-models-overview" });
   createActions($info, model);
   let $infoDiv = createModelsDiv($header, $info);
@@ -244,14 +248,10 @@ function getActionModels($body, model) {
 }
 
 function createActions($info, model) {
-  let $selectAll = $("<button class='selection-toggle rightmost' data-toggle='true'>Select All</button>")
-  $info.append($selectAll);
-  console.log(model);
   $info.append($("<h3>Service Actions</h3>"));
   model.defs.services.forEach(function (entry) {
     entry.field = createSelectField($info, entry);
   });
-  $selectAll.on('click', {event}, selectAll);
 }
 
 // ---------------------------------
@@ -259,24 +259,19 @@ function createActions($info, model) {
 // ---------------------------------
 
 function getDomain($body, model) {
-  let $header = createHeader("Add Domain information");
+  let $header = createHeader("Add Domain information", "", true);
   let $info = $("<div>", { class: "modal-models-overview" });
   createDomains($info, model);
-  console.log($body);
-  console.log(model);
   let $infoDiv = createModelsDiv($header, $info);
   // Append to modal body
   $body.append($infoDiv);
 }
 
 function createDomains($info, model) {
-  let $selectAll = $("<button class='selection-toggle rightmost' data-toggle='true'>Select All</button>")
-  $info.append($selectAll);
   $info.append($("<h3>Domain Information</h3>"));
   model.defs.forEach(function (entry) {
     entry.field = createSelectField($info, entry);
   });
-  $selectAll.on('click', {event}, selectAll);
 }
 
 // ---------------------------------
@@ -284,24 +279,19 @@ function createDomains($info, model) {
 // ---------------------------------
 
 function getDefinitions($body, model) {
-  let $header = createHeader("Add Editor Definitions");
+  let $header = createHeader("Add Editor Definitions", "", true);
   let $info = $("<div>", { class: "modal-models-overview" });
   createDefinitions($info, model);
-  console.log($body);
-  console.log(model);
   let $infoDiv = createModelsDiv($header, $info);
   // Append to modal body
   $body.append($infoDiv);
 }
 
 function createDefinitions($info, model) {
-  let $selectAll = $("<button class='selection-toggle rightmost' data-toggle='true'>Select All</button>")
-  $info.append($selectAll);
   $info.append($("<h3>Editor Definitions</h3>"));
   model.defs.forEach(function (entry) {
     entry.field = createSelectField($info, entry);
   });
-  $selectAll.on('click', {event}, selectAll);
 }
 
 // ---------------------------------
@@ -318,14 +308,14 @@ function selectAll(event){
     for (let i = 0; i < toggleButtons.length; i++) {
       let toggleButton = toggleButtons[i];
       toggleButton.attributes["data-toggle"].value = value === "true" ? "false" : "true";
-      toggleButton.innerHTML = value === "false" ? "Select All" : "Deselect All";
+      toggleButton.innerHTML = value === "false" ? "<i class='square outline icon no-side-margins'></i>" : "<i class='check square outline icon no-side-margins'></i>";
     }
   } else {
-    modalCheckboxs = target.parentElement.getElementsByClassName("modal-checkbox");
+    modalCheckboxs = target.parentElement.parentElement.getElementsByClassName("modal-checkbox");
   }
   for (let i = 0; i < modalCheckboxs.length; i++) {
     modalCheckboxs[i].checked = value.toLowerCase() === "true";
   }
-  target.innerHTML = value === "false" ? "Select All" : "Deselect All";
+  target.innerHTML = value === "false" ? "<i class='square outline icon no-side-margins'></i>" : "<i class='check square outline icon no-side-margins'></i>";
   target.attributes["data-toggle"].value = value === "true" ? "false" : "true";
 }
diff --git a/app/styles/_globals/modal.css b/app/styles/_globals/modal.css
index 8c150d7e..6e6297e1 100644
--- a/app/styles/_globals/modal.css
+++ b/app/styles/_globals/modal.css
@@ -137,10 +137,3 @@
 :global(#modal-load) {
   z-index: 9;
 }
-
-:global(.selection-toggle) {
-  background-color: #FBBD08;
-  border: 0;
-  padding: 7px;
-  border-radius: 10px;
-}