Skip to content

Commit f61c32b

Browse files
ArtursKadikisArtursKadikis
authored
Merge pull request #5904 from Countly/feat-add-content-header-name-improvement-to-release.24.12
[SER-2219] Name input improvement
2 parents f9b25bb + bca890a commit f61c32b

File tree

3 files changed

+258
-164
lines changed

3 files changed

+258
-164
lines changed

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

+156-113
Original file line numberDiff line numberDiff line change
@@ -1,162 +1,205 @@
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,
12-
required: false,
13-
default: null
8+
default: null,
9+
type: String
10+
},
11+
12+
popperClass: {
13+
default: null,
14+
type: String
1415
}
1516
},
16-
data: function() {
17-
return {
18-
currentTab: this.meta?.tabs[0]?.value || null,
19-
isActive: false
20-
};
21-
},
17+
2218
computed: {
2319
containerClass() {
2420
return this.popperClass || 'cly-vue-content-builder__layout-main';
2521
}
26-
},
27-
template: CV.T('/javascripts/countly/vue/templates/content/content.html'),
28-
methods: {
2922
}
3023
}));
3124

3225
Vue.component("cly-content-header", countlyVue.components.create({
26+
template: CV.T('/javascripts/countly/vue/templates/content/content-header.html'),
27+
3328
props: {
34-
value: {
35-
type: String,
36-
required: true
29+
backgroundColor: {
30+
default: '#ffffff',
31+
type: String
3732
},
38-
version: {
39-
type: String,
40-
required: false,
41-
default: null
33+
34+
closeButton: {
35+
default: true,
36+
type: Boolean
4237
},
38+
4339
createdBy: {
40+
default: null,
4441
type: String,
45-
required: false,
46-
default: null
4742
},
48-
toggle: {
49-
type: Boolean,
50-
required: false,
51-
default: false
43+
44+
disableSaveButton: {
45+
default: false,
46+
type: Boolean
5247
},
53-
closeButton: {
54-
type: Boolean,
55-
required: false,
56-
default: true
48+
49+
hideSaveButton: {
50+
default: false,
51+
type: Boolean
52+
},
53+
54+
isToggleDisabled: {
55+
default: false,
56+
type: Boolean
5757
},
58+
59+
options: {
60+
default: () => ([]),
61+
type: Array
62+
},
63+
64+
saveButtonLabel: {
65+
default: CV.i18n('common.save'),
66+
type: String
67+
},
68+
69+
status: {
70+
default: () => ({
71+
label: 'Status',
72+
mode: 'primary',
73+
show: false
74+
}),
75+
type: Object
76+
},
77+
5878
tabs: {
59-
type: Array,
60-
required: false,
61-
default: function() {
62-
return [];
63-
}
79+
default: () => [],
80+
type: Array
6481
},
82+
6583
titleMaxLength: {
66-
type: Number,
67-
required: false,
68-
default: 50
84+
default: 50,
85+
type: Number
6986
},
70-
status: {
71-
type: Object,
72-
required: false,
73-
default: function() {
74-
return { show: false, label: 'Status', mode: 'primary' };
75-
},
87+
88+
toggle: {
89+
default: false,
90+
type: Boolean
7691
},
77-
saveButtonLabel: {
78-
type: String,
79-
required: false,
80-
default: CV.i18n('common.save')
92+
93+
toggleTooltip: {
94+
type: String
8195
},
82-
disableSaveButton: {
83-
type: Boolean,
84-
required: false,
85-
default: false
96+
97+
toggleValue: {
98+
default: false,
99+
type: Boolean
86100
},
87-
topDropdownOptions: {
88-
type: Array,
89-
required: false,
90-
default: function() {
91-
return [];
101+
102+
value: {
103+
required: true,
104+
type: String
105+
},
106+
107+
version: {
108+
default: null,
109+
type: String
110+
}
111+
},
112+
113+
emits: [
114+
'close',
115+
'handle-command',
116+
'input',
117+
'save',
118+
'switch-toggle',
119+
'tab-change'
120+
],
121+
122+
data: () => ({
123+
currentTab: null,
124+
125+
isReadonlyInput: true
126+
}),
127+
128+
computed: {
129+
activeTab: {
130+
get() {
131+
return this.currentTab || this.tabs[0]?.value;
132+
},
133+
set(value) {
134+
this.currentTab = value;
135+
this.$emit('tab-change', value);
92136
}
93137
},
94-
hideSaveButton: {
95-
type: Boolean,
96-
required: false,
97-
default: false
138+
139+
closeButtonIcon() {
140+
return this.closeButton ? 'cly-io-x' : 'cly-io-arrow-sm-left';
98141
},
99-
backgroundColor: {
100-
type: String,
101-
required: false,
102-
default: '#fff'
142+
143+
dynamicTabsCustomStyle() {
144+
return `background-color: ${this.backgroundColor}`;
103145
},
104-
isToggleActive: {
105-
type: Boolean,
106-
required: false,
107-
default: false
146+
147+
inputTooltip() {
148+
return this.localValue && this.localValue.length > 30 ? this.localValue : null;
108149
},
109-
isToggleDisabled: {
110-
type: Boolean,
111-
required: false,
112-
default: false
150+
151+
isOptionsButtonVisible() {
152+
return !!this.options.length;
113153
},
114-
toggleTooltip: {
115-
type: String,
116-
required: false
117-
}
118-
},
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;
154+
155+
localValue: {
156+
get() {
157+
return countlyCommon.unescapeHtml(this.value);
158+
},
159+
set(value) {
160+
this.$emit('input', value);
161+
}
129162
},
130-
currentTab: function(newVal) {
131-
this.$emit('tab-change', newVal);
163+
164+
toggleLocalValue: {
165+
get() {
166+
return this.toggleValue;
167+
},
168+
set(value) {
169+
this.$emit('switch-toggle', value);
170+
}
132171
}
133172
},
173+
134174
methods: {
135-
toggleChanged(newValue) {
136-
this.$emit('toggleChanged', newValue);
137-
},
138-
close: function() {
175+
onCloseIconClick() {
139176
this.$emit('close');
140177
},
141-
save: function() {
142-
this.$emit('save');
143-
},
144-
handleCommand: function(event) {
178+
179+
onCommand(event) {
145180
this.$emit('handle-command', event);
146181
},
147-
handleDoubleClick: function() {
148-
this.isEditing = true;
182+
183+
onInputBlur() {
184+
this.toggleInputReadonlyState();
149185
},
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-
}
186+
187+
onInputContainerClick() {
188+
this.toggleInputReadonlyState();
189+
},
190+
191+
onInputKeydown() {
192+
this.toggleInputReadonlyState();
193+
},
194+
195+
onSaveButtonClick() {
196+
this.$emit('save');
197+
},
198+
199+
toggleInputReadonlyState() {
200+
this.isReadonlyInput = !this.isReadonlyInput;
157201
}
158-
},
159-
template: CV.T('/javascripts/countly/vue/templates/content/content-header.html')
202+
}
160203
}));
161204

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

0 commit comments

Comments
 (0)