From 4c80aec6d775f634b7fece3dbdcd7112d53d84ba Mon Sep 17 00:00:00 2001 From: mateuswetah Date: Mon, 6 Feb 2023 11:55:52 -0300 Subject: [PATCH 01/14] Begins implementation of stepped metadata sections in item submission form. #736. --- .../blocks/item-submission-form/block.json | 72 +++--- .../blocks/item-submission-form/deprecated.js | 229 ++++++++++++++++++ .../blocks/item-submission-form/edit.js | 13 +- .../item-submission/item-submission-form.vue | 223 ++++++++++------- .../scss/item-submission-basics.sass | 5 +- .../blocks/item-submission-form/save.js | 6 +- .../blocks/item-submission-form/theme.js | 9 +- .../blocks/item-submission-form/theme.vue | 2 + 8 files changed, 436 insertions(+), 123 deletions(-) diff --git a/src/views/gutenberg-blocks/blocks/item-submission-form/block.json b/src/views/gutenberg-blocks/blocks/item-submission-form/block.json index 18b49338a..ae40de6b6 100644 --- a/src/views/gutenberg-blocks/blocks/item-submission-form/block.json +++ b/src/views/gutenberg-blocks/blocks/item-submission-form/block.json @@ -13,140 +13,144 @@ }, "attributes": { "collectionId": { - "type": "String", + "type": "string", "default": "" }, "isCollectionModalOpen": { - "type": "Boolean", + "type": "boolean", "default": false }, "hideFileModalButton": { - "type": "Boolean", + "type": "boolean", "default": false }, "hideTextModalButton": { - "type": "Boolean", + "type": "boolean", "default": false }, "hideLinkModalButton": { - "type": "Boolean", + "type": "boolean", "default": false }, "hideThumbnailSection": { - "type": "Boolean", + "type": "boolean", "default": false }, "hideAttachmentsSection": { - "type": "Boolean", + "type": "boolean", "default": false }, "hideHelpButtons": { - "type": "Boolean", + "type": "boolean", "default": false }, "hideMetadataTypes": { - "type": "Boolean", + "type": "boolean", "default": false }, "showAllowCommentsSection": { - "type": "Boolean", + "type": "boolean", "default": false }, "hideCollapses": { - "type": "Boolean", + "type": "boolean", "default": false }, "backgroundColor": { - "type": "String", + "type": "string", "default": "rgba(255,255,255,0)" }, "baseFontSize": { - "type": "Number", + "type": "number", "default": 16 }, "inputColor": { - "type": "String", + "type": "string", "default": "#1d1d1d" }, "inputBackgroundColor": { - "type": "String", + "type": "string", "default": "#ffffff" }, "inputBorderColor": { - "type": "String", + "type": "string", "default": "#dbdbdb" }, "labelColor": { - "type": "String", + "type": "string", "default": "#454647" }, "infoColor": { - "type": "String", + "type": "string", "default": "#555758" }, "primaryColor": { - "type": "String", + "type": "string", "default": "#d9eced" }, "secondaryColor": { - "type": "String", + "type": "string", "default": "#298596" }, "enabledMetadata": { - "type": "Array", + "type": "array", "default": [] }, "collectionMetadata": { - "type": "Array", + "type": "array", "default": [] }, "isLoadingCollectionMetadata": { - "type": "Boolean", + "type": "boolean", "default": false }, "sentFormHeading": { - "type": "String", + "type": "string", "default": "Form submitted!" }, "sentFormMessage": { - "type": "String", + "type": "string", "default": "Thank you. Your item was submitted to the collection." }, "documentSectionLabel": { - "type": "String", + "type": "string", "default": "Document" }, "attachmentsSectionLabel": { - "type": "String", + "type": "string", "default": "Attachments" }, "thumbnailSectionLabel": { - "type": "String", + "type": "string", "default": "Thumbnail" }, "metadataSectionLabel": { - "type": "String", + "type": "string", "default": "Metadata" }, "showItemLinkButton": { - "type": "Boolean", + "type": "boolean", "default": false }, "itemLinkButtonLabel": { - "type": "String", + "type": "string", "default": "Go to the item page" }, "helpInfoBellowLabel": { - "type": "Boolean", + "type": "boolean", "default": false }, "showTermsAgreementCheckbox": { - "type": "Boolean", + "type": "boolean", "default": false }, "termsAgreementMessage": { - "type": "String", + "type": "string", "default": "I agree to submit this item information." + }, + "isLayoutSteps": { + "type": "boolean", + "default": false } }, "supports": { diff --git a/src/views/gutenberg-blocks/blocks/item-submission-form/deprecated.js b/src/views/gutenberg-blocks/blocks/item-submission-form/deprecated.js index ce5700382..bf5e68647 100644 --- a/src/views/gutenberg-blocks/blocks/item-submission-form/deprecated.js +++ b/src/views/gutenberg-blocks/blocks/item-submission-form/deprecated.js @@ -2,6 +2,235 @@ const { __ } = wp.i18n; const { RichText, useBlockProps } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor ); export default [ + /* Deprecated on Tainacan 0.20.0, due to isLayoutSteps */ + { + "attributes": { + "collectionId": { + "type": "String", + "default": "" + }, + "isCollectionModalOpen": { + "type": "Boolean", + "default": false + }, + "hideFileModalButton": { + "type": "Boolean", + "default": false + }, + "hideTextModalButton": { + "type": "Boolean", + "default": false + }, + "hideLinkModalButton": { + "type": "Boolean", + "default": false + }, + "hideThumbnailSection": { + "type": "Boolean", + "default": false + }, + "hideAttachmentsSection": { + "type": "Boolean", + "default": false + }, + "hideHelpButtons": { + "type": "Boolean", + "default": false + }, + "hideMetadataTypes": { + "type": "Boolean", + "default": false + }, + "showAllowCommentsSection": { + "type": "Boolean", + "default": false + }, + "hideCollapses": { + "type": "Boolean", + "default": false + }, + "backgroundColor": { + "type": "String", + "default": "rgba(255,255,255,0)" + }, + "baseFontSize": { + "type": "Number", + "default": 16 + }, + "inputColor": { + "type": "String", + "default": "#1d1d1d" + }, + "inputBackgroundColor": { + "type": "String", + "default": "#ffffff" + }, + "inputBorderColor": { + "type": "String", + "default": "#dbdbdb" + }, + "labelColor": { + "type": "String", + "default": "#454647" + }, + "infoColor": { + "type": "String", + "default": "#555758" + }, + "primaryColor": { + "type": "String", + "default": "#d9eced" + }, + "secondaryColor": { + "type": "String", + "default": "#298596" + }, + "enabledMetadata": { + "type": "Array", + "default": [] + }, + "collectionMetadata": { + "type": "Array", + "default": [] + }, + "isLoadingCollectionMetadata": { + "type": "Boolean", + "default": false + }, + "sentFormHeading": { + "type": "String", + "default": "Form submitted!" + }, + "sentFormMessage": { + "type": "String", + "default": "Thank you. Your item was submitted to the collection." + }, + "documentSectionLabel": { + "type": "String", + "default": "Document" + }, + "attachmentsSectionLabel": { + "type": "String", + "default": "Attachments" + }, + "thumbnailSectionLabel": { + "type": "String", + "default": "Thumbnail" + }, + "metadataSectionLabel": { + "type": "String", + "default": "Metadata" + }, + "showItemLinkButton": { + "type": "Boolean", + "default": false + }, + "itemLinkButtonLabel": { + "type": "String", + "default": "Go to the item page" + }, + "helpInfoBellowLabel": { + "type": "Boolean", + "default": false + }, + "showTermsAgreementCheckbox": { + "type": "Boolean", + "default": false + }, + "termsAgreementMessage": { + "type": "String", + "default": "I agree to submit this item information." + } + }, + save({ attributes, className }) { + const { + collectionId, + backgroundColor, + hideFileModalButton, + hideTextModalButton, + hideLinkModalButton, + hideThumbnailSection, + hideAttachmentsSection, + showAllowCommentsSection, + hideHelpButtons, + hideMetadataTypes, + hideCollapses, + documentSectionLabel, + thumbnailSectionLabel, + attachmentsSectionLabel, + metadataSectionLabel, + baseFontSize, + inputColor, + inputBackgroundColor, + inputBorderColor, + labelColor, + infoColor, + primaryColor, + secondaryColor, + enabledMetadata, + sentFormHeading, + sentFormMessage, + showItemLinkButton, + itemLinkButtonLabel, + helpInfoBellowLabel, + showTermsAgreementCheckbox, + termsAgreementMessage + } = attributes; + + const blockProps = useBlockProps.save(); + let termsAgreementMessageHTML = ; + termsAgreementMessageHTML = (termsAgreementMessageHTML && termsAgreementMessageHTML.props && termsAgreementMessageHTML.props.value) ? termsAgreementMessageHTML.props.value : ''; + + if (backgroundColor.rgb != undefined) { + if (backgroundColor.rgb.a) + backgroundColor = 'rgba(' + backgroundColor.rgb.r + ',' + backgroundColor.rgb.g + ',' + backgroundColor.rgb.b + ',' + backgroundColor.rgb.a + ')'; + else + backgroundColor = 'rgb(' + backgroundColor.rgb.r + ',' + backgroundColor.rgb.g + ',' + backgroundColor.rgb.b + ')'; + } + + return
+
+
+
+ } + }, /* Deprecated on Tainacan 0.18.8, due to the backgroundColor being a string instead of object */ { "attributes": { diff --git a/src/views/gutenberg-blocks/blocks/item-submission-form/edit.js b/src/views/gutenberg-blocks/blocks/item-submission-form/edit.js index a0aff0688..1cf146960 100644 --- a/src/views/gutenberg-blocks/blocks/item-submission-form/edit.js +++ b/src/views/gutenberg-blocks/blocks/item-submission-form/edit.js @@ -56,7 +56,8 @@ export default function ({ attributes, setAttributes, className }) { itemLinkButtonLabel, helpInfoBellowLabel, showTermsAgreementCheckbox, - termsAgreementMessage + termsAgreementMessage, + isLayoutSteps } = attributes; const blockProps = useBlockProps(); @@ -280,6 +281,16 @@ export default function ({ attributes, setAttributes, className }) { + { + isLayoutSteps = isChecked; + setAttributes({ isLayoutSteps: isChecked }); + } + } + /> {{ collapseAll ? $i18n.get('label_collapse_all') : $i18n.get('label_expand_all') }} @@ -417,88 +417,104 @@ class="item-submission-hook item-submission-hook-metadata-before" v-html="getBeforeHook('metadata')" /> -
- -
- - - - - - - -
- + +
- - -
- -

- {{ metadataSection.description }} -

- - -
- + v-if="!isLayoutSteps" + class="metadata-section-header section-label"> + + + + + + +
- + +
-
+ +
+ +

+ {{ metadataSection.description }} +

+ + +
+ +
+ + + + +
-
+
+ +
+
+ +
+
}; \ No newline at end of file diff --git a/src/views/gutenberg-blocks/blocks/item-submission-form/theme.js b/src/views/gutenberg-blocks/blocks/item-submission-form/theme.js index 141554929..ffdda0d87 100644 --- a/src/views/gutenberg-blocks/blocks/item-submission-form/theme.js +++ b/src/views/gutenberg-blocks/blocks/item-submission-form/theme.js @@ -19,7 +19,8 @@ import { Input, Select, Taginput, - Snackbar + Snackbar, + Steps } from 'buefy'; import VTooltip from 'floating-vue'; import cssVars from 'css-vars-ponyfill'; @@ -87,6 +88,7 @@ export default (element) => { Vue.use(Snackbar); Vue.use(Modal); Vue.use(Input); + Vue.use(Steps); Vue.use(VTooltip, { popperTriggers: ['hover'], themes: { @@ -166,7 +168,8 @@ export default (element) => { itemLinkButtonLabel: '', helpInfoBellowLabel: false, showItemLinkButton: false, - termsAgreementMessage: '' + termsAgreementMessage: '', + isLayoutSteps: false }, beforeMount () { // Collection source settings @@ -194,6 +197,8 @@ export default (element) => { this.hideMetadataTypes = this.isParameterTrue('hide-metadata-types'); if (this.$el.attributes['help-info-bellow-label'] != undefined) this.helpInfoBellowLabel = this.isParameterTrue('help-info-bellow-label'); + if (this.$el.attributes['is-layout-steps'] != undefined) + this.isLayoutSteps = this.isParameterTrue('is-layout-steps'); // Form sections labels if (this.$el.attributes['document-section-label'] != undefined) diff --git a/src/views/gutenberg-blocks/blocks/item-submission-form/theme.vue b/src/views/gutenberg-blocks/blocks/item-submission-form/theme.vue index 4ff51ef2f..6e7e854e5 100644 --- a/src/views/gutenberg-blocks/blocks/item-submission-form/theme.vue +++ b/src/views/gutenberg-blocks/blocks/item-submission-form/theme.vue @@ -23,6 +23,7 @@ :help-info-bellow-label="$root.helpInfoBellowLabel ? $root.helpInfoBellowLabel : false" :show-terms-agreement-checkbox="$root.showTermsAgreementCheckbox ? $root.showTermsAgreementCheckbox : false" :terms-agreement-message="$root.termsAgreementMessage" + :is-layout-steps="$root.isLayoutSteps" /> @@ -55,6 +56,7 @@ export default { @import "../../../../../node_modules/buefy/src/scss/components/_dialog.scss"; @import "../../../../../node_modules/buefy/src/scss/components/_notices.scss"; @import "../../../../../node_modules/buefy/src/scss/components/_numberinput.scss"; + @import "../../../../../node_modules/buefy/src/scss/components/_steps.scss"; // Block level custom variables @import "../../../admin/scss/_custom_variables.scss"; From f6645d2f1057fba39fbd1953a7787898390b768e Mon Sep 17 00:00:00 2001 From: mateuswetah Date: Tue, 7 Feb 2023 10:39:03 -0300 Subject: [PATCH 02/14] Moves form to step where an error is present if exists. #736. --- .../item-submission/item-submission-form.vue | 52 ++++++++++++------- 1 file changed, 34 insertions(+), 18 deletions(-) diff --git a/src/views/gutenberg-blocks/blocks/item-submission-form/item-submission/item-submission-form.vue b/src/views/gutenberg-blocks/blocks/item-submission-form/item-submission/item-submission-form.vue index 6cad9554f..6af279a20 100644 --- a/src/views/gutenberg-blocks/blocks/item-submission-form/item-submission/item-submission-form.vue +++ b/src/views/gutenberg-blocks/blocks/item-submission-form/item-submission/item-submission-form.vue @@ -4,6 +4,7 @@ :is-full-page="false" :active.sync="isLoading" :can-cancel="false"/> +