From aa3048351b5f1df11efed8c695ffb21fbd48156d Mon Sep 17 00:00:00 2001
From: rotimi_best <best@classroomio.com>
Date: Thu, 21 Jan 2021 22:23:23 +0200
Subject: [PATCH] Upvote update + complete ui of ask question

---
 src/components/AskPage.svelte | 83 +++++++++++++++++++++++++++++++++++
 src/components/Vote.svelte    |  9 +++-
 src/routes/ask.svelte         | 43 +++++++++++++-----
 3 files changed, 123 insertions(+), 12 deletions(-)
 create mode 100644 src/components/AskPage.svelte

diff --git a/src/components/AskPage.svelte b/src/components/AskPage.svelte
new file mode 100644
index 00000000..b4c8e455
--- /dev/null
+++ b/src/components/AskPage.svelte
@@ -0,0 +1,83 @@
+<script context="module">
+  import ChevronDown24 from "carbon-icons-svelte/lib/ChevronDown24";
+	import TextEditor from "./TextEditor.svelte";
+
+  let questionTitle = '';
+  let questionTags = [];
+  let questionDescription = '';
+  let facultyFilterOpened = true;
+
+  const faculties = [
+    'ИЭКСУ', 'ИМБТ', 'ИМИ', 'ИПТДМ', 'ИИИР', 'ГФ', 'ХТФ', 'ИДЗО', 'УИИ', 'УНИ'
+  ];
+
+  function handleFacultyFilters() {
+    console.log('clicking')
+    facultyFilterOpened = facultyFilterOpened ? false : true;
+  }
+  let things = [
+		{ id: 1, color: 'darkblue' },
+		{ id: 2, color: 'indigo' },
+		{ id: 3, color: 'deeppink' },
+		{ id: 4, color: 'salmon' },
+		{ id: 5, color: 'gold' }
+	];
+
+	function handleClick() {
+    things = things.slice(1);
+    console.log('things', things)
+	}
+</script>
+
+<svelte:head>
+	<title>Спросить собшество вопрос</title>
+</svelte:head>
+
+
+<div class="lg:w-3/5 mx-auto md:mx-10 lg:mb-20">
+  <h2 class="pb-2">Спросить собшество вопрос</h2>
+  <div class="my-1 px-1">
+    <div class="mb-5">
+      <button on:click={handleClick}>
+        Remove first thing
+      </button>
+      {#each things as thing}
+        <p style="color: {thing.color}">{thing.id}</p>
+      {/each}
+      <button
+        class="flex border rounded-lg border-grey py-1 px-3 focus:outline-none focus:border-gray-400 focus:bg-gray-200"
+        on:click={handleFacultyFilters}
+      >
+        <span>Факултеты</span> <ChevronDown24 class="ml-2" />
+      </button>
+
+      {#if facultyFilterOpened}
+        <div class="w-48 bg-white border border-grey rounded-lg mt-2 py-2">
+          {#each faculties as faculty}
+            <div class="block px-4 py-2 border-b">
+              <input type="checkbox" class="border border-gray checked:bg-blue-600 checked:border-transparent mr-1 cursor-pointer">
+              <span>{faculty}</span>
+            </div>
+          {/each}
+        </div>
+      {/if}
+    </div>
+    <input
+      class="title rounded-lg border border-1 border-gray p-2 w-full focus:outline-none"
+      error="false"
+      autocomplete="off"
+      placeholder="Title"
+      aria-label="Title"
+      aria-describedby="title-input-validation"
+      type="text"
+      name="discussion[title]"
+      id="discussion_title"
+      value="{questionTitle}"
+    >
+  </div>
+
+  <TextEditor
+    value="{questionDescription}"
+    placeholder="Задайте вопрос или начните разговор"
+  />
+</div>
\ No newline at end of file
diff --git a/src/components/Vote.svelte b/src/components/Vote.svelte
index 35b211b5..a24df5ef 100644
--- a/src/components/Vote.svelte
+++ b/src/components/Vote.svelte
@@ -3,10 +3,17 @@
 	import Chip from "./Chip.svelte";
 
 	export let value = 0;
+
+	function upVote() {
+		value = value + 1;
+	}
 </script>
 
 
-<div class="vote">
+<div
+	class="vote border-none cursor-pointer"
+	on:click={upVote}
+>
   <ArrowUp16 />
   <Chip value="{value}" />
 </div>
diff --git a/src/routes/ask.svelte b/src/routes/ask.svelte
index a5d452b6..5d682122 100644
--- a/src/routes/ask.svelte
+++ b/src/routes/ask.svelte
@@ -1,14 +1,23 @@
-<script context="module">
+<script>
   import ChevronDown24 from "carbon-icons-svelte/lib/ChevronDown24";
 	import TextEditor from "../components/TextEditor.svelte";
 
   let questionTitle = '';
   let questionTags = [];
   let questionDescription = '';
+  let facultyFilterOpened = false;
 
   const faculties = [
     'ИЭКСУ', 'ИМБТ', 'ИМИ', 'ИПТДМ', 'ИИИР', 'ГФ', 'ХТФ', 'ИДЗО', 'УИИ', 'УНИ'
   ];
+  let checkbox = faculties.reduce((acc, cur) => {
+    acc[cur] = false;
+    return acc;
+  }, {});
+
+  function handleFacultyFilters() {
+    facultyFilterOpened = facultyFilterOpened ? false : true;
+  }
 </script>
 
 <svelte:head>
@@ -17,17 +26,29 @@
 
 <div class="lg:w-3/5 mx-auto md:mx-10 lg:mb-20">
   <h2 class="pb-2">Спросить собшество вопрос</h2>
-  <div class="my-1 px-1">
-    <button class="flex border rounded-lg border-grey py-1 px-3 focus:outline-none focus:border-gray-400 focus:bg-gray-200">
-      <span>Факултеты</span> <ChevronDown24 class="ml-2" />
-    </button>
-    <div class="w-48 bg-white border border-grey rounded-lg mt-2 py-2">
-      {#each faculties as faculty}
-        <div class="block px-4 py-2 border-b">
-          <input type="checkbox" class="border border-gray checked:bg-blue-600 checked:border-transparent mr-1 cursor-pointer">
-          <span>{faculty}</span>
+  <div class="my-1 flex">
+    <div class="mr-1">
+      <button
+        class="flex border rounded-lg border-grey py-2 px-3 focus:outline-none focus:border-gray-400 focus:bg-gray-200 relative"
+        on:click={handleFacultyFilters}
+      >
+        <span>Факултеты</span> <ChevronDown24 class="ml-2" />
+      </button>
+
+      {#if facultyFilterOpened}
+        <div class="w-48 bg-white border border-grey rounded-lg mt-2 py-2 absolute">
+          {#each faculties as faculty}
+            <div class="block px-4 py-2 border-b">
+              <input
+                type="checkbox"
+                class="border border-gray checked:bg-blue-600 checked:border-transparent mr-1 cursor-pointer"
+                bind:checked={checkbox[faculty]}
+              >
+              <span>{faculty}</span>
+            </div>
+          {/each}
         </div>
-      {/each}
+      {/if}
     </div>
     <input
       class="title rounded-lg border border-1 border-gray p-2 w-full focus:outline-none"