krikkert/habitica
1
0
Fork 0
mirror of https://github.com/HabitRPG/habitica.git synced 2025-12-18 15:17:25 +01:00
Code Issues Packages Projects Releases Wiki Activity

still trying to get modal to work

Browse Source
This commit is contained in:
CuriousMagpie
2022-08-02 16:05:41 -04:00
parent 9bee9d0a06
commit 999071a15c
2 changed files with 97 additions and 206 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
website/client/src/components/group-plans/groupPlanCreationModal.vue
View File

@@ -1,10 +1,10 @@
<template>
<div>
<b-modal
id="group-plan-modal"
id="group-plan-creation-modal"
:title="activePage === PAGES.CREATE_GROUP ? 'Create your Group' : 'Select Payment'"
:hide-footer="true"
size="md"
hide-footer="hide-footer"
@hide="onHide()"
>
<div
v-if="activePage === PAGES.CREATE_GROUP"
@@ -95,7 +95,6 @@
</div>
</div>
</b-modal>
</div>
</template>
<style lang="scss" scoped>
@@ -122,11 +121,6 @@
margin-left: .3em;
}
.plus {
width: 100%;
text-align: center;
}
div {
display: inline-block;
}
@@ -142,7 +136,6 @@
<script>
import paymentsMixin from '../../mixins/payments';
import { mapState } from '@/libs/store';
import positiveIcon from '@/assets/svg/positive.svg';
import paymentsButtons from '@/components/payments/buttons/list';
export default {
@@ -154,7 +147,7 @@ export default {
return {
amazonPayments: {},
icons: Object.freeze({
positiveIcon,
// positiveIcon,
}),
PAGES: {
CREATE_GROUP: 'create-group',
@@ -179,22 +172,19 @@ export default {
};
},
computed: {
...mapState({ user: 'user.data' }),
newGroupIsReady () {
return Boolean(this.newGroup.name);
},
upgradingGroup () {
return this.$store.state.upgradingGroup;
},
// @TODO: can we move this to payment mixin?
...mapState({ user: 'user.data' }),
},
mounted () {
this.activePage = this.PAGES.BENEFITS;
this.$store.dispatch('common:setTitle', {
section: this.$t('groupPlans'),
});
console.log('i am mounted');
},
methods: {
changePage (page) {
this.activePage = page;
window.scrollTo(0, 0);
},
createGroup () {
this.changePage(this.PAGES.PAY);
},

111
website/client/src/components/groups/groupPlan.vue
View File

@@ -1,6 +1,7 @@
<template>
<!-- @TODO: Move to group plans folder-->
<div>
<group-plan-creation=modal />
<div>
<div class="header">
<h1 class="text-center">
@@ -114,7 +115,7 @@
<div class="col-12 text-center">
<button
class="btn btn-primary create-group"
@click="launchModal('create')"
@click="launchModal('group-plan-creation-modal')"
>
Create Your New Group
</button>
@@ -153,102 +154,6 @@
</div>
</div>
</div>
<b-modal
id="group-plan-modal"
:title="activePage === PAGES.CREATE_GROUP ? 'Create your Group' : 'Select Payment'"
size="md"
hide-footer="hide-footer"
>
<div
v-if="activePage === PAGES.CREATE_GROUP"
class="col-12"
>
<div class="form-group">
<label
class="control-label"
for="new-group-name"
>Name</label>
<input
id="new-group-name"
v-model="newGroup.name"
class="form-control input-medium option-content"
required="required"
type="text"
placeholder="Name"
>
</div>
<div class="form-group">
<label for="new-group-description">{{ $t('description') }}</label>
<textarea
id="new-group-description"
v-model="newGroup.description"
class="form-control option-content"
cols="3"
:placeholder="$t('description')"
></textarea>
</div>
<div
v-if="type === 'guild'"
class="form-group"
>
<div class="custom-control custom-radio">
<input
v-model="newGroup.privacy"
class="custom-control-input"
type="radio"
name="new-group-privacy"
value="private"
>
<label class="custom-control-label">{{ $t('inviteOnly') }}</label>
</div>
</div>
<div class="form-group">
<div class="custom-control custom-checkbox">
<input
id="create-group-leaderOnlyChallenges-checkbox"
v-model="newGroup.leaderOnly.challenges"
class="custom-control-input"
type="checkbox"
>
<label
class="custom-control-label"
for="create-group-leaderOnlyChallenges-checkbox"
>{{ $t('leaderOnlyChallenges') }}</label>
</div>
</div>
<div
v-if="type === 'party'"
class="form-group"
>
<button
class="btn btn-secondary form-control"
:value="$t('create')"
@click="createGroup()"
></button>
</div>
<div class="form-group">
<button
class="btn btn-primary btn-lg btn-block"
:disabled="!newGroupIsReady"
@click="createGroup()"
>
{{ $t('create') }}
</button>
</div>
</div>
<div
v-if="activePage === PAGES.PAY"
class="col-12"
>
<div class="text-center">
<h3>Choose your payment method</h3>
<payments-buttons
:stripe-fn="() => pay(PAYMENTS.STRIPE)"
:amazon-data="pay(PAYMENTS.AMAZON)"
/>
</div>
</div>
</b-modal>
</div>
</template>
@@ -440,10 +345,12 @@ import paymentsMixin from '../../mixins/payments';
import { mapState } from '@/libs/store';
import positiveIcon from '@/assets/svg/positive.svg';
import paymentsButtons from '@/components/payments/buttons/list';
import groupPlanCreationModal from '../group-plans/groupPlanCreationModal';
export default {
components: {
paymentsButtons,
groupPlanCreationModal,
},
mixins: [paymentsMixin],
data () {
@@ -492,16 +399,10 @@ export default {
},
methods: {
launchModal () {
console.log('hello world');
this.changePage(this.PAGES.CREATE_GROUP);
this.$root.$emit('bv::show::modal', 'group-plan-modal');
this.$root.$emit('bv::show::modal', 'group-plan-creation-modal');
},
// launchModal () {
// this.$root.$on('group-plan-modal') {
// console.log('hello i am a modal');
// this.activePage = page;
// this.$root.$emit('bv::show::modal', 'group-plan-modal');
// };
// },
changePage (page) {
this.activePage = page;
window.scrollTo(0, 0);