Skip to content
GitLab
Commit cad5a6d5 authored by ZeMKI's avatar ZeMKI
Browse files

New detailed show 

* work in progress in home
* new detailed view on study.show
parent 8bda0d01
Expand all Hide whitespace changes
Inline Side-by-side
package-lock.json
View file @ cad5a6d5
......@@ -4,6 +4,7 @@
"requires": true,
"packages": {
"": {
"name": "mesort",
"dependencies": {
"@babel/runtime": "^7.17.2",
"@mdi/font": "^4.9.95",
......@@ -21,6 +22,7 @@
"launch-editor-middleware": "^2.3.0",
"moment": "^2.29.1",
"node-sass": "^4.0.0",
"vue-gravatar": "^1.4.1",
"vue-material-design-icons": "^4.13.0",
"vue-select": "^3.16.0",
"vue-template-compiler": "^2.6.14",
......@@ -3958,7 +3960,6 @@
"version": "0.0.2",
"resolved": "https://registry.npmjs.org/charenc/-/charenc-0.0.2.tgz",
"integrity": "sha1-wKHS86cJLgN3S/qD8UwPxXkKhmc=",
"dev": true,
"engines": {
"node": "*"
}
......@@ -4477,7 +4478,6 @@
"version": "0.0.2",
"resolved": "https://registry.npmjs.org/crypt/-/crypt-0.0.2.tgz",
"integrity": "sha1-iNf/fsDfuG9xPch7u0LQRNPmxBs=",
"dev": true,
"engines": {
"node": "*"
}
......@@ -6810,8 +6810,7 @@
"node_modules/is-buffer": {
"version": "1.1.6",
"resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
"integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==",
"dev": true
"integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w=="
},
"node_modules/is-core-module": {
"version": "2.8.1",
......@@ -7653,7 +7652,6 @@
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/md5/-/md5-2.3.0.tgz",
"integrity": "sha512-T1GITYmFaKuO91vxyoQMFETst+O71VUPEU3ze5GNzDm0OWdP8v1ziTaAEPUr/3kLsY3Sftgz242A1SetQiDL7g==",
"dev": true,
"dependencies": {
"charenc": "0.0.2",
"crypt": "0.0.2",
......@@ -7922,9 +7920,9 @@
}
},
"node_modules/minimist": {
"version": "1.2.5",
"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
"integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw=="
"version": "1.2.6",
"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.6.tgz",
"integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q=="
},
"node_modules/minipass": {
"version": "2.9.0",
......@@ -8048,9 +8046,9 @@
"optional": true
},
"node_modules/node-forge": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/node-forge/-/node-forge-1.2.1.tgz",
"integrity": "sha512-Fcvtbb+zBcZXbTTVwqGA5W+MKBj56UjVRevvchv5XrcyXbmNdesfZL37nlcWOfpgHhgmxApw3tQbTr4CqNmX4w==",
"version": "1.3.1",
"resolved": "https://registry.npmjs.org/node-forge/-/node-forge-1.3.1.tgz",
"integrity": "sha512-dPEtOeMvF9VMcYV/1Wb8CPoVAXtp6MKMlcbAt4ddqmGqUJ6fQZFXkNZNkNlfevtNkGtaSoXf/vNNNSvgrdXwtA==",
"dev": true,
"engines": {
"node": ">= 6.13.0"
......@@ -10346,9 +10344,9 @@
}
},
"node_modules/sass-graph/node_modules/ansi-regex": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
"integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==",
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.1.tgz",
"integrity": "sha512-ILlv4k/3f6vfQ4OoP2AGvirOktlQ98ZEL1k9FaQjxa3L1abBgbuTDAdPOpvbGncC0BTVQrl+OM8xZGK6tWXt7g==",
"engines": {
"node": ">=6"
}
......@@ -11789,6 +11787,14 @@
"resolved": "https://registry.npmjs.org/vue/-/vue-2.6.14.tgz",
"integrity": "sha512-x2284lgYvjOMj3Za7kqzRcUSxBboHqtgRE2zlos1qWaOye5yUmHn42LB1250NJBLRwEcdrB0JRwyPTEPhfQjiQ=="
},
"node_modules/vue-gravatar": {
"version": "1.4.1",
"resolved": "https://registry.npmjs.org/vue-gravatar/-/vue-gravatar-1.4.1.tgz",
"integrity": "sha512-pwfHdXPQ7hdB0UoNGDgSun+Mrx0umk3PruLsiqf1lKTvmB5KwfYhxw/l9m1JhR4vuknGl+THc/+bq1UIiahTUQ==",
"dependencies": {
"md5": "^2.2.1"
}
},
"node_modules/vue-hot-reload-api": {
"version": "2.3.4",
"resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",
......@@ -15730,8 +15736,7 @@
"charenc": {
"version": "0.0.2",
"resolved": "https://registry.npmjs.org/charenc/-/charenc-0.0.2.tgz",
"integrity": "sha1-wKHS86cJLgN3S/qD8UwPxXkKhmc=",
"dev": true
"integrity": "sha1-wKHS86cJLgN3S/qD8UwPxXkKhmc="
},
"child_process": {
"version": "1.0.2",
......@@ -16149,8 +16154,7 @@
"crypt": {
"version": "0.0.2",
"resolved": "https://registry.npmjs.org/crypt/-/crypt-0.0.2.tgz",
"integrity": "sha1-iNf/fsDfuG9xPch7u0LQRNPmxBs=",
"dev": true
"integrity": "sha1-iNf/fsDfuG9xPch7u0LQRNPmxBs="
},
"crypto-browserify": {
"version": "3.12.0",
......@@ -17911,8 +17915,7 @@
"is-buffer": {
"version": "1.1.6",
"resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
"integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==",
"dev": true
"integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w=="
},
"is-core-module": {
"version": "2.8.1",
......@@ -18540,7 +18543,6 @@
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/md5/-/md5-2.3.0.tgz",
"integrity": "sha512-T1GITYmFaKuO91vxyoQMFETst+O71VUPEU3ze5GNzDm0OWdP8v1ziTaAEPUr/3kLsY3Sftgz242A1SetQiDL7g==",
"dev": true,
"requires": {
"charenc": "0.0.2",
"crypt": "0.0.2",
......@@ -18750,9 +18752,9 @@
}
},
"minimist": {
"version": "1.2.5",
"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
"integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw=="
"version": "1.2.6",
"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.6.tgz",
"integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q=="
},
"minipass": {
"version": "2.9.0",
......@@ -18860,9 +18862,9 @@
"optional": true
},
"node-forge": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/node-forge/-/node-forge-1.2.1.tgz",
"integrity": "sha512-Fcvtbb+zBcZXbTTVwqGA5W+MKBj56UjVRevvchv5XrcyXbmNdesfZL37nlcWOfpgHhgmxApw3tQbTr4CqNmX4w==",
"version": "1.3.1",
"resolved": "https://registry.npmjs.org/node-forge/-/node-forge-1.3.1.tgz",
"integrity": "sha512-dPEtOeMvF9VMcYV/1Wb8CPoVAXtp6MKMlcbAt4ddqmGqUJ6fQZFXkNZNkNlfevtNkGtaSoXf/vNNNSvgrdXwtA==",
"dev": true
},
"node-gyp": {
......@@ -20522,9 +20524,9 @@
},
"dependencies": {
"ansi-regex": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
"integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg=="
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.1.tgz",
"integrity": "sha512-ILlv4k/3f6vfQ4OoP2AGvirOktlQ98ZEL1k9FaQjxa3L1abBgbuTDAdPOpvbGncC0BTVQrl+OM8xZGK6tWXt7g=="
},
"camelcase": {
"version": "5.3.1",
......@@ -21655,6 +21657,14 @@
"resolved": "https://registry.npmjs.org/vue/-/vue-2.6.14.tgz",
"integrity": "sha512-x2284lgYvjOMj3Za7kqzRcUSxBboHqtgRE2zlos1qWaOye5yUmHn42LB1250NJBLRwEcdrB0JRwyPTEPhfQjiQ=="
},
"vue-gravatar": {
"version": "1.4.1",
"resolved": "https://registry.npmjs.org/vue-gravatar/-/vue-gravatar-1.4.1.tgz",
"integrity": "sha512-pwfHdXPQ7hdB0UoNGDgSun+Mrx0umk3PruLsiqf1lKTvmB5KwfYhxw/l9m1JhR4vuknGl+THc/+bq1UIiahTUQ==",
"requires": {
"md5": "^2.2.1"
}
},
"vue-hot-reload-api": {
"version": "2.3.4",
"resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",
......
resources/js/app.js
View file @ cad5a6d5
......@@ -306,123 +306,6 @@ window.app = new Vue({
togglePersonModal() {
this.$store.dispatch("togglePersonModal");
},
toggleModal(id = "") {
const body = document.querySelector("body");
const modal = document.querySelector(".modal");
modal.classList.toggle("opacity-0");
modal.classList.toggle("pointer-events-none");
body.classList.toggle("modal-active");
if (id != "" && id != this.interview.study) {
this.interview.url = "";
this.$forceUpdate();
}
if (id != "") {
this.interview.study = id;
}
},
createPublicUrl() {
let self = this;
axios
.post("interview/publicurl/create", {
study: this.interview.study,
name: this.interview.name,
})
.then((response) => {
// if set to read set background different
self.$buefy.snackbar.open(response.data.message);
self.interview.url = response.data.url;
self.$forceUpdate();
})
.catch(function (error) {
console.log(error);
self.$buefy.snackbar.open(
"There it was an error during the request - refresh page and try again"
);
});
},
confirmduplicate: function (id, name) {
let self = this;
let confirmDelete = this.$buefy.dialog.confirm({
title: self.trans("Confirm Duplicate"),
message:
self.trans('Do you want to duplicate the study "') +
name +
'" ?',
cancelText: self.trans("Cancel"),
confirmText: self.trans("Yes Duplicate Study"),
hasIcon: true,
type: "is-warning",
onConfirm: () => this.duplicatestudy(id),
});
},
duplicatestudy: function (id) {
this.loading = true;
this.message = "";
let self = this;
axios
.get("studies/" + id + "/duplicate")
.then((response) => {
setTimeout(function () {
self.loading = false;
self.$buefy.snackbar.open(
self.trans("Study duplicated")
);
window.location.reload();
}, 500);
})
.catch(function (error) {
console.log(error);
self.loading = false;
self.$buefy.snackbar.open(
"There it was an error during the request - refresh page and try again"
);
});
},
confirmdelete: function (id, name) {
let self = this;
let confirmDelete = this.$buefy.dialog.confirm({
title: "Confirm Delete",
message:
`<div class="bg-red-600 p-2 text-white text-center">` +
self.trans("You are about to delete the study") +
`<br><span class="uppercase">` +
name +
`</span><br>` +
self.trans("and all its content?") +
`<br><span class="has-text-weight-bold">` +
self.trans("Continue?") +
`</span></div>`,
cancelText: self.trans("Cancel"),
confirmText: self.trans("YES \n Delete Study"),
hasIcon: true,
type: "is-danger",
onConfirm: () => this.deletestudy(id),
});
},
deletestudy: function (id) {
this.loading = true;
this.message = "";
let self = this;
axios
.delete("studies/" + id, { data: id })
.then((response) => {
setTimeout(function () {
self.loading = false;
self.$buefy.snackbar.open(self.trans("Study deleted"));
window.location.reload();
}, 500);
})
.catch(function (error) {
self.loading = false;
self.$buefy.snackbar.open(error.response.data);
});
},
toggleCardsWindow: function () {
store.commit("updateToggleCards", !this.toggleCards);
},
......
resources/js/components.js
View file @ cad5a6d5
import vSelect from "vue-select";
import Gravatar from "vue-gravatar";
Vue.component("v-select", vSelect);
Vue.component(
"new-interview",
......@@ -41,3 +43,5 @@ Vue.component(
"notification-bell",
require("./components/notificationBell.vue").default
);
Vue.component("v-gravatar", Gravatar);
Vue.component("studies-list", require("./components/studieslist.vue").default);
resources/js/components/newstudy.vue
View file @ cad5a6d5
......@@ -302,7 +302,38 @@
<div
v-if="selectedSorting !== 3"
class="w-full">
<div
class="custom-number-input" v-if="selectedSorting === 2">
<label
class="w-full text-sm font-semibold text-gray-700">{{
trans('Number of Sections') + ' (2-6)'
}}
</label>
<div
class="relative flex flex-row w-full h-10 mt-1 bg-transparent rounded-lg">
<button
class="w-20 h-full text-gray-600 bg-gray-300 rounded-l outline-none cursor-pointer hover:text-gray-700 hover:bg-gray-400"
@click.prevent="(sorting.sectionNumber >= 3) ? sorting.sectionNumber-- : sorting.sectionNumber">
<span
class="m-auto text-2xl font-thin">−</span>
</button>
<input
id="numberOfSections"
v-model="sorting.sectionNumber"
class="flex items-center w-full font-semibold text-center text-gray-700 bg-white outline-none focus:outline-none text-md hover:text-black focus:text-black md:text-basecursor-default"
max="8"
min="0"
name="number-of-sections"
type="number"
value="0"></input>
<button
class="w-20 h-full text-gray-600 bg-gray-300 rounded-r cursor-pointer hover:text-gray-700 hover:bg-gray-400"
@click.prevent="(sorting.sectionNumber <= 5) ? sorting.sectionNumber++ : sorting.sectionNumber">
<span
class="m-auto text-2xl font-thin">+</span>
</button>
</div>
</div>
<div
class="custom-number-input" v-if="selectedSorting === 1">
......@@ -552,96 +583,52 @@
<div
v-if="selectedSorting === 2"
class="w-2/3 ml-2">
<div
class="block w-1/3 mb-2 custom-number-input">
<label
class="w-full text-sm font-semibold text-gray-700">{{
trans('Number of Sections') + ' (2-6)'
}}
</label>
<div
class="relative flex flex-row w-full h-10 mt-1 bg-transparent rounded-lg">
<button
class="w-20 h-full text-gray-600 bg-gray-300 rounded-l outline-none cursor-pointer hover:text-gray-700 hover:bg-gray-400"
@click.prevent="(sorting.sectionNumber >= 3) ? sorting.sectionNumber-- : sorting.sectionNumber">
<span
class="m-auto text-2xl font-thin">−</span>
</button>
<input
id="numberOfSections"
v-model="sorting.sectionNumber"
class="flex items-center w-full font-semibold text-center text-gray-700 bg-white outline-none focus:outline-none text-md hover:text-black focus:text-black md:text-basecursor-default"
max="8"
min="0"
name="number-of-sections"
type="number"
value="0"></input>
<button
class="w-20 h-full text-gray-600 bg-gray-300 rounded-r cursor-pointer hover:text-gray-700 hover:bg-gray-400"
@click.prevent="(sorting.sectionNumber <= 5) ? sorting.sectionNumber++ : sorting.sectionNumber">
<span
class="m-auto text-2xl font-thin">+</span>
</button>
</div>
</div>
<div
class="block w-full">
<label
class="label">{{
class="font-medium text-gray-700">{{
trans('Label in the center of the sorting')
}}
*
(1-3)</label>
<input
v-model="sorting.centerLabel"
:class="response.indexOf(errormessages.centerLabel) > -1 ? 'bg-gray-200 focus:outline-none focus:ring border border-gray-300 py-2 px-4 block w-full appearance-none leading-normal inline border-red-500': 'bg-gray-200 focus:outline-none focus:ring border border-gray-300 py-2 px-4 block w-full appearance-none leading-normal inline'"
:class="response.indexOf(errormessages.centerLabel) > -1 ? 'shadow-sm focus:ring-blue-500 focus:border-blue-700 block w-full sm:text-sm rounded-md border-red-500': 'shadow-sm focus:ring-blue-500 focus:border-blue-700 block w-full sm:text-sm border-gray-300 rounded-md'"
maxlength="3"
type="text">
</div>
<div
class="w-full">
<div class="relative flex items-start my-2">
<div class="flex items-center h-5">
<input v-model="sorting.casualcolors" id="comments" aria-describedby="comments-description" name="comments" type="checkbox" class="w-4 h-4 text-blue-500 border-gray-300 rounded focus:ring-blue-700">
</div>
<div class="ml-3 text-sm">
<label for="comments" class="font-medium text-gray-700">{{trans('Use casual colors')}}</label>
</div>
</div>
<label
class="inline label">{{
class="mb-2">{{
trans('Name of the sections')
}}
*</label>
<div
class="mb-6 md:flex md:items-center">
<div
class="md:w-1/3"></div>
<label
class="block font-bold md:w-2/3">
<input
v-model="sorting.casualcolors"
class="mr-2 leading-tight"
type="checkbox">
<span
class="text-xs">
{{
trans('Use casual colors')
}}
</span>
</label>
</div>
<span
v-for="(section,index) in sorting.sections"
class="relative block">
v-for="(section,index) in sorting.sections" :key="index"
class="relative flex flex-wrap">
<input
:key="index"
v-model="sorting.sections[index].name"
:class="response.indexOf(errormessages.centerLabel) > -1 ? 'bg-gray-200 focus:outline-none focus:ring border border-gray-300 py-2 px-4 block w-2/3 appearance-none leading-normal inline border-red-500': 'bg-gray-200 border-gray-300 focus:outline-none focus:ring border py-2 px-4 block w-2/3 appearance-none leading-normal inline'"
:class="response.indexOf(errormessages.centerLabel) > -1 ? 'my-2 px-2 w-1/3 overflow-hidden shadow-sm focus:ring-blue-500 focus:border-blue-700 block sm:text-sm rounded-md border-red-500': 'my-2 px-2 w-1/3 overflow-hidden shadow-sm focus:ring-blue-500 focus:border-blue-700 block sm:text-sm border-gray-300 rounded-md'"
maxlength="20"
type="text">
<div
class="relative inline-block w-1/4">
<v-select
:disabled="sorting.casualcolors"
:options="colors"
:value="sorting.sections[index].color"
class="text-xs bg-gray-200 border-gray-300 "
class="w-1/3 px-2 pl-3 pr-10 mt-2 text-base border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-700 sm:text-sm"
@input="color => updateSectionColor(index,color)"
>
<template
......@@ -657,17 +644,15 @@
</v-select>
</div>
<div
v-if="sorting.sections[index].color.length > 0"
:style="'background-color: '+sorting.sections[index].color+';color: '+sorting.sections[index].color"
class="inline w-full">a</div>
</span>
class="w-1/4 px-2 my-2 overflow-hidden"></div>
</div>
</div>
</div>
</div>
</div>
<div
v-if="selectedSorting === 3"
......@@ -719,7 +704,7 @@
<div
class="flex flex-row">
<div
v-for="(block,cindex) in column"
v-for="(block,cindex) in column" :key="cindex"
v-if="cindex > 1"
class="ml-2 bg-gray-900 lg:w-16 md:w-8 sm:w-4"
></div>
......@@ -734,13 +719,24 @@
v-for="(t,index) in sorting.tokens"
:key="index"
class="relative flex items-center justify-center w-1/4 h-full overflow-visible bg-grey-light sm:my-1 sm:px-1">
<div class="absolute top-0 right-0 z-50 flex justify-center w-6 h-6 bg-red-300 rounded-full cursor-pointer select-none hover:bg-red-600 hover:text-white"
@click="deleteToken(index)"
>
x
</div>
<div
class="w-full p-2 bg-white rounded shadow hover:shadow-md">
<div class="bg-blue-600">
<div class="px-3 py-2 mx-auto max-w-7xl sm:px-6 lg:px-8">
<div class="flex flex-wrap items-center justify-end">
<button @click="deleteToken(index)" type="button" class="flex -mr-1 rounded-md hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-white sm:-mr-2">
<svg class="w-6 h-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
</div>
<div
class="w-full mx-auto token-img">
<img
......@@ -1320,7 +1316,7 @@ export default {
'#CC1F1A', '#DE751F', '#F2D024', '#1F9D55', '#38A89D', '#2779BD', '#5661B3', '#794ACF', '#EB5286',
],
sorting_preview: false,
openTab: 1,
openTab: 2,
inputLength: {
studyname: 80, short_description: 250, author: 250, sorting_description: 250,
},
......
resources/js/components/publicurllist.vue
View file @ cad5a6d5
This diff is collapsed.
resources/js/components/studieslist.vue 0 → 100644
View file @ cad5a6d5
<template>
<div>
<div
class="pt-4 pb-4 pl-4 pr-6 border border-gray-200 sm:pl-6 lg:pl-8 xl:pl-6 xl:pt-6 xl:border-t-0"
>
<div class="flex items-start">
<h1 class="flex-1 text-lg font-medium">
{{ trans("Studies") }}
</h1>
<div class="flex justify-center flex-1">
<div class="w-full px-2 lg:px-6">
<label for="search" class="sr-only">{{
trans("Search Studies")
}}</label>
<div
class="relative text-indigo-200 focus-within:text-gray-400"
>
<div
class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none"
>
<!-- Heroicon name: solid/search -->
<svg
class="w-5 h-5"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
clip-rule="evenodd"
/>
</svg>
</div>
<input
type="search"
id="search"
name="search"
v-model="search"
class="block w-full py-2 pl-10 pr-3 leading-5 text-white placeholder-blue-200 bg-white border border-transparent rounded-md focus:outline-none focus:bg-white focus:ring-0 focus:placeholder-gray-400 focus:text-gray-900 sm:text-sm"
:placeholder="trans('Search Studies')"
/>
</div>
</div>
</div>
</div>
</div>
<div
class="w-1/4 border-2 border-gray-900 border-solid"
v-for="(study, index) in filteredList"
:key="index"
>
<div
class="w-full text-center bg-gray-200 sm:text-xs md:text-sm lg:text-xs xl:text-xl"
>
<h2
class="px-2 text-2xl font-extrabold text-blue-600 break-words truncate"
>