Skip to content
This repository was archived by the owner on Mar 4, 2025. It is now read-only.

Commit 99bfdb0

Browse files
nlitwinnlitwin
committed
Merge pull request #650 from appirio-tech/SUP-2938-delete-sections
Sup 2938 delete sections
2 parents 2d32efe + fbaa22f commit 99bfdb0

File tree

10 files changed

+268
-129
lines changed

10 files changed

+268
-129
lines changed

‎app/directives/tc-form-fonts/tc-form-fonts.directive.js

Lines changed: 53 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@
1515
scope.submissionForm = formController;
1616
},
1717
controller: ['$scope', function($scope) {
18+
var fontsId = 0;
19+
1820
// Must provide React Select component a list with ID, since currently
1921
// the onChange callback does not indicate which dropdown called the callback.
2022
// There are pull requests pending for react-select which will clean this code up
@@ -29,48 +31,75 @@
2931
{ label: 'Typography.com', value: 'TYPOGRAPHY_DOT_COM', id: 0 }
3032
];
3133

34+
var emptyFont = {
35+
source: '',
36+
name: '',
37+
sourceUrl: '',
38+
isFontUrlRequired: false,
39+
isFontUrlDisabled: true,
40+
isFontNameRequired: false,
41+
isFontNameDisabled: true,
42+
isFontSourceRequired: false
43+
};
44+
3245
$scope.urlRegEx = new RegExp(/^(http(s?):\/\/)?(www\.)?[a-zA-Z0-9\.\-\_]+(\.[a-zA-Z]{2,3})+(\/[a-zA-Z0-9\_\-\s\.\/\?\%\#\&\=]*)?$/);
3346

3447
$scope.selectFont = function(newFont) {
35-
// Find the right font section and change that source value to the value that the user selected
36-
var id = newFont.id;
37-
$scope.formFonts[id].source = newFont.value;
48+
49+
// Find the right font section,
50+
// and change that source value to the value that the user selected
51+
var targetedFont = $scope.formFonts[newFont.id];
52+
53+
targetedFont.source = newFont.value;
3854

3955
if (newFont.value === 'STUDIO_STANDARD_FONTS_LIST') {
40-
$scope.formFonts[id].isFontNameRequired = true;
41-
$scope.formFonts[id].isFontNameDisabled = false;
42-
$scope.formFonts[id].isFontUrlRequired = false;
43-
$scope.formFonts[id].isFontUrlDisabled = false;
56+
targetedFont.isFontNameRequired = true;
57+
targetedFont.isFontNameDisabled = false;
58+
targetedFont.isFontUrlRequired = false;
59+
targetedFont.isFontUrlDisabled = false;
4460

4561
} else if (newFont.value) {
46-
$scope.formFonts[id].isFontNameRequired = true;
47-
$scope.formFonts[id].isFontNameDisabled = false;
48-
$scope.formFonts[id].isFontUrlRequired = true;
49-
$scope.formFonts[id].isFontUrlDisabled = false;
50-
62+
targetedFont.isFontNameRequired = true;
63+
targetedFont.isFontNameDisabled = false;
64+
targetedFont.isFontUrlRequired = true;
65+
targetedFont.isFontUrlDisabled = false;
5166
}
5267
};
5368

5469
$scope.createAdditionalFontFieldset = function() {
55-
var newId = $scope.formFonts.length;
70+
var newId = ++fontsId;
5671

5772
// Create copy of list with new, incremented ID
5873
var newFontList = $scope['fontList' + newId] = angular.copy($scope['fontList' + (newId - 1)]);
59-
6074
newFontList.forEach(function(font) {
6175
font.id++;
6276
});
6377

64-
$scope.formFonts.push({
65-
id: newId,
66-
source: '',
67-
name: '',
68-
sourceUrl: '',
69-
isFontUrlRequired: false,
70-
isFontUrlDisabled: true,
71-
isFontNameRequired: false,
72-
isFontNameDisabled: true,
73-
isFontSourceRequired: false
78+
// Add empty font with new ID to scope
79+
$scope.formFonts[newId] = _.assign({ id: newId }, angular.copy(emptyFont));
80+
}
81+
82+
$scope.deleteFontFieldset = function(index) {
83+
84+
// If only one font fieldset is there, just reset the values
85+
// so that ng-repeat doesn't refresh and there is no UI flickering
86+
if (Object.keys($scope.formFonts).length === 1) {
87+
$scope.submissionForm['fontName' + index].$setPristine();
88+
$scope.submissionForm['fontUrl' + index].$setPristine();
89+
$scope.formFonts[index] = angular.copy(emptyFont);
90+
91+
} else {
92+
delete $scope.formFonts[index];
93+
}
94+
}
95+
96+
$scope.isButtonDisabled = function() {
97+
return _.some($scope.formFonts, function(font) {
98+
if (font.source === 'STUDIO_STANDARD_FONTS_LIST') {
99+
return !font.source || !font.name;
100+
} else {
101+
return !font.source || !font.name || !font.sourceUrl;
102+
}
74103
});
75104
}
76105
}]

‎app/directives/tc-form-fonts/tc-form-fonts.jade

Lines changed: 18 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,49 @@
1-
.fieldset(ng-repeat="font in formFonts track by font.id")
1+
.fieldset(ng-repeat="(fontId, font) in formFonts")
2+
button.clean.remove-section(type="button", ng-click="deleteFontFieldset(fontId)")
3+
24
label.tc-label Font Source
35

46
dropdown(
5-
name="'font-source{{$index}}'",
6-
options="fontList{{$index}}",
7+
name="'font-source{{fontId}}'",
8+
options="fontList{{fontId}}",
79
placeholder="'Select a provider from the list'",
810
searchable="false",
911
clearable="false",
1012
on-change="selectFont",
11-
value="formFonts[{{$index}}].source"
13+
value="formFonts[{{fontId}}].source"
1214
)
1315

1416
tc-input.fieldset__input(
1517
label-text="Font Name",
1618
placeholder="Select font source to edit field"
1719
input-value="font.name",
18-
input-name="fontName{{$index}}",
19-
input-required="formFonts[$index].isFontNameRequired",
20-
input-disabled="formFonts[$index].isFontNameDisabled"
20+
input-name="fontName{{fontId}}",
21+
input-required="formFonts[fontId].isFontNameRequired",
22+
input-disabled="formFonts[fontId].isFontNameDisabled"
2123
)
2224

2325
.tc-error-messages(
24-
ng-show="submissionForm['fontName' + $index].$dirty && submissionForm['fontName' + $index].$invalid"
25-
ng-messages="submissionForm['fontName' + $index].$error"
26+
ng-show="submissionForm['fontName' + fontId].$dirty && submissionForm['fontName' + fontId].$invalid"
27+
ng-messages="submissionForm['fontName' + fontId].$error"
2628
)
2729
p(ng-message="required") This field is required.
2830

2931
tc-input.fieldset__input(
32+
ng-hide="formFonts[fontId].source === 'STUDIO_STANDARD_FONTS_LIST'",
3033
label-text="Font URL",
3134
placeholder="Select font source to edit field",
3235
input-value="font.sourceUrl",
33-
input-name="fontUrl{{$index}}",
34-
input-required="formFonts[$index].isFontUrlRequired",
35-
input-disabled="formFonts[$index].isFontUrlDisabled",
36+
input-name="fontUrl{{fontId}}",
37+
input-required="formFonts[fontId].isFontUrlRequired",
38+
input-disabled="formFonts[fontId].isFontUrlDisabled",
3639
input-pattern="urlRegEx"
3740
)
3841

3942
.tc-error-messages(
40-
ng-show="submissionForm['fontUrl' + $index].$dirty && submissionForm['fontUrl' + $index].$invalid"
41-
ng-messages="submissionForm['fontUrl' + $index].$error"
43+
ng-show="submissionForm['fontUrl' + fontId].$dirty && submissionForm['fontUrl' + fontId].$invalid"
44+
ng-messages="submissionForm['fontUrl' + fontId].$error"
4245
)
4346
p(ng-message="pattern") Please enter a valid url.
4447
p(ng-message="required") This field is required.
4548

46-
button.fieldset__button.tc-btn.tc-btn-s(type="button", ng-click="createAdditionalFontFieldset()") + Add Font
49+
button.fieldset__button.tc-btn.tc-btn-s(type="button", ng-click="createAdditionalFontFieldset()", ng-disabled="isButtonDisabled()") + Add Font

‎app/directives/tc-form-fonts/tc-form-fonts.spec.js

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
/* jshint -W117, -W030 */
2+
describe('Topcoder Form Fonts Directive', function() {
3+
var scope;
4+
5+
// USE AS TEMPLATE FOR DIRECTIVES
6+
7+
beforeEach(function() {
8+
bard.appModule('tcUIComponents');
9+
bard.inject(this, '$compile', '$rootScope');
10+
});
11+
12+
bard.verifyNoOutstandingHttpRequests();
13+
14+
xdescribe('', function() {
15+
beforeEach(function() {});
16+
17+
it('', function() {});
18+
});
19+
});

‎app/directives/tc-form-stockart/tc-form-stockart.directive.js

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
(function() {
2+
'use strict';
3+
4+
angular.module('tcUIComponents').directive('tcFormStockart', tcFormStockart);
5+
6+
function tcFormStockart() {
7+
return {
8+
restrict: 'E',
9+
require: '^form',
10+
templateUrl: 'directives/tc-form-stockart/tc-form-stockart.html',
11+
scope: {
12+
formStockarts: '='
13+
},
14+
link: function(scope, element, attrs, formController) {
15+
scope.submissionForm = formController;
16+
},
17+
controller: ['$scope', function($scope) {
18+
var stockartId = 0;
19+
var emptyStockart = {
20+
description: '',
21+
sourceUrl: '',
22+
fileNumber: ''
23+
};
24+
25+
$scope.urlRegEx = new RegExp(/^(http(s?):\/\/)?(www\.)?[a-zA-Z0-9\.\-\_]+(\.[a-zA-Z]{2,3})+(\/[a-zA-Z0-9\_\-\s\.\/\?\%\#\&\=]*)?$/);
26+
27+
$scope.createAdditionalStockartFieldset = function() {
28+
var newId = ++stockartId;
29+
30+
$scope.formStockarts[newId] = _.assign({ id: newId }, angular.copy(emptyStockart));
31+
}
32+
33+
$scope.deleteStockartFieldset = function(index) {
34+
35+
// If only one stockart fieldset is there, just reset the values
36+
// so that ng-repeat doesn't refresh and there is no UI flickering
37+
if (Object.keys($scope.formStockarts).length === 1) {
38+
$scope.submissionForm['photoDescription' + index].$setPristine();
39+
$scope.submissionForm['photoURL' + index].$setPristine();
40+
$scope.submissionForm['fileNumber' + index].$setPristine();
41+
$scope.formStockarts[index] = angular.copy(emptyStockart);
42+
43+
} else {
44+
delete $scope.formStockarts[index];
45+
}
46+
}
47+
48+
$scope.isButtonDisabled = function() {
49+
return _.some($scope.formStockarts, function(stockart) {
50+
return !stockart.description || !stockart.sourceUrl || !stockart.fileNumber;
51+
});
52+
}
53+
}]
54+
}
55+
}
56+
})();

‎app/directives/tc-form-stockart/tc-form-stockart.jade

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
.fieldset(ng-repeat="(stockartId, stockart) in formStockarts")
2+
button.clean.remove-section(type="button", ng-click="deleteStockartFieldset(stockartId)")
3+
4+
tc-input.fieldset__input(
5+
label-text="Photo Description",
6+
placeholder="A picture of a girl",
7+
input-value="stockart.description",
8+
input-name="photoDescription{{stockartId}}"
9+
)
10+
11+
tc-input.fieldset__input(
12+
label-text="Photo URL",
13+
placeholder="www.istockphoto.com",
14+
input-value="stockart.sourceUrl",
15+
input-name="photoURL{{stockartId}}",
16+
input-pattern="urlRegEx"
17+
)
18+
19+
.tc-error-messages(ng-show="submissionForm['photoURL' + stockartId].$dirty && submissionForm['photoURL' + stockartId].$invalid")
20+
p(ng-show="submissionForm['photoURL' + stockartId].$error.pattern") Please enter a valid url.
21+
22+
tc-input.fieldset__input(
23+
label-text="File Number",
24+
placeholder="u2434312",
25+
input-value="stockart.fileNumber",
26+
input-name="fileNumber{{stockartId}}"
27+
)
28+
29+
button.fieldset__button.tc-btn.tc-btn-s(type="button", ng-click="createAdditionalStockartFieldset()", ng-disabled="isButtonDisabled()") + Add Stock Photo

‎app/directives/tc-form-stockart/tc-form-stockart.spec.js

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
/* jshint -W117, -W030 */
2+
describe('Topcoder Form Stockart Directive', function() {
3+
var scope;
4+
5+
// USE AS TEMPLATE FOR DIRECTIVES
6+
7+
beforeEach(function() {
8+
bard.appModule('tcUIComponents');
9+
bard.inject(this, '$compile', '$rootScope');
10+
});
11+
12+
bard.verifyNoOutstandingHttpRequests();
13+
14+
xdescribe('', function() {
15+
beforeEach(function() {});
16+
17+
it('', function() {});
18+
});
19+
});

‎app/index.jade

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -231,6 +231,7 @@ html
231231
script(src="directives/tc-endless-paginator/tc-endless-paginator.directive.js")
232232
script(src="directives/tc-file-input/tc-file-input.directive.js")
233233
script(src="directives/tc-form-fonts/tc-form-fonts.directive.js")
234+
script(src="directives/tc-form-stockart/tc-form-stockart.directive.js")
234235
script(src="directives/tc-input/tc-input.directive.js")
235236
script(src="directives/tc-paginator/tc-paginator.directive.js")
236237
script(src="directives/tc-section/tc-section.directive.js")

0 commit comments

Comments
 (0)