Skip to content

Commit 822d8c3

Browse files
kanwarujjavalkanwarujjaval
authored
Merge pull request #5882 from Countly/SER-2219-name-input-improvement
[SER-2219] Name input improvement
2 parents 1c717b8 + 31bc58f commit 822d8c3

File tree

4 files changed

+440
-247
lines changed

4 files changed

+440
-247
lines changed

‎frontend/express/public/javascripts/countly/vue/components/content.js‎

Lines changed: 158 additions & 113 deletions
Original file line numberDiff line numberDiff line change
@@ -1,162 +1,207 @@
11
/* global Vue, CV, countlyCommon */
22
(function(countlyVue) {
33
Vue.component("cly-content-layout", countlyVue.components.create({
4+
template: CV.T('/javascripts/countly/vue/templates/content/content.html'),
5+
46
props: {
5-
popperClass: {
6-
type: String,
7-
required: false,
8-
default: null
9-
},
107
backgroundColor: {
11-
type: String,
8+
default: null,
9+
type: String
10+
},
11+
12+
popperClass: {
13+
default: null,
1214
required: false,
13-
default: null
15+
type: String
1416
}
1517
},
16-
data: function() {
17-
return {
18-
currentTab: this.meta?.tabs[0]?.value || null,
19-
isActive: false
20-
};
21-
},
18+
2219
computed: {
2320
containerClass() {
2421
return this.popperClass || 'cly-vue-content-builder__layout-main';
2522
}
26-
},
27-
template: CV.T('/javascripts/countly/vue/templates/content/content.html'),
28-
methods: {
2923
}
3024
}));
3125

3226
Vue.component("cly-content-header", countlyVue.components.create({
27+
template: CV.T('/javascripts/countly/vue/templates/content/content-header.html'),
28+
3329
props: {
34-
value: {
35-
type: String,
36-
required: true
30+
backgroundColor: {
31+
default: '#ffffff',
32+
type: String
3733
},
38-
version: {
39-
type: String,
40-
required: false,
41-
default: null
34+
35+
closeButton: {
36+
default: true,
37+
type: Boolean
4238
},
39+
4340
createdBy: {
44-
type: String,
45-
required: false,
46-
default: null
41+
default: null,
42+
type: String
4743
},
48-
toggle: {
49-
type: Boolean,
50-
required: false,
51-
default: false
44+
45+
disableSaveButton: {
46+
default: false,
47+
type: Boolean
5248
},
53-
closeButton: {
54-
type: Boolean,
55-
required: false,
56-
default: true
49+
50+
hideSaveButton: {
51+
default: false,
52+
type: Boolean
5753
},
58-
tabs: {
54+
55+
isToggleDisabled: {
56+
default: false,
57+
type: Boolean
58+
},
59+
60+
options: {
5961
type: Array,
60-
required: false,
61-
default: function() {
62-
return [];
63-
}
62+
default: () => []
6463
},
65-
titleMaxLength: {
66-
type: Number,
67-
required: false,
68-
default: 50
64+
65+
saveButtonLabel: {
66+
default: CV.i18n('common.save'),
67+
type: String
6968
},
69+
7070
status: {
71-
type: Object,
72-
required: false,
73-
default: function() {
74-
return { show: false, label: 'Status', mode: 'primary' };
75-
},
76-
},
77-
saveButtonLabel: {
78-
type: String,
79-
required: false,
80-
default: CV.i18n('common.save')
71+
default: () => ({
72+
label: 'Status',
73+
mode: 'primary',
74+
show: false
75+
}),
76+
type: Object
8177
},
82-
disableSaveButton: {
83-
type: Boolean,
84-
required: false,
85-
default: false
78+
79+
tabs: {
80+
default: () => [],
81+
type: Array
8682
},
87-
topDropdownOptions: {
88-
type: Array,
89-
required: false,
90-
default: function() {
91-
return [];
92-
}
83+
84+
toggle: {
85+
default: false,
86+
type: Boolean
9387
},
94-
hideSaveButton: {
95-
type: Boolean,
96-
required: false,
97-
default: false
88+
89+
toggleTooltip: {
90+
default: null,
91+
type: String
9892
},
99-
backgroundColor: {
100-
type: String,
101-
required: false,
102-
default: '#fff'
93+
94+
toggleValue: {
95+
default: false,
96+
type: Boolean
10397
},
104-
isToggleActive: {
105-
type: Boolean,
106-
required: false,
107-
default: false
98+
99+
value: {
100+
required: true,
101+
type: String
108102
},
109-
isToggleDisabled: {
110-
type: Boolean,
111-
required: false,
112-
default: false
103+
104+
valueMaxLength: {
105+
default: 50,
106+
type: Number
113107
},
114-
toggleTooltip: {
115-
type: String,
116-
required: false
108+
109+
version: {
110+
default: null,
111+
type: String
117112
}
118113
},
119-
data: function() {
120-
return {
121-
currentTab: this.tabs[0]?.value || null,
122-
localTitle: countlyCommon.unescapeHtml(this.value),
123-
isEditing: !this.value
124-
};
125-
},
126-
watch: {
127-
value: function(newVal) {
128-
this.localTitle = newVal;
114+
115+
emits: [
116+
'close',
117+
'handle-command',
118+
'input',
119+
'save',
120+
'switch-toggle',
121+
'tab-change'
122+
],
123+
124+
data: () => ({
125+
currentTab: null,
126+
127+
isReadonlyInput: true
128+
}),
129+
130+
computed: {
131+
activeTab: {
132+
get() {
133+
return this.currentTab || this.tabs[0]?.name;
134+
},
135+
set(value) {
136+
this.currentTab = value;
137+
this.$emit('tab-change', value);
138+
}
139+
},
140+
141+
closeButtonIcon() {
142+
return this.closeButton ? 'cly-io-x' : 'cly-io-arrow-sm-left';
129143
},
130-
currentTab: function(newVal) {
131-
this.$emit('tab-change', newVal);
144+
145+
dynamicTabsCustomStyle() {
146+
return `background-color: ${this.backgroundColor}`;
147+
},
148+
149+
inputTooltip() {
150+
return this.localValue && this.localValue.length > 30 ? this.localValue : null;
151+
},
152+
153+
isOptionsButtonVisible() {
154+
return !!this.options.length;
155+
},
156+
157+
localValue: {
158+
get() {
159+
return countlyCommon.unescapeHtml(this.value);
160+
},
161+
set(value) {
162+
this.$emit('input', value);
163+
}
164+
},
165+
166+
toggleLocalValue: {
167+
get() {
168+
return this.toggleValue;
169+
},
170+
set(value) {
171+
this.$emit('switch-toggle', value);
172+
}
132173
}
133174
},
175+
134176
methods: {
135-
toggleChanged(newValue) {
136-
this.$emit('toggleChanged', newValue);
137-
},
138-
close: function() {
177+
onCloseIconClick() {
139178
this.$emit('close');
140179
},
141-
save: function() {
142-
this.$emit('save');
143-
},
144-
handleCommand: function(event) {
180+
181+
onCommand(event) {
145182
this.$emit('handle-command', event);
146183
},
147-
handleDoubleClick: function() {
148-
this.isEditing = true;
184+
185+
onInputBlur() {
186+
this.toggleInputReadonlyState();
149187
},
150-
finishEditing: function() {
151-
if (this.localTitle) {
152-
this.isEditing = false;
153-
}
154-
if (this.localTitle !== this.value) {
155-
this.$emit('input', this.localTitle);
156-
}
188+
189+
onInputContainerClick() {
190+
this.toggleInputReadonlyState();
191+
},
192+
193+
onInputKeydown() {
194+
this.toggleInputReadonlyState();
195+
},
196+
197+
onSaveButtonClick() {
198+
this.$emit('save');
199+
},
200+
201+
toggleInputReadonlyState() {
202+
this.isReadonlyInput = !this.isReadonlyInput;
157203
}
158-
},
159-
template: CV.T('/javascripts/countly/vue/templates/content/content-header.html')
204+
}
160205
}));
161206

162207
Vue.component("cly-content-body", countlyVue.components.create({

0 commit comments

Comments
 (0)