Skip to content

Commit 8f9c0d9

Browse files
authored
Merge pull request #2 from kintone/develop
Update form element
2 parents e9b12c4 + 0f3c360 commit 8f9c0d9

File tree

5 files changed

+257
-61
lines changed

5 files changed

+257
-61
lines changed

src/css/config.css

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,6 @@
22
/* Copyright (c) 2018 Cybozu */
33
/* https://github.com/kintone/SAMPLE-Profile-tooltip-Plug-in/blob/master/LICENSE */
44

5-
.block {
6-
padding: 0 0 20px 0;
7-
}
5+
.kintoneplugin-desc::first-letter {
6+
text-transform: capitalize;
7+
}

src/html/config.html

Lines changed: 20 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -2,23 +2,25 @@
22
Copyright (c) 2018 Cybozu
33
https://github.com/kintone/SAMPLE-Profile-tooltip-Plug-in/blob/master/LICENSE -->
44

5-
<div>
6-
<div class="block">
7-
<label class="kintoneplugin-label">
8-
<span id ="container_label">Tooltip Display Area</span>
9-
<span class="kintoneplugin-require">*</span>
10-
</label>
11-
<div class="kintoneplugin-row">Select a User Selection field to display tooltips on.</div>
12-
<div class="kintoneplugin-select-outer">
13-
<div class="kintoneplugin-select">
14-
<select id="select_name_field" name="select_name_field">
15-
<option value="">-----</option>
16-
</select>
5+
<section>
6+
<form class="js-submit-settings">
7+
<div class="kintoneplugin-row">
8+
<label class="kintoneplugin-label" for="select-name-field">
9+
Tooltip Display Area
10+
<span class="kintoneplugin-require">*</span>
11+
</label>
12+
<p class="kintoneplugin-desc">Select a User Selection field to display tooltips on.</p>
13+
<div class="kintoneplugin-select-outer">
14+
<div class="kintoneplugin-select">
15+
<select id="select-name-field" name="js-select-name-field" required>
16+
<option value="">-----</option>
17+
</select>
18+
</div>
1719
</div>
1820
</div>
19-
</div>
20-
<div class="block">
21-
<button type="button" id="check-plugin-cancel" class="kintoneplugin-button-dialog-cancel"> Cancel </button>
22-
<button type="button" id="check-plugin-submit" class="kintoneplugin-button-dialog-ok"> Save </button>
23-
</div>
24-
</div>
21+
<p class="kintoneplugin-row">
22+
<button class="js-cancel-button kintoneplugin-button-dialog-cancel" type="button"> Cancel </button>
23+
<button class="kintoneplugin-button-dialog-ok"> Save </button>
24+
</p>
25+
</form>
26+
</section>

src/js/config.js

Lines changed: 27 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,9 @@ jQuery.noConflict();
88
'use strict';
99
// Get configuration settings
1010
var CONF = kintone.plugin.app.getConfig(PLUGIN_ID);
11+
var $form = $('.js-submit-settings');
12+
var $cancelButton = $('.js-cancel-button');
13+
var $name = $('select[name="js-select-name-field"]');
1114

1215
function escapeHtml(htmlstr) {
1316
return htmlstr.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
@@ -16,55 +19,39 @@ jQuery.noConflict();
1619

1720
function setDropDown() {
1821
// Retrieve field information, then set drop-down
19-
return kintone.api(kintone.api.url('/k/v1/preview/app/form/fields', true), 'GET',
20-
{'app': kintone.app.getId()}).then(function(resp) {
22+
KintoneConfigHelper.getFields('USER_SELECT').then(function(resp) {
2123

22-
for (var key in resp.properties) {
23-
if (!resp.properties.hasOwnProperty(key)) {
24-
continue;
25-
}
26-
var prop = resp.properties[key];
24+
resp.forEach(function(field) {
2725
var $option = $('<option>');
28-
29-
switch (prop.type) {
30-
// Only pick User Selection field
31-
case 'USER_SELECT':
32-
$option.attr('value', prop.code);
33-
$option.text(escapeHtml(prop.label));
34-
$('#select_name_field').append($option.clone());
35-
break;
36-
default:
37-
break;
38-
}
39-
}
26+
$option.attr('value', field.code);
27+
$option.text(escapeHtml(field.label));
28+
$name.append($option.clone());
29+
});
4030
// Set default values
41-
$('#select_name_field').val(CONF.name);
42-
}, function(resp) {
43-
return alert('Failed to retrieve field(s) information');
31+
$name.val(CONF.name);
32+
}).catch(function(resp) {
33+
alert('Failed to retrieve field(s) information');
4434
});
4535
}
4636

47-
$(document).ready(function() {
48-
// Set drop-down list
49-
setDropDown();
37+
// Set drop-down list
38+
setDropDown();
5039

51-
// Set input values when 'Save' button is clicked
52-
$('#check-plugin-submit').click(function() {
53-
var config = [];
54-
var name = $('#select_name_field').val();
40+
// Set input values when 'Save' button is clicked
41+
$form.on('submit', function(e) {
42+
e.preventDefault();
43+
var config = [];
44+
var name = $name.val();
5545

56-
// Check required fields
57-
if (name === '') {
58-
alert('Please set required field(s)');
59-
return;
60-
}
61-
config.name = name;
46+
config.name = name;
6247

63-
kintone.plugin.app.setConfig(config);
64-
});
65-
// Process when 'Cancel' is clicked
66-
$('#check-plugin-cancel').click(function() {
67-
history.back();
48+
kintone.plugin.app.setConfig(config, function() {
49+
alert('The plug-in settings have been saved. Please update the app!');
50+
window.location.href = '/k/admin/app/flow?app=' + kintone.app.getId();
6851
});
6952
});
53+
// Process when 'Cancel' is clicked
54+
$cancelButton.click(function() {
55+
window.location.href = '/k/admin/app/' + kintone.app.getId() + '/plugin/';
56+
});
7057
})(jQuery, kintone.$PLUGIN_ID);

src/js/kintone-config-helper.js

Lines changed: 206 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,206 @@
1+
(function (global, factory) {
2+
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
3+
typeof define === 'function' && define.amd ? define(['exports'], factory) :
4+
(factory((global.KintoneConfigHelper = {})));
5+
}(this, (function (exports) { 'use strict';
6+
7+
var ALL_FIELD_TYPES = [
8+
"SINGLE_LINE_TEXT",
9+
"MULTI_LINE_TEXT",
10+
"RICH_TEXT",
11+
"NUMBER",
12+
"CALC",
13+
"RADIO_BUTTON",
14+
"CHECK_BOX",
15+
"MULTI_SELECT",
16+
"DROP_DOWN",
17+
"DATE",
18+
"TIME",
19+
"DATETIME",
20+
"FILE",
21+
"LINK",
22+
"USER_SELECT",
23+
"ORGANIZATION_SELECT",
24+
"GROUP_SELECT",
25+
"REFERENCE_TABLE",
26+
"SPACER",
27+
"GROUP",
28+
"SUBTABLE",
29+
"RECORD_NUMBER",
30+
"CREATOR",
31+
"CREATED_TIME",
32+
"MODIFIER",
33+
"UPDATED_TIME"
34+
];
35+
function createKintoneClient(kintone) {
36+
function fetchFormInfoByFields() {
37+
var url = kintone.api.url("/k/v1/preview/app/form/fields", true);
38+
var body = {
39+
app: kintone.app.getId()
40+
};
41+
return kintone.api(url, "GET", body).then(function (resp) {
42+
return resp.properties;
43+
});
44+
}
45+
function fetchFormInfoByLayout() {
46+
var url = kintone.api.url("/k/v1/preview/app/form/layout", true);
47+
var body = {
48+
app: kintone.app.getId()
49+
};
50+
return kintone.api(url, "GET", body).then(function (resp) {
51+
return resp.layout;
52+
});
53+
}
54+
return {
55+
fetchFormInfoByFields: fetchFormInfoByFields,
56+
fetchFormInfoByLayout: fetchFormInfoByLayout
57+
};
58+
}
59+
60+
/*! *****************************************************************************
61+
Copyright (c) Microsoft Corporation. All rights reserved.
62+
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
63+
this file except in compliance with the License. You may obtain a copy of the
64+
License at http://www.apache.org/licenses/LICENSE-2.0
65+
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
66+
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
67+
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
68+
MERCHANTABLITY OR NON-INFRINGEMENT.
69+
See the Apache Version 2.0 License for specific language governing permissions
70+
and limitations under the License.
71+
***************************************************************************** */
72+
73+
var __assign = function() {
74+
__assign = Object.assign || function __assign(t) {
75+
for (var s, i = 1, n = arguments.length; i < n; i++) {
76+
s = arguments[i];
77+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
78+
}
79+
return t;
80+
};
81+
return __assign.apply(this, arguments);
82+
};
83+
84+
function __rest(s, e) {
85+
var t = {};
86+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
87+
t[p] = s[p];
88+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
89+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
90+
t[p[i]] = s[p[i]];
91+
return t;
92+
}
93+
94+
var NOT_EXIST_MESSAGE = "Either the specified field type does not exist, or this method cannot respond the specified field type.";
95+
var NOT_MATCH_MESSAGE = "Specify either characters or an array of characters for the getAllFields parameter.";
96+
97+
function createGetFields(kintoneClient, Promise_) {
98+
var Promise = Promise_;
99+
var fetchFormInfoByFields = kintoneClient.fetchFormInfoByFields, fetchFormInfoByLayout = kintoneClient.fetchFormInfoByLayout;
100+
function removeUnnecessaryProperties(field) {
101+
var _ = field.size, rest = __rest(field, ["size"]);
102+
return rest;
103+
}
104+
function getFieldInfo(layoutFields) {
105+
return layoutFields
106+
.filter(function (layout) { return layout.type !== "LABEL" && layout.type !== "HR"; })
107+
.map(function (field) { return removeUnnecessaryProperties(field); });
108+
}
109+
function modifiedLayoutResp(layoutList) {
110+
return layoutList.reduce(function (acc, layout) {
111+
switch (layout.type) {
112+
case "ROW":
113+
return acc.concat(getFieldInfo(layout.fields));
114+
case "GROUP":
115+
return acc.concat([
116+
{ type: layout.type, code: layout.code }
117+
], layout.layout
118+
.map(function (childLayout) { return getFieldInfo(childLayout.fields); })
119+
.reduce(function (acc, cur) { return acc.concat(cur); }, []));
120+
case "SUBTABLE":
121+
return acc.concat([
122+
{ type: layout.type, code: layout.code }
123+
], getFieldInfo(layout.fields));
124+
}
125+
}, []);
126+
}
127+
function getLabeledFields(fieldsResp) {
128+
return Object.keys(fieldsResp).reduce(function (acc, key) {
129+
var _a;
130+
var field = fieldsResp[key];
131+
if (field.type === "SUBTABLE") {
132+
return __assign({}, acc, getLabeledFields(field.fields));
133+
}
134+
return field.label ? __assign({}, acc, (_a = {}, _a[field.code] = field.label, _a)) : acc;
135+
}, {});
136+
}
137+
function addLabel(layoutFieldList, fieldsResp) {
138+
var labeledFields = getLabeledFields(fieldsResp);
139+
return layoutFieldList.map(function (layoutField) {
140+
return labeledFields[layoutField.code]
141+
? __assign({}, layoutField, { label: labeledFields[layoutField.code] }) : layoutField;
142+
});
143+
}
144+
function getLookupFieldKeys(fieldsResp) {
145+
return Object.keys(fieldsResp).filter(function (key) { return typeof fieldsResp[key].lookup !== "undefined"; });
146+
}
147+
function filterLookupField(layoutFieldList, fieldsResp) {
148+
var lookupFieldKeys = getLookupFieldKeys(fieldsResp);
149+
if (lookupFieldKeys.length === 0)
150+
;
151+
return layoutFieldList.filter(function (layoutField) {
152+
return !lookupFieldKeys.some(function (key) { return fieldsResp[key].code === layoutField.code; });
153+
});
154+
}
155+
function flattenFieldsForSubtable(fieldsResp) {
156+
return Object.keys(fieldsResp).reduce(function (fields, key) {
157+
var _a, _b;
158+
if (fieldsResp[key].type === "SUBTABLE") {
159+
return __assign({}, fields, (_a = {}, _a[key] = fieldsResp[key], _a), fieldsResp[key].fields);
160+
}
161+
return __assign({}, fields, (_b = {}, _b[key] = fieldsResp[key], _b));
162+
}, {});
163+
}
164+
function fetchAllFields(selectFieldTypes) {
165+
return Promise.all([fetchFormInfoByFields(), fetchFormInfoByLayout()]).then(function (_a) {
166+
var fieldsResp = _a[0], layoutResp = _a[1];
167+
var fieldList = addLabel(filterLookupField(modifiedLayoutResp(layoutResp), flattenFieldsForSubtable(fieldsResp)), fieldsResp);
168+
return selectFieldTypes
169+
? fieldList.filter(function (field) { return selectFieldTypes.indexOf(field.type) !== -1; })
170+
: fieldList;
171+
});
172+
}
173+
function validateFieldType(fieldType) {
174+
return ALL_FIELD_TYPES.some(function (type) { return type === fieldType; });
175+
}
176+
function validateGetAllFieldsArgument(fieldType) {
177+
if (typeof fieldType === "string") {
178+
return validateFieldType(fieldType) ? null : NOT_EXIST_MESSAGE;
179+
}
180+
if (Array.isArray(fieldType)) {
181+
return fieldType.every(validateFieldType) ? null : NOT_EXIST_MESSAGE;
182+
}
183+
return NOT_MATCH_MESSAGE;
184+
}
185+
function getFields(selectFieldType) {
186+
if (typeof selectFieldType === "undefined") {
187+
return fetchAllFields();
188+
}
189+
var error = validateGetAllFieldsArgument(selectFieldType);
190+
if (error) {
191+
return Promise.reject(new Error(error));
192+
}
193+
return fetchAllFields(Array.isArray(selectFieldType) ? selectFieldType : [selectFieldType]);
194+
}
195+
return getFields;
196+
}
197+
198+
var kintone = window.kintone;
199+
var kintoneClient = createKintoneClient(kintone);
200+
var getFields = createGetFields(kintoneClient, kintone.Promise);
201+
202+
exports.getFields = getFields;
203+
204+
Object.defineProperty(exports, '__esModule', { value: true });
205+
206+
})));

src/manifest.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
"html": "html/config.html",
1717
"js": [
1818
"https://js.kintone.com/jquery/3.3.1/jquery.min.js",
19+
"js/kintone-config-helper.js",
1920
"js/config.js"
2021
],
2122
"css": [

0 commit comments

Comments
 (0)