|
1 | 1 | <!-- eslint-disable vue/no-v-html --> |
2 | 2 | <template> |
3 | | - <div class="boxShadow w-full"> |
| 3 | + <div class="boxShadow w-96"> |
4 | 4 | <img |
5 | | - class="object-cover h-48 w-96 rounded-t-lg" |
| 5 | + class="object-cover h-48 w-full rounded-t-lg" |
6 | 6 | :src=" |
7 | 7 | item.picture && item.picture != '' |
8 | 8 | ? item.picture |
9 | 9 | : 'https://cdn.discordapp.com/attachments/894865078824890408/1073218625718198342/Fof04PpacAQePOW.png' |
10 | 10 | " |
11 | 11 | alt="" |
12 | 12 | /> |
13 | | - <div v-if="item.owner === user._id || user.role === 2" class="absolute top-2 left-2"> |
| 13 | + <div v-if="item.owner._id === user._id || user.role === 2" class="absolute top-2 left-2"> |
14 | 14 | <button |
15 | 15 | type="button" |
16 | 16 | @click="deleteArticle(item._id)" |
|
19 | 19 | <DeleteLogo /> |
20 | 20 | </button> |
21 | 21 | </div> |
22 | | - <div v-if="item.owner === user._id || user.role === 2" class="absolute top-2 right-2"> |
| 22 | + <div v-if="item.owner._id === user._id || user.role === 2" class="absolute top-2 right-2"> |
23 | 23 | <button |
24 | 24 | type="button" |
25 | 25 | @click="editArticle(item._id)" |
|
29 | 29 | </button> |
30 | 30 | </div> |
31 | 31 | <div class="pt-3 pb-2" v-if="item.type == 'Tuto' && (user.role == 2 || user.role == 3)"> |
32 | | - <span |
33 | | - v-if="item.status == 'Accepted'" |
34 | | - class="bg-green-100 text-green-800 text-xs font-medium mr-2 px-2.5 py-0.5 rounded dark:bg-green-900 dark:text-green-300" |
35 | | - > |
36 | | - Accepté |
37 | | - </span> |
38 | | - <span |
39 | | - v-else |
40 | | - class="bg-yellow-100 text-yellow-800 text-xs font-medium mr-2 px-2.5 py-0.5 rounded dark:bg-yellow-900 dark:text-yellow-300" |
| 32 | + <div |
| 33 | + v-if="item.status != 'Accepted'" |
| 34 | + class="flex flex-row items-center justify-evenly space-x-2" |
41 | 35 | > |
42 | | - En attente |
43 | | - </span> |
| 36 | + <button |
| 37 | + @click="updateStatus(item._id, 'Accepted')" |
| 38 | + class="text-green-700 border border-green-700 focus:ring-4 focus:outline-none font-small rounded-lg text-2xs p-1 text-center inline-flex items-center dark:text-green-500" |
| 39 | + > |
| 40 | + <Validate /> |
| 41 | + </button> |
| 42 | + |
| 43 | + <span |
| 44 | + class="bg-yellow-100 text-yellow-800 text-xs font-medium mr-2 px-2.5 py-0.5 rounded dark:bg-yellow-900 dark:text-yellow-300" |
| 45 | + > |
| 46 | + En attente |
| 47 | + </span> |
| 48 | + |
| 49 | + <button |
| 50 | + @click="deleteArticle(item._id)" |
| 51 | + class="text-red-700 border border-red-700 focus:ring-4 focus:outline-none font-small rounded-lg text-2xs p-1 text-center inline-flex items-center dark:text-red-500" |
| 52 | + > |
| 53 | + <Cross class="!fill-red-700" /> |
| 54 | + </button> |
| 55 | + </div> |
| 56 | + <div v-else class="flex flex-row items-center justify-evenly space-x-2"> |
| 57 | + <span |
| 58 | + v-if="item.status == 'Accepted'" |
| 59 | + class="bg-green-100 text-green-800 text-xs font-medium mr-2 px-2.5 py-0.5 rounded dark:bg-green-900 dark:text-green-300" |
| 60 | + > |
| 61 | + Accepté |
| 62 | + </span> |
| 63 | + <button |
| 64 | + @click="updateStatus(item._id, 'Pending')" |
| 65 | + class="text-yellow-400 border border-yellow-400 focus:ring-4 focus:outline-none font-small rounded-lg text-2xs p-1 text-center inline-flex items-center dark:text-yellow-500" |
| 66 | + > |
| 67 | + <Pause class="!fill-yellow-400" /> |
| 68 | + </button> |
| 69 | + </div> |
44 | 70 | </div> |
45 | | - <div class="pt-3 pb-2" v-else> |
| 71 | + <div class="pt-3.5 pb-3.5" v-else> |
46 | 72 | <span |
47 | 73 | class="bg-blue-100 text-blue-800 text-xs font-medium mr-2 px-2.5 py-0.5 rounded dark:bg-blue-900 dark:text-blue-300" |
48 | 74 | > |
|
51 | 77 | </div> |
52 | 78 | <div class="pt-2 pb-5"> |
53 | 79 | <a href="#"> |
54 | | - <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white"> |
| 80 | + <h5 |
| 81 | + :class="item.title.length > 40 && 'text-xl'" |
| 82 | + class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white capitalize" |
| 83 | + > |
55 | 84 | {{ item.title ? item.title : 'Pas de titre spécifié' }} |
56 | 85 | </h5> |
57 | 86 | </a> |
58 | 87 | <p |
| 88 | + :class="item.descriptions.length > 60 && 'text-md'" |
59 | 89 | class="min-h-[5rem] flex flex-col justify-center items-center justify-center font-normal text-gray-700 dark:text-gray-400" |
60 | 90 | > |
61 | 91 | {{ item.descriptions ? item.descriptions : 'Pas de description spécifiée' }} |
62 | 92 | </p> |
63 | 93 | </div> |
64 | | - <div class="pt-2 pb-5 flex flex-row justify-around items-center"> |
| 94 | + <div class="pt-2 pb-5 flex flex-row justify-evenly items-center"> |
65 | 95 | <button |
66 | 96 | type="button" |
67 | 97 | @click="addLike(item._id)" |
|
117 | 147 | </div> |
118 | 148 | </button> |
119 | 149 | </div> |
120 | | - |
121 | | - <!-- Validation --> |
122 | | - <div |
123 | | - v-if="item.type == 'Tuto' && (user.role == 2 || user.role == 3)" |
124 | | - class="flex flex-row place-content-evenly mb-3 items-center text-dark-primary dark:text-light-primary" |
125 | | - > |
126 | | - <div class="flex flex-row space-x-2"> |
127 | | - <button |
128 | | - v-if="item.status != 'Accepted'" |
129 | | - @click="updateStatus(item._id, 'Accepted')" |
130 | | - class="text-green-700 border border-green-700 focus:ring-4 focus:outline-none font-medium rounded-lg text-xs p-2 text-center inline-flex items-center dark:text-green-500" |
131 | | - > |
132 | | - <Validate /> |
133 | | - </button> |
134 | | - <button |
135 | | - v-else |
136 | | - @click="updateStatus(item._id, 'Pending')" |
137 | | - class="text-yellow-400 border border-yellow-400 focus:ring-4 focus:outline-none font-medium rounded-lg text-xs p-2 text-center inline-flex items-center dark:text-yellow-500" |
138 | | - > |
139 | | - <Pause class="!fill-yellow-400" /> |
140 | | - </button> |
141 | | - <button |
142 | | - v-if="item.status != 'Accepted'" |
143 | | - @click="deleteArticle(item._id)" |
144 | | - class="text-red-700 border border-red-700 focus:ring-4 focus:outline-none font-medium rounded-lg text-xs p-2 text-center inline-flex items-center dark:text-red-500" |
145 | | - > |
146 | | - <Cross class="!fill-red-700" /> |
147 | | - </button> |
148 | | - </div> |
149 | | - </div> |
150 | 150 | </div> |
151 | 151 | </template> |
152 | 152 |
|
|
0 commit comments