Renovate bot | aa5fb8e | 2024-02-25 18:10:09 +0000 | [diff] [blame^] | 1 | import '@material/web/icon/icon.js'; |
Adrià Vilanova Martínez | e0d65f2 | 2022-11-06 18:49:35 +0100 | [diff] [blame] | 2 | import '@material/web/switch/switch.js'; |
| 3 | import '@material/web/textfield/outlined-text-field.js'; |
Renovate bot | aa5fb8e | 2024-02-25 18:10:09 +0000 | [diff] [blame^] | 4 | import '../../../../common/components/FormField.js'; |
Adrià Vilanova Martínez | f276ac7 | 2022-10-13 22:16:22 +0200 | [diff] [blame] | 5 | |
Adrià Vilanova Martínez | 41493f2 | 2022-11-06 22:38:21 +0100 | [diff] [blame] | 6 | import {css, html, LitElement, nothing} from 'lit'; |
Adrià Vilanova Martínez | f276ac7 | 2022-10-13 22:16:22 +0200 | [diff] [blame] | 7 | import {createRef, ref} from 'lit/directives/ref.js'; |
| 8 | |
Renovate bot | aa5fb8e | 2024-02-25 18:10:09 +0000 | [diff] [blame^] | 9 | import {SHARED_MD3_STYLES} from '../../../../common/styles/md3.js'; |
Adrià Vilanova Martínez | f276ac7 | 2022-10-13 22:16:22 +0200 | [diff] [blame] | 10 | import * as pb from '../../../proto/main_pb.js'; |
| 11 | |
| 12 | export default class WFActionReplyWithCR extends LitElement { |
| 13 | static properties = { |
| 14 | action: {type: Object}, |
| 15 | readOnly: {type: Boolean}, |
Adrià Vilanova Martínez | e0d65f2 | 2022-11-06 18:49:35 +0100 | [diff] [blame] | 16 | _importerWindow: {type: Object, state: true}, |
Adrià Vilanova Martínez | f276ac7 | 2022-10-13 22:16:22 +0200 | [diff] [blame] | 17 | }; |
| 18 | |
Renovate bot | aa5fb8e | 2024-02-25 18:10:09 +0000 | [diff] [blame^] | 19 | static styles = [ |
| 20 | SHARED_MD3_STYLES, |
| 21 | css` |
| 22 | .form-line { |
| 23 | display: flex; |
| 24 | flex-direction: row; |
| 25 | align-items: center; |
| 26 | margin-block: 1em; |
| 27 | gap: .5rem; |
| 28 | } |
| 29 | |
| 30 | .select-cr-btn { |
| 31 | --md-outlined-button-icon-size: 24px; |
| 32 | } |
| 33 | `, |
| 34 | ]; |
Adrià Vilanova Martínez | e0d65f2 | 2022-11-06 18:49:35 +0100 | [diff] [blame] | 35 | |
Adrià Vilanova Martínez | f276ac7 | 2022-10-13 22:16:22 +0200 | [diff] [blame] | 36 | cannedResponseRef = createRef(); |
| 37 | subscribeRef = createRef(); |
| 38 | markAsAnswerRef = createRef(); |
| 39 | |
| 40 | constructor() { |
| 41 | super(); |
| 42 | this.action = new pb.workflows.Action.ReplyWithCRAction; |
Adrià Vilanova Martínez | e0d65f2 | 2022-11-06 18:49:35 +0100 | [diff] [blame] | 43 | this._importerWindow = undefined; |
| 44 | |
| 45 | window.addEventListener('message', e => { |
| 46 | if (e.source === this._importerWindow && |
| 47 | e.data?.action === 'importCannedResponse') { |
| 48 | this._cannedResponseIdString = e.data?.cannedResponseId; |
| 49 | this._importerWindow?.close?.(); |
| 50 | } |
| 51 | }); |
Adrià Vilanova Martínez | f276ac7 | 2022-10-13 22:16:22 +0200 | [diff] [blame] | 52 | } |
| 53 | |
| 54 | render() { |
| 55 | return html` |
Adrià Vilanova Martínez | e0d65f2 | 2022-11-06 18:49:35 +0100 | [diff] [blame] | 56 | <div class="form-line"> |
Adrià Vilanova Martínez | f276ac7 | 2022-10-13 22:16:22 +0200 | [diff] [blame] | 57 | <md-outlined-text-field ${ref(this.cannedResponseRef)} |
| 58 | type="number" |
| 59 | label="Canned response ID" |
| 60 | required |
| 61 | value=${this._cannedResponseIdString} |
| 62 | ?readonly=${this.readOnly} |
| 63 | @input=${this._cannedResponseIdChanged}> |
| 64 | </md-outlined-text-field> |
Adrià Vilanova Martínez | 41493f2 | 2022-11-06 22:38:21 +0100 | [diff] [blame] | 65 | ${this.readOnly ? nothing : html` |
| 66 | <md-outlined-button |
Renovate bot | aa5fb8e | 2024-02-25 18:10:09 +0000 | [diff] [blame^] | 67 | class="select-cr-btn" |
Adrià Vilanova Martínez | 41493f2 | 2022-11-06 22:38:21 +0100 | [diff] [blame] | 68 | @click=${this._openCRImporter}> |
Renovate bot | aa5fb8e | 2024-02-25 18:10:09 +0000 | [diff] [blame^] | 69 | <md-icon slot="icon" filled>more</md-icon> |
| 70 | Select CR |
Adrià Vilanova Martínez | 41493f2 | 2022-11-06 22:38:21 +0100 | [diff] [blame] | 71 | </md-outlined-button> |
| 72 | `} |
Adrià Vilanova Martínez | e0d65f2 | 2022-11-06 18:49:35 +0100 | [diff] [blame] | 73 | </div> |
| 74 | <div class="form-line"> |
Renovate bot | aa5fb8e | 2024-02-25 18:10:09 +0000 | [diff] [blame^] | 75 | <twpt-form-field> |
Adrià Vilanova Martínez | f276ac7 | 2022-10-13 22:16:22 +0200 | [diff] [blame] | 76 | <md-switch ${ref(this.subscribeRef)} |
| 77 | ?selected=${this.subscribe} |
| 78 | ?disabled=${this.readOnly} |
Renovate bot | aa5fb8e | 2024-02-25 18:10:09 +0000 | [diff] [blame^] | 79 | @change=${this._subscribeChanged}/> |
| 80 | </md-switch> |
| 81 | <span slot="label"> |
| 82 | Subscribe to thread |
| 83 | </span> |
| 84 | </twpt-form-field> |
Adrià Vilanova Martínez | e0d65f2 | 2022-11-06 18:49:35 +0100 | [diff] [blame] | 85 | </div> |
| 86 | <div class="form-line"> |
Renovate bot | aa5fb8e | 2024-02-25 18:10:09 +0000 | [diff] [blame^] | 87 | <twpt-form-field> |
Adrià Vilanova Martínez | f276ac7 | 2022-10-13 22:16:22 +0200 | [diff] [blame] | 88 | <md-switch ${ref(this.markAsAnswerRef)} |
| 89 | ?selected=${this.markAsAnswer} |
| 90 | ?disabled=${this.readOnly} |
Renovate bot | aa5fb8e | 2024-02-25 18:10:09 +0000 | [diff] [blame^] | 91 | @change=${this._markAsAnswerChanged}/> |
| 92 | </md-switch> |
| 93 | <span slot="label"> |
| 94 | Mark as answer |
| 95 | </span> |
| 96 | </twpt-form-field> |
Adrià Vilanova Martínez | e0d65f2 | 2022-11-06 18:49:35 +0100 | [diff] [blame] | 97 | </div> |
Adrià Vilanova Martínez | f276ac7 | 2022-10-13 22:16:22 +0200 | [diff] [blame] | 98 | `; |
| 99 | } |
| 100 | |
Adrià Vilanova Martínez | e0d65f2 | 2022-11-06 18:49:35 +0100 | [diff] [blame] | 101 | disconnectedCallback() { |
| 102 | super.disconnectedCallback(); |
| 103 | this._importerWindow?.close?.(); |
| 104 | } |
| 105 | |
Adrià Vilanova Martínez | f276ac7 | 2022-10-13 22:16:22 +0200 | [diff] [blame] | 106 | checkValidity() { |
| 107 | return this.cannedResponseRef.value.reportValidity(); |
| 108 | } |
| 109 | |
Adrià Vilanova Martínez | f276ac7 | 2022-10-13 22:16:22 +0200 | [diff] [blame] | 110 | _dispatchUpdateEvent() { |
| 111 | // Request an update for this component |
| 112 | this.requestUpdate(); |
| 113 | |
| 114 | // Transmit to other components that the action has changed |
| 115 | const e = new Event( |
| 116 | 'replywithcr-action-updated', {bubbles: true, composed: true}); |
| 117 | this.renderRoot.dispatchEvent(e); |
| 118 | } |
| 119 | |
| 120 | _cannedResponseIdChanged() { |
| 121 | this._cannedResponseIdString = this.cannedResponseRef.value.value; |
| 122 | } |
| 123 | |
| 124 | _subscribeChanged() { |
| 125 | this.subscribe = this.subscribeRef.value.selected; |
| 126 | } |
| 127 | |
| 128 | _markAsAnswerChanged() { |
| 129 | this.markAsAnswer = this.markAsAnswerRef.value.selected; |
| 130 | } |
| 131 | |
Adrià Vilanova Martínez | e0d65f2 | 2022-11-06 18:49:35 +0100 | [diff] [blame] | 132 | _openCRImporter() { |
| 133 | if (!(this._importerWindow?.closed ?? true)) |
| 134 | this._importerWindow?.close?.(); |
| 135 | |
| 136 | this._importerWindow = window.open( |
| 137 | 'https://support.google.com/s/community/cannedresponses?TWPTImportToWorkflow&TWPTSelectedId=' + |
| 138 | encodeURIComponent(this._cannedResponseIdString), |
| 139 | '', 'popup,width=720,height=540'); |
| 140 | } |
| 141 | |
Adrià Vilanova Martínez | f276ac7 | 2022-10-13 22:16:22 +0200 | [diff] [blame] | 142 | get cannedResponseId() { |
| 143 | return this.action.getCannedResponseId() ?? 0; |
| 144 | } |
| 145 | |
| 146 | set cannedResponseId(value) { |
| 147 | this.action.setCannedResponseId(value); |
| 148 | this._dispatchUpdateEvent(); |
| 149 | } |
| 150 | |
| 151 | get _cannedResponseIdString() { |
| 152 | let id = this.cannedResponseId; |
| 153 | if (id == 0) return ''; |
| 154 | return id.toString(); |
| 155 | } |
| 156 | |
| 157 | set _cannedResponseIdString(value) { |
| 158 | this.cannedResponseId = parseInt(value); |
| 159 | } |
| 160 | |
| 161 | get subscribe() { |
| 162 | return this.action.getSubscribe(); |
| 163 | } |
| 164 | |
| 165 | set subscribe(value) { |
| 166 | this.action.setSubscribe(value); |
| 167 | this._dispatchUpdateEvent(); |
| 168 | } |
| 169 | |
| 170 | get markAsAnswer() { |
| 171 | return this.action.getMarkAsAnswer(); |
| 172 | } |
| 173 | |
| 174 | set markAsAnswer(value) { |
| 175 | this.action.setMarkAsAnswer(value); |
| 176 | this._dispatchUpdateEvent(); |
| 177 | } |
| 178 | } |
| 179 | window.customElements.define('wf-action-reply-with-cr', WFActionReplyWithCR); |