From c4391fe952752cbd9ed19bbbe6385c491e87119d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=A9my=20Munsch?= Date: Mon, 29 Aug 2022 18:19:37 +0200 Subject: [PATCH] Sort out some TS compilation issues --- .eslintrc.json | 2 +- .vscode/settings.json | 2 +- package-lock.json | 2 +- .../ts/components/bo/ModelLinkComponent.vue | 167 ++++++++++-------- 4 files changed, 94 insertions(+), 79 deletions(-) diff --git a/.eslintrc.json b/.eslintrc.json index cf467d1..cfdce2b 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -35,7 +35,7 @@ "linebreak-style": ["error", "unix"], "quotes": ["error", "double"], "semi": ["error", "always"], - "vue/script-indent": ["error", 2, { "baseIndent": 0 }], + "vue/script-indent": ["error", 2, { "baseIndent": 0, "switchCase": 1 }], "vue/one-component-per-file": "off" } } diff --git a/.vscode/settings.json b/.vscode/settings.json index 55b1f86..5958c79 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -20,5 +20,5 @@ "commandCenter.border": "#e7e7e799" }, "peacock.remoteColor": "#353517", - "vue3snippets.enable-compile-vue-file-on-did-save-code": true + "vue3snippets.enable-compile-vue-file-on-did-save-code": false } diff --git a/package-lock.json b/package-lock.json index 0c3607d..abf6245 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,5 +1,5 @@ { - "name": "srcs", + "name": "loue", "lockfileVersion": 2, "requires": true, "packages": { diff --git a/resources/ts/components/bo/ModelLinkComponent.vue b/resources/ts/components/bo/ModelLinkComponent.vue index f74f3e7..5bbd623 100644 --- a/resources/ts/components/bo/ModelLinkComponent.vue +++ b/resources/ts/components/bo/ModelLinkComponent.vue @@ -1,19 +1,21 @@ - + @@ -67,6 +80,7 @@ export default defineComponent({ components: { VueSelect, }, + emits: ["input"], beforeMount() { if (!this.$attrs.json) { throw new Error("this component requires json"); @@ -76,15 +90,15 @@ export default defineComponent({ const json = String(this.$attrs.json ?? "{}"); const data = JSON.parse(json); if (Object.keys(data).length) { - this._isJson = true; - this._name = data.name; + this.isJson = true; + this.name = data.name; } - this._disabled = this.disabled ? this.disabled : data.disabled ? true : false; - this._readonly = this.readonly ? this.readonly : data.readonly ? true : false; - this._placeholder = this.placeholder ? this.placeholder : data.placeholder; - this._maxLength = this.maxLength ? this.maxLength : data.maxLength; + this.intDisabled = this.disabled ? this.disabled : data.disabled ? true : false; + this.intReadonly = this.readonly ? this.readonly : data.readonly ? true : false; + this.intPlaceholder = this.placeholder ? this.placeholder : data.placeholder; + this.intMaxLength = this.maxLength ? this.maxLength : data.maxLength; this.parseValue(this.value ? this.value : data.value); - this.search(); + this.searchAjax(); }, props: { disabled: { @@ -109,70 +123,70 @@ export default defineComponent({ }, }, data(): { - _isJson: boolean; - _name: string | null; - _disabled: boolean; - _readonly: boolean; - _placeholder: string; - _maxLength: number; - _value: SelectModel | null; - _loading: boolean; - _searchText: string; - _data: SelectModel[]; - _page: number; - _perPage: number; - _hasNextPage: boolean; - _hasPrevPage: boolean; + isJson: boolean; + name: string | null; + intDisabled: boolean; + intReadonly: boolean; + intPlaceholder: string; + intMaxLength: number; + intValue: SelectModel | null; + loading: boolean; + searchText: string; + data: SelectModel[]; + page: number; + perPage: number; + hasNextPage: boolean; + hasPrevPage: boolean; } { return { - _isJson: false, - _name: null, - _disabled: false, - _readonly: false, - _placeholder: "", - _value: null, - _loading: false, - _searchText: "", - _data: [], - _page: 1, - _perPage: 15, - _hasNextPage: true, - _hasPrevPage: false, - _maxLength: 65, + isJson: false, + name: null, + intDisabled: false, + intReadonly: false, + intPlaceholder: "", + intValue: null, + loading: false, + searchText: "", + data: [], + page: 1, + perPage: 15, + hasNextPage: true, + hasPrevPage: false, + intMaxLength: 65, }; }, watch: { - _page() { - if (this._page < 1) { - this._page = 1; + page() { + if (this.page < 1) { + this.page = 1; } - if (this._page > 1) { - this._hasPrevPage = true; + if (this.page > 1) { + this.hasPrevPage = true; } else { - this._hasPrevPage = false; + this.hasPrevPage = false; } - this.search(); + this.searchAjax(); }, - _data() { - if (this._data.length == this._perPage) { - this._hasNextPage = true; + data() { + if (this.data.length == this.perPage) { + this.hasNextPage = true; } else { - this._hasNextPage = false; + this.hasNextPage = false; } }, value() { this.parseValue(this.value); }, - _value() { - this.$emit("input", this._value ? this._value.value : ""); + intValue() { + this.$emit("input", this.intValue ? this.intValue.value : ""); }, }, methods: { - search(search = null) { + searchAjax(search = null) { if (search !== false && search !== null) { - this._searchText = search; + this.searchText = search; } - if (!this._searchText) { + if (!this.searchText) { return; } let routeUrl = route.methods.route("bo.ranges.search-uri"); @@ -181,9 +195,9 @@ export default defineComponent({ } const url = new URL(routeUrl); routeUrl = `${url.origin}${url.pathname}?`; - routeUrl += "page=" + encodeURIComponent(this._page); - routeUrl += "&search=" + encodeURIComponent(this._searchText); - this._loading = true; + routeUrl += "page=" + encodeURIComponent(this.page); + routeUrl += "&search=" + encodeURIComponent(this.searchText); + this.loading = true; axios .get(routeUrl) .then((response) => { @@ -193,12 +207,12 @@ export default defineComponent({ console.error(error); }) .then(() => { - this._loading = false; + this.loading = false; }); }, parseValue(value: string | null) { if (!value) { - this._value = null; + this.intValue = null; return; } let routeUrl = route.methods.route("bo.ranges.model-title"); @@ -206,7 +220,7 @@ export default defineComponent({ throw new Error("undefined route bo.ranges.model-title"); } const url = new URL(routeUrl), - model = value.replace(/^#/, "").replace(/#$/, "").split("#"); + model = value.replace(/^#/, "").replace(/#$/, "").split("#"); routeUrl = `${url.origin}${url.pathname}?`; @@ -215,11 +229,11 @@ export default defineComponent({ axios.get(routeUrl).then((response) => { let label = String(response.data as string); label = - label.length >= this._maxLength - ? label.substring(0, this._maxLength) + ".." + label.length >= this.intMaxLength + ? label.substring(0, this.intMaxLength) + ".." : label; if (label) { - this._value = this.parseResource({ + this.intValue = this.parseResource({ class: model[0], label: label, value: model[1], @@ -250,9 +264,9 @@ export default defineComponent({ for (const model of data) { out.push(this.parseResource(model)); } - // pass _searchText if is valid url and nothing else is found + // pass searchText if is valid url and nothing else is found if (out.length) { - this._data = out; + this.data = out; } }, }, @@ -264,6 +278,7 @@ export default defineComponent({ .ModelLink { padding: 0 !important; + .vs__dropdown-toggle { border: 0 !important; }