@digital-blueprint/formalize-app
Version:
[GitHub Repository](https://github.com/digital-blueprint/formalize-app) | [npmjs package](https://www.npmjs.com/package/@digital-blueprint/formalize-app) | [Unpkg CDN](https://unpkg.com/browse/@digital-blueprint/formalize-app/) | [Formalize Bundle](https:
246 lines (224 loc) • 18.6 kB
JavaScript
/*!
* License: LGPL-2.1-or-later
* Dependencies:
*
* @webcomponents/scoped-custom-element-registry: BSD-3-Clause
* @dbp-toolkit/app-shell: LGPL-2.1-or-later
* lit-html: BSD-3-Clause
* @dbp-toolkit/language-select: LGPL-2.1-or-later
* @dbp-toolkit/auth: LGPL-2.1-or-later
* @dbp-toolkit/theme-switcher: LGPL-2.1-or-later
* universal-router: MIT
* @dbp-toolkit/matomo: LGPL-2.1-or-later
* cssfilter: MIT
* xss: MIT
* @dbp-toolkit/form-elements: LGPL-2.1-or-later
*/
import{f as e,n as t,p as n,t as r,y as i}from"./shared/ref.DqB7ABXf.js";import{F as a,J as o,X as s,g as c,k as l,s as u}from"./shared/directive-helpers.C6Xz79AM.js";import{t as d}from"./shared/class-map.B2bFA_il.js";import{t as f}from"./shared/resource-select.Bx5DnWv9.js";import{a as p,i as m,n as h,s as g,t as _}from"./shared/string.qUj92gVq.js";import{n as v,t as y}from"./shared/boolean.pr9Nw5yS.js";import{t as b}from"./shared/courseselect.B3SACy-o.js";var x=class extends l(h){constructor(){super(),this.label=`A time field`}static get properties(){return{...super.properties}}static get styles(){return[...super.styles,s`
:host([layout-type='inline']) fieldset {
display: flex;
gap: var(--dbp-enum-label-gap, 1em);
align-items: center;
}
:host([layout-type='inline']) label {
margin-bottom: 0;
}
:host([layout-type='inline']) input[type='time'] {
width: min-content;
}
input[disabled] {
opacity: 0.5;
cursor: not-allowed;
}
`]}renderInput(){return o`
<input
type="time"
id="${this.formElementId}"
name="${this.name}"
.value="${this.value}"
="${this.handleInputValue}"
?disabled=${this.disabled}
?required=${this.required} />
`}},S=class extends f{constructor(){super(),this._personI18n=i(),this.resourcePath=`/base/people`,this.fetchMode=`search`,this.placeholder=this._getPersonPlaceholder()}update(e){e.has(`lang`)&&(this._personI18n.changeLanguage(this.lang),this.placeholder=this._getPersonPlaceholder()),super.update(e)}_getPersonPlaceholder(){return this._personI18n.t(`render-form.person-select.placeholder`)}getCollectionQueryParameters(e){return{sort:`familyName`,preparedFilter:`staffAccountsOnly`,includeLocal:`email`}}getSearchQueryParameters(e,t){return{search:t.trim()}}getItemQueryParameters(e){return{includeLocal:`email`}}formatResource(e,t){let n=t.givenName??``;t.familyName&&(n+=` ${t.familyName}`);let r=this.formatLocalData(t);return r&&(n+=` ${r}`),n}formatLocalData(e){let t=e.localData??{};return Object.values(t).length===0?``:`(${Object.values(t).join(`, `)})`}},C=class extends l(h){constructor(){super()}static get properties(){return{...super.properties}}static get scopedElements(){return{"dbp-person-resource-select":S}}handleInputValue(e){e.stopPropagation();let t=e.detail.object;if(t!=null){let e=`${t.givenName} ${t.familyName}`,n=`${t.localData.email}`;this.value=e+` `+n}else this.value=``;this.dispatchEvent(new CustomEvent(`change`,{detail:{value:t},bubbles:!0,composed:!0}))}renderInput(){return o`
<div class="control">
<dbp-person-resource-select
id="${this.name}-picker"
name="${this.name}Picker"
subscribe="lang, auth, entry-point-url"
="${this.handleInputValue}"></dbp-person-resource-select>
</div>
`}};a(`dbp-person-select-element`,C);var w=class extends f{constructor(){super(),this._roomI18n=i(),this.resourcePath=`/base/rooms`,this.fetchMode=`search`,this.placeholder=this._getRoomPlaceholder()}update(e){e.has(`lang`)&&(this._roomI18n.changeLanguage(this.lang),this.placeholder=this._getRoomPlaceholder()),super.update(e)}_getRoomPlaceholder(){return this._roomI18n.t(`render-form.room-select.placeholder`)}getSearchQueryParameters(e,t){return{search:t.trim()}}formatResource(e,t){return t.code??``}},T=class extends l(h){constructor(){super()}static get properties(){return{...super.properties}}static get scopedElements(){return{"dbp-room-select":w}}handleInputValue(e){let t=e.detail.object;this.value=t==null?``:t.code}renderInput(){return o`
<div class="control">
<dbp-room-select
id="${this.name}-picker"
name="${this.name}Picker"
subscribe="lang, auth, entry-point-url"
="${this.handleInputValue}"></dbp-room-select>
</div>
`}static get styles(){return[...super.styles,s`
/* For some reasons the selector chevron was very large */
select:not(.select) {
background-size: 1em;
}
`]}};a(`dbp-room-select-element`,T);var E=class extends p{getUrlSlug(){return`accessible-exams`}getFormComponent(){return D}getFormIdentifier(){return`0193cfbd-9b68-703a-81f9-c10d0e2375b7`}},D=class extends m{constructor(){super(),this.beginTimeRef=r(),this.examinerTextRef=r(),this.examinerTextDisabled=!1,this.hasAttemptedValidation=!1,this.wasSubmissionSuccessful=!1,this.handleValidationOnFocusOut=this.handleValidationOnFocusOut.bind(this)}static get properties(){return{...super.properties,examinerTextDisabled:{type:Boolean},hasAttemptedValidation:{type:Boolean,attribute:!1}}}async validateAndSendSubmission(e){return this.hasAttemptedValidation=!0,super.validateAndSendSubmission(e)}async handleValidationOnFocusOut(e){if(!this.hasAttemptedValidation)return;let t=this.formElement;this.isFormValid=await g(t)}connectedCallback(){super.connectedCallback(),this.updateComplete.then(()=>{this.addEventListener(`DbpFormalizeFormSubmission`,async e=>{let t=this._i18n,n=e.detail.formData;if(n.identifier=this.formData.identifier,this.createUUID(),n.uuid=this.formData.uuid,this.createExamID(),n.examid=this.formData.examid,n.examinerText)n.examiner=n.examinerText,n.email_examiner=``;else{let e=this.getExaminerMail(n.examiner);n.examiner=e[0]??``,n.email_examiner=e[1]??``}delete n.examinerText;let r=this.getExaminerMail(n.additionalExaminer);n.additionalExaminer=r[0],n.email_additionalExaminer=r[1],console.log(`Form submission data:`,n);try{if(this.isPostingSubmission=!0,this.wasSubmissionSuccessful)return;let e={form:`/formalize/forms/0193cfbd-9b68-703a-81f9-c10d0e2375b7`,dataFeedElement:JSON.stringify(n)},r=await fetch(this.entryPointUrl+`/formalize/submissions`,{method:`POST`,headers:{"Content-Type":`application/ld+json`,Authorization:`Bearer `+this.getToken()},body:JSON.stringify(e)});return r.ok?(this.wasSubmissionSuccessful=!0,u({summary:t.t(`success.success-title`),body:t.t(`success.form-saved-successfully`),type:`success`,timeout:5}),this._(`.form-title`).style.display=`none`,this._(`.description`).style.display=`none`,this._(`#accessible-exams-form`).style.display=`none`):(this.saveButtonEnabled=!0,await this.displayErrors(r)),this.submitted=this.wasSubmissionSuccessful,console.log(this.wasSubmissionSuccessful,r),r}catch(e){console.error(e.message)}finally{this.isPostingSubmission=!1}}),this.renderRoot.addEventListener(`focusout`,this.handleValidationOnFocusOut,{capture:!0})})}disconnectedCallback(){super.disconnectedCallback(),this.renderRoot.removeEventListener(`focusout`,this.handleValidationOnFocusOut,{capture:!0})}static get scopedElements(){return{...super.scopedElements,"dbp-form-string-element":_,"dbp-form-date-element":v,"dbp-form-time-element":x,"dbp-form-boolean-element":y,"dbp-course-select-element":b,"dbp-room-select-element":T,"dbp-person-select-element":C}}async fetchUser(e){return await fetch(this.entryPointUrl+`/base/people/`+e+`?includeLocal=email,matriculationNumber`,{headers:{"Content-Type":`application/ld+json`,Authorization:`Bearer `+this.getToken()}})}async fetchUserData(){console.log(`Fetching user data ...`);try{let e=await this.fetchUser(this.getUserId());if(!e.ok)throw Error(`Request failed with status ${e.status}: ${e.statusText}`,{cause:e});this.formData=await e.json(),this.formData.identifier=`${this.formData.identifier}`,this.formData.givenName=`${this.formData.givenName}`,this.formData.familyName=`${this.formData.familyName}`,this.formData.matriculationNumber=`${this.formData.localData.matriculationNumber}`,this.formData.email_student=`${this.formData.localData.email}`}catch(e){console.error(e.message)}}createUUID(){let e=self.crypto.randomUUID();console.log(`Created UUID: `+e),this.formData.uuid=e}createExamID(){let e=Math.floor(Math.random()*9e4)+1e4;console.log(`Created ExamID: `+e),this.formData.examid=e}getExaminerMail(e){let t=e.split(` `);return[t.slice(0,-1).join(` `),t[t.length-1]]}static get styles(){return[super.styles,c(),s`
.field-note {
margin-top: 0;
font-style: italic;
}
fieldset {
margin-bottom: 20px;
}
`]}render(){let e=this._i18n;console.log(`-- Render FormalizeFormElement --`),!this.formData.givenName&&!this.formData.familyName&&this.fetchUserData(),console.log(`this.formData`,this.formData);let n=this.formData||{};return o`
<form
id="accessible-exams-form"
class=${d({hidden:this.hideForm,"readonly-mode":this.readOnly,"edit-mode":!this.readOnly,"formalize-form":!0})}>
<div class="form-header">${this.getButtonRowHtml()}</div>
<h2 class="form-title">
${e.t(`render-form.forms.accessible-exams-form.title`)}
</h2>
<p class="description">
${e.t(`render-form.forms.accessible-exams-form.mandatory-fields`)}
<br />
${e.t(`render-form.forms.accessible-exams-form.exam-date`)}
</p>
<fieldset>
<legend>${e.t(`render-form.forms.accessible-exams-form.exam-data`)}</legend>
<dbp-course-select-element
subscribe="lang,auth,entry-point-url"
name="courseName"
label="${e.t(`render-form.forms.accessible-exams-form.course-name`)}"
value=${n.courseName||``}
required></dbp-course-select-element>
<dbp-form-string-element
subscribe="lang"
name="differentTerm"
label=${e.t(`render-form.forms.accessible-exams-form.different-term`)}
value=${n.differentTerm||``}
hidden></dbp-form-string-element>
<dbp-form-date-element
subscribe="lang"
name="date"
label=${e.t(`render-form.forms.accessible-exams-form.date`)}
.min=${new Date(Date.now()+12096e5)}
.customValidator=${t=>{let n=new Date(t),r=new Date(Date.now()+12096e5);return r.setHours(0,0,0),n<r?[e.t(`render-form.forms.accessible-exams-form.date-validation-error`)]:[]}}
value=${n.date||``}
required></dbp-form-date-element>
<dbp-form-time-element
${t(this.beginTimeRef)}
subscribe="lang"
name="beginTime"
label=${e.t(`render-form.forms.accessible-exams-form.begin-time`)}
value=${n.beginTime||``}
required></dbp-form-time-element>
<dbp-form-time-element
subscribe="lang"
name="endTime"
label=${e.t(`render-form.forms.accessible-exams-form.end-time`)}
.customValidator=${t=>{let n=this.beginTimeRef.value?.value;return n!==void 0&&n>t?[e.t(`render-form.forms.accessible-exams-form.time-validation-error`)]:[]}}
value=${n.endTime||``}
required></dbp-form-time-element>
<dbp-person-select-element
id="examiner-picker-element"
subscribe="lang"
name="examiner"
label=${e.t(`render-form.forms.accessible-exams-form.examiner`)}
value=${n.examiner||``}
="${async e=>{let t=!!e.detail.value;if(this.examinerTextDisabled=t,t&&this.examinerTextRef.value&&(this.examinerTextRef.value.value=``),this.hasAttemptedValidation){let e=this.formElement;this.isFormValid=await g(e)}}}"
.customValidator=${(e,t)=>this.examinerCustomValidation(t)}></dbp-person-select-element>
<dbp-form-string-element
subscribe="lang"
${t(this.examinerTextRef)}
name="examinerText"
label=${e.t(`render-form.forms.accessible-exams-form.examiner-text`)}
value=${n.examinerText||``}
?disabled=${this.examinerTextDisabled}
.customValidator=${(e,t)=>this.examinerCustomValidation(t)}></dbp-form-string-element>
<dbp-person-select-element
id="additional-examiner-picker-element"
subscribe="lang"
name="additionalExaminer"
label=${e.t(`render-form.forms.accessible-exams-form.additional-examiner`)}
value=${n.additionalExaminer||``}></dbp-person-select-element>
<dbp-room-select-element
subscribe="lang"
name="room"
label="${e.t(`render-form.forms.accessible-exams-form.room`)}"
value=${n.room||``}
hidden></dbp-room-select-element>
<dbp-form-string-element
subscribe="lang"
name="comment"
label=${e.t(`render-form.forms.accessible-exams-form.comment`)}
value=${n.comment||``}></dbp-form-string-element>
<dbp-form-boolean-element
subscribe="lang"
name="group"
label=${e.t(`render-form.forms.accessible-exams-form.group`)}
hidden
.state=${n.group||!1}></dbp-form-boolean-element>
<dbp-form-boolean-element
subscribe="lang"
name="online"
label=${e.t(`render-form.forms.accessible-exams-form.online`)}
.state=${n.online||!1}></dbp-form-boolean-element>
</fieldset>
<fieldset>
<legend>
${e.t(`render-form.forms.accessible-exams-form.personal-data`)}
</legend>
<dbp-form-string-element
subscribe="lang"
name="matriculationNumber"
label=${e.t(`render-form.forms.accessible-exams-form.matriculation-number`)}
value=${n.matriculationNumber||``}
disabled></dbp-form-string-element>
<dbp-form-string-element
subscribe="lang"
name="givenName"
label=${e.t(`render-form.forms.accessible-exams-form.given-name`)}
value=${n.givenName||``}
disabled></dbp-form-string-element>
<dbp-form-string-element
subscribe="lang"
name="familyName"
label=${e.t(`render-form.forms.accessible-exams-form.family-name`)}
value=${n.familyName||``}
disabled></dbp-form-string-element>
<dbp-form-string-element
subscribe="lang"
name="email_student"
label=${e.t(`render-form.forms.accessible-exams-form.email`)}
value=${n.email_student||``}
disabled></dbp-form-string-element>
</fieldset>
</form>
${this.renderResult(this.submitted)}
`}examinerCustomValidation(e){return e.examinerText===``&&e.examiner===``?[this._i18n.t(`render-form.forms.accessible-exams-form.examiner-validation-error`)]:[]}renderResult(t){let r=this._i18n;return t?o`
<div class="container">
<h2>
${r.t(`render-form.forms.accessible-exams-form.submission-result-thanks`)}
</h2>
<p>
${r.t(`render-form.forms.accessible-exams-form.submission-result-notification`)}
</p>
<div class="after-submission-button-container">
${this.canUserSubmitSubmission()?o`
<a
href="${n(this.formUrlSlug,this.lang)}"
class="button button--new-submission">
<dbp-icon name="plus" aria-hidden="true"></dbp-icon>
${r.t(`success.create-new-submission-button-label`)}
</a>
`:``}
${this.areSubmissionReadableAfterSubmission()?o`
<a
href="${e(this.formIdentifier,this.lang)}"
class="button button--back-to-submissions-list">
<dbp-icon name="list" aria-hidden="true"></dbp-icon>
${r.t(`success.back-to-submissions-list-button-label`)}
</a>
`:``}
</div>
</div>
`:o``}};export{E as default};
//# sourceMappingURL=accessibleExamsForm.js.map