#694 - improve edit event

alfio-event · Aug 7, 2019 · 054ff13 · 054ff13
1 parent edd3361
commit 054ff13
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 65 deletions.
diff --git a/src/main/webapp/resources/angular-templates/admin/partials/event/edit-event.html b/src/main/webapp/resources/angular-templates/admin/partials/event/edit-event.html
@@ -4,7 +4,7 @@
 <div class="container" data-ng-if="event">
     <div class="page-header">
         <h1>Create new Event</h1>
-        <span class="text-muted">Please fill in the required information and then save</span>
+        <small class="text-muted">Please fill in the required information and then save</small>
     </div>
     <form role="form" name="editEvent" data-ng-submit="save(editEvent, event)" data-error-sensitive="editEventHeader,editPrices" novalidate>
         <edit-event-header data-target-obj="event" data-organizations="organizations" data-full-edit-mode="true" data-show-existing-errors="showExistingErrors" data-all-languages="allLanguages" data-all-languages-mapping="allLanguagesMapping"></edit-event-header>
@@ -17,7 +17,7 @@ <h3>Seats and payment info</h3>
 
             <div class="page-header">
                 <h3>Categories</h3>
-                <span class="text-muted">Here you can define all the ticket categories for the event. Please note that at least one category is required in order to create the event.</span>
+                <small class="text-muted">Here you can define all the ticket categories for the event. Please note that at least one category is required in order to create the event.</small>
             </div>
 
             <div class="row wMarginBottom" ng-if="event.ticketCategories.length > 0">

diff --git a/...pp/resources/angular-templates/admin/partials/event/fragment/edit-event-header-modal.html b/...pp/resources/angular-templates/admin/partials/event/fragment/edit-event-header-modal.html
@@ -1,8 +1,5 @@
 <div class="modal-content">
     <form name="headerForm" role="form" data-ng-submit="update(headerForm, eventHeader)" novalidate class="force-show-errors" data-error-sensitive="editEventHeader">
-        <div class="modal-header">
-            <h2 class="modal-title">Logistic info and description</h2>
-        </div>
         <div class="modal-body">
             <edit-event-header data-show-dates-warning="true" data-show-existing-errors="true" data-event-obj="event" data-target-obj="eventHeader" data-organizations="organizations"  data-all-languages="allLanguages" data-all-languages-mapping="allLanguagesMapping"></edit-event-header>
         </div>

diff --git a/...n/webapp/resources/angular-templates/admin/partials/event/fragment/edit-event-header.html b/...n/webapp/resources/angular-templates/admin/partials/event/fragment/edit-event-header.html
@@ -19,64 +19,54 @@ <h3>Basic info</h3>
                 <textarea data-ng-model="obj.location" name="location" id="location" class="form-control" required data-ng-minlength="10" data-ng-change="updateLocation(obj.location)" data-ng-model-options="{ updateOn: 'blur'}" placeholder="Please enter the address of the Location. This will be used for displaying the map on the event page."></textarea>
                 <field-error data-form-obj="editEventHeader" data-field-obj="editEventHeader.location" data-min-char="10" data-show-existing-errors="showExistingErrors"></field-error>
             </div>
+            <div class="row">
+                <div class="col-xs-12 col-md-6">
+                    <div class="form-group" bs-form-error="editEventHeader.date">
+                        <label for="date">Event Date <i data-ng-if="showDatesWarning" class="fa fa-warning text-warning tooltip-handler" title="You should notify all the ticket owners about a date change"></i></label>
+                        <input type="text" data-date-range data-start-model="obj.begin" data-end-model="obj.end" data-ng-model="obj.dateString" name="date" id="date" class="form-control" required />
+                    </div>
+                </div>
+                <div class="col-xs-12 col-md-6">
+                    <div class="form-group" bs-form-error="editEventHeader.timeZone">
+                        <label for="timeZone">Event time zone</label>
+                        <select class="form-control" id="timeZone" name="timeZone" data-ng-model="obj.geolocation.timeZone" required ng-options="tz as tz for tz in timezones"></select>
+                    </div>
+                </div>
+            </div>
         </div>
         <div class="col-sm-4 col-md-4 map-container">
             <i class="fa fa-cog fa-spin fa-3x map-loading text-muted" data-ng-if="loadingMap"></i>
             <span class="text-danger" data-ng-if="mapError && !loadingMap">{{mapError}}</span>
-            <img data-ng-if="obj.geolocation && obj.geolocation.mapUrl && !loadingMap" data-ng-src="{{obj.geolocation.mapUrl}}" alt="{{obj.location}}" class="img-responsive map-image"/>
+            <img data-ng-if="obj.geolocation && obj.geolocation.mapUrl && !loadingMap" data-ng-src="{{obj.geolocation.mapUrl}}" alt="{{obj.location}}" class="img-responsive map-image img-center"/>
         </div>
     </div>
-    <div class="row">
-        <div class="col-xs-6">
-            <div class="form-group" bs-form-error="editEventHeader.date">
-                <label for="date">Event Date <i data-ng-if="showDatesWarning" class="fa fa-warning text-warning tooltip-handler" title="You should notify all the ticket owners about a date change"></i></label>
-                <input type="text" data-date-range data-start-model="obj.begin" data-end-model="obj.end" data-ng-model="obj.dateString" name="date" id="date" class="form-control" required />
-            </div>
-        </div>
-        <div class="col-xs-6">
-            <div class="form-group" bs-form-error="editEventHeader.timeZone">
-                <label for="timeZone">Event time zone</label>
-                <select class="form-control" id="timeZone" name="timeZone" data-ng-model="obj.geolocation.timeZone" required ng-options="tz as tz for tz in timezones"></select>
+
+    <div class="row wMarginTop30px">
+        <div class="col-xs-12 col-sm-6" data-ng-repeat="langValue in selectedLanguages.langs">
+            <div class="form-group" bs-form-error="editEventHeader['description-'+allLanguagesMapping[langValue].locale]">
+                <label for="description">Event Description: {{allLanguagesMapping[langValue].displayLanguage}} <display-commonmark-preview text="obj.description[allLanguagesMapping[langValue].locale]"></display-commonmark-preview></label><a class="pull-right text-muted" ng-if="selectedLanguages.langs.length > 1" title="remove {{allLanguagesMapping[langValue].displayLanguage}}" ng-click="removeDescription(allLanguagesMapping[langValue])"><i class="fa fa-trash"></i></a>
+                <textarea data-ng-model="obj.description[allLanguagesMapping[langValue].locale]" name="description-{{allLanguagesMapping[langValue].locale}}" id="description" required class="form-control" data-ng-minlength="10" data-ng-maxlength="2048"></textarea>
+                <common-mark-help></common-mark-help>
+                <field-error data-form-obj="editEventHeader" data-field-obj="editEventHeader['description-'+allLanguagesMapping[langValue].locale]" data-min-char="10" data-show-existing-errors="showExistingErrors"></field-error>
             </div>
         </div>
     </div>
-
-    <div data-ng-if="obj.type === 'INTERNAL'">
-
-        <div class="page-header">
-            <h3>Descriptions</h3>
-            <small data-ng-if="availableLanguages.length > 0 && allLanguages.length > 1">Add the event description in different languages. Adding a description for a given language enables the support for that language.</small>
-        </div>
-
-        <div class="row wMarginBottom30px">
-            <div class="col-xs-2">
-                <div class="btn-group" uib-dropdown is-open="isDropDownOpen" data-ng-if="availableLanguages.length > 0 && allLanguages.length > 1">
-                    <button id="single-button" type="button" class="btn btn-success" uib-dropdown-toggle>
-                        Add description <span class="caret"></span>
-                    </button>
-                    <ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="single-button">
-                        <li role="menuitem" data-ng-repeat="(lang, language) in availableLanguages"><a ng-click="addDescription(language)">{{language.displayLanguage}}</a></li>
-                    </ul>
-                </div>
-
+    <div class="row">
+        <div class="col-xs-2">
+            <div class="btn-group" uib-dropdown is-open="isDropDownOpen" data-ng-if="availableLanguages.length > 0 && allLanguages.length > 1">
+                <button id="single-button" type="button" class="btn btn-success" uib-dropdown-toggle>
+                    Add translation <span class="caret"></span>
+                </button>
+                <ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="single-button">
+                    <li role="menuitem" data-ng-repeat="(lang, language) in availableLanguages"><a ng-click="addDescription(language)">{{language.displayLanguage}}</a></li>
+                </ul>
             </div>
-        </div>
 
-
-        <div class="row">
-            <div class="col-xs-12 col-sm-6" data-ng-repeat="langValue in selectedLanguages.langs">
-                <div class="form-group" bs-form-error="editEventHeader['description-'+allLanguagesMapping[langValue].locale]">
-                    <label for="description">Event Description: {{allLanguagesMapping[langValue].displayLanguage}} <display-commonmark-preview text="obj.description[allLanguagesMapping[langValue].locale]"></display-commonmark-preview></p></label><a class="pull-right text-muted" ng-if="selectedLanguages.langs.length > 1" title="remove {{allLanguagesMapping[langValue].displayLanguage}}" ng-click="removeDescription(allLanguagesMapping[langValue])"><i class="fa fa-trash"></i></a>
-                    <textarea data-ng-model="obj.description[allLanguagesMapping[langValue].locale]" name="description-{{allLanguagesMapping[langValue].locale}}" id="description" required class="form-control" data-ng-minlength="10" data-ng-maxlength="2048"></textarea>
-                    <common-mark-help></common-mark-help>
-                    <field-error data-form-obj="editEventHeader" data-field-obj="editEventHeader['description-'+allLanguagesMapping[langValue].locale]" data-min-char="10" data-show-existing-errors="showExistingErrors"></field-error>
-                </div>
-            </div>
         </div>
     </div>
     <div class="page-header">
         <h3>URLs Configuration</h3>
-        <small>Define how users can access your event and where the relevant links should point.</small>
+        <small class="text-muted">Define how users can access your event and where the relevant links should point.</small>
     </div>
     <div class="row">
         <div class="col-xs-12 col-md-6">
@@ -92,7 +82,7 @@ <h3>URLs Configuration</h3>
                         <span>/</span>
                     </span>
                 </div>
-                <div class="form-control-static" data-ng-if="isUpdate">/event/{{obj.shortName}}/</div>
+                <div class="form-control-static" data-ng-if="isUpdate">{{baseUrl}}/event/{{obj.shortName}}/</div>
                 <field-error data-form-obj="editEventHeader" data-required-pattern="'A-Za-z0-9_- (no spaces; the last character must be a letter or a number)'" data-field-obj="editEventHeader.shortName"  data-show-existing-errors="showExistingErrors"></field-error>
             </div>
         </div>
@@ -106,13 +96,7 @@ <h3>URLs Configuration</h3>
     </div>
     <div class="row">
         <div class="col-xs-12 col-md-6">
-            <div data-ng-if="obj.type !== 'INTERNAL'" class="form-group" bs-form-error="editEventHeader.externalUrl">
-                <label for="externalUrl">External ticket reservation URL</label>
-                <input type="url" url-text-field="" data-ng-model="obj.externalUrl" name="externalUrl" id="externalUrl" required class="form-control" />
-                <field-error data-form-obj="editEventHeader" data-field-obj="editEventHeader.externalUrl" data-show-existing-errors="showExistingErrors"></field-error>
-            </div>
-
-            <div data-ng-if="obj.type === 'INTERNAL'" class="form-group" bs-form-error="editEventHeader.termsAndConditionsUrl">
+            <div class="form-group" bs-form-error="editEventHeader.termsAndConditionsUrl">
                 <label for="termsAndConditionsUrl">Terms and Conditions URL</label>
                 <input type="url" url-text-field="" data-ng-model="obj.termsAndConditionsUrl" name="termsAndConditionsUrl" id="termsAndConditionsUrl" required class="form-control" />
                 <field-error data-form-obj="editEventHeader" data-field-obj="editEventHeader.termsAndConditionsUrl" data-show-existing-errors="showExistingErrors"></field-error>
@@ -122,14 +106,14 @@ <h3>URLs Configuration</h3>
             <div class="form-group" bs-form-error="editEventHeader.privacyPolicyUrl">
                 <label for="privacyPolicyUrl">Privacy policy URL</label>
                 <input type="url" url-text-field="" data-ng-model="obj.privacyPolicyUrl" name="privacyPolicyUrl" id="privacyPolicyUrl" class="form-control" aria-describedby="privacyHelp"/>
-                <span id="privacyHelp" ng-if="isObjectEmpty(editEventHeader.privacyPolicyUrl.$error)" class="help-block">Privacy policy link is optional. However, it is good practice to have one.</span>
+                <small id="privacyHelp" ng-if="isObjectEmpty(editEventHeader.privacyPolicyUrl.$error)" class="help-block">Privacy policy link is optional. However, it is good practice to have one.</small>
                 <field-error data-form-obj="editEventHeader" data-field-obj="editEventHeader.privacyPolicyUrl" data-show-existing-errors="showExistingErrors"></field-error>
             </div>
         </div>
     </div>
     <div class="page-header">
         <h3>Logo</h3>
-        <small>Upload the event logo in PNG or JPG format.</small>
+        <small class="text-muted">Upload the event logo in PNG or JPG format.</small>
     </div>
     <div class="row">
         <div class="col-xs-6">

diff --git a/src/main/webapp/resources/angular-templates/admin/partials/event/fragment/edit-prices.html b/src/main/webapp/resources/angular-templates/admin/partials/event/fragment/edit-prices.html
@@ -1,14 +1,14 @@
 <div data-ng-form="editPrices">
     <div class="form-group">
-        <label>Ticket price model</label>
+        <label class="control-label">Ticket price model</label>
         <div class="form-group">
-            <div class="radio-inline">
+            <div class="radio">
                 <label>
                     <input type="radio" name="freeOfCharge" data-ng-model="obj.freeOfCharge" data-ng-value="false"> Entry fee requested
                 </label>
             </div>
-            <div class="radio-inline">
-                <label >
+            <div class="radio">
+                <label>
                     <input type="radio" name="freeOfCharge" data-ng-model="obj.freeOfCharge" data-ng-value="true"> Free of charge
                 </label>
             </div>
@@ -38,19 +38,19 @@
         </div>
         <div class="col-sm-2" data-ng-if="!obj.freeOfCharge">
             <div class="form-group" bs-form-error="editEvent.vatPercentage">
-                <label for="vatPercentage">VAT (%)</label>
+                <label for="vatPercentage">Taxes (%)</label>
                 <input type="number" min="0" data-ng-model="obj.vatPercentage" name="vatPercentage" id="vatPercentage" class="form-control" required />
                 <field-error data-form-obj="editEvent" data-field-obj="editEvent.vatPercentage"></field-error>
             </div>
         </div>
         <div class="col-sm-4" data-ng-if="!obj.freeOfCharge">
             <div class="form-group">
-                <label for="vatIncluded">VAT included</label>
+                <label for="vatIncluded">Price includes taxes</label>
                 <div class="input-group">
                             <span class="input-group-addon">
                                 <input type="checkbox" data-ng-model="obj.vatIncluded" name="vatIncluded" id="vatIncluded">
                             </span>
-                    <span class="form-control text-muted">Price VAT included: {{calculateTotalPrice(obj) | money : (obj.currency || "")}}</span>
+                    <span class="form-control text-muted">Price after taxes: {{calculateTotalPrice(obj) | money : (obj.currency || "")}}</span>
                 </div>
             </div>
         </div>