[webpack.ue.manage] SCSS for adding/removing formations to an existing cours|td|tp (must implement now in JS)

public_html/asset/svg/plus.svg

@@ -0,0 +1,45 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   enable-background="new 0 0 24 24"
+   height="24px"
+   id="Layer_1"
+   version="1.1"
+   viewBox="0 0 24 24"
+   width="24px"
+   xml:space="preserve"
+   sodipodi:docname="plus.svg"
+   inkscape:version="0.92.2 5c3e80d, 2017-08-06"><metadata
+     id="metadata9"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
+     id="defs7" /><sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1015"
+     id="namedview5"
+     showgrid="false"
+     inkscape:zoom="9.8333333"
+     inkscape:cx="12"
+     inkscape:cy="12"
+     inkscape:window-x="0"
+     inkscape:window-y="29"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="Layer_1" /><path
+     d="m 23.008475,14.610169 h -8.5 v 8.5 c 0,0.276 -0.224,0.5 -0.5,0.5 h -4 c -0.2760004,0 -0.5000004,-0.224 -0.5000004,-0.5 v -8.5 h -8.5 c -0.27600002,0 -0.50000002,-0.224 -0.50000002,-0.5 v -4 c 0,-0.2759995 0.224,-0.4999995 0.50000002,-0.4999995 h 8.5 v -8.5 c 0,-0.27600001 0.224,-0.50000001 0.5000004,-0.50000001 h 4 c 0.276,0 0.5,0.224 0.5,0.50000001 v 8.5 h 8.5 c 0.276,0 0.5,0.224 0.5,0.4999995 v 4 c 0,0.276 -0.224,0.5 -0.5,0.5 z"
+     id="fill-edit"
+     inkscape:connector-curvature="0"
+     style="clip-rule:evenodd;fill-rule:evenodd" /></svg>

webpack.config.js

@@ -43,7 +43,7 @@ module.exports = [ {
 	output: {
 		path: path.resolve(__dirname, './public_html/js/bundle'),
 		publicPath: '/js/bundle/',
-		filename: 'home@[hash].js'
+		filename: 'home@0.js'
 	},
 	module: mod_common,
 	devtool: (process.env.NODE_ENV==='development') ? '#eval-source-map' : false
@@ -55,7 +55,7 @@ module.exports = [ {
     output: {
         path: path.resolve(__dirname, './public_html/js/bundle'),
         publicPath: '/js/bundle/',
-        filename: 'teacher@[hash].js'
+        filename: 'teacher@0.js'
     },
     module: mod_common,
     devtool: (process.env.NODE_ENV==='development') ? '#eval-source-map' : false
@@ -67,7 +67,7 @@ module.exports = [ {
     output: {
         path: path.resolve(__dirname, './public_html/js/bundle'),
         publicPath: '/js/bundle/',
-        filename: 'ue@[hash].js'
+        filename: 'ue@0.js'
     },
     module: mod_common,
     devtool: (process.env.NODE_ENV==='development') ? '#eval-source-map' : false
@@ -79,7 +79,7 @@ module.exports = [ {
     output: {
         path: path.resolve(__dirname, './public_html/js/bundle'),
         publicPath: '/js/bundle/',
-        filename: 'fiche@[hash].js'
+        filename: 'fiche@0.js'
     },
     module: mod_common,
     devtool: (process.env.NODE_ENV==='development') ? '#eval-source-map' : false
@@ -91,7 +91,7 @@ module.exports = [ {
     output: {
         path: path.resolve(__dirname, './public_html/js/bundle'),
         publicPath: '/js/bundle/',
-        filename: 'settings@[hash].js'
+        filename: 'settings@0.js'
     },
     module: mod_common,
     devtool: (process.env.NODE_ENV==='development') ? '#eval-source-map' : false
@@ -103,7 +103,7 @@ module.exports = [ {
 	output: {
 		path: path.resolve(__dirname, './public_html/js/bundle'),
 		publicPath: '/js/bundle/',
-		filename: 'login@[hash].js'
+		filename: 'login@0.js'
 	},
 	module: mod_common,
 	devtool: (process.env.NODE_ENV==='development') ? '#eval-source-map' : false

webpack/component/ue/manage.vue

@@ -25,7 +25,21 @@
 				<div :data-prof='c.idProf'>{{ c.idProf ? `${c.firstName} ${c.lastName}` : 'Aucun enseignant affecté' }}</div>
 				<div>{{ c.volume }}</div>
 				<div class='taglist'>
-					<span v-for='f in c.formations' class='tag'>{{ gstore.form_by_id(f).labelForm || '???' }}</span>
+					<div v-for='f in c.formations' data-action>
+					 	<span class='tag'>{{ gstore.form_by_id(f).labelForm || '???' }}</span>
+						<span data-remove @click='gstore.rem_for(0, c.idCours, f)'></span>
+					</div>
+
+					<div data-action>
+					 	<select class='tag'>
+						 	<option value='-' disbabled selected>Ajouter</option>
+						 	<option
+							 	v-for='f in gstore.formations'
+								v-show='c.formations.indexOf(f.idForm) < 0'
+								:value='f.idForm'>{{ f.labelForm }}</option>
+						 </select>
+						<span class='pointer' data-create @click='gstore.add_for(0, c.idCours)'></span>
+					</div>
 				</div>
 
 			</section>
@@ -42,7 +56,21 @@
 				<div :data-prof='td.idProf'>{{ td.idProf ? `${td.firstName} ${td.lastName}` : 'Aucun enseignant affecté' }}</div>
 				<div>{{ td.volume }}</div>
 				<div class='taglist'>
-					<span v-for='f in td.formations' class='tag'>{{ gstore.form_by_id(f).labelForm || '???' }}</span>
+					<div v-for='f in td.formations' data-action>
+					 	<span class='tag'>{{ gstore.form_by_id(f).labelForm || '???' }}</span>
+						<span data-remove @click='gstore.rem_for(1, td.idTD, f)'></span>
+					</div>
+
+					<div data-action>
+					 	<select class='tag'>
+						 	<option value='-' disbabled selected>Ajouter</option>
+						 	<option
+							 	v-for='f in gstore.formations'
+								v-show='td.formations.indexOf(f.idForm) < 0'
+								:value='f.idForm'>{{ f.labelForm }}</option>
+						 </select>
+						<span class='pointer' data-create @click='gstore.add_for(1, td.idTD)'></span>
+					</div>
 				</div>
 
 			</section>
@@ -59,7 +87,21 @@
 				<div :data-prof='tp.idProf'>{{ tp.idProf ? `${tp.firstName} ${tp.lastName}` : 'Aucun enseignant affecté' }}</div>
 				<div>{{ tp.volume }}</div>
 				<div class='taglist'>
-					<span v-for='f in tp.formations' class='tag'>{{ gstore.form_by_id(f).labelForm || '???' }}</span>
+					<div v-for='f in tp.formations' data-action>
+					 	<span class='tag'>{{ gstore.form_by_id(f).labelForm || '???' }}</span>
+						<span data-remove @click='gstore.rem_for(2, tp.idTP, f)'></span>
+					</div>
+
+					<div data-action>
+					 	<select class='tag'>
+						 	<option value='-' disbabled selected>Ajouter</option>
+						 	<option
+							 	v-for='f in gstore.formations'
+								v-show='tp.formations.indexOf(f.idForm) < 0'
+								:value='f.idForm'>{{ f.labelForm }}</option>
+						 </select>
+						<span class='pointer' data-create @click='gstore.add_for(2, tp.idTP)'></span>
+					</div>
 				</div>
 
 			</section>

webpack/scss/global.scss

@@ -45,3 +45,7 @@ a{
 	color: $secondary-color;
 }
 
+/* (6) pointer cursor (2 times the class to increase priority) */
+.pointer.pointer{
+	cursor: pointer;
+}

webpack/scss/global/tag.scss

@@ -14,10 +14,17 @@
 	flex-wrap:       wrap;
 
 	/* (9.1) inner tags */
-	& > span.tag{
+	& .tag,
+	& [data-action] .tag + span[data-remove],
+	& [data-action] .tag + span[data-create]{
+		display: inline-block;
+		position: relative;
+
 		padding: .2em .5em;
+		margin-top: .2em;
 		margin-right: .5em;
 
+
 		border: 1px solid lighten($form-neutral-color, 5%);
 		border-radius: 3px;
 
@@ -32,6 +39,78 @@
 		&.invalid{ border-color: lighten($form-invalid-color, 20%); }
 		&.search{  border-color: lighten($form-search-color,  10%); }
 
+
+	}
+
+	/* (9.2) container for action tags */
+	& [data-action]{
+
+		display: flex;
+		flex-direction: row;
+		justify-content: center;
+		flex-wrap: nowrap;
+
+		.tag{
+
+			border-radius: 3px 0 0 3px;
+			margin-right: 0;
+
+			/* (9.2.1) Removable tags */
+			& + span[data-remove]{
+				display: inline-block;
+				position: relative;
+					width: .8em;
+					height: 1.3em;
+
+				border-left: 0;
+				border-radius: 0 3px 3px 0;
+
+				background: #fff url('/asset/svg/cross.svg@aaaaaa') center center no-repeat;
+				background-size: 40% auto;
+
+				cursor: pointer;
+				z-index: 102;
+
+				&:hover{ background-image: url('/asset/svg/cross.svg@#{$rd-form-invalid-color}'); }
+
+			}
+
+			/* (9.2.2) NEW tags */
+			& + span[data-create]{
+				display: inline-block;
+				position: relative;
+					width: .8em;
+					height: 1.3em;
+
+				border-left: 0;
+				border-radius: 0 3px 3px 0;
+
+				background: #fff url('/asset/svg/plus.svg@aaaaaa') center center no-repeat;
+				background-size: 40% auto;
+
+				cursor: pointer;
+				z-index: 102;
+
+				&:hover{ background-image: url('/asset/svg/plus.svg@#{$rd-form-valid-color}'); }
+
+			}
+
+		}
+
+	}
+
+	/* (9.3) select tag */
+	& select.tag{
+		height: 1.8em;
+		margin-left: 0;
+		padding-right: 1em;
+
+		-webkit-appearance: none;
+		-moz-appearance:    none;
+		appearance:         none;
+
+		background: transparent url('/asset/svg/down_arrow.svg@bbbbbb') right .5em bottom .1em no-repeat;
+		background-size: auto 80%;
 	}
 
 }