|  |  | @ -16,55 +16,57 @@ | 
			
		
	
		
			
				
					|  |  |  |     </div> | 
			
		
	
		
			
				
					|  |  |  | 
 | 
			
		
	
		
			
				
					|  |  |  |     <!-- Project Details --> | 
			
		
	
		
			
				
					|  |  |  |     <form> | 
			
		
	
		
			
				
					|  |  |  |       <!-- Image - (see design model) Empty --> | 
			
		
	
		
			
				
					|  |  |  |     <!-- Image - (see design model) Empty --> | 
			
		
	
		
			
				
					|  |  |  | 
 | 
			
		
	
		
			
				
					|  |  |  |       <!-- Image - Populated --> | 
			
		
	
		
			
				
					|  |  |  |       <div class="relative mb-4 rounded-md overflow-hidden"> | 
			
		
	
		
			
				
					|  |  |  |         <div class="absolute top-3 right-3 flex gap-2"> | 
			
		
	
		
			
				
					|  |  |  |           <button | 
			
		
	
		
			
				
					|  |  |  |             class="text-md font-bold uppercase bg-blue-600 text-white px-3 py-2 rounded" | 
			
		
	
		
			
				
					|  |  |  |           > | 
			
		
	
		
			
				
					|  |  |  |             <fa icon="pen" class="fa-fw"></fa> | 
			
		
	
		
			
				
					|  |  |  |           </button> | 
			
		
	
		
			
				
					|  |  |  |           <button | 
			
		
	
		
			
				
					|  |  |  |             class="text-md font-bold uppercase bg-red-600 text-white px-3 py-2 rounded" | 
			
		
	
		
			
				
					|  |  |  |           > | 
			
		
	
		
			
				
					|  |  |  |             <fa icon="trash-can" class="fa-fw"></fa> | 
			
		
	
		
			
				
					|  |  |  |           </button> | 
			
		
	
		
			
				
					|  |  |  |         </div> | 
			
		
	
		
			
				
					|  |  |  |         <img src="https://picsum.photos/800/400" class="w-full" /> | 
			
		
	
		
			
				
					|  |  |  |       </div> | 
			
		
	
		
			
				
					|  |  |  | 
 | 
			
		
	
		
			
				
					|  |  |  |       <input | 
			
		
	
		
			
				
					|  |  |  |         type="text" | 
			
		
	
		
			
				
					|  |  |  |         placeholder="Project Name" | 
			
		
	
		
			
				
					|  |  |  |         class="block w-full rounded border border-slate-400 mb-4 px-3 py-2" | 
			
		
	
		
			
				
					|  |  |  |       /> | 
			
		
	
		
			
				
					|  |  |  | 
 | 
			
		
	
		
			
				
					|  |  |  |       <textarea | 
			
		
	
		
			
				
					|  |  |  |         placeholder="Description" | 
			
		
	
		
			
				
					|  |  |  |         class="block w-full rounded border border-slate-400 mb-4 px-3 py-2" | 
			
		
	
		
			
				
					|  |  |  |         rows="5" | 
			
		
	
		
			
				
					|  |  |  |       ></textarea> | 
			
		
	
		
			
				
					|  |  |  |       <div class="text-xs text-slate-500 italic -mt-3 mb-4"> | 
			
		
	
		
			
				
					|  |  |  |         88/500 max. characters | 
			
		
	
		
			
				
					|  |  |  |       </div> | 
			
		
	
		
			
				
					|  |  |  | 
 | 
			
		
	
		
			
				
					|  |  |  |       <div class="mt-8"> | 
			
		
	
		
			
				
					|  |  |  |         <input | 
			
		
	
		
			
				
					|  |  |  |           type="submit" | 
			
		
	
		
			
				
					|  |  |  |           class="block w-full text-center text-lg font-bold uppercase bg-blue-600 text-white px-2 py-3 rounded-md mb-2" | 
			
		
	
		
			
				
					|  |  |  |           value="Save Project" | 
			
		
	
		
			
				
					|  |  |  |         /> | 
			
		
	
		
			
				
					|  |  |  |     <!-- Image - Populated --> | 
			
		
	
		
			
				
					|  |  |  |     <div class="relative mb-4 rounded-md overflow-hidden"> | 
			
		
	
		
			
				
					|  |  |  |       <div class="absolute top-3 right-3 flex gap-2"> | 
			
		
	
		
			
				
					|  |  |  |         <button | 
			
		
	
		
			
				
					|  |  |  |           class="text-md font-bold uppercase bg-blue-600 text-white px-3 py-2 rounded" | 
			
		
	
		
			
				
					|  |  |  |         > | 
			
		
	
		
			
				
					|  |  |  |           <fa icon="pen" class="fa-fw"></fa> | 
			
		
	
		
			
				
					|  |  |  |         </button> | 
			
		
	
		
			
				
					|  |  |  |         <button | 
			
		
	
		
			
				
					|  |  |  |           type="button" | 
			
		
	
		
			
				
					|  |  |  |           class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md" | 
			
		
	
		
			
				
					|  |  |  |           class="text-md font-bold uppercase bg-red-600 text-white px-3 py-2 rounded" | 
			
		
	
		
			
				
					|  |  |  |         > | 
			
		
	
		
			
				
					|  |  |  |           Cancel | 
			
		
	
		
			
				
					|  |  |  |           <fa icon="trash-can" class="fa-fw"></fa> | 
			
		
	
		
			
				
					|  |  |  |         </button> | 
			
		
	
		
			
				
					|  |  |  |       </div> | 
			
		
	
		
			
				
					|  |  |  |     </form> | 
			
		
	
		
			
				
					|  |  |  |       <img src="https://picsum.photos/800/400" class="w-full" /> | 
			
		
	
		
			
				
					|  |  |  |     </div> | 
			
		
	
		
			
				
					|  |  |  | 
 | 
			
		
	
		
			
				
					|  |  |  |     <input | 
			
		
	
		
			
				
					|  |  |  |       type="text" | 
			
		
	
		
			
				
					|  |  |  |       placeholder="Project Name" | 
			
		
	
		
			
				
					|  |  |  |       class="block w-full rounded border border-slate-400 mb-4 px-3 py-2" | 
			
		
	
		
			
				
					|  |  |  |       v-modal="projectName" | 
			
		
	
		
			
				
					|  |  |  |     /> | 
			
		
	
		
			
				
					|  |  |  | 
 | 
			
		
	
		
			
				
					|  |  |  |     <textarea | 
			
		
	
		
			
				
					|  |  |  |       placeholder="Description" | 
			
		
	
		
			
				
					|  |  |  |       class="block w-full rounded border border-slate-400 mb-4 px-3 py-2" | 
			
		
	
		
			
				
					|  |  |  |       rows="5" | 
			
		
	
		
			
				
					|  |  |  |       v-model="description" | 
			
		
	
		
			
				
					|  |  |  |     ></textarea> | 
			
		
	
		
			
				
					|  |  |  |     <div class="text-xs text-slate-500 italic -mt-3 mb-4"> | 
			
		
	
		
			
				
					|  |  |  |       88/500 max. characters | 
			
		
	
		
			
				
					|  |  |  |     </div> | 
			
		
	
		
			
				
					|  |  |  | 
 | 
			
		
	
		
			
				
					|  |  |  |     <div class="mt-8"> | 
			
		
	
		
			
				
					|  |  |  |       <button | 
			
		
	
		
			
				
					|  |  |  |         class="block w-full text-center text-lg font-bold uppercase bg-blue-600 text-white px-2 py-3 rounded-md mb-2" | 
			
		
	
		
			
				
					|  |  |  |         @click="onSaveProjectClick()" | 
			
		
	
		
			
				
					|  |  |  |       > | 
			
		
	
		
			
				
					|  |  |  |         Save Project | 
			
		
	
		
			
				
					|  |  |  |       </button> | 
			
		
	
		
			
				
					|  |  |  |       <button | 
			
		
	
		
			
				
					|  |  |  |         type="button" | 
			
		
	
		
			
				
					|  |  |  |         class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md" | 
			
		
	
		
			
				
					|  |  |  |         @click="onCancelClick()" | 
			
		
	
		
			
				
					|  |  |  |       > | 
			
		
	
		
			
				
					|  |  |  |         Cancel | 
			
		
	
		
			
				
					|  |  |  |       </button> | 
			
		
	
		
			
				
					|  |  |  |     </div> | 
			
		
	
		
			
				
					|  |  |  |   </section> | 
			
		
	
		
			
				
					|  |  |  | </template> | 
			
		
	
		
			
				
					|  |  |  | 
 | 
			
		
	
	
		
			
				
					|  |  | @ -74,5 +76,14 @@ import { Options, Vue } from "vue-class-component"; | 
			
		
	
		
			
				
					|  |  |  | @Options({ | 
			
		
	
		
			
				
					|  |  |  |   components: {}, | 
			
		
	
		
			
				
					|  |  |  | }) | 
			
		
	
		
			
				
					|  |  |  | export default class NewEditProjectView extends Vue {} | 
			
		
	
		
			
				
					|  |  |  | export default class NewEditProjectView extends Vue { | 
			
		
	
		
			
				
					|  |  |  |   projectName = ""; | 
			
		
	
		
			
				
					|  |  |  |   description = ""; | 
			
		
	
		
			
				
					|  |  |  |   public async onSaveProjectClick() { | 
			
		
	
		
			
				
					|  |  |  |     console.log("Placeholder"); | 
			
		
	
		
			
				
					|  |  |  |   } | 
			
		
	
		
			
				
					|  |  |  |   public onCancelClick() { | 
			
		
	
		
			
				
					|  |  |  |     this.$router.back(); | 
			
		
	
		
			
				
					|  |  |  |   } | 
			
		
	
		
			
				
					|  |  |  | } | 
			
		
	
		
			
				
					|  |  |  | </script> | 
			
		
	
	
		
			
				
					|  |  | 
 |