butter/keanu-weblite
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

Resolve "Polling: Updated poll admin UX"

Browse source
This commit is contained in:
N Pex 2022-06-08 18:53:50 +00:00 • committed by n8fr8
parent 90daf060cc
commit 4f6238bc59
11 changed files with 1531 additions and 1111 deletions
Download patch file Download diff file Expand all files Collapse all files

145
src/components/CreatePollDialog.vue
View file

@ -1,16 +1,18 @@
<template>
<v-dialog v-model="showDialog" v-show="room" class="ma-0 pa-0" :width="$vuetify.breakpoint.smAndUp ? '688px' : '95%'">
<div class="dialog-content text-center">
<template>
<v-icon color="black" size="30">poll</v-icon>
<h2 class="dialog-title">
{{ $t("poll_create.title") }}
</h2>
<div class="dialog-text">{{ $t("poll_create.intro") }}</div>
</template>
<div v-if="showDialog" v-show="room" class="ma-0 pa-0 fullscreen-dialog poll-create">
<div class="chat-header">
<v-container fluid>
<div class="room-name no-upper">{{ $t("poll_create.title") }}</div>
<v-btn id="btn-close" text class="header-button-right" @click.stop="showDialog = false">
<v-icon>close</v-icon>
</v-btn>
</v-container>
</div>
<div class="text-center">
<v-form v-model="isValid" ref="pollcreateform">
<v-container fluid class="poll-create-dialog-content">
<v-row cols="12">
<!-- <v-row cols="12" no-gutters class="ma-0 pa-0">
<v-col cols="12">
<v-switch
v-model="pollIsDisclosed"
@ -18,78 +20,79 @@
:label="pollIsDisclosed ? $t('poll_create.poll_disclosed') : $t('poll_create.poll_undisclosed')"
></v-switch>
</v-col>
</v-row>
<v-row cols="12">
<v-col cols="12">
<v-text-field
outlined
:disabled="isCreating"
</v-row> -->
<v-row cols="12" no-gutters class="ma-0 pa-0">
<v-col cols="12" class="ma-0 pa-0">
<InputControl
v-model="pollQuestion"
:label="$t('poll_create.question_label')"
:rules="[(v) => !!v || $t('poll_create.question_required')]"
></v-text-field>
</v-col>
</v-row>
<v-row v-for="(answer, index) in pollAnswers" cols="12" :key="answer.id">
<v-col cols="12">
<v-text-field
outlined
:disabled="isCreating"
v-model="answer.text"
:label="$t('poll_create.answer_label', { index: index + 1 })"
:append-icon="pollAnswers.length > 1 ? 'delete' : null"
@click:append="removeAnswer(index)"
:rules="[(v) => !!v || $t('poll_create.answer_required')]"
></v-text-field>
:error="$t('poll_create.please_complete')"
/>
</v-col>
</v-row>
<v-row
><v-col
><v-btn @click.stop="addAnswer">{{ $t("poll_create.add_answer") }}</v-btn></v-col
></v-row
>
<v-row v-for="(answer, index) in pollAnswers" cols="12" :key="answer.id" no-gutters class="ma-0 pa-0">
<v-col cols="12" class="ma-0 pa-0">
<InputControl
v-model="answer.text"
:label="
index == 0 ? $t('poll_create.answer_label_1') : $t('poll_create.answer_label_n', { index: index + 1 })
"
:disabled="isCreating"
:error="$t('poll_create.please_complete')"
:class="{ deletable: pollAnswers.length > 1 }"
ref="answerInput"
>
<v-btn v-if="pollAnswers.length > 0" icon @click="removeAnswer(index)"><v-icon>delete</v-icon></v-btn>
</InputControl>
</v-col>
</v-row>
<v-row cols="12" no-gutters class="ma-0 pa-0">
<v-col class="ma-0 pa-0">
<div :class="{'add-answer-button':true, 'clickable': true, 'hidden': addingAnswer}" @click.stop="addAnswer">
<img src="@/assets/icons/ic_add.svg" />
</div>
</v-col>
</v-row>
</v-container>
</v-form>
<div class="poll-create-status">
{{ status }}
<v-progress-circular v-if="isCreating" indeterminate color="primary" size="14"></v-progress-circular>
</div>
<v-container fluid>
<v-row cols="12">
<v-col cols="6">
<v-btn
id="btn-create-poll-cancel"
depressed
text
block
class="text-button"
@click="showDialog = false"
:disabled="isCreating"
>{{ $t("menu.cancel") }}</v-btn
>
</v-col>
<v-col cols="6" align="center">
<v-container>
<v-row justify="center">
<v-col cols="auto">
<v-btn
id="btn-create-poll"
color="red"
depressed
block
class="filled-button"
class="filled-button publish-button"
@click.stop="onCreatePoll()"
:disabled="isCreating"
>{{ $t("poll_create.create") }}</v-btn
>
</v-col>
</v-row>
<v-row>
<v-col cols="auto">
<div class="tip">
<b>{{ $t("poll_create.tip_title") }}</b
>{{ $t("poll_create.tip_text") }}
</div>
</v-col>
</v-row>
</v-container>
</div>
</v-dialog>
</div>
</template>
<script>
import roomInfoMixin from "./roomInfoMixin";
import util from "../plugins/utils";
import InputControl from "./InputControl.vue";
export default {
name: "CreatePollDialog",
@ -124,13 +127,13 @@ export default {
this.pollQuestion = defaults.pollQuestion;
this.pollAnswers = defaults.pollAnswers;
this.autoIncrementId = defaults.autoIncrementId;
this.addingAnswer = defaults.addingAnswer;
if (this.$refs.pollcreateform) {
this.$refs.pollcreateform.resetValidation();
}
}
},
},
methods: {
defaultData() {
return {
@ -138,20 +141,29 @@ export default {
isValid: true,
isCreating: false,
status: String.fromCharCode(160),
pollIsDisclosed: true,
pollQuestion: "",
pollIsDisclosed: false,
pollQuestion: null,
pollAnswers: [
{ id: "1", text: "" },
{ id: "2", text: "" },
{ id: "1", text: null },
{ id: "2", text: null },
],
autoIncrementId: 2,
addingAnswer: false,
};
},
addAnswer() {
if (this.pollAnswers.length < 20) {
// MAX length according to spec
this.addingAnswer = true;
const idx = this.pollAnswers.length;
this.autoIncrementId += 1;
this.pollAnswers.push({ id: "" + this.autoIncrementId, text: "" });
this.pollAnswers.push({ id: "" + this.autoIncrementId, text: null });
this.$nextTick(() => {
this.$refs.answerInput[idx].focus();
this.$nextTick(() => {
this.addingAnswer = false;
});
});
}
},
removeAnswer(index) {
@ -179,17 +191,30 @@ export default {
this.isCreating = false;
this.status = this.$t("poll_create.failed");
});
setTimeout(() => {}, 3000);
} else {
this.isValid = false;
}
},
},
components: { InputControl },
};
</script>
<style lang="scss">
@import "@/assets/css/chat.scss";
@import "@/assets/css/components/poll.scss";
.fullscreen-dialog {
background-color: white;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 10;
.chat-header {
position: static;
border: none;
}
}
</style>