🔨 Fix weekday selection and quick link to get disabled

thunderbird · Sep 26, 2024 · 4668fcd · 4668fcd
1 parent 4a03b98
commit 4668fcd
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 7 deletions.
diff --git a/frontend/src/components/ScheduleCreation.vue b/frontend/src/components/ScheduleCreation.vue
@@ -504,10 +504,10 @@ watch(
  {{ t("label.availableDays") }}
  </div>
  <bubble-select
- class="bubble-select"
  :options="scheduleDayOptions"
  v-model="scheduleInput.weekdays"
  :required="true"
+ :disabled="!scheduleInput.active"
  />
  </div>
  <div>
@@ -709,6 +709,7 @@ watch(
  class="w-full rounded-md disabled:cursor-not-allowed"
  :small-text="true"
  maxLength="16"
+ :disabled="!scheduleInput.active"
  >
  {{ t("label.quickLink") }}
  </text-input>
@@ -872,10 +873,6 @@ watch(
  display: block;
 }
 
-.bubble-select {
- gap: .25rem;
-}
-
 .edit-link-btn {
  min-width: auto;
 }

diff --git a/frontend/src/tbpro/elements/BubbleSelect.vue b/frontend/src/tbpro/elements/BubbleSelect.vue
@@ -5,10 +5,12 @@ import { SelectOption } from '@/models';
 interface Props {
  options: SelectOption[];
  required: boolean;
+ disabled?: boolean;
 }
 
 withDefaults(defineProps<Props>(), {
  required: false,
+ disabled: false,
 });
 
 const model = defineModel<number[]>({ default: [] });
@@ -51,10 +53,13 @@ const toggleBubble = (option: SelectOption) => {
  <button
  class="tbpro-bubble"
  :aria-pressed="model.indexOf(option.value) > -1"
- :class="{'selected': model.indexOf(option.value) > -1}"
+ :class="{
+ 'selected': model.indexOf(option.value) > -1,
+ disabled,
+ }"
  :title="option.label ?? String(option.value)"
  type="button"
- @click="() => toggleBubble(option)"
+ @click="() => !disabled ? toggleBubble(option) : null"
  >
  {{ option.label }}
  </button>
@@ -110,4 +115,12 @@ const toggleBubble = (option: SelectOption) => {
 .required {
  color: var(--colour-ti-critical);
 }
+.disabled {
+ cursor: default;
+}
+.selected.disabled {
+ background-color: var(--colour-neutral-border);
+ border-color: var(--colour-ti-muted);
+ color: var(--colour-ti-muted);
+}
 </style>
diff --git a/frontend/src/tbpro/elements/TextInput.vue b/frontend/src/tbpro/elements/TextInput.vue
@@ -167,6 +167,7 @@ const onChange = () => {
  overflow: hidden;
  max-width: 40%;
  text-wrap: nowrap;
+ z-index: 1;
  }
 
  .tbpro-input-element {