Styled types and calendars selection

Author: almerk

client/src/components/Main.vue

@@ -2,20 +2,20 @@
 <div id="main">
  <aside>
  <toolbar>
- <label>Types</label>
- <nav>
+ <fieldset>
+  <legend @click="showOrHideAllTypes()">Types</legend>
  <label v-for="type in types" :key="type.id">
  <input type="checkbox" :value="type.id" v-model="selectedTypeIds"/>
  <span>{{type.name}}</span>
  </label>
- </nav>
- <label>Calendars</label>
- <nav>
- <label v-for="calendar in calendars" :key="calendar.id">
+ </fieldset>
+ <fieldset>
+  <legend @click="showOrHideAllCalendars()">Calendars</legend>
+ <label v-for="calendar in calendars" :key="calendar.id" :class="['']">
  <input type="checkbox" :value="calendar.id" v-model="selectedCalendarIds" :disabled="!inArray(calendar.typeId, selectedTypeIds)"/>
  <span>{{calendar.name}}</span>
  </label>
- </nav>
+ </fieldset>
  </toolbar>
  </aside>
  <main>
@@ -45,6 +45,19 @@ export default {
  methods: {
  inArray(value, array){
  return array.includes(value);
+ },
+ showOrHideAllTypes() {
+ this.selectedTypeIds = this.showOrHide(this.selectedTypeIds, this.types.map(x => x.id));
+ },
+ showOrHideAllCalendars() {
+ const canBeDisplayed = this.calendars
+ .filter(x => this.selectedTypeIds.includes(x.typeId))
+ .map(x => x.id);
+ this.selectedCalendarIds = this.showOrHide(this.selectedCalendarIds, canBeDisplayed);
+ },
+ showOrHide(current, full){
+ const notIn = full.filter(x => !current.includes(x))
+ return notIn.length == 0? [] : full;
  }
  },
  created(){
@@ -97,10 +110,5 @@ export default {
  overflow:auto;
  height: 100%;
  }
- #toolbar nav {
- display: flex;
- flex-direction: column;
- }
- 
- 
+
 </style> 

client/src/components/toolbar.vue

@@ -1,21 +1,72 @@
 <template>
- <div id="toolbar">
-  <header>
-  {{ header }}
-  </header>
-  <slot></slot>
- </div>
+ <form id="toolbar">
+ <header>
+ {{ header }}
+ </header>
+ <slot></slot>
+ </form>
 </template>
 
 <script>
 export default {
-  data() {
-  return {
-  header:"📅 Calendario" 
-  } 
-  }
-}
+ data() {
+ return {
+ header: "📅 Calendario",
+ };
+ },
+};
 </script>
 
 <style>
+#toolbar {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ width: 100%;
+}
+#toolbar header {
+ font-family: Arial, Helvetica, sans-serif;
+}
+#toolbar fieldset {
+ display: flex;
+ flex-direction: column;
+ margin: 0.5em 0;
+ height: auto;
+ min-width: 0;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ border:none;
+}
+#toolbar label,
+#toolbar legend {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ cursor: pointer;
+}
+#toolbar fieldset legend {
+ margin-bottom: 0.25em;
+}
+#toolbar input ~ span {
+ font-weight: 500;
+}
+#toolbar input:checked ~ span {
+ font-weight: 700;
+}
+#toolbar input:disabled ~ span {
+ opacity: 0.6;
+ cursor: auto;
+}
+#toolbar input[type="checkbox"] {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ margin: -1px;
+ border: 0;
+ padding: 0;
+ white-space: nowrap;
+ clip-path: inset(100%);
+ clip: rect(0 0 0 0);
+ overflow: hidden;
+}
 </style>