Skip to content

Commit

Permalink
feat: replace table wth a list of cards
Browse files Browse the repository at this point in the history
  • Loading branch information
@mirkobrombin
mirkobrombin committed Apr 29, 2024
1 parent 68f66fa commit 7513616
Show file tree
Hide file tree
Showing 4 changed files with 49 additions and 77 deletions.
10 changes: 5 additions & 5 deletions src/components/RecipeDetails.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<div class="flex flex-wrap py-4">
<div class="flex flex-col w-full lg:w-1/3 p-2">
<div class="w-full p-2">
<div class="bg-white rounded shadow flex justify-between items-center p-4">
<div class="bg-white rounded-lg shadow flex justify-between items-center p-4">
<div class="flex items-center">
<i class="material-icons text-gray-700 mr-2">extension</i>
<span class="font-semibold">Modules</span>
Expand All @@ -11,7 +11,7 @@
</div>
</div>
<div class="w-full p-2">
<div class="bg-white rounded shadow flex justify-between items-center p-4">
<div class="bg-white rounded-lg shadow flex justify-between items-center p-4">
<div class="flex items-center">
<i class="material-icons text-gray-700 mr-2">layers</i>
<span class="font-semibold">Stages</span>
Expand All @@ -20,7 +20,7 @@
</div>
</div>
<div class="w-full p-2">
<div class="bg-white rounded shadow flex justify-between items-center p-4">
<div class="bg-white rounded-lg shadow flex justify-between items-center p-4">
<div class="flex items-center">
<i class="material-icons text-gray-700 mr-2">settings</i>
<span class="font-semibold">Args</span>
Expand All @@ -29,7 +29,7 @@
</div>
</div>
<div class="w-full p-2">
<div class="bg-white rounded shadow flex justify-between items-center p-4">
<div class="bg-white rounded-lg shadow flex justify-between items-center p-4">
<div class="flex items-center">
<i class="material-icons text-gray-700 mr-2">play_arrow</i>
<span class="font-semibold">Runs</span>
Expand All @@ -39,7 +39,7 @@
</div>
</div>
<div class="w-full lg:w-2/3 p-2">
<div class="bg-white rounded shadow">
<div class="bg-white rounded-lg shadow">
<div class="p-4 flex items-center">
<i class="material-icons text-gray-700 mr-2">pie_chart</i>
<span class="font-semibold">Modules Usage</span>
Expand Down
102 changes: 37 additions & 65 deletions src/components/RecipeModules.vue
View file
Original file line number Diff line number Diff line change
@@ -1,76 +1,48 @@
<template>
<div class="py-4">
<div v-if="!moduleDetails">
<div class="flex items-center">
<div class="flex items-center mb-4 gap-2">
<span class="material-icons text-gray-500 text-lg">search</span>
<input class="form-input ml-2 border rounded p-2 flex-grow" type="search" v-model="searchQuery"
placeholder="Search modules" />
<input
class="bg-white dark:bg-gray-700 p-2 rounded text-sm border border-gray-300 shadow focus:outline-none flex-1"
type="search" v-model="searchQuery" placeholder="Search modules" />
</div>

<div v-for="(group, groupIndex) in moduleGroups" :key="groupIndex">
<h2 class="text-xl font-bold py-4" v-if="groupIndex != 'nested'">Stage "{{ groupIndex }}"</h2>
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Name</th>
<th
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Type</th>
<th
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
</th>
</tr>
</thead>
<tbody v-for="(module, index) in group" :key="index" class="bg-white divide-y divide-gray-200">
<tr :class="hasNestedModules(module) ? 'bg-gray-100' : ''">
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<span v-if="hasNestedModules(module)" @click="toggleNested(module)">
<i class="material-icons cursor-pointer">
{{ isNestedExpanded(module) ? 'keyboard_arrow_down' :
'keyboard_arrow_right'
}}
</i>
</span>
{{ module.name }}
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<span
class="inline-flex items-center text-xs font-medium mr-2 px-2.5 py-0.5 rounded gap-2"
:class="getModuleTypeColors(module.type)">
<span class="material-icons align-middle text-base">
{{ getModuleTypeClass(module.type) }}
</span>
{{ module.type }}
</span>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<div class="flex items-center space-x-2">
<button class="py-2 px-3 rounded" @click="showModuleDetails(module)"
title="Show module details">
<i class="material-icons text-md">list</i>
</button>
<copy-btn :textToCopy="getRouteToModule(module)"
title="Copy link to module"></copy-btn>
</div>
</td>
</tr>
<tr v-if="hasNestedModules(module) && isNestedExpanded(module)" class="bg-gray-50">
<td colspan="3" class="px-6 py-4 whitespace-nowrap">
<recipe-modules :recipe="module" :moduleDetails="moduleDetails"
@showModuleDetails="showModuleDetails"
@closeModuleDetails="goBack"></recipe-modules>
</td>
</tr>
</tbody>
</table>
<h2 class="text-xl font-bold mb-4" v-if="groupIndex != 'nested'">Stage "{{ groupIndex }}"</h2>
<div class="flex flex-col gap-4">
<div v-for="(module, index) in group.filter(module => module.name.toLowerCase().includes(searchQuery.toLowerCase()))"
:key="index" class="bg-white rounded-lg shadow overflow-hidden transition-all">
<div class="py-2 px-6">
<div class="flex items-center justify-between">
<i class="material-icons cursor-pointer" v-if="hasNestedModules(module)"
@click="toggleNested(module)"
:title="isNestedExpanded(module) ? 'Collapse child modules' : 'Expand child modules'">
{{ isNestedExpanded(module) ? 'keyboard_arrow_down' :
'keyboard_arrow_right' }}
</i>
<h3 class="text-lg font-medium text-gray-900 flex-1">{{ module.name }}</h3>
<span class="inline-flex items-center mr-2 px-2.5 py-0.5 rounded gap-2"
:class="getModuleTypeColors(module.type)">
<span class="material-icons align-middle text-base">{{
getModuleTypeClass(module.type) }}</span>
{{ module.type }}
</span>
<button class="py-2 px-3 rounded mr-2" @click="showModuleDetails(module)"
title="Show module details">
<i class="material-icons text-md">list</i>
</button>
<copy-btn :textToCopy="getRouteToModule(module)" title="Copy link to module"></copy-btn>
</div>
</div>
<div v-if="hasNestedModules(module) && isNestedExpanded(module)"
class="bg-gray-100 border border-gray-200 p-4 mx-4 mb-4 rounded-lg shadow-md flex-1">
<recipe-modules :recipe="module" :moduleDetails="moduleDetails"
@showModuleDetails="showModuleDetails" @closeModuleDetails="goBack"></recipe-modules>
</div>
</div>
</div>

</div>

</div>
Expand Down
2 changes: 1 addition & 1 deletion src/views/HomeView.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-4">
<div v-if="atlasStore.layout === 'list'">
<div class="overflow-x-auto">
<table class="min-w-full bg-white rounded shadow">
<table class="min-w-full bg-white rounded-lg shadow">
<thead class="bg-gray-200">
<tr>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-800 uppercase tracking-wider">
Expand Down
12 changes: 6 additions & 6 deletions src/views/RecipeView.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,35 +30,35 @@
</section>

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-4">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow relative overflow-hidden">
<ul class="flex divide-x divide-gray-200 dark:divide-gray-700">
<li class="cursor-pointer flex-grow text-center"
:class="{ 'bg-gray-200 dark:bg-gray-700': curTab === 'details' }">
<a @click="curTab = 'details'"
class="block py-4 rounded-t-lg text-sm font-medium leading-5 text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600"
class="block py-4 text-sm font-medium leading-5 text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600"
:class="{ 'text-gray-900 dark:text-white': curTab === 'details' }">Details</a>
</li>
<li class="cursor-pointer flex-grow text-center items-stretch"
:class="{ 'bg-gray-200 dark:bg-gray-700': curTab === 'snippet' }">
<a @click="curTab = 'snippet'"
class="flex justify-center py-4 rounded-t-lg text-sm font-medium leading-5 text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600"
class="flex justify-center py-4 text-sm font-medium leading-5 text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600"
:class="{ 'text-gray-900 dark:text-white': curTab === 'snippet' }">Recipe</a>
</li>
<li class="cursor-pointer flex-grow text-center items-stretch"
:class="{ 'bg-gray-200 dark:bg-gray-700': curTab === 'modules' }">
<a @click="curTab = 'modules'"
class="flex justify-center py-4 rounded-t-lg text-sm font-medium leading-5 text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600"
class="flex justify-center py-4 text-sm font-medium leading-5 text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600"
:class="{ 'text-gray-900 dark:text-white': curTab === 'modules' }">Modules</a>
</li>
<li class="cursor-pointer flex-grow text-center items-stretch"
:class="{ 'bg-gray-200 dark:bg-gray-700': curTab === 'runs' }">
<a @click="curTab = 'runs'"
class="flex justify-center py-4 rounded-t-lg text-sm font-medium leading-5 text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600"
class="flex justify-center py-4 text-sm font-medium leading-5 text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600"
:class="{ 'text-gray-900 dark:text-white': curTab === 'runs' }">Runs</a>
</li>
<li class="cursor-pointer flex-grow text-center items-stretch">
<a :href="recipeSourceUrl" target="_blank"
class="flex justify-center gap-2 py-4 rounded-t-lg text-sm font-medium leading-5 text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">
class="flex justify-center gap-2 py-4 text-sm font-medium leading-5 text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">
<span>Source</span>
<i class="material-icons text-sm">open_in_new</i>
</a>
Expand Down

0 comments on commit 7513616

Please sign in to comment.