feat: implement dropdown for social media in other-details step

fossasia · Sep 1, 2020 · b373e4e · b373e4e
1 parent fcce5db
commit b373e4e
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 43 deletions.
diff --git a/app/components/forms/wizard/other-details-step.js b/app/components/forms/wizard/other-details-step.js
@@ -1,7 +1,7 @@
 import Component from '@ember/component';
 import { computed } from '@ember/object';
 import moment from 'moment';
-import { merge, orderBy, find } from 'lodash-es';
+import { orderBy, find } from 'lodash-es';
 import { licenses } from 'open-event-frontend/utils/dictionary/licenses';
 import { timezones } from 'open-event-frontend/utils/dictionary/date-time';
 import FormMixin from 'open-event-frontend/mixins/form';
@@ -23,39 +23,14 @@ export default Component.extend(FormMixin, EventWizardMixin, {
     return orderBy(licenses, 'name');
   }),
 
-
   socialLinks: computed('data.event.socialLinks.@each.isDeleted', function() {
     return this.data.event.socialLinks.filterBy('isDeleted', false);
   }),
 
   isUserUnverified: computed('authManager.currentUser.isVerified', function() {
     return !this.authManager.currentUser.isVerified;
   }),
-  /**
-   * returns the validation rules for the social links.
-   */
-  socialLinksValidationRules: computed('socialLinks', function() {
-    let validationRules = {};
-    for (let i = 0; i < this.socialLinks.length; i++) {
-      validationRules = merge(validationRules, {
-        [this.socialLinks.get(i).identifier]: {
-          identifier : this.socialLinks.get(i).identifier,
-          optional   : true,
-          rules      : [
-            {
-              type   : 'regExp',
-              value  : protocolLessValidUrlPattern,
-              prompt : this.l10n.t('Please enter a valid url')
-            }
-          ]
-        }
-      });
-    }
-
-    return validationRules;
-  }),
-
-
+
   showDraftButton: computed('data.event.state', function() {
     return this.data.event.state !== 'published';
   }),
@@ -126,8 +101,6 @@ export default Component.extend(FormMixin, EventWizardMixin, {
         }
       }
     };
-    // Merging the predetermined rules with the rules for social links.
-    validationRules.fields = merge(validationRules.fields, this.socialLinksValidationRules);
     return validationRules;
   },
 

diff --git a/app/components/widgets/forms/link-input.js b/app/components/widgets/forms/link-input.js
@@ -45,6 +45,26 @@ export default class LinkInput extends Component {
     });
   }
 
+  @observes('linkName')
+  linkNameObserver() {
+    const link = this.linkName;
+    const socialPlatforms = ['twitter', 'facebook', 'instagram', 'linkedin', 'youtube'];
+
+    if (socialPlatforms.includes(link)) {
+      this.set('segmentedLink', {
+        protocol : `https://${link}.com/`,
+        address  : ''
+      });
+    }
+
+    if (link === 'website') {
+      this.set('segmentedLink', {
+        protocol : 'https://',
+        address  : ''
+      });
+    }
+  }
+
   didInsertElement() {
     super.didInsertElement(...arguments);
     if (this.segmentedLink) {

diff --git a/app/templates/components/widgets/forms/link-input.hbs b/app/templates/components/widgets/forms/link-input.hbs
@@ -1,18 +1,36 @@
 {{#if this.hasLinkName}}
   <div class="three wide field">
-    <Input @type="text" @value={{this.linkName}} @disabled={{this.fixedName}} />
+    <div class="ui labeled input">
+      {{#if this.fixedName}}
+        <Input @type="text" @value={{this.linkName}} @disabled={{this.fixedName}} />
+      {{else}}
+        <UiDropdown @class='selection' @selected={{this.linkName}} @onChange={{action (mut this.linkName)}}>
+          <div class="default text">Select</div>
+          <i class="dropdown icon"></i>
+          <div class="menu">
+            <div class="item" data-value='website' >Website</div>
+            <div class="item" data-value="twitter">Twitter</div>
+            <div class="item" data-value="facebook">Facebook</div>
+            <div class="item" data-value="linkedin">Linkedin</div>
+            <div class="item" data-value="instagram">Instagram</div>
+            <div class="item" data-value="youtube">Youtube</div>
+          </div>
+        </UiDropdown>
+      {{/if}} 
+    </div>
   </div>
   <div class="six wide field">
-    <div class="ui labeled {{if this.isChild 'action'}} input">
-      <UiDropdown @class="label" @selected={{this.protocol}} @onChange={{action (mut this.protocol)}}>
-        <div class="text">https://</div>
-        <i class="dropdown icon"></i>
-        <div class="menu">
-          <div class="item" data-value="http">http://</div>
-          <div class="item" data-value="https">https://</div>
+    <div class="ui labeled {{if this.isChild 'action'}} input">      
+        <div class="ui labeled input">
+          <div class="ui label">
+            {{#if this.isChild}}
+              {{this.protocol}}
+            {{else}}
+              https://
+            {{/if}}
+          </div>
+        <Input @type="text" @value={{this.address}} @name={{name}} @id={{this.inputId}} />
         </div>
-      </UiDropdown>
-      <Input @type="text" @value={{this.address}} @name={{name}} @id={{this.inputId}} />
       {{#if this.isChild}}
         <div class="ui icon buttons">
           {{#if this.canRemoveItem}}

diff --git a/app/utils/computed-helpers.js b/app/utils/computed-helpers.js
@@ -16,17 +16,19 @@ export const computedSegmentedLink = function(property) {
       const splitted = this.get(property) ? this.get(property).split('://') : [];
       if (!splitted || splitted.length === 0 || (splitted.length === 1 && splitted[0].includes('http'))) {
         return {
-          protocol : 'https',
+          protocol : 'https://',
           address  : ''
         };
       }
+      const socialUrl = splitted[1].split('/');
       return {
-        protocol : splitted[0],
-        address  : splitted[1]
+        protocol : `${splitted[0]}://${socialUrl[0]}/`,
+        address  : socialUrl[1]
       };
     },
     set(key, value) {
-      const finalLink = values(value).join('://');
+      const finalLink = values(value).join('');
+
       if (finalLink && isValidUrl(finalLink.trim())) {
         this.set(property, finalLink.trim());
       } else {