title: $:/core/ui/EditTemplate/fields
tags: $:/tags/EditTemplate

\whitespace trim

\procedure lingo-base() $:/language/EditTemplate/

\procedure delete-state-tiddlers() <$action-deletetiddler $filter="[<newFieldNameTiddler>] [<storeTitle>] [<searchListState>]"/>

\procedure focus-new-field-input() <$action-sendmessage $message="tm-focus-selector" $param=`[data-tiddler-title="$(storyTiddler)$"] .tc-edit-field-add-name-wrapper input` />

\procedure new-field-actions()
	<$action-setfield $tiddler=<<storyTiddler>> $field={{{ [<newFieldNameTiddler>get[text]] }}} $value={{{ [<newFieldValueTiddler>get[text]] }}} />
	<$action-deletetiddler $filter="[prefix[$:/temp/NewFieldValue]prefix<newFieldValueTiddlerPrefix>]"/>
	<<delete-state-tiddlers>>
	<<focus-new-field-input>>
\end

\procedure delete-field-actions()
	<$action-deletefield $field=<<currentField>>/>
	<<focus-new-field-input>>
\end

\procedure cancel-search-actions()
	<$let userInput={{{ [<storeTitle>get[text]] }}}>
		<%if [<newFieldNameTiddler>get[text]!match<userInput>] %>
			<$action-setfield $tiddler=<<newFieldNameTiddler>> text=<<userInput>>/>
			<$action-setfield $tiddler=<<refreshTitle>> text="yes"/>
		<%else%>
			<%if [<storeTitle>has[text]] [<newFieldNameTiddler>has[text]] %>
				<<delete-state-tiddlers>>	
			<%else%>
				<<cancel-delete-tiddler-actions 'cancel'>>
			<%endif%>
		<%endif%>
	</$let>
\end

\procedure new-field()
	<%if [<newFieldNameTiddler>get[text]!is[blank]] %>
		<$button actions="<<new-field-actions>>" tooltip={{$:/language/EditTemplate/Fields/Add/Button/Hint}}>
			<<lingo Fields/Add/Button>>
		</$button>	
	<%else%>
		<$button>	
			<<lingo Fields/Add/Button>>
		</$button>	
	<%endif%>
\end

\function tf.config-filter() [lookup:show[$:/config/EditTemplateFields/Visibility/]!match[hide]]

\function tf.field-cascade()
	[<currentField>]
	:cascade[all[shadows+tiddlers]tag[$:/tags/FieldEditorFilter]!is[draft]get[text]]
	:and[!is[blank]else{$:/core/ui/EditTemplate/fieldEditor/default}]
\end

\function tf.get-field-editor()
	[<newFieldNameTiddler>get[text]else[]]
	:cascade[all[shadows+tiddlers]tag[$:/tags/FieldEditorFilter]!is[draft]get[text]]
	:and[!is[blank]else{$:/core/ui/EditTemplate/fieldEditor/default}]
\end

\function tf.primary-list-exceptions() created creator draft.of draft.title modified modifier tags text title type

\function tf.list-selection-class(listSuffix) [<searchListState>get[text]removesuffix<listSuffix>match<currentField>then[tc-list-item-selected]]


<$let newFieldValueTiddlerPrefix={{{ [<newFieldValueTiddlerPrefix>!is[blank]else<qualify "$:/temp/NewFieldValue">] }}} >
	<div class="tc-edit-fields">
		<!-- table of user fields of the current tiddler -->
		<table class=`tc-edit-fields ${ [all[current]fields[]] :filter[tf.config-filter[]] :and[count[]match[0]then[tc-edit-fields-small]] }$`>
			<tbody>
				<$list filter="[all[current]fields[]] :and[sort[title]]" variable="currentField" storyview="pop">
					<%if [<currentField>tf.config-filter[]] %>
						<tr class="tc-edit-field">
							<td class="tc-edit-field-name">
								<$text text=<<currentField>>/>:
							</td>
							<td class="tc-edit-field-value">
								<$keyboard key="((delete-field))" actions="<<delete-field-actions>>">
									<$transclude tiddler=<<tf.field-cascade>> />
								</$keyboard>
							</td>
							<td class="tc-edit-field-remove">
								<$button actions="<<delete-field-actions>>"
									aria-label={{$:/language/EditTemplate/Field/Remove/Caption}}
									class="tc-btn-invisible"
									tooltip={{$:/language/EditTemplate/Field/Remove/Hint}}
								>
									{{$:/core/images/delete-button}}
								</$button>
							</td>
						</tr>
					<%endif%>
				</$list>
			</tbody>
		</table>
	</div>
	
	<!-- input control for new field name with selection dropdown -->
	<div class="tc-edit-field-add">
		<em class="tc-edit tc-small-gap-right">
			<<lingo Fields/Add/Prompt>>
		</em>
		<$let refreshTitle=<<qualify "$:/temp/fieldname/refresh">>
			storeTitle=<<newFieldNameInputTiddler>>
			searchListState=<<newFieldNameSelectionTiddler>>
		>
			<div class="tc-edit-field-add-name-wrapper">
				<$transclude $variable="keyboard-driven-input"
					cancelPopups="yes"
					class=`tc-edit-texteditor tc-popup-handle ${ [<newFieldNameTiddler>get[text]] :intersection[<storyTiddler>fields[]] :then[[tc-edit-field-exists]] }$`
					configTiddlerFilter="[[$:/config/EditMode/fieldname-filter]]"
					default=""
					focus={{{ [{!!draft.of}is[tiddler]then{$:/config/AutoFocusEdit}match[fields]then[true]] :else[{$:/config/AutoFocus}match[fields]then[true]] :else[[false]] }}}
					focusPopup=<<qualify "$:/state/popup/field-dropdown">>
					inputAcceptVariantActions=<<save-tiddler-actions>>
					inputCancelActions=<<cancel-search-actions>>
					placeholder={{$:/language/EditTemplate/Fields/Add/Name/Placeholder}}
					refreshTitle=<<refreshTitle>>
					selectionStateTitle=<<searchListState>>
					storeTitle=<<storeTitle>>
					tag="input"
					tabindex={{$:/config/EditTabIndex}}
					tiddler=<<newFieldNameTiddler>>
				/>
				<$button aria-label={{$:/language/EditTemplate/Field/Dropdown/Caption}}
					class="tc-btn-invisible tc-btn-dropdown tc-small-gap"
					popup=<<qualify "$:/state/popup/field-dropdown">>
					tooltip={{$:/language/EditTemplate/Field/Dropdown/Hint}}
				>
					{{$:/core/images/down-arrow}}
				</$button>
				<$reveal state=<<qualify "$:/state/popup/field-dropdown">> type="nomatch" text="" default="" tag="div" class="tc-block-dropdown tc-edit-type-dropdown">
					<$let tv-show-missing-links="yes">
						<$linkcatcher to=<<newFieldNameTiddler>>>
							<div class="tc-dropdown-item">
								<<lingo Fields/Add/Dropdown/User>>
							</div>
							<$let newFieldName={{{ [<storeTitle>get[text]] }}}
								primaryListFields={{{ [!is[shadow]!is[system]fields[]format:titlelist[]join[ ]] }}}
							>
								<$list filter="[enlist<primaryListFields>search:title<newFieldName>sort[]] :except[tf.primary-list-exceptions[]]" variable="currentField">
									<$link to=<<currentField>> class=<<tf.list-selection-class "-primaryList">> >
										<$text text=<<currentField>>/>
									</$link>
								</$list>
								<div class="tc-dropdown-item">
									<<lingo Fields/Add/Dropdown/System>>
								</div>
								<$list filter="[fields[]search:title<newFieldName>!enlist<primaryListFields>sort[]]" variable="currentField">
									<$link to=<<currentField>> class=<<tf.list-selection-class "-secondaryList">>>
										<$text text=<<currentField>>/>
									</$link>
								</$list>
							</$let>
						</$linkcatcher>
					</$let>
				</$reveal>
			</div>

			<!-- input control for new field content -->
			<$let currentFieldName={{{ [<newFieldNameTiddler>get[text]] }}}
				fieldEditor=<<tf.get-field-editor>>
				newFieldValueTiddler={{{ [<newFieldValueTiddlerPrefix>] [[/]] [<fieldEditor>sha256[16]] :and[join[]] }}}
				currentTiddler=<<newFieldValueTiddler>>
			>
				<span class="tc-edit-field-add-value tc-small-gap-right">
					<$keyboard key="((add-field))" actions="<<new-field-actions>>">
						<$transclude $tiddler=<<fieldEditor>> />
					</$keyboard>
				</span>
				<span class="tc-edit-field-add-button">
					<$transclude $variable="new-field"/>
				</span>
			</$let>
		</$let>
	</div>
</$let>