From 63faac94dd7ad6422d6655d7a6c43b12300165b9 Mon Sep 17 00:00:00 2001
From: Erwan Rouchet <rouchet@teklia.com>
Date: Wed, 13 Sep 2023 05:58:17 +0000
Subject: [PATCH] Fix Show all models toggle
---
src/views/Model/List.vue | 33 +++++++++++++++++++--------------
1 file changed, 19 insertions(+), 14 deletions(-)
diff --git a/src/views/Model/List.vue b/src/views/Model/List.vue
index 1a8e288e3..84b310402 100644
--- a/src/views/Model/List.vue
+++ b/src/views/Model/List.vue
@@ -1,30 +1,33 @@
<template>
<main class="container is-fluid">
<div class="columns">
- <div class="field column is-one-third">
+ <div class="column is-one-third">
<router-link
- class="button is-primary is-pulled-right"
+ class="button is-primary is-pulled-right mb-2"
:to="{ name: 'model-create' }"
v-if="trainingMode"
>
Create a model
</router-link>
- <div v-if="compatibleWorkerId">
- <!-- All bulma-switch does is build a visually dynamic toggle and hide the actual checkbox away; sometimes it doesn't
- work, like here, perhaps because of is-pulled-right. So the entire toggle + label block is clickable and changes the
- value of allModels -->
- <div
- class="is-pulled-right"
- v-on:click="allModels = !allModels"
- >
+ <div v-if="compatibleWorkerId" class="field has-text-right">
+ <div class="control">
+ <!--
+ bulma-switch hides the checkbox entirely because it can't be easily styled in CSS,
+ and instead uses :before and :after on the label to show a switch.
+ The ID on the checkbox and the `for` attribute on the label allows the label to trigger
+ the checkbox and properly switch the switch.
+ This component is used in multiple places, including in WorkerRun selection, so the modal
+ can be present multiple times on the page, so we have to make sure the IDs are unique to
+ avoid triggering only the switch of the first modal ever opened on the page.
+ -->
<input
- id="allModelsToggle"
+ :id="`allModelsToggle${uid}`"
type="checkbox"
class="switch is-rounded is-info"
- :checked="allModels"
+ v-model="allModels"
/>
- <label for="allModelsToggle">Show all models</label>
+ <label :for="`allModelsToggle${uid}`">Show all models</label>
</div>
<p class="help all-models-help is-pulled-right mb-2">By default, only models compatible with the selected worker are shown.</p>
</div>
@@ -101,6 +104,7 @@
<script lang="ts">
import { defineComponent } from 'vue'
import { mapActions } from 'pinia'
+import { uniqueId } from 'lodash'
import { ModelListParameters } from '@/api'
import { errorParser } from '@/helpers'
@@ -160,7 +164,8 @@ export default defineComponent({
selectedModel: null,
page: 1,
nameFilter: '',
- allModels: false
+ allModels: false,
+ uid: uniqueId()
}),
methods: {
...mapActions(useNotificationStore, ['notify']),
--
GitLab