pr requested changes

uab-cgds-worthey · Jun 22, 2023 · dd952f2 · dd952f2
1 parent 5d01e60
commit dd952f2
Show file tree

Hide file tree

Showing 13 changed files with 627 additions and 247 deletions.
diff --git a/docs/prototypes/forum-valadation/Dialogs/InputDialog.vue b/docs/prototypes/forum-valadation/Dialogs/InputDialog.vue
@@ -0,0 +1,148 @@
+<template>
+ <div v-if="dialog.state.active" class="modal-background">
+ <div :class="['modal-container', dialog.state.message ? 'limit-width' : '']">
+ <div class="tab-header">
+ <button
+ v-for="(tab, index) in dialog.state.tabs"
+ :key="`button-${tab.name}-${index}`"
+ :class="tab.name == dialog.state.activeTabName ? 'tab-button-active' : ''"
+ class="tab-button"
+ @click="dialog.state.activeTabName = tab.name"
+ :data-test="`button-${tab.name}`"
+ >
+ <img
+ v-if="tab.icon == 'phenotips'"
+ src="@/assets/phenotips-favicon-96x96.png"
+ />
+ <font-awesome-icon v-else
+ :icon="'file' == tab.icon ? ['far', 'file'] : tab.icon"
+ size="2xl">
+ </font-awesome-icon>
+ </button>
+ </div>
+ <div v-if="dialog.state.message"
+ class="warning-message"
+ v-html="dialog.state.message"
+ data-test="warning-message">
+ </div>
+ <component v-bind:is="dialog.state.activeTabName"
+ :userInput = "dialog.activeTab().input"
+ v-bind="dialog.activeTab().props"
+ :runValidation="shouldRunValidation"
+ @update:userInput="dialog.updateActiveTabInput"
+ @update:allRequiredFieldsFilled="allRequiredFieldsFilled = $event"
+ @validationDone="shouldRunValidation = false"
+ />
+ <div class="button-row">
+ <button class="secondary-button" @click="dialog.cancel()" data-test="cancel">
+ {{ dialog.state.cancelText }}
+ </button>
+ <button class="secondary-button" v-if="dialog.state.deleteText!=''" @click="dialog.delete()" data-test="delete">
+ {{ dialog.state.deleteText }}
+ </button>
+ <button class="primary-button"
+ @click="confirmClicked()"
+ data-test="confirm">
+ {{ dialog.state.confirmText }}
+ </button>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+import InputDialogAttachUrl from '@/components/Dialogs/InputDialogAttachUrl.vue';
+import InputDialogUploadFile from '@/components/Dialogs/InputDialogUploadFile.vue';
+
+import dialog from '@/inputDialog.js';
+
+export default {
+ name: 'input-dialog',
+ components: {
+ InputDialogAttachUrl,
+ InputDialogUploadFile,
+ },
+ data: function() {
+ return {
+ dialog,
+ allRequiredFieldsFilled: false,
+ shouldRunValidation: false,
+ };
+ },
+ methods: {
+ confirmClicked() {
+ if (!this.allRequiredFieldsFilled) {
+ this.shouldRunValidation = true;
+ this.$nextTick(() => {
+ if (this.allRequiredFieldsFilled) {
+ this.dialog.confirmation(this.dialog.activeTab().input);
+ this.allRequiredFieldsFilled = false;
+ }
+ });
+ } else {
+ this.dialog.confirmation(this.dialog.activeTab().input);
+ this.allRequiredFieldsFilled = false;
+ }
+ },
+ },
+};
+</script>
+
+<style scoped>
+
+.modal-container {
+ padding: var(--p-16);
+ display: flex;
+ flex-direction: column;
+ min-width: 25rem;
+ min-height: auto;
+ gap: var(--p-16);
+ align-items: stretch;
+}
+
+.tab-header {
+ margin: auto;
+ border: 2px var(--rosalution-grey-100) solid;
+ border-radius: var(--input-border-radius);
+
+ width: 160px;
+ display: flex;
+ justify-content: center;
+}
+
+.tab-button {
+ width: 2.5rem;
+ background-color: var(--rosalution-white);
+ border: none;
+ padding-top: var(--p-10);
+ padding-bottom: var(--p-10);
+}
+
+.tab-header .tab-button:not(:first-child) {
+ border-left: 2px var(--rosalution-grey-100) solid;
+ padding-left: var(--p-8);
+}
+
+.tab-button-active {
+ color: var(--rosalution-blue-200) !important;
+}
+
+.button-row {
+ display: flex;
+ justify-content: flex-end;
+ align-items: center;
+ gap: var(--p-16);
+}
+
+.warning-message{
+ font-size: var(--font-size-16);
+ font-weight: var(--font-weight-regular);
+ line-height: var(--line-height-24);
+ text-align: center;
+}
+
+.limit-width {
+ max-width: 25rem;
+}
+
+</style>
diff --git a/docs/prototypes/forum-valadation/Dialogs/InputDialogAttachUrl.vue b/docs/prototypes/forum-valadation/Dialogs/InputDialogAttachUrl.vue
@@ -0,0 +1,113 @@
+<template>
+ <input v-if="'name' in userInput" placeholder="Text to display (required)" v-model="name" data-test="name-input"
+ :class="{ 'invalid-input-highlight': highlight && !name }" />
+ <div v-if="'name' in userInput && highlight && !name" class="required-message" data-test="required">
+ *required
+ </div>
+ <input placeholder="Paste a link (required)" v-model="url" data-test="link-input"
+ :class="{ 'invalid-input-highlight': highlight && !url }" />
+ <div v-if="highlight && !url" class="required-message" data-test="required">
+ *required
+ </div>
+ <textarea v-if="'comments' in userInput" class="comments" placeholder="Comments" v-model="comments"
+ data-test="comments-text-area">
+ </textarea>
+</template>
+
+
+<script>
+export default {
+ name: 'input-dialog-attach-url',
+ emits: ['update:userInput', 'update:allRequiredFieldsFilled', 'validationDone'],
+ props: {
+ userInput: {
+ type: Object,
+ required: true,
+ },
+ runValidation: {
+ type: Boolean,
+ },
+ },
+ data() {
+ return {
+ highlight: false,
+ };
+ },
+ computed: {
+ requiredFields() {
+ return this.userInput.requiredFields || [];
+ },
+ name: {
+ get() {
+ return this.userInput.name;
+ },
+ set(value) {
+ this.updateUserInput('name', value);
+ },
+ },
+ url: {
+ get() {
+ return this.userInput.data;
+ },
+ set(value) {
+ this.updateUserInput('data', value);
+ },
+ },
+ comments: {
+ get() {
+ return this.userInput['comments'];
+ },
+ set(value) {
+ this.updateUserInput('comments', value);
+ },
+ },
+ allRequiredFieldsFilled() {
+ return this.requiredFields.every((field) => !!this[field] && this[field].length > 0);
+ },
+ },
+ watch: {
+ runValidation(currentValidationState, previousValidationState) {
+ if (currentValidationState !== previousValidationState && currentValidationState === true) {
+ this.validateRequiredFields();
+ this.$emit('validationDone');
+ }
+ },
+ },
+ methods: {
+ confirmClicked() {
+ this.validateRequiredFields();
+ },
+ updateUserInput(field, value) {
+ const input = this.userInput;
+ input[field] = value;
+ this.$emit('update:userInput', input);
+ },
+ validateRequiredFields() {
+ const allFieldsFilled = this.requiredFields.every((field) => !!this[field] && this[field].length > 0);
+ if (!allFieldsFilled) {
+ this.highlightRequiredFields();
+ } else {
+ this.$emit('update:allRequiredFieldsFilled', allFieldsFilled);
+ }
+ },
+ highlightRequiredFields() {
+ this.highlight = true;
+ },
+ },
+};
+</script>
+
+
+<style>
+
+.comments {
+ flex: 3 0 auto;
+ height: 8rem;
+}
+
+.required-message {
+ color: var(--rosalution-red-100);
+ transform: translateY(-1rem);
+}
+
+</style>