پروژه Drag & Drop: به فصل جدید خوش آمدید!

Drag and Drop Project

پروژه ی Drag & Drop: به فصل جدید خوش آمدید!

سلام و عرض خسته نباشید خدمت شما همراهان گرامی روکسو. امیدوارم تا این قسمت از دوره آموزش جامع Typescript پیش آمده و خسته نشده باشید. خبر خوبی برایتان دارم! با یاد گرفتن Decorator ها تقریبا قسمت اعظم تایپ اسکریپت را یاد گرفته اید و قسمت های باقی مانده جزئیات و ریزه کاری هایی مثل namespace ها و استفاده از تایپ اسکریپت به همراه webpack و استفاده از تایپ اسکریپت با React و پکیج ها و کتابخانه های تایپ اسکریپت و ... می باشد. از آنجایی که قسمت اعظم کار را یاد گرفته ایم، من می خواهم یک فصل جدید را باز کنیم که در آن با دانش فصل های قبل یک پروژه عملی drag & drop بسازیم.

برای شروع کار یک پروژه خالی را برایتان آماده کرده ام که باید آن را از این لینک دانلود کنید. این یک قالب آماده و بدون کد است که برای شروع و داشتن ساختار پوشه ای یکسان به ما کمک خواهد کرد. پروژه ما قرار است یک پروژه متوسط باشد (نه خیلی پیچیده) که در آن می توانیم انواع پروژه های مورد نظر خودمان را در یک لیست قرار داده و فایل هایی را Drag & drop کنیم. نکته بعدی این است که من تمام کدهای این پروژه را در یک فایل می نویسم (app.ts) بنابراین این فایل بسیار بزرگ خواهد شد. زمانی که پروژه خود را تمام کردیم و به فصل بعد رفتیم، راه حل این مشکل را برایتان توضیح خواهم داد اما فعلا در یک فایل کار می کنیم.

من یک فرم ساده را برای شروع کار در نظر گرفته ام و کدهای HTML آن را از قبل نوشته ام. این کدها را در اختیار شما قرار می دهم و شما باید کدهای درون فایل index.html خود را حذف کرده و به جای آن ها این کدها را قرار دهید:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>ProjectManager</title>
    <link rel="stylesheet" href="app.css" />
    <script src="dist/app.js" defer></script>
  </head>
  <body>
    <template id="project-input">
      <form>
        <div class="form-control">
          <label for="title">Title</label>
          <input type="text" id="title" />
        </div>
        <div class="form-control">
          <label for="description">Description</label>
          <textarea id="description" rows="3"></textarea>
        </div>
        <div class="form-control">
          <label for="people">People</label>
          <input type="number" id="people" step="1" min="0" max="10" />
        </div>
        <button type="submit">ADD PROJECT</button>
      </form>
    </template>
    <template id="single-project">
      <li></li>
    </template>
    <template id="project-list">
      <section class="projects">
        <header>
          <h2></h2>
        </header>
        <ul></ul>
      </section>
    </template>
    <div id="app"></div>
  </body>
</html>

همانطور که می بینید یک فایل app.css داریم که کدهایش را در همین جلسه در اختیارتان قرار می دهم. سپس یک فایل dist/app.js داریم که قرار است فایل نهایی و کامپایل شده تایپ اسکریپت باشد. همچنین در این کدها تگ های <template> را می بینید. این تگ ها در مرورگرهای نسبتا جدید پشتیبانی می شوند و طوری عمل می کنند که کدهای درونشان هیچگاه render نشده و در مرورگر نمایش داده نمی شود. هدف این تگ ها چیست؟ هدف این است که محتوای درون این تگ ها به صورت پیش فرض نمایش داده نشود تا زمانی که خود ما با جاوا اسکریپت (یا طبیعتا تایپ اسکریپت) دستور بدهیم که وقت نمایش آن ها است.

من درون این تگ template یک فرم دارم که دارای سه input مختلف است: عنوان (title) پروژه، توضیحات (description) پروژه و تعداد افرادی (people) که می توانند به این پروژه منسوب شوند. در نهایت نیز دکمه Add Project را داریم که پروژه را ثبت می کند. سپس یک جفت تگ template دیگر داریم که <li> های ما را نگه می دارند و همچنین یک template دیگر که یک پروژه خاص را highlight می کند (زمانی که آن را بسازیم متوجه صحبت های من می شوید). حالا یک فایل دیگر به نام app.css بسازید (در پوشه src) و استایل های زیر را که از قبل برایتان نوشته ام در این فایل قرار دهید:

* {
  box-sizing: border-box;
}

html {
  font-family: sans-serif;
}

body {
  margin: 0;
}

label,
input,
textarea {
  display: block;
  margin: 0.5rem 0;
}

label {
  font-weight: bold;
}

input,
textarea {
  font: inherit;
  padding: 0.2rem 0.4rem;
  width: 100%;
  max-width: 30rem;
  border: 1px solid #ccc;
}

input:focus,
textarea:focus {
  outline: none;
  background: #fff5f9;
}

button {
  font: inherit;
  background: #ff0062;
  border: 1px solid #ff0062;
  cursor: pointer;
  color: white;
  padding: 0.75rem 1rem;
}

button:focus {
  outline: none;
}

button:hover,
button:active {
  background: #a80041;
  border-color: #a80041;
}

.projects {
  margin: 1rem;
  border: 1px solid #ff0062;
}

.projects header {
  background: #ff0062;
  height: 3.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

#finished-projects {
  border-color: #0044ff;
}

#finished-projects header {
  background: #0044ff;
}

.projects h2 {
  margin: 0;
  color: white;
}

.projects ul {
  list-style: none;
  margin: 0;
  padding: 1rem;
}

.projects li {
  box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.26);
  padding: 1rem;
  margin: 1rem;
}

.projects li h2 {
  color: #ff0062;
  margin: 0.5rem 0;
}

#finished-projects li h2 {
  color: #0044ff;
}

.projects li h3 {
  color: #575757;
  font-size: 1rem;
}

.project li p {
  margin: 0;
}

.droppable {
  background: #ffe3ee;
}

#finished-projects .droppable {
  background: #d6e1ff;
}

#user-input {
  margin: 1rem;
  padding: 1rem;
  border: 1px solid #ff0062;
  background: #f7f7f7;
}

کار ما این خواهد بود که ابتدا فرم خود را نمایش دهیم (به دلیل اینکه درون تگ های template قرار گرفته است و به طور پیش فرض نمایش داده نمی شود). سپس باید داده های کاربر را دریافت کند و پس از اعتبارسنجی مشخص کند که آیا این داده ها معتبر هستند یا خیر. برای این کار باید از یک event-listener برای دکمه Add Project استفاده کنیم. سپس داده ها درون یک آرایه یا شیء ذخیره شده و در قسمت لیست پروژه ها نمایش داده می شوند. در قسمت بعد این کار را شروع خواهیم کرد.