自訂名單：更新新增與檢視自訂名單

HiTeachCC/ClientApp/src/assets/css/Board.less

@@ -651,7 +651,7 @@ svg {
   }
 }
 .editmemberlist-view{
-  position: absolute;
+  position: fixed;
   display: block;
   width: 100%;
   background-color: rgba(0, 0, 0, 0.8);
@@ -659,15 +659,32 @@ svg {
   color: black;
   height: 100%;
   z-index: 1016;
+
   .addmember-card{
     text-align: left !important;
   }
+  .closebtn {
+    cursor: pointer;
+    position:absolute;
+    top: -12px;
+    right:-10px;
+    width: 30px;
+    height: 30px;
+    line-height: 27px;
+    background-color: #d8d8d8;
+    text-align: center;
+    border-radius: 50%;
+    z-index: 1017;
+  }
+  
+  .closebtn img {
+    width: 80%;
+  }
   .editmemberlist-card {
     top: 8%;
-    min-width: 500px;
-    overflow: auto;
+    max-width: 500px;
     transition: 0.5s;
-    position: absolute;
+    position: relative;
     left: 50%;
     transform: translateX(-50%);
     background-color: #ededed;
@@ -677,19 +694,101 @@ svg {
     box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
     z-index: 1002;
     text-align: center;
+    .memberlist-wrap {
+      display: flex;
+      background-color: #fcfcfc;
+      border-width: 2px;
+      border-radius: 4px;
+      border: 1px solid #ccc !important;
+      margin:10px 5px;
+      
+      .listitems {
+        flex:1;
+        .listitem-light{
+          color: blue;
+          border: 1px solid blue !important;
+          border-bottom: 1px solid blue !important;
+        }
+        .listitem {
+          width: 100%;
+          cursor: pointer;
+          display: inline-block !important;
+          background-color: #fcfcfc;
+          border-width: 2px;
+          border: 1px solid transparent ;
+          border-bottom: 1px solid #ccc ;
+          padding: 5px;
+          font-size: 16px;
+          &:hover {
+            // background-color: darken(#fcfcfc, 10%);
+            color: blue;
+            border: 1px solid blue !important;
+          }
+        }
+      }
+      .listDetail {
+        background-color: #fcfcfc;
+        border-width: 2px;
+        border-radius: 4px;
+        border-left: 1px solid #ccc !important;
+        flex: 1;
+        padding: 10px;
+        text-align: left;
+        background-color: #fcfcfc;
+        overflow: auto;
+        .list-stu{
+          font-size: 14px;
+        }
+        .list-info{
+          text-align: center;
+          margin-top: 10%;
+          color: gray;
+          font-size: 14px;
+        }
+      }
+     
+    }
     .editmemberlist-title {
       font-size: 20px;
       color: #3d3d3d;
       text-align: left;
       margin-left:5px;
     }
+    .editmemberlist-rightbtns{
+      position: absolute;
+      right:15px;
+      top:10px;
+      *{
+        display: inline-block;
+        &:hover{
+          fill: blue !important;
+          stroke:blue !important;
+        }
+      }
+      .delete-btn{
+        padding:10px;
+        font-size: 20px;
+        fill:black;
+        cursor: pointer;
+      }
+      .add-btn{
+        padding:10px;
+        font-size: 20px;
+        stroke:black;
+        cursor: pointer;
+      }
+    }
     .add-title{
       font-size: 16px;
       color: #3d3d3d;
       text-align: left;
       margin-left:5px;
       padding: 5px;
-      border-radius: 5px;
+      border-radius: 4px;
+      border: 1px solid #ccc;
+      &:focus{
+        border: 2px solid blue;
+      }
     }
     .addmember-area{
       background-color: #fff;
@@ -703,8 +802,12 @@ svg {
         width: 100%;
       }
       textarea{
-        border:1px solid blue;
+        font-size: 14px;
+        border: 1px solid #ccc;
         padding: 5px;
+        &:focus{
+          border: 2px solid blue;
+        }
       }
     }
     .editmemberlist-empty{
@@ -723,6 +826,15 @@ svg {
     .editmemberlistbtn-group {
       display: flex;
       align-items: center;
+      .editmemberlist-disabledBtn{
+        cursor: not-allowed !important;
+        color: rgba(128, 128, 128, 0.3) !important;
+        background-color: #d8d8d8 !important;
+        &:hover {
+          color: rgba(128, 128, 128, 0.3);
+       
+        }
+      }
       .editmemberlist-btn {
         cursor: pointer;
         flex: 1;
@@ -732,10 +844,11 @@ svg {
         border-radius: 5px;
         text-align: center;
         background-color: #d8d8d8;
-        &:first-child {
+        &:first-child , &:nth-child(2){
           color: white;
           background-color: @btn-color;
         }
+        
       }
     }
   }

HiTeachCC/ClientApp/src/assets/icons/svg/trash-alt-solid.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!-- Font Awesome Pro 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) -->
+    <path d="M32 464a48 48 0 0 0 48 48h288a48 48 0 0 0 48-48V128H32zm272-256a16 16 0 0 1 32 0v224a16 16 0 0 1-32 0zm-96 0a16 16 0 0 1 32 0v224a16 16 0 0 1-32 0zm-96 0a16 16 0 0 1 32 0v224a16 16 0 0 1-32 0zM432 32H312l-9.4-18.7A24 24 0 0 0 281.1 0H166.8a23.72 23.72 0 0 0-21.4 13.3L136 32H16A16 16 0 0 0 0 48v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16z"/>
+</svg>

HiTeachCC/ClientApp/src/views/Board.vue

@@ -18,30 +18,63 @@
    
     <!--簡易自訂名單介面-->
     <div class="editmemberlist-view" v-show="showEditMemberList">
+     
       <div class="editmemberlist-card" v-show="!showAddMemberList">
+           <div class="closebtn" @click="closeEditMemberList()"><img src="@/statics/iconsvg/interaction/Close.svg" class="q-icon" /></div>   
            <p class="editmemberlist-title">{{ '自訂學生名單' }}</p>
-           
+           <div class="editmemberlist-rightbtns" v-show="testMemberlist.length>0">
+              <div class="add-btn" @click="openAddMemberList()"><svg-icon icon-class="new-page" /></div>
+              <div class="delete-btn"><svg-icon icon-class="trash-alt-solid"  /></div>
+           </div>
+          
            <div class='editmemberlist-empty' v-show="testMemberlist.length==0">
             <div @click="openAddMemberList()"><svg-icon icon-class="new-page" class="add-icon" /><br>創建名單</div>
            </div>
-           <div class="editmemberlistbtn-group">
+           <div class='memberlist-wrap' v-if="testMemberlist.length>0">
+              <div class="listitems">
+                <div class="listitem" v-for="(list,index) in testMemberlist" :key="list.listName+index" @click="setCurrentMemberList(list)" :class="{ 'listitem-light':currentMemberList.listName==list.listName}">
+                  {{list.listName}}
+                </div>
+              </div>
+              <div class="listDetail" :style="{'min-height':tableHeight+'px'}">
+                <div class="list-stu"  v-show="Object.keys(currentMemberList).length>=0" v-for="(stu,index) in currentMemberList.list" :key="index+stu.seatID+stu.memberName"  >
+                  {{stu.seatID}} {{stu.memberName}}
+                </div>
+                <div class="list-info" v-show="Object.keys(currentMemberList).length==0" >
+                  {{'點選左側指定可加入的學生名單'}}
+                </div>
+              </div>
+           </div>
+        <!-- <div class="editmemberlistbtn-group">
           <div class="editmemberlist-btn"  v-show="testMemberlist.length!==0">{{ '儲存' }}</div>
           <div class="editmemberlist-btn" @click="closeEditMemberList()">{{ $t("board['取消']") }}</div>
-        </div>
+        </div> -->
+       
       </div>
       <div class="editmemberlist-card addmember-card" v-show="showAddMemberList">
            <input type='text' class="add-title" v-model="currentEditMemberListName" placeholder="新建的學生名單...">
            
            <div class='addmember-area' >
-            <textarea  class='left-part' v-model='addmemberlisttext' name="addmember" id="" cols="30" rows="10"></textarea>
-            <Table class='right-part' :no-data-text="`<p>NoData</p>`" :columns="columns1" :data="tempAddMemberList" :row-class-name="hintBugRow" ></Table>
+            <textarea  class='left-part' v-model='addmemberlisttext' name="addmember" id="" cols="30" rows="10" placeholder="輸入名單資料..."></textarea>
+            <div class='right-part'>
+               <Table  :fixed-header="true" :height="tableHeight" :no-data-text="`<p>暫無資料</p>`" :columns="columns1" :data="tempAddMemberList" :row-class-name="hintBugRow" ></Table>
+            </div>
+           </div>
+           <div v-show="addMemberListErrMsg.length>0" class='e'>
+             <div v-for="(text) in addMemberListErrMsg" :key='text'>
+              {{text}}
+             </div>
            </div>
+           <div v-show='showAddMemberAutoSeatIDMsg'>
+              {{'無法辨識座號規則，系統採自動編號'}}
+           </div> 
            <div class="editmemberlistbtn-group">
           <div class="editmemberlist-btn"  @click="checkAddMemberList()">{{ '預覽表格' }}</div>
-           <div class="editmemberlist-btn" >{{ '儲存預覽表格' }}</div>
-          <div class="editmemberlist-btn" @click="closeEditMemberList()">{{ $t("board['取消']") }}</div>
+           <div class="editmemberlist-btn" @click="saveTestMemberList()" :class='{"editmemberlist-disabledBtn":addMemberListErrMsg.length>0||currentEditMemberListName==""||addmemberlisttext==""||tempAddMemberList.length==0}'>{{ '儲存預覽表格' }}</div>
+          <div class="editmemberlist-btn" @click="showAddMemberList=false">{{ $t("board['取消']") }}</div>
         </div>
       </div>
+     
     </div>
    
    
@@ -136,8 +169,8 @@
               <div class="memberlist-page" v-show='showMemberlist'>
               <!-- <div class="previusImgBtn2" ><svg-icon icon-class="previusImgBtn" class="ImgBtn-icon" /></div> -->
                 <div class="memberfreebtn" @click="setCurrentMemberList({})" :class="{ 'memberfreebtn-light':Object.keys(currentMemberList).length==0}" >自由加入</div>
-                <div class="memberfreebtn" @click="openEditMemberListAtInit()"  >創建自訂學生名單</div>
-                <div class='memberlist-wrap' v-show="testMemberlist.length>0">
+                <div class="memberfreebtn" @click="openEditMemberListAtInit()" v-if="testMemberlist.length==0">創建自訂學生名單</div>
+                <div class='memberlist-wrap' v-if="testMemberlist.length>0">
                   <div class="listitems">
                     <div class="listitem" v-for="(list,index) in testMemberlist" :key="list.listName+index" @click="setCurrentMemberList(list)" :class="{ 'listitem-light':currentMemberList.listName==list.listName}">
                       {{list.listName}}
@@ -770,6 +803,7 @@ export default {
       currentMenuObj: {},
       showObjMenuTextCopyOption: false,
       currentObjMenuCopyText: '',
+      //加入
       showClassNum:false,
       showMemberlist:true,
       currentMemberList:{},
@@ -792,7 +826,11 @@ export default {
           sortable: true
       },
        ],
-      tempAddMemberList: []
+      tempAddMemberList: [],
+      addMemberListErrMsg:[],
+      showAddMemberAutoSeatIDMsg:false,
+      addMemberListErrRow:[], // 存放預覽有問題的行數
+      editMemberListMode:'Init', //Init or Menu
     }
   },
   methods: {
@@ -6891,26 +6929,89 @@ export default {
       console.log(this.memberList)
     },
     openEditMemberListAtInit(){
+        this.editMemberListMode='Init'
         this.showEditMemberList=true
     },
     openEditMemberList(){
       console.log('開名單')
+      this.editMemberListMode='Menu'
       this.showEditMemberList=true
       this.Hishow=false
     },
     openAddMemberList(){
       this.showAddMemberList=true
+      this.tempAddMemberList=[]
+      this.addMemberListErrRow=[]
+      this.addMemberListErrMsg=[]
+      this.currentEditMemberListName='自訂名單'+(this.testMemberlist.length+1)
+      this.currentEditMemberList={}
+      this.addmemberlisttext=''
+      this.showAddMemberAutoSeatIDMsg=false
     },
     closeEditMemberList(){
        this.showEditMemberList=false
        this.showAddMemberList=false
     },
+    hasDuplicates(arr) {
+      return arr.some(x => arr.indexOf(x) !== arr.lastIndexOf(x));
+    },
+    setAddMemberErrMsg(Msg){
+      if(this.addMemberListErrMsg.indexOf(Msg)==-1){
+             this.addMemberListErrMsg.push(Msg)
+        }
+    },
     checkAddMemberList(){
       this.tempAddMemberList=[]
+      this.addMemberListErrRow=[]
+      this.addMemberListErrMsg=[]
       let data=this.addmemberlisttext.replaceAll('\n',',').split(',').filter(item=>item!='')
-      console.log(data)
+      data=data.map(item=>item.trim())
+      let isAutoSeatID=false
+      this.showAddMemberAutoSeatIDMsg=false
+      //檢測座號是否皆為數字，部分有部分沒有就直接自動編號
+      if(data.length%2==1){
+        isAutoSeatID=true
+
+      }  
+      else{
+        data.forEach((item,index)=>{
+        if(index%2==1&&isNaN(parseInt(item))){ 
+          isAutoSeatID=true
+        }
+      })
+      } 
+      // console.log(isAutoSeatID,'isAutoSeatID')
+      if(!isAutoSeatID){
+      //檢測座號是否重複
+      const seatIDs=data.filter((item,index)=>index%2==1)
+      // console.log(seatIDs)
+      if(this.hasDuplicates(seatIDs) ){
+         this.setAddMemberErrMsg('帶有重複座號')
+     
+         let firstAppearID=[]
+        seatIDs.forEach((id,index)=>{
+         
+          const itemIndex=firstAppearID.findIndex(item=>item.id==id)
+          if( itemIndex==-1) firstAppearID.push({id:id,count:1,index:index})
+          else{
+            seatIDs.forEach(subId=>{
+              if(id==subId){
+                this.addMemberListErrRow.push(index)
+              }
+            })
+          }
+        })
+        // console.log(firstAppearID)
+      }
       data.forEach((item,index)=>{
-        if(index%2&&!isNaN(parseInt(item))){
+        //檢測座號是否<=999
+        // console.log(index%2)
+        if(index%2==1&&parseInt(item)>999){
+          this.setAddMemberErrMsg('座號應設置於1-999')
+          this.addMemberListErrRow.push(parseInt(index/2))
+
+        }
+        if(index%2==1&&!isNaN(parseInt(item))){
            this.tempAddMemberList.push({
             seatID:item,
             memberID:this.tempAddMemberList.length,
@@ -6918,12 +7019,35 @@ export default {
           })
         }
       })
+      }
+      else{
+        this.showAddMemberAutoSeatIDMsg=true
+        data.forEach((item,index)=>{
+        if(item){
+           this.tempAddMemberList.push({
+            seatID:index+1,
+            memberID:this.tempAddMemberList.length,
+            memberName:data[index]
+          })
+        }
+        })
+      }
+    },
+    saveTestMemberList(){
+      if(this.addMemberListErrMsg.length===0&&this.addmemberlisttext!=''&&this.tempAddMemberList.length!=0){
+         this.testMemberlist.push({
+         listName:this.currentEditMemberListName,
+         list:this.tempAddMemberList
+      })
+      this.editMemberListMode=='Init'?this.closeEditMemberList(): this.showAddMemberList=false
+      }
     },
     hintBugRow(row,index){
-       if(index===1){
-               return 'demo-table-info-row';
+      // console.log(this.addMemberListErrRow,index)
+       if(this.addMemberListErrRow.indexOf(index)!=-1){
+         return 'demo-table-info-row';
        }
-        return '';
+       return '';
     }
   },
 
@@ -7418,7 +7542,11 @@ export default {
     },
     isEditingTextNow() {
       return this.$store.state.isEditingTextNow
+    },
+    tableHeight(){
+      return window.innerHeight*0.5<250?250:window.innerHeight*0.5
     }
+
   },
   watch: {
     // classInfo(classInfo){
@@ -7579,6 +7707,15 @@ export default {
           this.showIdlelogout = true
         }, 1000 * 60 * 60)
       }
+    },
+    currentEditMemberListName(v){
+      if(v=='') this.setAddMemberErrMsg('名單名稱不可為空')
+      else {
+        const index=this.addMemberListErrMsg.indexOf('名單名稱不可為空')
+        if(index!=-1){
+          this.addMemberListErrMsg.splice(index,1)
+        }
+      } 
     }
     
   },
@@ -7598,6 +7735,7 @@ export default {
 .ivu-table .demo-table-info-row td{
         background-color: pink;
     }
+ 
 .q-circular-progress__text {
   font-weight: bolder;
   color: orangered !important;