html format other components
This commit is contained in:
Matteo Pagliazzi
@@ -1,32 +1,49 @@
|
||||
<template>
|
||||
<div class="row">
|
||||
<challenge-modal @updatedChallenge="updatedChallenge" /><leave-challenge-modal :challenge-id="challenge._id" /><close-challenge-modal
|
||||
<challenge-modal @updatedChallenge="updatedChallenge" />
|
||||
<leave-challenge-modal :challenge-id="challenge._id" />
|
||||
<close-challenge-modal
|
||||
:members="members"
|
||||
:challenge-id="challenge._id"
|
||||
:prize="challenge.prize"
|
||||
/><challenge-member-progress-modal :challenge-id="challenge._id" /><div class="col-12 col-md-8 standard-page">
|
||||
/>
|
||||
<challenge-member-progress-modal :challenge-id="challenge._id" />
|
||||
<div class="col-12 col-md-8 standard-page">
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-6">
|
||||
<h1 v-markdown="challenge.name"></h1><div>
|
||||
<span class="mr-1 ml-0 d-block"><strong v-once>{{ $t('createdBy') }}:</strong><user-link
|
||||
class="mx-1"
|
||||
:user="challenge.leader"
|
||||
/></span><span
|
||||
<h1 v-markdown="challenge.name"></h1>
|
||||
<div>
|
||||
<span class="mr-1 ml-0 d-block">
|
||||
<strong v-once>{{ $t('createdBy') }}:</strong>
|
||||
<user-link
|
||||
class="mx-1"
|
||||
:user="challenge.leader"
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
v-if="challenge.group && challenge.group.name !== 'Tavern'"
|
||||
class="mr-1 ml-0 d-block"
|
||||
><strong v-once>{{ $t(challenge.group.type) }}:</strong><group-link
|
||||
class="mx-1"
|
||||
:group="challenge.group"
|
||||
/></span><!-- @TODO: make challenge.author a variable inside the createdBy string (helps with RTL languages)--><!-- @TODO: Implement in V2 strong.margin-left(v-once).svg-icon.calendar-icon(v-html="icons.calendarIcon")
|
||||
>
|
||||
<strong v-once>{{ $t(challenge.group.type) }}:</strong>
|
||||
<group-link
|
||||
class="mx-1"
|
||||
:group="challenge.group"
|
||||
/>
|
||||
</span>
|
||||
<!-- @TODO: make challenge.author a variable inside the createdBy string (helps with RTL languages)-->
|
||||
<!-- @TODO: Implement in V2 strong.margin-left(v-once).svg-icon.calendar-icon(v-html="icons.calendarIcon")
|
||||
| {{$t('endDate')}}
|
||||
// "endDate": "End Date: <% endDate %>",--><!-- span {{challenge.endDate}}-->
|
||||
</div><div class="tags">
|
||||
// "endDate": "End Date: <% endDate %>",-->
|
||||
<!-- span {{challenge.endDate}}-->
|
||||
</div>
|
||||
<div class="tags">
|
||||
<span
|
||||
v-for="tag in challenge.tags"
|
||||
class="tag"
|
||||
>{{ tag }}</span>
|
||||
</div>
|
||||
</div><div class="col-12 col-md-6 text-right">
|
||||
</div>
|
||||
<div class="col-12 col-md-6 text-right">
|
||||
<div
|
||||
class="box"
|
||||
@click="showMemberModal()"
|
||||
@@ -34,17 +51,22 @@
|
||||
<div
|
||||
class="svg-icon member-icon"
|
||||
v-html="icons.memberIcon"
|
||||
></div>{{ challenge.memberCount }}<div
|
||||
></div>
|
||||
{{ challenge.memberCount }}
|
||||
<div
|
||||
v-once
|
||||
class="details"
|
||||
>
|
||||
{{ $t('participantsTitle') }}
|
||||
</div>
|
||||
</div><div class="box">
|
||||
</div>
|
||||
<div class="box">
|
||||
<div
|
||||
class="svg-icon gem-icon"
|
||||
v-html="icons.gemIcon"
|
||||
></div>{{ challenge.prize }}<div
|
||||
></div>
|
||||
{{ challenge.prize }}
|
||||
<div
|
||||
v-once
|
||||
class="details"
|
||||
>
|
||||
@@ -52,35 +74,44 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><div class="row challenge-actions">
|
||||
</div>
|
||||
<div class="row challenge-actions">
|
||||
<div class="col-12 col-md-6">
|
||||
<strong class="view-progress">{{ $t('viewProgressOf') }}</strong><member-search-dropdown
|
||||
<strong class="view-progress">{{ $t('viewProgressOf') }}</strong>
|
||||
<member-search-dropdown
|
||||
:text="$t('selectParticipant')"
|
||||
:members="members"
|
||||
:challenge-id="challengeId"
|
||||
@member-selected="openMemberProgressModal"
|
||||
/>
|
||||
</div><div class="col-12 col-md-6 text-right">
|
||||
<span v-if="isLeader || isAdmin"><b-dropdown
|
||||
class="create-dropdown"
|
||||
:text="$t('addTaskToChallenge')"
|
||||
:variant="'success'"
|
||||
><b-dropdown-item
|
||||
v-for="type in columns"
|
||||
:key="type"
|
||||
@click="createTask(type)"
|
||||
>{{ $t(type) }}</b-dropdown-item></b-dropdown><task-modal
|
||||
ref="taskModal"
|
||||
:task="workingTask"
|
||||
:purpose="taskFormPurpose"
|
||||
:challenge-id="challengeId"
|
||||
@cancel="cancelTaskModal()"
|
||||
@taskCreated="taskCreated"
|
||||
@taskEdited="taskEdited"
|
||||
@taskDestroyed="taskDestroyed"
|
||||
/></span>
|
||||
</div>
|
||||
</div><div class="row">
|
||||
<div class="col-12 col-md-6 text-right">
|
||||
<span v-if="isLeader || isAdmin">
|
||||
<b-dropdown
|
||||
class="create-dropdown"
|
||||
:text="$t('addTaskToChallenge')"
|
||||
:variant="'success'"
|
||||
>
|
||||
<b-dropdown-item
|
||||
v-for="type in columns"
|
||||
:key="type"
|
||||
@click="createTask(type)"
|
||||
>{{ $t(type) }}</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
<task-modal
|
||||
ref="taskModal"
|
||||
:task="workingTask"
|
||||
:purpose="taskFormPurpose"
|
||||
:challenge-id="challengeId"
|
||||
@cancel="cancelTaskModal()"
|
||||
@taskCreated="taskCreated"
|
||||
@taskEdited="taskEdited"
|
||||
@taskDestroyed="taskDestroyed"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<task-column
|
||||
v-for="column in columns"
|
||||
v-if="tasksByType[column].length > 0"
|
||||
@@ -90,10 +121,11 @@
|
||||
:task-list-override="tasksByType[column]"
|
||||
:show-options="showOptions"
|
||||
@editTask="editTask"
|
||||
@taskDestroyed="taskDestroyed"
|
||||
@taskDestroyed="taskDestroyed"
|
||||
/>
|
||||
</div>
|
||||
</div><div class="col-12 col-md-4 sidebar standard-page">
|
||||
</div>
|
||||
<div class="col-12 col-md-4 sidebar standard-page">
|
||||
<div
|
||||
v-if="canJoin"
|
||||
class="button-container"
|
||||
@@ -105,7 +137,8 @@
|
||||
>
|
||||
{{ $t('joinChallenge') }}
|
||||
</button>
|
||||
</div><div
|
||||
</div>
|
||||
<div
|
||||
v-if="isLeader || isAdmin"
|
||||
class="button-container"
|
||||
>
|
||||
@@ -116,7 +149,8 @@
|
||||
>
|
||||
{{ $t('editChallenge') }}
|
||||
</button>
|
||||
</div><div
|
||||
</div>
|
||||
<div
|
||||
v-if="isLeader || isAdmin"
|
||||
class="button-container"
|
||||
>
|
||||
@@ -127,7 +161,8 @@
|
||||
>
|
||||
{{ $t('clone') }}
|
||||
</button>
|
||||
</div><div
|
||||
</div>
|
||||
<div
|
||||
v-if="isLeader || isAdmin"
|
||||
class="button-container"
|
||||
>
|
||||
@@ -138,7 +173,8 @@
|
||||
>
|
||||
{{ $t('exportChallengeCsv') }}
|
||||
</button>
|
||||
</div><div
|
||||
</div>
|
||||
<div
|
||||
v-if="isLeader || isAdmin"
|
||||
class="button-container"
|
||||
>
|
||||
@@ -149,13 +185,16 @@
|
||||
>
|
||||
{{ $t('endChallenge') }}
|
||||
</button>
|
||||
</div><div>
|
||||
</div>
|
||||
<div>
|
||||
<sidebar-section :title="$t('challengeSummary')">
|
||||
<p v-markdown="challenge.summary"></p>
|
||||
</sidebar-section><sidebar-section :title="$t('challengeDescription')">
|
||||
</sidebar-section>
|
||||
<sidebar-section :title="$t('challengeDescription')">
|
||||
<p v-markdown="challenge.description"></p>
|
||||
</sidebar-section>
|
||||
</div><div
|
||||
</div>
|
||||
<div
|
||||
v-if="isMember"
|
||||
class="text-center"
|
||||
>
|
||||
|
||||
@@ -5,23 +5,30 @@
|
||||
<span
|
||||
class="svg-icon"
|
||||
v-html="icons.gemIcon"
|
||||
></span><span class="value">{{ challenge.prize }}</span>
|
||||
</div><div class="label">
|
||||
></span>
|
||||
<span class="value">{{ challenge.prize }}</span>
|
||||
</div>
|
||||
<div class="label">
|
||||
{{ $t('prize') }}
|
||||
</div>
|
||||
</div><div class="challenge-header">
|
||||
</div>
|
||||
<div class="challenge-header">
|
||||
<router-link :to="{ name: 'challenge', params: { challengeId: challenge._id } }">
|
||||
<h3
|
||||
v-markdown="challenge.name"
|
||||
class="challenge-title"
|
||||
></h3>
|
||||
</router-link><div class="meta-info">
|
||||
</router-link>
|
||||
<div class="meta-info">
|
||||
<div class="member-count">
|
||||
<div
|
||||
class="svg-icon user-icon"
|
||||
v-html="icons.memberIcon"
|
||||
></div><span class="count-label">{{ challenge.memberCount }}</span>
|
||||
</div><div class="divider"></div><div
|
||||
></div>
|
||||
<span class="count-label">{{ challenge.memberCount }}</span>
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
<div
|
||||
v-if="isOfficial"
|
||||
class="official"
|
||||
>
|
||||
@@ -29,35 +36,42 @@
|
||||
class="svg-icon user-icon"
|
||||
v-html="icons.officialIcon"
|
||||
></div>
|
||||
</div><div
|
||||
</div>
|
||||
<div
|
||||
v-if="fullLayout"
|
||||
class="owner"
|
||||
>
|
||||
<div class="owner-item">
|
||||
<strong>{{ $t('createdBy') }}:</strong><user-link
|
||||
<strong>{{ $t('createdBy') }}:</strong>
|
||||
<user-link
|
||||
class="mx-1"
|
||||
:user="challenge.leader"
|
||||
/>
|
||||
</div><div
|
||||
</div>
|
||||
<div
|
||||
v-if="challenge.group && !isTavern(challenge.group)"
|
||||
class="owner-item"
|
||||
>
|
||||
<strong>{{ $t(challenge.group.type) }}:</strong><group-link
|
||||
<strong>{{ $t(challenge.group.type) }}:</strong>
|
||||
<group-link
|
||||
class="mx-1"
|
||||
:group="challenge.group"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><category-tags
|
||||
</div>
|
||||
<category-tags
|
||||
class="challenge-categories"
|
||||
:categories="challenge.categories"
|
||||
:owner="isOwner"
|
||||
:member="isMember"
|
||||
/><div
|
||||
/>
|
||||
<div
|
||||
v-markdown="challenge.summary"
|
||||
class="challenge-description"
|
||||
></div><div
|
||||
></div>
|
||||
<div
|
||||
v-if="fullLayout"
|
||||
class="well-wrapper"
|
||||
>
|
||||
@@ -71,8 +85,10 @@
|
||||
class="svg-icon"
|
||||
:class="task.label + '-icon'"
|
||||
v-html="task.icon"
|
||||
></div><span class="value">{{ task.value }}</span>
|
||||
</div><div class="label">
|
||||
></div>
|
||||
<span class="value">{{ task.value }}</span>
|
||||
</div>
|
||||
<div class="label">
|
||||
{{ $t(task.label) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -17,7 +17,8 @@
|
||||
{{ $t('awardWinners') }}
|
||||
</button>
|
||||
</div>
|
||||
</div><div class="row">
|
||||
</div>
|
||||
<div class="row">
|
||||
<task-column
|
||||
v-for="column in columns"
|
||||
:key="column"
|
||||
|
||||
@@ -7,39 +7,62 @@
|
||||
>
|
||||
<div class="form">
|
||||
<div class="form-group">
|
||||
<label><strong v-once>{{ $t('name') }} *</strong></label><b-form-input
|
||||
<label>
|
||||
<strong v-once>{{ $t('name') }} *</strong>
|
||||
</label>
|
||||
<b-form-input
|
||||
v-model="workingChallenge.name"
|
||||
type="text"
|
||||
:placeholder="$t('challengeNamePlaceholder')"
|
||||
/>
|
||||
</div><div class="form-group">
|
||||
<label><strong v-once>{{ $t('shortName') }} *</strong></label><b-form-input
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>
|
||||
<strong v-once>{{ $t('shortName') }} *</strong>
|
||||
</label>
|
||||
<b-form-input
|
||||
v-model="workingChallenge.shortName"
|
||||
type="text"
|
||||
:placeholder="$t('shortNamePlaceholder')"
|
||||
/>
|
||||
</div><div class="form-group">
|
||||
<label><strong v-once>{{ $t('challengeSummary') }} *</strong></label><div class="summary-count">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>
|
||||
<strong v-once>{{ $t('challengeSummary') }} *</strong>
|
||||
</label>
|
||||
<div
|
||||
class="summary-count"
|
||||
>
|
||||
{{ $t('charactersRemaining', {characters: charactersRemaining}) }}
|
||||
</div><textarea
|
||||
</div>
|
||||
<textarea
|
||||
v-model="workingChallenge.summary"
|
||||
class="summary-textarea form-control"
|
||||
:placeholder="$t('challengeSummaryPlaceholder')"
|
||||
></textarea>
|
||||
</div><div class="form-group">
|
||||
<label><strong v-once>{{ $t('challengeDescription') }} *</strong></label><a
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>
|
||||
<strong v-once>{{ $t('challengeDescription') }} *</strong>
|
||||
</label>
|
||||
<a
|
||||
v-markdown="$t('markdownFormattingHelp')"
|
||||
class="float-right"
|
||||
></a><textarea
|
||||
></a>
|
||||
<textarea
|
||||
v-model="workingChallenge.description"
|
||||
class="description-textarea form-control"
|
||||
:placeholder="$t('challengeDescriptionPlaceholder')"
|
||||
></textarea>
|
||||
</div><div
|
||||
</div>
|
||||
<div
|
||||
v-if="creating"
|
||||
class="form-group"
|
||||
>
|
||||
<label><strong v-once>{{ $t('challengeGuild') }} *</strong></label><select
|
||||
<label>
|
||||
<strong v-once>{{ $t('challengeGuild') }} *</strong>
|
||||
</label>
|
||||
<select
|
||||
v-model="workingChallenge.group"
|
||||
class="form-control"
|
||||
>
|
||||
@@ -50,24 +73,30 @@
|
||||
{{ group.name }}
|
||||
</option>
|
||||
</select>
|
||||
</div><div
|
||||
</div>
|
||||
<div
|
||||
v-if="workingChallenge.categories"
|
||||
class="form-group"
|
||||
>
|
||||
<label><strong v-once>{{ $t('categories') }} *</strong></label><div
|
||||
<label>
|
||||
<strong v-once>{{ $t('categories') }} *</strong>
|
||||
</label>
|
||||
<div
|
||||
class="category-wrap"
|
||||
@click.prevent="toggleCategorySelect"
|
||||
>
|
||||
<span
|
||||
v-if="workingChallenge.categories.length === 0"
|
||||
class="category-select"
|
||||
>{{ $t('none') }}</span><div
|
||||
>{{ $t('none') }}</span>
|
||||
<div
|
||||
v-for="category in workingChallenge.categories"
|
||||
class="category-label"
|
||||
>
|
||||
{{ $t(categoriesHashByKey[category]) }}
|
||||
</div>
|
||||
</div><div
|
||||
</div>
|
||||
<div
|
||||
v-if="showCategorySelect && creating"
|
||||
class="category-box"
|
||||
>
|
||||
@@ -84,46 +113,58 @@
|
||||
class="custom-control-input"
|
||||
type="checkbox"
|
||||
:value="group.key"
|
||||
><label
|
||||
>
|
||||
<label
|
||||
v-once
|
||||
class="custom-control-label"
|
||||
:for="`challenge-modal-cat-${group.key}`"
|
||||
>{{ $t(group.label) }}</label>
|
||||
</div>
|
||||
</div><button
|
||||
</div>
|
||||
<button
|
||||
class="btn btn-primary"
|
||||
@click.prevent="toggleCategorySelect"
|
||||
>
|
||||
{{ $t('close') }}
|
||||
</button>
|
||||
</div>
|
||||
</div><!-- @TODO: Implement in V2 .form-grouplabel
|
||||
</div>
|
||||
<!-- @TODO: Implement in V2 .form-grouplabel
|
||||
strong(v-once) {{$t('endDate')}}
|
||||
b-form-input.end-date-input--><div
|
||||
v-if="creating"
|
||||
class="form-group"
|
||||
>
|
||||
<label><strong v-once>{{ $t('prize') }}</strong></label><input
|
||||
v-model="workingChallenge.prize"
|
||||
type="number"
|
||||
:min="minPrize"
|
||||
:max="maxPrize"
|
||||
>
|
||||
</div><div class="row footer-wrap">
|
||||
b-form-input.end-date-input-->
|
||||
<div
|
||||
v-if="creating"
|
||||
class="form-group"
|
||||
>
|
||||
<label>
|
||||
<strong v-once>{{ $t('prize') }}</strong>
|
||||
</label>
|
||||
<input
|
||||
v-model="workingChallenge.prize"
|
||||
type="number"
|
||||
:min="minPrize"
|
||||
:max="maxPrize"
|
||||
>
|
||||
</div>
|
||||
<div class="row footer-wrap">
|
||||
<div class="col-12 text-center submit-button-wrapper">
|
||||
<div
|
||||
v-if="insufficientGemsForTavernChallenge"
|
||||
class="alert alert-warning"
|
||||
>
|
||||
You do not have enough gems to create a Tavern challenge
|
||||
</div><!-- @TODO if buy gems button is added, add analytics tracking to it--><!-- see https://github.com/HabitRPG/habitica/blob/develop/website/views/options/social/challenges.jade#L134--><button
|
||||
</div>
|
||||
<!-- @TODO if buy gems button is added, add analytics tracking to it-->
|
||||
<!-- see https://github.com/HabitRPG/habitica/blob/develop/website/views/options/social/challenges.jade#L134-->
|
||||
<button
|
||||
v-if="creating && !cloning"
|
||||
class="btn btn-primary"
|
||||
:disabled="loading"
|
||||
@click="createChallenge()"
|
||||
>
|
||||
{{ $t('createChallengeAddTasks') }}
|
||||
</button><button
|
||||
</button>
|
||||
<button
|
||||
v-if="cloning"
|
||||
v-once
|
||||
class="btn btn-primary"
|
||||
@@ -131,7 +172,8 @@ type="number"
|
||||
@click="createChallenge()"
|
||||
>
|
||||
{{ $t('createChallengeCloneTasks') }}
|
||||
</button><button
|
||||
</button>
|
||||
<button
|
||||
v-if="!creating && !cloning"
|
||||
v-once
|
||||
class="btn btn-primary"
|
||||
@@ -139,7 +181,8 @@ type="number"
|
||||
>
|
||||
{{ $t('updateChallenge') }}
|
||||
</button>
|
||||
</div><div class="col-12 text-center">
|
||||
</div>
|
||||
<div class="col-12 text-center">
|
||||
<p v-once>
|
||||
{{ $t('challengeMinimum') }}
|
||||
</p>
|
||||
|
||||
@@ -15,21 +15,25 @@
|
||||
>
|
||||
{{ $t('endChallenge') }}
|
||||
</h2>
|
||||
</div><div class="row text-center">
|
||||
</div>
|
||||
<div class="row text-center">
|
||||
<div class="col-12">
|
||||
<div class="support-habitica">
|
||||
<!-- @TODO: Add challenge achievement badge here-->
|
||||
<!-- @TODO: Add challenge achievement badge here-->
|
||||
</div>
|
||||
</div><div class="col-12">
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<strong v-once>{{ $t('selectChallengeWinnersDescription') }}</strong>
|
||||
</div><div class="col-12">
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<member-search-dropdown
|
||||
:text="winnerText"
|
||||
:members="members"
|
||||
:challenge-id="challengeId"
|
||||
@member-selected="selectMember"
|
||||
/>
|
||||
</div><div class="col-12">
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<button
|
||||
v-once
|
||||
class="btn btn-primary"
|
||||
@@ -37,13 +41,17 @@
|
||||
>
|
||||
{{ $t('awardWinners') }}
|
||||
</button>
|
||||
</div><div class="col-12">
|
||||
<hr><div class="or">
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<hr>
|
||||
<div class="or">
|
||||
{{ $t('or') }}
|
||||
</div>
|
||||
</div><div class="col-12">
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<strong v-once>{{ $t('doYouWantedToDeleteChallenge') }}</strong>
|
||||
</div><div class="col-12">
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<button
|
||||
v-once
|
||||
class="btn btn-danger"
|
||||
@@ -52,7 +60,8 @@
|
||||
{{ $t('deleteChallenge') }}
|
||||
</button>
|
||||
</div>
|
||||
</div><div
|
||||
</div>
|
||||
<div
|
||||
slot="modal-footer"
|
||||
class="footer-wrap"
|
||||
></div>
|
||||
|
||||
@@ -1,27 +1,33 @@
|
||||
<template>
|
||||
<div class="row">
|
||||
<challenge-modal @createChallenge="challengeCreated" /><sidebar
|
||||
<challenge-modal @createChallenge="challengeCreated" />
|
||||
<sidebar
|
||||
@search="updateSearch"
|
||||
@filter="updateFilters"
|
||||
/><div class="col-12 col-md-10 standard-page">
|
||||
/>
|
||||
<div class="col-12 col-md-10 standard-page">
|
||||
<div class="row header-row">
|
||||
<div class="col-md-8 text-left">
|
||||
<h1 v-once>
|
||||
{{ $t('findChallenges') }}
|
||||
</h1>
|
||||
</div><div class="col-md-4">
|
||||
<!-- @TODO: implement sorting span.dropdown-label {{ $t('sortBy') }}b-dropdown(:text="$t('sort')", right=true)
|
||||
b-dropdown-item(v-for='sortOption in sortOptions', :key="sortOption.value", @click='sort(sortOption.value)') {{sortOption.text}}--><button
|
||||
class="btn btn-secondary create-challenge-button float-right"
|
||||
@click="createChallenge()"
|
||||
>
|
||||
<div
|
||||
class="svg-icon positive-icon"
|
||||
v-html="icons.positiveIcon"
|
||||
></div><span v-once>{{ $t('createChallenge') }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div><div class="row">
|
||||
<div class="col-md-4">
|
||||
<!-- @TODO: implement sorting span.dropdown-label {{ $t('sortBy') }}b-dropdown(:text="$t('sort')", right=true)
|
||||
b-dropdown-item(v-for='sortOption in sortOptions', :key="sortOption.value", @click='sort(sortOption.value)') {{sortOption.text}}-->
|
||||
<button
|
||||
class="btn btn-secondary create-challenge-button float-right"
|
||||
@click="createChallenge()"
|
||||
>
|
||||
<div
|
||||
class="svg-icon positive-icon"
|
||||
v-html="icons.positiveIcon"
|
||||
></div>
|
||||
<span v-once>{{ $t('createChallenge') }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div
|
||||
v-if="!loading && filteredChallenges.length === 0"
|
||||
class="no-challenges text-center col-md-6 offset-3"
|
||||
@@ -30,13 +36,15 @@ v-html="icons.positiveIcon"
|
||||
{{ $t('noChallengeMatchFilters') }}
|
||||
</h2>
|
||||
</div>
|
||||
</div><div class="row">
|
||||
</div>
|
||||
<div class="row">
|
||||
<div
|
||||
v-for="challenge in filteredChallenges"
|
||||
class="col-12 col-md-6"
|
||||
>
|
||||
<challenge-item :challenge="challenge" />
|
||||
</div><mugen-scroll
|
||||
</div>
|
||||
<mugen-scroll
|
||||
v-show="loading"
|
||||
:handler="infiniteScrollTrigger"
|
||||
:should-handle="!loading && canLoadMore"
|
||||
|
||||
@@ -3,7 +3,8 @@
|
||||
<challenge-modal
|
||||
:group-id="groupId"
|
||||
@createChallenge="challengeCreated"
|
||||
/><div
|
||||
/>
|
||||
<div
|
||||
v-if="challenges.length === 0"
|
||||
class="row no-quest-section"
|
||||
>
|
||||
@@ -11,24 +12,29 @@
|
||||
<div
|
||||
class="svg-icon challenge-icon"
|
||||
v-html="icons.challengeIcon"
|
||||
></div><h4 v-once>
|
||||
></div>
|
||||
<h4 v-once>
|
||||
{{ $t('haveNoChallenges') }}
|
||||
</h4><p v-once>
|
||||
</h4>
|
||||
<p v-once>
|
||||
{{ $t('challengeDetails') }}
|
||||
</p><button
|
||||
</p>
|
||||
<button
|
||||
class="btn btn-secondary"
|
||||
@click="createChallenge()"
|
||||
>
|
||||
{{ $t('createChallenge') }}
|
||||
</button>
|
||||
</div>
|
||||
</div><template v-else>
|
||||
</div>
|
||||
<template v-else>
|
||||
<challenge-item
|
||||
v-for="challenge in challenges"
|
||||
:key="challenge._id"
|
||||
:challenge="challenge"
|
||||
:full-layout="false"
|
||||
/><div class="col-12 text-center">
|
||||
/>
|
||||
<div class="col-12 text-center">
|
||||
<button
|
||||
class="btn btn-secondary"
|
||||
@click="createChallenge()"
|
||||
|
||||
@@ -7,14 +7,16 @@
|
||||
:class="{'active': $route.name === 'myChallenges'}"
|
||||
>
|
||||
{{ $t('myChallenges') }}
|
||||
</router-link><router-link
|
||||
</router-link>
|
||||
<router-link
|
||||
class="nav-link"
|
||||
:to="{name: 'findChallenges'}"
|
||||
:class="{'active': $route.name === 'findChallenges'}"
|
||||
>
|
||||
{{ $t('findChallenges') }}
|
||||
</router-link>
|
||||
</secondary-menu><div class="col-12">
|
||||
</secondary-menu>
|
||||
<div class="col-12">
|
||||
<router-view />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -6,13 +6,15 @@
|
||||
:hide-footer="true"
|
||||
>
|
||||
<div class="modal-body">
|
||||
<h2>{{ $t('confirmKeepChallengeTasks') }}</h2><div>
|
||||
<h2>{{ $t('confirmKeepChallengeTasks') }}</h2>
|
||||
<div>
|
||||
<button
|
||||
class="btn btn-primary"
|
||||
@click="leaveChallenge('keep')"
|
||||
>
|
||||
{{ $t('keepThem') }}
|
||||
</button><button
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-danger"
|
||||
@click="leaveChallenge('remove-all')"
|
||||
>
|
||||
|
||||
@@ -1,27 +1,33 @@
|
||||
<template>
|
||||
<div class="row">
|
||||
<challenge-modal @createChallenge="challengeCreated" /><sidebar
|
||||
<challenge-modal @createChallenge="challengeCreated" />
|
||||
<sidebar
|
||||
@search="updateSearch"
|
||||
@filter="updateFilters"
|
||||
/><div class="col-10 standard-page">
|
||||
/>
|
||||
<div class="col-10 standard-page">
|
||||
<div class="row header-row">
|
||||
<div class="col-md-8 text-left">
|
||||
<h1 v-once>
|
||||
{{ $t('myChallenges') }}
|
||||
</h1>
|
||||
</div><div class="col-md-4">
|
||||
<!-- @TODO: implement sorting span.dropdown-label {{ $t('sortBy') }}b-dropdown(:text="$t('sort')", right=true)
|
||||
b-dropdown-item(v-for='sortOption in sortOptions', :key="sortOption.value", @click='sort(sortOption.value)') {{sortOption.text}}--><button
|
||||
class="btn btn-secondary create-challenge-button float-right"
|
||||
@click="createChallenge()"
|
||||
>
|
||||
<div
|
||||
class="svg-icon positive-icon"
|
||||
v-html="icons.positiveIcon"
|
||||
></div><span v-once>{{ $t('createChallenge') }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div><div class="row">
|
||||
<div class="col-md-4">
|
||||
<!-- @TODO: implement sorting span.dropdown-label {{ $t('sortBy') }}b-dropdown(:text="$t('sort')", right=true)
|
||||
b-dropdown-item(v-for='sortOption in sortOptions', :key="sortOption.value", @click='sort(sortOption.value)') {{sortOption.text}}-->
|
||||
<button
|
||||
class="btn btn-secondary create-challenge-button float-right"
|
||||
@click="createChallenge()"
|
||||
>
|
||||
<div
|
||||
class="svg-icon positive-icon"
|
||||
v-html="icons.positiveIcon"
|
||||
></div>
|
||||
<span v-once>{{ $t('createChallenge') }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div
|
||||
v-if="!loading && challenges.length === 0"
|
||||
class="no-challenges text-center col-md-6 offset-3"
|
||||
@@ -29,15 +35,19 @@ v-html="icons.positiveIcon"
|
||||
<div
|
||||
class="svg-icon"
|
||||
v-html="icons.challengeIcon"
|
||||
></div><h2 v-once>
|
||||
></div>
|
||||
<h2 v-once>
|
||||
{{ $t('noChallengeTitle') }}
|
||||
</h2><p v-once>
|
||||
</h2>
|
||||
<p v-once>
|
||||
{{ $t('challengeDescription1') }}
|
||||
</p><p v-once>
|
||||
</p>
|
||||
<p v-once>
|
||||
{{ $t('challengeDescription2') }}
|
||||
</p>
|
||||
</div>
|
||||
</div><div class="row">
|
||||
</div>
|
||||
<div class="row">
|
||||
<div
|
||||
v-if="!loading && challenges.length > 0 && filteredChallenges.length === 0"
|
||||
class="no-challenges text-center col-md-6 offset-3"
|
||||
@@ -46,13 +56,15 @@ v-html="icons.positiveIcon"
|
||||
{{ $t('noChallengeMatchFilters') }}
|
||||
</h2>
|
||||
</div>
|
||||
</div><div class="row">
|
||||
</div>
|
||||
<div class="row">
|
||||
<div
|
||||
v-for="challenge in filteredChallenges"
|
||||
class="col-12 col-md-6"
|
||||
>
|
||||
<challenge-item :challenge="challenge" />
|
||||
</div><mugen-scroll
|
||||
</div>
|
||||
<mugen-scroll
|
||||
v-show="loading"
|
||||
:handler="infiniteScrollTrigger"
|
||||
:should-handle="!loading && canLoadMore"
|
||||
|
||||
@@ -7,11 +7,14 @@
|
||||
type="text"
|
||||
:placeholder="$t('search')"
|
||||
>
|
||||
</div><form>
|
||||
</div>
|
||||
<form>
|
||||
<h2 v-once>
|
||||
{{ $t('filter') }}
|
||||
</h2><div class="form-group">
|
||||
<h3>{{ $t('category') }}</h3><div
|
||||
</h2>
|
||||
<div class="form-group">
|
||||
<h3>{{ $t('category') }}</h3>
|
||||
<div
|
||||
v-for="group in categoryOptions"
|
||||
:key="group.key"
|
||||
class="form-check"
|
||||
@@ -23,18 +26,21 @@
|
||||
class="custom-control-input"
|
||||
type="checkbox"
|
||||
:value="group.key"
|
||||
><label
|
||||
>
|
||||
<label
|
||||
v-once
|
||||
class="custom-control-label"
|
||||
:for="group.key"
|
||||
>{{ $t(group.label) }}</label>
|
||||
</div>
|
||||
</div>
|
||||
</div><div
|
||||
</div>
|
||||
<div
|
||||
v-if="$route.name !== 'findChallenges'"
|
||||
class="form-group"
|
||||
>
|
||||
<h3>{{ $t('membership') }}</h3><div
|
||||
<h3>{{ $t('membership') }}</h3>
|
||||
<div
|
||||
v-for="group in roleOptions"
|
||||
:key="group.key"
|
||||
class="form-check"
|
||||
@@ -46,15 +52,18 @@
|
||||
class="custom-control-input"
|
||||
type="checkbox"
|
||||
:value="group.key"
|
||||
><label
|
||||
>
|
||||
<label
|
||||
v-once
|
||||
class="custom-control-label"
|
||||
:for="group.key"
|
||||
>{{ $t(group.label) }}</label>
|
||||
</div>
|
||||
</div>
|
||||
</div><div class="form-group">
|
||||
<h3>{{ $t('ownership') }}</h3><div
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<h3>{{ $t('ownership') }}</h3>
|
||||
<div
|
||||
v-for="group in ownershipOptions"
|
||||
:key="group.key"
|
||||
class="form-check"
|
||||
@@ -66,7 +75,8 @@
|
||||
class="custom-control-input"
|
||||
type="checkbox"
|
||||
:value="group.key"
|
||||
><label
|
||||
>
|
||||
<label
|
||||
v-once
|
||||
class="custom-control-label"
|
||||
:for="group.key"
|
||||
|
||||
Reference in New Issue
Block a user