StudyListItemPR.svelte 4.7 KB
Newer Older
1
<script lang="ts">
2
  import { stores } from "@sapper/app"
3
4
  import {
    iterStudyDistributors,
5
6
    iterStudyProducers,
    iterStudyTopicsClass,
7
  } from "../accessors"
8
  import { validateJsonResponse } from "../auditors/responses"
9
10
  import OrganizationName from "./OrganizationName.svelte"
  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

  export let study: Study
Emmanuel Raviart's avatar
Emmanuel Raviart committed
15

16
17
  const { session } = stores()

18
  $: distributors = [...iterStudyDistributors(study)]
19

20
  $: producers = [...iterStudyProducers(study)]
21

22
  $: topics = [...iterStudyTopicsClass(study)]
Emmanuel Raviart's avatar
Emmanuel Raviart committed
23

24
  $: user = $session.user as ZammadUser | undefined
25
26

  async function toggleCart() {
Emmanuel Raviart's avatar
Emmanuel Raviart committed
27
28
29
30
31
32
33
34
35
36
37
38
    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))
    }
39
    if (user !== undefined) {
40
      const response = await fetch("api/carts", {
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
        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
60
  }
61
62
63
64
65
66
67
68
69
70
71
72
</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"
    >
73
74
      <!--<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
75
      <div class="flex justify-between w-full h-auto mx-2">
76
77
78
        <a href="studies/{study.path}" target="_blank">
          {study.title}
        </a>
Emmanuel Raviart's avatar
Emmanuel Raviart committed
79
80
81
82
83
84
85
        <button on:click={toggleCart}>
          {#if $shoppingCart.includes(study.path)}
            Enlever du panier
          {:else}
            Ajouter au panier
          {/if}
        </button>
86
87
88
89
90
91
92
93
      </div>
    </div>

    <!-- zone middle grise avec une icone et les identifiants en rouge-->
    <div
      class=" flex flex-row h-14 w-auto mx-10 px-2 py-2  bg-gray-100 rounded-sm"
    >
      <div>
94
        <!--<img class="h-10 w-10" src="img/checklist-gray.png" alt="survey icon" />-->
95
        <img class="h-10 w-10" src="img/survey.png" alt="survey icon" />
96
97
      </div>
      <div class="h-10 w-auto pl-2 text-xs text-red-400">
98
        <!--
99
        <span class="w-12">Source: {study.file_path}</span><br />
100
        <span>ID: {study.id}</span> <br /> -->
101
        <!--
102
103
        <span>Version CodeBook : {study.codebook_version}</span> <br />
        -->
104
105
106
107
108
109
110
111
112
113
114
        {#if topics.length > 0 && topics.length < 3}
          <p class="pr-1">
            Thème :
            {#each topics as topic, index}
              {#if index > 0}—{/if}
              <span class="px-1">{topic}</span>
            {/each}
          </p>
        {:else if topics.length > 2}
          <p class="pr-1">Thèmes : multiples</p>
        {/if}
115

116
        {#if study.version != null}
117
          <p>
118
119
120
121
122
            {#if typeof study.version === "string"}
              {study.version}
            {:else if study.version != null}
              {study.version["#text"]} date : {study.version["@date"]}
            {/if}
123
          </p>
124
        {/if}
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
      </div>
    </div>

    <!-- Zone bottom blanche avec producer-->
    <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>
  </div>
</section>