Tab field styling, load tab field content on switch

r3-fabian · Dec 6, 2022 · d457f53 · d457f53
1 parent fd13e11
commit d457f53
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 25 deletions.
diff --git a/www/comps/app.css b/www/comps/app.css
@@ -138,8 +138,10 @@ body                                         { --depth:6; }
 .settings .backup-code                       { --depth:0; }
 .field                                       { --depth:0; }
 .field .disabled                             { --depth:6; }
-.field .tabs-entries                         { --depth:5; }
+.field .tabs-entries                         { --depth:6; }
 .field .tabs-entry.active                    { --depth:2; }
+.field .tabs-entry.active.showsCal           { --depth:4; }
+.field .tabs-entry.active.showsChart         { --depth:4; }
 .field .tabs-entry.active.showsData          { --depth:0; }
 .field .tabs-entry.active.showsList          { --depth:4; }
 .field .tabs-entry.active.showsTabs          { --depth:5; }
@@ -443,7 +445,7 @@ h3{
 	position:relative;
 }
 .contentBox .top{
-	padding:8px var(--spacing) 8px var(--spacing);
+	padding:0px var(--spacing);
 	line-height:30px;
 	background-color:var(--color-bg);
 	flex:0 0 auto;
@@ -503,7 +505,7 @@ h3{
 	display:flex;
 	flex-flow:row wrap;
 	align-items:center;
-	padding:4px 0px;
+	padding:12px 0px;
 }
 .contentBox .top .area.gap{
 	gap:9px;

diff --git a/www/comps/chart.js b/www/comps/chart.js
@@ -17,19 +17,20 @@ let MyChart = {
 		echarts:VueECharts
 	},
 	template:`<div class="chart shade">
-		<div class="top lower" v-if="showTopBar">
-			<div class="area" />
-			<div class="area">
-				<select class="selector"
-					v-if="hasChoices"
-					v-model="choiceId"
-					@change="choiceIdSet($event.target.value)"
-				>
-					<option v-for="c in choices" :value="c.id">
-						{{ getCaption(c.captions.queryChoiceTitle,c.name) }}
-					</option>
-				</select>
-			</div>
+		<div class="top lower" v-if="needsHeader || hasChoices">
+			<template v-if="hasChoices">
+				<div class="area" />
+				<div class="area">
+					<select class="selector"
+						v-model="choiceId"
+						@change="choiceIdSet($event.target.value)"
+					>
+						<option v-for="c in choices" :value="c.id">
+							{{ getCaption(c.captions.queryChoiceTitle,c.name) }}
+						</option>
+					</select>
+				</div>
+			</template>
 		</div>
 		<echarts ref="chart"
 			v-if="ready"
@@ -42,8 +43,8 @@ let MyChart = {
 		columns:      { type:Array,   required:true },
 		filters:      { type:Array,   required:true },
 		formLoading:  { type:Boolean, required:true },
-		isSingleField:{ type:Boolean, required:true },
 		limit:        { type:Number,  required:true },
+		needsHeader:  { type:Boolean, required:true },
 		optionJson:   { type:String,  required:true },
 		query:        { type:Object,  required:true }
 	},
@@ -67,7 +68,6 @@ let MyChart = {
 		// simple
 		choiceFilters:function() { return this.getChoiceFilters(this.choices,this.choiceId); },
 		hasChoices:   function() { return this.choices.length > 1; },
-		showTopBar:   function() { return this.hasChoices || this.isSingleField; },
 
 		// stores
 		settings:function() { return this.$store.getters.settings; }

diff --git a/www/comps/field.css b/www/comps/field.css
@@ -217,6 +217,21 @@
 .field .chart .actions{
 	flex:0 0 auto;
 }
+.field .chart-header{
+	display:flex;
+	flex-flow:row nowrap;
+	justify-content:flex-end;
+}
+.field .chart-header select{
+	height:30px;
+	font-size:inherit;
+	margin:10px;
+	padding:0px 5px;
+	box-sizing:border-box;
+	border-radius:4px;
+	color:var(--color-font);
+	background-color:var(--color-bg);
+}
 
 /* tabs field */
 .field .tabs{

diff --git a/www/comps/field.js b/www/comps/field.js
@@ -394,8 +394,8 @@ let MyField = {
 			:columns="columnsProcessed"
 			:filters="filtersProcessed"
 			:formLoading="formLoading"
-			:isSingleField="isAloneInForm"
 			:limit="field.query.fixedLimit"
+			:needsHeader="isAloneInForm || isAloneInTab"
 			:optionJson="field.chartOption"
 			:query="field.query"
 		/>
@@ -434,7 +434,7 @@ let MyField = {
 					:fieldIdMapState="fieldIdMapState"
 					:formBadSave="formBadSave"
 					:formIsPopUp="formIsPopUp"
-					:formLoading="formLoading"
+					:formLoading="tabLoading"
 					:formReadonly="formReadonly"
 					:isAloneInTab="t.fields.length === 1"
 					:isAloneInForm="false"
@@ -499,7 +499,8 @@ let MyField = {
 			notTouched:true,            // data field was not touched by user
 			showColorPickerInput:false, // for color picker fields
 			showPassword:false,         // for password fields
-			tabIndexShow:0              // tabs only: which tab is shown
+			tabIndexShow:0,             // tabs only: which tab is shown
+			tabLoading:true             // tabs only: replaces formLoading for tab fields
 		};
 	},
 	mounted:function() {
@@ -509,6 +510,8 @@ let MyField = {
 	watch:{
 		formLoading:function(val) {
 			if(!val) this.notTouched = true;
+
+			this.tabLoading = val;
 		},
 		isValid:{ // inform parent form about field validity
 			handler:function(v) { this.$emit('set-valid',v,this.field.id); },
@@ -990,9 +993,11 @@ let MyField = {
 			return {
 				active:tabIndex === this.tabIndexShow,
 				first:tabIndex === 0,
-				showsData:active && oneField && fields[0].content === 'data',
-				showsList:active && oneField && fields[0].content === 'list',
-				showsTabs:active && oneField && fields[0].content === 'tabs'
+				showsCal:  active && oneField && fields[0].content === 'calendar',
+				showsChart:active && oneField && fields[0].content === 'chart',
+				showsData: active && oneField && fields[0].content === 'data',
+				showsList: active && oneField && fields[0].content === 'list',
+				showsTabs: active && oneField && fields[0].content === 'tabs'
 			};
 		},
 
@@ -1066,8 +1071,12 @@ let MyField = {
 			else                     this.collectionIdMapIndexes[collectionId] = indexes;
 		},
 		setTab:function(tabIndex) {
-			this.tabIndexShow = tabIndex;
 			this.fieldOptionSet(this.field.id,'tabIndex',tabIndex);
+			this.tabIndexShow = tabIndex;
+
+			// inform tab fields about change
+			this.tabLoading = true;
+			this.$nextTick(() => this.tabLoading = false);
 		},
 		setValue:function(val,valOld,indexAttributeId) {
 			if(val === '')