New: Add groups to choose

Garagist · Oct 9, 2024 · 7c34408 · 7c34408
1 parent 7d15def
commit 7c34408
Show file tree

Hide file tree

Showing 6 changed files with 71 additions and 10 deletions.
diff --git a/Configuration/Settings.Garagist.yaml b/Configuration/Settings.Garagist.yaml
@@ -39,7 +39,10 @@ Garagist:
       mapping: null
 
       # Add here to segments to choose from on creation/edit dialog
-      # You can pass an array (eg. [1, 2, 3]) or an integer
+      # You can pass an array (eg. [1, 2, 3]) or an integer, if you have a nested array, the entries are handled as groups
+      # choose:
+      #   - [1, 2,] <- Is a group, of preselected segments the user gets radio buttons
+      #   - 3 <- Is a single segment, the user gets a checkbox
       choose: null
 
       # Add here the IDs of the segments you want to hide (eg. for unconfirmed contacts)

diff --git a/Resources/Private/Modules/Component/Checkbox.fusion b/Resources/Private/Modules/Component/Checkbox.fusion
@@ -2,17 +2,26 @@ prototype(Garagist.Mautic:Component.Checkbox) < prototype(Neos.Fusion:Component)
     xModel = null
     value = null
     label = null
+    number = false
+    boolean = false
+
+    disabled = null
+    xDisabled = null
 
     renderer = afx`
-        <label class={Carbon.String.merge(props.class, "!p-0 !flex items-center justify-start mt-2 cursor-pointer group")}>
+        <label class={Carbon.String.merge(props.class, "!p-0 !flex items-center justify-start mt-2 cursor-pointer group has-[:disabled]:cursor-not-allowed")}>
             <input
-                x-model={props.xModel}
+                x-model={!props.number && !props.boolean ? props.xModel : null}
+                "x-model.boolean"={!props.number && props.boolean ? props.xModel : null}
+                "x-model.number"={props.number ? props.xModel : null}
+                disabled={props.disabled}
+                :disabled={props.xDisabled}
                 value={props.value}
                 type="checkbox"
                 class="peer sr-only"
             />
-            <i class="fas fa-check w-5 h-5 mr-2 overflow-hidden relative bg-neos-gray-light border border-neos-subtle-light text-neos-subtle flex items-center justify-center group-hover:border-neos-blue-light group-focus-within:border-neos-blue-light peer-checked:text-white peer-checked:bg-neos-blue-light peer-checked:border-neos-blue-light"></i>
-            <span>{props.label}</span>
+            <i class="fas fa-check size-5 overflow-hidden relative bg-neos-gray-light border border-neos-subtle-light text-neos-subtle flex items-center justify-center group-hover:border-neos-blue-light group-focus-within:border-neos-blue-light peer-checked:text-white peer-checked:bg-neos-blue-light peer-checked:border-neos-blue-light peer-disabled:border-neos-orange peer-disabled:bg-neos-orange peer-disabled:cursor-not-allowed"></i>
+            <span class="pl-2 block peer-disabled:cursor-not-allowed">{props.label}</span>
         </label>
     `
 }
diff --git a/Resources/Private/Modules/Component/MailProperties.fusion b/Resources/Private/Modules/Component/MailProperties.fusion
@@ -99,16 +99,57 @@ prototype(Garagist.Mautic:Component.MailProperties) < prototype(Neos.Fusion:Comp
                     <div class="block my-2 opacity-60">{Translation.translate('properties.mauticPreviewText.ui.help.message', null, [], 'NodeTypes/Mixin/Email', 'Garagist.Mautic')}</div>
                     <div @if={props._isEdit} class="block my-2 opacity-60">{Translation.translate('email.need.refresh', null, [], 'Module', 'Garagist.Mautic')}</div>
                 </fieldset>
-                <fieldset @if={props._showSegments} class="!p-0 !mt-8">
+                <fieldset @if={props._showSegments} class="!p-0 !mt-8 flex flex-col items-start">
                     <legend class="!p-0 !leading-5 !text-sm">
                         {props._i18n.id('recipients').translate()}
                     </legend>
-                    <Neos.Fusion:Loop items={props.chooseSegment}>
+                    <Neos.Fusion:Loop items={props.chooseSegment} itemName="segment">
+                        <!-- We have a group -->
+                        <div
+                            @if={Carbon.Array.check(segment)}
+                            class="bg-neos-gray-darker -mx-4 p-4 my-2 self-stretch flex flex-col items-start"
+                        >
+                            <!-- Prefilled group -->
+                            <Neos.Fusion:Loop
+                                @if={Carbon.Array.check(Carbon.Array.intersect(props.prefilledSegments, segment))}
+                                items={segment}
+                                itemName="subsegment"
+                            >
+                                <Garagist.Mautic:Component.Checkbox
+                                    xModel="segments"
+                                    number={true}
+                                    value={subsegment}
+                                    label={props.allSegments[subsegment].name}
+                                    xDisabled={"const intersect=[" + Array.join(segment, ",") + "].filter(item=>segments.includes(item));return intersect.length<=1 && intersect[0]==" + subsegment}
+                                />
+                            </Neos.Fusion:Loop>
+                            <p @if={Carbon.Array.check(Carbon.Array.intersect(props.prefilledSegments, segment))} class="block mt-2 -mb-3 opacity-60 text-xs">
+                                {props._i18n.id('email.oneItemNeeded').translate()}
+                            </p>
+
+                            <!-- No Prefilled group -->
+                            <Neos.Fusion:Loop
+                                @if={!Carbon.Array.check(Carbon.Array.intersect(props.prefilledSegments, segment))}
+                                items={segment}
+                                itemName="subsegment"
+                            >
+                                <Garagist.Mautic:Component.Checkbox
+                                    xModel="segments"
+                                    number={true}
+                                    value={subsegment}
+                                    label={props.allSegments[subsegment].name}
+                                />
+                            </Neos.Fusion:Loop>
+                        </div>
+
+                        <!-- No Group -->
                         <Garagist.Mautic:Component.Checkbox
-                            class={props.lockPrefilledSegments && Array.indexOf(props.prefilledSegments, item) != -1 ? "pointer-events-none" : null}
+                            @if={!Type.isArray(segment)}
                             xModel="segments"
-                            value={item}
-                            label={props.allSegments[item].name}
+                            disabled={props.lockPrefilledSegments && Array.indexOf(props.prefilledSegments, segment) != -1}
+                            number={true}
+                            value={segment}
+                            label={props.allSegments[segment].name}
                         />
                     </Neos.Fusion:Loop>
                     <div x-show="!segments.length" x-transition class="bg-neos-red text-white p-4 mt-4 mb-2 w-full">

diff --git a/Resources/Private/Modules/Component/SendMail.fusion b/Resources/Private/Modules/Component/SendMail.fusion
@@ -76,6 +76,7 @@ prototype(Garagist.Mautic:Component.SendMail) < prototype(Neos.Fusion:Component)
                 <Garagist.Mautic:Component.Checkbox
                     @if={props.canSendLater}
                     xModel="sendLater"
+                    boolean={true}
                     label={props._i18n.id('email.send.later').translate()}
                     value={true}
                 />

diff --git a/Resources/Private/Translations/de/Module.xlf b/Resources/Private/Translations/de/Module.xlf
@@ -209,6 +209,10 @@
                 <source>The last task could not be executed! Please check the info log</source>
                 <target>Die letzte Aufgabe konnte nicht ausgeführt werden! Bitte prüfen Sie das Infoprotokoll</target>
             </trans-unit>
+            <trans-unit id="email.oneItemNeeded" xml:space="preserve">
+                <source>At least one item of this group need to be selected.</source>
+                <target>Mindestens ein Element aus dieser Gruppe muss ausgewählt werden.</target>
+            </trans-unit>
             <trans-unit id="email.create" xml:space="preserve">
                 <source>Create new email</source>
                 <target>Neue E-Mail erstellen</target>

diff --git a/Resources/Private/Translations/en/Module.xlf b/Resources/Private/Translations/en/Module.xlf
@@ -158,6 +158,9 @@
             <trans-unit id="task.failed" xml:space="preserve">
                 <source>The last task could not be executed! Please check the info log</source>
             </trans-unit>
+            <trans-unit id="email.oneItemNeeded" xml:space="preserve">
+                <source>At least one item of this group need to be selected.</source>
+            </trans-unit>
             <trans-unit id="email.create" xml:space="preserve">
                 <source>Create new email</source>
             </trans-unit>