Skip to content

Commit

Permalink
Migrate WalkTeamMembersField.vue from bootstrap-vue to vuetify 2 #248
Browse files Browse the repository at this point in the history
  • Loading branch information
@robertfausk
robertfausk committed Jan 2, 2025
1 parent 2b9602c commit 84cda78
Show file tree
Hide file tree
Showing 3 changed files with 96 additions and 80 deletions.
4 changes: 4 additions & 0 deletions web/assets/css/vuetify-compatibility.scss
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
.text-disabled {
color: rgba(0,0,0,.38) !important;
}

.v-btn {
text-transform: none !important;
}
Expand Down
157 changes: 83 additions & 74 deletions web/assets/js/components/Common/Walk/WalkTeamMembersField.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ const value = computed({
const selectedWalkCreator = ref<ComponentPublicInstance<HTMLInputElement>[]>();
watch(() => props.walkCreator, (newValue: Props['walkCreator']) => {
watch(() => props.walkCreator, (newValue: User | undefined) => {
if (undefined === newValue) {
return;
}
Expand Down Expand Up @@ -69,79 +69,88 @@ const hasDisabledUser = computed(() => {
</script>

<template>
<b-form-group
:label="label"
:description="description"
v-slot="{ ariaDescribedby }"
content-cols="12"
label-cols="12"
content-cols-lg="10"
label-cols-lg="2"
>
<div
class="d-flex flex-wrap"
data-test="users"
>
<template
v-for="user in enabledUsers"
<v-row class="my-0">
<v-col cols="12">
<v-card
outlined
>
<b-form-checkbox
v-if="user.isEnabled"
:aria-describedby="ariaDescribedby"
name="users"
switch
:disabled="isLoading || (walkCreator && walkCreator['@id'] === user['@id'])"
v-model="value"
:key="user['@id']"
:value="user['@id']"
:data-test="`walkTeamMember-${user.username}`"
class="min-w-[250px]"
ref="selectedWalkCreator"
>
{{ user.username }}
<template v-if="walkCreator && walkCreator['@id'] === user['@id']"> (Rundenersteller)</template>
</b-form-checkbox>
</template>
<hr
v-if="hasDisabledUser"
class="d-block w-100 my-1 mr-2"
>
<template
v-for="user in disabledUsers"
>
<b-form-checkbox
v-model="value"
:key="user['@id']"
:value="user['@id']"
:aria-describedby="ariaDescribedby"
name="users"
switch
:disabled="isLoading || (walkCreator && walkCreator['@id'] === user['@id'])"
:data-test="`walkTeamMember-${user.username}`"
ref="selectedWalkCreator"
class="min-w-[250px] text-muted"
>
<span
class="text-muted d-inline-flex align-items-center"
>
{{ user.username }}
<span>
<template
v-if="walkCreator && walkCreator['@id'] === user['@id']"
>
(Rundenersteller)
<v-card-subtitle>{{ label }}</v-card-subtitle>
<v-card-text class="mb-0 pb-0">
<div class="d-flex flex-wrap" data-test="users">
<template v-for="user in enabledUsers">
<v-switch
v-if="user.isEnabled"
:aria-describedby="description"
name="users"
dense
:disabled="isLoading || (walkCreator && walkCreator['@id'] === user['@id'])"
v-model="value"
:key="user['@id']"
:value="user['@id']"
:data-test="`walkTeamMember-${user.username}`"
class="min-w-[250px]"
ref="selectedWalkCreator"
:label="user.username"
>
<template v-if="walkCreator && walkCreator['@id'] === user['@id']"> (Rundenersteller)</template>
</v-switch>
</template>
</div>
</v-card-text>
<v-card-text class="py-0">
<v-divider
v-if="hasDisabledUser"
class="d-block w-100 my-1 mr-2"
></v-divider>
</v-card-text>
<v-card-text class="py-0">
<div>
<template v-for="user in disabledUsers">
<v-switch
v-model="value"
:key="user['@id']"
:value="user['@id']"
:aria-describedby="description"
name="users"
dense
:disabled="isLoading || (walkCreator && walkCreator['@id'] === user['@id'])"
:data-test="`walkTeamMember-${user.username}`"
class="min-w-[250px] text-disabled"
>
<template v-slot:label>
<span
class="text-disabled d-inline-flex align-items-center"
title="Account ist aktuell nicht aktiviert."
>
{{ user.username }}
<template v-if="walkCreator && walkCreator['@id'] === user['@id']">
(Rundenersteller)
</template>
<v-icon
v-if="!user.isEnabled"
small
class="ml-1"
>mdi-account-off</v-icon>
</span>
</template>
</span>
<mdicon
v-if="!user.isEnabled"
name="AccountOff"
class="text-muted d-inline-flex align-items-center"
title="Account ist aktuell nicht aktiviert."
size="16"
/>
</span>
</b-form-checkbox>
</template>
</div>
</b-form-group>
</v-switch>
</template>
</div>
<p>{{ description }}</p>
</v-card-text>
</v-card>
</v-col>
</v-row>
</template>

<style scoped>
.blinking {
animation: blinking 1.5s ease-in-out;
}
@keyframes blinking {
0% { opacity: 1; }
50% { opacity: 0; }
100% { opacity: 1; }
}
</style>
15 changes: 9 additions & 6 deletions web/tests/Acceptance/features/walk_create_walkTeamMembers_preset.feature
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,14 @@ Feature: An user can do a walk with preset walkTeamMembers
| email |
| client@gmx.de |
Given the following users exists:
| email | client |
| karl@gmx.de | client@gmx.de |
| pinky@gmx.de | client@gmx.de |
| brain@gmx.de | client@gmx.de |
| email | client | isEnabled |
| karl@gmx.de | client@gmx.de | 1 |
| pinky@gmx.de | client@gmx.de | 1 |
| brain@gmx.de | client@gmx.de | 1 |
| disabled@gmx.de | client@gmx.de | 0 |
Given the following teams exists:
| name | users | ageRanges | client | initialMembersConfig |
| Westhang | karl@gmx.de,pinky@gmx.de,brain@gmx.de | 1-10,3-12, 13 - 90 | client@gmx.de | mitglieder |
| name | users | ageRanges | client | initialMembersConfig |
| Westhang | karl@gmx.de,pinky@gmx.de,brain@gmx.de,disabled@gmx.de | 1-10,3-12, 13 - 90 | client@gmx.de | mitglieder |
Given the following systemic questions exists:
| question | client |
| How old? | client@gmx.de |
Expand Down Expand Up @@ -39,6 +40,7 @@ Feature: An user can do a walk with preset walkTeamMembers
When I enter "Arschkalt" in "Wetter" field

When I click on test element "[email protected]"
When I click on test element "[email protected]"

When I select time "18:50" in time selector "startTimeTime"

Expand Down Expand Up @@ -87,6 +89,7 @@ Feature: An user can do a walk with preset walkTeamMembers
When I enter "Arschkalt" in "Wetter" field
Then I wait for test element "[email protected]" to be selected
Then I wait for test element "[email protected]" to be selected
Then I wait for test element "[email protected]" to be not selected
Then I wait for test element "[email protected]" to be not selected

When I submit Runde beginnen formular
Expand Down

0 comments on commit 84cda78

Please sign in to comment.