related links

assets/controllers/form-related-social_controller.js → assets/controllers/form-related-links_controller.js

@@ -5,28 +5,23 @@ export default class extends Controller {
 
     static values = {
         index: Number,
-        name: String,
         link: String,
     };
 
     connect() {
         const container = this.element;
         container
-            .querySelectorAll('.related-link-group')
+            .querySelectorAll('.related-link-item')
             .forEach((item) => {
                 this.#addButtonDeleteLink(item);
             });
     }
 
     addRelatedElement() {
-        const item = document.createElement('span');
-        item.className = 'flex related-link-group';
+        console.log('addRelatedElement method');
 
-        const nodeName = this.#htmlToNode(this.nameValue.replace(
-            /__name__/g,
-            this.indexValue,
-        ));
-        item.append(nodeName);
+        const item = document.createElement('span');
+        item.className = 'flex related-link-item';
 
         const nodeLink = this.#htmlToNode(this.linkValue.replace(
             /__name__/g,
@@ -41,14 +36,11 @@ export default class extends Controller {
     }
 
     #addButtonDeleteLink(item) {
-        const div = document.createElement('div');
-
         const removeFormButton = document.createElement('button');
-        removeFormButton.innerText = 'Delete'; // TODO - Translation
-        removeFormButton.className = 'btn btn__secondry';
+        removeFormButton.innerText = '⌫';
+        removeFormButton.className = 'btn';
 
-        div.append(removeFormButton);
-        item.append(div);
+        item.append(removeFormButton);
 
         removeFormButton.addEventListener('click', (e) => {
             e.preventDefault();

assets/styles/layout/_forms.scss

@@ -531,3 +531,16 @@ div.input-box {
     margin: 0;
     padding: 0;
 }
+
+.related-link-item {
+    align-items: center;
+}
+
+.related-link-item button {
+    padding: 0;
+    background: none;
+    font-size: 1.5rem;
+    border: 0;
+    color: var(--kbin-input-text-color);
+
+}

assets/styles/layout/_layout.scss

@@ -365,6 +365,10 @@ figure {
   flex-wrap: wrap;
 }
 
+.flex-grow-1 {
+  flex-grow: 1;
+}
+
 pre, code {
   white-space: pre-wrap;
   word-wrap: break-word;

src/Controller/User/Profile/UserEditController.php

@@ -77,6 +77,7 @@ public function profile(Request $request): Response
             );
         } catch (Error | Exception $e) {
             $para = '';
+            throw $e;
         }
     }
 

src/Form/UserBasicType.php

@@ -10,11 +10,11 @@
 use App\Form\EventListener\DisableFieldsOnUserEdit;
 use App\Form\EventListener\ImageListener;
 use Symfony\Component\Form\AbstractType;
-use Symfony\Component\Form\CallbackTransformer;
 use Symfony\Component\Form\Extension\Core\Type\CollectionType;
 use Symfony\Component\Form\Extension\Core\Type\SubmitType;
 use Symfony\Component\Form\Extension\Core\Type\TextareaType;
 use Symfony\Component\Form\Extension\Core\Type\TextType;
+use Symfony\Component\Form\Extension\Core\Type\UrlType;
 use Symfony\Component\Form\FormBuilderInterface;
 use Symfony\Component\OptionsResolver\OptionsResolver;
 
@@ -34,26 +34,14 @@ public function buildForm(FormBuilderInterface $builder, array $options): void
             ->add('username', TextType::class, ['required' => false])
             ->add('about', TextareaType::class, ['required' => false])
             ->add('relatedLinks', CollectionType::class , [
-                'entry_type' => UserRelatedLinkType::class,
+                'entry_type' => UrlType::class,
                 'entry_options' => ['label' => false],
                 'label' => false,
                 'allow_add' => true,
-                'allow_delete' => true,
-                // 'by_reference' => false,
+                'allow_delete' => true
             ])
             ->add('submit', SubmitType::class)
         ;
-
-        // $builder->addModelTransformer(new CallbackTransformer(
-        //     function ($associativeArrayData) {
-        //         $para = '';
-        //         return $associativeArrayData;
-        //     },
-        //     function ($dtoData) {
-        //         $para = '';
-        //         return $dtoData;
-        //     }
-        // ));
 
         $builder->addEventSubscriber($this->disableUsernameFieldOnUserEdit);
         $builder->addEventSubscriber($this->addAvatarFieldOnUserEdit);

templates/user/settings/profile.html.twig

@@ -43,48 +43,39 @@
             }}) }}
             {{ form_row(form.avatar, {label: 'avatar'}) }}
             {{ form_row(form.cover, {label: 'cover'}) }}
-
-
-            <fieldset class='related-link-fieldset'>
-                <legend>Related links</legend>
-                <span 
-                    {{ stimulus_controller('form-related-social') }}
-                    data-form-related-social-index-value="{{ form.relatedLinks|length }}"
-                    data-form-related-social-name-value="{{ 
-                        form_row(form.relatedLinks.vars.prototype.relatedName, {
-                                    label: false,
-                                    row_attr: { class: 'flex-grow-1' }
-                        })|e('html_attr') 
-                    }}"
-                    data-form-related-social-link-value="{{ 
-                        form_row(form.relatedLinks.vars.prototype.relatedLink, {
-                                    label: false,
-                                    row_attr: { class: 'flex-grow-1' }
-                        })|e('html_attr') 
-                    }}"
+
+            <fieldset class='related-link-fieldset'
+                {{ stimulus_controller('form-related-links') }}
+                data-form-related-links-index-value="{{ form.relatedLinks|length }}"
+                data-form-related-links-link-value="{{ 
+                    form_widget(form.relatedLinks.vars.prototype, {
+                                label: false,
+                                row_attr: { class: 'flex-grow-1' }
+                    })|e('html_attr') 
+                }}"
+
+            >
+                <legend>{{ 'related_links'|trans }}</legend>
+
+                <div 
+                    class='related-links-group'
+                    data-form-related-links-target="relatedContainer"
                 >
-                    <span {{ stimulus_target('form-related-social', 'relatedContainer') }}
-                        class='relatedlinks'>
-                        {% for item_form in form.relatedLinks %}
-                            <span class='flex related-link-group'>
-                                {{ form_row(item_form.relatedName, {
-                                    label: false,
-                                    row_attr: { class: 'flex-grow-1' }
-                                }) }}
+                    {% for item_form in form.relatedLinks %}
+                        <span class='flex related-link-item'>
+                            {{ form_widget(item_form, {
+                                label: false,
+                                row_attr: { class: 'flex-grow-1' }
+                            }) }}
+                        </span>
+                    {% endfor %}
+                </div>
 
-                                {{ form_row(item_form.relatedLink, {
-                                    label: false,
-                                    row_attr: { class: 'flex-grow-1' }
-                                }) }}
-                            </span>
-                        {% endfor %}
-                    </span>
-                    <button 
-                        type="button"
-                        class="btn btn__primary"
-                        {{ stimulus_action('form-related-social', 'addRelatedElement') }}
-                    >Add link</button>
-                </span>
+                <button 
+                    type="button"
+                    class="btn btn__primary"
+                    {{ stimulus_action('form-related-links', 'addRelatedElement') }}
+                >Add link</button>
             </fieldset>
 
             <div class="row actions">

translations/messages.en.yaml

@@ -890,3 +890,4 @@ admin_users_suspended: Suspended
 admin_users_banned: Banned
 user_verify: Activate account
 max_image_size: Maximum file size
+related_links: Related links

translations/messages.es.yaml

@@ -532,3 +532,4 @@ marked_for_deletion_at: Marcado para eliminar el %date%
 sort_by: Ordenar por
 filter_by_subscription: Filtrar por suscripción
 filter_by_federation: Filtrar por estado de la federación
+related_links: Enlaces relacionados