fixed tags and fixed input fields in ideaDialog modal

Leantime · Oct 15, 2024 · 5d36105 · 5d36105
1 parent eb6a0b3
commit 5d36105
Show file tree

Hide file tree

Showing 6 changed files with 139 additions and 143 deletions.
diff --git a/app/Domain/Ideas/Templates/partials/ideaDialog.blade.php b/app/Domain/Ideas/Templates/partials/ideaDialog.blade.php
@@ -35,16 +35,34 @@
  type="text" 
  name="description" 
  value="{{ $canvasItem->description }}" 
- labelText="{{ __('input.placeholders.short_name') }}" 
- class="main-title-input" 
+ placeholder="{{ __('input.placeholders.short_name') }}" 
+ class="main-title-input mt-4"
  />
+
+ <x-global::forms.select name="tags" id="tags" variant="tags" maxItemCount=4 >
+ @php
+ $tags = is_array($canvasItem->tags) ? $canvasItem->tags : explode(',', $canvasItem->tags);
+ @endphp
+
+ @if(! empty($tags) )
+
+ @foreach ($tags as $key => $label)
+
+ <x-global::forms.select.select-option 
+ value="{{ $key }}" :selected="$tags == $key"
+ >
+
+ {!! __($label) !!}
+
+ </x-global::forms.select.select-option>
+
+ @endforeach
+
+ @endif
+
+ </x-global::forms.select>
+
 
- <x-global::forms.text-input 
- type="text" 
- name="tags" 
- id="tags" 
- value="{{ $canvasItem->tags }}" 
- />
  <textarea rows="3" cols="10" name="data" class="complexEditor" placeholder="">{!! htmlentities($canvasItem->data) !!}</textarea><br />
 
  <x-global::forms.button 

diff --git a/app/Views/Templates/components/content/modal/index.blade.php b/app/Views/Templates/components/content/modal/index.blade.php
@@ -1,6 +1,6 @@
 <dialog class="modal scroll-py-5" {{ $attributes }}>
 
- <div class="modal-box relative w-fit min-w-60 min-h-16 max-w-none mt-xl mb-xl max-sm:modal-bottom max-sm:w-full">
+ <div class="modal-box relative min-w-60 min-h-16 max-w-none mt-xl mb-xl max-sm:modal-bottom max-sm:w-full">
  <div class="modal-loader text-center"><span class="loading loading-ring loading-lg text-primary"></span></div>
  <div class="modal-content-loader full-width-loader fixed top-0">
  <div class="indeterminate" style=""></div>

diff --git a/app/Views/Templates/components/forms/field-row.blade.php b/app/Views/Templates/components/forms/field-row.blade.php
@@ -8,7 +8,7 @@
  'caption' => ''
 ])
 
-<div {{ $attributes->merge(['class'=> 'relative md:flex md:items-center mb-1' ]) }}>
+<div {{ $attributes->merge(['class'=> 'relative md:flex md:items-center mb-1' ]) }} >
 
  @if($labelPosition == 'left')
  <div class="md:w-1/3">

diff --git a/app/Views/Templates/components/forms/select/index.blade.php b/app/Views/Templates/components/forms/select/index.blade.php
@@ -19,7 +19,8 @@
  'addChoices' => 'false',
  'autocompleteTags' => false,
  'formHash' => md5(CURRENT_URL."selectChoices".mt_rand(0,100)),
- 'value' => ''
+ 'value' => '',
+ 'maxItemCount' => ''
 ])
 
 @php
@@ -77,7 +78,7 @@
  <span class="label-text">{{ $caption }}</span>
  @endif
 
- <div {{$attributes->merge(['class' => ($variant === 'tags' ? 'tags inline-block' : '')])}}>
+ <div {{$attributes->merge(['class' => ($variant === 'tags' ? 'tags inline-block w-full' : '')])}} >
  @if($leadingVisual)
  <span class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
  {{ $leadingVisual }}>
@@ -103,29 +104,8 @@
 <script>
 
  @if ($variant === 'tags')
- leantime.selects.initTags('.select-{{ $formHash }}',  {{ $search }}, {{ $autocompleteTags }}, '{{ $selectClassBuilder }}');
+ leantime.selects.initTags('.select-{{ $formHash }}', {{ $search }}, {{ (!$autocompleteTags) ? 'false' : 'true' }}, '{{ $selectClassBuilder }}', {{ $maxItemCount }});
  @else
  leantime.selects.initSelect('.select-{{ $formHash }}', {{ $search }}, '{{ $selectClassBuilder }}');
  @endif
 </script>
-
-
-
-
-{{-- @props([
- "type" => "select-one", //select-one, select-multiple, tags
- "search" => 'true',
- "addChoices" => 'false',
- "style" => "standard", //standard, tags, pill
- "formHash" => md5(CURRENT_URL."selectChoices".mt_rand(0,100))
-])
-
-<div id="select-wrapper-{{ $formHash }}" hx-target="#select-wrapper-{{ $formHash }}" {{ $attributes->merge([ 'class' => "inline-block" ]) }}>
- <select class="select-{{ $formHash }}" {{ $type == "multiple" ? "multiple" : "" }}>
- </select>
-</div>
-
-<script>
-
- leantime.selects.initSelect('.select-{{ $formHash }}', [{{ $slot }}], {{ $search }});
-</script> --}}
diff --git a/public/assets/js/app/core/selects.module.mjs b/public/assets/js/app/core/selects.module.mjs
@@ -1,41 +1,37 @@
-import Choices from "choices.js"
+import Choices from "choices.js";
 import { appUrl } from "./instance-info.module.mjs";
-import {decode} from 'html-entities';
-import jQuery from 'jquery';
-
+import { decode } from "html-entities";
+import jQuery from "jquery";
 
 function getOptions(selectElement) {
- const items = [];
-
- if (jQuery(selectElement).children()) {
-
- jQuery(selectElement).children().each(function(option) {
-
- var optionClone = jQuery(this).clone();
- items.push({
- value: optionClone.val(),
- label: decode(optionClone.html()),
- selected: optionClone.attr("selected"),
- disabled: optionClone.attr("disabled"),
- });
-
- jQuery(this).remove();
-
+ const items = [];
+
+ if (jQuery(selectElement).children()) {
+ jQuery(selectElement)
+ .children()
+ .each(function (option) {
+ var optionClone = jQuery(this).clone();
+ items.push({
+ value: optionClone.val(),
+ label: decode(optionClone.html()),
+ selected: optionClone.attr("selected"),
+ disabled: optionClone.attr("disabled"),
  });
 
- }
+ jQuery(this).remove();
+ });
+ }
 
-  return items;
+ return items;
 }
 
 export const initSelect = function (element, enableSearch, additionalClasses) {
+ let outerClasses = ["select"];
 
- let outerClasses = ["select"];
-
- if(additionalClasses !== '') {
- const selectClasses = additionalClasses.trim().split(" ");
- outerClasses = selectClasses;
- }
+ if (additionalClasses !== "") {
+ const selectClasses = additionalClasses.trim().split(" ");
+ outerClasses = selectClasses;
+ }
 
  const select = new Choices(element, {
  editItems: false,
@@ -59,38 +55,36 @@ export const initSelect = function (element, enableSearch, additionalClasses) {
  return `Only ${maxItemCount} values can be added`;
  },
  classNames: {
- containerOuter: outerClasses,
- containerInner: ["choices__inner"],
- input: ["choices__input"],
- inputCloned: [
- "choices__input--cloned",
- ],
- list: ["choices__list"],
- listItems: ["choices__list--multiple"],
- listSingle: ["choices__list--single"],
- listDropdown: ["dropdown-content", "menu"],
-
- item: ["choices__item"],
- itemSelectable: ["choices__item--selectable"],
- itemDisabled: ["choices__item--disabled"],
- itemChoice: ["choices__item--choice"],
- description: ["choices__description"],
- placeholder: ["choices__placeholder"],
- group: ["choices__group"],
- groupHeading: ["choices__heading"],
- button: ["choices__button"],
- activeState: ["is-active"],
- focusState: ["is-focused"],
- openState: ["is-open"],
- disabledState: ["is-disabled"],
- highlightedState: ["is-highlighted"],
- selectedState: ["is-selected"],
- flippedState: ["is-flipped"],
- loadingState: ["is-loading"],
- notice: ["choices__notice"],
- addChoice: ["choices__item--selectable"],
- noResults: ["has-no-results"],
- noChoices: ["has-no-choices"],
+ containerOuter: outerClasses,
+ containerInner: ["choices__inner"],
+ input: ["choices__input"],
+ inputCloned: ["choices__input--cloned"],
+ list: ["choices__list"],
+ listItems: ["choices__list--multiple"],
+ listSingle: ["choices__list--single"],
+ listDropdown: ["dropdown-content", "menu"],
+
+ item: ["choices__item"],
+ itemSelectable: ["choices__item--selectable"],
+ itemDisabled: ["choices__item--disabled"],
+ itemChoice: ["choices__item--choice"],
+ description: ["choices__description"],
+ placeholder: ["choices__placeholder"],
+ group: ["choices__group"],
+ groupHeading: ["choices__heading"],
+ button: ["choices__button"],
+ activeState: ["is-active"],
+ focusState: ["is-focused"],
+ openState: ["is-open"],
+ disabledState: ["is-disabled"],
+ highlightedState: ["is-highlighted"],
+ selectedState: ["is-selected"],
+ flippedState: ["is-flipped"],
+ loadingState: ["is-loading"],
+ notice: ["choices__notice"],
+ addChoice: ["choices__item--selectable"],
+ noResults: ["has-no-results"],
+ noChoices: ["has-no-choices"],
  },
  });
 
@@ -111,17 +105,22 @@ export const initSelect = function (element, enableSearch, additionalClasses) {
  );
 };
 
-export const initTags = function (element, enableSearch, autoCompleteTags, additionalClasses) {
-
- let outerClasses = ["select"];
-
- if(additionalClasses !== '') {
- const selectClasses = additionalClasses.trim().split(" ");
- outerClasses = selectClasses;
- }
+export const initTags = function (
+ element,
+ enableSearch,
+ autoCompleteTags,
+ additionalClasses,
+ maxItemCount = 4
+) {
+ let outerClasses = ["select"];
+
+ if (additionalClasses !== "") {
+ const selectClasses = additionalClasses.trim().split(" ");
+ outerClasses = selectClasses;
+ }
 
  const select = new Choices(element, {
- editItems: false,
+ editItems: true,
  addItems: true,
  allowHTML: true,
  addChoices: true,
@@ -131,51 +130,50 @@ export const initTags = function (element, enableSearch, autoCompleteTags, addit
  return `Press Enter to add "${value}"`;
  },
  placeholderValue: "🏷️ Add a tag",
- renderSelectedChoices: "auto",
- loadingText: "Loading...",
- noResultsText: "No results found",
- noChoicesText: "No choices to choose from",
- itemSelectText: "",
+ // renderSelectedChoices: "auto",
+ // loadingText: "Loading...",
+ // noResultsText: "No results found",
+ noChoicesText: "No choices option",
+ // itemSelectText: "",
  uniqueItemText: "Only unique values can be added",
- customAddItemText:
- "Only values matching specific conditions " + "can be added",
+ // customAddItemText:
+ //  "Only values matching specific conditions " + "can be added",
  searchPlaceholderValue: "Search for tags",
  removeItemButton: true,
+ maxItemCount: maxItemCount,
  maxItemText: (maxItemCount) => {
  return `Only ${maxItemCount} values can be added`;
  },
  classNames: {
- containerOuter: outerClasses,
- containerInner: ["choices__inner"],
- input: ["choices__input"],
- inputCloned: [
- "choices__input--cloned",
- ],
- list: ["dropdown-content","menu"],
- listItems: ["choices__list--multiple"],
- listSingle: ["choices__list--single"],
- listDropdown: ["dropdown-content","menu"],
- item: ["choices__item"],
- itemSelectable: ["choices__item--selectable"],
- itemDisabled: ["choices__item--disabled"],
- itemChoice: ["choices__item--choice"],
- description: ["choices__description"],
- placeholder: ["choices__placeholder"],
- group: ["choices__group"],
- groupHeading: ["choices__heading"],
- button: ["choices__button"],
- activeState: ["is-active"],
- focusState: ["is-focused"],
- openState: ["is-open"],
- disabledState: ["is-disabled"],
- highlightedState: ["is-highlighted"],
- selectedState: ["is-selected"],
- flippedState: ["is-flipped"],
- loadingState: ["is-loading"],
- notice: ["choices__notice"],
- addChoice: ["choices__item--selectable"],
- noResults: ["has-no-results"],
- noChoices: ["has-no-choices"],
+ // containerOuter: outerClasses,
+ // containerInner: ["choices__inner"],
+ // input: ["choices__input"],
+ // inputCloned: ["choices__input--cloned"],
+ // list: ["dropdown-content", "menu"],
+ // listItems: ["choices__list--multiple"],
+ // listSingle: ["choices__list--single"],
+ // listDropdown: ["dropdown-content", "menu"],
+ // item: ["choices__item"],
+ // itemSelectable: ["choices__item--selectable"],
+ // itemDisabled: ["choices__item--disabled"],
+ // itemChoice: ["choices__item--choice"],
+ // description: ["choices__description"],
+ // placeholder: ["choices__placeholder"],
+ // group: ["choices__group"],
+ // groupHeading: ["choices__heading"],
+ // button: ["choices__button"],
+ // activeState: ["is-active"],
+ // focusState: ["is-focused"],
+ // openState: ["is-open"],
+ // disabledState: ["is-disabled"],
+ // highlightedState: ["is-highlighted"],
+ // selectedState: ["is-selected"],
+ // flippedState: ["is-flipped"],
+ // loadingState: ["is-loading"],
+ // notice: ["choices__notice"],
+ // addChoice: ["choices__item--selectable"],
+ // noResults: ["has-no-results"],
+ // noChoices: ["has-no-choices"],
  },
  });
 
@@ -214,5 +212,5 @@ export const initTags = function (element, enableSearch, autoCompleteTags, addit
 
 export default {
  initSelect: initSelect,
- initTags: initSelect
+ initTags: initTags,
 };
diff --git a/public/assets/less/components/select.css b/public/assets/less/components/select.css
@@ -1,6 +1,6 @@
 
 .select {
- @apply select-sm text-sm w-full max-w-xs relative;
+ @apply select-sm text-sm w-full relative;
 
  &.select-ghost {
  @apply bg-none;