StudyListItemPS.svelte 4.12 KB
Newer Older
1
<script lang="ts">
2
  import { stores } from "@sapper/app"
Emmanuel Raviart's avatar
Emmanuel Raviart committed
3
4
5
6
7
  // import {
  //   iterStudyDistributors,
  //   iterStudyProducers,
  //   iterStudyTopicsClass,
  // } from "../accessors"
8
  import { validateJsonResponse } from "../auditors/responses"
9
  //import OrganizationName from "./OrganizationName.svelte"
10
  import type { Study } from "../data"
Emmanuel Raviart's avatar
Emmanuel Raviart committed
11
  import { shoppingCart } from "../stores"
12
  import type { ZammadUser } from "../zammad"
13
14
15

  export let study: Study

16
17
  const { session } = stores()

Emmanuel Raviart's avatar
Emmanuel Raviart committed
18
19
20
21
  // $: distributors = [...iterStudyDistributors(study)]
  // $: producers = [...iterStudyProducers(study)]
  // $: topics = [...iterStudyTopicsClass(study)]

22
  $: user = $session.user as ZammadUser | undefined
23
24

  async function toggleCart() {
Emmanuel Raviart's avatar
Emmanuel Raviart committed
25
26
27
28
29
30
31
32
33
34
35
36
    let cart = $shoppingCart
    if (cart.includes(study.path)) {
      cart = cart.filter((path) => path !== study.path)
    } else {
      cart = [...cart, study.path]
    }
    $shoppingCart = cart
    if (cart.length === 0) {
      localStorage.removeItem("shoppingCart")
    } else {
      localStorage.setItem("shoppingCart", JSON.stringify(cart))
    }
37
    if (user !== undefined) {
38
      const response = await fetch("api/carts", {
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
        body: JSON.stringify({ paths: cart }, null, 2),
        credentials: "include",
        headers: {
          "Content-Type": "application/json; charset=utf-8",
        },
        method: "PUT",
      })
      const [result, error] = await validateJsonResponse(null)(response)
      if (error !== null) {
        console.error(
          response.status,
          `Error when setting user shopping cart to ${cart}:\n\n${JSON.stringify(
            error,
            null,
            2,
          )}\n\n${JSON.stringify(result, null, 2)}`,
        )
      }
    }
Emmanuel Raviart's avatar
Emmanuel Raviart committed
58
  }
59
60
61
62
63
64
65
66
67
68
69
70
</script>

<section
  class="h-auto w-auto  border  bg-white border-gray-100  mb-2 rounded shadow"
>
  <div
    class=" flex flex-col h-auto w-auto px-4 py-2 border-l-4 border-gray-400 rounded"
  >
    <!-- zone top blanche avec le titre en bold-->
    <div
      class="flex flex-row h-auto w-auto px-0 py-4 text-sm text-gray-500 font-bold text-left"
    >
71
72
      <!--<div class="flex-shrink-0 h-auto mx-2">{_("Dataset")}{_("colon")}</div>-->
      <div class="flex-shrink-0 h-auto mx-2">Titre</div>
Emmanuel Raviart's avatar
Emmanuel Raviart committed
73
      <div class="flex justify-between w-full h-auto mx-2">
74
75
76
        <a href="studies/{study.path}" target="_blank">
          {study.title}
        </a>
Emmanuel Raviart's avatar
Emmanuel Raviart committed
77
78
79
80
81
82
83
        <button on:click={toggleCart}>
          {#if $shoppingCart.includes(study.path)}
            Enlever du panier
          {:else}
            Ajouter au panier
          {/if}
        </button>
84
85
86
      </div>
    </div>

87
    <!-- zone middle grise avec une icone et les identifiants en rouge
88
89
90
91
92
    <div
      class=" flex flex-row h-14 w-auto mx-10 px-2 py-2  bg-gray-100 rounded-sm"
    >
      <div>
        <img class="h-10 w-10" src="img/checklist-gray.png" alt="survey icon" />
93
        <img class="h-10 w-10" src="img/dataset.png" alt="survey icon" />
94
95
      </div>
      <div class="h-10 w-auto pl-2 text-xs text-red-400">
Emmanuel Raviart's avatar
Emmanuel Raviart committed
96

97
        <span class="w-12">Source: {study.file_path}</span><br />
Emmanuel Raviart's avatar
Emmanuel Raviart committed
98
        <span>ID: {study.id}</span> <br />
99
100
101
102
103
        <span class="pr-1">Thème :</span>
        {#each topics as topic, index}
          {#if index > 0},{/if}
          <span>{topic}</span>
        {/each}
104
105
      </div>
    </div>
106
107
-->
    <!-- Zone bottom blanche avec producer
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
    <div
      class="flex flex-wrap h-auto w-auto  mx-10 px-2 py-2 text-xs text-gray-500"
    >
      {#if producers.length > 0}
        <p class="pr-1">
          <span class="pr-1">Producer(s) :</span>
          {#each producers as producer, index}
            {#if index > 0}—{/if}
            <span class="px-1">
              <OrganizationName organization={producer} />
            </span>
          {/each}
        </p>
      {/if}

      {#if distributors.length > 0}
        <p class="pr-1">
          <span class="pr-1">Diffuseur :</span>
          {#each distributors as distributor, index}
            {#if index > 0}—{/if}
            <span class="px-1">
              <OrganizationName organization={distributor} />,
            </span>
          {/each}
        </p>
      {/if}
    </div>
135
    -->
136
137
  </div>
</section>