forked from kompetenzinventar/ki-frontend
improve profile page #36
This commit is contained in:
parent
016a1bd959
commit
6ecf80f34c
GPG Key ID:
34F0524D4DA694A1
|
|
@ -21,6 +21,7 @@
|
|||
"eslint-plugin-vue": "^7.0.0",
|
||||
"sass": "^1.37.5",
|
||||
"sass-loader": "^10.2.0",
|
||||
"v-tooltip": "^4.0.0-alpha.1",
|
||||
"vue": "^3.0.0",
|
||||
"vue-router": "^4.0.0-0",
|
||||
"vuex": "^4.0.2"
|
||||
|
|
@ -1215,7 +1216,6 @@
|
|||
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.10.1.tgz",
|
||||
"integrity": "sha512-HnUhk1Sy9IuKrxEMdIRCxpIqPw6BFsbYSEUO9p/hNw5sMld/+3OLMWQP80F8/db9qsv3qUjs7ZR5bS/R+iinXw==",
|
||||
"dev": true,
|
||||
"peer": true,
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/popperjs"
|
||||
|
|
@ -13008,6 +13008,19 @@
|
|||
"uuid": "bin/uuid"
|
||||
}
|
||||
},
|
||||
"node_modules/v-tooltip": {
|
||||
"version": "4.0.0-alpha.1",
|
||||
"resolved": "https://registry.npmjs.org/v-tooltip/-/v-tooltip-4.0.0-alpha.1.tgz",
|
||||
"integrity": "sha512-TTNLJ/IVyoburxW0M3gxHhRb+d18xbozI5c0q2LCqIw4YUZzLKCG0ufx72d+j/1Xkqam9kDNHZChZq4KfsVpvw==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@popperjs/core": "^2.6.0",
|
||||
"vue-resize": "^2.0.0-alpha.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"vue": "^3.0.11"
|
||||
}
|
||||
},
|
||||
"node_modules/v8-compile-cache": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npm.taobao.org/v8-compile-cache/download/v8-compile-cache-2.3.0.tgz?cache=0&sync_timestamp=1614993892777&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fv8-compile-cache%2Fdownload%2Fv8-compile-cache-2.3.0.tgz",
|
||||
|
|
@ -13225,6 +13238,15 @@
|
|||
"integrity": "sha1-M7QHd3VMZDJXPBIMw4CLvRDUfwQ=",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/vue-resize": {
|
||||
"version": "2.0.0-alpha.1",
|
||||
"resolved": "https://registry.npmjs.org/vue-resize/-/vue-resize-2.0.0-alpha.1.tgz",
|
||||
"integrity": "sha512-7+iqOueLU7uc9NrMfrzbG8hwMqchfVfSzpVlCMeJQe4pyibqyoifDNbKTZvwxZKDvGkB+PdFeKvnGZMoEb8esg==",
|
||||
"dev": true,
|
||||
"peerDependencies": {
|
||||
"vue": "^3.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/vue-router": {
|
||||
"version": "4.0.8",
|
||||
"resolved": "https://registry.nlark.com/vue-router/download/vue-router-4.0.8.tgz",
|
||||
|
|
@ -15574,8 +15596,7 @@
|
|||
"version": "2.10.1",
|
||||
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.10.1.tgz",
|
||||
"integrity": "sha512-HnUhk1Sy9IuKrxEMdIRCxpIqPw6BFsbYSEUO9p/hNw5sMld/+3OLMWQP80F8/db9qsv3qUjs7ZR5bS/R+iinXw==",
|
||||
"dev": true,
|
||||
"peer": true
|
||||
"dev": true
|
||||
},
|
||||
"@soda/friendly-errors-webpack-plugin": {
|
||||
"version": "1.8.0",
|
||||
|
|
@ -25577,6 +25598,16 @@
|
|||
"integrity": "sha1-sj5DWK+oogL+ehAK8fX4g/AgB+4=",
|
||||
"dev": true
|
||||
},
|
||||
"v-tooltip": {
|
||||
"version": "4.0.0-alpha.1",
|
||||
"resolved": "https://registry.npmjs.org/v-tooltip/-/v-tooltip-4.0.0-alpha.1.tgz",
|
||||
"integrity": "sha512-TTNLJ/IVyoburxW0M3gxHhRb+d18xbozI5c0q2LCqIw4YUZzLKCG0ufx72d+j/1Xkqam9kDNHZChZq4KfsVpvw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@popperjs/core": "^2.6.0",
|
||||
"vue-resize": "^2.0.0-alpha.1"
|
||||
}
|
||||
},
|
||||
"v8-compile-cache": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npm.taobao.org/v8-compile-cache/download/v8-compile-cache-2.3.0.tgz?cache=0&sync_timestamp=1614993892777&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fv8-compile-cache%2Fdownload%2Fv8-compile-cache-2.3.0.tgz",
|
||||
|
|
@ -25769,6 +25800,13 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"vue-resize": {
|
||||
"version": "2.0.0-alpha.1",
|
||||
"resolved": "https://registry.npmjs.org/vue-resize/-/vue-resize-2.0.0-alpha.1.tgz",
|
||||
"integrity": "sha512-7+iqOueLU7uc9NrMfrzbG8hwMqchfVfSzpVlCMeJQe4pyibqyoifDNbKTZvwxZKDvGkB+PdFeKvnGZMoEb8esg==",
|
||||
"dev": true,
|
||||
"requires": {}
|
||||
},
|
||||
"vue-router": {
|
||||
"version": "4.0.8",
|
||||
"resolved": "https://registry.nlark.com/vue-router/download/vue-router-4.0.8.tgz",
|
||||
|
|
|
|||
|
|
@ -20,6 +20,7 @@
|
|||
"eslint-plugin-vue": "^7.0.0",
|
||||
"sass": "^1.37.5",
|
||||
"sass-loader": "^10.2.0",
|
||||
"v-tooltip": "^4.0.0-alpha.1",
|
||||
"vue": "^3.0.0",
|
||||
"vue-router": "^4.0.0-0",
|
||||
"vuex": "^4.0.2"
|
||||
|
|
|
|||
|
|
@ -9,25 +9,42 @@ SPDX-License-Identifier: AGPL-3.0-or-later
|
|||
:values="values"
|
||||
:type="type"
|
||||
:editable="true"
|
||||
:show-secondary="showSecondary"
|
||||
@remove-value="removeValue($event)"
|
||||
@update-values="this.$emit('update-values', this.values)"
|
||||
>
|
||||
</profile-list>
|
||||
<div v-bind="$attrs" class="card-body">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="col-12 col-md-4 col-lg-3 col-xl-2">
|
||||
<div class="form-control-plaintext form-control-sm">Eintrag hinzufügen:</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-6">
|
||||
<input
|
||||
autocomplete="off"
|
||||
type="text"
|
||||
class="form-control"
|
||||
class="form-control form-control-sm"
|
||||
id="searchText"
|
||||
maxlength="25"
|
||||
:placeholder="placeholder"
|
||||
v-model="searchText"
|
||||
@input="search()"
|
||||
@keyup.enter="addResult()"
|
||||
/>
|
||||
<div v-if="searchResults">
|
||||
<ul class="list-group">
|
||||
<li
|
||||
class="list-group-item"
|
||||
v-for="result in searchResults"
|
||||
:key="result.id"
|
||||
@click="addResult(result)"
|
||||
>
|
||||
{{ result.name }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="col-md-2">
|
||||
<button
|
||||
v-if="searchText != ''"
|
||||
type="button"
|
||||
|
|
@ -40,18 +57,6 @@ SPDX-License-Identifier: AGPL-3.0-or-later
|
|||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="searchResults">
|
||||
<ul class="list-group">
|
||||
<li
|
||||
class="list-group-item"
|
||||
v-for="result in searchResults"
|
||||
:key="result.id"
|
||||
@click="addResult(result)"
|
||||
>
|
||||
{{ result.name }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
|
@ -76,6 +81,14 @@ export default {
|
|||
values: {
|
||||
type: Array,
|
||||
},
|
||||
showSecondary: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
|
|||
:key="value.id"
|
||||
>
|
||||
<div class="row">
|
||||
<div class="col d-flex align-items-center">
|
||||
<div class="col-12 col-md-5 d-flex align-items-center">
|
||||
<div
|
||||
class="list-icon me-1"
|
||||
:style="{ backgroundImage: `url('${iconBaseUrl + value[type].icon_url}'` }"
|
||||
|
|
@ -22,70 +22,49 @@ SPDX-License-Identifier: AGPL-3.0-or-later
|
|||
{{ value[type].name }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div v-if="type == 'skill'">
|
||||
<div v-if="editable">
|
||||
<select
|
||||
v-if="editableValues[valueKey]"
|
||||
class="form-select form-select-sm"
|
||||
aria-label="Selektiere dein Level"
|
||||
v-model="editableValues[valueKey].level"
|
||||
@input="$emit('update-values', editableValues)"
|
||||
<div class="col-10 col-md-5">
|
||||
<div v-if="type == 'skill' && showSecondary">
|
||||
<select
|
||||
class="form-select form-select-sm"
|
||||
aria-label="Selektiere dein Level"
|
||||
v-model="editableValues[valueKey].level"
|
||||
@input="$emit('update-values', editableValues)"
|
||||
>
|
||||
<option
|
||||
v-for="(value, key) in levelSelection"
|
||||
:value="key"
|
||||
:key="key"
|
||||
>
|
||||
<option
|
||||
v-for="(value, key) in levelSelection"
|
||||
:value="key"
|
||||
:key="key"
|
||||
>
|
||||
{{ value.long || value }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div v-else><span v-if="value.level">({{ levelSelection[value.level] }})</span></div>
|
||||
{{ value.long || value }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div v-else-if="type == 'language'">
|
||||
<div v-if="editable">
|
||||
<div v-if="editable">
|
||||
<select
|
||||
v-if="editableValues[valueKey]"
|
||||
class="form-select form-select-sm"
|
||||
aria-label="Selektiere dein Level"
|
||||
v-model="editableValues[valueKey].level"
|
||||
@input="$emit('update-values', editableValues)"
|
||||
>
|
||||
<option
|
||||
v-for="(value, key) in languagesSelection"
|
||||
:value="key"
|
||||
:key="key"
|
||||
>
|
||||
{{ value }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else><span v-if="value.level">({{languagesSelection[value.level]}})</span></div>
|
||||
<select
|
||||
class="form-select form-select-sm"
|
||||
aria-label="Selektiere dein Level"
|
||||
v-model="editableValues[valueKey].level"
|
||||
@input="$emit('update-values', editableValues)"
|
||||
>
|
||||
<option
|
||||
v-for="(value, key) in languagesSelection"
|
||||
:value="key"
|
||||
:key="key"
|
||||
>
|
||||
{{ value }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div v-else-if="type == 'contacttype'">
|
||||
<div v-if="editable">
|
||||
<input
|
||||
class="form-control form-control-sm"
|
||||
maxlength="200"
|
||||
v-model="editableValues[valueKey].content"
|
||||
/>
|
||||
</div>
|
||||
<div v-else>
|
||||
<span v-if="value[type].name === 'E-Mail'">
|
||||
<a :href="`mailto:${value.content}`">{{ value.content }}</a>
|
||||
</span>
|
||||
<span v-else>
|
||||
{{ value.content }}
|
||||
</span>
|
||||
</div>
|
||||
<input
|
||||
class="form-control form-control-sm"
|
||||
maxlength="200"
|
||||
v-model="editableValues[valueKey].content"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col text-end">
|
||||
<div class="col-2 text-end">
|
||||
<button
|
||||
v-if="editable"
|
||||
type="button"
|
||||
class="btn btn-sm btn-light"
|
||||
aria-label="Löschen"
|
||||
|
|
@ -112,10 +91,10 @@ export default {
|
|||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
editable: {
|
||||
showSecondary: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
default: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
|
|||
|
||||
<template>
|
||||
<div class="skill rounded me-2">
|
||||
<div class="skill__left px-2">
|
||||
<div class="skill__left p-2">
|
||||
<div class="skill__icon" :style="{ backgroundImage: iconUrl }"></div>
|
||||
</div>
|
||||
<div class="skill__right d-flex align-items-center rounded-end px-2">
|
||||
|
|
|
|||
|
|
@ -6,12 +6,15 @@ import { createApp } from 'vue/dist/vue.esm-bundler'
|
|||
import App from './App.vue'
|
||||
import router from './router'
|
||||
import store from '@/store'
|
||||
import VTooltipPlugin from 'v-tooltip'
|
||||
|
||||
import 'v-tooltip/dist/v-tooltip.css'
|
||||
import 'bootstrap-icons/font/bootstrap-icons.css'
|
||||
import './assets/global.scss'
|
||||
|
||||
const app = createApp(App)
|
||||
|
||||
app.use(VTooltipPlugin)
|
||||
app.use(router)
|
||||
app.use(store)
|
||||
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
|
|||
<div class="col-6 mb-3">
|
||||
<label class="form-label">
|
||||
Pronomen
|
||||
<i class="bi bi-info-circle" title="ToDo: Tooltip"></i>
|
||||
<i class="bi bi-info-circle" v-tooltip="pronounsTooltip"></i>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
|
|
@ -60,7 +60,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
|
|||
|
||||
<label class="form-label">Anschrift</label>
|
||||
<div class="row">
|
||||
<div class="col-4">
|
||||
<div class="col-12 col-md-4 mb-3 mb-md-0">
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
|
|
@ -70,7 +70,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
|
|||
v-model="profile.address.postcode"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="col-12 col-md-4 mb-3 mb-md-0">
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
|
|
@ -80,7 +80,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
|
|||
v-model="profile.address.city"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="col-12 col-md-4">
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
|
|
@ -98,6 +98,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
|
|||
<auto-complete
|
||||
type="skill"
|
||||
:values="profile.skills"
|
||||
placeholder="z.B. Python, JavaScript, Linux"
|
||||
@update-values="profile.skills = $event"
|
||||
></auto-complete>
|
||||
</template>
|
||||
|
|
@ -108,6 +109,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
|
|||
<auto-complete
|
||||
type="language"
|
||||
:values="profile.languages"
|
||||
placeholder="z.B. Deutsch, Englisch, Französisch"
|
||||
@update-values="profile.languages = $event"
|
||||
></auto-complete>
|
||||
</template>
|
||||
|
|
@ -119,6 +121,8 @@ SPDX-License-Identifier: AGPL-3.0-or-later
|
|||
type="skill"
|
||||
label="Ich suche"
|
||||
:values="profile.searchtopics"
|
||||
:showSecondary="false"
|
||||
placeholder="z.B. Python, JavaScript, Linux"
|
||||
@update-values="profile.searchtopics = $event"
|
||||
></auto-complete>
|
||||
</template>
|
||||
|
|
@ -153,6 +157,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
|
|||
class="form-control"
|
||||
id="availability"
|
||||
rows="3"
|
||||
maxlength="4000"
|
||||
v-model="profile.availability_text"
|
||||
></textarea>
|
||||
</Section>
|
||||
|
|
@ -162,6 +167,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
|
|||
<auto-complete
|
||||
type="contacttype"
|
||||
:values="profile.contacts"
|
||||
placeholder="z.B. E-Mail, Mobiltelefon, Matrix, Web"
|
||||
@update-values="profile.contacts = $event"
|
||||
></auto-complete>
|
||||
</template>
|
||||
|
|
@ -253,6 +259,10 @@ export default {
|
|||
searchtopics: [],
|
||||
contacts: [],
|
||||
},
|
||||
pronounsTooltip: {
|
||||
content: 'Wie möchtest du angesprochen werden?<br>Zum Beispiel "er/ihn" oder "sie/ihre".',
|
||||
html: true
|
||||
}
|
||||
};
|
||||
},
|
||||
async created() {
|
||||
|
|
|
|||
Loading…
Reference in New Issue