Skip to content

Commit e549bec

Browse files
clovisclovis
committed
finish composition API migration
1 parent b20c633 commit e549bec

22 files changed

Lines changed: 2819 additions & 3449 deletions

‎app/package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,8 @@
6464
"rules": {
6565
"no-console": "off",
6666
"vue/multi-word-component-names": "off",
67-
"vue/no-multiple-template-root": "off"
67+
"vue/no-multiple-template-root": "off",
68+
"vue/no-use-v-if-with-v-for": "off"
6869
},
6970
"parserOptions": {
7071
"ecmaVersion": 12,

‎app/src/components/AccessControl.vue‎

Lines changed: 23 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -79,42 +79,35 @@
7979
</div>
8080
</div>
8181
</template>
82-
<script>
82+
<script setup>
8383
import { inject, reactive, ref } from "vue";
8484
85-
export default {
86-
props: ["clientIp", "domainName"],
87-
setup() {
88-
let accessDenied = ref(false);
89-
let incorrectLogin = ref(false);
90-
let accessInput = reactive({ username: "", password: "" });
91-
let http = inject("$http");
92-
let dbUrl = inject("$dbUrl");
85+
defineProps(["clientIp", "domainName"]);
9386
94-
function submit() {
95-
http.get(
96-
`${dbUrl}/scripts/access_request.py?username=${encodeURIComponent(
97-
accessInput.username
98-
)}&password=${encodeURIComponent(accessInput.password)}`
99-
).then((response) => {
100-
let authorization = response.data;
101-
if (authorization.access) {
102-
location.reload();
103-
} else {
104-
incorrectLogin.value = true;
105-
}
106-
});
107-
}
87+
const $http = inject("$http");
88+
const $dbUrl = inject("$dbUrl");
89+
90+
const accessDenied = ref(false);
91+
const incorrectLogin = ref(false);
92+
const accessInput = reactive({ username: "", password: "" });
10893
109-
function reset() {
110-
accessInput.username = "";
111-
accessInput.password = "";
112-
incorrectLogin.value = false;
94+
function submit() {
95+
$http.get(
96+
`${$dbUrl}/scripts/access_request.py?username=${encodeURIComponent(accessInput.username)}&password=${encodeURIComponent(accessInput.password)}`
97+
).then((response) => {
98+
if (response.data.access) {
99+
location.reload();
100+
} else {
101+
incorrectLogin.value = true;
113102
}
103+
});
104+
}
114105
115-
return { accessDenied, accessInput, incorrectLogin, submit, reset };
116-
},
117-
};
106+
function reset() {
107+
accessInput.username = "";
108+
accessInput.password = "";
109+
incorrectLogin.value = false;
110+
}
118111
</script>
119112
<style scoped>
120113
code {

‎app/src/components/Aggregation.vue‎

Lines changed: 140 additions & 161 deletions
Original file line numberDiff line numberDiff line change
@@ -66,175 +66,154 @@
6666
</div>
6767
</div>
6868
</template>
69-
<script>
70-
import { mapStores, mapWritableState } from "pinia";
69+
<script setup>
70+
import { computed, inject, provide, ref, watch } from "vue";
71+
import { useRoute } from "vue-router";
72+
import { storeToRefs } from "pinia";
73+
import { useI18n } from "vue-i18n";
7174
import { useMainStore } from "../stores/main";
7275
import { debug, deepEqual, paramsFilter, paramsToRoute } from "../utils.js";
7376
import citations from "./Citations";
7477
import ResultsSummary from "./ResultsSummary";
7578
76-
export default {
77-
name: "aggregation-report",
78-
components: { citations, ResultsSummary },
79-
inject: ["$http"],
80-
provide() {
81-
return {
82-
results: this.aggregationResults,
83-
};
84-
},
85-
computed: {
86-
...mapWritableState(useMainStore, [
87-
"formData",
88-
"resultsLength",
89-
"aggregationCache",
90-
"searching",
91-
"currentReport",
92-
"urlUpdate"
93-
]),
94-
...mapStores(useMainStore),
95-
statsConfig() {
96-
for (let fieldObject of this.$philoConfig.aggregation_config) {
97-
if (fieldObject.field == this.$route.query.group_by) {
98-
return fieldObject;
99-
}
100-
}
101-
return null;
102-
},
103-
},
104-
data() {
105-
return {
106-
loading: false,
107-
aggregationResults: [],
108-
lastResult: 50,
109-
infiniteId: 0,
110-
groupedByField: this.$route.query.group_by,
111-
breakUpFields: [],
112-
breakUpFieldName: "",
113-
};
114-
},
115-
created() {
116-
this.formData.report = "aggregation";
117-
this.currentReport = "aggregation";
118-
this.fetchResults();
119-
},
120-
watch: {
121-
urlUpdate() {
122-
if (this.formData.report == "aggregation") {
123-
this.groupedByField = this.$route.query.group_by;
124-
this.fetchResults();
125-
}
126-
},
127-
},
128-
methods: {
129-
fetchResults() {
130-
if (
131-
deepEqual(
132-
{ ...this.aggregationCache.query, start: "", end: "" },
133-
{ ...this.$route.query, start: "", end: "" }
134-
)
135-
) {
136-
this.aggregationResults = this.aggregationCache.results;
137-
this.breakUpFields = this.aggregationResults.map((results) => ({
138-
show: false,
139-
results: results.break_up_field,
140-
}));
141-
this.resultsLength = this.aggregationCache.totalResults;
79+
const $http = inject("$http");
80+
const $dbUrl = inject("$dbUrl");
81+
const philoConfig = inject("$philoConfig");
82+
const route = useRoute();
83+
const { t } = useI18n();
84+
const store = useMainStore();
85+
const {
86+
formData,
87+
resultsLength,
88+
aggregationCache,
89+
searching,
90+
currentReport,
91+
urlUpdate,
92+
} = storeToRefs(store);
93+
94+
const aggregationResults = ref([]);
95+
const lastResult = ref(50);
96+
const infiniteId = ref(0);
97+
const groupedByField = ref(route.query.group_by);
98+
const breakUpFields = ref([]);
99+
const breakUpFieldName = ref("");
100+
101+
const statsConfig = computed(() => {
102+
for (const fieldObject of philoConfig.aggregation_config) {
103+
if (fieldObject.field === route.query.group_by) return fieldObject;
104+
}
105+
return null;
106+
});
107+
108+
provide("results", aggregationResults);
109+
110+
function fetchResults() {
111+
if (
112+
deepEqual(
113+
{ ...aggregationCache.value.query, start: "", end: "" },
114+
{ ...route.query, start: "", end: "" }
115+
)
116+
) {
117+
aggregationResults.value = aggregationCache.value.results;
118+
breakUpFields.value = aggregationResults.value.map((r) => ({
119+
show: false,
120+
results: r.break_up_field,
121+
}));
122+
resultsLength.value = aggregationCache.value.totalResults;
123+
return;
124+
}
125+
126+
searching.value = true;
127+
$http
128+
.get(`${$dbUrl}/reports/aggregation.py`, {
129+
params: paramsFilter({ ...formData.value }),
130+
})
131+
.then((response) => {
132+
infiniteId.value += 1;
133+
aggregationResults.value = Object.freeze(buildStatResults(response.data.results));
134+
lastResult.value = 50;
135+
breakUpFields.value = aggregationResults.value.map((r) => ({
136+
show: false,
137+
results: r.break_up_field,
138+
limit: 1000,
139+
}));
140+
const aliasName =
141+
philoConfig.metadata_aliases[response.data.break_up_field] ||
142+
response.data.break_up_field;
143+
breakUpFieldName.value = aliasName ? aliasName.toLowerCase() : "";
144+
resultsLength.value = response.data.total_results;
145+
searching.value = false;
146+
})
147+
.catch((error) => {
148+
searching.value = false;
149+
debug({ $options: { name: "aggregation-report" } }, error);
150+
});
151+
}
152+
153+
function handleFullResultsScroll() {
154+
const scrollPosition =
155+
document.getElementById("aggregation-results").getBoundingClientRect().bottom - 200;
156+
if (scrollPosition < window.innerHeight) {
157+
lastResult.value += 50;
158+
}
159+
}
160+
161+
function buildStatResults(results) {
162+
return results.map((result) => {
163+
result.citation = buildCitationObject(
164+
groupedByField.value,
165+
statsConfig.value.field_citation,
166+
result.metadata_fields
167+
);
168+
return result;
169+
});
170+
}
171+
172+
function buildCitationObject(fieldToLink, citationObject, metadataFields) {
173+
const out = [];
174+
for (const citation of citationObject) {
175+
let label = metadataFields[citation.field];
176+
if ((label == null || label.length === 0) && citation.field !== fieldToLink) {
177+
continue;
178+
}
179+
if (citation.field === fieldToLink) {
180+
const queryParams = { ...formData.value, start: "0", end: "25" };
181+
if (label == null || label.length === 0) {
182+
// Should be NULL, but that's broken in the philo lib
183+
queryParams[fieldToLink] = "";
184+
label = t("common.na");
142185
} else {
143-
this.searching = true;
144-
this.$http
145-
.get(`${this.$dbUrl}/reports/aggregation.py`, {
146-
params: paramsFilter({
147-
...this.formData,
148-
}),
149-
})
150-
.then((response) => {
151-
this.infiniteId += 1;
152-
this.aggregationResults = Object.freeze(this.buildStatResults(response.data.results));
153-
this.lastResult = 50;
154-
this.breakUpFields = this.aggregationResults.map((results) => ({
155-
show: false,
156-
results: results.break_up_field,
157-
limit: 1000,
158-
}));
159-
this.breakUpFieldName =
160-
this.$philoConfig.metadata_aliases[response.data.break_up_field] ||
161-
response.data.break_up_field;
162-
if (typeof this.breakUpFieldName != "undefined" || this.breakUpFieldName != null) {
163-
this.breakUpFieldName = this.breakUpFieldName.toLowerCase();
164-
}
165-
this.resultsLength = response.data.total_results;
166-
this.searching = false;
167-
})
168-
.catch((error) => {
169-
this.searching = false;
170-
debug(this, error);
171-
});
172-
}
173-
},
174-
handleFullResultsScroll() {
175-
let scrollPosition = document.getElementById("aggregation-results").getBoundingClientRect().bottom - 200;
176-
if (scrollPosition < window.innerHeight) {
177-
this.lastResult += 50;
178-
}
179-
},
180-
buildStatResults(results) {
181-
let resultsWithCiteObject = [];
182-
for (let result of results) {
183-
result.citation = this.buildCitationObject(
184-
this.groupedByField,
185-
this.statsConfig.field_citation,
186-
result.metadata_fields
187-
);
188-
resultsWithCiteObject.push(result);
186+
queryParams[fieldToLink] = `"${label}"`;
189187
}
190-
return resultsWithCiteObject;
191-
},
192-
buildCitationObject(fieldToLink, citationObject, metadataFields) {
193-
let citations = [];
194-
for (let citation of citationObject) {
195-
let label = metadataFields[citation.field];
196-
if (label == null || label.length == 0) {
197-
if (citation["field"] != fieldToLink) {
198-
continue;
199-
}
200-
}
201-
if (citation["field"] == fieldToLink) {
202-
let queryParams = {
203-
...this.formData,
204-
start: "0",
205-
end: "25",
206-
};
207-
if (label == null || label.length == 0) {
208-
queryParams[fieldToLink] = ""; // Should be NULL, but that's broken in the philo lib
209-
label = this.$t("common.na");
210-
} else {
211-
queryParams[fieldToLink] = `"${label}"`;
212-
}
213-
if (fieldToLink != this.groupedByField) {
214-
queryParams[this.groupedByField] = `"${metadataFields[this.groupedByField]}"`;
215-
}
216-
let link = "";
217-
// workaround for broken NULL searches
218-
if (queryParams[fieldToLink].length) {
219-
link = paramsToRoute({
220-
...queryParams,
221-
report: "concordance",
222-
});
223-
citations.push({ ...citation, href: link, label: label });
224-
} else {
225-
citations.push({ ...citation, href: "", label: label });
226-
}
227-
} else {
228-
citations.push({ ...citation, href: "", label: label });
229-
}
188+
if (fieldToLink !== groupedByField.value) {
189+
queryParams[groupedByField.value] = `"${metadataFields[groupedByField.value]}"`;
230190
}
231-
return citations;
232-
},
233-
toggleBreakUp(resultIndex) {
234-
this.breakUpFields[resultIndex].show = !this.breakUpFields[resultIndex].show;
235-
},
236-
},
237-
};
191+
// workaround for broken NULL searches
192+
const href = queryParams[fieldToLink].length
193+
? paramsToRoute({ ...queryParams, report: "concordance" })
194+
: "";
195+
out.push({ ...citation, href, label });
196+
} else {
197+
out.push({ ...citation, href: "", label });
198+
}
199+
}
200+
return out;
201+
}
202+
203+
function toggleBreakUp(resultIndex) {
204+
breakUpFields.value[resultIndex].show = !breakUpFields.value[resultIndex].show;
205+
}
206+
207+
watch(urlUpdate, () => {
208+
if (formData.value.report === "aggregation") {
209+
groupedByField.value = route.query.group_by;
210+
fetchResults();
211+
}
212+
});
213+
214+
formData.value.report = "aggregation";
215+
currentReport.value = "aggregation";
216+
fetchResults();
238217
</script>
239218
<style scoped lang="scss">
240219
@use "../assets/styles/theme.module.scss" as theme;

0 commit comments

Comments
 (0)