<commit_before><template>
	<div class="ui modal">
		<div class="ui segment">
			<form class="ui form">
				<div class="required field">
					<label>Subject</label>
					<input type="text" name="subject" v-model="task.subject">
				</div>
				<div class="field">
					<label>Description</label>
					<textarea rows="2" v-model="task.description"></textarea>
				</div>
				<div class="fields">
					<div class="seven wide required field">
						<label>Owner</label>
						<select class="ui fluid search dropdown" name="owner" v-model="task.owner">
							<option v-for="ow in owners" :value="ow.id">{{ow.name}}</option>
						</select>
					</div>
					<div class="required field">
						<label>Due Date</label>
						<input 
							id="taskDueDate"
							name="dueDate" 
							type="text" 
							v-model="task.dueDate" 
							data-toggle="datepicker">
					</div>
					<div class="required field">
						<label>Status</label>
						<select class="ui fluid search dropdown" name="status" v-model="task.status">
							<option value="backlog">Backlog</option>
							<option value="doing">Doing</option>
							<option value="blocked">Blocked</option>
							<option value="done">Done</option>
							<option value="archived">Archived</option>
						</select>
					</div>
				</div>
				<div class="fields">
					<div
						v-for="tag in _tags"
						:class="getTagClass(tag)">
						{{formattedTag(tag)}}
						<i v-on:click="deleteTag(tag)" class="close icon"></i>
					</div>
				</div>
				<div class="fields">
					<div class="field" v-if="newTag">
						<div class="ui mini input">
							<input
								v-on:keyup.enter="saveNewTag"
								v-on:keyup.esc="cancelNewTag"
								type="text"
								name="newTag">
						</div>
					</div>
					<div class="field" v-if="newTag">
						<chrome-picker
							v-model="colors"
							:palette="palette"
							ref="colorpicker" />
					</div>
					<a v-if="!newTag" v-on:click="addNewTag" class="ui left pointing basic label">
						<i class="plus icon"></i> New tag
					</a>
				</div>
			</form>
			<button v-on:click="saveTask()" class="ui button">Save</button>
		</div>
	</div>
</template>

<script type="text/javascript">
	import _ from 'lodash'
	import $ from 'jquery'
	import moment from 'moment'
	import '@fengyuanchen/datepicker'
	import '@fengyuanchen/datepicker/dist/datepicker.css'
	import { Compact } from 'vue-color'

	export default {
		components: {
			'chrome-picker': Compact
		},
		props: ['owners'],
		data () {
			return {
				task: {
					id: null,
					subject: null,
					description: null,
					status: 'backlog',
					owner: null,
					dueDate: null,
					tags: []
				},
				newTag: false,
				palette: ['#db2828', '#f2711c', '#fbbd08', '#b5cc18', '#21ba45', '#00b5ad', '#2185d0', '#a333c8', '#e03997', '#a5673f', '#1b1c1d'],
				semanticColors: ['red', 'orange', 'yellow', 'olive', 'green', 'teal', 'blue', 'purple', 'pink', 'brown', 'black'],
				colors: {
					hex: '#194d33',
					hsl: {
						h: 150,
						s: 0.5,
						l: 0.2,
						a: 1
					},
					hsv: {
						h: 150,
						s: 0.66,
						v: 0.30,
						a: 1
					},
					rgba: {
						r: 25,
						g: 77,
						b: 51,
						a: 1
					},
					a: 1
				}
			}
		},
		computed: {
			_tags () {
				return this.task && this.task.tags
					? this.task.tags
					: []
			}
		},
		methods: {
			show (task) {
				this.newTag = false
				if (task) {
					_.assign(this.task, task)
				} else {
					this.task.id = null
					this.task.subject = null
					this.task.description = null
					this.task.status = 'backlog'
					this.task.owner = null
					this.task.dueDate = null
					this.task.tags = []
				}
				$(this.$el).modal('show')
			},
			hide () {
				$(this.$el).modal('hide')
			},
			saveTask () {
				this.$emit('updateTask', this.task)
				this.hide()
			},
			formattedTag (tag) {
				if (typeof tag === 'object') {
					return tag.value
				} else {
					return tag
				}
			},
			getTagClass (tag) {
				if (typeof tag === 'object') {
					return 'ui ' + tag.color + ' label'
				} else {
					return 'ui label'
				}
			},
			addNewTag () {
				this.newTag = true
			},
			saveNewTag (e) {
				this.newTag = false
				const pickedColorIndex = this.$refs.colorpicker.pick ? this.palette.indexOf(this.$refs.colorpicker.pick.toLowerCase()) : -1
				const color = pickedColorIndex > -1 ? this.semanticColors[pickedColorIndex] : ''
				const value = e.srcElement.value
				this.task.tags.push({value, color})
				this.$emit('addTag', this.task, {value, color})
			},
			cancelNewTag () {
				this.newTag = false
			},<commit_msg>Fix the letter case of hex codes <commit_after><template>
	<div class="ui modal">
		<div class="ui segment">
			<form class="ui form">
				<div class="required field">
					<label>Subject</label>
					<input type="text" name="subject" v-model="task.subject">
				</div>
				<div class="field">
					<label>Description</label>
					<textarea rows="2" v-model="task.description"></textarea>
				</div>
				<div class="fields">
					<div class="seven wide required field">
						<label>Owner</label>
						<select class="ui fluid search dropdown" name="owner" v-model="task.owner">
							<option v-for="ow in owners" :value="ow.id">{{ow.name}}</option>
						</select>
					</div>
					<div class="required field">
						<label>Due Date</label>
						<input 
							id="taskDueDate"
							name="dueDate" 
							type="text" 
							v-model="task.dueDate" 
							data-toggle="datepicker">
					</div>
					<div class="required field">
						<label>Status</label>
						<select class="ui fluid search dropdown" name="status" v-model="task.status">
							<option value="backlog">Backlog</option>
							<option value="doing">Doing</option>
							<option value="blocked">Blocked</option>
							<option value="done">Done</option>
							<option value="archived">Archived</option>
						</select>
					</div>
				</div>
				<div class="fields">
					<div
						v-for="tag in _tags"
						:class="getTagClass(tag)">
						{{formattedTag(tag)}}
						<i v-on:click="deleteTag(tag)" class="close icon"></i>
					</div>
				</div>
				<div class="fields">
					<div class="field" v-if="newTag">
						<div class="ui mini input">
							<input
								v-on:keyup.enter="saveNewTag"
								v-on:keyup.esc="cancelNewTag"
								type="text"
								name="newTag">
						</div>
					</div>
					<div class="field" v-if="newTag">
						<chrome-picker
							v-model="colors"
							:palette="palette"
							ref="colorpicker" />
					</div>
					<a v-if="!newTag" v-on:click="addNewTag" class="ui left pointing basic label">
						<i class="plus icon"></i> New tag
					</a>
				</div>
			</form>
			<button v-on:click="saveTask()" class="ui button">Save</button>
		</div>
	</div>
</template>

<script type="text/javascript">
	import _ from 'lodash'
	import $ from 'jquery'
	import moment from 'moment'
	import '@fengyuanchen/datepicker'
	import '@fengyuanchen/datepicker/dist/datepicker.css'
	import { Compact } from 'vue-color'

	export default {
		components: {
			'chrome-picker': Compact
		},
		props: ['owners'],
		data () {
			return {
				task: {
					id: null,
					subject: null,
					description: null,
					status: 'backlog',
					owner: null,
					dueDate: null,
					tags: []
				},
				newTag: false,
				palette: ['#DB2828', '#F2711C', '#FBBD08', '#B5CC18', '#21BA45', '#00B5AD', '#2185D0', '#A333C8', '#E03997', '#A5673F', '#1B1C1D'],
				semanticColors: ['red', 'orange', 'yellow', 'olive', 'green', 'teal', 'blue', 'purple', 'pink', 'brown', 'black'],
				colors: {
					hex: '#21BA45',
					hsl: {
						h: 134,
						s: 0.7,
						l: 0.43,
						a: 1
					},
					hsv: {
						h: 134,
						s: 0.82,
						v: 0.73,
						a: 1
					},
					rgba: {
						r: 33,
						g: 186,
						b: 69,
						a: 1
					},
					a: 1
				}
			}
		},
		computed: {
			_tags () {
				return this.task && this.task.tags
					? this.task.tags
					: []
			}
		},
		methods: {
			show (task) {
				this.newTag = false
				if (task) {
					_.assign(this.task, task)
				} else {
					this.task.id = null
					this.task.subject = null
					this.task.description = null
					this.task.status = 'backlog'
					this.task.owner = null
					this.task.dueDate = null
					this.task.tags = []
				}
				$(this.$el).modal('show')
			},
			hide () {
				$(this.$el).modal('hide')
			},
			saveTask () {
				this.$emit('updateTask', this.task)
				this.hide()
			},
			formattedTag (tag) {
				if (typeof tag === 'object') {
					return tag.value
				} else {
					return tag
				}
			},
			getTagClass (tag) {
				if (typeof tag === 'object') {
					return 'ui ' + tag.color + ' label'
				} else {
					return 'ui label'
				}
			},
			addNewTag () {
				this.newTag = true
			},
			saveNewTag (e) {
				this.newTag = false
				const pickedColorIndex = this.$refs.colorpicker.pick ? this.palette.indexOf(this.$refs.colorpicker.pick) : -1
				const color = pickedColorIndex > -1 ? this.semanticColors[pickedColorIndex] : ''
				const value = e.srcElement.value
				if (!this.task.id) {
					this.task.tags.push({value, color})
				}
				this.$emit('addTag', this.task, {value, color})
			},
			cancelNewTag () {
				this.newTag = false
			},
{'fraction_non_alphanumeric': 0.17989993474004787, 'fraction_numerical': 0.016423754622579945, 'mean_word_length': 2.3485069191551347, 'pattern_counts': {'":': 0, '<': 149, '<?xml version=': 0, '>': 151, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6861877', 'n_tokens_mistral': 4613, 'n_tokens_neox': 3227, 'n_words': 681}